/* Tim Studio on the panel's density: a calm base, one accent per screen, black means action, Onest and JetBrains Mono.
   Gaps 12px, card padding 12–16px, controls 32px (36–44px on a phone, never under 24px), labels 11px, card radius 16px,
   sidebar 216px, 64px when narrow. Explanations live in ⓘ tips, not on the screen. */
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:400 500; font-display:swap; src:url(fonts/jetbrains-mono-cyrillic.woff2) format("woff2"); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:400 500; font-display:swap; src:url(fonts/jetbrains-mono-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Onest"; font-style:normal; font-weight:300 600; font-display:swap; src:url(fonts/onest-cyrillic.woff2) format("woff2"); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family:"Onest"; font-style:normal; font-weight:300 600; font-display:swap; src:url(fonts/onest-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Onest"; font-style:normal; font-weight:300 600; font-display:swap; src:url(fonts/onest-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --bg:#f6f5f2; --surface:#fff; --surface-inset:#f1f0ec; --surface-raised:#fff; --selected:#ebe9e4; --line:#e7e5e0; --line-strong:#d4d1ca;
  --ink:#141414; --ink-2:#4f4d48; --ink-3:#6b6862; --action:#141414; --on-action:#fff;
  --accent:#b84e27; --on-accent:#fff; --accent-soft:#f6e5dc; --accent-ink:#9a3f1e;
  --positive:#286b42; --positive-soft:#e2f0e6; --negative:#b33a36; --negative-soft:#f7e3e1; --warning:#8a5d00; --warning-soft:#faefd3; --info:#2f5fb8; --info-soft:#e3eaf8;
  --data-2:#5f8a72; --data-3:#b8913a; --data-4:#6a84ab; --data-5:#a77a91; --data-neutral:#cfccc5; --data-ghost:#eeece7;
  --focus:#2f5fb8; --veil:rgba(246,245,242,.6);
  --shadow-card:0 1px 2px rgba(20,20,20,.04),0 6px 20px rgba(20,20,20,.04);
  --shadow-pop:0 2px 6px rgba(20,20,20,.06),0 16px 40px rgba(20,20,20,.12);
  --shadow-control:0 1px 2px rgba(20,20,20,.05);
  --glass:rgba(255,255,255,.72); --glass-glint:rgba(255,255,255,.7);
  --sans:Onest,"Helvetica Neue",Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --gap:12px; --pad:12px; --pad-lg:16px; --r-card:16px; --r-in:6px; --r-ctl:10px; --control:32px; --side:216px; --rail:64px; --gutter:24px; --content:1856px;
  --fs-small:12px; --fs-label:11px; --ease:cubic-bezier(.2,.8,.2,1); --hero-bg:#141414;
  --page-ink:var(--ink); --page-ink-2:var(--ink-2); --page-ink-3:var(--ink-3); --page-line:var(--line); --page-line-strong:var(--line-strong); --page-neutral:var(--data-neutral); --page-ghost:var(--data-ghost); --page-surface:var(--surface); --page-inset:var(--surface-inset); --page-accent:var(--accent); --page-positive:var(--positive); --page-positive-soft:var(--positive-soft); --page-negative:var(--negative); --page-negative-soft:var(--negative-soft); --page-dial-m:var(--ink-3);
  /* the names the older page rules and the server-drawn charts use */
  --card:var(--surface); --text:var(--ink); --muted:var(--ink-3); --radius:var(--r-card);
  --ok:var(--positive); --ok-bg:var(--positive-soft); --warn:var(--warning); --warn-bg:var(--warning-soft); --bad:var(--negative); --bad-bg:var(--negative-soft);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#0e0e0e; --surface:#161616; --surface-inset:#1e1e1e; --surface-raised:#1f1f1f; --selected:#262626; --line:#262626; --line-strong:#3a3a3a;
  --ink:#f2f1ee; --ink-2:#b3b0aa; --ink-3:#96938d; --action:#f2f1ee; --on-action:#141414;
  --accent:#ec7f52; --on-accent:#141414; --accent-soft:#33211a; --accent-ink:#f19a72;
  --positive:#5cc287; --positive-soft:#163020; --negative:#ef7d78; --negative-soft:#3a1b1a; --warning:#e6b450; --warning-soft:#372b10; --info:#86abf2; --info-soft:#18233a;
  --data-2:#8fbea2; --data-3:#e0c272; --data-4:#a0b8dc; --data-5:#d7a9c0; --data-neutral:#3d3d3d; --data-ghost:#1d1d1d;
  --focus:#86abf2; --veil:rgba(14,14,14,.6);
  --shadow-card:none; --shadow-pop:0 16px 48px rgba(0,0,0,.6); --shadow-control:none;
  --glass:rgba(31,31,31,.72); --glass-glint:rgba(255,255,255,.08); --hero-bg:#000;
  color-scheme:dark;
} }
:root[data-theme="dark"] {
  --bg:#0e0e0e; --surface:#161616; --surface-inset:#1e1e1e; --surface-raised:#1f1f1f; --selected:#262626; --line:#262626; --line-strong:#3a3a3a;
  --ink:#f2f1ee; --ink-2:#b3b0aa; --ink-3:#96938d; --action:#f2f1ee; --on-action:#141414;
  --accent:#ec7f52; --on-accent:#141414; --accent-soft:#33211a; --accent-ink:#f19a72;
  --positive:#5cc287; --positive-soft:#163020; --negative:#ef7d78; --negative-soft:#3a1b1a; --warning:#e6b450; --warning-soft:#372b10; --info:#86abf2; --info-soft:#18233a;
  --data-2:#8fbea2; --data-3:#e0c272; --data-4:#a0b8dc; --data-5:#d7a9c0; --data-neutral:#3d3d3d; --data-ghost:#1d1d1d;
  --focus:#86abf2; --veil:rgba(14,14,14,.6);
  --shadow-card:none; --shadow-pop:0 16px 48px rgba(0,0,0,.6); --shadow-control:none;
  --glass:rgba(31,31,31,.72); --glass-glint:rgba(255,255,255,.08); --hero-bg:#000;
  color-scheme:dark;
}
@media (min-width:1280px) { :root { --gutter:32px; } }

* { box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 13px/18px var(--sans); }
h1 { font-size:22px; line-height:28px; font-weight:600; letter-spacing:-.01em; margin:0 0 8px; text-wrap:pretty; }
h2 { font-size:13px; line-height:18px; font-weight:600; margin:0 0 8px; }
h3 { font-size:13px; line-height:18px; font-weight:500; }
p { margin:0 0 8px; }
a { color:var(--accent-ink); }
strong,b { font-weight:600; }
dd,td.num,.num { font-variant-numeric:tabular-nums; }
.mono { font-family:var(--mono); font-size:11px; line-height:16px; font-variant-numeric:tabular-nums; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
h1:focus { outline:none; }
.ico { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; display:block; }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; background:var(--ink-3); }
.dot.ok { background:var(--positive); } .dot.bad { background:var(--negative); } .dot.wait { background:var(--warning); }
.meter { height:4px; border-radius:2px; background:var(--data-ghost); overflow:hidden; margin-top:4px; }
.meter i { display:block; height:100%; background:var(--ink); border-radius:2px; }

/* ——— The frame: sidebar on a computer, a glass bottom menu on a phone ——— */
.app { display:grid; grid-template-columns:var(--side) minmax(0,1fr); min-height:100dvh; max-width:1920px; margin:0 auto; }
.app-main { min-width:0; }
main { container:main/inline-size; padding:12px max(var(--gutter),env(safe-area-inset-right,0px)) 32px max(var(--gutter),env(safe-area-inset-left,0px)); }
.bare main { padding:12px 16px; min-height:100dvh; display:flex; flex-direction:column; justify-content:center; container:none; }
.side { position:sticky; top:0; z-index:20; height:100dvh; padding:12px; display:flex; flex-direction:column; gap:2px; border-right:1px solid var(--line); }
.side a,.tabbar a,.sheet a,.pop a { text-decoration:none; }
.side nav { flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:none; display:flex; flex-direction:column; gap:2px; background:linear-gradient(var(--bg) 40%,transparent) top/100% 24px no-repeat local,linear-gradient(transparent,var(--bg) 60%) bottom/100% 24px no-repeat local,linear-gradient(var(--line-strong),transparent) top/100% 8px no-repeat scroll,linear-gradient(transparent,var(--line-strong)) bottom/100% 8px no-repeat scroll; }
.side nav > * { flex:none; }
.side nav a { display:flex; align-items:center; gap:8px; height:32px; padding:0 8px; border-radius:var(--r-ctl); color:var(--ink-2); font-weight:500; white-space:nowrap; position:relative; transition:background-color .12s,color .12s; }
.side nav a:hover { background:var(--selected); color:var(--ink); }
.side nav a.active { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-control); outline:1px solid var(--line); outline-offset:-1px; }
.grp { font-size:11px; line-height:16px; color:var(--ink-3); padding:12px 8px 4px; }
.b { margin-left:auto; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:var(--negative); color:var(--on-action); font:500 11px/18px var(--mono); text-align:center; }
.b.warn { background:var(--warning-soft); color:var(--warning); }
.ws { display:flex; align-items:center; gap:8px; padding:4px; border-radius:var(--r-ctl); color:inherit; }
.ws:hover { background:var(--selected); }
.logo { width:28px; height:28px; border-radius:8px; background:var(--action); color:var(--on-action); display:grid; place-items:center; font-weight:600; font-size:12px; flex:none; }
.side .t { min-width:0; overflow:hidden; }
.side .t b,.side .t small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side .t b { font-weight:600; line-height:16px; }
.side .t small { font-size:11px; line-height:14px; color:var(--ink-3); }
.side-foot { flex:none; margin-top:auto; padding-top:12px; display:flex; flex-direction:column; gap:4px; }
.mini { padding:8px; border-radius:var(--r-ctl); border:1px solid var(--line); background:var(--surface); font-size:12px; line-height:16px; }
.mini .dot { width:6px; height:6px; margin-right:4px; vertical-align:1px; }
.mini small { display:block; font-size:11px; line-height:14px; color:var(--ink-3); }
.mini-r { display:flex; justify-content:space-between; gap:8px; color:var(--ink-2); }
.me { position:relative; }
.me > summary { display:flex; align-items:center; gap:8px; padding:4px; border-radius:var(--r-ctl); list-style:none; cursor:pointer; color:var(--ink); font-size:inherit; }
.me > summary::-webkit-details-marker { display:none; }
.me > summary:hover { background:var(--selected); }
.av { width:28px; height:28px; border-radius:50%; background:var(--surface-inset); color:var(--ink-2); display:grid; place-items:center; font:500 11px var(--mono); flex:none; }
.pop { position:absolute; left:0; bottom:calc(100% + 8px); z-index:30; width:248px; padding:8px; background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-pop); }
.pop a,.pop button,.more-r a,.more-r button,.sheet .pop-out { all:unset; box-sizing:border-box; display:flex; align-items:center; gap:8px; width:100%; min-height:32px; padding:0 8px; border-radius:var(--r-ctl); font-weight:500; color:var(--ink); cursor:pointer; }
.pop a:hover,.pop button:hover,.more-r a:hover,.more-r button:hover { background:var(--selected); }
.pop a:focus-visible,.pop button:focus-visible,.more-r a:focus-visible,.more-r button:focus-visible,.sheet .pop-out:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
.pop form { margin:0; }
.pop .pop-out,.sheet .pop-out { color:var(--negative); }
.pop-v { padding:4px 8px 0; font:400 11px/16px var(--mono); color:var(--ink-3); }
.pop-v a { all:unset; cursor:pointer; color:inherit; min-height:0; padding:0; }
.rail .app { grid-template-columns:var(--rail) minmax(0,1fr); }
.rail .side { padding:12px; align-items:center; }
.rail .side .t,.rail .side .grp,.rail .side .mini { display:none; }
.rail .side nav a { width:40px; justify-content:center; padding:0; }
.rail .side nav { gap:4px; margin-top:8px; padding:2px; }
.rail .side nav a .b { position:absolute; top:-2px; right:-2px; margin:0; }
.rail .ws,.rail .me > summary { justify-content:center; }
/* a short window: the links come first, so the small blocks step aside once the links no longer fit beside them */
@media (max-height:725px) { .side:has(a[href="/admin/service"]) .mini { display:none; } }
@media (max-height:589px) { .side .mini { display:none; } }
.tabbar { display:none; }
dialog.sheet { position:fixed; inset:auto 8px 8px; margin:0; width:auto; max-width:none; max-height:80dvh; overflow-y:auto; color:var(--ink); background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-pop); padding:4px 8px calc(8px + env(safe-area-inset-bottom,0px)); }
dialog.sheet[open] { animation:slideup .2s var(--ease) both; }
dialog.sheet::backdrop { background:var(--veil); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
@keyframes slideup { from { transform:translateY(16px); } to { transform:none; } }
.handle { width:48px; height:20px; margin:0 auto 4px; position:relative; touch-action:none; cursor:grab; }
.handle::before { content:""; position:absolute; left:8px; right:8px; top:8px; height:4px; border-radius:2px; background:var(--line-strong); }
.more-g { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.more-t { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; color:var(--ink); position:relative; min-width:0; }
.more-t:active { background:var(--selected); }
.more-t .ico { color:var(--ink-2); margin-bottom:2px; }
.more-t b { font-weight:500; line-height:18px; }
.more-t[aria-current] { border-color:var(--ink-3); }
.more-t .b { position:absolute; top:8px; right:8px; }
.more-r { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 8px; margin-top:4px; }
.sheet .more-r a,.sheet .more-r button,.sheet .pop-out { min-height:44px; }
.sheet form { margin:0; }
.tip { position:fixed; z-index:60; pointer-events:none; background:var(--surface-raised); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-pop); border-radius:var(--r-ctl); padding:6px 8px; font-size:12px; line-height:16px; max-width:260px; }
@media (max-width:859px) {
  .app,.rail .app { grid-template-columns:minmax(0,1fr); }
  .side { display:none; }
  main { padding-block:8px calc(88px + env(safe-area-inset-bottom,0px)); padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); }
  .bare main { padding-block:12px; }
  .tabbar { display:flex; position:fixed; left:max(12px,env(safe-area-inset-left,0px)); right:max(12px,env(safe-area-inset-right,0px)); bottom:calc(12px + env(safe-area-inset-bottom,0px)); height:56px; padding:4px; border-radius:999px; background:var(--glass); backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6); border:1px solid var(--line); box-shadow:var(--shadow-pop),inset 0 1px 0 var(--glass-glint); z-index:10; }
  .tabbar a,.tabbar button { all:unset; box-sizing:border-box; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:999px; font-size:11px; line-height:14px; font-weight:500; color:var(--ink-2); position:relative; cursor:pointer; }
  .tabbar a:focus-visible,.tabbar button:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
  .tabbar .on { background:var(--surface-raised); color:var(--ink); box-shadow:var(--shadow-control); }
  .tabbar .b { position:absolute; top:2px; left:calc(50% + 4px); margin:0; min-width:14px; height:14px; padding:0 3px; font-size:9px; line-height:14px; }
  input[type=text],input[type=password],input[type=email],input[type=date],input[type=tel],input[type=number],textarea,select { min-height:40px; font-size:16px; }
  button,.button { min-height:36px; }
}

/* ——— Common pieces ——— */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:var(--pad); margin:0 0 var(--gap); }
.card > :last-child { margin-bottom:0; }
.card.narrow { width:min(420px,100%); margin:0 auto; padding:var(--pad-lg); }
.card.narrow form > button[type=submit] { width:100%; min-height:44px; }
.card.danger { border-color:var(--negative); }
fieldset { border:0; border-top:1px solid var(--line); margin:0 0 12px; padding:8px 0 0; }
fieldset:first-child { border-top:0; }
legend { font-weight:600; font-size:13px; padding-right:8px; }
.field { margin:0 0 12px; }
label { display:block; font-size:12px; line-height:16px; color:var(--ink-2); margin-bottom:4px; }
.check label { font-size:13px; line-height:18px; color:var(--ink); display:flex; gap:8px; align-items:flex-start; }
input[type=text],input[type=password],input[type=email],input[type=date],input[type=tel],input[type=number],textarea,select { width:100%; font:inherit; color:var(--ink); min-height:var(--control); padding:4px 8px; border:1px solid var(--line-strong); border-radius:var(--r-ctl); background:var(--surface); }
select { appearance:none; -webkit-appearance:none; padding-right:28px; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%,var(--ink-3) 60%,transparent 60%),linear-gradient(-45deg,transparent 50%,var(--ink-3) 50%,var(--ink-3) 60%,transparent 60%); background-size:5px 5px,5px 5px; background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%; background-repeat:no-repeat; }
input.short { max-width:140px; }
input:focus,textarea:focus,select:focus { outline:none; border-color:var(--focus); box-shadow:0 0 0 2px var(--info-soft); }
input[type=checkbox],input[type=radio] { accent-color:var(--action); width:16px; height:16px; margin:0; flex:none; }
.has-error input,.has-error textarea,.has-error select { border-color:var(--negative); }
.hint { color:var(--ink-3); font-size:12px; line-height:16px; margin:2px 0 0; }
.error { color:var(--negative); font-size:12px; line-height:16px; margin:2px 0 0; }
button,.button { font:inherit; font-weight:500; line-height:16px; cursor:pointer; border:1px solid transparent; background:var(--action); color:var(--on-action); border-radius:999px; min-height:var(--control); padding:4px 12px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:4px; transition:background-color .12s,border-color .12s,color .12s,transform .12s,opacity .12s; }
button:hover,.button:hover { opacity:.86; }
button:active,.button:active { transform:scale(.98); }
button.secondary,.button.secondary-button { background:var(--surface); border-color:var(--line-strong); color:var(--ink); }
button.secondary:hover,.button.secondary-button:hover { background:var(--selected); opacity:1; }
button:disabled { opacity:.5; cursor:not-allowed; }
button.danger { background:var(--negative-soft); color:var(--negative); }
button.link { background:none; border:0; color:var(--ink-3); padding:4px 2px; min-height:24px; font-weight:400; font-size:12px; }
.flash { border-radius:var(--r-ctl); padding:8px 12px; margin:0 0 8px; }
.flash a { color:inherit; text-decoration:underline; }
.flash.ok { background:var(--positive-soft); color:var(--positive); }
.flash.warning { background:var(--warning-soft); color:var(--warning); }
.flash.error { background:var(--negative-soft); color:var(--negative); }
.table-wrap { overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
tr:last-child td { border-bottom:0; }
th { color:var(--ink-3); font-weight:400; font-size:11px; line-height:16px; white-space:nowrap; }
th:first-child,td:first-child { padding-left:12px; } th:last-child,td:last-child { padding-right:12px; }
tbody tr { transition:background-color .12s; }
tbody tr:hover { background:var(--surface-inset); }
td a,li a,.workspace-list a { color:var(--ink); text-decoration:none; }
td a:hover,li a:hover,.workspace-list a:hover { text-decoration:underline; text-underline-offset:2px; }
td.actions form { margin:0; }
td.num,th.num { white-space:nowrap; }
.badge { display:inline-flex; align-items:center; height:18px; padding:0 6px; border-radius:999px; font:500 11px/16px var(--sans); background:var(--surface-inset); color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
.badge.on { background:var(--positive-soft); color:var(--positive); }
.badge.paused { background:var(--warning-soft); color:var(--warning); }
.badge.bad { background:var(--negative-soft); color:var(--negative); }
.tabs { display:flex; gap:0; padding:2px; margin:0 0 var(--gap); background:var(--surface-inset); border-radius:999px; overflow-x:auto; scrollbar-width:none; width:fit-content; max-width:100%; }
.tabs::-webkit-scrollbar { display:none; }
.tabs a { color:var(--ink-2); text-decoration:none; white-space:nowrap; font-size:12px; font-weight:500; line-height:28px; padding:0 12px; border-radius:999px; transition:background-color .12s,color .12s; }
.tabs a:hover { color:var(--ink); }
.tabs a.active { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-control); }
.filters a { color:var(--ink-2); text-decoration:none; white-space:nowrap; font-size:12px; font-weight:500; line-height:16px; padding:0 8px; min-height:28px; display:inline-flex; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:999px; transition:background-color .12s,color .12s,border-color .12s; }
.filters a:hover { border-color:var(--line-strong); color:var(--ink); }
.filters a.active { background:var(--action); border-color:var(--action); color:var(--on-action); }
/* Login on a phone: a dial without data, the promise of the product. */
.login-hero { display:none; }
@media (max-width:859px) {
  .login-hero { --ink:#f2f1ee; --action:#f2f1ee; --on-action:#141414; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; background:#141414; color:var(--ink); border-radius:var(--r-card); padding:16px 12px; margin:0 auto 8px; width:min(420px,100%); }
  .login-hero svg { display:block; margin-bottom:-52px; }
  .login-hero .tick { fill:var(--ink); }
  .login-hero .tick rect { animation:tksweep 3.2s linear infinite; animation-delay:calc(var(--i) * 100ms); }
  .login-hero b { font-size:18px; line-height:24px; }
  .login-hero span:last-child { font-size:12px; line-height:16px; color:#c9c6c0; max-width:240px; }
}
@keyframes tksweep { 0%,100% { opacity:.2; } 12% { opacity:1; } 40% { opacity:.2; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } }
/* Server-drawn charts lead with ink; the one accent of a screen stays for what is happening now. */
.viz:not(.viz-week),.chart,.vz-n,.vz-w { --accent:var(--ink); }

/* ——— Work pages: one markup, a phone stacks it, a computer lays it out in a grid ——— */
.day { display:flex; flex-direction:column; gap:8px; }
.day-head h1 { margin:0; font-size:20px; line-height:24px; }
.day-head p { margin:0; font-size:11px; line-height:16px; color:var(--ink-3); }
.day .card { margin:0; }
.day-alerts .flash:last-child { margin-bottom:0; }
.day-channels { margin:0; }
.hero-snap { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:-16px; padding-inline:16px; scroll-padding-inline:16px; scrollbar-width:none; }
.hero-snap::-webkit-scrollbar { display:none; }
.hero { --muted:var(--ink-3); --text:var(--ink); --card:var(--surface); --ok:var(--positive); --bad:var(--negative); --warn:var(--warning); --ink:#f2f1ee; --ink-2:#c9c6c0; --ink-3:#a09d97; --action:#f2f1ee; --on-action:#141414; --surface-inset:rgba(255,255,255,.1); --surface-raised:#1f1f1f; --selected:#262626; --warning:#e6b450; --warning-soft:#372b10; --accent-soft:#33211a; --accent-ink:#f19a72; --focus:#86abf2; --on-accent:#141414; --line:rgba(255,255,255,.12); --line-strong:rgba(255,255,255,.24); --data-neutral:#6a6762; --data-ghost:rgba(255,255,255,.08); --surface:var(--hero-bg); --accent:#ec7f52; --positive:#5cc287; --positive-soft:#163020; --negative:#ef7d78; --negative-soft:#3a1b1a; --dial-m:rgba(255,255,255,.46); --dial-plan:rgba(255,255,255,.6); --dial-track:0; flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always; min-width:0; position:relative; overflow:hidden; background:var(--hero-bg); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-card); padding:12px; display:flex; flex-direction:column; gap:8px; }
.hero-snap > .hero { min-height:252px; }
.hero-top { display:flex; align-items:center; gap:4px; font-size:12px; line-height:16px; color:var(--ink-2); min-height:16px; }
.hero-top .dots,.hero-top .badge,.hero-top .hero-reset { margin-left:auto; }
.hero .badge { background:var(--surface-inset); color:var(--ink-2); } .hero .badge.on { background:var(--positive-soft); color:var(--positive); } .hero .badge.bad { background:var(--negative-soft); color:var(--negative); }
.dots { display:inline-flex; gap:4px; flex:none; }
.dots i { width:6px; height:6px; border-radius:50%; background:var(--line-strong); }
.dots i.on { background:var(--ink); }
.dot.pl-telegram { background:var(--data-4); } .dot.pl-facebook { background:var(--data-5); }
.big { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.big .v { font-size:36px; line-height:40px; font-weight:300; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.big .v small { font-size:13px; letter-spacing:0; color:var(--ink-2); margin-left:4px; font-weight:400; }
.hero-note { font-size:12px; line-height:16px; color:var(--ink-3); margin-top:auto; }
.hero-reset { font-size:12px; line-height:16px; color:var(--accent); text-decoration:none; }
/* the dial */
.dial-wrap { position:relative; margin-inline:-4px; }
.dial { display:block; width:100%; height:auto; overflow:visible; }
.dial-h { font-family:var(--mono); font-size:11px; fill:var(--ink-3); }
.tk-hit { cursor:pointer; }
.tk.sel rect:first-child { filter:brightness(1.4); stroke:var(--ink); stroke-width:1.25; }
.tk-next { filter:drop-shadow(0 0 5px var(--accent)); }
.needle line,.needle circle { filter:drop-shadow(0 0 4px var(--accent)); }
.play .tk { animation:tkin .36s var(--ease) backwards; animation-delay:calc(var(--i) * 14ms); }
.play .needle { animation:needle .7s var(--ease) backwards; }
@keyframes tkin { from { opacity:.2; } to { opacity:1; } }
@keyframes needle { from { transform:rotate(-100deg); } }
.dial-c { position:absolute; left:48px; right:48px; top:56px; display:flex; flex-direction:column; align-items:center; text-align:center; color:var(--ink); text-decoration:none; }
.dial-n { display:flex; align-items:baseline; gap:4px; justify-content:center; }
.dial-n b { font-size:56px; line-height:56px; font-weight:300; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.dial-n small { font-size:15px; line-height:20px; color:var(--ink-2); }
.dial-s { font-size:12px; line-height:16px; color:var(--ink-2); }
.dial-next { font-size:12px; line-height:16px; font-weight:500; color:var(--accent); max-width:100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.hero-leg { display:flex; justify-content:space-between; margin-top:auto; gap:4px 8px; flex-wrap:wrap; font-size:11px; line-height:16px; color:var(--ink-2); }
.hero-leg i { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; }
.hero-leg i.ring-l { background:none; box-shadow:inset 0 0 0 1.25px var(--dial-plan); }
.hero-dial.auto::after { content:""; position:absolute; inset:auto 0 0; height:70%; pointer-events:none; background:radial-gradient(90% 90% at 50% 100%,rgba(236,127,82,.28),transparent 70%); }
/* the funnel */
.fn { display:grid; grid-template-columns:96px minmax(0,1fr) 64px; gap:12px 8px; align-items:center; font-size:12px; line-height:16px; }
.fn .tr { height:10px; border-radius:5px; background:var(--data-ghost); overflow:hidden; }
.fn .tr i { display:block; height:100%; background:var(--data-neutral); border-radius:5px; transform-origin:left; animation:gx .6s var(--ease) backwards; }
.fn .tr i.lead { background:var(--ink); } .fn .tr i.acc-bar { background:var(--accent); }
.fn .v { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.fn .v small { color:var(--ink-3); font-size:11px; }
@keyframes gx { from { transform:scaleX(0); } }
.viz-week { display:block; width:100%; height:auto; }
/* the three numbers */
.tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card); }
.tile { padding:6px 8px 8px 12px; color:inherit; text-decoration:none; box-shadow:-1px 0 0 var(--line); min-width:0; display:flex; flex-direction:column; }
.tile:active { background:var(--selected); }
.tile .l { font-size:11px; line-height:16px; color:var(--ink-2); white-space:nowrap; }
.tile .v { font-size:20px; line-height:24px; font-weight:300; letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tile .v small { font-size:12px; color:var(--ink-2); letter-spacing:0; font-weight:400; }
.tile .d { font-size:11px; line-height:16px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* the deck of decisions */
.deck-wrap { display:flex; flex-direction:column; gap:4px; min-width:0; }
.deck-head { display:flex; align-items:center; gap:4px; min-height:28px; }
.deck-head h2 { margin:0; }
.deck-head form { margin:0 0 0 auto; }
.auto-pill { all:unset; box-sizing:border-box; margin-left:auto; display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 4px 0 8px; font-size:12px; font-weight:500; color:var(--ink-2); border-radius:999px; position:relative; cursor:pointer; }
.auto-pill::after { content:""; position:absolute; inset:-8px 0; }
.auto-pill:focus-visible { outline:2px solid var(--focus); }
.sw { width:32px; height:18px; border-radius:999px; background:var(--data-neutral); position:relative; flex:none; }
.sw::before { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .2s var(--ease); }
.sw[data-on] { background:var(--accent); box-shadow:0 0 12px -2px var(--accent); } .sw[data-on]::before { transform:translateX(14px); }
.deck { position:relative; padding-bottom:12px; }
.deck-sh { position:absolute; left:8px; right:8px; bottom:6px; height:32px; border-radius:var(--r-card); background:var(--surface); border:1px solid var(--line); opacity:.8; }
.deck-sh.s2 { left:16px; right:16px; bottom:0; opacity:.5; }
.deck-card { position:relative; z-index:1; background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:12px; display:flex; flex-direction:column; gap:6px; touch-action:pan-y; overflow:hidden; transition:transform .22s var(--ease); --r:0; --l:0; }
.deck-card.drag { transition:none; cursor:grabbing; user-select:none; -webkit-user-select:none; }
.deck-card.fly { transition:transform .18s ease-in; }
.swipe { position:absolute; inset:0; display:flex; align-items:center; font-weight:600; padding:0 16px; pointer-events:none; z-index:2; border-radius:inherit; }
.sw-r { justify-content:flex-start; background:var(--positive-soft); color:var(--positive); opacity:var(--r); }
.sw-l { justify-content:flex-end; background:var(--negative-soft); color:var(--negative); opacity:var(--l); }
.deck-row { display:flex; align-items:center; gap:4px; font-size:12px; line-height:16px; color:var(--ink-3); min-width:0; }
.deck-row .exp,.deck-row .mod-src { margin-left:auto; }
.deck-row .num { white-space:nowrap; flex:none; }
.exp { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; color:var(--ink-2); font-variant-numeric:tabular-nums; flex:none; }
.exp.urg { color:var(--warning); font-weight:500; }
.exp-r { transform:rotate(-90deg); flex:none; }
.deck-title { color:var(--ink); text-decoration:none; font-size:15px; line-height:20px; font-weight:600; letter-spacing:-.005em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.deck-x { margin:0; font-size:12px; line-height:16px; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.deck-acts { display:flex; align-items:center; gap:8px; margin-top:2px; }
.deck-acts form { margin:0; }
.deck-acts .grow { flex:1 1 auto; min-width:0; }
.deck-acts .grow button,.deck-acts .button { width:100%; min-height:44px; font-size:14px; }
.rb { width:44px; height:44px; min-height:44px; padding:0; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line-strong); color:var(--ink-2); }
.rb:hover { background:var(--selected); opacity:1; }
.rb-x { color:var(--negative); }
.deck-more { list-style:none; margin:0; padding:0; display:none; }
.deck-more a { display:flex; justify-content:space-between; gap:8px; padding:6px 8px; border-radius:var(--r-ctl); color:inherit; text-decoration:none; }
.deck-more a:hover { background:var(--surface-inset); }
.trunc { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.grow { flex:1 1 auto; min-width:0; }
.deck-done { display:flex; align-items:center; gap:8px; padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card); }
.deck-done b { display:block; font-weight:600; } .deck-done span { display:block; font-size:12px; line-height:16px; color:var(--ink-2); }
.ok-c { width:40px; height:40px; border-radius:50%; background:var(--positive-soft); color:var(--positive); display:grid; place-items:center; flex:none; }
.ok-c.on { background:var(--accent-soft); color:var(--accent-ink); }
.spend-v { margin:4px 0; } .spend-v b { font-size:18px; font-weight:400; }
.day-spend .mini-r { font-size:12px; line-height:16px; margin-bottom:4px; }
.day-spend .table-wrap { margin-top:4px; }
.sheet-t { font-size:18px; line-height:24px; margin:0 4px 12px; }
.auto-list { margin:0 4px 12px; padding-left:16px; color:var(--ink-2); display:flex; flex-direction:column; gap:8px; }
.sheet-a { display:flex; gap:8px; margin:0 4px 4px; } .sheet-a button { min-height:44px; }
/* toast */
.toast { position:fixed; z-index:50; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:6px 6px 6px 16px; border-radius:999px; background:#1a1a1a; color:#fff; font-size:12px; line-height:16px; box-shadow:var(--shadow-pop); max-width:calc(100vw - 24px); animation:toastin .2s var(--ease) both; }
.toast[hidden] { display:none; }
@keyframes toastin { from { transform:translate(-50%,16px); } }
.toast form { margin:0; flex:none; }
.toast button { min-height:28px; padding:0 12px; background:#e3b94b; color:#141414; font-size:12px; }
/* moderation */
.stories { display:flex; gap:4px; }
.stories a { flex:1 1 0; height:6px; border-radius:3px; background:var(--data-ghost); position:relative; }
.stories a::after { content:""; position:absolute; inset:-12px 0; }
.stories i { display:block; height:100%; border-radius:3px; background:var(--data-neutral); }
.stories .on i { background:var(--ink); } .stories .urg i { background:var(--warning); }
.mod { display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.mod > * { min-width:0; max-width:100%; }
.mod-list { display:none !important; }
.mi { display:flex; flex-direction:column; gap:2px; padding:8px; border-radius:var(--r-ctl); color:inherit; text-decoration:none; }
.mi:hover { background:var(--surface-inset); } .mi[aria-current] { background:var(--selected); }
.mi b { font-weight:500; line-height:18px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mod-card { gap:8px; }
.mod-card .flash { margin:0; }
.mod-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 0; }
.mod-tabs input { position:absolute; opacity:0; pointer-events:none; }
.mod-tabs label { margin:0; text-align:center; font-size:12px; font-weight:500; line-height:28px; color:var(--ink-2); background:var(--surface-inset); cursor:pointer; }
.mod-tabs label:nth-of-type(1) { border-radius:999px 0 0 999px; } .mod-tabs label:nth-of-type(2) { border-radius:0 999px 999px 0; }
.mod-tabs input:checked + label { background:var(--action); color:var(--on-action); }
.mod-tabs input:focus-visible + label { outline:2px solid var(--focus); outline-offset:2px; }
.mod-tabs .tg-post { grid-column:1/-1; }
.mod-tabs .mod-o,#show-orig:checked ~ .mod-p { display:none; }
#show-orig:checked ~ .mod-o { display:flex; }
.tg-post { background:var(--surface-inset); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.tg-post .post-preview { background:none; padding:0; margin:0; font-size:14px; line-height:20px; overflow-wrap:anywhere; }
.tg-name { font-weight:600; font-size:12px; line-height:16px; color:var(--info); display:flex; gap:4px; align-items:center; }
.tg-text { font-size:14px; line-height:20px; white-space:pre-line; overflow-wrap:anywhere; }
.mod-news { margin:0; font-size:15px; line-height:20px; font-weight:600; overflow-wrap:anywhere; }
.mod-show { margin:0 0 8px; } .mod-show button { width:100%; }
.tg-meta { font:400 11px/16px var(--mono); color:var(--ink-3); text-align:right; }
.tool-t { font-size:11px; line-height:16px; color:var(--ink-3); }
.mod-right { display:contents; }
.mod-bar { order:5; position:sticky; bottom:calc(80px + env(safe-area-inset-bottom,0px)); z-index:5; display:flex; align-items:center; gap:8px; padding:8px; border-radius:999px; background:var(--glass); backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6); border:1px solid var(--line); box-shadow:var(--shadow-pop); }
.mod-bar form { margin:0; } .mod-bar .grow button { width:100%; min-height:44px; font-size:14px; }
.d-l { display:none; }
.mod-chips { flex-wrap:wrap; margin:0 0 8px; } .mod-chips form { margin:0; }
.chip-b { min-height:28px; padding:0 8px; font-size:12px; background:var(--surface); color:var(--ink-2); border:1px solid var(--line); }
.chip-b:hover { border-color:var(--line-strong); color:var(--ink); opacity:1; }
.mod-ask { display:flex; gap:4px; margin-bottom:8px; } .mod-ask input { flex:1 1 auto; min-width:0; }
.mod-src a { color:var(--ink-2); }
.sm-t { display:block; font-size:11px; line-height:16px; color:var(--ink-3); }
/* queue */
.q-next { display:flex; align-items:baseline; gap:8px; }
.q-t { font-size:44px; line-height:48px; font-weight:300; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.q-in { font-size:13px; line-height:18px; color:var(--accent); font-weight:500; }
.q-title { margin:0; font-weight:500; line-height:18px; }
.q-actions { display:flex; align-items:center; gap:8px; } .q-actions form { margin:0; } .q-actions button { width:100%; min-height:44px; }
.q-run { flex:none; margin-left:auto; font-size:11px; line-height:14px; color:var(--ink-3); text-align:right; }
.q-run b { display:block; font-size:13px; line-height:16px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }
.slots { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:2px; height:20px; }
.slots i { border-radius:4px; background:var(--data-ghost); }
.slots .sT,.slots .sM { background:var(--data-neutral); } .slots .sN { background:var(--accent); } .slots .sP { background:repeating-linear-gradient(45deg,var(--data-ghost) 0 3px,var(--line-strong) 3px 4px); } .slots .sE { background:none; outline:1px dashed var(--line); outline-offset:-1px; }
.slot-axis { display:flex; justify-content:space-between; font:400 11px/16px var(--mono); color:var(--ink-3); }
.ch-bars { display:flex; flex-direction:column; gap:8px; } .ch-bars:empty { display:none; }
.ch-bar { flex-direction:row; display:flex; align-items:center; gap:8px; padding:8px 12px; }
.ch-bar b { font-weight:500; } .ch-bar form { margin:0; }
.tl-g { padding:8px 12px 4px; font-size:11px; line-height:16px; color:var(--ink-3); background:var(--surface-inset); }
.card.flush { padding:0; overflow:hidden; }
.mr { display:flex; align-items:center; gap:8px; padding:8px 12px; min-height:56px; color:inherit; text-decoration:none; border-top:1px solid var(--line); }
.card.flush > .mr:first-child { border-top:0; } .mr .ico { color:var(--ink-3); }
.mr:active { background:var(--selected); }
.mr-t { flex:1 1 auto; min-width:0; display:block; }
.mr-t > b { display:block; font-weight:500; line-height:18px; }
.mr-t > span { display:block; font-size:11px; line-height:16px; color:var(--ink-3); }
.q-row > summary { display:grid; grid-template-columns:40px 10px minmax(0,1fr); gap:0 8px; align-items:start; padding:8px 12px; min-height:56px; position:relative; border-top:1px solid var(--line); cursor:pointer; list-style:none; color:inherit; font-size:inherit; }
.q-row > summary::-webkit-details-marker,.hrow-d > summary::-webkit-details-marker { display:none; }
.q-row > summary::before { content:""; position:absolute; left:64px; top:0; bottom:0; width:1.5px; background:var(--line); }
.q-row time,.hrow-d summary time { font:400 12px/18px var(--mono); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.tl-node { width:10px; height:10px; border-radius:50%; margin-top:4px; background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--line-strong); position:relative; z-index:1; }
.tl-node.approved { background:var(--ink); box-shadow:none; }
.tl-node.next { background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.q-menu { padding:0 12px 8px 72px; display:flex; flex-direction:column; gap:4px; }
.q-menu .hint a { color:var(--ink-2); }
.row-actions { flex-wrap:wrap; }
.row-actions button .ico { width:14px; height:14px; }
.swr { position:relative; overflow:hidden; touch-action:pan-y; --r:0; --l:0; }
.swr-fg { position:relative; z-index:1; background:var(--surface); transition:transform .2s var(--ease); }
.swr.drag .swr-fg { transition:none; }
.swr-bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 16px; font-size:12px; font-weight:600; }
.swr-bg span { display:inline-flex; align-items:center; gap:4px; } .swr-bg .ico { width:14px; height:14px; }
.swr-bg .sr { color:var(--positive); opacity:var(--r); } .swr-bg .sl { color:var(--negative); opacity:var(--l); }
.swr[data-dir="r"] .swr-bg { background:var(--positive-soft); } .swr[data-dir="l"] .swr-bg { background:var(--negative-soft); }
.tl-hint { padding:0 4px; margin:0; }
.warn-t { color:var(--warning); } .neg-t { color:var(--negative); }
.empty-t { margin:0; } .empty-t b { display:block; font-weight:500; }
/* history */
.hbar { display:flex; gap:2px; height:20px; }
.hbar a { min-width:6px; border-radius:4px; position:relative; transition:opacity .16s; transform-origin:left; animation:gx .6s var(--ease) backwards; }
.hbar a::after { content:""; position:absolute; inset:-12px 0; }
.hbar .off,.hleg .off i { opacity:.35; }
.hleg a[aria-current] .l { color:var(--ink); font-weight:500; }
.hleg { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
.hleg a { display:flex; flex-direction:column; min-width:0; padding:2px 0; color:inherit; text-decoration:none; }
.hleg .l { font-size:11px; line-height:16px; color:var(--ink-2); white-space:nowrap; display:flex; align-items:center; gap:4px; }
.hleg i { width:8px; height:8px; border-radius:2px; flex:none; }
.hleg b { font-size:22px; line-height:28px; font-weight:300; font-variant-numeric:tabular-nums; }
.hleg small { font-size:11px; line-height:14px; color:var(--ink-3); }
.alert { display:flex; gap:8px; align-items:center; padding:8px 12px; border-radius:var(--r-card); background:var(--negative-soft); font-size:12px; line-height:16px; }
.alert b { display:block; font-weight:600; font-size:13px; line-height:18px; } .alert .button { flex:none; }
.hist-form { display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px; margin:0; }
.hist-form > button { min-height:36px; display:none; }
.hist-more[open] ~ button { display:inline-flex; }
.search-in { display:flex; align-items:center; gap:4px; flex:1 1 200px; min-width:0; height:36px; padding:0 12px 0 8px; margin:0; border-radius:999px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-control); color:var(--ink-3); }
.search-in input[type=text] { border:0; outline:0; background:none; width:100%; min-width:0; min-height:0; padding:0; box-shadow:none; color:var(--ink); }
.search-in:focus-within { border-color:var(--focus); }
.hist-more { flex:none; min-width:0; max-width:100%; } .hist-more[open] { flex:1 1 100%; } .hist-more > summary { list-style:none; min-height:36px; } .hist-more > summary::-webkit-details-marker { display:none; } .hist-more > summary .ico { width:14px; height:14px; }
.hist-more > .filter-form { margin-top:8px; }
.hist-more .field { margin-bottom:0; }
.hrow { border-top:1px solid var(--line); }
.tl-g + .hrow { border-top:0; }
.hrow-d > summary { display:grid; grid-template-columns:40px minmax(0,1fr) 14px; gap:0 8px; align-items:start; padding:8px 12px; min-height:56px; cursor:pointer; list-style:none; color:inherit; font-size:inherit; }
.hrow-d > summary > .ico { width:14px; height:14px; color:var(--ink-3); margin-top:2px; transition:transform .12s; }
.hrow-d[open] > summary > .ico { transform:rotate(90deg); }
.hrow.dim .mr-t > b { color:var(--ink-2); font-weight:400; }
.hrow-b { padding:0 12px 8px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.hrow-b .take-form { flex-wrap:wrap; }
.hrow-b .hint { margin:0; } .hrow-b .hint a { color:var(--ink-2); }
.hrow .dup { padding:0 12px 8px 60px; }
.hrow .dup-of { max-width:none; }
.steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.steps li { display:flex; gap:8px; position:relative; padding-bottom:12px; margin:0; }
.steps li:last-child { padding-bottom:0; }
.steps li:not(:last-child)::before { content:""; position:absolute; left:9px; top:20px; bottom:0; width:1.5px; background:var(--ink); }
.sdot { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; flex:none; }
.sdot .ico { width:12px; height:12px; stroke-width:2; }
.d > .sdot { background:var(--ink); color:var(--bg); } .x > .sdot { background:var(--negative-soft); color:var(--negative); }
.ph { display:flex; justify-content:space-between; gap:8px; line-height:20px; } .ph time { font:400 11px/20px var(--mono); color:var(--ink-3); white-space:nowrap; }
.sb { font-size:12px; line-height:16px; color:var(--ink-3); }
.day .pager { margin:0; padding:0 4px; font-size:12px; }
.card.flush .mr:first-child { border-top:0; }
@container main (min-width:1000px) {
  .hero.sub { --ink:var(--page-ink); --ink-2:var(--page-ink-2); --ink-3:var(--page-ink-3); --line:var(--page-line); --line-strong:var(--page-line-strong); --data-neutral:var(--page-neutral); --data-ghost:var(--page-ghost); --surface:var(--page-surface); --surface-inset:var(--page-inset); --accent:var(--page-accent); --positive:var(--page-positive); --positive-soft:var(--page-positive-soft); --negative:var(--page-negative); --negative-soft:var(--page-negative-soft); --dial-m:var(--page-dial-m); background:var(--page-surface); box-shadow:var(--shadow-card); }
  .day:has(.hero-snap) { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:12px; align-items:start; }
  .day > * { grid-column:1/-1; min-width:0; }
  .day-head h1 { font-size:22px; line-height:28px; }
  .hero-snap { display:contents; }
  .hero-snap .dots { display:none; }
  .hero-snap > .hero { min-height:0; }
  .day-alerts { order:1; } .day-channels { order:2; }
  .hero-dial { order:3; grid-column:span 4; align-self:stretch; }
  .deck-wrap { order:4; grid-column:span 5; }
  .day:has(.hero-snap) > .tiles { order:5; grid-column:span 3; grid-template-columns:minmax(0,1fr); align-self:stretch; }
  .day-fail { order:6; } .hero-flow { order:7; } .hero-week { order:8; } .day-heat { order:9; } .day-spend { order:10; } .day-notes { order:11; }
  .day:has(.hero-snap) .tile { box-shadow:0 -1px 0 var(--line); padding:8px 12px; }
  .tile .v { font-size:22px; line-height:28px; }
  .deck-more { display:block; }
  .hero-flow,.hero-week,.day-heat { grid-column:span 4; }
  .day-heat .vz-w { display:none; } .day-heat .vz-n { display:block; }
  .hero-flow,.hero-week,.day-heat,.day-spend,.day-notes { align-self:stretch; }
  .day-spend { grid-column:span 7; } .day-notes { grid-column:span 5; }
  .day-heat .viz-heat { width:100%; max-width:none; }
  .mod { display:grid; grid-template-columns:264px minmax(0,1fr) 288px; gap:12px; align-items:start; }
  .mod-list { display:flex !important; flex-direction:column; gap:2px; }
  .stories { display:none; }
  .mod-right { display:flex; flex-direction:column; gap:12px; position:sticky; top:12px; }
  .mod-bar { position:static; order:0; flex-wrap:wrap; border-radius:var(--r-card); background:var(--surface); backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:var(--shadow-card); padding:12px; }
  .mod-bar .grow { order:-1; flex:1 1 100%; }
  .mod-bar form:not(.grow) { flex:1 1 100%; }
  .mod-bar .rb { width:100%; height:auto; min-height:32px; border-radius:999px; display:inline-flex; gap:4px; padding:4px 8px; font-size:12px; }
  .mod-bar .rb .ico { width:14px; height:14px; }
  .d-l { display:inline; }
  .ch-bars { flex-direction:row; flex-wrap:wrap; } .ch-bars .ch-bar { flex:1 1 280px; }
  .hero-next { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:8px 16px; }
  .hero-next .hero-top,.hero-next .slots,.hero-next .slot-axis { grid-column:2; } .hero-next .hero-top { grid-column:1/-1; }
  .hero-next .q-next { grid-column:1; } .hero-next .q-title { grid-column:2; grid-row:2; align-self:center; }
  .hero-next .q-actions { grid-column:1; grid-row:3 / span 2; }
  .hero-next .q-actions button { min-height:36px; }
  .hist-form { flex-wrap:nowrap; align-items:center; }
  .hist-form > button { display:inline-flex; min-height:32px; }
  .hist-more[open] { flex:0 1 auto; }
  .hist-more[open] > summary { display:none; }
  .hist-more > .filter-form { margin:0; gap:8px; flex-wrap:nowrap; }
  .hrow-b { padding-left:60px; }
  .hist-more > .filter-form .field { flex:0 0 150px; } .hist-more > .filter-form label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .hist-more > .filter-form select { min-height:32px; }
  .hero-hist { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:8px 16px; }
  .hero-hist .hero-top { grid-column:1/-1; }
}
@media (max-width:859px) { .toast { left:12px; right:12px; bottom:auto; top:calc(8px + env(safe-area-inset-top,0px)); transform:none; justify-content:space-between; max-width:none; } @keyframes toastin { from { transform:translateY(-16px); } } }

/* ——— Setup pages: lists with a picture on top, forms in tabs ——— */
.day-head.with-act,.day-head.with-back { display:flex; align-items:center; gap:8px; }
.day-head .button,.day-head > button { flex:none; }
.back-b { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--ink-2); flex:none; position:relative; }
.back-b::after { content:""; position:absolute; inset:-4px; }
.dials { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.dl { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:8px 4px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid var(--line); min-width:0; color:inherit; text-decoration:none; transition:background-color .12s; }
.dl:hover,.dl:active { background:rgba(255,255,255,.1); }
.arc { display:block; width:100%; height:auto; max-width:168px; overflow:visible; }
.arc .tk { animation:tkin .36s var(--ease) backwards; animation-delay:calc(var(--i) * 14ms); }
.arc-c { position:absolute; left:0; right:0; top:44px; display:flex; flex-direction:column; align-items:center; pointer-events:none; }
.arc-c b { font-size:28px; line-height:30px; font-weight:300; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.arc-c small { font-size:11px; line-height:14px; color:var(--ink-2); }
.dl .n { display:flex; align-items:center; justify-content:center; gap:4px; max-width:100%; font-size:12px; line-height:16px; font-weight:500; }
.dl .s { font-size:11px; line-height:16px; color:var(--ink-3); }
.dl.off .arc-c b { color:var(--ink-2); }
.ch-hero { flex-direction:row; align-items:center; gap:12px; }
.ch-dial { position:relative; width:112px; flex:none; }
.ch-dial .arc-c { top:28px; } .ch-dial .arc-c b { font-size:22px; line-height:24px; }
.ch-facts { display:flex; flex-direction:column; gap:0; font-size:12px; line-height:16px; color:var(--ink-2); }
.ch-facts .q { color:var(--ink-3); } .ch-facts form { margin:4px 0 0; } .ch-facts button { min-height:32px; }
.mr-b { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px; color:inherit; text-decoration:none; }
.mr > form { margin:0; flex:none; }
.mr-r { flex:none; display:flex; align-items:center; gap:4px; }
.sm-n { font-size:12px; color:var(--ink-2); }
.mr-wrap { flex-wrap:wrap; }
.mr-wrap .mr-t { flex:1 1 200px; }
.row-form { display:flex; gap:4px; align-items:center; margin:0; } .row-form select { width:auto; min-width:120px; }
.tl-h { padding:8px 12px 0; } .tl-h h2 { margin:0; }
.tl-empty { padding:8px 12px; margin:0; }
.pulse { display:flex; flex-direction:column; gap:6px; }
.pulse a { display:flex; flex-direction:column; gap:2px; color:inherit; text-decoration:none; border-radius:6px; }
.pl-t { display:flex; justify-content:space-between; gap:8px; font-size:12px; line-height:16px; color:var(--ink); }
.pl-t > span:last-child { color:var(--ink-3); white-space:nowrap; font-size:11px; }
.pl-t .st-error { color:var(--negative) !important; } .pl-t .st-silent { color:var(--warning) !important; }
.pl-c { display:grid; grid-template-columns:repeat(14,minmax(0,1fr)); gap:2px; height:10px; }
.pl-c i { border-radius:2px; background:var(--positive); opacity:.8; transform-origin:bottom; animation:cellin .3s var(--ease) backwards; animation-delay:calc(var(--i) * 14ms); }
.pl-c i.bad { background:var(--negative); opacity:1; box-shadow:0 0 6px var(--negative); }
.pl-c i.none { background:none; opacity:1; box-shadow:inset 0 0 0 1px var(--line-strong); }
@keyframes cellin { from { transform:scaleY(.2); } }
.fn-s { grid-template-columns:64px minmax(0,1fr) 36px; }
/* forms */
.form-page { display:flex; flex-direction:column; gap:8px; }
.form-main { min-width:0; } .form-main fieldset:last-of-type { margin-bottom:0; }
.form-side { display:contents; }
.form-side .card { margin:0; }
.ftabs { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; position:sticky; top:env(safe-area-inset-top,0px); z-index:6; margin-inline:-16px; padding:4px 16px; background:var(--bg); }
.ftabs::-webkit-scrollbar { display:none; }
.ftabs[hidden] { display:none; }
.ftabs button { flex:none; min-height:32px; padding:0 12px; font-size:12px; background:var(--surface); color:var(--ink-2); border:1px solid var(--line); position:relative; }
.ftabs button:hover { opacity:1; color:var(--ink); border-color:var(--line-strong); }
.ftabs button[aria-pressed="true"] { background:var(--action); border-color:var(--action); color:var(--on-action); }
.ftabs button.has-err::after { content:""; position:absolute; top:4px; right:4px; width:6px; height:6px; border-radius:50%; background:var(--negative); }
.form-page.one [data-panel]:not(.on) { display:none; }
.form-page.one .form-main:not(:has(.on)) { display:none; }
.form-main legend { margin-bottom:4px; }
.form-page.one .form-main fieldset { border-top:0; padding-top:0; margin-bottom:8px; }
.lbl { display:flex; align-items:center; gap:2px; margin-bottom:4px; min-height:16px; }
.lbl label { margin:0; }
.check .lbl { margin:0; min-height:24px; }
.ctl { min-width:0; }
.savebar { position:sticky; bottom:calc(80px + env(safe-area-inset-bottom,0px)); z-index:5; display:flex; align-items:center; justify-content:flex-end; gap:8px; margin:8px -4px -4px; padding:4px; }
.save-t { display:none; font-size:12px; line-height:16px; color:var(--ink-2); flex:1 1 auto; min-width:0; padding-left:12px; }
.dirty .savebar { background:var(--glass); backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6); border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow-pop); }
.dirty .save-t { display:block; }
.settings-grid { display:flex; flex-direction:column; gap:8px; }
.settings-grid .hero { flex:none; }
.mini-r { display:flex; justify-content:space-between; gap:8px; font-size:12px; line-height:16px; color:var(--ink-2); }
.hero .meter i { background:var(--ink); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.field.stack { margin-bottom:8px; }
@media (max-width:859px) { .day-head.with-act .button,.day-head.with-act > button { min-height:36px; } .mr .mr-r .viz-spark { width:56px; } }
@container main (min-width:1000px) {
  .form-page { display:grid; grid-template-columns:140px minmax(0,1fr) 300px; gap:12px; align-items:start; }
  .form-page > .ftabs { flex-direction:column; position:sticky; top:12px; margin:0; padding:0; background:none; overflow:visible; }
  .ftabs button { justify-content:flex-start; background:none; border-color:transparent; padding:0 8px; font-size:13px; }
  .ftabs button[aria-pressed="true"] { background:var(--surface); color:var(--ink); border-color:var(--line); }
  .form-side { display:flex; flex-direction:column; gap:12px; position:sticky; top:12px; }
  .form-main .field { display:grid; grid-template-columns:minmax(120px,240px) minmax(0,1fr); gap:0 12px; align-items:start; }
  .form-main .field .lbl { margin:6px 0 0; }
  .form-main .field.check { display:block; } .form-main .field.check .lbl { margin:0; }
  .form-main .field .ctl input,.form-main .field .ctl select,.form-main .field .ctl textarea { max-width:520px; }
  .form-main .field .ctl input.short { max-width:140px; }
  .savebar { bottom:8px; }
  .settings-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:12px; align-items:start; }
  .dials { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
  .pulse { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px; }
  .invite-form { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto; gap:8px 12px; align-items:end; }
  .invite-form h2 { grid-column:1/-1; margin:0; }
  .invite-form .field { margin:0; }
}

/* ——— Service pages: Аналитика, Клиенты, Сервис ——— */
.ana-top { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
.ana-top .grow { flex:1 1 240px; }
.ana-top .period-ctl { flex-wrap:wrap; }
.ana .tabs { margin:0; flex:none; }
.ana-snap { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:-16px; padding-inline:16px; scroll-padding-inline:16px; scrollbar-width:none; }
.ana-snap::-webkit-scrollbar { display:none; }
.ana-snap > .hero { min-height:252px; }
.ana-snap:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.hero .filters { margin:0; flex-wrap:nowrap; }
.hero figure { margin:0; }
.hero .viz { width:100%; }
.hero .viz-waterfall { max-width:none; max-height:none; }
.hero .viz-compare { max-height:none; }
.hero .hero-note { margin-top:0; }
.ana-cols { display:flex; flex-direction:column; gap:8px; }
.ana-cols .card { margin:0; }
.ranks { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.rk { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 8px; font-size:12px; line-height:16px; }
.rk .tr { grid-column:1/3; height:4px; border-radius:2px; background:var(--data-ghost); overflow:hidden; }
.rk .tr i { display:block; height:100%; background:var(--data-neutral); border-radius:2px; }
.rk:first-child .tr i { background:var(--ink); }
.burn { position:relative; height:16px; border-radius:8px; background:var(--data-ghost); }
.burn i { position:absolute; top:0; bottom:0; }
.b-f { left:0; background:var(--ink); border-radius:8px 0 0 8px; }
.b-p { background:repeating-linear-gradient(45deg,rgba(255,255,255,.26) 0 3px,rgba(255,255,255,.08) 3px 6px); border-radius:0 8px 8px 0; }
.b-m { position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--accent); border-radius:1px; box-shadow:0 0 6px var(--accent); }
.burn-l { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; font-size:11px; line-height:14px; color:var(--ink-3); }
.burn-l b { display:block; font-size:13px; line-height:18px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }
.segbar { display:flex; gap:2px; height:12px; }
.segbar i { display:block; border-radius:3px; min-width:4px; background:var(--data-neutral); }
.segbar i.s1 { background:var(--accent); } .segbar i.s2 { background:var(--dial-m); }
.exp-grid { display:flex; flex-direction:column; gap:8px; }
.add-card > summary { cursor:pointer; font-weight:500; min-height:32px; display:flex; align-items:center; }
.add-card form { margin-top:8px; }
.mr-time { flex:none; color:var(--ink-3); }
.mr-t code,.log-row code { display:block; font-size:11px; line-height:16px; color:var(--ink-3); overflow-wrap:anywhere; }
.muted { opacity:.6; }
.imp { width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:500; font-size:12px; background:var(--surface-inset); font-variant-numeric:tabular-nums; }
.imp.done { background:var(--positive-soft); color:var(--positive); }
.err-row .mr-t,.err-row .row-actions { flex-basis:100%; }
.err-row pre.sample { margin:4px 0; font-size:11px; line-height:16px; max-height:96px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
.queued-errors { margin:0; padding:4px 12px 8px 28px; font-size:12px; line-height:16px; }
.row-actions { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.row-actions form { margin:0; }
.mr .row-actions .reject-form summary,.work-task .reject-form summary { font-size:12px; line-height:32px; color:var(--ink-2); cursor:pointer; }
.qd { margin:0; } .qd > summary { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:28px; cursor:pointer; }
.qd .score { color:var(--ink-3); font-size:12px; margin:0; }
.qd ul { margin:0 0 8px; padding-left:18px; font-size:12px; line-height:16px; } .qd h3 { margin:8px 0 4px; font-size:12px; }
.work-task { display:flex; align-items:flex-start; gap:8px; } .work-task details summary { color:var(--ink-2); font-size:12px; }
.q-title { font-weight:500; line-height:18px; margin:0; }
.cl-row { flex-direction:column; align-items:stretch; gap:2px; }
.cl-top,.cl-sub { display:flex; align-items:center; gap:8px; min-width:0; }
.cl-sub { font-size:11px; line-height:16px; color:var(--ink-3); }
.cl-sub .num { color:var(--ink); font-weight:500; }
.cl-sub .meter,.cl-bud-m .meter { display:block; margin:0; }
.cl-sub .grow { display:block; }
.cl-top b { font-weight:500; } .cl-top .hint { font-weight:400; }
.dot.ok { background:var(--positive); } .dot.wait { background:var(--warning); }
.nw { white-space:nowrap; }
.cl-bud { display:flex; align-items:center; gap:8px; color:inherit; text-decoration:none; }
.cl-bud b { display:block; font-weight:500; } .cl-bud-m { flex:none; width:64px; } .cl-bud .hint { display:block; margin:0; }
.ev-row { display:flex; align-items:center; gap:8px; padding:4px 0; border-bottom:1px solid var(--line); }
.ev-row form { margin:0; flex:none; }
.ev-t { display:block; font-size:12px; line-height:16px; }
.ev-line { display:grid; grid-template-columns:72px minmax(0,1fr); gap:0 8px; font-size:12px; line-height:16px; padding:4px 0; border-bottom:1px solid var(--line); }
.ev-line time { color:var(--ink-3); }
.kv-row { display:flex; justify-content:space-between; gap:8px; font-size:12px; line-height:16px; padding:4px 0; border-bottom:1px solid var(--line); }
.form-col { display:flex; flex-direction:column; gap:8px; min-width:0; }
.form-col > .card,.form-col > div > .card { margin:0; }
.pay-form { padding:8px 12px 12px; border-top:1px solid var(--line); }
.pay-form h3 { margin:0 0 8px; font-weight:600; }
.pay-form .field { margin-bottom:8px; }
.reject-form form { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.reject-form form input { width:auto; flex:1 1 120px; }
.lamps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.lamp { display:flex; align-items:flex-start; gap:8px; min-width:0; }
.lamp i { width:8px; height:8px; border-radius:50%; margin-top:5px; flex:none; background:var(--positive); box-shadow:0 0 8px var(--positive); }
.lamp.bad i { background:var(--negative); box-shadow:0 0 8px var(--negative); }
.lamp.wait i { background:var(--warning); box-shadow:none; }
.lamp b { display:block; font-size:12px; line-height:18px; font-weight:500; }
.lamp small { display:block; font-size:11px; line-height:14px; color:var(--ink-3); }
.service-budget { display:flex; flex-direction:column; gap:4px; }
.lamp.offsite { font-size:12px; line-height:16px; margin-top:8px; color:var(--ink-2); }
.service-budget form { margin:4px 0 0; }
.hero-danger { color:var(--negative) !important; border-color:var(--negative) !important; background:none !important; width:100%; }
.search-form { display:flex; gap:8px; } .search-form input { flex:1 1 auto; min-width:0; }
.pal-page { display:flex; flex-direction:column; gap:8px; }
/* the search: a sidebar button, a round one beside the phone's menu, one window */
.search { display:flex; align-items:center; gap:8px; height:32px; padding:0 8px; margin-bottom:4px; border-radius:var(--r-ctl); background:var(--surface); border:1px solid var(--line); color:var(--ink-3); box-shadow:var(--shadow-control); font-size:12px; flex:none; }
.search:hover { color:var(--ink); border-color:var(--line-strong); }
.search .t { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search .k { margin-left:auto; display:flex; gap:2px; }
kbd { font:500 10px/14px var(--mono); padding:1px 4px; border-radius:4px; background:var(--surface-inset); border:1px solid var(--line); color:var(--ink-3); }
.rail .search { width:40px; justify-content:center; padding:0; } .rail .search .t,.rail .search .k { display:none; }
.tab-search { display:none; }
dialog.pal { width:min(620px,calc(100vw - 16px)); max-height:76vh; margin:12vh auto auto; padding:0; color:var(--ink); background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-pop); overflow:hidden; }
dialog.pal[open] { display:flex; flex-direction:column; animation:popin .16s var(--ease) both; }
dialog.pal::backdrop { background:var(--veil); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
@keyframes popin { from { opacity:0; transform:translateY(-6px) scale(.99); } }
.pal-q { display:flex; align-items:center; gap:8px; padding:12px; margin:0; border-bottom:1px solid var(--line); color:var(--accent); flex:none; }
.pal-q input { flex:1 1 auto; border:0; outline:0; box-shadow:none !important; background:none; min-width:0; min-height:24px; padding:0; font-size:15px; color:var(--ink); }
.pal-q input::-webkit-search-cancel-button { display:none; }
button.pal-x { background:none; border:0; min-height:24px; padding:0; color:var(--ink-2); display:grid; place-items:center; position:relative; flex:none; }
.pal-x .ico { display:none; }
#pal-body { overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:8px; min-height:64px; }
.pal-lb { display:block; font-size:11px; line-height:16px; color:var(--ink-3); padding:0 8px; }
.pal-i { all:unset; box-sizing:border-box; display:flex; align-items:center; gap:8px; width:100%; min-height:32px; padding:4px 8px; border-radius:var(--r-ctl); cursor:pointer; color:var(--ink); }
.pal-i .ico { color:var(--ink-3); flex:none; }
.pal-i .t { margin-left:auto; font-size:11px; color:var(--ink-3); white-space:nowrap; flex:none; }
.pal-i.on,.pal-i:hover { background:var(--selected); }
.pal-i:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
.pal-i mark { background:var(--accent-soft); color:var(--accent-ink); border-radius:2px; }
.pal-ans { display:flex; flex-direction:column; gap:8px; padding:8px; background:var(--surface-inset); border-radius:var(--r-ctl); }
.pal-ans p { margin:0; line-height:18px; } .pal-ans .pal-lb { padding:0; }
.pal-src { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.pal-go { align-self:flex-start; }
.pal-chips { display:flex; flex-wrap:wrap; gap:4px; padding:0 8px; }
.pal-ans .pal-chips { padding:0; }
.pal-chip { display:inline-flex; align-items:center; min-height:28px; padding:0 8px; border-radius:999px; border:1px solid var(--line-strong); color:var(--ink-2); font-size:12px; line-height:16px; text-decoration:none; background:var(--surface-raised); }
.pal-chip:hover { color:var(--ink); border-color:var(--ink-3); }
.pal-foot { display:flex; gap:12px; padding:8px 12px; font-size:11px; line-height:16px; color:var(--ink-3); background:var(--surface-inset); flex-wrap:wrap; flex:none; border-top:1px solid var(--line); }
.pal-foot > span { display:flex; gap:4px; align-items:center; } .pal-note { margin-left:auto; }
@media (max-width:859px) {
  .tabbar { right:calc(max(12px,env(safe-area-inset-right,0px)) + 56px + 8px); }
  .tabbar a,.tabbar button { font-size:10px; }
  .tab-search { display:grid; place-items:center; position:fixed; z-index:20; right:max(12px,env(safe-area-inset-right,0px)); bottom:calc(12px + env(safe-area-inset-bottom,0px)); width:56px; height:56px; border-radius:50%; background:var(--glass); backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6); border:1px solid var(--line); box-shadow:var(--shadow-pop); color:var(--ink); }
  dialog.pal { position:fixed; inset:8px; width:auto; max-width:none; max-height:none; height:auto; margin:0; }
  .pal-q input { font-size:16px; } .pal-foot { display:none; }
  .pal-x kbd { display:none; } .pal-x .ico { display:block; }
  button.pal-x { width:44px; height:44px; margin:-10px -8px -10px 0; }
  .pal-i { min-height:44px; }
  .ana-snap > .hero { flex:0 0 100%; }
  .ana .tabs { margin-inline:-16px; padding-inline:16px; background:none; border-radius:0; width:auto; max-width:none; }
  .ana .tabs a { background:var(--surface-inset); margin-right:4px; }
  .ana .tabs a.active { background:var(--action); color:var(--on-action); }
  .ana-top { flex-wrap:wrap; }
  .ana-top > .grow { flex-basis:100%; }
  .ana-top .period-ctl { flex:none; }
  .ana-top .period-ctl label,.ana-top .period-range { display:none; }
  .ana-top .period-ctl select { min-height:36px; }
  .ana-top .period-pop > summary { min-height:36px; }
  .ana-top .period-pop[open] { flex-basis:100%; }
  .row-actions button,.ev-row button { min-height:36px; }
}
@media (max-width:359px) { .tabbar a,.tabbar button { font-size:9px; } }
@container main (min-width:1000px) {
  .ana-top { flex-wrap:nowrap; }
  .ana .tabs { align-self:flex-start; }
  .ana-snap { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,5fr); gap:12px; overflow:visible; margin:0; padding:0; }
  .ana-snap > .hero { min-height:0; }
  .ana-snap .dots { display:none; }
  .ana-snap .vz-n { display:block; } .ana-snap .vz-w { display:none; }  /* three in a row: drawn at the phone's size, so the text keeps its size */
  .pulse-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px 16px; align-items:start; }
  .pulse-card > .page-head,.pulse-card > .hint { grid-column:1; }
  .pulse-card > .stats { grid-column:1; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .pulse-card > .chart-figure { grid-column:2; grid-row:1 / span 3; }
  .pulse-card .viz-compare { max-height:176px; width:100%; }
  .score-hero .dials { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .score-hero .dl { background:none; border:0; }
  .add-card form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; align-items:start; }
  .add-card form .flash,.add-card form .check { grid-column:1 / -1; }
  .add-card form > button { grid-column:1 / -1; justify-self:start; }
  .add-card .field { margin-bottom:8px; }
  .cl-row { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,2.6fr) minmax(0,1.5fr) minmax(0,1.6fr); gap:0 16px; align-items:center; min-height:44px; }
  .cl-sub .trunc { white-space:normal; overflow:visible; }
  .ana-cols { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:start; }
  .ana-cols.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .exp-grid { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:12px; align-items:stretch; }
  .exp-grid > .tiles { grid-template-columns:minmax(0,1fr); align-self:stretch; }
  .exp-grid > .tiles .tile { box-shadow:0 -1px 0 var(--line); padding:8px 12px; justify-content:center; }
  .ana-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .form-page > .form-col { grid-column:2; }
  .lamps { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .service-hero { flex-direction:row; align-items:center; gap:24px; }
  .service-hero .lamps { flex:3 1 0; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .service-budget { flex:2 1 0; }
  .token-charts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .new-client { max-width:800px; }
  .err-row .mr-t { flex:1 1 0; flex-basis:auto; } .err-row .row-actions { flex-basis:auto; }
  .mr.pay-row .mr-t { flex:1 1 200px; }
}

/* ——— Older page rules, replaced section by section as the pages are rebuilt ——— */
.lead { color: var(--muted); font-size: var(--fs-small); }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: var(--gap); }
.page-head h1 { margin: 0; }
.empty { color: var(--muted); background: var(--card); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 14px; text-align: center; font-size: var(--fs-small); }

/* Cards side by side where the screen allows; one column on a phone. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 var(--gap); align-items: start; }





.i { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 3px; border-radius: 50%; border: 1px solid currentColor; font: 600 9px/1 system-ui, sans-serif; font-style: normal; color: var(--muted); cursor: help; vertical-align: 1px; opacity: 0.8; }

.post-preview { background: var(--surface-inset); border-radius: 12px; padding: 12px; margin-top: 8px; white-space: pre-wrap; font-size: 13px; }
.htmx-indicator { display: none; color: var(--muted); margin-left: 8px; }
.htmx-request .htmx-indicator { display: inline; }
.back { margin: 0; }

.emoji-form { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: flex-end; margin-top: 8px; }
.emoji-form button { margin-bottom: 10px; }

/* Metric tiles: small grey label, the number, its change; many per row. */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px 10px; margin: 4px 0 0; }
.stats > div { min-width: 0; }
.stats dt { color: var(--ink-2); font-size: 11px; line-height: 16px; }
.stats dd { margin: 0; font-size: 22px; font-weight: 300; line-height: 28px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.stats .hint { font-size: var(--fs-label); font-weight: normal; line-height: 1.3; }
.token-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); }
.token-card .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.token-card .stats dd { font-size: 18px; line-height: 24px; }
.card ul { margin: 0; padding-left: 18px; }
.card li { margin: 2px 0; }
.card .table-wrap + .table-wrap { margin-top: 8px; }

/* Period and filter links: one low row of pills that scrolls sideways on a phone. */
.filters { display: flex; gap: 4px; margin: 0 0 var(--gap); overflow-x: auto; scrollbar-width: none; align-items: center; }
.filters::-webkit-scrollbar { display: none; }
.filter-form { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: flex-end; }
.filter-form .field { flex: 1 1 130px; }
.filter-form button { margin-bottom: 10px; }
.row-actions { display: flex; gap: 4px; }
.row-actions form { margin: 0; }
.take-form { display: flex; gap: 4px; align-items: center; }
.take-form select { width: auto; max-width: 14rem; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: var(--gap) 0; font-size: 13px; }

.workspace-list { list-style: none; padding: 0; margin: 0; }
.workspace-list li { padding: 6px 0; border-top: 1px solid var(--line); }
.workspace-list li:first-child { border-top: 0; }
.workspace-list form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.support-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.support-banner form { margin: 0; }


.card h3 { font-size: 0.85rem; margin: 10px 0 4px; }
.card .page-head { margin-bottom: 6px; }
.card .page-head h2 { margin: 0; }
.delta-line { font-size: var(--fs-label) !important; font-weight: 500 !important; }
.delta { color: var(--muted); }
.delta.good { color: var(--ok); }
.delta.bad { color: var(--bad); }
.chart-figure { margin: 0 0 var(--gap); }
.chart-figure figcaption { color: var(--muted); font-size: var(--fs-label); margin-bottom: 2px; }
.chart { display: block; width: 100%; height: auto; max-height: 220px; }

/* The period card: pills, the custom range behind a small link, the period in one small grey line. */
details summary { cursor: pointer; color: var(--accent-ink); font-size: 13px; }
details .table-wrap { margin-top: 6px; }

pre.sample { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-label); margin: 0; max-width: 32rem; }
details pre.sample { margin-top: 4px; }
/* History: a duplicate's badge opens the post it repeats. */
.dup > summary { list-style: none; display: inline-flex; align-items: center; gap: 3px; min-height: 24px; }
.dup > summary::-webkit-details-marker { display: none; }
.dup > summary::after { content: ""; width: 5px; height: 5px; margin: -3px 2px 0 3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.dup[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.dup-of { margin-top: 3px; font-size: var(--fs-small); line-height: 1.35; max-width: 340px; }
.dup-of .hint { display: block; }
.reject-form { margin-top: 4px; }
.reject-form form { margin-top: 4px; }
.queued-errors li { overflow-wrap: anywhere; }

/* Phone: only the main columns of a table (secondary ones carry class m-hide). */
@media (max-width: 600px) {
  .m-hide { display: none; }
  th, td { padding: 6px; }
}
@media (min-width: 1000px) {
  main.wide { max-width: 1240px; }
}


@media (max-width: 600px) {
}
/* A soft right edge on rows that scroll sideways, so it is clear there is more. */
@media (max-width: 600px) {
  .tabs, .filters { mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); padding-right: 16px; }
}
/* Phone: the ⓘ text as a strip at the bottom of the screen (never cut off by the screen edge); filters in one row. */
@media (max-width: 600px) {
  .filter-form .field { flex: 1 1 88px; margin-bottom: 8px; }
  .filter-form label { font-size: var(--fs-label); color: var(--muted); font-weight: normal; margin-bottom: 1px; }
  .filter-form button { margin-bottom: 8px; }
}

/* The last word of a label and its ⓘ stay on one line; the ⓘ is 15% smaller than at first. */
.nw { white-space: nowrap; }
.i { width: 12px; height: 12px; font-size: 8px; margin-left: 3px; }

/* Secondary buttons (in a page or card head, in table rows, «Добавить расход»): smaller than a form's main button. */
.button.secondary-button, .page-head .button, .page-head button, td.actions button, .row-actions button,
.take-form button, .mod-actions button, .workspace-list button, .support-banner button {
  min-height: 28px; padding: 3px 10px; font-size: 12px;
}
td.actions .take-form select { min-height: 28px; padding: 2px 6px; font-size: 12px; }

td.actions button, .row-actions button { white-space: nowrap; }
/* Token cards sit inside a card: no second big frame, three numbers per row where they fit. */
.card .token-card { padding: 8px 10px; margin: 0; }
.token-card .stats { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.token-card h3 { margin-top: 0; }

/* Data pictures (autopost/analytics/viz.py). */
.viz { display: block; height: auto; max-width: 100%; overflow: visible; }
.viz-spark { display: inline-block; width: 84px; height: 22px; vertical-align: middle; }
.viz-bars, .viz-funnel { max-width: 420px; }
.viz-waterfall { max-width: 460px; max-height: 140px; }
.viz-donut { max-width: 320px; }
.viz-heat { max-width: 380px; }
.viz-pulse { width: 100%; max-width: 420px; height: 34px; }

/* The ⓘ is a button (keyboard and screen readers reach it): plain looks, a 24px touch area around the 12px mark, full
   contrast. In a table head its tip opens as a strip at the bottom of the screen, where the table cannot clip it. */
button.i { all: unset; box-sizing: border-box; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; margin-left: 3px; border-radius: 50%; border: 1px solid currentColor; font: 600 8px/1 system-ui, sans-serif; color: var(--muted); cursor: help; vertical-align: 1px; }
button.i::before { content: ""; position: absolute; inset: -6px; }
button.i:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* «Динамика»: the switch sits in the card's head, the two charts lower than the period charts. */
.pulse-card .page-head { flex-wrap: wrap; }
.pulse-card .page-head .filters { margin: 0; }
.pulse-card .viz-compare { width: 100%; max-height: 119px; }  /* 30% lower than the 170px it had */
.pulse-card .chart-figure { margin: 0; }
.pulse-card .hint { margin: 4px 0 0; }

/* Two sizes of a picture (viz.both): the phone's under 1100px, the desktop's (more plot, text at its usual size) from
   1100px. The hidden one is display:none, so a screen reader reads one. */
.vz-w { display: none; }

/* Analytics: the title, the tabs and the period of the report; one row on a desktop. */
.period-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; }
.period-ctl label { display: inline; margin: 0; font-size: var(--fs-label); color: var(--muted); font-weight: 500; }
.period-ctl select { width: auto; min-height: 28px; padding: 2px 6px; font-size: 13px; }
.period-ctl .hint { margin: 0; }
.period-pop > summary { display: inline-flex; align-items: center; min-height: 26px; font-size: var(--fs-small); }
.period-pop > form { margin-top: 6px; }

/* Users, clients and the payments that run out: one strip of numbers (groups one under another on a phone). */
.strip .grp + .grp { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.strip .grp > h2 { font-size: 11px; color: var(--ink-3); font-weight: 400; margin: 0 0 4px; }
.strip .grp-wide p, .strip .grp-wide ul { margin: 0; font-size: var(--fs-small); }

/* «Работа сервиса»: the state of the sources is a chip in the card's head. */
.work-card .page-head { justify-content: flex-start; flex-wrap: wrap; gap: 6px 10px; }
.work-card .page-head h2 { margin: 0; }
.chip { font-size: var(--fs-label); border-radius: 99px; padding: 2px 8px; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
details.chip > summary { color: inherit; font-size: inherit; }
details.chip[open] { flex-basis: 100%; border-radius: 6px; padding: 6px 8px; }
details.chip ul { margin: 4px 0 0; padding-left: 18px; color: var(--text); font-size: var(--fs-small); }
.pulse-table > summary { font-size: var(--fs-small); }
.pulse-table[open] { flex-basis: 100%; order: 9; min-width: 0; }

/* Desktop (from 1100px): dense, every pixel of the first screen carries data. Margins from the screen's edge as on
   common sites: 24px, 32px from 1280px; the content is at most 1856px wide (the layout of a 1920px screen, the most
   common desktop), so on a wider screen the margins grow evenly. Gaps between blocks 10px, labels 11px. */
@container main (min-width: 1000px) {
  .vz-n { display: none; }
  .vz-w { display: block; }
  .stats { gap: 6px 10px; margin: 0; }
  .stats { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .stats dd { white-space: nowrap; }
  .page-head { margin-bottom: 6px; }
  .chart-figure { margin: 0; }
  .card-grid { align-items: stretch; }

  .period-ctl { margin-left: auto; flex-wrap: nowrap; }
  .period-ctl .hint { white-space: nowrap; }
  .period-pop { position: relative; flex: none; }
  .period-pop[open] > form { position: absolute; right: 0; top: 28px; z-index: 30; width: 520px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px; box-shadow: 0 6px 20px rgb(0 0 0 / 0.25); }
  .period-pop[open] > form .field { margin: 0; }
  .period-pop[open] > form button { grid-column: 1 / -1; }

  /* «Динамика»: the numbers in one row, two charts across the screen under them. */
  .pulse-card .page-head { gap: 12px; margin-bottom: 4px; }
  .pulse-card .page-head > :first-child { margin-right: auto; }
  .pulse-card .page-head h2 { margin: 0; }
  .pulse-card > .hint { margin: 2px 0 0; font-size: var(--fs-label); }

  .strip { display: grid; grid-template-columns: 3fr 4fr 2fr; padding: 8px var(--pad); }
  .strip .grp { padding: 0 14px; min-width: 0; }
  .strip .grp + .grp { border-top: 0; margin-top: 0; padding-top: 0; border-left: 1px solid var(--line); }
  .strip .grp:first-child { padding-left: 0; }
  .strip .stats { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); }

  .money-card > .stats { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }

  .work-card > .stats { grid-template-columns: repeat(9, minmax(0, 1fr)); }

  .charts-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
  .charts-card > h2, .charts-card > details { grid-column: 1 / -1; }
  .charts-card .chart { max-height: none; }

  .bottom-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .card-grid.bottom-row > .card { grid-column: auto; }

}
@container main (min-width: 1000px) and (max-width: 1300px) {
  .stats dd { font-size: 18px; line-height: 24px; }
  .work-card > .stats { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
}

/* The ⓘ: a 12px mark in a 24px button, so a finger can hit it (WCAG 2.2 target size). */
button.i { width:24px; height:24px; margin:-6px -4px -6px -2px; border:0; font-size:8px; }
button.i::before { inset:6px; border:1px solid currentColor; border-radius:50%; }