@import url('fonts/fonts.css');
/* Radiant OS: shared look, matching the public site. Near-black, acid lime, Archivo (bold italic headlines) with Space Mono labels,
   cards with lime corner marks, pill buttons.
   Dark only; a page can opt into light with <html data-theme="light"> (used by the embeddable demo form). */
:root{
  --bg:#060706; --panel:#0e0f0d; --panel2:#161814; --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
  --text:#f3f5ef; --muted:#959a8d; --accent:#c6ff34; --accent-rgb:198,255,52; --accent-ink:#0a0d02; --accent-soft:rgba(198,255,52,.10); --accent-hi:#e2ff97;
  --gold:#dcff8c; --cool:#8ab4f8; --good:#5fd38d; --bad:#ef6b73; --warn:#ffb547; --warn-bg:rgba(255,181,71,.08); --bad-soft:rgba(239,107,115,.10);
  --glass:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  --shadow:0 24px 70px rgba(0,0,0,.65);
  --ascii:198,255,52;
  --mark:rgba(198,255,52,.7);
  --f-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --f-brand:'Manrope',system-ui,sans-serif;
  --r:8px; color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f5f6f1; --panel:#ffffff; --panel2:#eef0e8; --line:rgba(0,0,0,.10); --line-strong:rgba(0,0,0,.18);
  --text:#121410; --muted:#62675c; --accent:#4f6f00; --accent-rgb:79,111,0; --accent-ink:#ffffff; --accent-soft:rgba(79,111,0,.10); --accent-hi:#3e5800;
  --gold:#4f6f00; --cool:#2c62c9; --good:#1f7f55; --bad:#bf3f4c; --warn:#a15c00; --warn-bg:rgba(161,92,0,.08); --bad-soft:rgba(191,63,76,.08);
  --glass:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.0)); --shadow:0 18px 50px rgba(20,20,10,.14); --ascii:79,111,0; --mark:rgba(79,111,0,.55); color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{font-stretch:100%;background:radial-gradient(1100px 520px at 50% -12%,rgba(var(--accent-rgb),.07),transparent 62%),var(--bg);background-attachment:fixed;color:var(--text);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
:root[data-theme="light"] body{background:var(--bg)}
body.os-wait main{visibility:hidden}
.wrap{padding-inline:clamp(16px,4vw,44px);padding-block:26px 90px;max-width:1500px;margin:0 auto}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:var(--accent)}
::selection{background:rgba(var(--accent-rgb),.35)}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* mono label above titles (see the brand layer at the end) */
.eyebrow{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}

/* animated ASCII backdrops (assets/ascii.js) */
.hero{position:relative;isolation:isolate}
canvas.ascii-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}

/* top navigation */
.osnav{position:sticky;top:0;z-index:80;background:rgba(6,7,6,.74);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.osnav-in{max-width:1500px;margin:0 auto;padding:12px clamp(16px,4vw,44px);display:flex;align-items:center;gap:22px}
.osnav-brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;white-space:nowrap}
.osnav-brand b{font-family:var(--f-brand);font-weight:800;font-style:italic;font-size:1.22rem;letter-spacing:-.03em}
.osnav-brand i{width:1px;height:18px;background:var(--line-strong)}
.osnav-brand span{font-size:.72rem;font-weight:500;letter-spacing:.32em;color:var(--muted)}
.osnav-links{display:flex;gap:2px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none}
.osnav-links::-webkit-scrollbar{display:none}
.osnav-links a,.osnav-links span{white-space:nowrap;text-decoration:none;color:var(--muted);font-size:.86rem;font-weight:500;padding:7px 12px;border-radius:8px;transition:color .15s,background .15s}
.osnav-links a:hover{color:var(--text)}
.osnav-links a.on{color:var(--text);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line)}
.osnav-links span.soon{opacity:.45;cursor:default}
.osnav-links span.soon small{font-family:var(--f-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;margin-left:6px}
.osnav-user{display:flex;align-items:center;gap:10px;white-space:nowrap}
.osnav-user .who{font-size:.8rem;color:var(--muted);max-width:180px;overflow:hidden;text-overflow:ellipsis}
/* release notifications (assets/notifications.js) */
.osnav-bell{position:relative;padding:4px 9px}
.osnav-badge{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:700 .62rem/17px var(--f-mono);text-align:center;box-shadow:0 0 0 2px var(--bg)}
.osnav-panel{position:absolute;top:calc(100% + 10px);right:0;width:min(380px,calc(100vw - 24px));max-height:min(70vh,560px);overflow:auto;background:var(--glass),var(--panel);border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow);padding:14px;z-index:90;white-space:normal}
.osnav-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.osnav-panel-head a{font-size:.8rem}
.osnav-panel-group{margin-top:12px}
.osnav-panel-group .lbl{display:block;margin-bottom:6px}
.osnav-note{display:block;text-decoration:none;color:var(--text);padding:8px 10px 8px 13px;border-radius:9px;border-left:3px solid var(--line-strong);margin-bottom:4px;background:rgba(255,255,255,.02)}
.osnav-note:hover{background:rgba(255,255,255,.05)}
.osnav-note b{display:block;font-size:.84rem;font-weight:600;overflow-wrap:anywhere}
.osnav-note span{display:block;font-size:.76rem;color:var(--muted)}
.osnav-note.k-today{border-left-color:var(--accent)}
.osnav-note.k-week{border-left-color:var(--cool)}
.osnav-note.k-data,.osnav-note.k-late{border-left-color:var(--bad)}
.osnav-note.new b::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:7px;vertical-align:middle}
@media (max-width:760px){
  .osnav-in{flex-wrap:wrap;gap:8px 12px}
  .osnav-links{order:3;flex-basis:100%}
  .osnav-user{margin-left:auto}
  .osnav-user .who{display:none}
}

/* page header */
.ph{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.ph .eyebrow{width:100%;margin-bottom:-6px}
.ph h1{font-family:var(--f-display);font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:300;letter-spacing:-.045em;line-height:1.05;margin:0}
.ph .spacer{flex:1}
.ph .sub{color:var(--muted);font-size:.88rem;width:100%;margin-top:-6px}

/* buttons, chips */
.btn{background:rgba(255,255,255,.03);border:1px solid var(--line-strong);color:var(--text);border-radius:8px;padding:8px 15px;cursor:pointer;font-size:.86rem;font-weight:500;white-space:nowrap;min-height:36px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:border-color .15s,color .15s,background .15s,box-shadow .15s}
.btn:hover{border-color:rgba(var(--accent-rgb),.6);color:var(--text);background:rgba(var(--accent-rgb),.06)}
.btn.primary{background:var(--accent);border-color:transparent;color:var(--accent-ink);font-weight:700;box-shadow:0 6px 24px rgba(var(--accent-rgb),.18)}
.btn.primary:hover{background:var(--accent-hi);color:var(--accent-ink);box-shadow:0 8px 30px rgba(var(--accent-rgb),.3)}
.btn.danger{color:var(--bad);border-color:rgba(239,107,115,.35)}
.btn.danger:hover{background:var(--bad-soft);color:var(--bad);border-color:var(--bad)}
.btn.sm{padding:4px 10px;min-height:28px;font-size:.78rem}
.btn:disabled{opacity:.4;cursor:not-allowed}
.chip{display:inline-block;font-family:var(--f-mono);font-size:.66rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line-strong);border-radius:999px;padding:2px 9px;color:var(--muted);white-space:nowrap}
.chip.accent{color:var(--accent);border-color:rgba(var(--accent-rgb),.45)}
.chip.gold{color:var(--gold);border-color:rgba(var(--accent-rgb),.45)}
.chip.good{color:var(--good);border-color:rgba(95,211,141,.4)}

/* surfaces */
.lbl{font-family:var(--f-mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--glass),var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;min-width:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.kpi .val{font-family:var(--f-display);font-variant-numeric:tabular-nums;font-size:1.9rem;font-weight:300;letter-spacing:-.04em;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi .val.rev{color:var(--gold)} .kpi .val.units{color:var(--cool)}
.kpi .hint{font-size:.76rem;color:var(--muted);margin-top:2px}
.panel{background:var(--glass),var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:16px;min-width:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.panel-title{font-weight:600;font-size:1rem;letter-spacing:-.01em}
.note{font-size:.8rem;color:var(--muted)}
.empty{padding:30px 10px;text-align:center;color:var(--muted);font-size:.9rem}
.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.tab{background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:8px 17px;cursor:pointer;font-size:.86rem;font-weight:500;transition:color .15s,border-color .15s}
.tab:hover{color:var(--text);border-color:var(--line-strong)}
.tab.on{background:var(--accent);border-color:transparent;color:var(--accent-ink);font-weight:700;box-shadow:0 6px 22px rgba(var(--accent-rgb),.18)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}

/* tables */
.tablewrap{overflow-x:auto;margin-inline:-20px}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-family:var(--f-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;font-weight:500}
th.num{text-align:right}
td{padding:10px 14px;border-bottom:1px solid var(--line);font-size:.89rem;vertical-align:middle}
td.num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.84rem}
td.rev{color:var(--gold);font-weight:500}
td.muted{color:var(--muted)}
td.actions{text-align:right;white-space:nowrap}
tr.click{cursor:pointer} tr.click:hover td{background:rgba(255,255,255,.025)}
.bar{height:8px;border-radius:5px;background:rgba(255,255,255,.06);overflow:hidden;flex:1;min-width:60px}
.bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,rgba(var(--accent-rgb),.55),var(--accent))}

/* forms */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.input,.field input,.field select,.field textarea{background:rgba(255,255,255,.035);color:var(--text);border:1px solid var(--line-strong);border-radius:9px;padding:9px 12px;font-size:.92rem;width:100%;transition:border-color .15s,box-shadow .15s}
.field select option,select.input option{background:var(--panel2);color:var(--text)}
.field textarea{min-height:80px;resize:vertical}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15)}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
.search{max-width:320px}

/* dialogs */
.os-overlay{position:fixed;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:48px 14px;overflow-y:auto}
.os-modal{background:var(--glass),var(--panel);border:1px solid var(--line-strong);border-radius:18px;padding:24px 26px;width:100%;max-width:560px;box-shadow:var(--shadow);min-width:0;display:flex;flex-direction:column;gap:14px}
.os-modal h2{font-family:var(--f-display);font-size:1.3rem;font-weight:400;letter-spacing:-.03em;margin:0}
.os-modal p{margin:0;font-size:.9rem}
.os-modal .actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:4px}

/* toasts */
.toasts{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:120;width:min(520px,calc(100% - 32px))}
.toast{background:var(--panel2);border:1px solid var(--line-strong);border-left:3px solid var(--accent);border-radius:10px;padding:11px 14px;font-size:.86rem;box-shadow:var(--shadow)}
.toast.bad{border-left-color:var(--bad)} .toast.good{border-left-color:var(--good)} .toast.warn{border-left-color:var(--warn)}

/* full-page message (setup needed, no access) */
.os-block{max-width:520px;margin:12vh auto;padding:0 16px;text-align:center}
.os-block h1{font-family:var(--f-display);font-size:1.8rem;font-weight:300;letter-spacing:-.04em;margin:0 0 8px}
.os-block p{color:var(--muted)}

/* ---------- Radiant brand layer (same treatment as the public site) ---------- */
/* headlines: bold italic, slightly wide, uppercase; a highlighted word goes heavier and lime */
.ph h1,.os-block h1{font-weight:800;font-style:italic;font-stretch:112%;text-transform:uppercase;letter-spacing:-.02em;line-height:1}
.ph h1{font-size:clamp(1.6rem,3vw,2.4rem)}
.ph h1 em,.os-block h1 em{font-style:italic;font-weight:900;font-stretch:125%;color:var(--accent)}
.os-modal h2{font-weight:800;font-style:italic;letter-spacing:-.02em}
.panel-title{font-weight:700;letter-spacing:-.01em}
.kpi .val{font-weight:800;font-style:italic;font-stretch:115%;letter-spacing:-.03em}
.ph .note,.ph .sub{font-weight:400}
/* section labels: a short lime rule, then the name */
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--muted);letter-spacing:.18em}
.eyebrow .ix:empty{display:inline-block;width:26px;height:1px;background:var(--accent);flex-shrink:0}  /* the public site puts a number in .ix instead */
/* cards: sharper corners with lime corner marks */
.panel,.kpi,.os-modal{background:
  linear-gradient(var(--mark),var(--mark)) 0 0/12px 1px no-repeat,linear-gradient(var(--mark),var(--mark)) 0 0/1px 12px no-repeat,
  linear-gradient(var(--mark),var(--mark)) 100% 100%/12px 1px no-repeat,linear-gradient(var(--mark),var(--mark)) 100% 100%/1px 12px no-repeat,
  var(--glass),var(--panel)}
.os-modal{border-radius:10px}
/* buttons and chips: pills */
.btn,.btn.sm{border-radius:999px}
.btn:hover{border-color:rgba(var(--accent-rgb),.6);background:rgba(var(--accent-rgb),.06)}
.chip{font-family:var(--f-mono);letter-spacing:.08em}
:focus-visible{outline-color:var(--accent)}
.panel > h1{font-size:1.6rem;font-weight:800;font-style:italic;font-stretch:112%;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;margin:0 0 12px}