:root{
  --surface-page:#f3ecdf; --surface-panel:#fffaf0; --surface-raised:#fffdf7; --surface-inverse:#43185f;
  --text-primary:#2d2030; --text-secondary:#716274; --text-tertiary:#9a8c9c; --text-inverse:#fffaf0;
  --accent-primary:#43185f; --accent-warm:#d59b38; --success:#238c82; --warning:#bd741f; --danger:#bd4656;
  --bg:var(--surface-page); --bg2:#ece1d2; --panel:var(--surface-panel); --panel-2:#f3e9da;
  --line:rgba(67,24,95,.15); --line-2:rgba(67,24,95,.27);
  --text:var(--text-primary); --muted:var(--text-secondary); --faint:var(--text-tertiary);
  --violet:var(--accent-primary); --violet-2:#612c70; --plum:#7f3d75; --cyan:#397f92;
  --green:var(--success); --amber:var(--accent-warm); --pink:#9a476f; --red:var(--danger);
  --violet-soft:#eee2ef; --mint-soft:#dff2ed; --amber-soft:#f9ecd2;
  --glow:0 0 0 1px rgba(67,24,95,.18),0 9px 24px rgba(67,24,95,.13);
  --grad:#43185f;
  --code-bg:#2b1d30; --code-text:#fff9ee;
  --shadow:3px 4px 0 rgba(67,24,95,.08),0 12px 30px rgba(67,24,95,.06);
  --shadow-strong:5px 7px 0 rgba(67,24,95,.10),0 22px 52px rgba(67,24,95,.13);
  --radius-sm:10px; --radius:14px; --radius-lg:18px; --touch:44px; --nav-h:64px; --sidebar-w:236px;
  --mono:"SFMono-Regular",ui-monospace,"IBM Plex Mono",Menlo,Consolas,monospace;
  --sans:"Avenir Next","Trebuchet MS","Segoe UI",sans-serif;
  --display:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--text);
  background:radial-gradient(circle at 84% -12%,rgba(213,155,56,.15),transparent 31rem),radial-gradient(rgba(67,24,95,.035) .7px,transparent .8px),var(--bg);background-size:auto,8px 8px,auto;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5;
  min-height:100vh;
}
body::before{display:none}
body::after{display:none}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em}
::selection{background:rgba(213,155,56,.34);color:var(--text)}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* nav */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(18px);background:rgba(247,240,226,.9);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:13px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.025em}
.brand .logo{width:32px;height:32px;border-radius:11px;box-shadow:var(--glow);display:block;overflow:hidden;flex:0 0 auto}
.brand .logo svg{width:100%;height:100%;display:block}
.nav .spacer{flex:1}
.nav a.link,.nav button.link{color:var(--muted);font-size:13.5px;font-weight:600;padding:8px 10px;border-radius:10px}
.nav button.link{border:0;background:transparent;font-family:inherit;cursor:pointer}
.nav a.link:hover,.nav button.link:hover{color:var(--violet);background:var(--amber-soft)}
.nav-menu{position:relative}
.nav-trigger{display:inline-flex;align-items:center;gap:6px}
.nav-trigger .chev{font-size:11px;color:var(--faint)}
.nav-trigger .scope{font-size:12px;color:var(--text);font-weight:700}
.nav-dropdown{position:absolute;right:0;top:calc(100% + 8px);width:276px;padding:8px;background:rgba(255,250,240,.98);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow-strong);opacity:0;visibility:hidden;transform:translateY(-4px);transition:.14s}
.nav-menu:hover .nav-dropdown,.nav-menu:focus-within .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown a{display:block;padding:10px 12px;border-radius:9px}
.nav-dropdown a:hover{background:var(--panel-2)}
.nav-dropdown b{display:block;font-size:14px;color:var(--text)}
.nav-dropdown span{display:block;margin-top:2px;font-size:12.5px;color:var(--muted);line-height:1.35}
.nav-account{position:relative}.nav-account>summary{display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer}.nav-account>summary::-webkit-details-marker{display:none}.nav-account>summary::after{content:"⌄";color:var(--faint);font-size:12px;line-height:1}.nav-account[open]>summary{color:var(--violet);background:var(--amber-soft)}
.nav-account-menu{position:absolute;right:0;top:calc(100% + 8px);width:250px;padding:8px;border:1px solid var(--line-2);border-radius:var(--radius);background:rgba(255,250,240,.99);box-shadow:var(--shadow-strong)}
.nav-account-menu a,.nav-account-menu button{display:flex;width:100%;min-height:40px;align-items:center;padding:9px 11px;border:0;border-radius:9px;background:transparent;color:var(--text);font:650 13px/1.3 var(--sans);text-align:left;cursor:pointer}.nav-account-menu a:hover,.nav-account-menu button:hover{background:var(--panel-2);color:var(--violet)}.nav-account-menu form{margin:6px 0 0;padding-top:6px;border-top:1px solid var(--line)}.nav-account-menu button{color:var(--red)}
.nav-desktop{display:flex;align-items:center;gap:2px}
.nav-mobile{display:none;margin-left:auto}
.nav-mobile summary{list-style:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:12px;background:var(--panel);cursor:pointer;align-items:center;justify-content:center}
.nav-mobile summary::-webkit-details-marker{display:none}
.nav-mobile-icon,.nav-mobile-icon::before,.nav-mobile-icon::after{display:block;width:18px;height:2px;border-radius:999px;background:var(--text);transition:.16s}
.nav-mobile-icon{position:relative}
.nav-mobile-icon::before,.nav-mobile-icon::after{content:"";position:absolute;left:0}
.nav-mobile-icon::before{top:-6px}.nav-mobile-icon::after{top:6px}
.nav-mobile[open] .nav-mobile-icon{background:transparent}
.nav-mobile[open] .nav-mobile-icon::before{top:0;transform:rotate(45deg)}
.nav-mobile[open] .nav-mobile-icon::after{top:0;transform:rotate(-45deg)}
.nav-mobile-panel{position:fixed;inset:68px 0 auto;padding:12px 14px 16px;background:var(--panel);border-bottom:1px solid var(--line-2);box-shadow:var(--shadow-strong);max-height:calc(100dvh - 68px);overflow-y:auto}
.nav-mobile-panel a,.nav-mobile-panel button{min-height:44px}
.nav-mobile-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-width:720px;margin:0 auto}
.nav-mobile-links a{display:flex;align-items:center;padding:10px 12px;border-radius:11px;color:var(--text);font-size:14px;font-weight:650}
.nav-mobile-links a svg{width:17px;height:17px;margin-right:9px;color:var(--violet);flex:0 0 auto}
.nav-mobile-links a:hover{background:var(--violet-soft);color:var(--violet-2)}
.nav-mobile-actions{display:flex;gap:8px;max-width:720px;margin:10px auto 0;padding-top:10px;border-top:1px solid var(--line)}
.nav-mobile-actions>*{flex:1;margin:0}
.nav-mobile-actions .btn{width:100%}

/* buttons */
.btn{display:inline-flex;min-height:var(--touch);align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:var(--radius-sm);border:1px solid var(--line-2);
  background:var(--panel);color:var(--text);font-weight:700;font-size:14px;cursor:pointer;transition:.16s;font-family:inherit;white-space:nowrap}
.btn:hover{border-color:var(--violet);background:var(--amber-soft);transform:translateY(-1px)}
.btn.primary{background:var(--violet);color:var(--text-inverse);border-color:var(--violet);box-shadow:3px 4px 0 rgba(67,24,95,.18)}
.btn.primary:hover{background:#612c70;box-shadow:4px 5px 0 rgba(67,24,95,.22);filter:none}
.btn.ghost{background:transparent}
.btn.sm{min-height:36px;padding:6px 11px;font-size:12.5px;border-radius:9px}
.btn.danger{color:var(--red);background:rgba(220,38,38,.08)}
.btn.danger:hover{background:rgba(220,38,38,.16)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* cards / panels */
.card{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);padding:20px}
.card.glow{box-shadow:var(--shadow)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--line-2);background:var(--panel-2);color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--muted)}
.dot.live{background:var(--green);box-shadow:0 0 0 0 rgba(21,163,74,.7);animation:pulse 1.8s infinite}
.dot.warn{background:var(--amber)} .dot.off{background:var(--faint)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(21,163,74,.55)}70%{box-shadow:0 0 0 8px rgba(21,163,74,0)}100%{box-shadow:0 0 0 0 rgba(21,163,74,0)}}
.tag{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--violet-soft);color:var(--violet-2);font-weight:700}

/* forms */
input,select,textarea{min-height:var(--touch);font-family:inherit;font-size:14px;color:var(--text);background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:10px 12px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(67,24,95,.12)}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:500}
.field{margin-bottom:14px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;color:var(--faint);font-weight:750;font-size:12px;text-transform:uppercase;letter-spacing:.055em;padding:9px 10px;border-bottom:1px solid var(--line-2);background:rgba(243,233,218,.58)}
td{padding:11px 10px;border-bottom:1px solid var(--line)}
.scroll{overflow:auto}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(67,24,95,.22);border-radius:8px}
@media(max-width:760px){
  .nav-inner{width:100%;max-width:100%;min-width:0;padding-inline:14px}
  .brand{font-size:16px}
  .nav-desktop{display:none}
  .nav-mobile,.nav-mobile summary{display:flex}
  .nav-mobile{align-items:center}
}
.itip{position:fixed;z-index:2147483000;max-width:min(360px,calc(100vw - 16px));padding:5px 8px;border-radius:6px;background:#2b1d30;color:#fff9ee;font:12px/1.4 var(--sans,system-ui,sans-serif);box-shadow:0 4px 14px rgba(0,0,0,.22);pointer-events:none;white-space:pre-line;overflow-wrap:anywhere}