/* Admin dashboard (admin/index.html, js/admin.js). Same tokens and fonts as the website (site.css);
   desktop-first, sidebar + content; phones get a bottom tab bar and side-scrolling tables. */
.mis-page { --muted: #9AA4B0; background: var(--void); overflow-x: clip; }
.mis-page a { text-decoration: none; }
.mis { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.mono { font-family: var(--mono); } .dim { color: var(--muted); }
.g { color: var(--green); } .o { color: var(--orange); } .r { color: var(--red); }
.mis-tag { flex: none; display: inline-block; line-height: 1.4; margin-left: 8px; padding: 2px 7px; border-radius: 6px; font: 600 10px var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: #07090C; background: var(--orange); align-self: center; }
.av { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; font: 600 12.5px var(--sans); font-style: normal; color: #07090C; background: var(--orange); }
code { font: 12.5px var(--mono); padding: 1px 5px; border-radius: 5px; background: rgba(255,255,255,.05); }

/* sidebar */
.mis-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 28px; padding: 22px 14px; border-right: 1px solid var(--line); background: rgba(11,14,18,.92); }
.mis-side .brand { display: flex; align-items: center; gap: 8px; padding: 0 6px; font-size: 19px; min-width: 0; }
.mis-side .brand canvas { width: 30px; height: 30px; }
.mis-side .mis-tag { margin-left: 2px; padding: 2px 6px; font-size: 9.5px; letter-spacing: .1em; }
.mis-nav { display: grid; gap: 2px; }
.mis-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; font-size: 15px; color: var(--soft); transition: background .2s, color .2s; }
.mis-nav svg, .mis-out svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.mis-nav a:hover { color: var(--text); background: rgba(255,255,255,.03); }
.mis-nav a.on { color: var(--lime); background: rgba(198,255,61,.08); }
.mis-me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 6px 0; border-top: 1px solid var(--line); }
.mis-me div { flex: 1; min-width: 0; } .mis-me b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mis-me small { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mis-out { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line2); border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.mis-out:hover { color: var(--red); border-color: rgba(255,77,94,.4); }

/* content */
.mis-main { padding: 30px 40px 90px; max-width: 1440px; width: 100%; margin: 0 auto; min-width: 0; transition: opacity .15s; }
.mis-main.loading { opacity: .55; }
.mis-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.mis-head h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.025em; }
.mis-head h1 code { font: 600 .8em var(--mono); background: none; padding: 0; }
.mis-kick { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .mis-kick a { color: var(--lime); }
.mis-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.mis-acts .btn { padding: 9px 14px; font-size: 14px; }
.sub { margin: -10px 0 18px; color: var(--soft); font-size: 14px; overflow-wrap: anywhere; }
.sec, .pane-h.sec h2 { margin: 28px 0 12px; font-size: 17px; }
.pane-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .pane-h a { font-size: 13.5px; color: var(--lime); }
.pane-h.sec { margin: 28px 0 12px; } .pane-h.sec h2 { margin: 0; }
.note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.mis-empty { padding: 28px; text-align: center; color: var(--muted); border: 1px dashed var(--line2); border-radius: 14px; }
.mis-err { padding: 12px 14px; border: 1px solid rgba(255,77,94,.4); border-radius: 10px; color: var(--red); background: rgba(255,77,94,.06); }

.pane { padding: 18px 20px; border: 1px solid var(--line2); border-radius: 14px; background: linear-gradient(180deg, rgba(16,21,27,.85), rgba(10,13,17,.85)); min-width: 0; }
.pane h3 { margin: 0 0 12px; font-size: 15px; } .pane h3.mt { margin-top: 20px; }
.pane.slim { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 12px 16px; margin-bottom: 12px; }
.pane.slim .mix { flex: 1; min-width: 160px; margin: 0; } .pane.slim .legend { width: 100%; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.mis-main > .pane { margin-top: 14px; }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tile { display: grid; gap: 4px; align-content: start; padding: 15px 17px; border: 1px solid var(--line2); border-radius: 14px; color: inherit; background: linear-gradient(180deg, rgba(20,26,33,.9), rgba(11,14,18,.9)); transition: border-color .2s; }
a.tile:hover { border-color: rgba(198,255,61,.35); }
.tile small { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tile > b { display: block; margin: 4px 0 2px; font: 600 28px/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tile > b em { margin-left: 6px; font: 500 14px var(--sans); font-style: normal; letter-spacing: 0; color: var(--muted); }
.tile > span { font-size: 12.5px; color: var(--soft); }
.tile .mix { margin-top: 6px; } .tile .legend { font-size: 11px; }
/* where the risk is */
.rk { display: grid; gap: 4px; }
.rk-r { display: block; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; color: inherit; transition: background .15s; }
.rk-r:hover { background: rgba(255,255,255,.03); }
.rk-h { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; font-size: 13.5px; }
.rk-h span { font-size: 12px; color: var(--muted); } .rk-h em { font: 600 12px var(--mono); font-style: normal; min-width: 76px; text-align: right; }
.rk .mix { margin: 6px 0 4px; height: 6px; } .rk small { font-size: 11.5px; color: var(--muted); }
.drv { list-style: none; margin: 0; padding: 0; }
.drv li { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--soft); }
.drv li:last-child { border: 0; } .drv b { flex: none; width: 26px; font: 600 13px var(--mono); color: var(--red); }
.drv small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.rk small b.soft { color: var(--soft); font-weight: 500; }
.more { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--lime); }

/* sign-up funnel, person by person */
.fn { list-style: none; margin: 0; padding: 0; counter-reset: fn; }
.fn li { position: relative; padding: 9px 0 10px 26px; border-bottom: 1px solid var(--line); counter-increment: fn; }
.fn li:last-child { border: 0; }
.fn li::before { content: counter(fn); position: absolute; left: 0; top: 10px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font: 600 10px var(--mono); color: #07090C; background: var(--lime); }
.fn li.none::before { background: var(--line2); color: var(--muted); }
.fn-h { display: grid; grid-template-columns: 1fr auto 46px; align-items: baseline; gap: 10px; font-size: 13.5px; }
.fn-h b { font: 600 15px var(--mono); } .fn-h em { font: 600 12px var(--mono); font-style: normal; text-align: right; }
.fn-bar { height: 4px; margin: 6px 0 5px; border-radius: 2px; background: var(--line2); } .fn-bar i { display: block; height: 100%; border-radius: 2px; background: #76A30F; }
.fn small { display: block; font-size: 11.5px; color: var(--muted); }
.fn-stuck { margin-top: 4px; font-size: 12px; color: var(--orange); } .fn-stuck a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line2); }

/* overview KPI tiles */
.tile.kpi { position: relative; gap: 6px; padding: 16px 18px 14px; overflow: hidden; }
.tile.kpi.warn { border-color: rgba(255,77,94,.35); }
.kpi-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 20px; }
.kpi-h small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile.kpi > b { margin: 2px 0 0; font-size: 34px; }
.kpi-viz { margin-top: 8px; }
.kmeter { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--line2); }
.kmeter i, .kkey i { background: var(--c); }
.kkey { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.kkey span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .kkey b { color: var(--text); font-weight: 600; }
.kkey i { width: 8px; height: 8px; border-radius: 2px; } .kkey .zero { opacity: .55; }
.kempty { margin: 0; padding-top: 4px; font-size: 12.5px; color: var(--muted); }
/* breakdown colours: risk levels use the status colours; the rest a neutral → lime ramp and the API blue */
.kg { --c: var(--green); } .ko { --c: var(--orange); } .kr { --c: var(--red); } .kx { --c: #ff2d55; }
.k0 { --c: #3a4654; } .k1 { --c: #6b7a3a; } .k2 { --c: #9BC32A; } .k3 { --c: var(--lime); }
.kw { --c: #9BC32A; } .ka { --c: #5F7CEB; } .kd { --c: #6b7684; }
.chg { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font: 600 11.5px var(--mono); white-space: nowrap; }
.chg em { font: 400 10.5px var(--mono); font-style: normal; opacity: .8; }
.chg.good { color: var(--green); background: rgba(46,219,110,.1); } .chg.bad { color: var(--red); background: rgba(255,77,94,.1); } .chg.flat { color: var(--muted); background: rgba(255,255,255,.04); }
.dl { font: 600 12px var(--mono); } .dl.up { color: var(--green); } .dl.down { color: var(--red); }

/* attention */
.mis-main section { padding: 0; }
.att-list { display: flex; flex-direction: column; gap: 6px; } .att-list .sec { margin-bottom: 4px; }
.att { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 14px; border: 1px solid var(--line2); border-radius: 10px; color: var(--text); font-size: 14px; background: rgba(255,255,255,.015); }
.att i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; font: 700 13px var(--mono); font-style: normal; }
.att span { flex: 1; } .att em { font-style: normal; color: var(--muted); }
.att.red { border-color: rgba(255,77,94,.35); } .att.red i { color: #07090C; background: var(--red); }
.att.orange i { color: #07090C; background: var(--orange); }
.att.lime i { color: #07090C; background: var(--lime); }
.att.grey i { color: var(--soft); background: var(--line2); }
.att.ok i { color: #07090C; background: var(--green); }
a.att:hover { border-color: #3a4654; } a.att:hover em { color: var(--lime); }

/* segmented period / filter chips */
.seg, .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips { margin-bottom: 12px; }
.seg a, .chips a { padding: 7px 12px; border: 1px solid var(--line2); border-radius: 999px; font-size: 13.5px; color: var(--soft); }
.seg a:hover, .chips a:hover { color: var(--text); border-color: #3a4654; }
.seg a[aria-pressed="true"], .chips a[aria-pressed="true"] { color: #07090C; background: var(--lime); border-color: var(--lime); font-weight: 600; }
.chips a i { margin-left: 4px; font: 500 12px var(--mono); font-style: normal; opacity: .75; }
.chips .on-chip { border-color: rgba(198,255,61,.5); color: var(--lime); }
.filt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 10px; background: rgba(7,9,12,.7); }
.search span { color: var(--muted); } .search input { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: none; color: var(--text); font: 14px var(--sans); outline: none; }
.search:focus-within { border-color: rgba(198,255,61,.5); }
.filt select, .filt input[type=date] { padding: 9px 10px; border: 1px solid var(--line2); border-radius: 10px; background: #0B0F13; color: var(--text); font: 13.5px var(--sans); color-scheme: dark; }
.filt .ck, .filt .dt { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--soft); }
.filt .ck input { accent-color: var(--lime); }

/* tables */
.mis-scroll { overflow-x: auto; border: 1px solid var(--line2); border-radius: 14px; background: rgba(10,13,17,.6); }
.mis-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.mis-t th { padding: 10px 12px; text-align: left; font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line2); white-space: nowrap; }
.mis-t td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mis-t tr:last-child td { border-bottom: 0; }
.mis-t td small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.mis-t .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mis-t.rows tbody tr { cursor: pointer; transition: background .15s; } .mis-t.rows tbody tr:hover { background: rgba(255,255,255,.025); }
.mis-t a { color: var(--text); } .mis-t a:hover { color: var(--lime); }
.mis-t .who { min-width: 180px; } .mis-t .who a { font-weight: 600; }
.mis-t .why { min-width: 240px; max-width: 420px; color: var(--soft); font-size: 13px; }
.mis-t time { white-space: nowrap; }
.mis-t.sm { font-size: 13px; } .mis-t.sm td, .mis-t.sm th { padding: 7px 8px; }
.pane .mis-t.sm td { border-color: var(--line); }
.mis-pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; font-size: 13.5px; }
.mis-pager .btn { padding: 8px 12px; font-size: 13.5px; }
details.tbl { margin-top: 8px; font-size: 12.5px; } details.tbl summary { color: var(--muted); cursor: pointer; }
details.tbl .mis-scroll { max-height: 240px; margin-top: 8px; }
details.err summary { margin-top: 4px; font-size: 12px; color: var(--orange); cursor: pointer; }
details.err code { display: block; margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11.5px; }

/* labels */
.rl { display: inline-flex; align-items: center; gap: 0; border-radius: 6px; overflow: hidden; font: 600 11.5px var(--mono); letter-spacing: .05em; white-space: nowrap; border: 1px solid var(--c); color: var(--c); }
.rl { padding: 2px 0 2px 7px; } .rl i { margin-left: 7px; padding: 0 7px; font-style: normal; color: #07090C; background: var(--c); }
.rl:not(:has(i)) { padding-right: 7px; }
.rl.g { --c: var(--green); } .rl.o { --c: var(--orange); } .rl.r { --c: var(--red); }
.rl.x { --c: #ff2d55; background: rgba(255,45,85,.12); box-shadow: 0 0 10px rgba(255,45,85,.25); }
.pl { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 600 11px var(--sans); border: 1px solid var(--line2); color: var(--soft); vertical-align: middle; }
.pl.starter { color: #07090C; background: #5F7CEB; border-color: #5F7CEB; } .pl.pro { color: #07090C; background: var(--lime); border-color: var(--lime); }
.mis-head h1 .pl { font-size: 12px; }
.tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; font: 500 11px var(--sans); border: 1px solid var(--line2); color: var(--soft); vertical-align: middle; }
.tag.o { color: var(--orange); border-color: rgba(255,138,31,.4); } .tag.r { color: var(--red); border-color: rgba(255,77,94,.4); }
.dc { font-size: 13px; font-weight: 600; white-space: nowrap; } .dc.g { color: var(--green); } .dc.o { color: var(--orange); } .dc.r { color: var(--red); }
.dc.g::before { content: '✓ '; } .dc.r::before { content: '✕ '; } .dc.o::before { content: '! '; }
.alw { font: 13px var(--mono); white-space: nowrap; color: var(--soft); } .alw b { color: var(--text); } .alw em { font-style: normal; color: var(--lime); }
.alw.out b { color: var(--red); }
.ss { font-size: 13px; font-weight: 600; white-space: nowrap; } .ss.g { color: var(--green); } .ss.o { color: var(--orange); } .ss.r { color: var(--red); } .ss.dim { font-weight: 400; }
.strip { display: inline-flex; gap: 2px; } .strip i { width: 6px; height: 16px; border-radius: 2px; background: var(--line2); } .strip i.on { background: var(--green); }

/* API usage */
.mis-t.usage td { vertical-align: middle; } .mis-t.usage td small { font-size: 11.5px; }
.mis-t .sub-row td { padding-top: 0; border-top: 0; } .mis-t tr:has(+ .sub-row) td { border-bottom: 0; }
.sub-row summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.eps { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 4px; font-size: 12.5px; }
.eps span { display: inline-flex; align-items: center; gap: 6px; } .eps b { font: 600 12px var(--mono); } .eps em { font-style: normal; font-size: 12px; }
.lim { display: flex; align-items: center; gap: 8px; } .lim b { font: 600 12.5px var(--mono); }
.lim-b { width: 90px; height: 8px; border-radius: 4px; background: var(--line2); overflow: hidden; } .lim-b i { display: block; height: 100%; background: var(--green); }
.lim.o .lim-b i { background: var(--orange); } .lim.o b { color: var(--orange); } .lim.r .lim-b i { background: var(--red); } .lim.r b { color: var(--red); }
@media (max-width: 860px) { .mis-nav a span { font-size: 10px; } }

/* buttons as links, inline forms */
.link, .link-r { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--lime); cursor: pointer; }
.link-r { color: var(--red); } .link:hover, .link-r:hover { text-decoration: underline; }
.mini li .link-r { flex: none; margin-left: 10px; }
.inline-f { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.inline-f input { flex: 1 1 160px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line2); border-radius: 8px; background: rgba(7,9,12,.8); color: var(--text); font: 13.5px var(--sans); }
.inline-f .btn { padding: 8px 14px; font-size: 13.5px; }
.newkey { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding: 12px; border: 1px solid rgba(198,255,61,.4); border-radius: 10px; background: rgba(198,255,61,.05); }
.newkey b { width: 100%; font-size: 13px; } .newkey code { flex: 1; overflow-wrap: anywhere; font-size: 13px; padding: 6px 8px; }
.pane-h.mt { margin-top: 20px; } .pane-h.mt h3 { margin: 0 0 8px; }
details.danger { margin-top: 14px; border-color: rgba(255,77,94,.3); } details.danger summary { cursor: pointer; color: var(--red); font-weight: 600; font-size: 14px; }
/* lists */
.listf { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 12px; }
.listf label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); } .listf .wide { grid-column: 1 / -1; } .listf [hidden] { display: none; }
.listf input, .listf select { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--line2); border-radius: 8px; background: rgba(7,9,12,.8); color: var(--text); font: 14px var(--sans); color-scheme: dark; }
.listf input[name=input] { font-family: var(--mono); }
.mis-t tr.off td { opacity: .55; }
/* sync now */
.sync-b { padding: 6px 12px; font-size: 12.5px; } .sync-b:disabled { opacity: .5; cursor: wait; }
td .sync-b + small { display: block; max-width: 200px; margin-top: 4px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.spin { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* client actions */
.manage { margin-top: 14px; border-color: rgba(198,255,61,.25); }
.acts3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.acts3 form { display: grid; align-content: start; gap: 8px; padding: 12px; border: 1px solid var(--line2); border-radius: 12px; background: #0B0F13; }
.acts3 form > b { font-size: 14px; } .acts3 .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acts3 p { margin: 0; } .small { font-size: 12.5px; }
.acts3 input, .acts3 select, .note-f textarea { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--line2); border-radius: 8px; background: rgba(7,9,12,.8); color: var(--text); font: 13.5px var(--sans); color-scheme: dark; }
.acts3 .row select { flex: 1 1 100%; width: auto; } .acts3 .ren { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); } .acts3 .ren[hidden] { display: none; } .acts3 .ren input { width: auto; }
.acts3 .btn, .note-f .btn { padding: 8px 14px; font-size: 13.5px; } .acts3 .btn:disabled { opacity: .6; cursor: wait; }
.btn-danger { color: #fff; background: #c8283a; } .btn-danger:hover { background: var(--red); }
.btn-ok { color: #07090C; background: var(--green); }
.act-msg { margin: 10px 0 0; font-size: 13px; } .act-msg:empty { display: none; }
.note-f { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; } .note-f textarea { flex: 1; resize: vertical; }
@media (max-width: 1000px) { .acts3 { grid-template-columns: 1fr; } }

/* free-limit forecasts */
.fcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.fc { padding: 12px 14px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(255,255,255,.015); }
.fc.o { border-color: rgba(255,138,31,.45); } .fc.r { border-color: rgba(255,77,94,.5); }
.fc-h { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; } .fc-h span { color: var(--muted); font-size: 12px; }
.fc-bar { position: relative; height: 8px; margin: 9px 0 7px; border-radius: 4px; background: var(--line2); }
.fc-bar i { display: block; height: 100%; border-radius: 4px; background: var(--green); } .fc.o .fc-bar i { background: var(--orange); } .fc.r .fc-bar i { background: var(--red); }
.fc-bar em { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; background: var(--text); }
.fc p { margin: 0; font-size: 12.5px; color: var(--soft); }
.tag.g { color: var(--green); border-color: rgba(46,219,110,.4); }
.strip.err i.on { background: var(--green); } .strip.err i.some { background: var(--orange); } .strip.err i.all { background: var(--red); }
.pset { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 12px; margin: 10px 0 6px; padding: 12px; border: 1px solid var(--line2); border-radius: 12px; background: #0B0F13; }
.pset label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); } .pset .wide { grid-column: 1 / -1; }
.pset input, .pset select, .pset textarea { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--line2); border-radius: 8px; background: rgba(7,9,12,.8); color: var(--text); font: 13.5px var(--sans); color-scheme: dark; }
.pset textarea { font: 12.5px var(--mono); resize: vertical; }
.pset-a { display: flex; align-items: center; gap: 12px; } .pset .btn { padding: 8px 16px; font-size: 13.5px; }
ul.mini.pane { padding: 6px 18px; } .mini li > b { font: 600 13px var(--mono); }

/* charts */
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .ax { fill: var(--muted); font: 10px var(--mono); }
.chart .hit { fill: transparent; } .chart .hit.on { fill: rgba(255,255,255,.04); }
.tip { position: absolute; top: 0; transform: translateX(-50%); min-width: 130px; padding: 8px 10px; border: 1px solid var(--line2); border-radius: 9px; background: #0B0F13; box-shadow: 0 8px 24px rgba(0,0,0,.4); font-size: 12.5px; pointer-events: none; z-index: 2; }
.tip b { display: block; margin-bottom: 4px; font: 600 12px var(--mono); }
.tip span { display: flex; align-items: center; gap: 6px; } .tip em { margin-left: auto; padding-left: 12px; font: 600 12.5px var(--mono); font-style: normal; }
.tip i, .lg i { width: 8px; height: 8px; border-radius: 2px; }
.lg { display: flex; gap: 16px; margin: -4px 0 8px; font-size: 12.5px; color: var(--soft); } .lg span { display: inline-flex; align-items: center; gap: 6px; }
.mix { display: flex; gap: 2px; height: 10px; margin: 2px 0 8px; border-radius: 5px; overflow: hidden; background: var(--line2); }
.mix i.g { background: var(--green); } .mix i.o { background: var(--orange); } .mix i.r { background: var(--red); } .mix i.x { background: #ff2d55; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 12px var(--mono); color: var(--soft); }
.legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--c); }
.legend .g { --c: var(--green); } .legend .o { --c: var(--orange); } .legend .r { --c: var(--red); } .legend .x { --c: #ff2d55; }
.legend span { color: var(--soft); } .legend b { color: var(--text); font-weight: 600; } .legend em { font-style: normal; color: var(--muted); }
.bl { display: grid; gap: 8px; }
.bl-r { display: grid; grid-template-columns: minmax(120px, 40%) 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.bl-r > span { color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-b { height: 10px; border-radius: 0 4px 4px 0; background: rgba(255,255,255,.03); } .bl-b i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: #76A30F; }
.bl.warn .bl-b i { background: var(--orange); }
.bl-r b { font: 600 12.5px var(--mono); white-space: nowrap; } .bl-r b em { font-style: normal; font-weight: 400; color: var(--muted); }

/* lists */
.feed, .mini, .rs, .warn { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--soft); }
.feed li:last-child { border: 0; } .feed time { flex: none; color: var(--muted); font-size: 12px; }
.feed a { color: var(--lime); } .feed b { color: var(--text); font-weight: 600; }
.pane .feed { max-height: 380px; overflow-y: auto; }
.mini li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.mini li:last-child { border: 0; }
.mini li > a, .mini li > span:first-child { flex: 1; min-width: 0; color: var(--text); }
.mini b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mini small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.mini li > a:hover b { color: var(--lime); } .mini time { flex: none; width: 70px; text-align: right; color: var(--muted); font-size: 12px; }
.rs li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.rs li:last-child { border: 0; }
.rs b { flex: none; width: 46px; font: 600 12.5px var(--mono); } .rs .r b { color: var(--red); } .rs .o b { color: var(--orange); } .rs .i b { color: var(--muted); font-weight: 400; }
.rs small { display: block; margin-top: 2px; font: 11.5px var(--mono); color: var(--muted); }
.warn li { padding: 6px 0 6px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--soft); position: relative; }
.warn li::before { content: ''; position: absolute; left: 0; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin-bottom: 14px; border: 1px solid var(--line2); border-radius: 14px; overflow: hidden; background: var(--line2); }
.kv div { padding: 10px 14px; background: #0B0F13; min-width: 0; }
.kv small { display: block; font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kv span { display: block; margin-top: 3px; font-size: 14px; overflow-wrap: anywhere; } .kv .who a { color: var(--lime); } .kv .who small { display: block; font: 12px var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }

/* login */
html:has(.mis-login) { height: 100%; }
.mis-login { display: flex; min-height: 100%; min-height: 100vh; min-height: 100dvh; margin: 0; padding: 24px 16px; }
.mis-login-box { margin: auto; }   /* centred both ways inside the flex body, whatever the window size */
.mis-login-box { width: 100%; max-width: 380px; padding: 30px 26px; border: 1px solid var(--line2); border-radius: 18px; background: linear-gradient(180deg, rgba(16,21,27,.92), rgba(10,13,17,.92)); }
.mis-login-box .brand { display: flex; align-items: center; justify-content: center; } .mis-login-box h1 { margin: 22px 0 18px; font-size: 24px; letter-spacing: -.02em; text-align: center; }
.mis-login-box form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.mis-login-box label { display: grid; gap: 6px; font-size: 13.5px; color: var(--soft); }
.mis-login-box input { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid var(--line2); border-radius: 10px; background: rgba(7,9,12,.8); color: var(--text); font: 15px var(--sans); outline: none; }
.mis-login-box input[name=code] { font: 600 20px var(--mono); letter-spacing: .3em; }
.mis-login-box input:focus { border-color: rgba(198,255,61,.6); }
.mis-login-box .btn { margin-top: 4px; } .mis-login-box .btn:disabled { opacity: .6; cursor: wait; }
.mis-login-box .mis-err { margin: 0; font-size: 13.5px; }
.mis-fine { margin: 18px 0 0; font-size: 12px; color: var(--muted); text-align: center; }

@media (max-width: 1100px) { .three { grid-template-columns: 1fr 1fr; } .three > :last-child { grid-column: 1 / -1; } }
@media (max-width: 860px) {
  .mis { grid-template-columns: 1fr; }
  .mis-side { position: fixed; z-index: 20; top: auto; bottom: 0; left: 0; right: 0; height: auto; flex-direction: row; gap: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line); background: rgba(11,14,18,.97); }
  .mis-side .brand, .mis-me div, .mis-me .av { display: none; }
  .mis-nav { flex: 1; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); overflow-x: auto; scrollbar-width: none; }
  .mis-nav a { flex-direction: column; gap: 3px; padding: 6px 2px; font-size: 11px; text-align: center; }
  .mis-me { margin: 0; padding: 0 6px; border: 0; }
  .mis-main { padding: 20px 16px 100px; }
  .two, .three { grid-template-columns: 1fr; } .three > :last-child { grid-column: auto; }
  .tiles { grid-template-columns: 1fr 1fr; } .tile > b { font-size: 24px; }
  .filt .search { flex-basis: 100%; }
}
@media (max-width: 420px) { .tiles { grid-template-columns: 1fr; } .tiles:has(.kpi) { grid-template-columns: 1fr 1fr; gap: 8px; } }
@media (max-width: 860px) {
  .tiles:has(.kpi) > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tile.kpi { padding: 12px 13px; } .tile.kpi > b { font-size: 26px; } .kpi-h small { font-size: 9.5px; letter-spacing: .06em; }
  .chg { padding: 1px 6px; font-size: 10.5px; } .kkey { font-size: 10.5px; gap: 2px 9px; }
}