/* ============================================================================
 * DiSilence OS screens · THE LOOK
 * ----------------------------------------------------------------------------
 * One sheet. Its structure is re-made from Keystone's newer look (named values
 * first, then the frame, then the parts; a sidebar, a 60px top bar, flat cards on
 * a pale page, chips, side drawers), with its own values: a restrained neutral
 * palette and ONE accent, because no DiSilence brand file exists yet in the
 * company's brand folder. When one does, only section 1 changes.
 *
 * Light and dark: the device's setting by default (prefers-color-scheme); the
 * sun/moon button writes data-theme on <html>, which wins either way.
 *
 * Order: 1 named values · 2 base · 3 frame · 4 sidebar · 5 top bar · 6 page parts
 * · 7 lists · 8 record page · 9 boards · 10 home · 11 drawer · 12 sign-in · 13
 * toasts · 14 phone
 * ==========================================================================*/

/* ---- 1 · named values ------------------------------------------------------- */
:root{
  --fs-xs:12.5px; --fs-sm:13.5px; --fs-md:14.5px; --fs-lg:16px; --fs-xl:18px; --fs-2xl:22px; --fs-3xl:26px; --fs-kpi:32px;
  --lh-tight:1.2; --lh-snug:1.38; --lh-body:1.55;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  --r-xs:6px; --r-sm:9px; --r:12px; --r-lg:16px; --r-pill:999px;
  --rail-w:248px; --top-h:60px; --drawer-w:540px; --ctl-h:38px; --ctl-h-sm:30px; --page-max:1480px;
  --dur-1:120ms; --dur-2:220ms; --ease:cubic-bezier(.2,.8,.2,1);

  color-scheme:light;
  --page:#f4f5f7;   --well:#eceef2;   --panel:#ffffff; --panel-2:#f8f9fb; --panel-3:#eef0f4;
  --line:#e3e6eb;   --line-2:#d1d6dd; --line-3:#b3bac5;
  --txt:#14181f;    --txt-2:#394250;  --txt-3:#535d6c; --txt-4:#667080;
  --tint:#f0f2f5;
  --accent:#4b46d6; --accent-hover:#3e39bd; --on-accent:#ffffff; --accent-text:#3f3ac2; --accent-dim:#ecebfc; --accent-line:#8f8be8;
  --ok:#0d6a4f;  --ok-bg:#e1f3ea;  --ok-fill:#16a06f;
  --warn:#7a5009; --warn-bg:#faefd7; --warn-fill:#cf8a06;
  --bad:#b0281f;  --bad-bg:#fce7e4; --bad-fill:#dd4136;
  --info:#185d9f; --info-bg:#e3eefa; --info-fill:#2f80d1;
  --scrim:rgba(14,18,28,.44);
  --shadow-sm:0 1px 2px rgba(14,18,28,.05),0 1px 3px rgba(14,18,28,.04);
  --shadow:0 8px 24px rgba(14,18,28,.08);
  --shadow-lg:0 24px 56px rgba(14,18,28,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --page:#0e1014;   --well:#12151a;   --panel:#171a21; --panel-2:#1c2029; --panel-3:#242935;
    --line:#252a34;   --line-2:#313744; --line-3:#465061;
    --txt:#eef0f5;    --txt-2:#b9c0cc;  --txt-3:#9aa3b2; --txt-4:#8b95a5;
    --tint:#1d212b;
    --accent:#6c66f2; --accent-hover:#7d78f5; --on-accent:#ffffff; --accent-text:#a9a5ff; --accent-dim:#25244a; --accent-line:#6c66f2;
    --ok:#56d6ad;  --ok-bg:#12322a;  --ok-fill:#56d6ad;
    --warn:#f0bb52; --warn-bg:#382b11; --warn-fill:#f0bb52;
    --bad:#ff8f8f;  --bad-bg:#3f1a1d; --bad-fill:#ff8f8f;
    --info:#80b9ff; --info-bg:#152b44; --info-fill:#80b9ff;
    --scrim:rgba(0,0,0,.6);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 8px 24px rgba(0,0,0,.45);
    --shadow-lg:0 24px 56px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#0e1014;   --well:#12151a;   --panel:#171a21; --panel-2:#1c2029; --panel-3:#242935;
  --line:#252a34;   --line-2:#313744; --line-3:#465061;
  --txt:#eef0f5;    --txt-2:#b9c0cc;  --txt-3:#9aa3b2; --txt-4:#8b95a5;
  --tint:#1d212b;
  --accent:#6c66f2; --accent-hover:#7d78f5; --on-accent:#ffffff; --accent-text:#a9a5ff; --accent-dim:#25244a; --accent-line:#6c66f2;
  --ok:#56d6ad;  --ok-bg:#12322a;  --ok-fill:#56d6ad;
  --warn:#f0bb52; --warn-bg:#382b11; --warn-fill:#f0bb52;
  --bad:#ff8f8f;  --bad-bg:#3f1a1d; --bad-fill:#ff8f8f;
  --info:#80b9ff; --info-bg:#152b44; --info-fill:#80b9ff;
  --scrim:rgba(0,0,0,.6);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 24px 56px rgba(0,0,0,.6);
}

/* ---- 2 · base --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{ background:var(--page); color:var(--txt); font-family:var(--sans); font-size:var(--fs-md); line-height:var(--lh-snug); -webkit-font-smoothing:antialiased; }
[hidden]{ display:none !important; }
a{ color:var(--accent-text); text-decoration:none; }
a:hover{ text-decoration:underline; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.ic{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.muted{ color:var(--txt-3); }
.sm{ font-size:var(--fs-sm); }
.num{ font-variant-numeric:tabular-nums; }
.mono{ font-family:var(--mono); font-size:.92em; }
.prewrap{ white-space:pre-wrap; }
.blank{ color:var(--txt-4); }
.noscript{ padding:24px; }

/* ---- 3 · frame -------------------------------------------------------------- */
.app{ display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); height:100vh; height:100dvh; }
.main{ height:100vh; height:100dvh; overflow:auto; background:var(--page); display:flex; flex-direction:column; }
.content{ width:100%; max-width:var(--page-max); margin:0 auto; padding:28px 32px 96px; outline:none; }

/* ---- 4 · sidebar ------------------------------------------------------------ */
.rail{ display:flex; flex-direction:column; gap:var(--sp-2); height:100vh; height:100dvh; padding:0 var(--sp-3) var(--sp-3); background:var(--panel); border-right:1px solid var(--line); overflow:hidden; z-index:30; }
.brand{ display:flex; align-items:center; gap:var(--sp-3); height:var(--top-h); flex:none; padding:0 var(--sp-1); }
.brand .mark{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:var(--fs-xl); }
.brand .name{ display:flex; flex-direction:column; min-width:0; }
.brand .name b{ font-size:var(--fs-lg); }
.brand .name small{ color:var(--txt-3); font-size:var(--fs-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.navlist{ flex:1 1 auto; overflow:auto; display:flex; flex-direction:column; gap:2px; margin:0 calc(var(--sp-1) * -1); padding:var(--sp-1); }
.nav{ position:relative; display:flex; align-items:center; gap:var(--sp-3); min-height:38px; padding:6px var(--sp-3); border-radius:var(--r-sm); color:var(--txt-2); font-weight:500; transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease); }
.nav:hover{ background:var(--tint); color:var(--txt); text-decoration:none; }
.nav.on{ background:var(--accent-dim); color:var(--accent-text); font-weight:600; }
.nav.on:not(.sub)::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
.nav .tx{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav .soon{ font-size:11px; color:var(--txt-4); border:1px solid var(--line); border-radius:var(--r-pill); padding:0 7px; }
.navsub{ display:flex; flex-direction:column; gap:2px; margin:2px 0 6px 21px; padding-left:var(--sp-2); border-left:1px solid var(--line); }
.nav.sub{ min-height:32px; padding:4px 10px; font-size:var(--fs-sm); }
.nav.sub.on{ background:var(--tint); color:var(--txt); }
.rail-foot{ flex:none; display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3) var(--sp-2) 0; border-top:1px solid var(--line); color:var(--txt-3); font-size:var(--fs-xs); }
.tag{ align-self:flex-start; padding:2px 9px; border-radius:var(--r-pill); font-weight:700; font-size:11.5px; }
.tag.warn{ background:var(--warn-bg); color:var(--warn); }
.railscrim{ display:none; }

/* ---- 5 · top bar ------------------------------------------------------------ */
.topbar{ position:sticky; top:0; z-index:20; flex:none; display:flex; align-items:center; gap:var(--sp-3); height:var(--top-h); padding:0 var(--sp-6); background:var(--panel); border-bottom:1px solid var(--line); }
.ttl{ flex:1 1 auto; min-width:0; display:flex; align-items:baseline; gap:var(--sp-2); }
.crumb{ color:var(--txt-3); font-size:var(--fs-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:0 100 auto; min-width:0; }
.crumb:empty{ display:none; }
.crumb:not(:empty)::after{ content:"/"; margin-left:var(--sp-2); color:var(--line-3); }
.ttl h1{ margin:0; font-size:var(--fs-lg); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.iconbtn{ flex:none; display:grid; place-items:center; width:var(--ctl-h); height:var(--ctl-h); padding:0; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel); color:var(--txt-2); cursor:pointer; transition:border-color var(--dur-1),background-color var(--dur-1),color var(--dur-1); }
.iconbtn:hover{ border-color:var(--line-3); background:var(--panel-2); color:var(--txt); }
.iconbtn.xs{ width:26px; height:26px; border-radius:7px; }
.iconbtn.xs .ic{ width:15px; height:15px; }
.hamb{ display:none; }
.me-wrap{ position:relative; flex:none; }
.me{ display:flex; align-items:center; gap:var(--sp-2); min-height:var(--ctl-h); padding:3px var(--sp-3) 3px 3px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--panel); cursor:pointer; text-align:left; }
.me:hover{ border-color:var(--line-3); }
.av{ width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--accent-dim); color:var(--accent-text); font-size:11.5px; font-weight:700; }
.me .who{ display:flex; flex-direction:column; line-height:1.15; }
.me .who b{ font-size:var(--fs-sm); }
.me .who small{ font-size:var(--fs-xs); color:var(--txt-3); }
.pop{ position:absolute; right:0; top:calc(100% + 8px); width:280px; padding:var(--sp-4); background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-lg); z-index:50; }
.pop-h{ display:flex; flex-direction:column; margin-bottom:var(--sp-3); }
.pop-h span{ color:var(--txt-3); font-size:var(--fs-sm); word-break:break-all; }
.pop-dl{ margin:0 0 var(--sp-4); display:grid; gap:var(--sp-2); }
.pop-dl div{ display:flex; justify-content:space-between; gap:var(--sp-3); font-size:var(--fs-sm); }
.pop-dl dt{ color:var(--txt-3); }
.pop-dl dd{ margin:0; font-weight:600; text-align:right; }

/* ---- 6 · page parts --------------------------------------------------------- */
.view-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); margin:0 0 var(--sp-5); flex-wrap:wrap; }
.vh-text{ min-width:0; flex:1 1 420px; }
.view-head h2{ margin:0; font-size:var(--fs-3xl); font-weight:700; line-height:var(--lh-tight); letter-spacing:-.01em; overflow-wrap:anywhere; }
.view-head p{ margin:6px 0 0; max-width:78ch; color:var(--txt-3); line-height:var(--lh-body); }
.vh-acts{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.eyebrow{ margin-bottom:6px; color:var(--txt-3); font-size:var(--fs-sm); font-weight:500; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:var(--shadow-sm); }
.card.pad-0{ padding:0; overflow:hidden; }
.card h3{ margin:0 0 var(--sp-4); font-size:var(--fs-lg); font-weight:600; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); min-height:var(--ctl-h); padding:0 var(--sp-4); border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--panel); color:var(--txt); font-size:var(--fs-sm); font-weight:600; cursor:pointer; white-space:nowrap; transition:background-color var(--dur-1),border-color var(--dur-1); }
.btn:hover{ background:var(--panel-2); border-color:var(--line-3); text-decoration:none; }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn.primary:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
.btn.ghost{ background:none; border-color:transparent; color:var(--accent-text); }
.btn.ghost:hover{ background:var(--tint); }
.btn.danger{ color:var(--bad); border-color:color-mix(in srgb,var(--bad) 35%,transparent); }
.btn.danger:hover{ background:var(--bad-bg); }
.btn.sm{ min-height:var(--ctl-h-sm); padding:0 var(--sp-3); font-size:var(--fs-xs); }
.btn.block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btnrow{ display:flex; gap:var(--sp-2); }
.chip{ display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:var(--r-pill); font-size:12px; font-weight:600; white-space:nowrap; }
.chip.ok{ background:var(--ok-bg); color:var(--ok); }
.chip.warn{ background:var(--warn-bg); color:var(--warn); }
.chip.bad{ background:var(--bad-bg); color:var(--bad); }
.chip.info{ background:var(--info-bg); color:var(--info); }
.chip.mute{ background:var(--tint); color:var(--txt-2); }
.chip.brand{ background:var(--accent-dim); color:var(--accent-text); }
.dot{ width:8px; height:8px; border-radius:50%; flex:none; background:var(--line-3); }
.dot.ok{ background:var(--ok-fill); } .dot.warn{ background:var(--warn-fill); } .dot.bad{ background:var(--bad-fill); } .dot.mute{ background:var(--txt-4); }
.ct{ display:inline-grid; place-items:center; min-width:22px; height:20px; padding:0 6px; border-radius:var(--r-pill); background:var(--tint); color:var(--txt-2); font-size:11.5px; font-weight:700; }
.notice{ padding:10px var(--sp-4); border-radius:var(--r-sm); font-size:var(--fs-sm); margin:0 0 var(--sp-4); }
.notice.warn{ background:var(--warn-bg); color:var(--warn); }
.card .notice{ margin:0; border-radius:0; }
.loading{ padding:var(--sp-8) var(--sp-6); color:var(--txt-3); }
.empty{ padding:var(--sp-10) var(--sp-5); text-align:center; color:var(--txt-3); display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); }
.empty b{ color:var(--txt); font-size:var(--fs-xl); font-weight:600; }
.empty p{ margin:0 0 var(--sp-2); max-width:52ch; line-height:var(--lh-body); }
.empty.sm{ padding:var(--sp-8) var(--sp-4); }
.empty.sm b{ font-size:var(--fs-lg); }
.tabbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin:0 0 var(--sp-5); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.tabs{ display:flex; gap:var(--sp-1); overflow-x:auto; margin-bottom:-1px; }
.tab{ padding:10px var(--sp-3); border-bottom:2px solid transparent; color:var(--txt-3); font-weight:600; font-size:var(--fs-sm); white-space:nowrap; }
.tab:hover{ color:var(--txt); text-decoration:none; }
.tab.on{ color:var(--accent-text); border-bottom-color:var(--accent); }
.seg{ display:inline-flex; padding:3px; margin-bottom:6px; background:var(--well); border:1px solid var(--line); border-radius:var(--r-sm); }
.seg-b{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 var(--sp-3); border-radius:7px; color:var(--txt-3); font-size:var(--fs-xs); font-weight:600; }
.seg-b:hover{ color:var(--txt); text-decoration:none; }
.seg-b.on{ background:var(--panel); color:var(--txt); box-shadow:var(--shadow-sm); }
.seg-b .ic{ width:15px; height:15px; }
.later .later-h{ display:flex; gap:var(--sp-4); align-items:flex-start; }
.later .later-h .ic{ width:28px; height:28px; color:var(--accent-text); }
.later .later-h p{ margin:4px 0 0; color:var(--txt-3); }
.later ul{ margin:var(--sp-4) 0 0; padding-left:var(--sp-10); line-height:var(--lh-body); color:var(--txt-2); }

/* ---- 7 · lists -------------------------------------------------------------- */
.toolbar,.board-tools{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line); }
.board-tools{ border:0; padding:0; margin:0 0 var(--sp-4); }
.search-in{ display:flex; align-items:center; gap:var(--sp-2); flex:0 1 280px; height:var(--ctl-h); padding:0 var(--sp-3); border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--well); color:var(--txt-3); }
.search-in:focus-within{ border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-dim); }
.search-in input{ flex:1 1 auto; min-width:0; border:0; background:none; outline:none; color:var(--txt); }
.filter-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.fchip{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 var(--sp-3); border:1px solid var(--line); border-radius:var(--r-pill); background:var(--panel); color:var(--txt-2); font-size:var(--fs-xs); font-weight:600; cursor:pointer; }
.fchip span{ color:var(--txt-4); font-weight:700; }
.fchip:hover{ border-color:var(--line-3); }
.fchip.on{ background:var(--accent-dim); border-color:var(--accent-line); color:var(--accent-text); }
.fchip.on span{ color:var(--accent-text); }
.tbl-wrap{ overflow:auto; max-height:calc(100vh - 300px); min-height:220px; }
.tbl{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-sm); }
.tbl th{ position:sticky; top:0; z-index:1; text-align:left; padding:10px var(--sp-4); background:var(--panel-2); border-bottom:1px solid var(--line); color:var(--txt-3); font-size:var(--fs-xs); font-weight:600; white-space:nowrap; }
.tbl td{ padding:12px var(--sp-4); border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl .num{ text-align:right; }
.tbl td.name a{ color:var(--txt); font-weight:600; }
.tbl td.age,.tbl th.age{ color:var(--txt-3); white-space:nowrap; }
.tbl tr.clk{ cursor:pointer; }
.tbl tr.clk:hover td{ background:var(--tint); }
.tbl tr.none td{ cursor:default; }

/* ---- 8 · record page -------------------------------------------------------- */
.back{ display:inline-flex; align-items:center; gap:4px; margin:0 0 var(--sp-3); color:var(--txt-3); font-size:var(--fs-sm); font-weight:500; }
.back .ic{ width:16px; height:16px; }
.meta-row{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin:calc(var(--sp-2) * -1) 0 var(--sp-5); }
.meta-t{ color:var(--txt-3); font-size:var(--fs-sm); }
.status-move{ display:inline-flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-sm); color:var(--txt-3); font-weight:500; }
.status-move select{ height:var(--ctl-h); padding:0 var(--sp-3); border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--panel); font-weight:600; color:var(--txt); }
.detail-grid{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr); gap:20px; align-items:start; }
.side-col{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-5) var(--sp-6); margin:0; }
.fv{ min-width:0; }
.fv.wide{ grid-column:1 / -1; }
.fv dt{ color:var(--txt-3); font-size:var(--fs-xs); font-weight:600; margin-bottom:4px; }
.fv dd{ margin:0; overflow-wrap:anywhere; }
.foot-note{ margin:var(--sp-6) 0 0; padding-top:var(--sp-4); border-top:1px solid var(--line); color:var(--txt-3); font-size:var(--fs-xs); }
.linked + .linked{ margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--line); }
.linked-h{ display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-2); }
.linked-h .btn{ margin-left:auto; }
.linked ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.linked li{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); font-size:var(--fs-sm); }
.linked li a{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3); font-size:var(--fs-sm); }
.history li{ padding-left:var(--sp-4); border-left:2px solid var(--line); }

/* ---- 9 · boards ------------------------------------------------------------- */
.board{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(272px,1fr); gap:var(--sp-3); overflow-x:auto; padding-bottom:var(--sp-4); align-items:start; }
.col{ display:flex; flex-direction:column; min-height:220px; max-height:calc(100vh - 290px); background:var(--well); border:1px solid var(--line); border-radius:var(--r-lg); transition:border-color var(--dur-1),background-color var(--dur-1); }
.col.over{ border-color:var(--accent-line); background:var(--accent-dim); }
.col-h{ display:flex; flex-direction:column; gap:4px; padding:var(--sp-3) var(--sp-3) var(--sp-2); }
.col-t{ display:flex; align-items:center; gap:var(--sp-2); }
.col-t b{ font-size:var(--fs-sm); }
.col-t .iconbtn{ margin-left:auto; }
.col-sum{ color:var(--txt-3); font-size:var(--fs-xs); font-weight:500; }
.warn-t{ color:var(--warn); font-weight:600; }
.col-b{ display:flex; flex-direction:column; gap:var(--sp-2); padding:0 var(--sp-2) var(--sp-2); overflow-y:auto; }
.col-empty{ padding:var(--sp-5) var(--sp-3); text-align:center; color:var(--txt-4); font-size:var(--fs-sm); border:1px dashed var(--line-2); border-radius:var(--r); }
.bcard{ position:relative; display:flex; flex-direction:column; gap:6px; padding:var(--sp-3); background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); }
.bcard[draggable="true"]{ cursor:grab; }
.bcard.dragging{ opacity:.45; }
.bcard.moving{ opacity:.6; pointer-events:none; }
.bc-title{ color:var(--txt); font-weight:600; font-size:var(--fs-sm); line-height:1.3; }
.bc-sub{ color:var(--txt-3); font-size:var(--fs-xs); }
.bc-body{ display:flex; flex-direction:column; gap:3px; }
.kv{ display:flex; align-items:baseline; gap:6px; font-size:var(--fs-sm); }
.kv > span:first-child{ color:var(--txt-3); font-size:var(--fs-xs); }
.kv b{ font-weight:700; }
.kv .unit{ color:var(--txt-3); font-size:var(--fs-xs); }
.kv.quiet{ color:var(--txt-3); font-size:var(--fs-xs); }
.bc-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.next{ display:flex; align-items:flex-start; gap:6px; color:var(--txt-2); font-size:var(--fs-xs); }
.next .ic{ width:14px; height:14px; margin-top:1px; }
.next.late{ color:var(--bad); font-weight:600; }
.next.quiet{ color:var(--txt-3); }
.bc-move{ display:flex; justify-content:space-between; margin-top:2px; opacity:0; transition:opacity var(--dur-1); }
.bcard:hover .bc-move,.bcard:focus-within .bc-move{ opacity:1; }
@media (hover:none){ .bc-move{ opacity:1; } }

/* ---- 10 · home -------------------------------------------------------------- */
.tiles{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px; }
.tile{ display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; padding:var(--sp-6); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
.tile.s4{ grid-column:span 4; } .tile.s6{ grid-column:span 6; } .tile.s12{ grid-column:span 12; }
.tile-h{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); color:var(--txt-2); font-size:var(--fs-sm); font-weight:600; }
.tile-h .ic{ width:20px; height:20px; color:var(--txt-3); }
.kpi{ font-size:var(--fs-kpi); font-weight:700; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.tile-meta{ color:var(--txt-3); font-size:var(--fs-sm); line-height:var(--lh-body); }
.tile-note{ color:var(--warn); font-size:var(--fs-xs); font-weight:600; }
.tile-flag{ align-self:flex-start; padding:3px 10px; border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:700; }
.tile-flag.bad{ background:var(--bad-bg); color:var(--bad); }
.tile-link{ margin-top:auto; padding-top:var(--sp-2); font-size:var(--fs-sm); font-weight:600; }
.tile.hero{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.tile.hero .tile-h,.tile.hero .tile-h .ic,.tile.hero .tile-meta{ color:color-mix(in srgb,var(--on-accent) 82%,transparent); }
.tile.hero .tile-link{ color:var(--on-accent); text-decoration:underline; text-underline-offset:3px; }
.tile.hero .tile-note{ color:var(--on-accent); background:color-mix(in srgb,#000 18%,transparent); padding:4px 8px; border-radius:var(--r-xs); align-self:flex-start; }
.bars{ display:flex; flex-direction:column; gap:var(--sp-2); margin:var(--sp-2) 0; }
.bar-row{ display:grid; grid-template-columns:120px minmax(0,1fr) 28px 72px; align-items:center; gap:var(--sp-3); color:var(--txt-2); font-size:var(--fs-sm); padding:3px 0; }
.bar-row:hover{ text-decoration:none; color:var(--txt); }
.bar-t{ height:10px; background:var(--panel-3); border-radius:var(--r-pill); overflow:hidden; }
.bar-f{ display:block; height:100%; background:var(--accent); border-radius:var(--r-pill); min-width:4px; }
.bar-n{ text-align:right; font-weight:700; color:var(--txt); }
.bar-v{ text-align:right; color:var(--txt-3); }
.tile-list{ list-style:none; margin:var(--sp-2) 0 0; padding:0; display:flex; flex-direction:column; }
.tile-list li{ display:flex; align-items:center; gap:var(--sp-2); padding:10px 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm); flex-wrap:wrap; }
.tile-list li:last-child{ border-bottom:0; }
.tile-list li > a{ flex:1 1 220px; min-width:0; color:var(--txt); }
.tile-list li > a b{ font-weight:600; }
.tile-list .age{ color:var(--txt-3); font-size:var(--fs-xs); white-space:nowrap; }
.tile-list .age.old{ color:var(--bad); font-weight:600; }

/* ---- 11 · drawer ------------------------------------------------------------ */
.scrim{ position:fixed; inset:0; background:var(--scrim); z-index:40; animation:fade var(--dur-2) var(--ease); }
.drawer{ position:fixed; top:0; right:0; bottom:0; width:min(var(--drawer-w),100vw); display:flex; flex-direction:column; background:var(--panel); border-left:1px solid var(--line); box-shadow:var(--shadow-lg); z-index:41; animation:slide var(--dur-2) var(--ease); }
@keyframes fade{ from{ opacity:0; } }
@keyframes slide{ from{ transform:translateX(40px); opacity:0; } }
.drawer-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-5) var(--sp-6); border-bottom:1px solid var(--line); }
.drawer-h small{ color:var(--txt-3); font-size:var(--fs-sm); font-weight:500; }
.drawer-h h2{ margin:2px 0 0; font-size:var(--fs-2xl); line-height:var(--lh-tight); overflow-wrap:anywhere; }
.drawer-b{ flex:1 1 auto; overflow:auto; padding:var(--sp-5) var(--sp-6); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4); align-content:start; }
.drawer-f{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-4) var(--sp-6); border-top:1px solid var(--line); background:var(--panel-2); }
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field.wide,.drawer-b .banner,.drawer-b > .field:first-of-type{ grid-column:1 / -1; }
.field label{ font-size:var(--fs-xs); font-weight:600; color:var(--txt-2); }
.field .req{ color:var(--txt-4); font-weight:500; margin-left:4px; }
.field .req.need{ color:var(--warn); background:var(--warn-bg); padding:1px 6px; border-radius:999px; font-weight:600; }
.tiles-h{ grid-column:1 / -1; margin:var(--sp-4) 0 0; font-size:var(--fs-md); font-weight:650; display:flex; gap:var(--sp-3); align-items:baseline; flex-wrap:wrap; }
.tiles-h span{ font-size:var(--fs-xs); font-weight:500; color:var(--txt-3); }
.kpi .kpi-of{ font-size:var(--fs-lg); font-weight:500; color:var(--txt-3); }
.field .help{ color:var(--txt-3); font-size:var(--fs-xs); line-height:1.45; }
.field input:not([type=checkbox]),.field select,.field textarea{ width:100%; min-height:var(--ctl-h); padding:7px var(--sp-3); border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--panel); color:var(--txt); }
.field textarea{ resize:vertical; line-height:var(--lh-body); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-dim); }
.field input:disabled{ background:var(--well); color:var(--txt-3); }
.field.invalid input,.field.invalid select,.field.invalid textarea{ border-color:var(--bad); box-shadow:0 0 0 3px var(--bad-bg); }
.money-in{ display:flex; align-items:center; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--panel); }
.money-in span{ padding-left:var(--sp-3); color:var(--txt-3); }
.money-in input{ border:0 !important; box-shadow:none !important; background:none !important; }
.money-in:focus-within{ border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-dim); }
.field.invalid .money-in{ border-color:var(--bad); }
.check{ display:inline-flex; align-items:center; gap:var(--sp-2); min-height:var(--ctl-h); font-size:var(--fs-sm); }
.check input{ width:18px; height:18px; accent-color:var(--accent); }
.banner{ padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm); background:var(--bad-bg); color:var(--bad); font-size:var(--fs-sm); font-weight:500; display:flex; flex-direction:column; gap:var(--sp-2); align-items:flex-start; }
.banner p{ margin:0; }

/* ---- 12 · sign-in ----------------------------------------------------------- */
.gate{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); min-height:100vh; min-height:100dvh; }
.gate-side{ display:flex; flex-direction:column; justify-content:space-between; padding:48px; background:var(--accent); color:var(--on-accent); }
.gate-mark{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:color-mix(in srgb,#fff 18%,transparent); font-size:26px; font-weight:700; }
.gate-side h2{ margin:0 0 var(--sp-3); font-size:40px; letter-spacing:-.02em; }
.gate-side p{ margin:0; max-width:34ch; font-size:var(--fs-xl); line-height:var(--lh-body); opacity:.88; }
.gate-main{ display:grid; place-items:center; padding:48px 24px; background:var(--page); }
.gate-card{ width:min(440px,100%); }
.gate-card h1{ margin:0; font-size:var(--fs-3xl); }
.gate-sub{ margin:6px 0 var(--sp-6); color:var(--txt-3); }
.gate-door{ min-height:44px; }
.gate-msg{ margin-top:var(--sp-4); font-size:var(--fs-sm); }
.gate-msg:empty{ display:none; }
.gate-msg.bad{ padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm); background:var(--bad-bg); color:var(--bad); }
.gate-msg.warn{ padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm); background:var(--warn-bg); color:var(--warn); }
.gate-msg.info{ color:var(--txt-3); }
.gate-choose{ display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-5); }
.gate-choose .gate-sub{ margin-bottom:var(--sp-2); }
.choice-btn,.seat-btn{ display:flex; align-items:center; gap:var(--sp-3); width:100%; padding:var(--sp-3) var(--sp-4); border:1px solid var(--line-2); border-radius:var(--r); background:var(--panel); text-align:left; cursor:pointer; transition:border-color var(--dur-1),background-color var(--dur-1); }
.choice-btn:hover,.seat-btn:hover{ border-color:var(--accent-line); background:var(--accent-dim); }
.seat-list{ display:flex; flex-direction:column; gap:var(--sp-2); }
.seat-btn .who{ display:flex; flex-direction:column; }
.seat-btn .who small{ color:var(--txt-3); font-size:var(--fs-xs); }
.local-banner{ margin-bottom:var(--sp-4); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm); background:var(--warn-bg); color:var(--warn); font-size:var(--fs-sm); font-weight:500; }
.gate-foot{ margin:var(--sp-4) 0 0; color:var(--txt-3); font-size:var(--fs-xs); line-height:var(--lh-body); }

/* ---- 13 · toasts ------------------------------------------------------------ */
.toasts{ position:fixed; right:20px; bottom:20px; z-index:60; display:flex; flex-direction:column; gap:var(--sp-2); max-width:min(420px,calc(100vw - 40px)); }
.toast{ padding:var(--sp-3) var(--sp-4); border-radius:var(--r); background:var(--txt); color:var(--panel); box-shadow:var(--shadow-lg); font-size:var(--fs-sm); line-height:var(--lh-snug); border-left:4px solid var(--info-fill); animation:slide var(--dur-2) var(--ease); transition:opacity .3s; }
.toast.ok{ border-left-color:var(--ok-fill); }
.toast.bad{ border-left-color:var(--bad-fill); }
.toast.leaving{ opacity:0; }

/* ---- 14 · tablet and phone -------------------------------------------------- */
@media (max-width:1180px){
  .tile.s4{ grid-column:span 6; }
  .tile.s6{ grid-column:span 12; }
  .detail-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:960px){
  .app{ grid-template-columns:minmax(0,1fr); }
  .rail{ position:fixed; left:0; top:0; bottom:0; width:min(300px,86vw); transform:translateX(-102%); transition:transform var(--dur-2) var(--ease); box-shadow:var(--shadow-lg); }
  .app.rail-open .rail{ transform:none; }
  .app.rail-open .railscrim{ display:block; position:fixed; inset:0; background:var(--scrim); z-index:29; }
  .hamb{ display:grid; border-color:transparent; }
  .topbar{ padding:0 var(--sp-3); }
  .content{ padding:20px 16px 80px; }
  .me .who{ display:none; }
  .me{ padding:3px; }
}
@media (max-width:640px){
  :root{ --fs-md:16px; --fs-sm:15px; --fs-3xl:23px; --fs-kpi:28px; }
  .tile.s4,.tile.s6{ grid-column:1 / -1; }
  .tiles{ gap:12px; }
  .tile,.card{ padding:var(--sp-4); }
  .fields,.drawer-b{ grid-template-columns:minmax(0,1fr); }
  .crumb{ display:none; }
  .gate{ grid-template-columns:minmax(0,1fr); }
  .gate-side{ padding:28px 20px; gap:var(--sp-6); }
  .gate-side h2{ font-size:30px; }
  .board{ grid-auto-columns:minmax(260px,86vw); }
  .bar-row{ grid-template-columns:86px minmax(0,1fr) 22px 78px; gap:var(--sp-2); }
  .drawer{ width:100vw; }
  .search-in{ flex:1 1 100%; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}