/* mobile app shell (staff open on phones); centered device column on desktop; BONBU family palette */
  :root{
    --bg:#F4F5F7; --surface:#FFFFFF; --surface-2:#F0F1F4; --raised:#FFFFFF;
    --ink:#141821; --ink-soft:#5C6370; --ink-faint:#9BA1AD;
    --line:#ECEDF1; --line-strong:#E0E2E8;
    --primary:#171A21; --primary-soft:#272B34; --primary-ink:#FFFFFF;
    --accent:#17794C; --accent-deep:#0F5C39; --accent-bg:#E4F2EA; --accent-ink:#FFFFFF;
    --admin:#7C3AED; --admin-bg:#F0E9FE;
    --manager:#3B6FE0; --manager-bg:#E7EEFD;
    --team:#2F9E57; --team-bg:#E6F4EA;
    --good:#1E9E6A; --good-bg:#E4F6ED; --warn:#C98A12; --warn-bg:#FBF0D8; --crit:#E5484D; --crit-bg:#FCE7E8;
    --backdrop:#E9EBEF;
    --hero:#E6EDEA; --hero-ink:#16221B; --shelf-band:rgba(20,24,33,.12);
    --shadow:0 1px 2px rgba(20,24,33,.04), 0 6px 20px rgba(20,24,33,.06);
    --shadow-lift:0 10px 28px rgba(20,24,33,.10), 0 28px 60px rgba(20,24,33,.12);
    --serif:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif; --sans:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif; --mono:"DM Mono",ui-monospace,Menlo,monospace;
    --logo:url("data:image/png;base64,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");
  }
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
    --bg:#0E1014; --surface:#15181E; --surface-2:#1E2128; --raised:#171A20;
    --ink:#EAECF1; --ink-soft:#9CA3B0; --ink-faint:#6E7682;
    --line:#242832; --line-strong:#2F343F;
    --primary:#EDEFF3; --primary-soft:#D6D9E0; --primary-ink:#141821;
    --accent:#4ED08A; --accent-deep:#73DBA3; --accent-bg:#13291E; --accent-ink:#06130C;
    --admin:#A78BFA; --admin-bg:#241B3A; --manager:#7AA2F5; --manager-bg:#172238; --team:#5BC27E; --team-bg:#16291D;
    --good:#4ED08A; --good-bg:#13291E; --warn:#E0B255; --warn-bg:#332814; --crit:#F2686C; --crit-bg:#3A1E20;
    --backdrop:#080A0D;
    --hero:#18201B; --hero-ink:#E9F2EC; --shelf-band:rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 26px rgba(0,0,0,.38);
    --shadow-lift:0 12px 30px rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.55);
    color-scheme:dark;
  }}
  :root[data-theme="dark"]{
    --bg:#0E1014; --surface:#15181E; --surface-2:#1E2128; --raised:#171A20;
    --ink:#EAECF1; --ink-soft:#9CA3B0; --ink-faint:#6E7682;
    --line:#242832; --line-strong:#2F343F;
    --primary:#EDEFF3; --primary-soft:#D6D9E0; --primary-ink:#141821;
    --accent:#4ED08A; --accent-deep:#73DBA3; --accent-bg:#13291E; --accent-ink:#06130C;
    --admin:#A78BFA; --admin-bg:#241B3A; --manager:#7AA2F5; --manager-bg:#172238; --team:#5BC27E; --team-bg:#16291D;
    --good:#4ED08A; --good-bg:#13291E; --warn:#E0B255; --warn-bg:#332814; --crit:#F2686C; --crit-bg:#3A1E20;
    --backdrop:#080A0D;
    --hero:#18201B; --hero-ink:#E9F2EC; --shelf-band:rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 26px rgba(0,0,0,.38);
    --shadow-lift:0 12px 30px rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.55);
    color-scheme:dark;
  }

  *{box-sizing:border-box}
  body{background:var(--backdrop);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased}
  h1,h2,h3,h4{font-family:var(--serif);font-weight:700;margin:0;line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
  p{margin:0} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
  .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
  :focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:6px}

  .app{max-width:440px;margin:0 auto;background:var(--bg);min-height:100vh;position:relative;
    box-shadow:0 0 0 1px var(--line), 0 30px 80px rgba(30,36,26,.14)}
  .screen{padding:16px 16px 104px;min-height:100vh}

  /* app bar */
  .appbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--bg) 90%,transparent);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:10px 14px;display:flex;align-items:center;gap:10px}
  .logo{font-family:var(--serif);font-weight:900;font-size:16px;white-space:nowrap}
  .logo .d{color:var(--accent)}
  .whoami{margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);
    border-radius:999px;padding:4px 6px 4px 4px;cursor:pointer;box-shadow:var(--shadow)}
  .whoami:hover{border-color:var(--line-strong)}
  .whoami .nm{font-size:12.5px;font-weight:700;line-height:1.05}
  .whoami .rl{font-size:10px;font-family:var(--mono)}
  .avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;flex:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
  .avatar.lg{width:46px;height:46px;font-size:17px}
  .avatar.sm{width:26px;height:26px;font-size:10.5px}
  .theme-btn{border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;width:30px;height:30px;font-size:13px;color:var(--ink);flex:none}
  .proto-pill{font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--warn);background:var(--warn-bg);border-radius:999px;padding:2px 7px;white-space:nowrap}

  .chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:999px;white-space:nowrap}
  .chip.admin{background:var(--admin-bg);color:var(--admin)} .chip.manager{background:var(--manager-bg);color:var(--manager)} .chip.team{background:var(--team-bg);color:var(--team)}
  .chip.good{background:var(--good-bg);color:var(--good)} .chip.warn{background:var(--warn-bg);color:var(--warn)} .chip.crit{background:var(--crit-bg);color:var(--crit)}
  .chip.soft{background:var(--surface-2);color:var(--ink-soft)}

  /* headings within screens */
  .greet{font-size:12px;color:var(--ink-faint);font-family:var(--mono);letter-spacing:.02em}
  .h-screen{font-size:24px;font-weight:900;margin:2px 0 2px;letter-spacing:-.01em}
  .sub{font-size:13px;color:var(--ink-soft)}
  .sect{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--ink);margin:20px 2px 9px;display:flex;align-items:center;justify-content:space-between}
  .sect .a{font-size:11.5px;color:var(--accent-deep);font-weight:600;cursor:pointer}

  .card{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
  .pad{padding:15px}
  .stack{display:flex;flex-direction:column;gap:11px}

  /* shift card */
  .shift{background:linear-gradient(150deg,var(--accent-bg),var(--surface) 70%);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
  .shift .lab{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep)}
  .shift .tm{font-family:var(--serif);font-weight:900;font-size:28px;margin-top:4px}
  .shift .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--ink-soft)}
  .shift .meta b{color:var(--ink)}

  /* notice */
  .notice{display:flex;gap:10px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:11px 13px}
  .notice .i{font-size:15px;flex:none}
  .notice .t{font-weight:700;font-size:13px}
  .notice .b{font-size:12.5px;color:var(--ink-soft);margin-top:1px}
  .notice .mt{font-size:10.5px;color:var(--ink-faint);font-family:var(--mono);margin-top:3px}

  /* progress ring + bar */
  .ring{--p:0;width:52px;height:52px;border-radius:50%;flex:none;
    background:conic-gradient(var(--accent) calc(var(--p)*1%), var(--surface-2) 0);display:grid;place-items:center}
  .ring::after{content:attr(data-l);width:40px;height:40px;background:var(--surface);border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-weight:500;font-size:13px}
  .bar{height:7px;border-radius:4px;background:var(--surface-2);overflow:hidden}
  .bar i{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .3s ease}

  /* checklist */
  .todo-head{display:flex;align-items:center;gap:13px;padding:14px 15px;border-bottom:1px solid var(--line)}
  .todo-head h4{font-size:15px}
  .todo-head .s{font-size:12px;color:var(--ink-soft);font-family:var(--mono)}
  .item{display:flex;gap:12px;align-items:flex-start;padding:12px 15px;border-top:1px solid var(--line)}
  .item:first-child{border-top:none}
  .tickbox{width:24px;height:24px;border-radius:7px;border:2px solid var(--line-strong);flex:none;margin-top:1px;display:grid;place-items:center;color:#fff;font-size:14px;transition:all .12s}
  .item.done .tickbox{background:var(--accent);border-color:var(--accent)}
  .item .lbl{font-size:13.5px;font-weight:500;flex:1;min-width:0}
  .item.done .lbl{color:var(--ink-faint);text-decoration:line-through}
  .item .tag{font-size:9.5px;font-weight:700;color:var(--manager);background:var(--manager-bg);border-radius:5px;padding:1px 5px;margin-left:6px;white-space:nowrap;text-decoration:none;display:inline-block}
  .photo-row{grid-column:1/-1;display:flex;gap:8px;padding:0 15px 12px 51px;margin-top:-4px}
  .ptile{flex:1;border-radius:10px;border:1px solid var(--line);overflow:hidden;text-align:center;min-width:0}
  .ptile .im{height:64px;display:grid;place-items:center;font-size:22px}
  .ptile.bench .im{background:repeating-linear-gradient(45deg,var(--accent-bg),var(--accent-bg) 8px,var(--surface) 8px,var(--surface) 16px)}
  .ptile.mine .im{background:var(--surface-2);color:var(--ink-faint)}
  .ptile.done .im{background:linear-gradient(135deg,#9db07a,#6b7a2e);color:#fff}
  .ptile .cap{font-size:9.5px;font-weight:700;letter-spacing:.03em;padding:4px;color:var(--ink-soft);text-transform:uppercase}

  /* generic list row */
  .row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line)}
  .row:first-child{border-top:none}
  .row .rt{font-weight:600;font-size:13.5px} .row .rd{font-size:12px;color:var(--ink-soft)}
  .row .rr{margin-left:auto;text-align:right;flex:none}
  .num{font-family:var(--mono);font-weight:500}

  /* roster */
  .roster{display:flex;flex-direction:column;gap:7px}
  .rday{display:grid;grid-template-columns:44px 1fr;gap:11px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
  .rday.off{opacity:.6}
  .rday .dn{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ink-soft);text-align:center}
  .rday .dn b{display:block;font-size:17px;color:var(--ink);font-family:var(--serif);font-weight:700}
  .rday .sh{font-size:13px;font-weight:600}
  .rday .sh small{display:block;font-size:11px;color:var(--ink-soft);font-weight:400;font-family:var(--mono)}
  .rday.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

  /* SOP */
  .search{display:flex;align-items:center;gap:9px;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:12px;padding:11px 13px}
  .search input{border:none;background:none;outline:none;flex:1;min-width:0;font-family:var(--sans);font-size:15px;color:var(--ink)}
  .search .ic{color:var(--ink-faint);font-size:15px}
  .cats{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .cats::-webkit-scrollbar{display:none}
  .catbtn{white-space:nowrap;font-size:12px;font-weight:600;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
  .catbtn.on{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
  .sop{display:flex;gap:12px;padding:13px 14px;border-top:1px solid var(--line);cursor:pointer}
  .sop:first-child{border-top:none}
  .sop .sic{width:38px;height:38px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;font-size:18px;flex:none}
  .sop .st{font-weight:700;font-size:14px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .sop .ss{font-size:12px;color:var(--ink-soft);margin-top:2px}
  .sop .sk{font-size:10.5px;color:var(--ink-faint);font-family:var(--mono);margin-top:4px}
  .empty{text-align:center;padding:26px 16px;color:var(--ink-faint)}
  .empty .big{font-size:30px} .empty .q{font-family:var(--mono);color:var(--ink-soft)}

  /* buttons */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:14px;padding:12px 18px;border-radius:12px}
  .btn.pri{background:var(--accent);color:var(--accent-ink);box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 30%,transparent)}
  .btn.pri:active{transform:translateY(1px)}
  .btn.ghost{background:var(--surface);border:1px solid var(--line-strong);color:var(--ink)}
  .btn.block{width:100%}
  .btn:disabled{opacity:.5}

  /* stat tiles */
  .stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
  .stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px}
  .stat .v{font-family:var(--serif);font-weight:900;font-size:24px}
  .stat .k{font-size:10.5px;color:var(--ink-faint);font-weight:600;letter-spacing:.03em;text-transform:uppercase;margin-top:2px}
  .stat.g .v{color:var(--good)} .stat.w .v{color:var(--warn)} .stat.c .v{color:var(--crit)}

  /* quiz */
  .qopt{display:flex;gap:11px;align-items:center;text-align:left;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:12px;padding:13px;font-size:14px;width:100%;margin-top:9px}
  .qopt .qo{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line-strong);flex:none;display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700}
  .qopt.ok{border-color:var(--good);background:var(--good-bg)} .qopt.ok .qo{background:var(--good);border-color:var(--good);color:#fff}
  .qopt.no{border-color:var(--crit);background:var(--crit-bg)} .qopt.no .qo{background:var(--crit);border-color:var(--crit);color:#fff}
  .qopt.mut{opacity:.5}

  /* slider */
  input[type=range]{width:100%;accent-color:var(--accent)}
  textarea,select,input[type=text]{width:100%;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:11px;padding:11px 12px;outline:none}
  textarea:focus,select:focus,input:focus{border-color:var(--accent)}
  label.fld{font-size:12px;font-weight:700;color:var(--ink-soft);display:block;margin:12px 2px 6px;letter-spacing:.02em}

  /* tab bar */
  .tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;pointer-events:none;z-index:40}
  .tabbar .in{pointer-events:auto;width:min(440px,100%);background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);display:flex;padding-bottom:env(safe-area-inset-bottom,0px)}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 2px 8px;color:var(--ink-faint);font-size:10px;font-weight:600}
  .tab .ti{font-size:19px;line-height:1}
  .tab.on{color:var(--ink);font-weight:700}

  /* sheet */
  .sheet-bg{position:fixed;inset:0;background:rgba(20,24,16,.44);z-index:50;display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .2s}
  .sheet-bg.show{opacity:1}
  .sheet{width:min(440px,100%);background:var(--bg);border-radius:20px 20px 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom,0px));max-height:82vh;overflow-y:auto;
    transform:translateY(20px);transition:transform .2s}
  .sheet-bg.show .sheet{transform:none}
  .grab{width:38px;height:4px;border-radius:2px;background:var(--line-strong);margin:6px auto 12px}
  .sheet h3{font-size:18px;margin-bottom:3px}
  .prow{display:flex;align-items:center;gap:12px;padding:11px 8px;border-radius:12px;width:100%;text-align:left}
  .prow:hover{background:var(--surface-2)}
  .prow.cur{background:var(--accent-bg)}
  .prow .pn{font-weight:700;font-size:14px} .prow .pd{font-size:11.5px;color:var(--ink-soft);font-family:var(--mono)}
  .rolehdr{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:12px 8px 3px}

  /* toast */
  .toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:var(--bg);font-size:13px;font-weight:600;
    padding:11px 18px;border-radius:999px;z-index:60;box-shadow:var(--shadow-lift);max-width:86%;text-align:center;opacity:0;transition:opacity .25s}
  .toast.show{opacity:1}

  /* chat */
  .chan{display:flex;gap:12px;align-items:center;padding:13px 14px;border-top:1px solid var(--line);cursor:pointer;width:100%;text-align:left}
  .chan:first-child{border-top:none}
  .chan .ci{width:42px;height:42px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;font-size:18px;flex:none}
  .chan .ci.team{background:var(--accent-bg);color:var(--accent-deep);font-family:var(--serif);font-weight:900}
  .chan .cbody{flex:1;min-width:0}
  .chan .ct{font-weight:700;font-size:14px;display:flex;align-items:center;gap:7px}
  .chan .cs{font-size:12px;color:var(--ink-soft);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chan .cm{margin-left:auto;text-align:right;flex:none;font-size:10px;color:var(--ink-faint);font-family:var(--mono)}
  .thread-badge{font-size:9px;font-weight:800;letter-spacing:.04em;color:var(--manager);background:var(--manager-bg);border-radius:5px;padding:1px 6px}
  .convo-head{display:flex;align-items:center;gap:11px;padding:2px 0 12px;border-bottom:1px solid var(--line);margin-bottom:12px}
  .back{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-strong);background:var(--surface);font-size:16px;flex:none;color:var(--ink)}
  .convo-head .ct{font-weight:700;font-size:15px} .convo-head .cs{font-size:11.5px;color:var(--ink-soft)}
  .ctx{display:flex;gap:9px;align-items:flex-start;background:var(--manager-bg);border:1px solid color-mix(in srgb,var(--manager) 26%,transparent);border-radius:11px;padding:10px 12px;font-size:12px;color:var(--ink);margin-bottom:12px}
  .ctx b{color:var(--manager)}
  .convo{display:flex;flex-direction:column;gap:9px}
  .msg{display:flex;gap:8px;align-items:flex-end;max-width:88%}
  .msg.me{align-self:flex-end;flex-direction:row-reverse}
  .msg .mbody{min-width:0}
  .msg .nm{font-size:10.5px;color:var(--ink-faint);margin:0 0 2px 3px;font-weight:600}
  .bubble{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:9px 13px;font-size:13.5px;line-height:1.42;overflow-wrap:anywhere}
  .msg.me .bubble{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
  .msg .tm{font-size:9px;color:var(--ink-faint);font-family:var(--mono);margin:3px 3px 0}
  .msg.me .tm{text-align:right}
  .composer{position:sticky;bottom:72px;display:flex;gap:8px;align-items:center;margin-top:14px;background:var(--bg);padding:8px 0 2px}
  .composer input{flex:1;border-radius:999px}
  .composer .send{width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--accent-ink);flex:none;font-size:18px;display:grid;place-items:center;box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 30%,transparent)}
  .chat-note{font-size:11px;color:var(--ink-faint);font-style:italic;text-align:center;margin-top:14px}
  .seg2{display:flex;gap:6px;background:var(--surface-2);border-radius:11px;padding:4px}
  .segbtn{flex:1;border-radius:8px;padding:9px;font-weight:700;font-size:13px;color:var(--ink-soft)}
  .segbtn.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
  button.ptile{cursor:pointer}

  /* ===== editorial "book-app" Today ===== */
  .app.today-hero .appbar{background:var(--hero);border-bottom-color:transparent}
  .hero2{margin:-16px -16px 0;background:var(--hero);border-radius:0 0 30px 30px;padding:14px 18px 20px}
  .streak{display:flex;align-items:center;gap:12px}
  .streak .sic{width:40px;height:40px;border-radius:12px;background:rgba(0,0,0,.08);display:grid;place-items:center;font-size:18px;flex:none}
  .streak .st{flex:1;min-width:0}
  .streak .st b{font-size:14.5px;font-weight:800;color:var(--hero-ink);display:block;line-height:1.15}
  .streak .st span{font-size:12.5px;color:color-mix(in srgb,var(--hero-ink) 58%,transparent)}
  .streak .dots{display:flex;gap:5px;flex:none}
  .streak .dots i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--hero-ink) 22%,transparent)}
  .streak .dots i.on{background:var(--hero-ink)}
  .bighead{font-family:var(--sans);font-weight:700;font-size:clamp(37px,10.5vw,50px);line-height:.95;letter-spacing:-.03em;color:var(--hero-ink);margin:20px 0 2px;text-wrap:balance}
  .shelf-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 0 8px}
  .shelf-head .t{font-weight:800;font-size:16px;color:var(--hero-ink)}
  .pager{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--hero-ink);background:rgba(255,255,255,.45);border-radius:999px;padding:5px 13px}
  .pager .c{opacity:.45;font-size:16px}
  .shelf-wrap{position:relative;margin:0 -18px}
  .shelf{display:flex;gap:14px;overflow-x:auto;padding:6px 18px 20px;scrollbar-width:none}
  .shelf::-webkit-scrollbar{display:none}
  .bookcard{position:relative;flex:0 0 auto;width:116px;height:166px;border-radius:9px;padding:12px;display:flex;flex-direction:column;justify-content:space-between;
    box-shadow:0 10px 20px rgba(0,0,0,.16);cursor:pointer;color:#fff}
  .bookcard .bt{font-weight:700;font-size:12.5px;line-height:1.22;text-shadow:0 1px 3px rgba(0,0,0,.28);overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
  .bookcard .bb{display:flex;align-items:center;justify-content:space-between}
  .bookcard .ck{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.26);display:grid;place-items:center;font-size:15px;border:1.5px solid rgba(255,255,255,.65)}
  .bookcard.done .ck{background:#fff;color:#14281c;border-color:#fff}
  .bookcard .cam{font-size:13px;background:rgba(255,255,255,.26);border-radius:7px;padding:2px 6px}
  .shelf-shadow{position:absolute;left:14px;right:14px;bottom:14px;height:56px;border-radius:14px;background:linear-gradient(var(--shelf-band),transparent);pointer-events:none}
  .bolt{position:absolute;bottom:36px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(0,0,0,.3));box-shadow:0 1px 1px rgba(0,0,0,.35);pointer-events:none}
  .bolt.l{left:26px}.bolt.r{right:26px}
  .ftabs{display:flex;gap:18px;overflow-x:auto;padding:2px 18px 0;margin:4px -18px 0;scrollbar-width:none}
  .ftabs::-webkit-scrollbar{display:none}
  .ftab{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:16px;font-weight:700;color:color-mix(in srgb,var(--hero-ink) 45%,transparent);padding-bottom:2px}
  .ftab.on{color:var(--hero-ink)}
  .ftab .cnt{font-size:11px;font-weight:800;min-width:19px;height:19px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:color-mix(in srgb,var(--hero-ink) 10%,transparent);color:var(--hero-ink)}
  .ftab.on .cnt{background:var(--primary);color:var(--primary-ink)}
  .sheet2{background:var(--surface);border:1px solid var(--line);border-radius:26px;margin:16px 0 0;padding:18px;box-shadow:var(--shadow)}
  .sheet2 .chips{display:flex;gap:8px;margin-bottom:14px}
  .sheet2 .pch{font-size:12px;font-weight:700;border-radius:999px;padding:6px 14px;background:var(--surface-2);color:var(--ink-soft)}
  .sheet2 .pch.on{background:var(--ink);color:var(--bg)}
  .sheet2 h3{font-size:19px}
  .sheet2 .row2{display:grid;grid-template-columns:1fr 1.15fr;gap:14px;align-items:start}
  .sheet2 .big{font-family:var(--sans);font-weight:800;font-size:44px;letter-spacing:-.02em;line-height:1;color:var(--ink)}
  .sopgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .sopcover{aspect-ratio:3/4;border-radius:11px;padding:11px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;cursor:pointer;box-shadow:0 6px 14px rgba(0,0,0,.14)}
  .sopcover .se{font-size:24px}
  .sopcover .sv{font-weight:700;font-size:12px;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.28);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
  @media(max-width:360px){.sheet2 .row2{grid-template-columns:1fr}}

  /* ===== attendance / clock ===== */
  .clk-tl{margin-top:13px;border-top:1px solid var(--line)}
  .clk-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
  .clk-row:last-child{border-bottom:none}
  .clk-row .cl{color:var(--ink-faint);font-weight:600}
  .clk-row.on .cl{color:var(--ink)}
  .clk-row .cr{display:flex;align-items:center;gap:8px}
  .clk-thumb{width:24px;height:24px;border-radius:6px;background-size:cover;background-position:center;display:inline-block;border:1px solid var(--line);flex:none}
  .clk-actions{display:flex;gap:9px;margin-top:14px}
  .clk-live{display:inline-flex;align-items:center;gap:6px}
  .clk-live .dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px var(--good-bg)}
  .clk-live.brk .dot{background:var(--warn);box-shadow:0 0 0 3px var(--warn-bg)}
  .selfie{margin-top:14px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
  .selfie .im{height:210px;display:grid;place-items:center;font-size:42px;color:var(--ink-faint)}
  .sub2{font-size:12px;color:var(--ink-soft);margin-top:2px}
  .late-note{margin-top:12px;border-radius:11px;padding:10px 13px;font-size:12.5px;font-weight:600;line-height:1.35}
  .late-note.ok{background:var(--good-bg);color:var(--good)}
  .late-note.bad{background:var(--crit-bg);color:var(--crit)}
  .geo{display:flex;align-items:center;gap:11px;margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:var(--surface)}
  .geo .gi{font-size:18px;flex:none}
  .geo .gt{flex:1;min-width:0}
  .geo .gt b{font-size:13.5px;display:block}
  .geo .gt span{font-size:12px;color:var(--ink-soft)}
  .gchip{font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap;flex:none}
  .gchip.ok{background:var(--good-bg);color:var(--good)}
  .gchip.far{background:var(--crit-bg);color:var(--crit)}
  .geo-sim{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-soft);margin-top:10px;cursor:pointer}
  .geo-sim input{accent-color:var(--accent);width:16px;height:16px}

  .fade{animation:fd .28s ease both} @keyframes fd{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .spark{display:block;width:100%;height:40px}
  .disabled-note{text-align:center;padding:40px 20px}
  .disabled-note .big{font-size:34px}

  /* ===== login gate ===== */
  .gate{position:fixed;inset:0;z-index:200;background:
    radial-gradient(120% 80% at 50% -10%, var(--hero) 0%, transparent 55%), var(--backdrop);
    display:grid;place-items:center;padding:24px;overflow-y:auto}
  .gate.hide{display:none}
  .login{width:min(430px,100%);background:var(--surface);border:1px solid var(--line);border-radius:22px;
    box-shadow:var(--shadow-lift);padding:26px 22px;margin:auto}
  .login .brand{font-family:var(--serif);font-weight:900;font-size:26px;letter-spacing:-.01em;text-align:center}
  .login .brand .d{color:var(--accent)}
  .login .url{text-align:center;font-family:var(--mono);font-size:12px;color:var(--ink-faint);margin-top:2px}
  .login .tag{text-align:center;font-size:13px;color:var(--ink-soft);margin:10px 0 18px}
  .login .seg2{margin-bottom:16px}
  .login label.fld{margin-top:0;margin-bottom:5px}
  .login .fld+input,.login .fld+.pinwrap{margin-bottom:12px}
  .pinwrap{display:flex;gap:9px}
  .pinwrap input{text-align:center;font-family:var(--mono);letter-spacing:.3em}
  .err{color:var(--crit);font-size:12.5px;font-weight:600;margin:2px 2px 10px;min-height:16px}
  .demo-note{font-size:11px;color:var(--ink-faint);text-align:center;margin-top:14px;line-height:1.5}
  .demo-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:9px}
  .demo-chip{font-size:11px;font-weight:700;border:1px solid var(--line-strong);background:var(--surface);
    border-radius:999px;padding:5px 11px;color:var(--ink-soft)}
  .demo-chip:hover{border-color:var(--accent);color:var(--accent-deep)}
  .stationgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
  .stationbtn{border:1.5px solid var(--line-strong);background:var(--surface);border-radius:13px;padding:13px 10px;text-align:center}
  .stationbtn .se{font-size:22px}
  .stationbtn .sn{font-size:12.5px;font-weight:700;margin-top:3px}
  .stationbtn.on{border-color:var(--accent);background:var(--accent-bg)}

  /* ===== brand logo (image wordmark) ===== */
  .logo.brandmark{display:inline-block;width:74px;height:22px;vertical-align:middle;font-size:0;color:transparent;
    background:var(--logo) no-repeat left center;background-size:contain}
  .login .brand.brandmark{width:122px;height:34px;margin:0 auto 2px;font-size:0;
    background:var(--logo) no-repeat center;background-size:contain}
  .logomark{display:block;width:100%;height:100%;background:var(--logo) no-repeat center;background-size:contain}
  /* black logo → invert onto dark surfaces */
  .inv-light{filter:invert(1)}
  :root[data-theme="dark"] .inv-light{filter:none}
  :root[data-theme="dark"] .inv-dark{filter:invert(1)}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .inv-light{filter:none}
    :root:not([data-theme="light"]) .inv-dark{filter:invert(1)}
  }

  /* ===== desktop icon-rail shell (Panze-style) ===== */
  .sidebar{display:none}
  .ab-ico{width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-size:15px;color:var(--ink-soft);flex:none}
  .ab-ico:hover{border-color:var(--line-strong);color:var(--ink)}
  .desk-only{display:none}
  @media (min-width:1000px){
    body{background:var(--backdrop)}
    .sidebar{display:flex;flex-direction:column;align-items:center;gap:5px;position:fixed;left:0;top:0;bottom:0;width:78px;z-index:35;
      background:var(--surface);border-right:1px solid var(--line);padding:16px 0 14px;overflow-y:auto;scrollbar-width:none}
    .sidebar::-webkit-scrollbar{display:none}
    .sb-logo{width:58px;height:30px;display:grid;place-items:center;margin-bottom:10px;flex:none}
    .sb-div{width:36px;height:1px;background:var(--line);margin:5px 0;flex:none}
    .sb-item{position:relative;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:19px;color:var(--ink-soft);background:transparent;cursor:pointer;flex:none}
    .sb-item:hover{background:var(--surface-2);color:var(--ink)}
    .sb-item.on{background:var(--primary);color:var(--primary-ink);box-shadow:var(--shadow)}
    .sb-item .badge{position:absolute;top:3px;right:3px;min-width:17px;height:17px;font-size:9.5px;font-weight:800;background:var(--crit);color:#fff;border-radius:999px;display:grid;place-items:center;padding:0 3px;border:2px solid var(--surface)}
    .sb-item[data-label]:hover::after{content:attr(data-label);position:absolute;left:54px;top:50%;transform:translateY(-50%);white-space:nowrap;
      background:var(--primary);color:var(--primary-ink);font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:9px;box-shadow:var(--shadow-lift);z-index:60;pointer-events:none}
    .sb-foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:7px;padding-top:10px}

    .app{margin:0 0 0 78px;max-width:none;background:var(--backdrop);box-shadow:none;min-height:100vh}
    .appbar{max-width:1200px;margin:0 auto;background:transparent;border-bottom:none;backdrop-filter:none;padding:20px 32px 4px;gap:12px}
    .appbar .logo{display:inline-block} .appbar .logo.brandmark{width:92px;height:28px} .appbar .proto-pill{display:none}
    .appbar .whoami{margin-left:4px}
    .desk-only{display:inline-grid}
    .screen{max-width:580px;margin:0 auto;padding:14px 32px 60px}
    .screen.wide{max-width:1200px}
    .tabbar{display:none}
    .sheet-bg{align-items:center}
    .sheet{width:min(560px,100%);border-radius:24px;max-height:86vh}
    .app.today-hero .appbar{background:transparent}
    .dt-wrap{overflow-x:visible}
  }

  /* ===== data-hub tables & dashboard (both viewports) ===== */
  .pagehead{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
  .pagehead .ph-l{flex:1;min-width:0}
  .toolbtn{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13px;padding:9px 14px;border-radius:11px;background:var(--accent);color:var(--accent-ink);white-space:nowrap}
  .toolbtn.ghost{background:var(--surface);border:1px solid var(--line-strong);color:var(--ink)}
  .dt-wrap{margin-top:14px;border:1px solid var(--line);border-radius:14px;overflow:auto;background:var(--surface);box-shadow:var(--shadow)}
  table.dt{width:100%;border-collapse:collapse;font-size:13px;min-width:max-content}
  table.dt th{position:sticky;top:0;background:var(--surface-2);text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);padding:10px 13px;white-space:nowrap}
  table.dt td{padding:11px 13px;border-top:1px solid var(--line);white-space:nowrap}
  table.dt tr:hover td{background:var(--surface-2)}
  table.dt td.n,table.dt th.n{text-align:right;font-family:var(--mono)}
  .pos{color:var(--good);font-weight:600} .neg{color:var(--crit);font-weight:600}
  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:16px}
  .kpi{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:15px;box-shadow:var(--shadow)}
  .kpi .kv{font-family:var(--serif);font-weight:900;font-size:27px;line-height:1}
  .kpi .kk{font-size:11px;color:var(--ink-faint);font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin-top:5px}
  .kpi .kd{font-size:11.5px;color:var(--ink-soft);margin-top:4px}
  .kpi.g{border-top:3px solid var(--good)} .kpi.w{border-top:3px solid var(--warn)} .kpi.c{border-top:3px solid var(--crit)} .kpi.b{border-top:3px solid var(--manager)}
  .dash-grid{display:grid;gap:16px;margin-top:16px}
  @media(min-width:1000px){.dash-grid.two{grid-template-columns:1fr 1fr}}
  .barlist{display:flex;flex-direction:column;gap:11px}
  .barrow .bl{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:4px}
  .barrow .bl b{font-weight:700} .barrow .bl .num{color:var(--ink-soft)}
  /* neat ranked list (channel-comparison style) */
  .ranklist{display:flex;flex-direction:column;gap:14px}
  .rankrow{display:flex;align-items:center;gap:11px}
  .rk-dot{width:9px;height:9px;border-radius:50%;flex:none}
  .rk-main{flex:1;min-width:0}
  .rk-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px;align-items:baseline}
  .rk-lbl{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rk-val{font-size:12.5px;color:var(--ink-soft);font-weight:600;flex:none}
  .rk-track{height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden}
  .rk-track i{display:block;height:100%;border-radius:5px;transition:width .3s}
  .rk-share{font-size:11px;color:var(--ink-faint);width:36px;text-align:right;flex:none;font-family:var(--mono)}
  /* chart card + legend */
  .chartcard{padding:16px 16px 10px}
  .chart-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;padding-left:2px}
  .chart-legend span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-soft);font-weight:600}
  .chart-legend i{width:9px;height:9px;border-radius:3px;flex:none}
  .kpi .kdelta{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;border-radius:999px;padding:2px 7px;margin-top:7px}
  .kdelta.up{color:var(--good);background:var(--good-bg)} .kdelta.down{color:var(--crit);background:var(--crit-bg)} .kdelta.flat{color:var(--ink-faint);background:var(--surface-2)}