/* design-system.css — single source of truth for NewazaScanner UI */
:root{
  /* neutrals */
  --bg:#0a0e16; --surface:#131a24; --surface-2:#0e1420;
  --border:#242c3a; --border-subtle:#1c2330;
  --text:#e6edf3; --text-muted:#98a4b6; --text-dim:#64748b;
  /* accent (blue) */
  --accent:#4c9eff; --accent-hover:#3b8ef0; --accent-contrast:#06122a;
  /* semantic — reserved for meaning, independent of accent */
  --pos:#3fd07e; --neg:#ff6b6b; --warn:#f5c451;
  --long:#3fd07e; --short:#ff6b6b;
  --status-breakout:#3fd07e; --status-testing:#f5c451; --status-basing:#98a4b6;
  /* type */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,monospace;
  --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:24px;
  /* spacing (8px base) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  /* radii + layout */
  --r-sm:6px; --r-md:8px; --r-pill:999px; --maxw:1200px;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-sans); font-size:var(--fs-base); }
a{ color:var(--accent); text-decoration:none; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:var(--sp-6); }
.page{ padding:0 var(--sp-6) var(--sp-6); }

/* nav */
nav{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1); padding:var(--sp-3) var(--sp-5);
     background:var(--surface-2); border-bottom:1px solid var(--border); margin-bottom:var(--sp-5); }
nav a{ color:var(--text-muted); font-size:var(--fs-sm); padding:var(--sp-2) var(--sp-3);
       border-bottom:2px solid transparent; }
nav a:hover{ color:var(--text); }
nav a.active{ color:var(--text); font-weight:600; border-bottom-color:var(--accent); }
.settings-btn{ margin-left:auto; color:var(--text-muted); background:var(--surface); border:1px solid var(--border);
               border-radius:var(--r-md); width:32px; height:32px; cursor:pointer; font-size:var(--fs-lg); line-height:1; }
.settings-btn:hover{ color:var(--text); border-color:var(--accent); }

/* buttons */
.btn{ font-size:var(--fs-sm); font-weight:600; padding:7px 16px; border-radius:var(--r-md);
      border:1px solid transparent; cursor:pointer; font-family:inherit; }
.btn.primary{ background:var(--accent); color:var(--accent-contrast); }
.btn.primary:hover{ background:var(--accent-hover); }
.btn.secondary{ background:var(--surface); color:var(--text); border-color:var(--border); }
.btn.secondary:hover{ border-color:var(--accent); }
.btn.ghost{ background:transparent; color:var(--text-muted); border-color:var(--border); }
.btn.ghost:hover{ color:var(--text); }
.btn.danger{ background:transparent; color:var(--neg); border-color:var(--neg); }

/* pills */
.pill{ font-size:var(--fs-xs); font-weight:600; padding:3px 11px; border-radius:var(--r-pill); }
.pill.pos{ background:rgba(63,208,126,.14); color:var(--pos); }
.pill.neg{ background:rgba(255,107,107,.14); color:var(--neg); }
.pill.warn{ background:rgba(245,196,81,.14); color:var(--warn); }
.pill.neutral{ background:rgba(152,164,182,.14); color:var(--text-muted); }

/* tables */
.data-table{ width:100%; border-collapse:collapse; font-size:var(--fs-base); }
.data-table th{ color:var(--text-muted); font-size:var(--fs-xs); letter-spacing:1px; text-transform:uppercase;
                text-align:right; padding:0 0 10px; font-weight:600; }
.data-table th.l{ text-align:left; } .data-table th.c{ text-align:center; }
.data-table td{ padding:11px var(--sp-2); text-align:right; font-variant-numeric:tabular-nums;
                border-top:1px solid var(--border-subtle); }
.data-table td.l{ text-align:left; font-weight:700; } .data-table td.c{ text-align:center; }

/* cards / panels */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-4); }
.panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); }
.panel.long{ border-left:3px solid var(--long); }
.panel.short{ border-left:3px solid var(--short); }

/* inputs */
.input, select.input{ background:var(--surface-2); border:1px solid var(--border); color:var(--text);
                      border-radius:var(--r-md); padding:8px 12px; font-size:var(--fs-base); font-family:inherit; }
input[type=range].rng{ -webkit-appearance:none; appearance:none; height:5px; background:var(--border); border-radius:3px; }
input[type=range].rng::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
                                             background:var(--accent); cursor:pointer; }

/* misc */
.status-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--pos);
             box-shadow:0 0 0 3px rgba(63,208,126,.2); }
.section-label{ color:var(--text-dim); font-size:var(--fs-xs); letter-spacing:1px; text-transform:uppercase; }
.page-header{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
              padding-bottom:var(--sp-3); border-bottom:1px solid var(--border); margin-bottom:var(--sp-5); }
.page-title{ margin:0; font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.2px; color:var(--accent); }

/* settings modal */
.modal-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1000;
                justify-content:center; align-items:center; }
.modal-overlay.open{ display:flex; }
.modal{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:var(--sp-6);
        width:420px; max-width:90vw; }
.modal h3{ color:var(--accent); margin:0 0 16px; font-size:var(--fs-lg); }
.modal h4{ color:var(--accent); font-size:var(--fs-md); margin-bottom:10px; }
.modal-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0;
            border-bottom:1px solid var(--border-subtle); }
.modal-row:last-of-type{ border-bottom:none; }
.modal-row label{ color:var(--text); font-size:var(--fs-md); }
.modal-row select, .modal-row input[type=number]{ background:var(--surface-2); color:var(--text);
            border:1px solid var(--border); padding:4px 8px; border-radius:var(--r-sm); font-size:var(--fs-sm); font-family:inherit; }
.modal-row select:disabled{ opacity:.4; }
.switch{ position:relative; width:44px; height:24px; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{ position:absolute; inset:0; background:var(--border); border-radius:24px; cursor:pointer; transition:background .2s; }
.switch .slider::before{ content:""; position:absolute; width:18px; height:18px; left:3px; bottom:3px;
                         background:var(--text); border-radius:50%; transition:transform .2s; }
.switch input:checked + .slider{ background:var(--accent); }
.switch input:checked + .slider::before{ transform:translateX(20px); }
.modal-actions{ display:flex; justify-content:flex-end; gap:var(--sp-2); margin-top:16px; }
.modal-actions button{ padding:6px 16px; border-radius:var(--r-md); border:1px solid var(--border);
                       background:var(--surface-2); color:var(--text); cursor:pointer; font-family:inherit; font-size:var(--fs-sm); }
.modal-actions .btn-save{ background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }