:root {
  --sp-bg: #111214; --sp-panel: #1a1b1e; --sp-text: #f2f3f5; --sp-muted: #a8abb2;
  --sp-line: #ffffff20; --sp-accent: #d83246; --sp-field: #101114;
  --sp-sm: clamp(.875rem,.85rem + .15vw,1rem);
  --sp-base: 1rem; --sp-lg: clamp(1.125rem,1rem + .5vw,1.375rem);
  --sp-xl: clamp(1.5rem,1.3rem + .6vw,1.875rem);
  --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem;
}
[data-theme="light"] { --sp-bg:#f3f4f6; --sp-panel:#fff; --sp-text:#202126; --sp-muted:#60646e; --sp-line:#00000020; --sp-field:#f7f8fa; --bg:#f3f4f6; --panel:#fff; --text:#202126; --muted:#60646e; --border:#d6d8dd; }
body.server-active, body.server-login { background:var(--sp-bg); color:var(--sp-text); font:var(--sp-base)/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
.server-active button:hover { transform:none; box-shadow:none; }
.server-active .top, .server-active .panel, .server-active .stat, .server-active .item-card { background:var(--sp-panel); box-shadow:none; }
.server-active .nav { overflow-x:auto; flex-wrap:nowrap; }
.server-active .navbtn { white-space:nowrap; }
.server-active input, .server-active select, .server-active textarea { background:var(--sp-field); color:var(--sp-text); }
.server-active .topactions { flex-wrap:wrap; }
.server-active .topactions button, .server-active .nav button { min-height:44px; }
.sp-shell { padding:var(--sp-6) 0; }
.sp-header { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-4); margin-bottom:var(--sp-6); }
.sp-header h1 { font-size:var(--sp-xl); margin:0; }
.sp-header p { margin:var(--sp-2) 0 0; color:var(--sp-muted); }
.sp-tabs { display:flex; gap:var(--sp-2); overflow:auto; padding-bottom:var(--sp-3); margin-bottom:var(--sp-4); }
.sp-tabs button { background:transparent; color:var(--sp-muted); border:1px solid var(--sp-line); white-space:nowrap; min-height:44px; }
.sp-tabs button[aria-selected=true] { color:var(--sp-text); background:var(--sp-panel); border-color:var(--sp-accent); }
.sp-card { background:var(--sp-panel); padding:var(--sp-6); border:1px solid var(--sp-line); border-radius:12px; margin-bottom:var(--sp-4); min-width:0; }
.sp-card h2 { font-size:var(--sp-lg); margin:0 0 var(--sp-4); }
.sp-card h3 { font-size:var(--sp-base); margin:var(--sp-4) 0 var(--sp-2); }
.sp-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); }
.sp-fields { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.sp-fields label, .sp-field { display:flex; flex-direction:column; gap:var(--sp-2); font-size:var(--sp-sm); font-weight:700; min-width:0; }
.sp-field { margin-bottom:var(--sp-4); }
.sp-card input, .sp-card select, .sp-card textarea { width:100%; margin:0; min-height:44px; border:1px solid var(--sp-line); border-radius:6px; padding:var(--sp-3); }
.sp-card button { min-height:44px; }
.sp-card form > button { margin-top:var(--sp-4); }
.sp-muted, .sp-note { color:var(--sp-muted); font-size:var(--sp-sm); }
.sp-note { padding:var(--sp-4); background:var(--sp-field); border-radius:6px; }
.sp-error { color:#ff9eaa; border:1px solid #a53245; padding:var(--sp-3); border-radius:6px; }
[data-theme=light] .sp-error { color:#9d2435; }
.sp-success { color:#62c994; }
.sp-table-wrap { overflow:auto; }
.sp-table { width:100%; border-collapse:collapse; font-size:var(--sp-sm); }
.sp-table th, .sp-table td { padding:var(--sp-3); text-align:left; border-bottom:1px solid var(--sp-line); vertical-align:top; }
.sp-table th { color:var(--sp-muted); font-weight:600; }
.sp-table td:first-child { min-width:160px; }
.sp-table:has([data-listing-select]) td:first-child { min-width:52px; width:52px; }
.sp-table [data-listing-select] { width:22px; min-height:22px; height:22px; padding:0; cursor:pointer; }
.sp-table:has([data-listing-select]) td:nth-child(2) { min-width:180px; }
.sp-table [data-listing-map] { min-width:180px; }
.sp-card button:disabled { opacity:.55; cursor:not-allowed; }
.sp-value { font-size:var(--sp-xl); font-weight:800; font-variant-numeric:tabular-nums; }
.sp-kpis { display:flex; gap:var(--sp-8); flex-wrap:wrap; margin-bottom:var(--sp-6); }
.sp-kpis span { display:block; color:var(--sp-muted); font-size:var(--sp-sm); }
.sp-actions { display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; }
.sp-empty { padding:var(--sp-8) var(--sp-4); color:var(--sp-muted); text-align:center; }
.sp-badge { display:inline-block; padding:.25rem .5rem; border:1px solid var(--sp-line); border-radius:4px; font-size:var(--sp-sm); }
.sp-device { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3); border-top:1px solid var(--sp-line); padding:var(--sp-3) 0; }
.sp-card summary { cursor:pointer; min-height:44px; padding:var(--sp-3) 0; font-weight:700; }
.sp-card .sp-check { display:flex; gap:var(--sp-3); align-items:flex-start; margin-top:var(--sp-4); }
.sp-card .sp-check input { width:20px; min-height:20px; flex-shrink:0; }
.sp-bar { height:8px; background:var(--sp-line); border-radius:4px; margin-top:var(--sp-2); overflow:hidden; }
.sp-bar > span { height:100%; background:var(--sp-accent); display:block; }
.server-login { margin:0; }
.auth-shell { max-width:460px; margin:0 auto; padding:clamp(2rem,8vh,6rem) var(--sp-6); }
.auth-brand { display:flex; gap:var(--sp-3); align-items:center; margin-bottom:var(--sp-8); font-weight:900; letter-spacing:.06em; }
.auth-brand svg, .auth-brand b { color:var(--sp-accent); }
.auth-card { background:var(--sp-panel); padding:var(--sp-8); border:1px solid var(--sp-line); border-radius:12px; }
.auth-card h1 { font-size:var(--sp-xl); margin:var(--sp-3) 0; }
.auth-card p, .auth-help { color:var(--sp-muted); font-size:var(--sp-sm); }
.eyebrow { font-size:.75rem; letter-spacing:.13em; color:var(--sp-muted); }
.auth-card form { margin-top:var(--sp-6); }
.auth-card label { display:block; margin:var(--sp-4) 0 var(--sp-2); font-size:var(--sp-sm); font-weight:700; }
.auth-card input { box-sizing:border-box; width:100%; background:var(--sp-field); color:var(--sp-text); border:1px solid var(--sp-line); border-radius:6px; padding:var(--sp-3); min-height:48px; font:inherit; }
.auth-card button { width:100%; min-height:48px; padding:var(--sp-3); border:0; border-radius:6px; background:var(--sp-accent); color:#fff; font:inherit; font-weight:800; cursor:pointer; margin-top:var(--sp-3); }
.auth-help { text-align:center; margin-top:var(--sp-6); }
:focus-visible { outline:2px solid var(--sp-accent); outline-offset:3px; }
@media(max-width:700px) {
  .sp-grid,.sp-fields { grid-template-columns:1fr; }
  .sp-header { flex-direction:column; }
  .sp-card { padding:var(--sp-4); }
  .sp-kpis { gap:var(--sp-4); }
  .server-active .app { padding:var(--sp-3); }
  .server-active .nav { position:sticky; top:0; z-index:20; background:var(--sp-bg); padding:var(--sp-2) 0; }
  .sp-table th,.sp-table td { padding:var(--sp-2); }
  .auth-card { padding:var(--sp-6); }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }