/* ============================================================================
   Mail DNS Suite – Work-Oriented Dashboard
   Matching index.html: 5 tabs, server cards, domain drawer, record CRUD
   ============================================================================ */

:root {
    --bg-0: #0f1419;
    --bg-1: #1a1f2e;
    --bg-2: #242b3a;
    --bg-3: #2d3548;
    --border: rgba(255,255,255,.08);
    --border-hi: rgba(255,255,255,.15);
    --text-1: #e8ecf1;
    --text-2: #a8adb5;
    --text-3: #6b7280;
    --ok: #06b6d4;
    --warn: #f59e0b;
    --err: #ef4444;
    --info: #3b82f6;
    --accent: #06b6d4;
    --radius: .5rem;
    --radius-sm: .375rem;
    --mono: 'Monaco','Menlo','Ubuntu Mono',monospace;
    --sans: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --fast: 150ms ease;
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg-0);color:var(--text-1);line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:var(--bg-0)}

/* ── Layout ─────────────────────────────────────────────── */
.app-container{display:flex;flex-direction:column;height:100vh;overflow:hidden}

/* ── Header ─────────────────────────────────────────────── */
.app-header{background:var(--bg-1);border-bottom:1px solid var(--border);padding:.75rem 1.25rem;z-index:100}
.header-content{display:flex;justify-content:space-between;align-items:center;max-width:1800px;margin:0 auto}
.logo-section{display:flex;align-items:center;gap:.75rem}
.logo-text{font-size:1.15rem;font-weight:600;letter-spacing:-.3px}
.health-dot{width:10px;height:10px;border-radius:50%;background:var(--text-3);display:inline-block;transition:background var(--fast)}
.health-dot.ok{background:var(--ok)}
.health-dot.err{background:var(--err)}
.header-right{display:flex;align-items:center;gap:.75rem}
.cache-info{font-size:.75rem;color:var(--text-3);font-family:var(--mono)}
.auth-user{font-size:.8rem;color:var(--text-2)}

/* ── Navigation ─────────────────────────────────────────── */
.app-nav{display:flex;gap:.375rem;padding:.5rem 1.25rem;background:var(--bg-0);border-bottom:1px solid var(--border);overflow-x:auto}
.nav-tab{padding:.4rem .85rem;background:transparent;color:var(--text-2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-size:.8rem;font-weight:500;white-space:nowrap;transition:all var(--fast);font-family:inherit}
.nav-tab:hover{background:var(--bg-2);color:var(--text-1);border-color:var(--border-hi)}
.nav-tab.active{background:var(--accent);color:var(--bg-0);border-color:var(--accent)}

/* ── Main ───────────────────────────────────────────────── */
.app-main{flex:1;overflow-y:auto;padding:1rem 1.25rem}
.view{display:none}
.view.active{display:block;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── Toolbar ────────────────────────────────────────────── */
.toolbar{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;flex-wrap:wrap}
.search-input{padding:.4rem .65rem;background:var(--bg-2);color:var(--text-1);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.8rem;min-width:200px;font-family:inherit;transition:border var(--fast)}
.search-input:focus{outline:none;border-color:var(--accent)}
.toolbar-select{padding:.4rem .65rem;background:var(--bg-2);color:var(--text-1);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.8rem;font-family:inherit;cursor:pointer}
.toolbar-select:focus{outline:none;border-color:var(--accent)}
.toolbar-info{font-size:.75rem;color:var(--text-3);margin-left:auto;white-space:nowrap}
.toggle-label{font-size:.7rem;color:var(--text-2);display:flex;align-items:center;gap:.3rem;cursor:pointer;white-space:nowrap;padding:.25rem .5rem;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm)}
.toggle-label input{accent-color:var(--accent)}

/* ── Buttons ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;background:var(--bg-2);color:var(--text-1);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.8rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:all var(--fast);font-family:inherit}
.btn:hover{background:var(--bg-3);border-color:var(--border-hi)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-sm{padding:.25rem .5rem;font-size:.7rem}
.btn-primary{background:var(--accent);color:var(--bg-0);border-color:var(--accent)}
.btn-primary:hover{background:#0891b2;border-color:#0891b2}
.btn-danger{background:rgba(239,68,68,.1);color:var(--err);border-color:var(--err)}
.btn-danger:hover{background:rgba(239,68,68,.2)}
.btn-icon{padding:.35rem;border:none;background:transparent;color:var(--text-2);cursor:pointer;font-size:1.1rem;border-radius:var(--radius-sm);transition:all var(--fast)}
.btn-icon:hover{background:var(--bg-2);color:var(--text-1)}
.btn-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}

/* ── Tags ───────────────────────────────────────────────── */
.tag{display:inline-block;padding:.15rem .45rem;border-radius:var(--radius-sm);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;background:var(--bg-3);color:var(--text-2)}
.tag.netcup{background:rgba(59,130,246,.15);color:var(--info)}
.tag.porkbun{background:rgba(236,72,153,.15);color:#f472b6}
.tag.hetzner{background:rgba(239,68,68,.15);color:#f87171}
.tag.external{background:rgba(107,114,128,.15);color:var(--text-3)}
.tag.writable{background:rgba(6,182,212,.12);color:var(--ok)}
.tag.readonly{background:rgba(107,114,128,.12);color:var(--text-3)}

/* ── Server View ────────────────────────────────────────── */
/* Toggle buttons */
.sv-view-toggle{display:flex;gap:2px;background:var(--bg-2);border-radius:var(--radius-sm);padding:2px}
.sv-toggle-btn{background:none;border:none;color:var(--text-3);font-size:.85rem;padding:.2rem .45rem;border-radius:3px;cursor:pointer;line-height:1}
.sv-toggle-btn.active{background:var(--bg-3);color:var(--text-1)}
.sv-toggle-btn:hover{color:var(--text-1)}

/* List mode (default) */
.server-container.sv-list{display:flex;flex-direction:column;gap:.35rem}
/* Grid mode */
.server-container.sv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:.5rem}

.server-card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color var(--fast)}
.server-card:hover{border-color:var(--border-hi)}

/* List compact header */
.server-card-header{display:flex;justify-content:space-between;align-items:center;padding:.4rem .75rem;cursor:pointer;user-select:none;gap:.5rem}
.server-card-header:hover{background:var(--bg-2)}
.sv-title-row{display:flex;align-items:baseline;gap:.4rem;min-width:0}
.server-name{font-weight:600;font-size:.85rem;white-space:nowrap}
.sv-primary-ip{font-size:.65rem;font-family:var(--mono);color:var(--text-3)}
.sv-header-right{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.sv-badges{display:flex;flex-wrap:wrap;gap:.2rem}
.sv-badge{font-size:.55rem;font-weight:600;padding:.1rem .35rem;border-radius:3px;white-space:nowrap;text-transform:uppercase;letter-spacing:.02em}
.sv-badge.pve{background:rgba(139,92,246,.2);color:#a78bfa}
.sv-badge.proxy{background:rgba(6,182,212,.15);color:var(--ok)}
.sv-badge.hetzner{background:rgba(239,68,68,.15);color:#f87171}
.sv-badge.ips{background:var(--bg-3);color:var(--text-2);font-family:var(--mono)}
.sv-badge.domains{background:rgba(6,182,212,.1);color:var(--accent);font-weight:700;min-width:1.2rem;text-align:center}
.sv-links{display:flex;gap:.2rem}
.sv-link{font-size:.55rem;font-weight:600;padding:.1rem .35rem;border-radius:3px;text-decoration:none;white-space:nowrap;transition:opacity var(--fast)}
.sv-link:hover{opacity:.8}
.sv-link.mgmt{background:rgba(139,92,246,.25);color:#c4b5fd}
.sv-link.proxy{background:rgba(6,182,212,.2);color:var(--ok)}

/* Expandable body (list mode) */
.sv-body{display:none;border-top:1px solid var(--border)}
.server-card.expanded .sv-body{display:block}
.sv-section-title{font-size:.65rem;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;padding:.3rem .75rem .15rem}
.sv-ip-section{padding-bottom:.2rem;border-bottom:1px solid var(--border)}
.sv-ip{display:flex;align-items:center;gap:.4rem;padding:.15rem .75rem;font-size:.7rem;font-family:var(--mono)}
.sv-ip .ip-type{font-size:.55rem;font-weight:700;text-transform:uppercase;min-width:3rem}
.sv-ip .ip-type.ipv4{color:var(--ok)}
.sv-ip .ip-type.ipv6,.sv-ip .ip-type.ipv6_net{color:#a78bfa}
.sv-ip-addr{color:var(--text-1)}
.sv-ip-ptr{color:var(--text-3);font-size:.6rem;margin-left:auto}
.server-domain-row{display:flex;justify-content:space-between;align-items:center;padding:.3rem .75rem;font-size:.75rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--fast)}
.server-domain-row:last-child{border-bottom:none}
.server-domain-row:hover{background:var(--bg-2)}
.server-domain-row .domain-name{font-weight:500}
.server-domain-row .domain-tags{display:flex;gap:.3rem;align-items:center}
.server-expand-icon{transition:transform .2s ease;font-size:.7rem;color:var(--text-3)}
.server-card.expanded .server-expand-icon{transform:rotate(90deg)}

/* Grid card mode */
.sv-grid-card{padding:.65rem .75rem;display:flex;flex-direction:column;gap:.3rem}
.sv-grid-header{display:flex;justify-content:space-between;align-items:center}
.sv-grid-header .server-name{font-size:.9rem}
.sv-grid-ips{font-size:.65rem;font-family:var(--mono);color:var(--text-2)}
.sv-ip-mini{display:flex;align-items:center;gap:.3rem;padding:.1rem 0}
.sv-ip-mini .ip-type{font-size:.5rem;font-weight:700;text-transform:uppercase}
.sv-ip-mini .ip-type.ipv4{color:var(--ok)}
.sv-ip-mini .ip-type.ipv6,.sv-ip-mini .ip-type.ipv6_net{color:#a78bfa}
.sv-grid-domains{display:flex;flex-wrap:wrap;gap:.2rem;margin-top:.2rem}
.sv-grid-domain{font-size:.65rem;padding:.1rem .3rem;background:var(--bg-2);border-radius:3px;cursor:pointer;transition:background var(--fast)}
.sv-grid-domain:hover{background:var(--bg-3);color:var(--accent)}
.sv-grid-more{font-size:.6rem;color:var(--text-3);padding:.1rem .3rem}

/* ── Domain View ────────────────────────────────────────── */
.domain-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.5rem}
.domain-card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.55rem .75rem;cursor:pointer;transition:all var(--fast)}
.domain-card:hover{border-color:var(--accent);background:var(--bg-2)}
.domain-card .d-name{font-weight:500;font-size:.85rem;margin-bottom:.2rem}
.domain-card .d-meta{display:flex;gap:.35rem;align-items:center}

/* ── Drawer (Domain Detail) ─────────────────────────────── */
.drawer{position:fixed;top:0;right:0;width:720px;max-width:100vw;height:100vh;background:var(--bg-1);border-left:1px solid var(--border);z-index:200;display:flex;flex-direction:column;box-shadow:-4px 0 24px rgba(0,0,0,.4);animation:slideInRight .25s ease}
@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
.drawer.hidden{display:none !important}
.drawer-header{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.drawer-header h2{font-size:1.1rem;font-weight:700;margin-right:auto}
.drawer-meta{display:flex;gap:.35rem}
.drawer-close{font-size:1.3rem;padding:.2rem .4rem}
.drawer-body{flex:1;overflow-y:auto;padding:1rem}
.drawer-section{margin-bottom:1.5rem}
.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;padding-bottom:.4rem;border-bottom:1px solid var(--border)}
.section-title span{font-weight:600;font-size:.9rem}

/* ── Records Table ──────────────────────────────────────── */
.records-table{width:100%;border-collapse:collapse;font-size:.8rem}
.records-table th{padding:.4rem .55rem;text-align:left;font-weight:600;color:var(--text-3);border-bottom:1px solid var(--border);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.records-table td{padding:.4rem .55rem;border-bottom:1px solid var(--border);color:var(--text-1);font-family:var(--mono);font-size:.78rem;word-break:break-all}
.records-table tbody tr{transition:background var(--fast)}
.records-table tbody tr:hover{background:var(--bg-2)}
.records-table .rec-type{font-weight:600;color:var(--accent);font-size:.7rem;text-transform:uppercase;min-width:45px}
.records-table .rec-actions{display:flex;gap:.25rem;white-space:nowrap}
.records-table .muted{color:var(--text-3);font-family:var(--sans);text-align:center;padding:1rem}

/* ── Checks Grid (Mail Security) ────────────────────────── */
.checks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.4rem}
.check-tile{padding:.5rem;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center;transition:all var(--fast)}
.check-tile .ck-name{font-size:.7rem;font-weight:600;margin-bottom:.15rem;color:var(--text-2)}
.check-tile .ck-icon{font-size:1.3rem;margin:.15rem 0}
.check-tile .ck-status{font-size:.65rem;color:var(--text-3)}
.check-tile.ok{border-color:rgba(6,182,212,.3)}.check-tile.ok .ck-icon{color:var(--ok)}
.check-tile.warn{border-color:rgba(245,158,11,.3)}.check-tile.warn .ck-icon{color:var(--warn)}
.check-tile.err{border-color:rgba(239,68,68,.3)}.check-tile.err .ck-icon{color:var(--err)}

/* ── Analysis List ──────────────────────────────────────── */
.analysis-list{display:grid;gap:.4rem;margin-top:.5rem}
.analysis-item{padding:.5rem .65rem;background:var(--bg-2);border-left:3px solid var(--border-hi);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:.8rem}
.analysis-item.ok{border-left-color:var(--ok)}
.analysis-item.warn{border-left-color:var(--warn)}
.analysis-item.err{border-left-color:var(--err)}
.analysis-item .a-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.2rem}
.analysis-item .a-kind{font-weight:600;text-transform:uppercase;font-size:.7rem;color:var(--text-2)}
.analysis-item .a-status{font-size:.7rem;font-weight:600}
.analysis-item .a-detail{font-family:var(--mono);font-size:.75rem;color:var(--text-2);word-break:break-all}
.analysis-item .a-fixable{font-size:.7rem;color:var(--ok);margin-top:.2rem}

/* ── Mail Split Layout ───────────────────────────────────── */
.mail-split{display:grid;grid-template-columns:340px 1fr;gap:.75rem;min-height:0}
.mail-list-panel{overflow-y:auto;max-height:calc(100vh - 160px);border-right:1px solid var(--border);padding-right:.75rem}
.mail-detail-panel{overflow-y:auto;max-height:calc(100vh - 160px)}
.mail-detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;flex-wrap:wrap;gap:.5rem}
.mail-detail-header h2{font-size:1.1rem;font-weight:700}
.mail-detail-score{display:flex;align-items:center;gap:1rem;margin-bottom:.75rem;font-size:.85rem}
.mail-detail-score span:first-child{font-size:1.5rem;font-weight:700;color:var(--accent)}
@media(max-width:900px){.mail-split{grid-template-columns:1fr}.mail-list-panel{max-height:250px;border-right:none;border-bottom:1px solid var(--border);padding-right:0;padding-bottom:.75rem}}

/* ── Mail Domain List ───────────────────────────────────── */
.mail-domain-list{display:grid;gap:.4rem}
.mail-domain-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.8rem;cursor:pointer;transition:all var(--fast)}
.mail-domain-row:hover{border-color:var(--accent);background:var(--bg-2)}
.mail-domain-row.selected{border-color:var(--accent);background:var(--bg-2);box-shadow:inset 3px 0 0 var(--accent)}
.mail-domain-row .md-name{font-weight:500;display:flex;align-items:center;gap:.3rem}
.mail-domain-row .md-status{display:flex;gap:.35rem;align-items:center}
.md-tpl{font-size:.55rem;padding:.1rem .3rem;border-radius:3px;background:var(--bg-3);color:var(--text-3);font-weight:600;text-transform:uppercase}
.md-tpl.mailcow{background:#2d1b69;color:#a78bfa}

/* DKIM source indicator in analysis */
.a-src{font-size:.6rem;padding:.1rem .3rem;border-radius:3px;background:var(--bg-3);color:var(--text-3);margin-left:.4rem}
.a-src.mailcow{background:#1a3a2a;color:#6ee7b7}
.a-src.warn{background:#3a2a1a;color:#fbbf24}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.status-dot.ok{background:var(--ok)}
.status-dot.warn{background:var(--warn)}
.status-dot.err{background:var(--err)}
.status-dot.unknown{background:var(--text-3)}

/* ── Settings ───────────────────────────────────────────── */
.settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:.75rem}
.settings-panel{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius);padding:.85rem}
.settings-panel-wide{grid-column:1/-1}
.ms-row{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem .65rem;margin-bottom:.4rem}
.ms-header{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ms-checks{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.35rem}
.ms-tile{font-size:.65rem;font-family:var(--mono);padding:.15rem .4rem;border-radius:3px;white-space:nowrap}
.ms-tile.ok{background:rgba(52,211,153,.15);color:var(--ok)}
.ms-tile.err{background:rgba(239,68,68,.15);color:var(--err)}
.ms-tile.warn{background:rgba(251,191,36,.15);color:var(--warn)}
.ms-tile.unknown{background:var(--bg-3);color:var(--text-3)}
.ms-cert-expiry{font-size:.7rem;padding:.15rem .5rem;border-radius:3px;white-space:nowrap;cursor:default}
.ms-cert-expiry.ok{color:#34d399}
.ms-cert-expiry.warn{color:var(--warn)}
.ms-cert-expiry.err{color:var(--err);font-weight:600}
.ms-cert-expiry.expired{color:#ff4444;font-weight:700;animation:pulse-red 1.5s infinite}
.settings-panel h3{font-size:.95rem;font-weight:600;margin-bottom:.65rem;padding-bottom:.4rem;border-bottom:1px solid var(--border)}
.settings-panel label{display:flex;align-items:center;gap:.4rem;font-size:.8rem;margin-bottom:.4rem;color:var(--text-2)}
.settings-panel input[type="text"],
.settings-panel input[type="password"],
.settings-panel input[type="number"]{padding:.3rem .5rem;background:var(--bg-2);color:var(--text-1);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.8rem;font-family:var(--mono);width:100%;transition:border var(--fast)}
.settings-panel input:focus{outline:none;border-color:var(--accent)}
.input-sm{width:80px !important;display:inline-block}
.cred-row{display:grid;grid-template-columns:100px 1fr;gap:.3rem;align-items:center;margin-bottom:.3rem;font-size:.8rem}
.cred-row .cred-label{color:var(--text-3);font-weight:500}
.cred-row .cred-value{font-family:var(--mono);color:var(--text-2)}

/* Template Editor */
.tpl-editor{margin-bottom:.5rem;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.tpl-editor[open]{border-color:var(--accent)}
.tpl-summary{padding:.5rem .7rem;cursor:pointer;font-size:.8rem;background:var(--bg-2);user-select:none}
.tpl-summary:hover{background:var(--bg-3)}
.tpl-body{padding:.6rem}
.tpl-group{margin-bottom:.6rem}
.tpl-group-label{font-size:.7rem;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.3rem;padding-bottom:.15rem;border-bottom:1px solid var(--border)}
.tpl-fields{display:grid;grid-template-columns:1fr 1fr;gap:.35rem .6rem}
.tpl-field{display:flex;flex-direction:column;gap:.1rem}
.tpl-field.wide{grid-column:1/-1}
.tpl-flabel{font-size:.65rem;color:var(--text-3);font-weight:500}
.tpl-input{padding:.25rem .4rem;background:var(--bg-2);color:var(--text-1);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.75rem;font-family:var(--mono);width:100%}
.tpl-input:focus{outline:none;border-color:var(--accent)}
.tpl-check{display:flex;align-items:center;gap:.3rem;font-size:.75rem;color:var(--text-2);padding:.2rem 0}

/* ── Code Block ─────────────────────────────────────────── */
.code-block{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem;font-family:var(--mono);font-size:.75rem;color:var(--text-2);overflow-x:auto;white-space:pre;line-height:1.5}

/* ── Modal ──────────────────────────────────────────────── */
.modal-bg{position:fixed;inset:0;background:rgba(15,20,25,.85);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:300}
.modal-bg.hidden{display:none !important}
.modal{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 16px 48px rgba(0,0,0,.5);max-width:480px;width:92%;padding:1.25rem;animation:slideUp .2s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.modal h3{font-size:1rem;font-weight:600;margin-bottom:.75rem}
.form-grid{display:grid;gap:.5rem}
.form-grid label{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;color:var(--text-2)}
.form-grid input,.form-grid select{padding:.35rem .5rem;background:var(--bg-2);color:var(--text-1);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.8rem;font-family:inherit}
.form-grid input:focus,.form-grid select:focus{outline:none;border-color:var(--accent)}

/* ── Toast ──────────────────────────────────────────────── */
.toast-container{position:fixed;top:.75rem;right:.75rem;z-index:9999;display:grid;gap:.4rem;max-width:360px;pointer-events:none}
.toast{pointer-events:auto;padding:.5rem .85rem;background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.8rem;box-shadow:0 4px 16px rgba(0,0,0,.4);animation:toastIn .25s ease;display:flex;align-items:center;gap:.5rem}
.toast.success{border-left:3px solid var(--ok)}
.toast.error{border-left:3px solid var(--err)}
.toast.warning{border-left:3px solid var(--warn)}
.toast.info{border-left:3px solid var(--info)}
@keyframes toastIn{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}

/* ── Loading Overlay ────────────────────────────────────── */
.loading-overlay{position:fixed;inset:0;background:rgba(15,20,25,.75);backdrop-filter:blur(3px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:500;gap:.75rem}
.loading-overlay.hidden{display:none !important}
.spinner{width:2rem;height:2rem;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loading-text{font-size:.85rem;color:var(--text-2)}

/* ── Utilities ──────────────────────────────────────────── */
.hidden{display:none !important}
.muted{color:var(--text-3);font-size:.8rem;text-align:center;padding:.75rem}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:var(--bg-1)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--border-hi)}

/* ── Responsive ─────────────────────────────────────────── */
/* ── Login Page ──────────────────────────────────────────── */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg-0)}
.login-shell{width:100%;max-width:440px;padding:1.5rem}
.login-card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius);padding:2rem}
.login-card h1{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}
.eyebrow{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin-bottom:.5rem}
.hero-copy{font-size:.85rem;color:var(--text-2);line-height:1.6;margin-bottom:1rem}
.mono{font-family:var(--mono);font-size:.78rem;background:var(--bg-2);padding:.15rem .35rem;border-radius:var(--radius-sm);color:var(--ok);word-break:break-all}
.flash{padding:.6rem .75rem;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.8rem;color:var(--text-2);margin-bottom:1rem;line-height:1.5}
.flash[data-tone="error"]{border-color:var(--err);color:var(--err);background:rgba(239,68,68,.08)}
.login-meta{display:flex;gap:1rem;margin-bottom:1.25rem}
.metric-pair{display:flex;flex-direction:column;font-size:.75rem;color:var(--text-3)}
.metric-pair strong{color:var(--text-1);font-size:.85rem}
.hero-actions{display:flex;flex-direction:column;gap:.5rem}
.button-primary{display:block;text-align:center;padding:.55rem 1rem;background:var(--accent);color:var(--bg-0);border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;text-decoration:none;transition:all var(--fast)}
.button-primary:hover{background:#0891b2}
.button-primary.is-disabled{opacity:.35;pointer-events:none}
.button-ghost{display:block;text-align:center;padding:.45rem 1rem;background:transparent;color:var(--text-2);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.8rem;text-decoration:none;transition:all var(--fast)}
.button-ghost:hover{background:var(--bg-2);color:var(--text-1);border-color:var(--border-hi)}
.login-link{cursor:pointer}

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:768px){
    .drawer{width:100vw}
    .domain-container{grid-template-columns:1fr}
    .settings-grid{grid-template-columns:1fr}
    .toolbar{flex-direction:column;align-items:stretch}
    .toolbar-info{margin-left:0;text-align:right}
}