:root{
  --bg:#0b1020;--bg-2:#0f1530;--panel:#121a37;--panel-2:#172046;
  --border:#1f2a55;--border-2:#2a3870;
  --text:#e7ecff;--muted:#8a96c8;--muted-2:#6172a8;
  --primary:#5b8cff;--primary-2:#7aa2ff;--primary-soft:rgba(91,140,255,.12);
  --success:#22c55e;--warning:#f59e0b;--danger:#ef4444;--info:#06b6d4;
  --gradient:linear-gradient(135deg,#5b8cff 0%,#9b6cff 50%,#ff6ec7 100%);
  --shadow:0 10px 30px -10px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.25);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
/* sidebar */
.sidebar{background:linear-gradient(180deg,#0d1330 0%,#0a0f25 100%);border-right:1px solid var(--border);padding:22px 16px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 22px;border-bottom:1px solid var(--border);margin-bottom:14px}
.brand-mark{width:36px;height:36px;border-radius:10px;background:var(--gradient);display:grid;place-items:center;font-weight:800;color:#fff;box-shadow:0 6px 18px rgba(91,140,255,.45)}
.brand-name{font-weight:700;letter-spacing:.3px}
.brand-sub{font-size:11px;color:var(--muted)}
.nav-group{margin:14px 0 6px;padding:0 8px;font-size:11px;letter-spacing:.12em;color:var(--muted-2);text-transform:uppercase}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--muted);font-weight:500;margin:2px 0;transition:.15s}
.nav a:hover{background:var(--panel);color:var(--text)}
.nav a.active{background:var(--primary-soft);color:var(--primary-2);box-shadow:inset 0 0 0 1px rgba(91,140,255,.25)}
.nav a .ico{width:18px;height:18px;display:inline-grid;place-items:center;opacity:.9}
.nav .badge{margin-left:auto;background:#1d2a5c;color:#a8b8ee;font-size:10px;padding:2px 7px;border-radius:999px}
.sidebar-footer{margin-top:18px;padding:12px;border-radius:12px;background:linear-gradient(135deg,rgba(91,140,255,.12),rgba(155,108,255,.12));border:1px solid var(--border-2)}
.sidebar-footer h5{margin:0 0 4px;font-size:13px}
.sidebar-footer p{margin:0 0 10px;font-size:12px;color:var(--muted)}
/* topbar */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:16px;padding:14px 28px;border-bottom:1px solid var(--border);background:rgba(11,16,32,.7);backdrop-filter:blur(10px);position:sticky;top:0;z-index:5}
.crumbs{color:var(--muted);font-size:13px}
.crumbs b{color:var(--text)}
.search{flex:1;max-width:520px;display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--border);padding:9px 12px;border-radius:10px;color:var(--muted)}
.search input{background:transparent;border:0;outline:0;color:var(--text);width:100%;font-size:13px}
.kbd{font-size:11px;background:#0a1029;border:1px solid var(--border-2);border-radius:6px;padding:2px 6px;color:var(--muted)}
.icon-btn{width:38px;height:38px;border-radius:10px;background:var(--panel);border:1px solid var(--border);display:grid;place-items:center;color:var(--muted);cursor:pointer;position:relative}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;background:var(--danger);border-radius:999px;border:2px solid var(--bg)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--gradient);display:grid;place-items:center;font-weight:700;color:#fff}
/* content */
.content{padding:28px;max-width:1400px;width:100%}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{margin:0;font-size:24px;letter-spacing:-.01em}
.page-head p{margin:6px 0 0;color:var(--muted)}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:var(--panel);color:var(--text);font-weight:600;font-size:13px;cursor:pointer;transition:.15s}
.btn:hover{background:var(--panel-2)}
.btn-primary{background:var(--gradient);border:0;box-shadow:0 8px 20px rgba(91,140,255,.35)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent}
.btn-danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:#fda4a4}
/* grid + cards */
.grid{display:grid;gap:18px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:2fr 1fr}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card h3{margin:0 0 4px;font-size:14px;color:var(--muted);font-weight:500}
.card .value{font-size:28px;font-weight:700;letter-spacing:-.02em}
.card .trend{display:inline-flex;gap:6px;align-items:center;font-size:12px;font-weight:600;padding:3px 8px;border-radius:999px;margin-top:10px}
.trend.up{background:rgba(34,197,94,.12);color:#86efac}
.trend.down{background:rgba(239,68,68,.12);color:#fca5a5}
.card .row{display:flex;align-items:center;justify-content:space-between}
.card-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary-2)}
.card-ico.g{background:rgba(34,197,94,.12);color:#86efac}
.card-ico.w{background:rgba(245,158,11,.12);color:#fcd34d}
.card-ico.p{background:rgba(155,108,255,.14);color:#c4b5fd}
/* section */
.section{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.section-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border)}
.section-head h2{margin:0;font-size:15px;letter-spacing:.01em}
.section-head .sub{font-size:12px;color:var(--muted)}
.section-body{padding:20px}
.tabs{display:flex;gap:4px;background:var(--bg-2);padding:4px;border-radius:10px;border:1px solid var(--border)}
.tab{padding:8px 14px;border-radius:8px;font-size:13px;color:var(--muted);cursor:pointer;font-weight:500}
.tab.active{background:var(--panel-2);color:var(--text);box-shadow:0 2px 6px rgba(0,0,0,.2)}
/* table */
table{width:100%;border-collapse:collapse}
th,td{padding:14px 20px;text-align:left;font-size:13px;border-bottom:1px solid var(--border)}
th{font-weight:600;color:var(--muted);background:rgba(255,255,255,.015);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
tbody tr:hover{background:rgba(255,255,255,.02)}
tbody tr:last-child td{border-bottom:0}
.domain{display:flex;align-items:center;gap:12px}
.domain-ico{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#1c2a60,#2a3870);display:grid;place-items:center;color:var(--primary-2);font-weight:700;font-size:12px}
.muted{color:var(--muted)}
.mono{font-family:'JetBrains Mono','SFMono-Regular',Menlo,Consolas,monospace;font-size:12.5px}
.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;background:var(--panel-2);color:var(--muted)}
.tag.ok{background:rgba(34,197,94,.12);color:#86efac}
.tag.warn{background:rgba(245,158,11,.14);color:#fcd34d}
.tag.err{background:rgba(239,68,68,.12);color:#fca5a5}
.tag.info{background:rgba(6,182,212,.12);color:#67e8f9}
.tag.dot::before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor;display:inline-block}
.type-pill{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;background:#1c2a60;color:#a8b8ee;min-width:40px;text-align:center}
.type-pill.A{background:#10325a;color:#7dd3fc}
.type-pill.AAAA{background:#172554;color:#a5b4fc}
.type-pill.CNAME{background:#3b1366;color:#d8b4fe}
.type-pill.MX{background:#3b2412;color:#fcd34d}
.type-pill.TXT{background:#102a1c;color:#86efac}
.type-pill.NS{background:#2a1140;color:#c4b5fd}
.type-pill.SRV{background:#3a1530;color:#f9a8d4}
/* chart */
.chart{height:240px;position:relative}
.chart svg{width:100%;height:100%}
/* progress */
.bar{height:6px;background:var(--bg-2);border-radius:999px;overflow:hidden}
.bar > span{display:block;height:100%;background:var(--gradient);border-radius:999px}
/* form */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12px;color:var(--muted);font-weight:600}
.field input,.field select,.field textarea{background:var(--bg-2);border:1px solid var(--border);padding:10px 12px;border-radius:9px;color:var(--text);font-size:13px;outline:0;font-family:inherit}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(91,140,255,.18)}
.form-row{display:grid;grid-template-columns:140px 1fr 120px 1fr 80px;gap:12px;align-items:end}
/* misc */
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}
.empty{text-align:center;color:var(--muted);padding:30px}
.divider{height:1px;background:var(--border);margin:18px 0}
hr.soft{border:0;border-top:1px dashed var(--border-2);margin:14px 0}
.pill-toggle{display:inline-flex;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:3px}
.pill-toggle button{background:transparent;border:0;color:var(--muted);padding:6px 12px;border-radius:7px;font-size:12px;cursor:pointer;font-weight:600}
.pill-toggle button.active{background:var(--panel-2);color:var(--text)}
/* screen nav (between pages) */
.screen-nav{position:fixed;bottom:18px;right:18px;background:var(--panel);border:1px solid var(--border-2);border-radius:14px;padding:10px;display:flex;gap:6px;box-shadow:var(--shadow);z-index:50;backdrop-filter:blur(10px)}
.screen-nav a{padding:8px 12px;border-radius:9px;font-size:12px;color:var(--muted);font-weight:600}
.screen-nav a.active{background:var(--primary-soft);color:var(--primary-2)}
.screen-nav a:hover{background:var(--panel-2);color:var(--text)}
/* responsive helpers */
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}
@media (max-width:780px){.app{grid-template-columns:1fr}.sidebar{display:none}}

/* DNSmanager UI bridge — maps existing panel markup to dns-design tokens */

html{scrollbar-gutter:stable}
html,body{overflow:auto;height:auto}
body.app-mode{overflow:hidden}

/* Reset native controls — buttons inherit black text in dark mode otherwise */
button,input,select,textarea{font:inherit;font-family:inherit}
button{color:inherit;background:none;border:none;cursor:pointer}
#app button.btn,#app button.settings-tab,#app button.settings-hub-card,
.login-screen button.login-btn{
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
}

/* Explicit dark theme tokens */
html[data-theme="dark"],html:not([data-theme="light"]){
  --bg:#0b1020;--bg-2:#0f1530;--panel:#121a37;--panel-2:#172046;
  --border:#1f2a55;--border-2:#2a3870;
  --text:#e7ecff;--muted:#8a96c8;--muted-2:#6172a8;
  --primary-soft:rgba(91,140,255,.12);
  --shadow:0 10px 30px -10px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.25);
  --hdr-bg:rgba(11,16,32,.82);
  --hdr-shadow:0 1px 0 rgba(255,255,255,.04);
  /* Status / badges — dark */
  --ok-bg:rgba(34,197,94,.14);--ok-fg:#86efac;--ok-border:rgba(34,197,94,.35);
  --warn-bg:rgba(245,158,11,.16);--warn-fg:#fcd34d;--warn-border:rgba(245,158,11,.4);
  --err-bg:rgba(239,68,68,.14);--err-fg:#fca5a5;--err-border:rgba(239,68,68,.38);
  --info-bg:rgba(91,140,255,.12);--info-fg:#a8c4ff;--info-border:rgba(91,140,255,.35);
  --banner-ok-bg:rgba(34,197,94,.1);--banner-warn-bg:rgba(245,158,11,.12);--banner-err-bg:rgba(239,68,68,.1);
}
#app,#loginPg,#app h1,#app h2,#app h3,#app h4,#app p,#app label,
.settings-hub-card,.settings-hub-card h4,.settings-tab,.card-title{color:var(--text)}
#app .muted,.f-hint,.settings-hub-card p{color:var(--muted)}

/* ── Login: слева текст, справа форма (светлая и тёмная тема) ── */
.login-screen{
  position:relative;
  z-index:200;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 32px;
  background:
    radial-gradient(1000px 520px at 85% -5%, rgba(155,108,255,.14), transparent 58%),
    radial-gradient(900px 480px at -5% 105%, rgba(91,140,255,.12), transparent 58%),
    var(--bg);
}
.login-shell{
  width:100%;
  max-width:1080px;
  display:grid;
  grid-template-columns:1fr minmax(340px,400px);
  gap:48px;
  align-items:center;
}
.login-hero{padding:8px 0}
.login-hero .brand{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px}
.login-hero .brand.brand-has-logo{flex-wrap:wrap;align-items:center}
.login-hero .brand.brand-has-logo .login-brand-text-wrap{flex:1 1 100%;margin-top:4px}
.login-hero .brand .brand-name{font-size:18px;font-weight:700;color:var(--text)}
.login-hero .brand .brand-sub{font-size:12px;color:var(--primary-2);font-weight:600;margin-top:2px}
.login-hero .brand .brand-tagline{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.35}
.login-hero h1{
  font-size:clamp(26px,3.2vw,36px);
  line-height:1.15;
  letter-spacing:-.02em;
  margin:0 0 12px;
  font-weight:700;
  color:var(--text);
  max-width:520px;
}
.login-hero>p{color:var(--muted);font-size:15px;line-height:1.55;margin:0;max-width:480px}
.login-brand-mark,.login-hero .brand-mark{
  width:44px;height:44px;flex:0 0 44px;border-radius:11px;
  background:var(--gradient);
  display:grid;place-items:center;font-weight:800;color:#fff;
  box-shadow:0 6px 16px rgba(91,140,255,.28);
  overflow:hidden;
}
.login-brand-mark img{width:100%;height:100%;object-fit:contain}
.card-login{
  padding:28px 32px 26px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  width:100%;
}
.card-login h2{margin:0 0 6px;font-size:20px;font-weight:700;color:var(--text)}
.card-login .login-form-hint,.card-login>p.login-form-hint{color:var(--muted);margin:0 0 20px;font-size:13px}
.card-login .field{margin-bottom:14px}
.card-login .field label{font-size:12px;color:var(--muted);font-weight:600;display:block;margin-bottom:6px}
.card-login .field input{
  width:100%;background:var(--bg-2);border:1px solid var(--border);
  padding:11px 12px;border-radius:9px;color:var(--text);font-size:14px;outline:0;
}
.card-login .field input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.login-2fa-block{margin-top:2px}
.login-screen .login-btn{
  width:100%;padding:11px 14px;margin-top:4px;
  background:var(--primary);border:0;border-radius:9px;
  color:#fff!important;font-size:14px;font-weight:600;cursor:pointer;
  transition:background .15s,filter .15s;
}
.login-screen .login-btn:hover:not(:disabled){filter:brightness(1.06)}
.login-screen .login-btn:disabled{opacity:.7;cursor:wait}
.login-err{color:var(--err-fg,#fca5a5);font-size:12px;margin-top:10px;min-height:18px}
html[data-theme="dark"] .login-hero h1,
html:not([data-theme="light"]) .login-hero h1{
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
html[data-theme="dark"] .login-screen .login-btn,
html:not([data-theme="light"]) .login-screen .login-btn{
  background:var(--gradient);
  box-shadow:0 6px 18px rgba(91,140,255,.3);
}
html[data-theme="light"] .card-login{
  background:#fff;
  border-color:var(--border);
  box-shadow:0 16px 48px -20px rgba(15,23,42,.14);
}
html[data-theme="light"] .login-screen{
  background:
    radial-gradient(900px 480px at 100% 0%, rgba(91,140,255,.08), transparent 55%),
    var(--bg);
}
@media(max-width:900px){
  .login-shell{grid-template-columns:1fr;gap:28px;max-width:440px}
  .login-hero{padding:0;text-align:center}
  .login-hero .brand{justify-content:center}
  .login-hero h1,.login-hero>p{margin-left:auto;margin-right:auto}
}

/* ── App shell ── */
#app.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh;width:100%}
#app .sb{
  width:auto;height:auto;position:sticky;top:0;
  background:linear-gradient(180deg,#0d1330 0%,#0a0f25 100%);
  border-right:1px solid var(--border);
  padding:22px 14px;display:flex;flex-direction:column;
}
#app .sb-logo{
  display:flex;align-items:center;gap:10px;
  padding:6px 8px 20px;border-bottom:1px solid var(--border);
  margin-bottom:10px;
}
#app .sb-logo-ico,#app .brand-mark{
  width:36px;height:36px;border-radius:10px;
  background:var(--gradient);
  display:grid;place-items:center;font-weight:800;color:#fff;
  box-shadow:0 6px 18px rgba(91,140,255,.35);
  overflow:hidden;flex-shrink:0;font-size:14px;
}
#app .sb-logo-ico img{width:100%;height:100%;object-fit:contain}
#app .sb-logo-txt{color:var(--text);font-weight:700;font-size:14px}
#app .sb-logo-sub{font-size:11px;color:var(--muted)}
#app .sb-lbl{
  margin:12px 0 4px;padding:0 8px;
  font-size:11px;letter-spacing:.12em;color:var(--muted-2);
  text-transform:uppercase;
}
#app .sb-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:10px;
  color:var(--muted);font-weight:500;margin:2px 0;cursor:pointer;
  transition:.15s;font-size:13px;
}
#app .sb-item:hover{background:var(--panel);color:var(--text)}
#app .sb-item.active{
  background:var(--primary-soft);color:var(--primary-2);
  box-shadow:inset 0 0 0 1px rgba(91,140,255,.25);
}
#app .sb-item .ic{width:18px;text-align:center;opacity:.95}
#app .sb-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--border)}

#app .main{margin-left:0;width:auto;display:flex;flex-direction:column;min-width:0;min-height:100vh}
#app .hdr{
  height:auto;min-height:56px;
  display:flex;align-items:center;gap:14px;
  padding:14px 24px;border-bottom:1px solid var(--border);
  background:var(--hdr-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:5;
  box-shadow:var(--hdr-shadow);
}
#app .hdr-crumbs{font-size:13px;color:var(--muted);min-width:120px}
#app .hdr-crumbs b{color:var(--text)}
#app .hdr-srch{
  flex:1;max-width:520px;display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--border);
  padding:9px 12px;border-radius:10px;
}
#app .hdr-srch input{
  background:transparent;border:0;outline:0;color:var(--text);
  width:100%;font-size:13px;
}
#app .hdr-srch-ic{color:var(--muted)}
#app .hdr-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
#app .hbtn{
  width:38px;height:38px;border-radius:10px;
  background:var(--panel);border:1px solid var(--border);
  display:grid;place-items:center;color:var(--muted);cursor:pointer;padding:0;
}
#app .hbtn:hover{color:var(--text);background:var(--panel-2)}
#app .hbtn.sb-toggle{display:none}
@media (max-width:780px){
  #app .hbtn.sb-toggle{display:grid}
}
#app .user-chip{
  display:flex;align-items:center;gap:8px;
  padding:4px 10px 4px 4px;border-radius:999px;
  border:1px solid var(--border);background:var(--panel);cursor:pointer;
}
#app .u-avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--gradient);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700;
}
#app .u-name{font-size:13px;font-weight:600;color:var(--text)}
#app .u-dot{width:7px;height:7px;border-radius:50%;background:var(--success)}

#app .content{padding:24px 28px 40px;flex:1;overflow:auto;max-width:1400px;width:100%}

/* Pages */
.pg{display:none}.pg.active{display:block}
.pg-hdr,.page-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:20px;flex-wrap:wrap;
}
.pg-title{font-size:24px;font-weight:700;letter-spacing:-.01em;margin:0}
.pg-sub{color:var(--muted);font-size:13px;margin-top:6px}

/* Stats / dashboard */
.stats-grid,.dashboard-quick{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px;
}
.stat-card,.dashboard-quick .stat-card{
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);min-height:100px;
}
.stat-v,.dash-chart-val{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.stat-l,.dash-chart-unit{color:var(--muted);font-size:11px;margin-top:4px}
.dash-layout{display:flex;flex-direction:column;gap:16px;max-width:1200px}
.dash-section{
  background:var(--panel);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden;
}
.dash-section-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 16px;border-bottom:1px solid var(--border);background:var(--panel-2);
}
.dash-section-title{
  margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text);
}
.dash-section-desc{margin:4px 0 0;font-size:12px;color:var(--muted);line-height:1.45;max-width:640px}
.dash-section-meta{font-size:11px;color:var(--muted)}
.dash-section-body{padding:14px 16px}
.dash-mini-grid{display:grid;gap:10px;padding:14px 16px}
.dash-overview-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.dash-actions-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.dash-metrics-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));padding-top:0;margin-top:-4px}
.dash-mini-card{
  background:var(--bg-2);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-height:72px;
}
.dash-mini-ic{font-size:18px;line-height:1;opacity:.9}
.dash-mini-val{font-size:24px;font-weight:700;letter-spacing:-.02em}
.dash-mini-val-sm{font-size:15px;font-weight:600}
.dash-mini-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.dash-action-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  background:var(--bg-2);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;cursor:pointer;transition:border-color .15s,background .15s;
  color:var(--text)!important;width:100%;min-height:72px;
}
.dash-action-card:hover{border-color:var(--primary);background:var(--panel)}
.dac-ic{font-size:20px;line-height:1}
.dac-t{font-size:13px;font-weight:600}
.dac-d{font-size:11px;color:var(--muted);line-height:1.35}
.dash-metric-card{gap:6px;min-height:0}
.dash-metric-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.dash-metric-lbl{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.dash-metrics-meta{margin:0 16px 14px;padding:0;font-size:12px}
.dash-chart-canv{width:100%;height:72px;display:block;background:var(--panel);border:1px solid var(--border);border-radius:8px;margin-top:4px}
.geo-dns-admin-row{
  display:grid!important;grid-template-columns:minmax(0,1fr) 46px;grid-template-rows:auto auto;
  column-gap:18px;row-gap:6px;align-items:center;padding:14px 0;border-bottom:1px solid var(--border);
}
.geo-dns-admin-row .toggle-info{grid-column:1;grid-row:1;min-width:0}
.geo-dns-admin-row .toggle{grid-column:2;grid-row:1/span 2;justify-self:end;align-self:center;width:42px;flex-shrink:0;margin:0}
.geo-dns-admin-row #geoDnsToggleHint{grid-column:1;grid-row:2;margin:0!important}
.geo-dns-admin-row .toggle-info p{max-width:none}
.dns-save-bar{
  display:flex!important;flex-wrap:wrap;gap:10px;align-items:center;
  padding:12px 18px;background:var(--panel-2);border-bottom:1px solid var(--border);
}
body.is-user .geo-dns-admin-row{display:none!important}

/* Cards & tables */
.card{
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.card-hdr{
  padding:16px 18px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.card-title{font-size:15px;font-weight:600}
.card-body{padding:18px}
.tbl-wrap{
  border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);background:var(--panel);
}
table{width:100%;border-collapse:collapse;background:transparent}
thead th{
  padding:12px 18px;text-align:left;font-size:11px;font-weight:600;
  color:var(--muted);text-transform:uppercase;letter-spacing:.08em;
  background:rgba(255,255,255,.02);border-bottom:1px solid var(--border);
}
tbody td{padding:12px 18px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:hover{background:rgba(255,255,255,.02)}
tbody tr:last-child td{border-bottom:0}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--panel);color:var(--text);font-weight:600;font-size:13px;cursor:pointer;
}
.btn:hover{background:var(--panel-2)}
.btn-primary{background:var(--gradient);border:0;color:#fff;box-shadow:0 8px 18px rgba(91,140,255,.3)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-sec{background:transparent}
.btn-danger{background:var(--err-bg);border-color:var(--err-border);color:var(--err-fg)}
.btn-sm{padding:6px 11px;font-size:12px}

/* Record type badges */
.rtype{display:inline-block;min-width:44px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px}
.rtype-A{background:#10325a;color:#7dd3fc}
.rtype-AAAA{background:#172554;color:#a5b4fc}
.rtype-CNAME{background:#3b1366;color:#d8b4fe}
.rtype-MX{background:#3b2412;color:#fcd34d}
.rtype-TXT{background:#102a1c;color:#86efac}
.rtype-NS{background:#2a1140;color:#c4b5fd}
.rtype-SRV{background:#3a1530;color:#f9a8d4}
.rtype-CAA{background:#2a1140;color:#c4b5fd}

.badge,.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid transparent;line-height:1.35}
.bg-green,.tag.ok{background:var(--ok-bg);color:var(--ok-fg);border-color:var(--ok-border)}
.bg-red,.tag.err{background:var(--err-bg);color:var(--err-fg);border-color:var(--err-border)}
.bg-yellow,.tag.warn{background:var(--warn-bg);color:var(--warn-fg);border-color:var(--warn-border)}
.bg-blue,.tag.info{background:var(--info-bg);color:var(--info-fg);border-color:var(--info-border)}
.bg-gray,.tag{background:var(--panel-2);color:var(--muted);border-color:var(--border)}

.domain-link{font-weight:600;cursor:pointer;color:var(--text)}
.domain-link:hover{color:var(--primary-2)}

/* Forms */
.f-grp,.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.f-grp label,.field label{font-size:12px;color:var(--muted);font-weight:600}
.f-grp input,.f-grp select,.f-grp textarea,
.field input,.field select,.field textarea{
  background:var(--bg-2);border:1px solid var(--border);
  padding:10px 12px;border-radius:9px;color:var(--text);font-size:13px;
}
.f-grp input:focus,.f-grp select:focus,.f-grp textarea:focus{
  border-color:var(--primary);box-shadow:0 0 0 3px rgba(91,140,255,.18);outline:0;
}
.f-hint{font-size:11px;color:var(--muted)}

/* Modals */
.modal-bd{background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.modal{background:var(--panel);border:1px solid var(--border-2);color:var(--text)}
.modal-title{color:var(--text)}
.modal-x{color:var(--muted)}

/* Toggles, geo, toast */
.toggle-sl{background:#334155}
input:checked+.toggle-sl{background:var(--primary)}
.geo-zone-row{color:var(--text);border-bottom:1px solid var(--border)}
.geo-zone-row:hover{background:var(--panel-2)}
.toast{background:var(--panel-2);border:1px solid var(--border);color:var(--text)}

/* Inline edit / QA row */
.qa-inp,.qa-sel,.tbl-srch input,.ie-input{background:var(--bg-2);border:1px solid var(--border);color:var(--text)}
.tbl-srch input:focus,.qa-inp:focus{border-color:var(--primary)}

.alert{
  padding:10px 14px;border-radius:10px;font-size:13px;line-height:1.45;
  border:1px solid var(--border);color:var(--text);
}
.alert code{background:var(--bg-2);padding:1px 5px;border-radius:4px;font-size:12px}
.alert-info{background:var(--info-bg);border-color:var(--info-border);color:var(--info-fg)}
.alert-warn{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-fg)}

/* Компактный баннер «нет лицензии» под шапкой */
.license-strip{
  display:none;align-items:center;gap:10px;
  min-height:34px;margin:0;padding:7px 12px 7px 14px;
  border-bottom:1px solid var(--warn-border);
  background:var(--warn-bg);color:var(--warn-fg);
  font-size:12px;line-height:1.35;
  cursor:default;
}
.license-strip.is-visible{display:flex}
.license-strip-icon{flex:0 0 auto;font-size:14px;line-height:1;opacity:.95}
.license-strip-text{flex:1 1 auto;min-width:0}
.license-strip-link{
  flex:0 0 auto;margin:0;padding:4px 10px;border:1px solid var(--warn-border);border-radius:6px;
  background:rgba(0,0,0,.12);color:inherit;font-size:11px;font-weight:600;line-height:1.2;
  cursor:pointer;white-space:nowrap;
}
.license-strip-link:hover{background:rgba(0,0,0,.22)}
.license-strip-x{
  flex:0 0 auto;width:22px;height:22px;margin:0;padding:0;border:none;border-radius:5px;
  background:rgba(0,0,0,.18);color:inherit;font-size:15px;line-height:22px;text-align:center;
  cursor:pointer;opacity:.9;
}
.license-strip-x:hover{opacity:1;background:rgba(0,0,0,.32)}
.license-info-grid{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-2)}
.license-info-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.license-info-label{font-size:12px;color:var(--text-3);min-width:120px}
.license-info-value{font-size:13px;font-weight:600;color:var(--text-1);text-align:right}
.license-status-ok{color:var(--ok-fg)}
.license-status-warn{color:var(--warn-fg)}
.license-status-bad{color:var(--err-fg)}
.alert-err,.alert-error{background:var(--err-bg);border-color:var(--err-border);color:var(--err-fg)}
.alert-success{background:var(--ok-bg);border-color:var(--ok-border);color:var(--ok-fg)}

/* Full-width status banners (cluster NS, DNS OK) */
.banner-ok,.banner-warn,.banner-err,.cluster-ns-banner{
  padding:10px 14px;border-radius:10px;margin-bottom:12px;font-size:13px;line-height:1.45;
  border:1px solid transparent;color:var(--text);
}
.banner-ok,.cluster-ns-banner.banner-ok{background:var(--banner-ok-bg);border-color:var(--ok-border);color:var(--text)}
.banner-warn,.cluster-ns-banner.bg-yellow,.cluster-ns-banner.banner-warn{
  background:var(--banner-warn-bg);border-color:var(--warn-border);color:var(--text);
}
.banner-err,.cluster-ns-banner.bg-red,.cluster-ns-banner.banner-err{
  background:var(--banner-err-bg);border-color:var(--err-border);color:var(--text);
}
.cluster-ns-banner b,.banner-ok b,.banner-warn b,.banner-err b{color:inherit}

@media (max-width:1100px){
  .stats-grid,.dashboard-quick,.dashboard-charts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:780px){
  #app.app{grid-template-columns:1fr}
  #app .sb{
    display:flex;position:fixed;left:0;top:0;bottom:0;z-index:120;
    width:min(280px,88vw);transform:translateX(-105%);
    transition:transform .22s ease;box-shadow:8px 0 32px rgba(0,0,0,.45);
  }
  #app .sb.sb-open{transform:translateX(0)}
  .sb-backdrop{
    display:none;position:fixed;inset:0;z-index:110;
    background:rgba(0,0,0,.55);backdrop-filter:blur(2px);
  }
  .sb-backdrop.open{display:block}
  #app .hdr-crumbs{min-width:0;font-size:12px}
}

/* ── Fix conflicts with dns-design global .card / .tabs ── */
#app .card{padding:0;overflow:hidden}
#app .stat-card{padding:18px}
#app .section{padding:0}
.brand-tagline{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.35}
#app .sb{height:100vh;max-height:100vh;overflow-y:auto;align-self:start}
#app .main{min-height:100vh;max-height:100vh;overflow:hidden}

/* Stats extras */
.stat-ic{font-size:22px;margin-bottom:8px}
.stat-v{font-variant-numeric:tabular-nums;line-height:1.1}
.dash-upd-li{margin:5px 0;font-size:13px;line-height:1.4}
.dash-upd-ver{font-size:14px;font-weight:700;margin-bottom:8px}

/* Toolbar & filters */
.tbl-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.tbl-srch{position:relative;flex:1;min-width:180px;max-width:360px}
.tbl-srch input{
  width:100%;padding:8px 10px 8px 30px;border:1px solid var(--border);
  border-radius:9px;font-size:13px;background:var(--bg-2);color:var(--text);
}
.tbl-srch input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(91,140,255,.18)}
.tbl-srch-ic{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:12px;pointer-events:none}
.tbl-filter-sel,.tbl-bar select{
  padding:8px 10px;border:1px solid var(--border);border-radius:9px;
  font-size:13px;background:var(--bg-2);color:var(--text);
}

/* Toggles (settings) */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--border)}
.toggle-row:last-child{border-bottom:none}
.toggle-info{flex:1;min-width:0}
.toggle-info h4{font-size:13.5px;font-weight:600;margin:0 0 4px}
.toggle-info p{font-size:12px;color:var(--muted);margin:0;max-width:520px;line-height:1.45}
.toggle{position:relative;width:42px;height:24px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-sl{position:absolute;inset:0;background:#334155;border-radius:999px;cursor:pointer;transition:.2s}
.toggle-sl:before{content:"";position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s}
input:checked+.toggle-sl{background:var(--primary)}
input:checked+.toggle-sl:before{transform:translateX(18px)}

/* Settings page tabs (not dns-design pill .tabs) */
#app .pg .tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:16px;background:transparent;padding:0;border-radius:0}
#app .pg .tab{padding:9px 16px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;border-radius:0}
#app .pg .tab:hover{color:var(--text)}
#app .pg .tab.active{color:var(--primary-2);border-bottom-color:var(--primary);background:transparent;box-shadow:none}

/* Inline edit & quick-add */
.ie-view{cursor:pointer;display:inline-flex;align-items:center;gap:4px;max-width:100%;word-break:break-word}
.ie-pencil{opacity:0;color:var(--muted);font-size:11px}
.ie-view:hover .ie-pencil{opacity:1}
td.editing .ie-input{
  display:block;width:100%;padding:6px 8px;border:2px solid var(--primary);
  border-radius:8px;font-size:13px;background:var(--bg-2);color:var(--text);outline:none;
}
.qarow td{background:rgba(91,140,255,.08)}
.qa-inp,.qa-sel{
  padding:6px 8px;border:1px solid var(--border);border-radius:8px;
  font-size:12px;background:var(--bg-2);color:var(--text);width:100%;
}

/* Modals */
.modal-bd{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;align-items:center;justify-content:center;padding:16px}
.modal-bd.open{display:flex}
.modal{
  background:var(--panel);border:1px solid var(--border-2);border-radius:14px;
  padding:22px 24px;width:100%;max-width:520px;max-height:min(92vh,900px);overflow:auto;
  box-shadow:var(--shadow);color:var(--text);
}
.modal-lg{max-width:660px}
.modal-xl{max-width:min(1400px,96vw)}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}
.modal-title{font-size:16px;font-weight:700}
.modal-x{background:none;border:none;cursor:pointer;color:var(--muted);font-size:18px;padding:4px 8px;border-radius:8px;line-height:1}
.modal-x:hover{background:var(--panel-2);color:var(--text)}
.modal-ft{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}

/* Geo / timeline / slave metrics */
.geo-rule{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--border);border-radius:10px;margin-bottom:8px;background:var(--panel-2)}
.geo-pick-list{max-height:min(420px,55vh);overflow:auto;border:1px solid var(--border);border-radius:10px;background:var(--bg-2)}
.tl-item{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.tl-item:last-child{border-bottom:none}
.tl-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.tl-c{background:var(--ok-bg);color:var(--ok-fg)}
.tl-u{background:var(--info-bg);color:var(--info-fg)}
.tl-d{background:var(--err-bg);color:var(--err-fg)}
.slave-metrics-period.active{background:var(--primary-soft);border-color:rgba(91,140,255,.35);color:var(--primary-2)}

/* Toast */
.toast-wrap{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{
  background:var(--panel-2);color:var(--text);padding:10px 16px;border-radius:10px;
  font-size:13px;border:1px solid var(--border);box-shadow:var(--shadow);
  pointer-events:all;display:flex;align-items:center;gap:8px;max-width:min(420px,92vw);
}
.toast-success{border-left:3px solid var(--success)}
.toast-error{border-left:3px solid var(--danger)}
.toast-info{border-left:3px solid var(--primary)}

/* Admin-only sidebar items */
.sb-item.admin-only{display:none}
body.is-admin .sb-item.admin-only{display:flex}
.sb-item.staff-settings{display:none}
body.is-staff .sb-item.staff-settings{display:flex}

/* Layout helpers */
#app .content{max-width:none}
.pg-hdr .btn,.pg-hdr .btn-sm{white-space:nowrap}
@media (max-width:1100px){
  .dash-metrics-grid,.dash-overview-grid,.dash-actions-grid{grid-template-columns:repeat(2,1fr)!important}
  .stats-grid,.dashboard-quick{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:640px){
  .dash-metrics-grid,.dash-overview-grid,.dash-actions-grid,.stats-grid,.dashboard-quick{grid-template-columns:1fr!important}
  #app .hdr{flex-wrap:wrap;padding:12px 16px}
  #app .hdr-srch{max-width:none;order:3;flex:1 1 100%}
}

/* GeoDNS zone picker — no white buttons */
.geo-pick-list{max-height:min(420px,55vh);overflow:auto;border:1px solid var(--border);border-radius:10px;background:var(--bg-2)}
.geo-zone-row,.geo-zone-pick-item{
  display:block;width:100%;text-align:left;
  padding:11px 14px;margin:0;border:0;border-bottom:1px solid var(--border);
  background:var(--bg-2)!important;color:var(--text)!important;
  cursor:pointer;font-size:14px;font-family:inherit;line-height:1.35;
}
.geo-zone-row:last-child,.geo-zone-pick-item:last-child{border-bottom:0}
.geo-zone-row:hover,.geo-zone-pick-item:hover,.geo-zone-row:focus-visible,.geo-zone-pick-item:focus-visible{
  background:var(--panel-2)!important;color:var(--primary-2)!important;outline:none;
}

/* NS slave metrics inline box */
.slave-metrics-box{
  font-size:12px;line-height:1.45;
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:8px;padding:8px 10px;color:var(--text);
}
.metrics-canvas{
  width:100%;max-height:360px;display:block;
  border:1px solid var(--border);border-radius:8px;background:var(--bg-2);
}

/* Readonly / selects in settings */
.inp-readonly,.f-grp input[readonly],.f-grp textarea[readonly]{
  background:var(--bg-2)!important;color:var(--muted)!important;cursor:default;
}
#pg-settings input,#pg-settings select,#pg-settings textarea,
.modal input,.modal select,.modal textarea{
  background:var(--bg-2);color:var(--text);border:1px solid var(--border);
}
#pg-settings input[readonly]{opacity:.92}

/* Logo replaces text block */
#app .sb-logo-ico.has-logo-img,#loginLogoIco.has-logo-img{
  background:transparent;box-shadow:none;font-size:0;
}
#app .sb-logo-ico.has-logo-img img{
  width:100%;height:100%;object-fit:contain;object-position:left center;
}
#app .sb-logo-ico.logo-wide{
  width:min(200px,100%);height:44px;min-width:120px;border-radius:8px;
}
.login-brand-mark.has-logo-img.logo-wide,
.login-brand-mark.has-logo-img{
  width:min(280px,100%)!important;
  height:auto!important;
  min-height:52px;
  max-height:80px;
  flex:0 0 auto!important;
  border-radius:10px;
  background:transparent!important;
  box-shadow:none!important;
  font-size:0!important;
  display:block!important;
  overflow:visible!important;
}
.login-brand-mark.has-logo-img img{
  display:block;
  width:auto;
  max-width:min(280px,100%);
  height:auto;
  max-height:80px;
  object-fit:contain;
  object-position:left center;
}

/* Light theme */
html[data-theme="light"]{
  --bg:#eef2ff;--bg-2:#f8fafc;--panel:#ffffff;--panel-2:#f1f5f9;
  --border:#cbd5e1;--border-2:#94a3b8;
  --text:#0f172a;--muted:#475569;--muted-2:#64748b;
  --primary-soft:rgba(37,99,235,.1);
  --primary-2:#2563eb;
  --shadow:0 8px 24px -12px rgba(15,23,42,.12);
  --hdr-bg:rgba(255,255,255,.92);
  --hdr-shadow:0 1px 3px rgba(15,23,42,.06);
  /* Status / badges — light (darker text on tinted bg) */
  --ok-bg:#dcfce7;--ok-fg:#14532d;--ok-border:#86efac;
  --warn-bg:#fef3c7;--warn-fg:#78350f;--warn-border:#fcd34d;
  --err-bg:#fee2e2;--err-fg:#7f1d1d;--err-border:#fca5a5;
  --info-bg:#dbeafe;--info-fg:#1e40af;--info-border:#93c5fd;
  --banner-ok-bg:#ecfdf5;--banner-warn-bg:#fffbeb;--banner-err-bg:#fef2f2;
}
html[data-theme="light"] #app .sb{
  background:linear-gradient(180deg,#f8fafc 0%,#eef2ff 100%);
}
html[data-theme="light"] #app .hdr{
  background:var(--hdr-bg);
  border-bottom-color:var(--border);
}
html[data-theme="light"] #app .hdr-srch{
  background:var(--bg-2);
  border-color:var(--border);
}
html[data-theme="light"] #app .hbtn{
  background:var(--bg-2);
  border-color:var(--border);
  color:var(--muted-2);
}
html[data-theme="light"] #app .hbtn:hover{
  background:var(--panel-2);
  color:var(--text);
  border-color:var(--border-2);
}
html[data-theme="light"] #app .user-chip{
  background:var(--bg-2);
  border-color:var(--border);
}
html[data-theme="light"] #app .sb-item.active{
  color:var(--primary-2);
  box-shadow:inset 0 0 0 1px rgba(37,99,235,.18);
}
html[data-theme="light"] #app .main{
  background:var(--bg);
}
html[data-theme="light"] .dash-chart-canv,
html[data-theme="light"] .metrics-canvas{background:#f8fafc}
html[data-theme="light"] thead th{background:rgba(15,23,42,.04)}
html[data-theme="light"] tbody tr:hover{background:rgba(15,23,42,.03)}
html[data-theme="light"] .toggle-sl{background:#94a3b8}
html[data-theme="light"] .alert-info{color:var(--info-fg)}
html[data-theme="light"] .alert-warn{color:var(--warn-fg)}
html[data-theme="light"] .banner-warn,
html[data-theme="light"] .cluster-ns-banner.bg-yellow{color:var(--warn-fg)}
html[data-theme="light"] .banner-err,
html[data-theme="light"] .cluster-ns-banner.bg-red{color:var(--err-fg)}
html[data-theme="light"] .banner-ok{color:var(--ok-fg)}
/* Record type pills — readable in light mode */
html[data-theme="light"] .rtype-A{background:#dbeafe;color:#1e3a8a}
html[data-theme="light"] .rtype-AAAA{background:#e0e7ff;color:#312e81}
html[data-theme="light"] .rtype-CNAME{background:#f3e8ff;color:#581c87}
html[data-theme="light"] .rtype-MX{background:#fef3c7;color:#78350f}
html[data-theme="light"] .rtype-TXT{background:#dcfce7;color:#14532d}
html[data-theme="light"] .rtype-NS{background:#ede9fe;color:#4c1d95}
html[data-theme="light"] .rtype-SRV{background:#fce7f3;color:#831843}
html[data-theme="light"] .rtype-CAA{background:#ede9fe;color:#4c1d95}
html[data-theme="light"] .tl-c{background:#dcfce7;color:#14532d}
html[data-theme="light"] .tl-u{background:#dbeafe;color:#1e40af}
html[data-theme="light"] .tl-d{background:#fee2e2;color:#991b1b}
html[data-theme="light"] .cluster-node-master{
  background:linear-gradient(135deg,#f8fafc,rgba(37,99,235,.06));
  border-color:rgba(37,99,235,.25);
}

/* Backup page tabs */
.backup-tabs{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.backup-tab{
  border:1px solid var(--border);background:var(--panel-2);color:var(--text)!important;
  padding:8px 14px;border-radius:8px;font-size:13px;cursor:pointer;transition:.15s;
}
.backup-tab:hover{border-color:var(--primary);color:var(--primary-2)!important}
.backup-tab.active{background:var(--primary-soft);border-color:var(--primary);font-weight:600}
.backup-tab-panel{display:block}
.backup-restore-pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.backup-pick-hdr{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.backup-pick-search{width:100%;margin-bottom:6px;padding:7px 10px;border:1px solid var(--border);
  border-radius:8px;font-size:13px;background:var(--bg-2);color:var(--text)}
.backup-pick-toolbar{display:flex;gap:6px;margin-bottom:6px}
.backup-pick-list{
  max-height:min(280px,42vh);overflow-y:auto;border:1px solid var(--border);border-radius:10px;
  background:var(--bg-2);padding:6px;
}
.backup-pick-item{
  display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:8px;
  cursor:pointer;margin:2px 0;font-size:13px;color:var(--text);
}
.backup-pick-item:hover{background:var(--panel)}
.backup-pick-item input{margin-top:3px;flex:0 0 auto}
.backup-pick-item span{display:flex;flex-direction:column;gap:2px;min-width:0}
.backup-pick-item b{font-weight:600;word-break:break-all}
.backup-pick-item small{color:var(--muted);font-size:11px}
.backup-pick-empty{padding:16px;text-align:center;color:var(--muted);font-size:13px}
.backup-files-wrap{max-height:min(420px,50vh);overflow:auto;padding:0!important}
@media(max-width:900px){
  .backup-restore-pick-grid{grid-template-columns:1fr}
  #pg-backup .cluster-summary-grid{grid-template-columns:1fr}
  #pg-backup [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
}

/* Settings categories */
.settings-tabs{
  display:flex;flex-wrap:nowrap;gap:8px;margin-bottom:16px;padding-bottom:12px;
  border-bottom:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.settings-tab{
  border:1px solid var(--border);background:var(--panel-2);color:var(--text)!important;
  padding:8px 14px;border-radius:8px;font-size:13px;cursor:pointer;transition:.15s;
  flex-shrink:0;white-space:nowrap;
}
.settings-tab:hover{border-color:var(--primary);color:var(--primary-2)!important}
.settings-tab.active{background:var(--primary-soft);border-color:var(--primary);font-weight:600;color:var(--text)!important}
.settings-cat-hidden{display:none!important}
.settings-detail-grid{
  display:grid;grid-template-columns:minmax(0,1fr);gap:16px;width:100%;
}
.settings-col-stack{display:contents}
.settings-full-width{grid-column:1/-1;width:100%}
.card-hdr-actions{flex-wrap:wrap;gap:10px}
.card-hdr-actions .dns-save-actions{
  display:flex;gap:8px;flex-wrap:wrap;margin-left:auto;align-items:center;
}
.dns-save-hint.dns-save-actions{display:block}
body.is-admin .dns-save-actions,
body.is-reseller .dns-save-actions,
body.is-staff .dns-save-actions{display:flex!important}
body.is-admin .dns-save-hint.dns-save-actions,
body.is-reseller .dns-save-hint.dns-save-actions{display:block!important}
body.is-reseller .reseller-whitelabel-banner{display:block!important}
body.is-reseller .reseller-panel-actions{display:flex!important}
body.is-reseller #dnsSettingsScopeBanner.reseller-only-hint{display:block!important}
body.is-reseller .admin-panel-save-actions{display:none!important}
@media(max-width:720px){
  .card-hdr-actions .dns-save-actions{margin-left:0;width:100%;justify-content:flex-start}
}
.settings-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:12px;margin-bottom:16px}
.settings-hub-card{
  border:1px solid var(--border);border-radius:10px;padding:14px;background:var(--panel-2);
  cursor:pointer;text-align:left;color:var(--text)!important;width:100%;
}
.settings-hub-card:hover{border-color:var(--primary);background:var(--panel)}
.settings-hub-card h4{margin:0 0 6px;font-size:14px;color:var(--text)!important;font-weight:600}
.settings-hub-card p{margin:0;font-size:12px;color:var(--muted)!important;line-height:1.4}

/* Brand settings preview */
.brand-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
@media(max-width:900px){.brand-preview-grid{grid-template-columns:1fr}}
.brand-preview-card{
  border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--bg-2);
  min-height:140px;
}
.brand-preview-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.brand-preview-login{
  display:flex;align-items:center;gap:10px;padding:12px;border-radius:10px;
  background:var(--panel);border:1px solid var(--border);
}
.brand-preview-login-mark{
  width:40px;height:40px;border-radius:9px;display:grid;place-items:center;
  background:var(--gradient);color:#fff;font-weight:800;overflow:hidden;flex-shrink:0;
}
.brand-preview-login-mark img{width:100%;height:100%;object-fit:contain}
.brand-preview-sidebar{
  display:flex;align-items:center;gap:8px;padding:10px;border-radius:10px;
  background:linear-gradient(180deg,#0d1330 0%,#0a0f25 100%);border:1px solid var(--border);
}
.brand-color-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand-color-row input[type=color]{width:48px;height:36px;padding:2px;border-radius:8px;cursor:pointer}
.settings-pre{font-family:ui-monospace,monospace;font-size:11px;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:10px;max-height:200px;overflow:auto;white-space:pre-wrap}

/* DNS cluster status */
.cluster-dns-card{border:1px solid var(--border-2)}
.cluster-summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:14px}
.cluster-node-card{border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:var(--panel-2)}
.cluster-node-master{border-color:rgba(91,140,255,.35);background:linear-gradient(135deg,var(--panel-2),rgba(91,140,255,.06))}
.cluster-node-off{opacity:.65}
.cluster-node-title{font-weight:700;font-size:14px;margin-bottom:6px;color:var(--text)}
.cluster-node-meta{font-size:12px;color:var(--muted);margin-bottom:8px}
.cluster-node-meta b{color:var(--text)}
.cluster-node-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.cluster-node-sync{font-size:12px;color:var(--text)}
.cluster-node-sync b{color:var(--text)}
.cluster-dns-infra summary,.cluster-dns-issues summary,.cluster-zone-issue summary{color:var(--text)}
.cluster-zone-issue{color:var(--text)}
.cluster-zone-issue code{background:var(--bg-2);padding:1px 4px;border-radius:4px;color:var(--text)}
.cluster-stats-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;padding-top:4px}
.cluster-zones-table{font-size:12px}
.cluster-zones-table th,.cluster-zones-table td{padding:8px 10px;vertical-align:middle}
.cluster-zones-table tbody tr:hover{background:var(--panel-2)}

/* API v2 documentation viewer */
.api-docs-viewer{max-height:min(78vh,900px);overflow:auto;font-size:14px;line-height:1.6}
.api-doc-inner h1{font-size:1.45rem;margin:1em 0 .45em;color:var(--text)}
.api-doc-inner h2{font-size:1.2rem;margin:1.3em 0 .45em;padding-bottom:6px;border-bottom:1px solid var(--border);color:var(--text)}
.api-doc-inner h3{font-size:1.05rem;margin:1.1em 0 .35em;color:var(--text)}
.api-doc-inner p{margin:.55em 0;color:var(--text)}
.api-doc-inner code{background:var(--panel-2);padding:2px 6px;border-radius:4px;font-size:12px;color:var(--text)}
.api-doc-inner pre{background:#0f172a;color:#e2e8f0;padding:14px 16px;border-radius:8px;overflow:auto;font-size:12px;line-height:1.45;margin:10px 0}
.api-doc-inner pre code{background:transparent;padding:0;color:inherit}
.api-doc-inner table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px}
.api-doc-inner th,.api-doc-inner td{border:1px solid var(--border);padding:8px 10px;text-align:left}
.api-doc-inner th{background:var(--panel-2)}
.api-doc-inner ul{margin:8px 0 8px 22px}
.api-doc-inner a{color:var(--accent)}
.api-doc-inner hr{border:none;border-top:1px solid var(--border);margin:16px 0}