/* Solaris Marine: the vendor portal pages (vendors.html on vendors.solarismarine.co.uk). Loaded after tokens.css, which carries the shared
   tokens and the self-hosted Inter and JetBrains Mono. The CRM's semantic names (crm.css) are mapped here from those tokens, so the vendor
   pages and our pages speak one system; the components are the vendor side's own: no sidebar, a top bar (bottom tabs on a phone), 15 px body.
   Built from the approved V0 mock (16 Oct 2026). No inline styles anywhere (the page's CSP has no 'unsafe-inline'): a width that changes at
   run time is a custom property set through the CSSOM. Shared parts named in DESIGN.md: .ndiff (the rename diff), .lines (the door line),
   .slip (the transmittal slip, solid when issued and dashed as a draft) and .trail (the status trail). */

:root{
  --blue:var(--accent); --blue-ink:var(--accent-deep); --nav-ink:#14558e;
  --btn:var(--accent-btn); --btn-hover:#14558e; --on-btn:#ffffff; --danger-btn:#b42318;
  --heading:var(--ink); --text:var(--ink-2); --text-light:var(--ink-3); --muted:var(--ink-4);
  --bg:var(--hull-0); --bg-card:var(--hull-1); --bg-inset:var(--hull-2); --bg-alt:var(--hull-3); --bg-sel:var(--hull-4);
  --border:var(--rule); --border-strong:var(--rule-strong);
  --accent-dim:rgba(26,109,181,.09); --accent-mid:rgba(26,109,181,.16); --sel-bg:rgba(26,109,181,.20);
  --ok:#0f7a3f; --ok-bg:rgba(15,122,63,.10);
  --warn:#8a5c00; --warn-bg:rgba(154,103,0,.13);   /* darker than tokens.css's #9a6700: amber words on their own amber wash keep 4.5:1 */
  --danger:#b42318; --danger-bg:rgba(180,35,24,.08);
  --teal:#0b6b7a; --teal-bg:rgba(11,107,122,.10);
  --top-bg:rgba(245,247,250,.88); --toast-bg:#0D1824; --toast-ink:#F5F7FA;
  --shadow:0 1px 2px rgba(13,24,36,.05),0 1px 3px rgba(13,24,36,.04);
  --shadow-md:0 4px 18px rgba(13,24,36,.08);
  --shadow-lg:0 16px 44px rgba(13,24,36,.18);
  --radius:8px; --radius-sm:6px; --tap:40px; --top-h:62px;
}
:root[data-theme="dark"]{
  --nav-ink:#dcecfb; --btn-hover:#1a5f9e; --danger-btn:#b9342a;
  --bg-card:var(--hull-2); --bg-inset:var(--hull-1);
  --accent-dim:rgba(74,155,224,.12); --accent-mid:rgba(74,155,224,.22); --sel-bg:rgba(106,174,232,.30);
  --ok:#3ccf7e; --ok-bg:rgba(60,207,126,.13);
  --warn:#e6b450; --warn-bg:rgba(230,180,80,.14);
  --danger:#f0857a; --danger-bg:rgba(240,133,122,.13);
  --teal:#5fd0e0; --teal-bg:rgba(95,208,224,.13);
  --top-bg:rgba(11,20,33,.88); --toast-bg:#E8ECF1; --toast-ink:#0B1421;
  --shadow:0 1px 3px rgba(0,0,0,.35); --shadow-md:0 6px 24px rgba(0,0,0,.45); --shadow-lg:0 18px 50px rgba(0,0,0,.6);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + 12px)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;caret-color:var(--blue)}
::selection{background:var(--sel-bg);color:var(--heading)}
*{scrollbar-color:var(--border-strong) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:11px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,fieldset{margin:0}
ul,ol{padding:0}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
svg.ic{width:17px;height:17px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
svg.ic.sm{width:14px;height:14px}
svg.ic.xs{width:12px;height:12px}
svg.ic.lg{width:20px;height:20px}
code,.code{font-family:var(--mono);font-size:.86em}
a.lnk,button.lnk{color:var(--blue-ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--blue) 45%,transparent);text-underline-offset:3px}
a.lnk:hover,button.lnk:hover{text-decoration-color:var(--blue)}
:root[data-theme="dark"] a.lnk,:root[data-theme="dark"] button.lnk{color:var(--blue)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:var(--radius-sm);background:var(--btn);color:var(--on-btn);font-weight:600;font-size:.86rem;transition:top .15s}
.skip:focus{top:10px}
.noscript{max-width:46ch;margin:80px auto;padding:0 20px;text-align:center;color:var(--heading)}

/* ---------- buttons, chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;border-radius:var(--radius-sm);border:1px solid transparent;background:var(--btn);color:var(--on-btn);font-size:.84rem;font-weight:600;line-height:1.2;white-space:nowrap;text-align:center;transition:background .14s,border-color .14s,color .14s,opacity .14s}
.btn:hover{background:var(--btn-hover)}
.btn.ghost{background:var(--bg-card);border-color:var(--border-strong);color:var(--text)}
.btn.ghost:hover{border-color:var(--blue);color:var(--blue-ink);background:var(--accent-dim)}
:root[data-theme="dark"] .btn.ghost:hover{color:var(--nav-ink)}
.btn.quiet{background:transparent;color:var(--text-light);padding:0 10px}
.btn.quiet:hover{background:var(--accent-dim);color:var(--blue-ink)}
.btn.danger{background:var(--danger-btn);color:#fff}
.btn.danger:hover{background:var(--danger-btn);filter:brightness(.92)}
.btn.lg{height:44px;padding:0 20px;font-size:.92rem}
.btn.sm{height:32px;padding:0 12px;font-size:.8rem}
.btn.xs{height:28px;padding:0 10px;font-size:.76rem;gap:5px}
.btn.wide{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;filter:saturate(.6)}
.btn:disabled:hover{background:var(--btn)}
.btn.ghost:disabled:hover{background:var(--bg-card);border-color:var(--border-strong);color:var(--text)}
.btn .spin,.spin{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;flex:0 0 auto;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.iconbtn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-card);color:var(--text);position:relative;flex:0 0 auto;transition:border-color .14s,color .14s}
.iconbtn:hover{border-color:var(--blue);color:var(--blue-ink)}
.iconbtn.sm{width:30px;height:30px}
.iconbtn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--bg-card)}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:.72rem;font-weight:600;white-space:nowrap;line-height:1.5}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.p-ok{background:var(--ok-bg);color:var(--ok)}
.p-warn{background:var(--warn-bg);color:var(--warn)}
.p-bad{background:var(--danger-bg);color:var(--danger)}
.p-blue{background:var(--accent-dim);color:var(--blue-ink)}
:root[data-theme="dark"] .p-blue{color:var(--nav-ink)}
.p-teal{background:var(--teal-bg);color:var(--teal)}
.p-grey{background:var(--bg-alt);color:var(--text-light)}
.court{display:inline-flex;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:1px 7px;border-radius:4px;white-space:nowrap;line-height:1.6}
:lang(zh) .court{letter-spacing:.02em}
.court.you{background:var(--accent-mid);color:var(--nav-ink)}
.court.us{background:var(--bg-alt);color:var(--text)}
.court.done{background:var(--ok-bg);color:var(--ok)}
.court.back{background:var(--danger-bg);color:var(--danger)}
.flag{display:inline-block;padding:1px 7px;border-radius:4px;font-size:.6875rem;font-weight:600;font-family:var(--mono);white-space:nowrap}
.flag.late{background:var(--danger-bg);color:var(--danger)}
.flag.soon{background:var(--warn-bg);color:var(--warn)}
.later{display:inline-flex;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.04em;padding:1px 7px;border-radius:4px;border:1px dashed var(--border-strong);color:var(--text-light);white-space:nowrap;text-transform:uppercase}
:lang(zh) .later{text-transform:none;letter-spacing:0}
.seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-card);max-width:100%}
.seg button{height:32px;padding:0 12px;font-size:.78rem;font-weight:600;color:var(--text-light);white-space:nowrap;border-right:1px solid var(--border)}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--blue-ink)}
.seg button[aria-pressed="true"]{background:var(--accent-mid);color:var(--nav-ink)}

/* ---------- forms ---------- */
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=search],input[type=tel],select,textarea{width:100%;height:40px;padding:0 11px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--heading);font-size:.9rem;transition:border-color .14s,box-shadow .14s;min-width:0}
textarea{height:auto;padding:9px 11px;resize:vertical;min-height:72px;line-height:1.5}
select{padding-right:32px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-light) 50%),linear-gradient(135deg,var(--text-light) 50%,transparent 50%);background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;background-size:5px 5px;background-repeat:no-repeat;text-overflow:ellipsis}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--accent-mid)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
input[type=checkbox],input[type=radio]{accent-color:var(--btn);width:17px;height:17px;margin:0;flex:0 0 auto}
input[type=checkbox]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
input[type=date]{font-family:var(--mono);font-size:.84rem}
input[type=date]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}
:root[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.85)}
label.l,.field>label{display:block;font-size:.78rem;font-weight:600;color:var(--text-light);margin-bottom:6px}
.field{margin-bottom:16px}
.field .opt{font-weight:500;color:var(--muted)}
.pw{position:relative}
.pw input{padding-right:70px}
.pw .pwshow{position:absolute;right:4px;top:4px;height:32px;padding:0 10px;border-radius:5px;font-size:.76rem;font-weight:600;color:var(--blue-ink)}
.pw .pwshow:hover{background:var(--accent-dim)}
:root[data-theme="dark"] .pw .pwshow{color:var(--blue)}

/* ---------- shell ---------- */
.vtop{position:sticky;top:0;z-index:40;background:var(--top-bg);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);border-bottom:1px solid var(--border)}
.vtop-in{max-width:1220px;margin:0 auto;height:var(--top-h);display:flex;align-items:center;gap:22px;padding:0 28px}
.brand{display:flex;align-items:center;gap:11px;min-width:0;border-radius:var(--radius-sm)}
.brand img{width:30px;height:30px;display:block;flex:0 0 auto}
.brand .wm{font-weight:600;font-size:.78rem;letter-spacing:.22em;color:var(--heading);white-space:nowrap}
.brand .app{font-size:.86rem;color:var(--text-light);padding-left:12px;border-left:1px solid var(--border-strong);white-space:nowrap}
.vnav{display:flex;gap:2px}
.vnav a{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 13px;border-radius:var(--radius-sm);font-size:.9rem;font-weight:500;color:var(--text)}
.vnav a:hover{background:var(--accent-dim);color:var(--nav-ink)}
.vnav a[aria-current="page"]{background:var(--accent-mid);color:var(--nav-ink);font-weight:600}
.cnt{font-family:var(--mono);font-size:.7rem;font-weight:700;padding:0 7px;border-radius:99px;background:var(--bg-card);color:var(--danger);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 35%,transparent);line-height:1.6;font-variant-numeric:tabular-nums}
.cnt.calm{background:var(--bg-card);color:var(--text-light);box-shadow:inset 0 0 0 1px var(--border-strong)}
.vright{margin-left:auto;display:flex;align-items:center;gap:8px}
.langbtn{height:36px;padding:0 11px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-card);font-size:.8rem;font-weight:600;color:var(--text);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.langbtn:hover{border-color:var(--blue);color:var(--blue-ink)}
.person{display:flex;align-items:center;gap:9px;height:40px;padding:0 12px 0 4px;border-radius:99px;border:1px solid var(--border);background:var(--bg-card);text-align:left;max-width:240px}
.person:hover{border-color:var(--blue)}
.avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent-mid);color:var(--nav-ink);font-size:.72rem;font-weight:700;flex:0 0 auto;letter-spacing:.02em}
.person .who{min-width:0}
.person .nm{display:block;font-size:.8rem;font-weight:600;color:var(--heading);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person .co{display:block;font-size:.7rem;color:var(--text-light);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu{position:relative}
.menu-pop{position:absolute;right:0;top:calc(100% + 8px);min-width:250px;max-width:min(360px,calc(100vw - 24px));background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:6px;z-index:60;animation:pop .14s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.menu-pop a,.menu-pop>button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:var(--radius-sm);font-size:.86rem;text-align:left;color:var(--text)}
.menu-pop a:hover,.menu-pop>button:hover,.menu-pop [role=menuitem]:focus-visible{background:var(--accent-dim);color:var(--nav-ink);outline:none}
.menu-pop .mp-sep{height:1px;background:var(--border);margin:6px 4px}
.menu-pop .mp-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.8rem;font-weight:700;color:var(--heading);padding:8px 10px 6px}
.menu-pop .mp-who{padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;min-width:0}
.menu-pop .mp-who b{display:block;color:var(--heading);font-size:.88rem;overflow-wrap:anywhere}
.menu-pop .mp-who span{display:block;font-size:.76rem;color:var(--text-light);overflow-wrap:anywhere}
.menu-pop .mp-foot{font-size:.74rem;color:var(--text-light);padding:8px 10px 4px;border-top:1px solid var(--border);margin-top:4px;line-height:1.45}
.notifs{width:360px}
.notifs ul{list-style:none;max-height:min(420px,60vh);overflow:auto}
.notif{display:grid;grid-template-columns:20px minmax(0,1fr);gap:9px;padding:9px 10px;border-radius:var(--radius-sm);width:100%;text-align:left}
.notif:hover{background:var(--accent-dim)}
.notif .nd{color:var(--text-light);margin-top:2px;position:relative}
.notif.unread .nd::after{content:'';position:absolute;top:-2px;right:-2px;width:7px;height:7px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--bg-card)}
.notif .nt{display:block;font-size:.84rem;color:var(--heading);line-height:1.45}
.notif.unread .nt{font-weight:600}
.notif .nw{display:block;font-size:.72rem;color:var(--text-light);font-family:var(--mono);margin-top:2px}
.notif-empty{padding:18px 10px 14px;font-size:.84rem;color:var(--text-light);text-align:center}
.netbar{position:sticky;top:var(--top-h);z-index:35}
.netbar .banner{border-radius:0;border-width:0 0 1px;justify-content:center}
.netbar .banner .bt{flex:0 1 auto;max-width:900px}
.vmain{max-width:1220px;margin:0 auto;padding:30px 28px 110px}
.vmain:focus{outline:none}
.vtabs{display:none}
#toast{position:fixed;left:50%;bottom:28px;z-index:90;transform:translate(-50%,16px);display:flex;align-items:center;gap:10px;max-width:min(560px,calc(100vw - 32px));padding:11px 16px;border-radius:var(--radius);background:var(--toast-bg);color:var(--toast-ink);font-size:.86rem;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility 0s linear .18s}
#toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .18s,transform .18s}
#toast .ic{flex:0 0 auto}

/* ---------- page heads ---------- */
/* each item draws the rule before it, in the middle of the gap; the first item of every line has its rule outside the box, where overflow
   hides it, so a wrapped line never starts or ends with a stray rule */
.coline{display:flex;flex-wrap:wrap;align-items:center;gap:4px 21px;overflow:hidden;font-size:.84rem;color:var(--text-light);margin-bottom:10px}
.coline>*{position:relative}
.coline>*::before{content:'';position:absolute;left:-11px;top:50%;width:1px;height:14px;margin-top:-7px;background:var(--border-strong)}
.coline b{color:var(--heading);font-weight:600}
.nb{white-space:nowrap}
.vh1{font-size:1.65rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--heading);text-wrap:balance}
.vh1:focus{outline:none}
.vlede{font-size:1rem;color:var(--text);margin-top:6px;max-width:68ch}
.vlede b{color:var(--heading)}
.vlede b.bad{color:var(--danger)}
.headrow{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.clock{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;color:var(--text-light);white-space:nowrap}
.clock .ic{width:14px;height:14px}
.clock b{font-family:var(--mono);font-weight:600;color:var(--heading);font-variant-numeric:tabular-nums}
.crumbs{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text-light);margin-bottom:12px;flex-wrap:wrap}
.crumbs a{color:var(--text-light);border-radius:3px}
.crumbs a:hover{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}
.crumbs .ic{width:13px;height:13px;color:var(--muted)}
.crumbs .cur{color:var(--text);overflow-wrap:anywhere}
.thead{margin-bottom:20px}
.thead .vh1{font-size:1.5rem}
.tmeta{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-top:10px}
.tmeta .ref{font-family:var(--mono);font-size:.78rem;color:var(--text-light)}
.tmeta .note{font-size:.84rem}

/* ---------- tabs ---------- */
.tabs-wrap{position:relative;margin:22px 0 16px;border-bottom:1px solid var(--border-strong)}
.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:7px;padding:10px 12px 11px;font-size:.88rem;font-weight:500;color:var(--text-light);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;border-radius:4px 4px 0 0}
.tab:hover{color:var(--heading)}
.tab[aria-current="page"]{color:var(--heading);font-weight:600;border-bottom-color:var(--blue)}
.tab:focus-visible{outline-offset:-2px}
.tab .n{font-family:var(--mono);font-size:.7rem;font-weight:600;padding:0 7px;border-radius:99px;background:var(--bg-alt);color:var(--text-light);font-variant-numeric:tabular-nums}
.tab .n.bad{background:var(--danger-bg);color:var(--danger)}
.tab .n.blue{background:var(--accent-mid);color:var(--nav-ink)}

/* ---------- the to-do list ---------- */
.vgrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:start}
.vgrid>*{min-width:0}
.todo{list-style:none;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.tgroup{display:flex;align-items:center;gap:8px;padding:10px 18px 8px;font-size:.6875rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-light);background:var(--bg-inset);border-bottom:1px solid var(--border)}
:lang(zh) .tgroup{letter-spacing:.02em;font-size:.76rem;text-transform:none}
.tgroup.bad{color:var(--danger)}
.tgroup.warn{color:var(--warn)}
.tgroup.blue{color:var(--blue-ink)}
:root[data-theme="dark"] .tgroup.blue{color:var(--blue)}
.tgroup .n{font-family:var(--mono);font-weight:600}
.trow{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--border);transition:background .14s}
.trow:last-child{border-bottom:0}
.trow:hover{background:var(--accent-dim)}
.trow:hover .t{color:var(--blue-ink)}
:root[data-theme="dark"] .trow:hover .t{color:var(--nav-ink)}
.trow:has(.t:focus-visible){outline:2px solid var(--blue);outline-offset:-2px}
.trow .t:focus-visible{outline:none}
.trow.flash{animation:flash 1.6s var(--ease)}
@keyframes flash{0%{background:var(--ok-bg)}100%{background:transparent}}
.kic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--bg-alt);color:var(--text);align-self:start}
.kic .ic{width:18px;height:18px}
.kic.fix{background:var(--danger-bg);color:var(--danger)}
.kic.ack{background:var(--accent-mid);color:var(--nav-ink)}
.kic.ok{background:var(--ok-bg);color:var(--ok)}
.kic.wait{background:var(--accent-dim);color:var(--blue-ink)}
:root[data-theme="dark"] .kic.wait{color:var(--blue)}
.tb{min-width:0}
.trow .t{display:block;font-weight:600;color:var(--heading);font-size:.98rem;line-height:1.4;transition:color .14s;overflow-wrap:anywhere}
.trow .t::after{content:'';position:absolute;inset:0;z-index:1}
.trow .m{display:flex;flex-wrap:wrap;align-items:center;gap:3px 12px;font-size:.78rem;color:var(--text-light);margin-top:3px}
.trow .m .kind{font-weight:600;color:var(--text)}
.trow .m .mono{font-size:.74rem;overflow-wrap:anywhere}
.trow .m .for{display:inline-flex;align-items:center;gap:5px;color:var(--teal);font-weight:600}
.trow .why{font-size:.86rem;color:var(--text);margin-top:5px;line-height:1.5;max-width:72ch}
.trow .why.bad{color:var(--danger)}
.ta{display:flex;align-items:center;gap:12px;justify-content:flex-end}
.ta .btn{min-width:112px}
.ta button,.ta .act{position:relative;z-index:2}
.due{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.74rem;font-weight:600;white-space:nowrap;padding:3px 8px;border-radius:5px;background:var(--bg-alt);color:var(--text);font-variant-numeric:tabular-nums}
.due .ic{width:13px;height:13px}
.due.late{background:var(--danger-bg);color:var(--danger)}
.due.today{background:var(--warn-bg);color:var(--warn)}
.due.done{background:var(--ok-bg);color:var(--ok)}
:lang(zh) .due{font-family:var(--sans)}
.ack-done{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:var(--ok);white-space:nowrap}

/* ---------- cards, rail ---------- */
.rail{display:flex;flex-direction:column;gap:16px}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.card-h h2{font-size:.95rem;font-weight:600;color:var(--heading);letter-spacing:-.01em;line-height:1.35}
.card-h .n{font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--text-light);padding:0 7px;border-radius:99px;background:var(--bg-alt)}
.card-b{padding:14px 16px}
.card-f{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--border);background:var(--bg-inset);border-radius:0 0 var(--radius) var(--radius)}
.rq-t{font-weight:600;color:var(--heading);font-size:.9rem;line-height:1.4;overflow-wrap:anywhere}
.rq-s{font-size:.78rem;color:var(--text-light);margin-top:2px}
.segbar{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden;margin:12px 0 8px;background:var(--bg-alt)}
.segbar i{display:block;height:100%;flex:var(--f,0) 1 0}
.segbar .ac{background:var(--ok)}
.segbar .rv{background:var(--blue)}
.segbar .od{background:var(--danger)}
.segbar .yo{background:var(--muted);opacity:.5}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.76rem;color:var(--text-light)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{display:inline-block;width:8px;height:8px;border-radius:2px}
.legend b{color:var(--heading);font-weight:600;font-family:var(--mono);font-size:.72rem}
.legend .k-ac{background:var(--ok)}
.legend .k-rv{background:var(--blue)}
.legend .k-od{background:var(--danger)}
.legend .k-yo{background:var(--muted);opacity:.5}
.namerule{margin:10px 0 6px;overflow-wrap:anywhere}
.namerule code{font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--heading);letter-spacing:.01em;line-height:2}
.namerule code span{padding-bottom:3px;border-bottom:2px solid}
.namerule .nr1{border-color:var(--blue)}
.namerule .nr2{border-color:var(--teal)}
.namerule .nr3{border-color:var(--muted)}
.legend .k1{background:var(--blue)}
.legend .k2{background:var(--teal)}
.legend .k3{background:var(--muted)}
.contact{display:flex;gap:11px;align-items:center}
.contact .nm{font-weight:600;color:var(--heading);font-size:.88rem}
.contact .rl{font-size:.76rem;color:var(--text-light)}
.note{font-size:.8rem;color:var(--text-light);line-height:1.5}
.note b{color:var(--text);font-weight:600}
.sp-top{margin-top:14px}
.card-b .sp-top{margin-top:12px}
.minilist{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:.82rem;color:var(--text)}
.minilist li{display:flex;gap:9px;align-items:flex-start;line-height:1.5}
.minilist .ic{margin-top:2px;color:var(--text-light)}
.prose{font-size:.92rem;color:var(--text);line-height:1.6;max-width:72ch;overflow-wrap:anywhere}
.prose b{color:var(--heading)}

/* ---------- banners, empty, skeleton, error ---------- */
.banner{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:var(--radius-sm);font-size:.86rem;line-height:1.5;border:1px solid;color:var(--heading)}
.banner .ic{margin-top:2px;flex:0 0 auto}
.banner.info{background:var(--accent-dim);border-color:color-mix(in srgb,var(--blue) 30%,transparent)}
.banner.info .ic{color:var(--blue-ink)}
:root[data-theme="dark"] .banner.info .ic{color:var(--blue)}
.banner.warn{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.banner.warn .ic{color:var(--warn)}
.banner.bad{background:var(--danger-bg);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}
.banner.bad .ic{color:var(--danger)}
.banner.ok{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.banner.ok .ic{color:var(--ok)}
.banner .bt{flex:1;min-width:0;overflow-wrap:anywhere}
.banner b{color:var(--heading)}
.banner .bacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.banner.owed{margin-bottom:12px}
.banner ul{margin:6px 0 0 18px}
.banner li+li{margin-top:2px}
.empty{padding:40px 22px;text-align:center;color:var(--text-light);font-size:.88rem}
.empty>.ic{width:28px;height:28px;color:var(--muted);margin-bottom:10px}
.empty strong{display:block;color:var(--heading);font-size:.98rem;margin-bottom:4px}
.empty p{max-width:48ch;margin:0 auto}
.empty .btn{margin-top:14px}
.skel{display:block;border-radius:5px;background:linear-gradient(90deg,var(--bg-alt) 0%,var(--bg-sel) 45%,var(--bg-alt) 90%);background-size:220% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-100% 0}}
.sk-row{display:grid;grid-template-columns:38px minmax(0,1fr) 110px;gap:4px 16px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border)}
.sk-row:last-child{border-bottom:0}
.sk-tile{width:38px;height:38px;border-radius:10px}
.sk-l1{height:14px;width:68%}
.sk-l2{height:10px;width:42%;margin-top:9px}
.sk-btn{height:32px;width:100%}
.sk-block{height:120px;margin:14px 16px}
.errbox{padding:34px 22px;text-align:center}
.errbox>.ic{width:28px;height:28px;color:var(--danger);margin-bottom:10px}
.errbox strong{display:block;color:var(--heading);font-size:.98rem;margin-bottom:4px}
.errbox p{max-width:52ch;margin:0 auto;font-size:.88rem;color:var(--text)}
.errbox .btn{margin-top:14px}
.state-page{max-width:520px;margin:40px auto 0}

/* ---------- sign-in, invite ---------- */
.si-wrap{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;place-items:start center;padding:clamp(56px,12vh,120px) 18px 28px;position:relative}
.si-legal{max-width:760px;margin-top:32px;font-size:.72rem;line-height:1.65;color:var(--text-light);text-align:center;text-wrap:balance}
.si-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.si-legal a:hover{color:var(--heading)}
.si-top{position:absolute;top:18px;right:20px;display:flex;gap:8px}
.si{width:100%;max-width:440px}
.si-brand{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:24px;text-align:center}
.si-brand img{width:46px;height:46px}
.si-brand .wm{font-weight:600;font-size:.86rem;letter-spacing:.26em;color:var(--heading)}
.si-brand .app{font-size:.86rem;color:var(--text-light);margin-top:-6px}
.si-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-md);padding:30px 30px 26px}
.si-card h1{font-size:1.32rem;font-weight:700;color:var(--heading);letter-spacing:-.02em;line-height:1.3}
.si-card h1:focus{outline:none}
.si-card .sub{font-size:.88rem;color:var(--text-light);margin:5px 0 22px;line-height:1.55}
.si-card .sub b{color:var(--heading);font-weight:600;overflow-wrap:anywhere}
.si-card .banner{margin-bottom:16px}
.si-steps{display:flex;gap:6px;margin-bottom:18px}
.si-steps i{height:4px;flex:1;border-radius:2px;background:var(--bg-alt)}
.si-steps i.on{background:var(--blue)}
.si-err{display:flex;gap:8px;align-items:flex-start;font-size:.84rem;color:var(--danger);background:var(--danger-bg);border:1px solid color-mix(in srgb,var(--danger) 35%,transparent);border-radius:var(--radius-sm);padding:9px 11px;margin-bottom:14px;line-height:1.5}
.si-err .ic{margin-top:2px;width:15px;height:15px;flex:0 0 auto}
.si-err:focus{outline:none}
.si-card h1+.si-err{margin-top:16px}
.code{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:8px 0 14px}
.code input{height:54px;text-align:center;font-family:var(--mono);font-size:1.35rem;font-weight:600;padding:0;font-variant-numeric:tabular-nums}
.code.err input{border-color:var(--danger)}
.si-row{display:flex;align-items:flex-start;gap:10px;font-size:.84rem;color:var(--text);margin:0 0 6px}
.si-row label{display:flex;align-items:flex-start;gap:9px;cursor:pointer;line-height:1.45}
.si-row input{margin-top:2px}
.si-hint{font-size:.76rem;color:var(--text-light);margin:0 0 18px 26px;line-height:1.45}
.si-hint.inv-next{margin:14px 0 0}
.si-foot{display:flex;justify-content:space-between;align-items:center;gap:8px 14px;margin-top:18px;font-size:.8rem;color:var(--text-light);flex-wrap:wrap;line-height:1.5}
.si-notice{margin-top:18px;font-size:.76rem;line-height:1.55;color:var(--text-light);text-align:center;max-width:52ch;margin-left:auto;margin-right:auto}
.rule{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-inset);padding:12px 14px;margin-bottom:18px}
.rule b{display:block;font-size:.8rem;color:var(--heading);margin-bottom:6px}
.rule ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.rule li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;font-size:.84rem;color:var(--text);line-height:1.45}
.rule li .ic{width:15px;height:15px;margin-top:2px;color:var(--text-light)}
.rule li.met .ic{color:var(--ok)}
.meter{display:flex;align-items:center;gap:10px;margin-top:8px}
.meter .bar{flex:1;height:4px;border-radius:2px;background:var(--bg-alt);overflow:hidden}
.meter .bar i{display:block;height:100%;width:100%;transform:scaleX(var(--p,0));transform-origin:left center;background:var(--warn);transition:transform .2s var(--ease),background .2s}
.meter.met .bar i{background:var(--ok)}
.meter span{font-size:.74rem;font-family:var(--mono);color:var(--text-light);white-space:nowrap;font-variant-numeric:tabular-nums}
.meter.met span{color:var(--ok)}
.fmsg{display:flex;gap:6px;align-items:flex-start;font-size:.8rem;color:var(--danger);margin-top:7px;line-height:1.45}
.fmsg .ic{width:14px;height:14px;margin-top:2px;flex:0 0 auto}
.done-mark{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--ok-bg);color:var(--ok);margin-bottom:14px}
.done-mark .ic{width:22px;height:22px}
.done-mark.mail{background:var(--accent-mid);color:var(--nav-ink)}
.si-list{margin:0 0 20px}
.si-list .ic{margin-top:3px}

/* ---------- task page ---------- */
.tgrid{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:26px;align-items:start}
.tgrid>*{min-width:0}
.needlist{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:12px}
.needlist li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;font-size:.9rem;color:var(--heading);line-height:1.5}
.needlist .ic{color:var(--blue);margin-top:3px;width:16px;height:16px}
.needlist code{font-weight:600;overflow-wrap:anywhere}
.retlist{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:8px}
.retlist li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;font-size:.88rem;color:var(--heading);line-height:1.5}
.retlist .ic{color:var(--danger);width:15px;height:15px;margin-top:3px}
.retnote{margin-top:10px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--bg-card);border:1px solid var(--border);font-size:.86rem;color:var(--text);line-height:1.55}
.retnote b{display:block;font-size:.74rem;color:var(--text-light);font-weight:600;margin-bottom:2px}
.ck-sum{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ck-sum .bar{width:120px;height:6px;border-radius:3px;background:var(--bg-alt);overflow:hidden}
.ck-sum .bar i{display:block;height:100%;width:100%;transform:scaleX(var(--p,0));transform-origin:left center;background:var(--ok);transition:transform .3s var(--ease)}
.ck-sum .txt{font-size:.78rem;color:var(--text-light);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.ck-sum.bad .bar i{background:var(--danger)}
.ck-sum.bad .txt{color:var(--danger)}
.ck-lede{padding:12px 16px 0}
.ckg{padding:16px 16px 18px;border-bottom:1px solid var(--border)}
.ckg:last-child{border-bottom:0}
.ckg-h{display:flex;align-items:center;gap:9px;margin-bottom:12px;flex-wrap:wrap}
.ckg-h h3{font-size:.9rem;font-weight:600;color:var(--heading)}
.ckg-h .why{font-size:.76rem;color:var(--text-light);margin-left:auto;text-align:right}
.spotn{width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;font-family:var(--mono);font-size:.68rem;font-weight:700;background:var(--accent-mid);color:var(--nav-ink);flex:0 0 auto}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.fgrid .full{grid-column:1 / -1}
.fld{min-width:0}
.fld>label,.fld>.flabel{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;color:var(--text-light);margin-bottom:6px}
.fld .rq{color:var(--danger);font-weight:700}
.fld .unit{position:relative}
.fld .unit input{padding-right:52px}
.fld .unit span{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:.78rem;color:var(--text-light);font-family:var(--mono);pointer-events:none}
.fld .hint{font-size:.76rem;color:var(--text-light);margin-top:6px;line-height:1.45}
.fld .hint code{color:var(--text)}
.fld .msg{display:none;align-items:flex-start;gap:6px;font-size:.8rem;margin-top:6px;line-height:1.45}
.fld .msg .ic{width:14px;height:14px;margin-top:2px;flex:0 0 auto}
.fld .msg .msg-act{display:block;margin-top:6px}
.fld.err .msg,.fld.warn .msg{display:flex}
.fld.err input,.fld.err select,.fld.err textarea{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}
.fld.err input:focus,.fld.err select:focus,.fld.err textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 32%,transparent)}
.fld.err .msg{color:var(--danger)}
.fld.warn input,.fld.warn select{border-color:var(--warn)}
.fld.warn .msg{color:var(--warn)}
.fld.hit{animation:hit 1.8s var(--ease)}
@keyframes hit{0%,40%{background:var(--accent-dim);box-shadow:0 0 0 8px var(--accent-dim)}100%{background:transparent;box-shadow:0 0 0 8px transparent}}
.stmt{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-inset);cursor:pointer}
.stmt input{margin-top:3px}
.stmt span{font-size:.88rem;color:var(--heading);line-height:1.5}
.fld.err .stmt{border-color:var(--danger)}
/* a table's finding is about the list (a joint missing from it), not about each cell: the cells stay calm, the message says what is wrong */
.fld.err .utable input,.fld.warn .utable input{border-color:var(--border-strong);box-shadow:none}
.fld.err .utable input:focus,.fld.warn .utable input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--accent-mid)}
.sig{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.sigcard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-inset);font-size:.82rem}
.sigcard .lvl{grid-row:1 / span 2}
.sigcard .sn{font-weight:600;color:var(--heading)}
.sigcard .sd{color:var(--text-light);font-size:.76rem;overflow-wrap:anywhere}
.sigcard .sd .mono{color:var(--text)}
.sig .note a{color:var(--blue-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
:root[data-theme="dark"] .sig .note a{color:var(--blue)}
.lvl{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:24px;padding:0 7px;border-radius:4px;font-family:var(--mono);font-size:.74rem;font-weight:700;background:var(--accent-mid);color:var(--nav-ink)}
.nolvl{display:inline-block;min-width:32px;text-align:center;color:var(--text-light)}
.lvl.l3{background:var(--teal-bg);color:var(--teal)}
.utable{width:100%;border-collapse:collapse}
.utable th{font-size:.72rem;font-weight:600;color:var(--text-light);text-align:left;padding:0 8px 6px 0;white-space:nowrap}
.utable td{padding:0 8px 10px 0;vertical-align:top}
.utable td.rn{width:42px;padding-top:11px;font-size:.76rem;font-weight:600;color:var(--text-light);font-family:var(--mono)}
.utable td.rx{width:36px;padding-right:0}
.subbar{position:sticky;bottom:12px;z-index:30;background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:12px 16px;display:flex;gap:12px 14px;align-items:center;flex-wrap:wrap}
.subbar .st{flex:1 1 240px;font-size:.86rem;color:var(--text);min-width:0}
.subbar .st b{color:var(--heading)}
.subbar .st .bad{color:var(--danger);font-weight:600}
.subbar .st .note{margin-top:2px}
.savedline{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--text-light)}
.savedline .ic{width:14px;height:14px}
.savedline.ok .ic{color:var(--ok)}
.savedline.warn{color:var(--warn)}
.savedline.bad{color:var(--danger)}
.fnames{list-style:none}
.fnames li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--border)}
.fnames li:last-child{border-bottom:0}
.fnames .fn{font-family:var(--mono);font-size:.84rem;font-weight:600;color:var(--heading);overflow-wrap:anywhere}
.fnames .fn .ext{font-weight:500;color:var(--text-light)}
.fnames .fu{font-size:.76rem;color:var(--text-light);grid-column:1}
.copybtn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--bg-card);font-size:.76rem;font-weight:600;color:var(--text);grid-row:1 / span 2;grid-column:2}
.copybtn:hover{border-color:var(--blue);color:var(--blue-ink)}
.copybtn.done{color:var(--ok);border-color:var(--ok)}
.att{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.att:last-child{border-bottom:0}
.att .an{font-size:.84rem;font-weight:600;color:var(--heading);line-height:1.35;overflow-wrap:anywhere}
.att .as{font-size:.76rem;color:var(--text-light);margin-top:1px;overflow-wrap:anywhere}
.att .as.mono{font-size:.72rem}
.att .ach{margin-top:6px}
.ftile{width:32px;height:38px;border-radius:4px;border:1px solid var(--border-strong);background:var(--bg-card);display:grid;place-items:end center;padding-bottom:4px;font-family:var(--mono);font-size:.56rem;font-weight:700;color:var(--text-light);position:relative;flex:0 0 auto;letter-spacing:.02em}
.ftile::before{content:'';position:absolute;top:-1px;right:-1px;width:9px;height:9px;background:var(--bg-alt);border-left:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong);border-radius:0 4px 0 3px}
.ftile.pdf{color:var(--danger)}
.ftile.xls{color:var(--ok)}
.ftile.doc{color:var(--blue-ink)}
:root[data-theme="dark"] .ftile.doc{color:var(--blue)}
.ftile.img{color:var(--warn)}
.ftile.form{place-items:center;padding:0;color:var(--blue-ink)}
.ftile.form .ic{width:16px;height:16px}
:root[data-theme="dark"] .ftile.form{color:var(--blue)}
.checks{list-style:none}
.checks li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);align-items:start;font-size:.86rem;color:var(--heading);line-height:1.5}
.checks li:last-child{border-bottom:0}
.checks .ic{width:16px;height:16px;margin-top:2px;color:var(--text-light)}
.checks code{overflow-wrap:anywhere}
.checks .nlist{display:flex;flex-direction:column;gap:3px;margin-top:5px}
.checks .nlist code{font-size:.76rem}
.itemrow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.itemrow>span{min-width:0}
/* a request's items, each answered where it stands (V1.3c): a checklist below, a file sent into its own place, a confirmation with optional evidence */
.ritems{list-style:none;margin-top:4px}
.ritem{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;padding:12px 0;border-top:1px solid var(--border);border-radius:var(--radius-sm)}
.ritem:first-child{border-top:0;padding-top:6px}
.rik{color:var(--blue);padding-top:3px}
.rik .ic{width:16px;height:16px}
.rib{min-width:0}
.rit{font-size:.9rem;color:var(--heading);line-height:1.5;overflow-wrap:anywhere}
.rit code{font-weight:600}
.ris{font-size:.8rem;color:var(--text-light);line-height:1.45;margin-top:2px}
.ropt{font-size:.78rem;color:var(--muted);font-weight:500;white-space:nowrap}
/* (V1.7b) a check item's own tick, in the kind icon's place; its words are the box's label */
.rik.itick{padding-top:2px}
.itick input{display:block;width:17px;height:17px;margin:0;accent-color:var(--blue);cursor:pointer}
.itick input:disabled{cursor:not-allowed}
.ritem.check label.rit{display:block;cursor:pointer}
.ritem.check.on label.rit{font-weight:500}
.ritem.hit{animation:hit 1.8s var(--ease)}
/* the place a file goes: empty, a dashed inset to drop on (the door's own edge, smaller); with files, their rows and a quiet "Add another file" */
.zone{margin-top:10px;min-width:0}
.fld>.zone{margin-top:0}
.zadd{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.zone.zempty .zadd{border:1.5px dashed var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-inset);padding:11px 12px 11px 14px;transition:border-color .15s,background .15s}
.zone.zempty.ev .zadd{padding:8px 10px 8px 12px}
.zone.drag .zadd,.zone.drag .zfiles{border-color:var(--blue);background:var(--accent-dim)}
.zone.drag:not(.zempty) .zadd{border-radius:var(--radius-sm)}
.zt{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;color:var(--text-light);margin-right:auto}
.zt .ic{color:var(--muted)}
.zone:not(.zempty) .zadd{margin-top:8px}
.zproj{height:32px;width:auto;max-width:100%;font-size:.8rem;padding:0 30px 0 10px}
.zfiles{list-style:none;display:flex;flex-direction:column;gap:8px;border-radius:var(--radius-sm);transition:background .15s}
.zfile{background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius-sm);overflow:hidden;min-width:0}
.zfile.bad{border-color:color-mix(in srgb,var(--danger) 42%,var(--border))}
.zfile.warn{border-color:color-mix(in srgb,var(--warn) 42%,var(--border))}
.zfile.ok{border-color:color-mix(in srgb,var(--ok) 34%,var(--border))}
.zf-h{display:grid;grid-template-columns:32px minmax(0,1fr) auto auto;gap:10px 12px;align-items:center;padding:9px 8px 9px 12px}
.zf-h .fname{font-size:.8rem}
.zf-a{display:flex;gap:6px;align-items:center}
.zfile .lines li{padding:9px 12px}
.zfile .prog{padding:0 12px 10px}
.zone.cert{margin-top:8px}
.zone.cert .zfile{border-color:var(--border)}
.zone.cert .zf-h{grid-template-columns:28px minmax(0,1fr) auto;padding:7px 6px 7px 10px;gap:8px 10px}
.zone.cert .ftile{width:28px;height:33px}
.zone.cert:not(.zempty) .zadd{margin-top:6px}
.zone.cert.zempty .zadd{border:0;background:none;padding:0}
.zone.cert.drag{outline:1.5px dashed var(--blue);outline-offset:5px;border-radius:var(--radius-sm)}
.zno{margin-top:6px}
/* the task's place in the transmittal draft, under the save state in the task bar */
.txline{margin-top:4px}
.savedline.inx .ic{color:var(--blue)}
.savedline.inx b{color:var(--heading);font-weight:600}
.savedline>span{min-width:0}
/* a manifest row's Take out: a quiet text button under the task, so the slip stays a slip */
.mout{display:inline-flex;align-items:center;min-height:24px;margin-top:2px;font-size:.74rem;font-weight:600;color:var(--text-light);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px;border-radius:3px}
.mout:hover{color:var(--blue-ink);text-decoration-color:var(--blue)}
:root[data-theme="dark"] .mout:hover{color:var(--nav-ink)}
.mout:disabled{opacity:.5;cursor:not-allowed}

/* ---------- the door ---------- */
.ugrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start}
.ugrid>*{min-width:0}
.urail{position:sticky;top:calc(var(--top-h) + 16px);display:flex;flex-direction:column;gap:16px}
.door{border:1.5px dashed var(--border-strong);border-radius:var(--radius);background:var(--bg-inset);padding:28px 22px;display:grid;justify-items:center;gap:6px;text-align:center;transition:border-color .15s,background .15s}
.door.drag{border-color:var(--blue);background:var(--accent-dim)}
.door .dic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--accent-mid);color:var(--nav-ink);margin-bottom:4px}
.door .dic .ic{width:22px;height:22px}
.door .big{font-size:1.04rem;font-weight:600;color:var(--heading)}
.door .small{font-size:.82rem;color:var(--text-light);max-width:62ch}
.door .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.projsw{display:flex;align-items:center;gap:10px;margin:0 0 14px;flex-wrap:wrap;font-size:.82rem;color:var(--text-light)}
.files{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:16px}
.fslip{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:border-color .2s}
.fslip.bad{border-color:color-mix(in srgb,var(--danger) 42%,var(--border))}
.fslip.ok{border-color:color-mix(in srgb,var(--ok) 40%,var(--border))}
.fslip.warn{border-color:color-mix(in srgb,var(--warn) 42%,var(--border))}
.fs-h{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:13px 12px 13px 16px}
.fs-n{min-width:0}
.fname{font-family:var(--mono);font-size:.84rem;font-weight:600;color:var(--heading);overflow-wrap:anywhere;line-height:1.5}
.fname.plain{font-family:var(--sans);font-size:.9rem}
.fs-meta{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:.76rem;color:var(--text-light);margin-top:3px;align-items:center}
.fs-meta .match{display:inline-flex;align-items:center;gap:5px;color:var(--text);font-weight:500;min-width:0}
.fs-meta .match .ic{width:13px;height:13px;color:var(--blue)}
.fs-meta .nomatch{color:var(--danger);font-weight:600}
.fs-st{display:flex;align-items:center;gap:7px;white-space:nowrap}
.fs-st .ic{width:19px;height:19px}
.fs-st.ok{color:var(--ok)}
.fs-st.bad{color:var(--danger)}
.fs-st.warn{color:var(--warn)}
.fs-st.busy{color:var(--text-light)}
.fs-st .lbl{font-size:.78rem;font-weight:600}
/* the rename diff: what must go is struck through, what must come is marked; on one click the struck part collapses */
.ndiff del{color:var(--danger);text-decoration:line-through;text-decoration-thickness:1.5px;background:var(--danger-bg);border-radius:2px;display:inline-block;max-width:min(100%,calc(var(--w,30) * 1ch + 4px));overflow:hidden;white-space:pre;vertical-align:bottom;transition:max-width .34s var(--ease),opacity .26s,padding .34s}
.ndiff ins{text-decoration:none;color:var(--ok);background:var(--ok-bg);border-radius:2px;white-space:pre-wrap;overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ndiff.done del{max-width:0;opacity:0;padding:0}
.ndiff.done ins{background:transparent}
.ndiff.done{color:var(--ok)}
.prog{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:0 16px 12px}
.prog .track{height:6px;border-radius:3px;background:var(--bg-alt);overflow:hidden}
.prog .track i{display:block;height:100%;width:100%;transform:scaleX(var(--p,0));transform-origin:left center;background:var(--blue);transition:transform .25s linear}
.prog.paused .track i{background:var(--warn)}
.prog.hash .track i{background:var(--muted)}
.prog .pt{font-family:var(--mono);font-size:.72rem;color:var(--text-light);white-space:nowrap;font-variant-numeric:tabular-nums}
.prog .pn{grid-column:1 / -1;font-size:.78rem;color:var(--text-light);display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;min-height:28px}
.prog.paused .pn{color:var(--warn);font-weight:600}
.prog .pn .ic{width:13px;height:13px}
/* the door line: one line per check, icon + words + colour, the fix beside it */
.lines{list-style:none;border-top:1px solid var(--border)}
.lines li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:4px 10px;padding:10px 16px;border-bottom:1px solid var(--border);align-items:start}
.lines li:last-child{border-bottom:0}
.lines .ic{width:16px;height:16px;margin-top:2px}
.lines li.bad>.ic{color:var(--danger)}
.lines li.warn>.ic{color:var(--warn)}
.lines li.ok>.ic{color:var(--ok)}
.lines li.info>.ic{color:var(--text-light)}
.lines .ct{font-size:.86rem;color:var(--heading);line-height:1.5;overflow-wrap:anywhere;min-width:0}
.lines .cp{display:block;font-size:.78rem;color:var(--text-light);margin-top:2px}
.lines .cx{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.lines li.enter{animation:lineIn .32s var(--ease) both}
@keyframes lineIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.inlfix{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}
.inlfix select{height:34px;max-width:100%;width:auto;min-width:220px;font-size:.82rem}
.drafthead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;font-size:.8rem;color:var(--text-light)}

/* the transmittal slip: a document-control form; solid when issued, dashed while it is a draft */
.slip{background:var(--bg-card);border:1.5px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0}
.slip.draft{border-style:dashed;box-shadow:none}
.slip-h{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;padding:11px 16px 10px;border-bottom:1.5px solid var(--border-strong)}
.slip.draft .slip-h{border-bottom-style:dashed}
.slip-h .sh{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-light)}
:lang(zh) .slip-h .sh{letter-spacing:.04em;font-size:.72rem}
.slip-h .sn{font-family:var(--mono);font-size:.84rem;font-weight:700;color:var(--heading);letter-spacing:.01em}
.slip.draft .slip-h .sn{font-weight:500;color:var(--text-light);font-size:.76rem}
.slip-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.slip-kv>div{padding:9px 16px;border-bottom:1px solid var(--border);min-width:0}
.slip-kv>div:nth-child(odd){border-right:1px solid var(--border)}
.slip-kv>div.wide{grid-column:1 / -1;border-right:0}
.slip-kv dt{font-size:.68rem;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.06em}
:lang(zh) .slip-kv dt{text-transform:none;letter-spacing:0;font-size:.74rem}
.slip-kv dd{font-size:.86rem;color:var(--heading);margin-top:1px;overflow-wrap:anywhere}
.slip-kv dd.mono{font-size:.76rem;line-height:1.55}
.slip-f{padding:10px 16px;font-size:.78rem;color:var(--text-light);line-height:1.5}
.mani{list-style:none}
.mani li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:9px;padding:9px 16px;border-bottom:1px solid var(--border);align-items:start}
.mani li:last-child{border-bottom:0}
.mani .ic{width:15px;height:15px;margin-top:2px}
.mani li.ok .ic{color:var(--ok)}
.mani li.bad .ic{color:var(--danger)}
.mani li.warn .ic{color:var(--warn)}
.mani li.busy .ic{color:var(--blue)}
.mani .mn{font-size:.84rem;font-weight:600;color:var(--heading);line-height:1.4;overflow-wrap:anywhere}
.mani .ms{font-family:var(--mono);font-size:.7rem;color:var(--text-light);overflow-wrap:anywhere}
.mani .ms.pl{font-family:var(--sans);font-size:.76rem}
.mani .mc{font-size:.74rem;font-weight:600;white-space:nowrap;padding-top:2px;color:var(--text-light)}
.mani li.bad .mc{color:var(--danger)}
.mani li.ok .mc{color:var(--ok)}
.mani li.warn .mc{color:var(--warn)}
.mani-empty{padding:20px 16px;text-align:center;font-size:.82rem;color:var(--text-light)}
.mani-empty .ic{width:22px;height:22px;color:var(--muted);margin-bottom:6px}

/* ---------- receipt ---------- */
.rgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.rgrid>*{min-width:0}
.tno-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.tno-h .tk{font-weight:600;color:var(--text-light);font-size:1.15rem;letter-spacing:-.01em}
.tno{font-family:var(--mono);font-size:1.55rem;font-weight:600;color:var(--heading);letter-spacing:-.01em;line-height:1.2;overflow-wrap:anywhere}
.ftable{width:100%;border-collapse:collapse;font-size:.84rem}
.ftable th{font-size:.7rem;font-weight:600;color:var(--text-light);text-align:left;padding:9px 16px;border-bottom:1px solid var(--border-strong);background:var(--bg-inset);white-space:nowrap}
.ftable td{padding:11px 16px;border-bottom:1px solid var(--border);vertical-align:top}
.ftable tbody tr:last-child td{border-bottom:0}
.ftable .fn{font-family:var(--mono);font-size:.76rem;font-weight:600;color:var(--heading);overflow-wrap:anywhere}
.ftable td:first-child{width:46%}
.ftable .s{font-size:.78rem;color:var(--text-light)}
.ftable .sha{display:block;font-family:var(--mono);font-size:.68rem;color:var(--text-light);overflow-wrap:anywhere;line-height:1.5;margin-top:4px}
.ftable .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.ftable td.act{text-align:right;width:1%;white-space:nowrap}
.trail{list-style:none;padding:16px}
.trail li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding-bottom:18px;position:relative}
.trail li::before{content:'';position:absolute;left:11px;top:26px;bottom:2px;width:2px;background:var(--border-strong);border-radius:1px}
.trail li:last-child{padding-bottom:0}
.trail li:last-child::before{display:none}
.trail li.done::before{background:color-mix(in srgb,var(--ok) 55%,var(--border-strong))}
.trail .dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--bg-alt);color:var(--text-light);box-shadow:0 0 0 3px var(--bg-card)}
.trail .dot .ic{width:13px;height:13px;stroke-width:2.4}
.trail li.done .dot{background:var(--ok-bg);color:var(--ok)}
.trail li.now .dot{background:var(--btn);color:#fff}
.trail li.bad .dot{background:var(--danger-bg);color:var(--danger)}
.trail .tt{font-size:.88rem;font-weight:600;color:var(--heading);line-height:1.4}
.trail li.pend .tt{color:var(--text-light);font-weight:500}
.trail li.bad .tt{color:var(--danger)}
.trail .td{font-size:.8rem;color:var(--text-light);margin-top:2px;line-height:1.45}
.trail .td .mono{font-size:.74rem}
.stamp{--stamp-ink:var(--blue-ink);border:2px solid currentColor;border-radius:6px;padding:10px 12px 9px;color:var(--stamp-ink);background:var(--bg-card);font-family:var(--mono)}
:root[data-theme="dark"] .stamp{--stamp-ink:var(--blue)}
.stamp .sh{display:block;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding-bottom:7px;border-bottom:1px solid currentColor}
.stamp .sbig{font-size:1.1rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.25;padding:9px 0 8px;margin-bottom:8px;border-bottom:1px solid currentColor;overflow-wrap:anywhere}
.stamp .sbig small{display:block;font-size:.74rem;letter-spacing:.02em;font-weight:600;text-transform:none;margin-top:2px;font-family:var(--sans)}
.stamp ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.stamp li{display:flex;gap:8px;align-items:center;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-light);line-height:1.35}
.stamp li .bx{width:12px;height:12px;border:1.5px solid currentColor;border-radius:2px;display:grid;place-items:center;flex:0 0 auto}
.stamp li.on{color:inherit;font-weight:700}
.stamp li.on .bx::after{content:'';width:6px;height:6px;background:currentColor;border-radius:1px}
.stamp li .cd{margin-left:auto;font-size:.62rem;white-space:nowrap;padding-left:6px}
.stamp li .sl{display:flex;flex-direction:column;min-width:0}
.stamp li .zh{text-transform:none;letter-spacing:0;font-family:var(--sans);font-weight:500}
.stamp .sf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;border-top:1px solid currentColor;margin-top:8px;padding-top:7px;font-size:.66rem;letter-spacing:.04em;text-transform:uppercase}
.stamp.ok{color:var(--ok)}
.stamp.back{color:var(--danger)}
.stamp.pend{color:var(--text-light);border-style:dashed}
.stamp.pend .sh{border-bottom-style:dashed}
.side-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ---------- sent, profile ---------- */
.ttable{width:100%;border-collapse:collapse;font-size:.86rem}
.ttable th{font-size:.7rem;font-weight:600;color:var(--text-light);text-align:left;padding:10px 16px;border-bottom:1px solid var(--border-strong);background:var(--bg-inset);white-space:nowrap}
.ttable th:first-child{border-radius:var(--radius) 0 0 0}
.ttable th:last-child{border-radius:0 var(--radius) 0 0}
.ttable td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
.ttable tbody tr:last-child td{border-bottom:0}
.ttable .docno{font-family:var(--mono);font-size:.82rem;font-weight:600;color:var(--heading);white-space:nowrap}
.ttable .s{font-size:.8rem;color:var(--text-light)}
.ttable .when{font-family:var(--mono);font-size:.78rem;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.ttable td.act{text-align:right;white-space:nowrap}
.ttable td.num{font-variant-numeric:tabular-nums}
.ptable{width:100%;border-collapse:collapse;font-size:.86rem}
.ptable th{font-size:.7rem;font-weight:600;color:var(--text-light);text-align:left;padding:9px 14px;border-bottom:1px solid var(--border-strong);background:var(--bg-inset);white-space:nowrap}
.ptable td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:top}
.ptable tbody tr:last-child td{border-bottom:0}
.ptable .nm{font-weight:600;color:var(--heading)}
.ptable .s{font-size:.78rem;color:var(--text-light)}
.ptable .mono{font-size:.8rem;color:var(--heading)}
.ptable td.act{text-align:right;white-space:nowrap;width:1%}
.ptable tr.editing td{background:var(--bg-inset)}
.sigedit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px;padding:16px;border-bottom:1px solid var(--border);background:var(--bg-inset)}
.sigedit .full{grid-column:1 / -1}
.sigedit .acts{grid-column:1 / -1;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sigedit .fld>label{margin-bottom:5px}
.confirm{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--danger-bg);font-size:.86rem;color:var(--heading)}
.confirm .grow{flex:1 1 240px;min-width:0}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.g2>*{min-width:0}
.kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:9px 16px;font-size:.88rem}
.kv dt{color:var(--text-light);font-size:.82rem;padding-top:1px}
.kv dd{color:var(--heading);min-width:0;overflow-wrap:anywhere}
.kv dd .note{margin-top:4px}
.kv .tzn{font-weight:600}
.kv .tzid{font-size:.76rem;color:var(--text-light);margin-left:4px}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .vgrid,.tgrid,.rgrid,.ugrid{grid-template-columns:minmax(0,1fr)}
  .urail{position:static}
  .rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail>*{min-width:0}
}
@media (max-width:960px){
  .vnav{display:none}
  .vtop-in{padding:0 16px;gap:12px;height:58px}
  :root{--top-h:58px}
  .vmain{padding:20px 16px 120px}
  .person .who{display:none}
  .person{padding:0 4px;border-radius:50%;width:40px;justify-content:center}
  .vtabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--bg-card);border-top:1px solid var(--border-strong);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -4px 16px rgba(13,24,36,.06)}
  .vtabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:58px;font-size:.74rem;font-weight:600;color:var(--text-light);position:relative}
  .vtabs a .ic{width:20px;height:20px}
  .vtabs a[aria-current="page"]{color:var(--nav-ink)}
  .vtabs a[aria-current="page"]::after{content:'';position:absolute;top:0;left:28%;right:28%;height:2px;border-radius:0 0 2px 2px;background:var(--blue)}
  .vtabs a:focus-visible{outline-offset:-3px}
  .vtabs .cnt{position:absolute;top:6px;left:calc(50% + 6px);font-size:.62rem;padding:0 5px;background:var(--danger-btn);color:#fff;box-shadow:0 0 0 2px var(--bg-card);line-height:1.55}
  .vtabs .cnt.calm{background:var(--bg-alt);color:var(--heading);box-shadow:inset 0 0 0 1px var(--border-strong),0 0 0 2px var(--bg-card)}
  body.has-tabs #toast{bottom:84px}
  .kv{grid-template-columns:1fr;gap:1px 0}
  .kv dt{margin-top:8px}
  .sigedit{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=search],input[type=tel],select,textarea{font-size:16px}
  .brand .wm{display:none}
  .brand .app{border-left:0;padding-left:0;font-weight:600;color:var(--heading)}
  .vh1{font-size:1.4rem}
  .thead .vh1{font-size:1.28rem}
  .vlede{font-size:.95rem}
  .tabs-wrap{margin:16px 0 12px}
  .tab{padding:10px 9px 11px;font-size:.84rem}
  .trow{grid-template-columns:38px minmax(0,1fr);padding:14px;gap:4px 12px}
  .trow .ta{grid-column:2;justify-content:space-between;margin-top:8px}
  .ta .btn{min-width:0}
  .tgroup{padding:9px 14px 7px}
  .rail{grid-template-columns:minmax(0,1fr)}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .ckg-h .why{margin-left:29px;text-align:left;flex-basis:100%}
  .utable thead{display:none}
  .utable,.utable tbody,.utable tr{display:block}
  .utable tr{padding:10px 0;border-bottom:1px dashed var(--border-strong);position:relative}
  .utable tr:last-child{border-bottom:0}
  .utable td{display:block;padding:0 0 8px}
  .utable td.rn{width:auto;padding:0 0 6px}
  .utable td.rx{position:absolute;top:6px;right:0;width:auto}
  .utable td[data-l]::before{content:attr(data-l);display:block;font-size:.72rem;font-weight:600;color:var(--text-light);margin-bottom:4px}
  .fs-h{grid-template-columns:30px minmax(0,1fr) auto;gap:10px;padding:12px 10px 12px 14px}
  .fs-h .fs-st{grid-column:2;grid-row:2}
  .zf-h{grid-template-columns:30px minmax(0,1fr) auto;gap:6px 10px;padding:9px 6px 9px 10px}
  .zf-h .fs-st{grid-column:2;grid-row:2}
  .zf-h .zf-a{grid-column:3;grid-row:1}
  .zone.zempty .zadd{padding:10px 10px 10px 12px}
  .zt{flex-basis:100%}
  .prog{padding:0 14px 12px}
  .lines li{grid-template-columns:18px minmax(0,1fr);padding:10px 14px}
  .lines .cx{grid-column:2;justify-content:flex-start;margin-top:4px}
  .subbar{bottom:72px;margin-left:-4px;margin-right:-4px}
  .subbar .btn{flex:1 1 auto}
  .door{padding:22px 14px}
  .tno{font-size:1.22rem}
  .slip-kv{grid-template-columns:minmax(0,1fr)}
  .slip-kv>div:nth-child(odd){border-right:0}
  .ftable thead,.ttable thead,.ptable thead{display:none}
  .ftable,.ftable tbody,.ftable tr,.ftable td,.ttable,.ttable tbody,.ttable tr,.ttable td,.ptable,.ptable tbody,.ptable tr,.ptable td{display:block;width:100%}
  .ftable tr,.ttable tr,.ptable tr{padding:12px 14px;border-bottom:1px solid var(--border)}
  .ftable tbody tr:last-child,.ttable tbody tr:last-child,.ptable tbody tr:last-child{border-bottom:0}
  .ftable td,.ttable td,.ptable td{padding:1px 0;border:0}
  .ftable td[data-l]::before,.ttable td[data-l]::before,.ptable td[data-l]::before{content:attr(data-l) ' ';font-size:.72rem;color:var(--text-light);font-family:var(--sans)}
  .ftable td.act,.ttable td.act,.ptable td.act{text-align:left;width:auto;padding-top:8px}
  .ttable tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center}
  .ttable td{grid-column:1}
  .ttable td.act{grid-column:2;grid-row:1 / span 4;padding-top:0}
  .g2{grid-template-columns:minmax(0,1fr)}
  .sigedit{grid-template-columns:minmax(0,1fr)}
  .si-card{padding:24px 18px 20px}
  .si-top{top:12px;right:12px}
  .code{gap:6px}
  .code input{height:50px;font-size:1.2rem}
  .headrow .clock{order:-1}
  .notifs{width:min(360px,calc(100vw - 24px))}
  .menu-pop{position:fixed;right:12px;left:12px;top:calc(var(--top-h) + 6px);max-width:none;width:auto;min-width:0}
}
@media (pointer:coarse){
  .btn,.btn.sm,.btn.xs,.iconbtn,.seg button,.copybtn,.langbtn,.tab{min-height:var(--tap)}
  .btn.sm,.btn.xs{height:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{
  .vtop,.vtabs,.netbar,#toast,.skip,.crumbs,.side-acts,.no-print{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .vmain{padding:0;max-width:none}
  .rgrid{grid-template-columns:minmax(0,1fr) 240px}
  .card,.slip,.stamp{box-shadow:none;break-inside:avoid}
}