/* The Webmaster's look: the Cluinn admin's layout and styling (owner, 2026-11-05), on top of admin.css.
   Everything is scoped to the Webmaster's page, so a website's own admin never changes.
   Dark by default, with a light twin. Geist for text, Syne for titles. */
@font-face{font-family:'Syne';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/syne-var.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-normal-400.woff2) format('woff2')}

body[data-app=webmaster]{
  --wm-app:#1c1c1c;--wm-card:#202123;--wm-surface:#202020;--wm-sunken:#0f0f0f;--wm-ctl-hover:#28282a;--wm-field:#171718;
  --wm-b-subtle:rgba(255,255,255,.06);--wm-b:rgba(255,255,255,.1);--wm-b-ctl:rgb(255 255 255/11%);--wm-b-strong:rgba(255,255,255,.2);--wm-b-row:rgba(255,255,255,.05);
  --wm-row-hover:rgba(255,255,255,.045);--wm-hover:rgba(255,255,255,.06);--wm-active:rgb(61 61 61/64%);--wm-head:rgba(255,255,255,.03);
  --wm-fg:#fff;--wm-fg2:#d4d4d8;--wm-muted:#8a8f98;--wm-subtle:#9f9fab;--wm-ph:#7a7e85;--wm-link:#5badde;
  --wm-blue:#007aff;--wm-blue-hover:#0062dd;
  --wm-pos-bg:rgba(151,199,92,.13);--wm-pos:#90b365;--wm-neg-bg:rgba(247,107,90,.12);--wm-neg:#f08a7c;--wm-warn-bg:rgb(255 204 0/12%);--wm-warn:#e0b283;
  --wm-info-bg:rgba(30,148,220,.13);--wm-info:#5badde;--wm-neutral-bg:rgba(255,255,255,.06);--wm-neutral:#9f9fab;
  --wm-act:#fa600e;--wm-act-bg:rgba(247,107,90,.14);--wm-look:#ffcf00;--wm-look-bg:rgba(255,178,74,.13);--wm-watch:#7fb4dd;--wm-watch-bg:rgba(91,173,222,.13);--wm-ok:#97c75c;
  --wm-sw-track:#363636;--wm-sw-border:#5a5a5a;--wm-sw-knob:#020202;--wm-sw-on:#d0d0d0;--wm-sw-knob-on:#404040;
  --wm-mh-none:#272727;--wm-mh-b0:#373737;--wm-mh-b1:#5a5012;--wm-mh-b2:#e6a64c;--wm-mh-b3:#de3c31;--wm-mh-idle:rgba(255,255,255,.075);
  --wm-title:'Syne',Geist,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --bg:var(--wm-app);--surface:var(--wm-card);--soft:var(--wm-active);--hover:var(--wm-hover);--line:var(--wm-b);--hair:var(--wm-b-row);--line2:var(--wm-b-strong);
  --focus:rgba(0,122,255,.6);--text:var(--wm-fg);--muted:var(--wm-muted);--pri:#f4f4f5;--onpri:#18181b;--accent:var(--wm-link);--acsoft:var(--wm-info-bg);
  --ok:var(--wm-pos);--oksoft:var(--wm-pos-bg);--warn:var(--wm-warn);--warnsoft:var(--wm-warn-bg);--bad:var(--wm-neg);--badsoft:var(--wm-neg-bg);
  --shadow:0 18px 40px rgba(0,0,0,.45);--dim:#5f5f67;--faint:var(--wm-subtle);
  --barh:81px;--railw:43px;--navw:176px;
  background:var(--wm-app);color:var(--wm-fg);font:400 13px/1.45 Geist,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sb-thumb:#3a3a3c;--sb-hover:#55555d}
:root[data-theme=light] body[data-app=webmaster]{
  --wm-app:#fafafa;--wm-card:#fff;--wm-surface:#ececec;--wm-sunken:#e4e4e7;--wm-ctl-hover:#f1f1f2;--wm-field:#fff;
  --wm-b-subtle:rgba(24,24,27,.06);--wm-b:rgba(24,24,27,.08);--wm-b-ctl:rgba(24,24,27,.16);--wm-b-strong:rgba(24,24,27,.24);--wm-b-row:rgba(24,24,27,.05);
  --wm-row-hover:rgba(24,24,27,.04);--wm-hover:rgba(24,24,27,.05);--wm-active:rgba(24,24,27,.07);--wm-head:rgba(24,24,27,.03);
  --wm-fg:#18181b;--wm-fg2:#27272a;--wm-muted:#6b7077;--wm-subtle:#71717a;--wm-ph:#8e9196;--wm-link:#0b6dc0;
  --wm-pos-bg:rgba(101,163,13,.12);--wm-pos:#3f7010;--wm-neg-bg:rgba(174,50,38,.1);--wm-neg:#a52f22;--wm-warn-bg:rgba(150,96,13,.12);--wm-warn:#8a5a0c;
  --wm-info-bg:rgba(53,100,138,.1);--wm-info:#2d5c82;--wm-neutral-bg:rgba(24,24,27,.06);--wm-neutral:#626a70;
  --wm-act:#a52f22;--wm-act-bg:rgba(174,50,38,.1);--wm-look:#8a5a0c;--wm-look-bg:rgba(150,96,13,.12);--wm-watch:#2d5c82;--wm-watch-bg:rgba(53,100,138,.1);--wm-ok:#3f7010;
  --wm-sw-track:#ddd;--wm-sw-border:#bbb;--wm-sw-knob:#fff;--wm-sw-on:#1a1a1c;--wm-sw-knob-on:#ebebeb;
  --wm-mh-none:#ececec;--wm-mh-b0:#dcdcdc;--wm-mh-b1:#d6cd95;--wm-mh-b2:#cf9522;--wm-mh-b3:#c33b30;--wm-mh-idle:rgba(24,24,27,.06);
  --pri:#18181b;--onpri:#fff;--shadow:0 18px 40px rgba(24,24,27,.14);--dim:#a1a1aa;--sb-thumb:#c4c4c8;--sb-hover:#a1a1aa}
:root:has(body[data-app=webmaster]){background:var(--wm-app,#1c1c1c)}
:root[data-theme=dark]:has(body[data-app=webmaster]),:root:not([data-theme=light]):has(body[data-app=webmaster]){background:#1c1c1c}
:root[data-theme=light]:has(body[data-app=webmaster]){background:#fafafa}

/* The frame: two bars across the top, a 43px icon rail that opens on hover, the alerts panel on the right ---------- */
body[data-app=webmaster] .shell.wm{display:flex;align-items:stretch;min-height:100vh;background:var(--wm-app)}
body[data-app=webmaster] .wm>.frame{flex:1;min-width:0}
body[data-app=webmaster] .wmtop{position:sticky;top:0;z-index:60;background:var(--wm-app);border-bottom:1px solid var(--wm-b)}
body[data-app=webmaster] .gbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:5px;height:40px;padding:0 8px;background:var(--wm-sunken);border-bottom:1px solid var(--wm-b-strong)}
:root[data-theme=light] body[data-app=webmaster] .gbar{background:var(--wm-surface)}
body[data-app=webmaster] .pins{display:flex;align-items:stretch;height:39px;overflow-x:auto;scrollbar-width:none}
body[data-app=webmaster] .pin{display:flex;align-items:center;padding:0 9.6px;color:var(--wm-muted);font-size:11.5px;text-decoration:none;white-space:nowrap;transition:color .12s,background .12s}
body[data-app=webmaster] .pin:hover{color:var(--wm-fg)}
body[data-app=webmaster] .pin.on{background:var(--wm-active);color:var(--wm-fg)}
body[data-app=webmaster] .gend{display:flex;align-items:center;justify-content:flex-end;gap:4px}
body[data-app=webmaster] .bell{position:relative;display:inline-flex;align-items:center;gap:5px;height:28px;min-width:28px;padding:0 5px;background:none;border:1px solid transparent;border-radius:6px;color:var(--wm-subtle)}
body[data-app=webmaster] .bell:hover,body[data-app=webmaster] .bell[aria-expanded=true]{background:var(--wm-hover);color:var(--wm-fg)}
body[data-app=webmaster] .bell.hot{color:var(--wm-act)}
body[data-app=webmaster] .bell .nbadge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:17px;padding:0 4px;border-radius:9px;background:#b4530f;color:#fff;font-size:11.5px;font-weight:500;line-height:1}
body[data-app=webmaster] .bell.hot .nbadge{background:#d43b3b}
body[data-app=webmaster] .topbar{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);height:40px;gap:12px;padding:0;background:none;border:0}
body[data-app=webmaster] .tleft{gap:0}
body[data-app=webmaster] .tright{gap:6px;padding-right:16px}
body[data-app=webmaster] .tbrand{flex:none;width:var(--railw);max-width:none;margin:0;justify-content:center}
body[data-app=webmaster] .tmark{width:var(--railw)}
body[data-app=webmaster] .tbrand .mark{width:22px;height:22px;background:none;color:var(--wm-fg);border-radius:0;font:700 17px/1 var(--wm-title);letter-spacing:-.04em}
body[data-app=webmaster] .tbrand .pn{display:none}
body[data-app=webmaster] .tcrumb{padding-left:16px;gap:0;font:300 12.8px/1.35 var(--wm-title);letter-spacing:-.01em;color:var(--wm-fg2);opacity:1}
body[data-app=webmaster] .tcrumb>span[aria-hidden]{display:none}
body[data-app=webmaster] .tleft>.bd{margin-left:10px}
body[data-app=webmaster] .tmid{gap:3px}
body[data-app=webmaster] .fbody{display:flex;align-items:stretch;padding-left:var(--railw);min-height:calc(100vh - var(--barh))}
body[data-app=webmaster] .rail{position:fixed;top:var(--barh);left:0;bottom:0;z-index:55;width:var(--railw);height:auto;padding:8px 5px;gap:8px;align-items:stretch;overflow:hidden;background:var(--wm-app);border-right:1px solid rgba(255,255,255,.08);transition:width .1s ease-out}
:root[data-theme=light] body[data-app=webmaster] .rail{border-right-color:var(--wm-b)}
body[data-app=webmaster] .rail:hover{width:176px;box-shadow:none}
body[data-app=webmaster] .rnav,body[data-app=webmaster] .rfoot{align-items:stretch;gap:4px}
body[data-app=webmaster] a.ri{flex-direction:row;justify-content:flex-start;gap:14px;width:auto;height:30px;padding:0 6px;border:1px solid transparent;border-radius:4px;color:#8c919e;white-space:nowrap}
body[data-app=webmaster] a.ri:hover{background:var(--wm-hover);color:var(--wm-fg)}
body[data-app=webmaster] a.ri.on{background:var(--wm-active);color:var(--wm-fg)}
body[data-app=webmaster] .rk{flex:none;width:20px;height:20px;border-radius:0;background:none!important}
body[data-app=webmaster] .rk svg{width:19px;height:19px}
body[data-app=webmaster] .rl{font-size:12.8px;font-weight:400;opacity:0;color:inherit!important;transition:opacity .08s}
body[data-app=webmaster] .rail:hover .rl{opacity:1}
body[data-app=webmaster] .rsep{width:auto;margin:3px 6px;background:var(--wm-b)}
body[data-app=webmaster] .ri.me{display:flex;align-items:center;justify-content:flex-start;width:auto;height:34px;margin:6px 0 0;padding:0 2px;border-radius:4px}
body[data-app=webmaster] .ri.me .av{width:28px;height:28px;font-size:11px}
body[data-app=webmaster] .pop.mepop{left:52px}
body[data-app=webmaster] .content{flex:1;min-width:0}

/* The section menu: a Syne title, mono group labels, plain rows ------------------------------------------- */
body[data-app=webmaster] .two-nav{min-height:calc(100vh - var(--barh))}
body[data-app=webmaster] .subnav{width:var(--navw);background:var(--wm-app);border-right:1px solid rgba(255,255,255,.08)}
:root[data-theme=light] body[data-app=webmaster] .subnav{border-right-color:var(--wm-b)}
body[data-app=webmaster] .subin{padding:6px 11px 20px}
body[data-app=webmaster] .subin h1{margin:0 0 7px;padding:2px 9px 9px;font:500 18px/1.25 var(--wm-title);letter-spacing:-.02em;color:var(--wm-fg);border-bottom:1px solid var(--wm-b)}
body[data-app=webmaster] .sg{padding:0}
body[data-app=webmaster] .sg+.sg{border-top:0}
body[data-app=webmaster] .subnav .cap,body[data-app=webmaster] .sg .cap{padding:9px 9px 6px;font:400 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--wm-subtle);opacity:.55}
body[data-app=webmaster] .subnav button,body[data-app=webmaster] .subnav a.nl{position:relative;display:flex;align-items:center;width:100%;min-height:30px;margin:0 0 2px;padding:5.6px 8.8px;background:none;border:0;border-radius:4px;color:var(--wm-subtle);font:400 13px/1.35 Geist,sans-serif;text-align:left;text-decoration:none}
body[data-app=webmaster] .subnav button:hover,body[data-app=webmaster] .subnav a.nl:hover{background:var(--wm-hover);color:var(--wm-fg)}
body[data-app=webmaster] .subnav button.on,body[data-app=webmaster] .subnav a.nl.on{background:var(--wm-active);color:var(--wm-fg)}
body[data-app=webmaster] .subnav .branch{gap:2px;margin:2px 0 4px 14px;padding-left:10px}
body[data-app=webmaster] .subnav .branch>button{font-size:12.5px}
body[data-app=webmaster] .star{margin-left:auto;display:none;align-items:center;padding:2px;border-radius:3px;color:var(--wm-subtle)}
body[data-app=webmaster] .subnav a.nl:hover .star,body[data-app=webmaster] .star.on{display:inline-flex}
body[data-app=webmaster] .star.on{color:var(--wm-fg)}
body[data-app=webmaster] .star.on svg{fill:currentColor}
body[data-app=webmaster] .star:hover{background:var(--wm-hover);color:var(--wm-fg)}

/* Pages, cards, rows, tables ---------------------------------------------------------------------------- */
body[data-app=webmaster] .page{max-width:1140px;padding:20px 32px 64px}
body[data-app=webmaster] .two-nav .page{padding-top:20px}
body[data-app=webmaster] .card{background:var(--wm-card);border:1px solid var(--wm-b-subtle);border-radius:10px;box-shadow:none}
:root[data-theme=light] body[data-app=webmaster] .card{border-color:var(--wm-b)}
body[data-app=webmaster] .card.pad{padding:16px}
body[data-app=webmaster] .sh{margin:26px 0 10px}
body[data-app=webmaster] .sh:first-child,body[data-app=webmaster] .page>.sh:first-child{margin-top:4px}
body[data-app=webmaster] .sh h2,body[data-app=webmaster] h2.sect{font:600 15px/1.3 var(--wm-title);letter-spacing:-.3px;color:var(--wm-fg)}
body[data-app=webmaster] .note{color:var(--wm-muted);font-size:12.5px}
body[data-app=webmaster] .li{min-height:46px;padding:9px 16px;border-color:var(--wm-b-row)}
body[data-app=webmaster] .li b{font-weight:500;color:var(--wm-fg)}
body[data-app=webmaster] .li small{color:var(--wm-muted);font-size:12px}
body[data-app=webmaster] .empty{padding:22px 16px;color:var(--wm-muted);font-size:13px}
body[data-app=webmaster] .tb{width:100%;border-collapse:collapse;font-size:13px}
body[data-app=webmaster] .tb th{padding:8px;background:var(--wm-head);border-bottom:1px solid var(--wm-b);color:var(--wm-subtle);font-size:11px;font-weight:500;letter-spacing:.55px;text-transform:uppercase;text-align:left;white-space:nowrap}
body[data-app=webmaster] .tb th:first-child,body[data-app=webmaster] .tb td:first-child{padding-left:16px}
body[data-app=webmaster] .tb td{padding:9px 8px;border-bottom:1px solid var(--wm-b-row);color:var(--wm-fg2);vertical-align:middle}
body[data-app=webmaster] .tb tr:last-child td{border-bottom:0}
body[data-app=webmaster] .tb tbody tr:nth-child(even) td{background:rgba(255,255,255,.015)}
body[data-app=webmaster] .tb tr.rowlink{cursor:pointer}
body[data-app=webmaster] .tb tr.rowlink:hover td,body[data-app=webmaster] .tb tbody tr:hover td{background:var(--wm-row-hover)}
body[data-app=webmaster] .tb td b{color:var(--wm-fg);font-weight:500}
body[data-app=webmaster] .tb .m,body[data-app=webmaster] .m{color:var(--wm-muted)}
body[data-app=webmaster] .stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
body[data-app=webmaster] a.stat{color:inherit;text-decoration:none}
body[data-app=webmaster] a.stat:hover{border-color:var(--wm-b-strong)}
body[data-app=webmaster] .stat{padding:16px 18px;background:var(--wm-card);border:1px solid var(--wm-b-subtle);border-radius:10px;box-shadow:none}
body[data-app=webmaster] .stat b{font:600 28px/1.15 var(--wm-title);letter-spacing:-.02em;color:var(--wm-fg)}
body[data-app=webmaster] .stat small{order:0;margin-top:4px;color:var(--wm-fg2);font-size:12.5px}
body[data-app=webmaster] .stat .meter{order:1;margin-top:10px}
body[data-app=webmaster] .stat span{order:2;margin-top:4px;color:var(--wm-muted);font-size:12px;opacity:1}
body[data-app=webmaster] .meter{background:var(--wm-sunken)}
body[data-app=webmaster] .meter i{background:var(--wm-fg2)}

/* Controls ------------------------------------------------------------------------------------------------ */
body[data-app=webmaster] .b{height:28px;min-height:28px;padding:0 10px;gap:7px;background:var(--wm-card);border:1px solid var(--wm-b-ctl);border-radius:6px;color:var(--wm-fg);font:350 13px/1 Geist,sans-serif;box-shadow:none}
body[data-app=webmaster] .b:hover:not(:disabled){background:var(--wm-ctl-hover);border-color:var(--wm-b-strong)}
body[data-app=webmaster] .b.p{background:var(--wm-blue);border-color:transparent;color:#fff;font-weight:600}
body[data-app=webmaster] .b.p:hover:not(:disabled){background:var(--wm-blue-hover)}
body[data-app=webmaster] .b.p:disabled{background:var(--wm-sunken);color:var(--wm-fg);opacity:.3}
body[data-app=webmaster] .b.s{background:var(--wm-card)}
body[data-app=webmaster] .b.g,body[data-app=webmaster] .b.ghost{background:transparent;border-color:transparent;color:var(--wm-subtle)}
body[data-app=webmaster] .b.g:hover,body[data-app=webmaster] .b.ghost:hover{background:var(--wm-hover);color:var(--wm-fg)}
body[data-app=webmaster] .b.danger{background:transparent;border-color:color-mix(in srgb,#f76b5a 35%,transparent);color:#ff8676}
body[data-app=webmaster] .b.danger:hover:not(:disabled){background:color-mix(in srgb,#f76b5a 12%,transparent)}
body[data-app=webmaster] .b.icon{width:28px;padding:0;justify-content:center}
body[data-app=webmaster] .ic{border-radius:6px;color:var(--wm-subtle)}
body[data-app=webmaster] .ic:hover{background:var(--wm-hover);color:var(--wm-fg)}
body[data-app=webmaster] .in{min-height:30px;padding:5px 10px;background:var(--wm-field);border:1px solid var(--wm-b-ctl);border-radius:6px;color:var(--wm-fg);font-size:13px}
body[data-app=webmaster] .in:hover{border-color:var(--wm-b-strong)}
body[data-app=webmaster] .in:focus{border-color:var(--wm-blue);outline:0;box-shadow:0 0 0 3px rgba(0,122,255,.25)}
body[data-app=webmaster] .in::placeholder{color:var(--wm-ph)}
/* .in above sets the whole background, so a dropdown gets its arrow back here (the arrow itself is --select-arrow in admin.css). */
body[data-app=webmaster] select.in{min-width:96px;padding-right:30px;background-color:var(--wm-card);background-image:var(--select-arrow);background-repeat:no-repeat;background-position:right 9px center;background-size:14px;border-radius:6px}
body[data-app=webmaster] .lb{color:var(--wm-subtle);font-size:12px;font-weight:500}
body[data-app=webmaster] .sw{box-sizing:content-box;position:relative;flex:none;width:37px;height:16px;padding:0;background:var(--wm-sw-track);border:1px solid var(--wm-sw-border);border-radius:20px;transition:background .24s cubic-bezier(.22,1,.36,1),border-color .24s}
body[data-app=webmaster] .sw:hover{border-color:var(--wm-b-strong)}
body[data-app=webmaster] .sw i{position:absolute;left:4px;top:2px;box-sizing:border-box;width:18.5px;height:12px;background:var(--wm-sw-knob);border:1px solid var(--wm-sw-border);border-radius:19px;box-shadow:none;transform:none;transition:transform .24s cubic-bezier(.4,0,1,1),background .24s,border-color .24s}
body[data-app=webmaster] .sw.on{background:var(--wm-sw-on);border-color:transparent}
body[data-app=webmaster] .sw.on i{transform:translateX(12.1px);background:var(--wm-sw-knob-on);border-color:var(--wm-sw-on)}
body[data-app=webmaster] .sw:disabled{opacity:.5;cursor:not-allowed}
body[data-app=webmaster] .bd{display:inline-flex;align-items:center;gap:4px;height:auto;padding:1px 7px;background:var(--wm-neutral-bg);color:var(--wm-neutral);border:0;border-radius:4px;font-size:11.5px;font-weight:500;line-height:1.5;white-space:nowrap}
body[data-app=webmaster] a.bd{text-decoration:none}
body[data-app=webmaster] a.bd:hover{filter:brightness(1.25)}
body[data-app=webmaster] .bd.ok{background:var(--wm-pos-bg);color:var(--wm-pos)}
body[data-app=webmaster] .bd.warn{background:var(--wm-warn-bg);color:var(--wm-warn)}
body[data-app=webmaster] .bd.bad{background:var(--wm-neg-bg);color:var(--wm-neg)}
body[data-app=webmaster] .bd.ac,body[data-app=webmaster] .bd.info{background:var(--wm-info-bg);color:var(--wm-info)}
body[data-app=webmaster] .modal{background:var(--wm-card);border:1px solid var(--wm-b-strong);border-radius:10px;box-shadow:0 28px 60px rgba(0,0,0,.5)}
body[data-app=webmaster] .modal h2{font:600 16px/1.3 var(--wm-title);letter-spacing:-.3px}
body[data-app=webmaster] .scrim{background:rgba(0,0,0,.6)}
body[data-app=webmaster] .pop{background:var(--wm-card);border:1px solid var(--wm-b-strong);border-radius:8px}
body[data-app=webmaster] .tip{background:#f4f4f5;color:#18181b}
:root[data-theme=light] body[data-app=webmaster] .tip{background:#18181b;color:#fff}
body[data-app=webmaster] .toast{background:var(--wm-card);color:var(--wm-fg);border:1px solid var(--wm-b-strong)}
body[data-app=webmaster] .pager .pnum.on{background:var(--wm-active)}
body[data-app=webmaster] .seg{background:var(--wm-sunken);border-color:var(--wm-b)}

/* Tabs in the page bar (Overview | Switches | Settings) ------------------------------------------------- */
.wtabs{display:flex;align-items:center;gap:3px;height:40px;padding:5px 0}
.wtabs button{height:30px;padding:2px 9px 1px;background:none;border:0;border-radius:4px;color:var(--wm-subtle);font:300 13px/1.35 Geist,sans-serif;opacity:.9}
.wtabs button:hover{color:var(--wm-fg);opacity:1}
.wtabs button.on{background:var(--wm-active);color:var(--wm-fg);opacity:1}
.wtabs .cnt{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:6px;padding:0 5px;border-radius:10px;background:var(--wm-neutral-bg);color:var(--wm-fg2);font-size:11px;font-weight:600}
.wcount{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--wm-neutral-bg);color:var(--wm-fg2);font-size:11px;font-weight:600}

/* The alerts panel on the right -------------------------------------------------------------------------- */
.npanel{position:sticky;top:0;flex:none;width:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;background:var(--wm-app);border-left:0 solid var(--wm-b);transition:width .18s ease-out;z-index:70}
.npanel.open{width:350px;border-left-width:1px}
@media(max-width:1280px){.npanel.open{width:320px}}
@media(max-width:1023px){.npanel.open{position:fixed;right:0;width:100vw}}
@media(prefers-reduced-motion:reduce){.npanel{transition:none}}
.nhead{display:flex;align-items:center;justify-content:space-between;gap:8px;height:40px;padding:0 8px 0 14px;flex:none;border-bottom:1px solid var(--wm-b)}
.nhead b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.nhead .upill{margin-left:8px;padding:1px 7px;border-radius:999px;background:#d43b3b;color:#fff;font-size:11px;font-weight:700}
.nfilt{display:flex;gap:4px;padding:8px 10px;flex:none;border-bottom:1px solid var(--wm-b-row)}
.nfilt button{height:24px;padding:0 8px;background:none;border:1px solid var(--wm-b);border-radius:12px;color:var(--wm-subtle);font-size:11.5px}
.nfilt button.on{background:var(--wm-active);color:var(--wm-fg);border-color:transparent}
.nbody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.nbatch{padding:12px 14px 5px;color:var(--wm-subtle);font:400 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.nrow{position:relative;display:block;width:100%;padding:9px 12px 9px 17px;background:none;border:0;border-bottom:1px solid var(--wm-b-row);color:inherit;text-align:left;font:inherit;cursor:pointer}
.nrow:hover{background:var(--wm-row-hover)}
.nrow:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 2px 2px 0;background:var(--sev,var(--wm-neutral))}
.nrow.act{--sev:var(--wm-act)}.nrow.look{--sev:var(--wm-look)}.nrow.watch{--sev:var(--wm-watch)}.nrow.ok{--sev:var(--wm-ok)}
.nrow.read{opacity:.55}
.nrow .nt{display:flex;align-items:baseline;gap:8px}
.nrow .nt b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;color:var(--wm-fg)}
.nrow .nt small{flex:none;color:var(--wm-muted);font-size:11.5px}
.nrow .nd{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--wm-muted);font-size:12px}
.nrow .nx{display:none;margin-top:8px;white-space:normal}
.nrow.open .nd{white-space:normal}
.nrow.open .nx{display:block}
.nx p{margin:0 0 6px;color:var(--wm-fg2);font-size:12.5px;line-height:1.45}
.nx p span{color:var(--wm-subtle)}
.nx .nchips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.sev{display:inline-flex;align-items:center;padding:1px 7px;border-radius:4px;font-size:11px;font-weight:500;background:var(--wm-neutral-bg);color:var(--wm-neutral)}
.sev.act{background:var(--wm-act-bg);color:var(--wm-act)}.sev.look{background:var(--wm-look-bg);color:var(--wm-look)}.sev.watch{background:var(--wm-watch-bg);color:var(--wm-watch)}.sev.ok{background:var(--wm-pos-bg);color:var(--wm-pos)}
.nfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;flex:none;border-top:1px solid var(--wm-b)}
.nempty{padding:40px 20px;color:var(--wm-muted);font-size:13px;text-align:center}
.nempty small{display:block;margin-top:6px;font-size:12px;opacity:.75}
.nread{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 12px 7px 14px;flex:none;border-bottom:1px solid var(--wm-b-row);color:var(--wm-subtle);font-size:12.5px}

/* AI › Models: one box per group of jobs, Cluinn's Channels table ----------------------------------------- */
.mstack{display:flex;flex-direction:column;gap:16px}
.mbox{display:flex;flex-direction:column;gap:8px;padding:8px 16px 12px;background:var(--wm-card);border:1px solid var(--wm-b-subtle);border-radius:10px}
.mbox .mhd{display:flex;align-items:center;gap:12px;min-height:31px}
.mbox .mhd h2{font:600 15px/1.3 var(--wm-title);letter-spacing:-.3px}
.mbox .mhd .note{flex:1}
.jt{width:100%;border-collapse:collapse;font-size:13px}
.jt th{padding:8px;background:var(--wm-head);border-bottom:1px solid var(--wm-b);color:var(--wm-subtle);font-size:11px;font-weight:500;letter-spacing:.55px;text-transform:uppercase;text-align:left;white-space:nowrap}
.jt td{padding:8px;border-bottom:1px solid var(--wm-b-row);color:var(--wm-fg2);vertical-align:middle}
.jt tr:last-child td{border-bottom:0}
.jt td.jn{min-width:180px}
.jt td.jn b{display:flex;align-items:center;gap:6px;font-weight:400;color:var(--wm-fg)}
.jt td.jn small{display:block;color:var(--wm-muted);font-size:12px;line-height:1.35;max-width:260px}
.jt .dirty{width:6px;height:6px;border-radius:50%;background:var(--wm-blue)}
.warnline{display:flex;align-items:center;gap:5px;margin-top:5px;color:var(--wm-warn);font-size:11.5px}
.warnline svg{flex:none}
/* The model picker: a button showing the model and its service, a list grouped by service with prices */
.mpick{position:relative;display:inline-flex;align-items:center;gap:8px;min-width:230px;max-width:300px;height:34px;padding:0 10px 0 11px;background:var(--wm-card);border:1px solid var(--wm-b-ctl);border-radius:6px;color:var(--wm-fg2);font:400 12.4px/1.3 Geist,sans-serif;text-align:left;cursor:pointer}
.mpick:hover{border-color:var(--wm-b-strong);background:var(--wm-ctl-hover)}
.mpick .mv{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--wm-fg)}
.mpick .mv.none{color:var(--wm-muted)}
.mpick svg.chev{flex:none;color:var(--wm-muted)}
.vp{display:inline-flex;align-items:center;flex:none;margin-left:6px;padding:0 5px;border:1px solid;border-radius:999px;font-size:10px;line-height:15.5px;letter-spacing:.1px;white-space:nowrap}
.vp.openrouter{background:rgba(91,173,222,.12);color:#7fb4dd;border-color:rgba(127,180,221,.3)}
.vp.anthropic{background:rgba(234,179,8,.12);color:#e0b283;border-color:rgba(224,178,131,.3)}
.vp.gemini{background:rgba(151,199,92,.13);color:#90b365;border-color:rgba(144,179,101,.3)}
.vp.openai{background:rgba(167,139,250,.12);color:#b4a2f5;border-color:rgba(180,162,245,.3)}
.vp.typesafe{background:rgba(244,114,182,.12);color:#ec8fbf;border-color:rgba(236,143,191,.3)}
:root[data-theme=light] .vp.openrouter{color:#2d5c82}:root[data-theme=light] .vp.anthropic{color:#8a5a0c}:root[data-theme=light] .vp.gemini{color:#3f7010}:root[data-theme=light] .vp.openai{color:#5b3fc4}:root[data-theme=light] .vp.typesafe{color:#a62a6b}
/* The old picker list (before the small table) */
.mlist.old{position:fixed;z-index:90;width:360px;max-height:min(460px,70vh);overflow-y:auto;padding:4px;background:var(--wm-card);border:1px solid var(--wm-b-strong);border-radius:8px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.mlist .mg{height:1px;margin:4px 6px;background:var(--wm-b)}
.mlist .mgl{padding:7px 9px 3px;color:var(--wm-subtle);font:400 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.mopt{display:flex;align-items:flex-start;gap:8px;width:100%;padding:7px 9px;background:none;border:0;border-radius:5px;color:var(--wm-fg);text-align:left;font:400 13px/1.3 Geist,sans-serif;cursor:pointer}
.mopt:hover:not(:disabled),.mopt:focus-visible{background:var(--wm-hover);outline:0}
.mopt:disabled{opacity:.42;cursor:not-allowed}
.mopt .mo{flex:1;min-width:0}
.mopt .mo b{display:flex;align-items:center;font-weight:400}
.mopt .mo small{display:block;margin-top:2px;color:var(--wm-muted);font-size:11.5px}
.mopt .tick{flex:none;width:14px;margin-top:1px;color:var(--wm-fg)}
/* AI › Models: the model picker as a small table (canvas page 7, board 9); .onep = one price (photos), never .photo (the website admin owns it). A heading row with a slightly lighter band that
   stays in view; the models you can pick, cheapest first; a line; the ones you can't, dimmed, with the reason as a tag. */
.mtab{position:fixed;z-index:90;width:460px;max-height:min(520px,70vh);overflow-y:auto;background:var(--wm-card);border:1px solid var(--wm-b-strong);border-radius:8px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.mtab .mhead,.mtab .mrow{display:grid;grid-template-columns:14px minmax(0,1fr) 78px 58px 58px;gap:8px;align-items:center}
.mtab.onep .mhead,.mtab.onep .mrow{grid-template-columns:14px minmax(0,1fr) 78px 78px}
.mtab .mhead{position:sticky;top:0;z-index:1;padding:7px 12px;background:color-mix(in srgb,var(--wm-fg) 5%,var(--wm-card));border-bottom:1px solid var(--wm-b);color:var(--wm-subtle);font:500 11px/1.2 Geist,sans-serif}
.mtab .mrows{padding:4px}
.mtab .mrow{width:100%;min-height:30px;padding:0 8px;background:none;border:0;border-radius:5px;color:var(--wm-fg);font:400 13px/1.2 Geist,sans-serif;text-align:left;white-space:nowrap;cursor:pointer}
.mtab .mrow:hover:not(:disabled),.mtab .mrow:focus-visible{background:var(--wm-hover);outline:0}
.mtab .mrow[aria-selected=true]{background:var(--wm-active)}
.mtab .mrow:disabled{opacity:.4;cursor:not-allowed}
.mtab .tick{display:flex;color:var(--wm-fg)}
.mtab .mn{display:flex;align-items:center;gap:6px;min-width:0}
.mtab .mnm{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mtab .mtag{flex:none;padding:1px 6px;border-radius:4px;background:var(--wm-neutral-bg);color:var(--wm-subtle);font-size:11px;line-height:1.4}
.mtab .vp{margin-left:0;padding:0 4px;font-size:9px;line-height:13px}
.mtab .num{font:400 12px/1 'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--wm-fg2);text-align:right}
.mtab .mhead .num{font:inherit;color:inherit}
.mtab .dash{color:var(--wm-muted)}
.mtab .msep{height:1px;margin:4px 6px;background:var(--wm-b)}
/* Photos' Models picker ticks several (canvas page 7): +N on the button for the others; in the list the main shows Default, and the
   other ticked ones show Make default on hover. */
.mpick .mmore{flex:none;color:var(--wm-muted)}
.mtab .mtdef{display:none;cursor:pointer}.mtab .mtdef:hover{color:var(--wm-fg)}
.mtab .mrow:hover .mtdef,.mtab .mrow:focus-visible .mtdef{display:inline}
/* The review of unsaved changes */
/* AI › Models › Save: Review changes as a small table (canvas page 7, board 10). Nothing wraps: the window grows to fit. */
body[data-app=webmaster] .modal.chgmodal{width:max-content;min-width:440px;max-width:min(860px,calc(100vw - 32px))}
.chgbox{margin-top:12px;overflow:auto;border:1px solid var(--wm-b);border-radius:8px}
.chgtab{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}
.chgtab th{padding:7px 14px;background:color-mix(in srgb,var(--wm-fg) 5%,var(--wm-card));color:var(--wm-subtle);font-weight:500;font-size:11px;text-align:left}
.chgtab td{padding:9px 14px;border-top:1px solid var(--wm-b-row);color:var(--wm-fg)}
.chgtab td.was{color:var(--wm-muted)}
.chgtab .aft{display:inline-flex;align-items:center;gap:6px}.chgtab .aft b{font-weight:500}
.chgtab .aft .vp{margin-left:0;padding:0 4px;font-size:9px;line-height:13px}
.chgtab .num{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.chg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:9px 0;border-bottom:1px solid var(--wm-b-row);font-size:13px}
.chg:last-child{border-bottom:0}
.chg .was{color:var(--wm-muted);text-decoration:line-through}
.chg .arrow{color:var(--wm-muted);margin:0 6px}

/* AI › Catalog: the list on the left, the model on the right ------------------------------------------- */
.cat{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start}
.clist{position:sticky;top:calc(var(--barh) + 20px);padding:6px;background:var(--wm-card);border:1px solid var(--wm-b-subtle);border-radius:10px;max-height:calc(100vh - var(--barh) - 40px);overflow-y:auto}
.clist .cgl{padding:9px 9px 5px;color:var(--wm-subtle);font:400 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.citem{display:flex;align-items:center;gap:6px;width:100%;min-height:32px;padding:5px 8px;background:none;border:0;border-radius:5px;color:var(--wm-subtle);font:400 13px/1.3 Geist,sans-serif;text-align:left;cursor:pointer}
.citem:hover{background:var(--wm-hover);color:var(--wm-fg)}
.citem.on{background:var(--wm-active);color:var(--wm-fg)}
.citem .cn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.citem.off{opacity:.45} /* switched off: dimmed, nothing more */
.citem.off:hover,.citem.off.on{opacity:.75}
/* Dragging a model up or down within its category: a blue line shows where it lands */
.citem{position:relative}
.citem.dragging{opacity:.4}
.citem.dropt::before,.citem.dropb::after{content:'';position:absolute;left:8px;right:8px;height:2px;border-radius:1px;background:var(--wm-blue)}
.citem.dropt::before{top:-1px}
.citem.dropb::after{bottom:-1px}
/* A model's details under its routing: each a card that folds open (the chevron and fold are the Website sections' own) */
.cfh{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 14px 0 16px;cursor:pointer}
.cft{padding:0;background:none;border:0;color:var(--wm-fg);font:600 13.5px/1.3 var(--wm-title);letter-spacing:-.2px;cursor:pointer}
.cfs{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;color:var(--wm-muted);font-size:12.5px}
.cfold .cbody{padding-top:2px}
.cfold.open .fold{grid-template-rows:1fr}
.cfold.open .rchev{transform:rotate(180deg);color:var(--wm-fg)}
.cfold:not(.open) .cfh:hover .rchev{color:var(--wm-fg)}
/* OpenRouter's companies: a short list that scrolls, its heading row staying in view */
body[data-app=webmaster] .rsec .rtable{max-height:340px;overflow:auto}
body[data-app=webmaster] .rsec .rhead2{position:sticky;top:0;z-index:1;background:var(--wm-card)}
/* A line in a side menu, before a page set apart from the rest (Spending › Test calls) */
body[data-app=webmaster] .sg .sgline{height:1px;margin:8px 9px;background:var(--wm-b)}
.fsum .tbud{margin-left:auto}
/* The switch at the foot of the list that shows switched-off models */
.cfoot{display:flex;align-items:center;gap:9px;margin:8px 2px 2px;padding:10px 7px 4px;border-top:1px solid var(--wm-b-subtle);color:var(--wm-muted);font-size:12.5px}
/* OpenRouter routing on an OpenRouter model's Catalog page (routing.js): its rows, and the companies table */
.csec>h3 .grow{flex:1}
.csec>h3 .rstatus{font:400 12.5px/1 Geist,sans-serif;color:var(--wm-muted)}
body[data-app=webmaster] .rsec .ctl{grid-template-columns:200px minmax(0,1fr);padding:12px 0;border-bottom:1px solid var(--wm-b-subtle);color:var(--wm-fg2)}
body[data-app=webmaster] .rsec .ctlab{font-weight:400;color:var(--wm-muted)}
body[data-app=webmaster] .rsec .rtick{color:var(--wm-fg2)}
body[data-app=webmaster] .rsec .in.num{width:72px;margin:0}
body[data-app=webmaster] .rsec .rdot{background:var(--wm-pos)}body[data-app=webmaster] .rsec .rdot.down{background:var(--wm-neg)}
body[data-app=webmaster] .rsec .rsummary{margin:12px 0 0;color:var(--wm-muted);font-size:12.5px;line-height:1.6}
body[data-app=webmaster] .rsec .rbar{margin:0 0 12px;padding-top:4px}
body[data-app=webmaster] .rsec .rbar h3{margin-right:4px;font:600 13.5px/1.3 var(--wm-title);letter-spacing:-.2px}
body[data-app=webmaster] .rsec .rcount{color:var(--wm-muted);font-size:12.5px}
body[data-app=webmaster] .rsec .rtable{border-color:var(--wm-b-subtle)}
body[data-app=webmaster] .rsec .rrow{grid-template-columns:28px minmax(0,1fr) 90px 96px 76px 86px 76px;padding:6px 12px;border-color:var(--wm-b-subtle)}
body[data-app=webmaster] .rsec .rhead2{color:var(--wm-muted);font-size:12px}
body[data-app=webmaster] .rsec .rco{color:var(--wm-fg2);font-size:13px}
body[data-app=webmaster] .rsec .rco.on{background:color-mix(in srgb,var(--wm-blue) 7%,transparent)}
body[data-app=webmaster] .rsec .rco:hover{background:var(--wm-hover)}
body[data-app=webmaster] .rsec .rnum.fits{color:var(--wm-pos)}
body[data-app=webmaster] .rsec .rnum.over{color:var(--wm-neg)}
@media(max-width:760px){body[data-app=webmaster] .rsec .ctl{grid-template-columns:1fr;gap:6px}}
.cdet{display:flex;flex-direction:column;gap:12px}
.cbar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--wm-card);border:1px solid var(--wm-b-subtle);border-radius:10px}
.cbar h2{font:600 16px/1.3 var(--wm-title);letter-spacing:-.3px}
.cbar code{color:var(--wm-muted);font-size:12px}
.cbar .grow{flex:1}
.csec{background:var(--wm-card);border:1px solid var(--wm-b-subtle);border-radius:10px}
.csec>h3{display:flex;align-items:center;gap:8px;margin:0;padding:12px 16px 8px;font:600 13.5px/1.3 var(--wm-title);letter-spacing:-.2px}
.csec .cbody{padding:4px 16px 16px}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.fgrid .full{grid-column:1/-1}
.money{display:flex;align-items:center;gap:6px}
.money .in{width:110px;font-variant-numeric:tabular-nums}
.money small{color:var(--wm-muted);font-size:12px}
.chk{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px;color:var(--wm-fg2)}
.chk small{display:block;color:var(--wm-muted);font-size:12px}
.uses{display:flex;flex-wrap:wrap;gap:6px}

/* AI › Model health ---------------------------------------------------------------------------------- */
.hgrid{display:grid;grid-template-columns:200px minmax(0,1fr) 92px;align-items:center;gap:6px 12px;padding:10px 16px 14px}
.hgrid .hl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--wm-fg2);font-size:12.5px}
.hgrid .hr{text-align:right;font-size:12px;color:var(--wm-muted);font-variant-numeric:tabular-nums}
.hgrid .hr b{display:block;color:var(--wm-fg2);font-weight:500}
.hgrid .hr b.over{color:var(--wm-mh-b3)}
.hdays{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;height:22px}
.hday{position:relative;border-radius:3px;background:var(--wm-mh-b0)}
.hday.n{background:transparent;box-shadow:inset 0 0 0 1px var(--wm-mh-idle)}
.hday.b1{background:var(--wm-mh-b1)}.hday.b2{background:var(--wm-mh-b2)}.hday.b3{background:var(--wm-mh-b3)}
.hday.bk:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:0 0 3px 3px;background:var(--wm-blue)}
.hkey{display:flex;flex-wrap:wrap;gap:12px;padding:0 16px 12px;color:var(--wm-muted);font-size:11.5px}
.hkey span{display:inline-flex;align-items:center;gap:5px}
.hkey i{display:inline-block;width:12px;height:12px;border-radius:3px}
.hhead{display:flex;align-items:center;gap:10px;padding:12px 16px 4px}
.hhead h2{flex:1;font:600 15px/1.3 var(--wm-title);letter-spacing:-.3px}
.live{display:inline-flex;align-items:center;gap:6px;color:var(--wm-muted);font-size:12px}
.live i{width:6px;height:6px;border-radius:50%;background:#22c55e}
.stp{display:inline-flex;align-items:center;padding:1px 7px;border-radius:4px;font-size:11.5px;font-weight:500;white-space:nowrap;text-decoration:none}
a.stp:hover{filter:brightness(1.2)}
.stp.main{background:var(--wm-pos-bg);color:var(--wm-pos)}
.stp.backup,.stp.testing{background:rgba(180,83,15,.18);color:#e8915b}
:root[data-theme=light] .stp.backup,:root[data-theme=light] .stp.testing{color:#b4530f}
.stp.no_backup{background:var(--wm-neutral-bg);color:var(--wm-neutral)}
.jt tr.onbk td{background:rgba(180,83,15,.09)}
.jt tr.onbk td:first-child{box-shadow:inset 2px 0 0 #b4530f}
.swday{padding:12px 16px 6px;color:var(--wm-subtle);font:400 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
.what{display:inline-flex;align-items:center;padding:1px 7px;border-radius:4px;font-size:11.5px;font-weight:500;white-space:nowrap}
.what.trip{background:var(--wm-warn-bg);color:var(--wm-warn)}
.what.close{background:var(--wm-pos-bg);color:var(--wm-pos)}
.what.force_close{background:var(--wm-neutral-bg);color:var(--wm-neutral)}
.what.extend{background:var(--wm-neg-bg);color:var(--wm-neg)}
.hset{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px 16px;padding:4px 16px 16px}
.unit{display:flex;align-items:center;gap:6px}
.unit .in{width:84px;font-variant-numeric:tabular-nums}
.unit small{color:var(--wm-muted);font-size:12px}
.modes{display:inline-flex;gap:2px;padding:2px;background:var(--wm-sunken);border:1px solid var(--wm-b);border-radius:7px}
.modes button{height:26px;padding:0 10px;background:none;border:0;border-radius:5px;color:var(--wm-subtle);font:400 12.5px Geist,sans-serif}
.modes button.on{background:var(--wm-card);color:var(--wm-fg);box-shadow:0 0 0 1px var(--wm-b)}

/* Keys: one row per service */
.svc{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--wm-b-row)}
.svc:last-child{border-bottom:0}
.svc .sn{flex:1;min-width:0}
.svc .sn b{display:flex;align-items:center;gap:8px;font-weight:500}
.svc .sn small{display:block;margin-top:2px;color:var(--wm-muted);font-size:12px}
.svc .sa{display:flex;align-items:center;gap:6px}
.svc code{color:var(--wm-muted);font-size:12px}

@media(max-width:960px){
  body[data-app=webmaster] .rail{top:auto;bottom:0;width:auto;right:0;flex-direction:row;padding:4px}
  body[data-app=webmaster] .rail:hover{width:auto;box-shadow:none}
  body[data-app=webmaster] .rl{display:none}
  body[data-app=webmaster] .fbody{padding-left:0;padding-bottom:56px}
  body[data-app=webmaster] .gbar{grid-template-columns:auto 1fr auto}
  .cat{grid-template-columns:1fr}
  .clist{position:static;max-height:none}
  .hgrid{grid-template-columns:110px minmax(0,1fr) 64px}
  .fgrid{grid-template-columns:1fr}
}
body[data-app=webmaster] .in.auto{width:auto;min-width:0;margin:0}
body[data-app=webmaster] .tright .in.auto,body[data-app=webmaster] .hhead .in.auto{height:28px;min-height:28px;padding-top:0;padding-bottom:0}
body[data-app=webmaster] .subin h1{overflow-wrap:anywhere}

/* The (i) and warning triangle: small and dim until hovered; their words in a tooltip large enough to read */
body[data-app=webmaster] .ib{width:20px;height:20px;margin-left:4px;color:var(--wm-muted);opacity:.6;vertical-align:middle;border-radius:50%}
body[data-app=webmaster] .ib:hover,body[data-app=webmaster] .ib[aria-expanded=true]{opacity:1;color:var(--wm-fg);background:var(--wm-hover)}
body[data-app=webmaster] .ib.warn{color:var(--wm-warn);opacity:1}
body[data-app=webmaster] .ib.warn:hover,body[data-app=webmaster] .ib.warn[aria-expanded=true]{color:var(--wm-warn);background:var(--wm-warn-bg)}
body[data-app=webmaster] .mpick .ib{flex:none;margin:0 -2px 0 0}
body[data-app=webmaster] .tleft>.ib{margin-left:6px}
body[data-app=webmaster] .itip{max-width:320px;padding:10px 13px;background:#f4f4f5;color:#18181b;border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.45);font-size:13.5px;line-height:1.5;font-weight:400;letter-spacing:0;text-transform:none}
:root[data-theme=light] body[data-app=webmaster] .itip{background:#18181b;color:#fafafa;box-shadow:0 12px 32px rgba(24,24,27,.22)}
body[data-app=webmaster] .lt{gap:4px}
body[data-app=webmaster] .jt td.jn b .ib{margin-left:2px}
body[data-app=webmaster] .chk .lt{color:var(--wm-fg2)}
.mpick{width:260px;min-width:0;max-width:none}
/* Phones: the section menu is one row that scrolls sideways, with whole names */
@media(max-width:720px){
  body[data-app=webmaster] .subnav{width:100%;border-right:0;border-bottom:1px solid var(--wm-b)}
  body[data-app=webmaster] .subin{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;padding:8px 10px;scrollbar-width:none}
  body[data-app=webmaster] .subnav a.nl,body[data-app=webmaster] .subnav button{flex:none;width:auto;min-height:34px;margin:0;white-space:nowrap}
  body[data-app=webmaster] .star{display:none!important}
  body[data-app=webmaster] .page{padding:14px 12px 72px}
  body[data-app=webmaster] .topbar{padding-right:8px}
}

/* Pinned pages can be dragged left and right: a line shows where the dragged one lands */
body[data-app=webmaster] .pin{position:relative;cursor:pointer}
body[data-app=webmaster] .pin.dragging{opacity:.4}
body[data-app=webmaster] .pin.dropl::before,body[data-app=webmaster] .pin.dropr::after{content:'';position:absolute;top:8px;bottom:8px;width:2px;border-radius:1px;background:var(--wm-blue)}
body[data-app=webmaster] .pin.dropl::before{left:-1px}
body[data-app=webmaster] .pin.dropr::after{right:-1px}

/* Spending: the filter bar above API calls, as in the Cluinn admin -------------------------------------------- */
body[data-app=webmaster] .page.wide{max-width:none}
.ftool{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
body[data-app=webmaster] .ftool .in{height:30px;min-height:30px;margin:0;padding-top:0;padding-bottom:0;font-size:12.5px}
body[data-app=webmaster] .ftool .fsearch{flex:1 1 220px;min-width:180px;max-width:340px}
body[data-app=webmaster] .ftool select.in.on,body[data-app=webmaster] .ftool .in.msel.on{border-color:color-mix(in srgb,var(--wm-blue) 60%,transparent);background-color:color-mix(in srgb,var(--wm-blue) 9%,var(--wm-field));color:var(--wm-fg)}
body[data-app=webmaster] .b.clearf{height:30px;border-color:color-mix(in srgb,var(--wm-blue) 60%,transparent);color:var(--wm-link);background:transparent}
body[data-app=webmaster] .b.clearf:hover:not(:disabled){background:var(--wm-blue);border-color:var(--wm-blue);color:#fff}
.fsum{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:2px 0 10px;color:var(--wm-fg2);font-size:12.5px;font-variant-numeric:tabular-nums}
.fsum b{color:var(--wm-fg);font-weight:600}
.fsum button.bd{cursor:pointer;border:0}
body[data-app=webmaster] .tb .r{text-align:right}
body[data-app=webmaster] .tb .nw{white-space:nowrap}
body[data-app=webmaster] .tb.calls td{padding-top:7px;padding-bottom:7px;font-size:12.5px;font-variant-numeric:tabular-nums}
body[data-app=webmaster] .tb.calls tr.failed td{background:color-mix(in srgb,var(--wm-neg) 5%,transparent)}
body[data-app=webmaster] .tb th.sortable{padding:0}
body[data-app=webmaster] .tb th.sortable button{display:inline-flex;align-items:center;gap:4px;width:100%;padding:8px;background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
body[data-app=webmaster] .tb th.sortable.r button{justify-content:flex-end}
body[data-app=webmaster] .tb th.sortable:first-child button{padding-left:16px}
body[data-app=webmaster] .tb th.sortable:hover,body[data-app=webmaster] .tb th.sortable.on{color:var(--wm-fg)}
.sarr{opacity:.45;font-size:10px}.on>button>.sarr{opacity:1}
.whoc{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sitec{white-space:nowrap}
.pills{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
/* A call's result as a plain word after a small coloured dot (Spending › Calls): quieter than a pill in a long list */
.sdot{display:inline-flex;align-items:center;gap:7px;color:var(--wm-fg2)}
.sdot::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--wm-neutral)}
.sdot.ok::before{background:var(--wm-pos)}.sdot.warn::before{background:var(--wm-warn)}.sdot.bad{color:var(--wm-neg)}.sdot.bad::before{background:var(--wm-neg)}
h2 .pills{margin-left:8px}
.cost.zero{color:var(--wm-muted)}

/* A model's name in a coloured chip of its own (dim, background only), so a long list is scanned by colour */
.mcell{display:inline-flex;align-items:center;min-width:0;max-width:100%}
.mcell .vp{margin-left:6px}
.mc{display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:10px;background:var(--wm-neutral-bg);color:var(--wm-fg2);font:400 11.2px/1 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}
.mc[data-tint="0"]{background:rgba(59,130,246,.15)}.mc[data-tint="1"]{background:rgba(234,179,8,.15)}.mc[data-tint="2"]{background:rgba(20,184,166,.15)}
.mc[data-tint="3"]{background:rgba(236,72,153,.15)}.mc[data-tint="4"]{background:rgba(132,204,22,.14)}.mc[data-tint="5"]{background:rgba(99,102,241,.17)}
.mc[data-tint="6"]{background:rgba(249,115,22,.15)}.mc[data-tint="7"]{background:rgba(6,182,212,.15)}.mc[data-tint="8"]{background:rgba(168,85,247,.16)}
.mc[data-tint="9"]{background:rgba(34,197,94,.14)}.mc[data-tint="10"]{background:rgba(139,92,246,.16)}.mc[data-tint="11"]{background:rgba(14,165,233,.15)}

/* Columns: a list of ticks under its button */
body[data-app=webmaster] .pop.colpop{position:fixed;right:auto;width:210px;max-height:none;padding:6px;z-index:90;box-shadow:var(--shadow)}
.cph{display:flex;align-items:center;justify-content:space-between;min-height:28px;padding:0 6px 4px}
.cph b{font-weight:500;font-size:12.5px}
body[data-app=webmaster] .colpg{display:flex;align-items:center;gap:9px;width:100%;min-height:30px;padding:0 6px;background:none;border:0;border-radius:4px;color:var(--wm-fg2);font:400 13px/1 Geist,sans-serif;text-align:left;cursor:pointer}
body[data-app=webmaster] .colpg:hover{background:var(--wm-hover);color:var(--wm-fg)}
body[data-app=webmaster] .colpg .cbx{width:15px;height:15px;border-radius:4px;pointer-events:none}
/* A filter dropdown of our own (Spending › API calls): the button looks like every other dropdown; its panel is a list of ticks, several at once */
body[data-app=webmaster] .in.msel{display:inline-flex;align-items:center;max-width:220px;min-width:96px;padding-right:30px;background-color:var(--wm-card);background-image:var(--select-arrow);background-repeat:no-repeat;background-position:right 9px center;background-size:14px;color:var(--wm-fg);font-family:inherit;text-align:left;cursor:pointer}
.msel>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-app=webmaster] .pop.fpop{width:300px}
.fpop .vp{margin-left:auto;padding:0 4px;font-size:9px;line-height:13px} /* a model's service, small, at the far right */
.fpop .cph .fall{display:flex;gap:2px}
body[data-app=webmaster] .fpop .colpg{justify-content:flex-start}
.fpl{max-height:320px;overflow:auto}
body[data-app=webmaster] .fpop .fpf{width:100%;height:30px;min-height:30px;margin:0 0 4px;font-size:12.5px}
.fpw{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fck{display:inline-flex;align-items:center;justify-content:center;flex:none;width:15px;color:var(--wm-fg)}
.fpn{padding:8px 6px;color:var(--wm-muted);font-size:12.5px}

/* A call's details, in a window */
.kvs{display:grid;grid-template-columns:1fr;margin:4px 0 6px;border-top:1px solid var(--wm-b-row)}
.kv{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid var(--wm-b-row);font-size:13px}
.kv span{color:var(--wm-muted)}
.kv b{font-weight:500;color:var(--wm-fg);text-align:right;overflow-wrap:anywhere}

/* Limits and the month's meter */
.spendlim{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:12px}
.spendlim>div:first-child{flex:1;min-width:0;max-width:520px}
.spendlim .meter{margin-top:8px}
.page>.sh:first-child+.spendlim{margin-top:0}
body[data-app=webmaster] .capin .in.num{width:84px}
.limc{min-width:180px}
.limc .meter{max-width:220px;margin-bottom:4px}
.warnt{color:var(--wm-warn)}
.sharec{min-width:120px}
.sharec .meter{display:inline-block;width:80px;margin-right:8px;vertical-align:middle}
.vp.brevo{background:rgba(11,153,108,.12);color:#3fbf8f;border-color:rgba(63,191,143,.3)}:root[data-theme=light] .vp.brevo{color:#0b7a55}