:root {
  --cs-primary: #6c63ff;
  --cs-primary-2: #24b9f2;
  --cs-bg: #f5f7fb;
  --cs-panel: #ffffff;
  --cs-panel-2: #f0f3f9;
  --cs-text: #1f2937;
  --cs-muted: #6b7280;
  --cs-border: #e5e7eb;
  --cs-shadow: 0 18px 45px rgba(15, 23, 42, .08);
}
html[data-clickstar-theme="dark"] {
  --cs-bg: #070c15;
  --cs-panel: #0e1726;
  --cs-panel-2: #111d30;
  --cs-text: #eef2ff;
  --cs-muted: #91a0b7;
  --cs-border: #22324a;
  --cs-shadow: 0 18px 55px rgba(0, 0, 0, .34);
}
html[data-clickstar-theme="dark"] body,
html[data-clickstar-theme="dark"] .layout-page,
html[data-clickstar-theme="dark"] .content-wrapper { background: var(--cs-bg) !important; color: var(--cs-text); }
html[data-clickstar-theme="dark"] .card,
html[data-clickstar-theme="dark"] .modal-content,
html[data-clickstar-theme="dark"] .dropdown-menu,
html[data-clickstar-theme="dark"] .bg-navbar-theme,
html[data-clickstar-theme="dark"] .bg-menu-theme { background-color: var(--cs-panel) !important; color: var(--cs-text) !important; }
html[data-clickstar-theme="dark"] .menu-vertical,
html[data-clickstar-theme="dark"] .layout-navbar,
html[data-clickstar-theme="dark"] .card,
html[data-clickstar-theme="dark"] .modal-content { border-color: var(--cs-border) !important; }
html[data-clickstar-theme="dark"] .form-control,
html[data-clickstar-theme="dark"] .form-select,
html[data-clickstar-theme="dark"] .input-group-text { background-color: var(--cs-panel-2) !important; border-color: var(--cs-border) !important; color: var(--cs-text) !important; }
html[data-clickstar-theme="dark"] .form-control::placeholder { color: #708096; }
html[data-clickstar-theme="dark"] .text-muted { color: var(--cs-muted) !important; }
html[data-clickstar-theme="dark"] .table { --bs-table-color: var(--cs-text); --bs-table-bg: transparent; --bs-table-border-color: var(--cs-border); }
html[data-clickstar-theme="dark"] .menu-link,
html[data-clickstar-theme="dark"] .dropdown-item,
html[data-clickstar-theme="dark"] .navbar-nav .nav-link { color: var(--cs-text) !important; }
html[data-clickstar-theme="dark"] .menu-item.active > .menu-link { background: linear-gradient(135deg, rgba(108,99,255,.22), rgba(36,185,242,.13)) !important; }
.cs-theme-toggle {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cs-border); border-radius: 12px; background: var(--cs-panel); color: var(--cs-text);
  transition: .2s ease; cursor: pointer;
}
.cs-theme-toggle:hover { transform: translateY(-1px); box-shadow: var(--cs-shadow); }
.cs-gradient-btn { background: linear-gradient(100deg, var(--cs-primary), var(--cs-primary-2)) !important; border: 0 !important; color:#fff !important; }
.cs-soft-card { border: 1px solid var(--cs-border); border-radius: 18px; box-shadow: var(--cs-shadow); }

/* Auth */
.cs-auth-body { margin:0; min-height:100vh; background:var(--cs-bg); color:var(--cs-text); font-family:'Public Sans',system-ui,-apple-system,sans-serif; }
.cs-auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(520px,1.18fr); }
.cs-auth-hero { position:relative; overflow:hidden; min-height:100vh; padding:42px clamp(30px,5vw,82px); display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(145deg,#131633 0%,#11152a 45%,#07131c 100%); color:#eef2ff; border-right:1px solid rgba(141,158,255,.13); }
html[data-clickstar-theme="light"] .cs-auth-hero { background:linear-gradient(145deg,#161a3e 0%,#10152d 50%,#071722 100%); }
.cs-auth-hero::after { content:""; position:absolute; width:480px; height:480px; border:1px solid rgba(108,99,255,.22); border-radius:50%; right:-220px; bottom:-165px; box-shadow:0 0 0 58px rgba(36,185,242,.035),0 0 0 118px rgba(108,99,255,.025); }
.cs-auth-brand { display:flex; align-items:center; gap:12px; position:relative; z-index:2; }
.cs-auth-brand img { width:48px; height:48px; object-fit:contain; border-radius:14px; background:linear-gradient(135deg,#6963ff,#24b9f2); padding:7px; }
.cs-auth-brand strong { font-size:20px; letter-spacing:-.02em; }
.cs-auth-brand small { display:block; color:#8292b1; font-size:10px; margin-top:2px; }
.cs-auth-copy { max-width:650px; position:relative; z-index:2; }
.cs-auth-kicker { text-transform:uppercase; color:#8593df; letter-spacing:.18em; font-weight:700; font-size:11px; margin-bottom:16px; }
.cs-auth-copy h1 { font-size:clamp(38px,4vw,64px); line-height:1.04; letter-spacing:-.045em; margin:0 0 18px; font-weight:800; }
.cs-auth-copy p { color:#98a8c6; line-height:1.75; max-width:620px; }
.cs-auth-pills { display:flex; flex-wrap:wrap; gap:10px; position:relative; z-index:2; }
.cs-auth-pill { border:1px solid rgba(144,164,202,.16); background:rgba(8,14,25,.28); color:#9fb0cc; border-radius:999px; padding:8px 12px; font-size:11px; }
.cs-auth-main { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:36px; position:relative; background:var(--cs-bg); }
.cs-auth-top { position:absolute; right:28px; top:26px; }
.cs-auth-card { width:min(100%,520px); border:1px solid var(--cs-border); border-radius:24px; background:var(--cs-panel); padding:34px; box-shadow:var(--cs-shadow); }
.cs-auth-card-head { display:flex; gap:14px; align-items:center; margin-bottom:26px; }
.cs-auth-icon { width:46px; height:46px; border-radius:14px; background:rgba(108,99,255,.12); border:1px solid rgba(108,99,255,.24); display:grid; place-items:center; color:#8c7dff; font-size:22px; }
.cs-auth-label { color:#7990b6; text-transform:uppercase; letter-spacing:.15em; font-size:10px; font-weight:800; }
.cs-auth-card h2 { font-size:24px; margin:3px 0 4px; color:var(--cs-text); }
.cs-auth-card .subtitle { color:var(--cs-muted); margin:0; font-size:13px; }
.cs-field { margin-bottom:16px; }
.cs-field label { display:block; color:var(--cs-text); font-size:11px; font-weight:700; margin-bottom:7px; }
.cs-field .form-control { height:48px; border-radius:12px; background:var(--cs-panel-2); border:1px solid var(--cs-border); color:var(--cs-text); }
.cs-password { position:relative; }
.cs-password .form-control { padding-right:48px; }
.cs-password button { position:absolute; right:6px; top:6px; width:36px; height:36px; border:0; background:transparent; color:var(--cs-muted); border-radius:10px; }
.cs-auth-meta { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:11px; margin:7px 0 18px; }
.cs-auth-meta a { color:#8c7dff; text-decoration:none; }
.cs-auth-submit { width:100%; height:48px; border-radius:12px; font-weight:700; box-shadow:0 12px 28px rgba(75,110,255,.2); }
.cs-auth-switch { margin-top:16px; border:1px solid var(--cs-border); border-radius:13px; padding:11px 12px; display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--cs-muted); font-size:11px; }
.cs-auth-switch a { color:var(--cs-text); border:1px solid var(--cs-border); border-radius:10px; padding:8px 12px; text-decoration:none; font-weight:700; background:var(--cs-panel-2); }
.cs-auth-footerline { border-top:1px solid var(--cs-border); margin-top:20px; padding-top:15px; display:flex; justify-content:space-between; font-size:10px; color:var(--cs-muted); }

/* Backup manager */
.cs-backup-hero { border:1px solid var(--cs-border); background:linear-gradient(135deg,rgba(108,99,255,.11),rgba(36,185,242,.06)); border-radius:20px; padding:24px; margin-bottom:22px; }
.cs-backup-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0; }
.cs-backup-stat { border:1px solid var(--cs-border); background:var(--cs-panel); border-radius:16px; padding:16px; }
.cs-backup-stat small { display:block; color:var(--cs-muted); margin-bottom:6px; }
.cs-backup-stat strong { font-size:20px; color:var(--cs-text); }
.cs-backup-status { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:6px 10px; font-size:11px; font-weight:700; }
.cs-backup-status.ok { background:rgba(32,201,151,.12); color:#20c997; }
.cs-backup-status.running { background:rgba(255,193,7,.13); color:#d79d00; }
.cs-backup-status.error { background:rgba(220,53,69,.12); color:#dc3545; }
@media(max-width: 1050px){ .cs-auth-shell{grid-template-columns:1fr;} .cs-auth-hero{min-height:400px;} .cs-auth-main{min-height:auto;padding:34px 20px 60px;} .cs-backup-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width: 600px){ .cs-auth-hero{padding:28px 22px;min-height:360px;} .cs-auth-copy h1{font-size:38px;} .cs-auth-card{padding:24px 18px;} .cs-auth-top{right:16px;top:16px;} .cs-backup-grid{grid-template-columns:1fr;} }