/* ScriptMonitor v10.12 — zero external dependencies */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Tokens: DARK ──────────────────────────────────────────────────────────── */
:root {
  --accent:      #0d9488; --accent-lt:  rgba(13,148,136,.15); --accent-hv: #0f766e; --accent-text: #5eead4;
  --green:       #10b981; --green-lt:   rgba(16,185,129,.15); --green-text: #6ee7b7;
  --red:         #ef4444; --red-lt:     rgba(239,68,68,.12);  --red-text:   #f87171;
  --amber:       #f59e0b; --amber-lt:   rgba(245,158,11,.12); --amber-text: #fcd34d;
  --gray:        #94a3b8; --gray-lt:    rgba(255,255,255,.05);
  --bg:          #06172b; --bg-2: #091e35; --bg-3: #0d2540;
  --body-bg:     #02080f;
  --card-bg:     #091e35;
  --border:      rgba(20,184,166,.12); --border-2: rgba(255,255,255,.07);
  --text:        #e3e3e3; --text-2: #94a3b8; --text-3: #7f8ea3;   /* AA on every dark surface (>=4.6:1) */
  --field-bd:    #5b7394; --focus: #5eead4; --link-hover: #99f6e4;
  --accent-solid:#0f766e; --red-solid:#b91c1c; --green-solid:#047857; --amber-solid:#b45309;  /* white-text fills, >=5:1 */
  --font-mono:   ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono','Courier New',monospace;
  --nav-bg:      #07152a; --nav-border: rgba(20,184,166,.12);
  --nav-text:    #9fb0c4; --nav-active: #5eead4; --nav-active-bd: #0d9488;
  --radius:      6px; --radius-lg: 10px;
  --shadow:      0 4px 24px rgba(0,0,0,.4); --shadow-sm: 0 2px 8px rgba(0,0,0,.25);
  --tr:          .2s ease;
  color-scheme:  dark;
}

/* ── Tokens: LIGHT ─────────────────────────────────────────────────────────── */
body.light {
  --accent:      #0d9488; --accent-lt: #f0fdfa; --accent-hv: #0f766e; --accent-text: #0b6b64;
  --green:       #059669; --green-lt:  #f0fdf4; --green-text: #065f46;
  --red:         #ea4343; --red-lt:    #fef2f2; --red-text:   #991b1b;
  --amber:       #d97706; --amber-lt:  #fffbeb; --amber-text: #92400e;
  --gray:        #475569; --gray-lt:   #f1f5f9;
  --bg:          #f7f7f7; --bg-2: #eef0f2; --bg-3: #e4e7ea;
  --body-bg:     #e8f5f4;
  --card-bg:     #ffffff;
  --border:      rgba(0,0,0,.08); --border-2: rgba(0,0,0,.06);
  --text:        #0f172a; --text-2: #475569; --text-3: #566679;
  --field-bd:    #7b8a9e; --focus: #0b6b64; --link-hover: #134e4a;
  --nav-bg:      #0a1628; --nav-border: rgba(20,184,166,.15);
  --nav-text:    #9fb0c4;
  --shadow:      0 4px 16px rgba(0,0,0,.08); --shadow-sm: 0 1px 4px rgba(0,0,0,.06);
  color-scheme:  light;
}

/* ── Reset + Base ──────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-padding-top:56px; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }
body { background:var(--body-bg); color:var(--text); font-family:'Inter',system-ui,sans-serif;
       font-size:13px; line-height:1.5; transition:background var(--tr),color var(--tr); }
a, a:visited { color:var(--accent-text); text-decoration:none; }
a:hover { color:var(--link-hover); }
/* inline text links need a non-colour cue */
.text-small a, .alert a, .sm-footer a { text-decoration:underline; text-underline-offset:2px; }

/* focus: one visible ring for every keyboard-focusable control */
:focus { outline:none; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.sm-nav :focus-visible, .sm-footer :focus-visible { outline-color:#5eead4; }
::placeholder { color:var(--text-3); opacity:1; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
h1 { font-size:1.25rem; font-weight:700; color:var(--text); margin-bottom:1rem; }
h2 { font-size:1rem; font-weight:600; color:var(--text); margin-bottom:.75rem; }
p  { color:var(--text-2); }
code { background:var(--bg-3); color:var(--accent-text); overflow-wrap:anywhere; padding:1px 5px; border-radius:3px; font-size:.8em; }
hr { border:none; border-top:1px solid var(--border); margin:16px 0; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg-2); }
::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent); }

/* ── Nav ───────────────────────────────────────────────────────────────────── */
.sm-nav {
  position:sticky; top:0; height:48px;      /* sticky inside .sm-shell: never overlaps content */
  background:var(--nav-bg); border-bottom:1px solid var(--nav-border);
  display:flex; align-items:center; padding:0 20px; z-index:200;
}
.sm-nav-inner {
  display:flex; align-items:center; width:100%; max-width:1400px; margin:0 auto;
}
.sm-brand {
  display:flex; align-items:center; gap:8px; flex-shrink:0; margin-right:24px;
  color:var(--accent-text); font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
}
.sm-brand img { height:26px; width:auto; }
@media(min-width:768px) and (max-width:900px) { .sm-nav { padding:0 12px; } .sm-brand { margin-right:12px; } .sm-nav-user { display:none; } }
.sm-nav-links { display:flex; align-items:center; gap:0; }
.sm-nav-link {
  display:flex; align-items:center; height:48px; padding:0 12px;
  font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--nav-text); border-bottom:2px solid transparent;
  transition:color var(--tr),border-color var(--tr); white-space:nowrap;
  text-decoration:none !important;
}
.sm-nav-link:hover { color:#fff; text-decoration:none !important; }
.sm-nav-link:focus-visible { outline-offset:-3px; }
.sm-nav-link.active { color:var(--nav-active); border-bottom-color:var(--nav-active-bd); text-decoration:none !important; }
.sm-nav-right { display:flex; align-items:center; gap:4px; margin-left:auto; }
.sm-nav-user { font-size:.7rem; color:var(--nav-text); padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sm-theme-btn {
  background:none; border:none; cursor:pointer; color:var(--nav-text);
  font-size:14px; height:48px; width:32px; display:flex; align-items:center; justify-content:center;
  transition:color var(--tr);
}
.sm-theme-btn:hover { color:var(--nav-active); }
.sm-theme-btn:focus-visible { outline-offset:-4px; }
.sm-nav-toggler {
  display:none; background:none; border:1px solid var(--border-2); color:var(--nav-text);
  padding:4px 8px; border-radius:var(--radius); cursor:pointer; font-size:16px;
  margin-left:auto; min-width:40px; min-height:40px; line-height:1;
}
/* sm-nav-menu: on desktop, transparent flex row wrapper */
.sm-nav-menu { display:flex; align-items:center; flex:1; }
@media(max-width:767px) {
  .sm-nav-toggler { display:block; }
  /* Single absolutely-positioned dropdown — both sections stack inside it */
  .sm-nav-menu {
    display:none; position:absolute; top:48px; left:0; right:0; z-index:999;
    background:var(--nav-bg); border-bottom:1px solid var(--nav-border);
    flex-direction:column; align-items:stretch;
    box-shadow:0 8px 24px rgba(0,0,0,.4);
  }
  .sm-nav-menu.open { display:flex; }
  .sm-nav-links { flex-direction:column; padding:8px 20px 4px; }
  .sm-nav-right {
    flex-direction:row; flex-wrap:nowrap; padding:10px 20px 14px;
    border-top:1px solid var(--border-2); gap:8px; align-items:center;
    width:100%; justify-content:space-between;
  }
  .sm-nav-link { height:auto; min-height:40px; padding:10px 0; border-bottom:none; font-size:.8rem; }
  .sm-theme-btn { width:40px; height:40px; }
  .sm-nav-user { padding:10px 8px 10px 0; font-size:.7rem; }
  /* Fade out right edge of source tabs to hint at horizontal scroll */
  .sm-tabs {
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }
  /* Reduce side padding on mobile */
  .sm-main { padding:12px; }
  .sm-page-hdr { margin-bottom:10px; }
}

/* ── Main ──────────────────────────────────────────────────────────────────── */
.sm-main { padding:20px; flex:1; }
.sm-page-hdr { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.sm-page-hdr h1 { margin:0; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.sm-footer {
  background:var(--nav-bg); border-top:1px solid var(--nav-border);
  padding:10px 24px; font-size:.72rem; color:var(--nav-text);   /* footer is dark in both themes */
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 12px;
}
.sm-footer a, .sm-footer a:visited { color:#cbd5e1; }
.sm-footer a:hover { color:#5eead4; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg); margin-bottom:14px; }
.card-hdr { background:rgba(255,255,255,.03); border-bottom:1px solid var(--border); padding:10px 14px; font-size:.78rem; font-weight:600; color:var(--text); }
body.light .card-hdr { background:var(--bg-2); }
.card-body { padding:14px; }

/* ── Tables ────────────────────────────────────────────────────────────────── */
.sm-table-wrap { position:relative; border:1px solid var(--border); border-radius:var(--radius-lg); overflow-x:auto; overflow-y:hidden; max-width:100%; -webkit-overflow-scrolling:touch; }
.sm-table { width:100%; border-collapse:collapse; font-size:12px; }
.sm-table th {
  background:transparent; border-bottom:1px solid var(--border); border-top:none;
  color:var(--text-2); font-size:.68rem; font-weight:600; text-align:left;
  text-transform:uppercase; letter-spacing:.08em; padding:8px 10px; white-space:nowrap;
}
.sm-table th.tc, .sm-table td.tc { text-align:center; }
.sm-table td.tc, .sm-table td.mono { white-space:nowrap; }
.sm-table th.tr, .sm-table td.tr { text-align:right; }
.sm-table td { padding:7px 10px; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--text); }
.sm-table tbody tr:last-child td { border-bottom:none; }
.sm-table tbody tr:hover td { background:var(--accent-lt); }
.sm-table a { color:var(--text); }
.sm-table td strong { overflow-wrap:anywhere; }
.sm-table a:hover { color:var(--accent-text); }
tr.row-error td  { background:rgba(239,68,68,.04); }
tr.row-nodata td { background:rgba(245,158,11,.04); }
tr.row-error:hover td  { background:rgba(239,68,68,.08) !important; }
tr.row-nodata:hover td { background:rgba(245,158,11,.08) !important; }
tr.source-hdr td { white-space:normal;
  background:var(--bg-3); color:var(--accent-text);
  font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; padding:5px 10px; border-top:2px solid var(--border);
}
.sm-table tbody tr.source-hdr:hover td { background:var(--bg-3); }
.tc { text-align:center; } .tr { text-align:right; }
.mono { font-family:var(--font-mono); }
.sm-empty { text-align:center; padding:24px 12px; color:var(--text-2); }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 13px; font-size:12px; font-family:inherit; font-weight:500;
  border:1px solid var(--border-2); border-radius:var(--radius);
  background:var(--bg-3); color:var(--text);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:all var(--tr);
}
.btn:hover { background:var(--border); border-color:var(--accent); color:var(--text); }
.btn:visited { color:var(--text); }
.btn-primary:visited { color:var(--accent-text); }
.btn-primary   { background:var(--accent-lt); border-color:var(--accent); color:var(--accent-text); }
.btn-primary:hover   { background:var(--accent-solid); border-color:var(--accent-solid); color:#fff; }
.btn-secondary { background:var(--gray-lt); border-color:var(--field-bd); color:var(--text-2); }
.btn-secondary:hover { background:var(--border); color:var(--text); }
.btn-danger  { background:var(--red-lt); border-color:var(--red); color:var(--red-text); }
.btn-danger:hover  { background:var(--red-solid); border-color:var(--red-solid); color:#fff; }
.btn-success { background:var(--green-lt); border-color:var(--green); color:var(--green-text); }
.btn-success:hover { background:var(--green-solid); border-color:var(--green-solid); color:#fff; }
.btn-warning { background:var(--amber-lt); border-color:var(--amber); color:var(--amber-text); }
.btn-warning:hover { background:var(--amber-solid); border-color:var(--amber-solid); color:#fff; }
.btn-sm { padding:3px 8px !important; font-size:11px !important; min-height:28px; justify-content:center; }
.btn-group { display:flex; gap:4px; flex-wrap:wrap; }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.form-row { margin-bottom:14px; }
.form-row label,.form-label {
  display:block; color:var(--text-2); font-size:.78rem; font-weight:500; margin-bottom:4px;
}
.form-input {
  display:block; width:100%; padding:6px 10px; font-size:12px; font-family:inherit;
  background:var(--bg-3); border:1px solid var(--field-bd); color:var(--text);
  border-radius:var(--radius); transition:border-color var(--tr),box-shadow var(--tr);
}
.form-input:focus { border-color:var(--focus); }
.form-input:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }
body.light .form-input { background:#fff; }
body.light .form-input:focus { background:#fff; }
/* shared look for the search box (was inline style with outline:none) */
.sm-search { background:var(--bg-2); border:1px solid var(--field-bd); color:var(--text); border-radius:var(--radius);
  padding:5px 10px; font-size:12px; font-family:inherit; width:180px; max-width:100%; }
.sm-search:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }
/* top bar: source/admin tabs + search; wraps on small screens */
.sm-toolbar { display:flex; align-items:center; border-bottom:1px solid var(--border); margin-bottom:16px; gap:0; }
.sm-toolbar .sm-tabs { border-bottom:none; margin-bottom:0; flex:1; min-width:0; }
.sm-search-wrap { padding:0 0 6px 12px; flex-shrink:0; }
.form-input:disabled,.form-input[readonly] { opacity:.6; cursor:not-allowed; }
select.form-input option { background:var(--bg-3); color:var(--text); }
.form-check { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.form-check input[type=checkbox] { width:14px; height:14px; cursor:pointer; accent-color:var(--accent); }
.form-check label { margin:0; cursor:pointer; }
input[type=checkbox], input[type=radio] { accent-color:var(--accent); }
fieldset { border:none; padding:0; margin-bottom:20px; }
legend {
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--text-3); border-bottom:1px solid var(--border);
  padding-bottom:6px; margin-bottom:12px; width:100%;
}
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:840px; }
@media(max-width:640px) { .two-col { grid-template-columns:1fr; } }
.form-max { max-width:860px; }

/* ── Alerts ────────────────────────────────────────────────────────────────── */
.alert { border-radius:var(--radius); padding:8px 12px; font-size:12px; margin-bottom:12px; }
.alert-success { background:var(--green-lt); color:var(--green-text); }
.alert-danger  { background:var(--red-lt);   color:var(--red-text);   }
.alert-warning { background:var(--amber-lt); color:var(--amber-text); }
.alert-info    { background:var(--accent-lt);color:var(--accent-text);}

/* ── Pills ─────────────────────────────────────────────────────────────────── */
.sm-pill {
  display:inline-block; padding:2px 9px; border-radius:10px;
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; line-height:1.5;
}
.pill-green { background:var(--green-lt); color:var(--green-text); }
.pill-red   { background:var(--red-lt);   color:var(--red-text);   }
.pill-amber { background:var(--amber-lt); color:var(--amber-text); }
.pill-gray  { background:var(--gray-lt);  color:var(--gray);       }
.pill-sleep { background:rgba(99,102,241,.15); color:#a5b4fc; }
body.light .pill-sleep { background:#eef2ff; color:#3730a3; }
tr.source-hdr .sm-pill { max-width:100%; white-space:normal; overflow-wrap:anywhere; vertical-align:middle; }

/* ── Status badge filters ──────────────────────────────────────────────────── */
.sm-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.sm-badge {
  padding:4px 14px; border-radius:20px; font-size:11px; font-weight:600;
  cursor:pointer; user-select:none; border:1px solid var(--border-2);   /* full opacity: dimming broke AA contrast */
  display:inline-block; line-height:1.6;
  transition:transform .1s,box-shadow .15s;
}
.sm-badge:hover { transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,.2); }
.sm-badge.active { font-weight:700; border-color:transparent; box-shadow:0 0 0 2px var(--accent); }
.badge-all     { background:#e2e8f0; color:#334155; }
.badge-running { background:var(--green-lt); color:var(--green-text); }
.badge-error   { background:var(--red-lt);   color:var(--red-text);   }
.badge-nodata  { background:var(--amber-lt); color:var(--amber-text); }

/* ── Source / admin tabs ───────────────────────────────────────────────────── */
.sm-tabs {
  display:flex; border-bottom:1px solid var(--border); margin-bottom:16px;
  overflow-x:auto; scrollbar-width:none;
}
.sm-tabs::-webkit-scrollbar { display:none; }
.sm-tab {
  padding:10px 16px; font-size:.75rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--text-2); border-bottom:2px solid transparent;
  cursor:pointer; background:none; border-top:none; border-left:none; border-right:none;
  font-family:inherit; white-space:nowrap; transition:color var(--tr),border-color var(--tr);
}
.sm-tab:hover { color:var(--text); }
.sm-tab:focus-visible { outline-offset:-2px; }
.sm-tab.active { color:var(--accent-text); border-bottom-color:var(--accent); }

/* ── View toggle ───────────────────────────────────────────────────────────── */
.view-toggle { display:flex; gap:4px; }
.view-btn {
  background:var(--bg-3); border:1px solid var(--field-bd); color:var(--text-2);
  padding:5px 10px; min-width:34px; min-height:30px; line-height:1; border-radius:var(--radius); cursor:pointer; font-size:14px;
  transition:all var(--tr);
}
.view-btn.active,.view-btn:hover { background:var(--accent-lt); border-color:var(--accent); color:var(--accent-text); }

/* ── Script cards (card view) ──────────────────────────────────────────────── */
.script-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:12px; }
@media(max-width:480px) { .script-cards { grid-template-columns:1fr; } }
.script-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:border-color var(--tr); }
.script-card:hover { border-color:var(--border-2); }
.script-card.s-error   { border-left:3px solid var(--red); }
.script-card.s-running { border-left:3px solid var(--green); }
.script-card.s-no_data { border-left:3px solid var(--amber); }
.script-card:focus-visible { outline-offset:2px; }
.sc-hdr > div { min-width:0; }
.sc-hdr { padding:10px 14px; display:flex; align-items:flex-start; justify-content:space-between; border-bottom:1px solid var(--border); gap:8px; }
.sc-name { font-weight:600; font-size:.8rem; color:var(--text); overflow-wrap:anywhere; }
.sc-src  { font-size:.72rem; color:var(--text-2); margin-top:2px; overflow-wrap:anywhere; }
.sc-body { padding:10px 14px; font-size:11px; }
.sc-row  { display:flex; justify-content:space-between; gap:12px; margin-bottom:4px; }
.sc-row:last-child { margin-bottom:0; }
.sc-lbl { color:var(--text-3); }
.sc-val { color:var(--text); font-weight:500; font-family:var(--font-mono); text-align:right; }

/* ── Login ─────────────────────────────────────────────────────────────────── */
.login-wrap {
  width:100%; max-width:380px; margin:60px auto;
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:32px 28px; box-shadow:var(--shadow);
}
.login-logo { text-align:center; margin-bottom:20px; }
.login-logo img { height:36px; }
.login-title { text-align:center; font-size:1rem; font-weight:500; color:var(--text-2); margin-bottom:20px; }
.login-wrap .form-input { padding:9px 12px; font-size:14px; }
@media(max-width:480px) { .login-wrap { margin:24px auto; padding:24px 18px; } }
.cf-turnstile { display:flex; justify-content:center; margin:10px 0; }

/* ── TOTP ──────────────────────────────────────────────────────────────────── */
.totp-qr { text-align:center; padding:12px; background:#fff; border-radius:var(--radius); display:inline-block; margin:12px 0; }
.totp-secret { font-family:var(--font-mono); background:var(--bg-3); border:1px solid var(--border); border-radius:var(--radius); padding:8px 12px; font-size:.8rem; color:var(--accent-text); letter-spacing:.1em; word-break:break-all; }
.backup-codes { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:12px 0; }
.backup-code  { font-family:var(--font-mono); background:var(--bg-3); border:1px solid var(--border); border-radius:var(--radius); padding:6px 10px; font-size:.78rem; color:var(--green-text); text-align:center; }

/* ── Log ───────────────────────────────────────────────────────────────────── */
/* full message, line breaks kept, long tokens wrap instead of widening the table */
.sm-table td.log-msg { font-size:11px; color:var(--text-2); min-width:240px; white-space:pre-line; overflow-wrap:anywhere; line-height:1.45; }

/* ── Confirm modal ─────────────────────────────────────────────────────────── */
.sm-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.6);
  align-items:center; justify-content:center; z-index:2000;
}
.sm-overlay.open { display:flex; }
.sm-modal { background:var(--card-bg); border:1px solid var(--field-bd); border-radius:var(--radius-lg); padding:24px; max-width:360px; width:90%; }
.sm-modal-title { font-size:.95rem; font-weight:700; color:var(--text); margin-bottom:8px; }
.sm-modal-msg   { font-size:.82rem; color:var(--text-2); margin-bottom:20px; }
.sm-modal-foot  { display:flex; gap:8px; justify-content:flex-end; }

/* ── Misc ──────────────────────────────────────────────────────────────────── */
.text-muted { color:var(--text-2); }
.text-small { font-size:.78rem; color:var(--text-2); margin-top:8px; line-height:1.7; }
.flex-row   { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mt-1 { margin-top:8px; } .mt-2 { margin-top:16px; } .mb-1 { margin-bottom:8px; }

/* ── P3: Multi-select filter rows ────────────────────────────────────────── */
.sm-filter-wrap { margin-bottom:10px; display:flex; flex-direction:column; gap:6px; }
.sm-filter-row  { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.sm-filter-lbl  { font-size:10.5px; font-weight:700; color:var(--text-2); text-transform:uppercase;
                  letter-spacing:.06em; width:42px; flex-shrink:0; }
/* badge active state for multi-select */
.sm-badge[data-filter-type].active { box-shadow:0 0 0 2px var(--accent); }
.sm-badge[data-filter-type]        { cursor:pointer; transition:box-shadow var(--tr), transform .1s; }
#sm-filter-clear { cursor:pointer; }
#sm-filter-clear.active { box-shadow:0 0 0 2px var(--accent); }
.badge-high { background:var(--red-lt);   color:var(--red-text); }
.badge-low  { background:var(--amber-lt); color:var(--amber-text); }
.badge-off  { background:var(--card-bg); color:var(--text-2); border:1px solid var(--field-bd); }

/* ── P5: Detail page ─────────────────────────────────────────────────────── */
.sm-stat-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.sm-stat     { flex:1; min-width:130px; background:var(--card-bg); border:1px solid var(--border);
               border-radius:var(--radius-lg); padding:12px 16px; text-align:center; }
.sm-stat-val { font-size:1.5rem; font-weight:700; font-family:var(--font-mono); color:var(--text); line-height:1.25; }
.sm-stat-lbl { font-size:10.5px; color:var(--text-2); margin-top:2px; text-transform:uppercase; letter-spacing:.06em; }
.text-red    { color:var(--red-text) !important; }

/* ── Script name link hover (dashboard table + cards) ────────────────────── */
.sc-link, .sc-name-link { color:inherit; text-decoration:none; transition:color var(--tr); }
.sc-link:hover, .sc-name-link:hover { color:var(--accent-text); }
tr:hover .sc-link, tr:hover .sc-name-link { color:var(--accent-text); }

/* ── Admin scripts table — inputs in own TDs ─────────────────────────────── */
.admin-select, .admin-inp-tm, .admin-inp-rs { height:30px; padding:3px 6px; font-size:12px; }
.admin-select   { width:72px; }
.admin-inp-tm   { width:64px; text-align:center; }   /* 5 digits (max 99999) fit with room */
.admin-inp-rs   { width:72px; text-align:center; }   /* placeholder "global" no longer clipped */
.admin-save-td  { white-space:nowrap; }
.sc-label       { height:30px; }
/* number spinners overlapped the value in narrow cells; arrow keys / typing still work */
input[type=number] { -moz-appearance:textfield; appearance:textfield; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.sm-table td:has(> .form-input) { padding-top:5px; padding-bottom:5px; }

/* ── Detail page period pills ────────────────────────────────────────────── */
.badge-period        { background:rgba(255,255,255,.08); color:var(--text-2); }
.badge-period.active { background:var(--accent-solid); color:#fff; border-color:transparent !important; box-shadow:0 1px 4px rgba(13,148,136,.4) !important; }
.badge-period:visited { color:var(--text-2); }
.badge-period.active:visited { color:#fff; }
body.light .badge-period        { background:var(--bg-3); color:var(--text-2); }
body.light .badge-period.active { background:var(--accent-solid); color:#fff; }
#sm-period-pills a { min-width:36px; text-align:center; }

/* chart: keep labels legible on phones by scrolling instead of shrinking */
#sm-chart-body { overflow-x:auto; }
#sm-chart-body svg { min-width:600px; }
.ch-lbl { fill:var(--text-3); }
.ch-empty { fill:var(--text-2); }

/* ── Boxed shell (parking-script style) ─────────────────────────────────── */
.sm-shell {
  display:flex; flex-direction:column; min-height:100vh;
  max-width:1280px; margin:0 auto;
  background:var(--bg);
  border-left:1px solid var(--border-2);
  border-right:1px solid var(--border-2);
  box-shadow:0 0 60px rgba(0,0,0,.5);
}

/* ── Settings grid ───────────────────────────────────────────────────────── */
.sett-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; }
.sett-wide { grid-column:span 2; }
.form-hint { font-size:11px; color:var(--text-3); font-weight:400; margin-left:4px; }
@media(max-width:900px) { .sett-grid { grid-template-columns:repeat(2,1fr); } .sett-wide { grid-column:span 2; } }
@media(max-width:580px) { .sett-grid { grid-template-columns:1fr; } .sett-wide { grid-column:span 1; } }
.sett-grid > * { min-width:0; }

/* ── Branding preview (parking-script style) ────────────────────────────── */
.branding-preview { display:flex; align-items:center; gap:10px; padding:10px; background:var(--bg-3); border-radius:var(--radius); margin-bottom:8px; border:1px solid var(--border); min-height:56px; }
.branding-preview img { object-fit:contain; }
input[type=file] { display:block; width:100%; font-size:12px; color:var(--text-2); margin-top:4px; }
input[type=file]::file-selector-button { background:var(--bg-2); color:var(--text); border:1px solid var(--border-2); border-radius:var(--radius); padding:4px 10px; font-size:11px; cursor:pointer; margin-right:8px; }
input[type=file]::file-selector-button:hover { background:var(--bg-3); }

/* ── Toast (admin): background is set by JS to --green/--red, so use dark text ── */
#sm-toast { color:#0b1220 !important; }

/* ── Mobile / touch ────────────────────────────────────────────────────────── */
@media(max-width:767px) {
  .sm-toolbar { flex-wrap:wrap; border-bottom:none; }
  .sm-toolbar .sm-tabs { flex:1 1 100%; border-bottom:1px solid var(--border); }
  .sm-search-wrap { flex:1 1 100%; padding:0 0 12px; margin-top:-4px; order:2; }
  .sm-table td strong { overflow-wrap:normal; }
  .sm-search { width:100%; }
  .sm-footer { padding:10px 14px; }
  .btn, .btn-sm, .form-input, .sm-search, .view-btn, .sm-tab, .sm-badge, #sm-period-pills a { min-height:36px; }
  .btn-sm { min-height:36px; }
  .btn, .btn-sm, .sm-badge, #sm-period-pills a { display:inline-flex; align-items:center; justify-content:center; }
  .form-input, .sm-search, .login-wrap .form-input { font-size:16px; }          /* stops iOS focus-zoom */
  .admin-select, .admin-inp-tm, .admin-inp-rs { height:36px; font-size:16px; }
  .admin-select { width:84px; } .admin-inp-tm { width:84px; } .admin-inp-rs { width:92px; }
  .sc-label { height:36px; min-width:150px !important; }
  .sm-badges, .sm-filter-row { gap:8px; }
  .sm-filter-lbl { width:100%; }
  .sm-stat-val { font-size:1.25rem; }
  .sm-stat { min-width:calc(50% - 6px); }
  .card-hdr { padding:10px 12px; }
  .two-col { gap:12px; }
  .flex-row .form-input { width:100% !important; }
}

/* ── Motion ────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
  .sm-badge:hover { transform:none; }
}

/* v10.10 — sparkline column (fixed height: must not grow the row) + ECharts container */
.sm-spark-cell { width:72px; line-height:0; }
.sm-spark { display:block; margin:0 auto; overflow:visible; }
#sm-echart { min-height:320px; }
@media (max-width:640px) { #sm-echart { height:260px !important; min-height:260px; } }

/* v10.11 — sleep windows modal */
#sm-sleep-overlay .sm-modal { max-width:580px; }
.sm-sleep-modal .sm-table { font-size:12px; }
.sm-sleep-modal .sm-table td { padding:5px 8px; }
.sm-sleep-modal .sm-table-wrap { margin-bottom:2px; }

/* v10.11 — accordion card-hdr hover */
.sm-accordion-hdr { transition:background var(--tr); }
.sm-accordion-hdr:hover { background:rgba(255,255,255,.06); }
body.light .sm-accordion-hdr:hover { background:var(--bg-3); }

/* v10.11 — sleep add form: responsive (Label spans full width, Add spans full width) */
@media(max-width:600px) {
  #sm-sleep-add-row,
  .sm-sleep-form-row {
    grid-template-columns:1fr 1fr !important;
  }
  #sm-sleep-add-row > div:first-child,
  .sm-sleep-form-row > div:first-child { grid-column:span 2; }
  #sm-sleep-add-row > div:nth-child(2),
  .sm-sleep-form-row > div:nth-child(2) { grid-column:span 2; }
  #sm-sleep-add-row > button,
  .sm-sleep-form-row > button { grid-column:span 2; }
}

/* v10.11 — hide sparkline on very narrow screens (14-col table is already tight) */
@media(max-width:480px) { .sm-spark-cell { display:none; } }