/* Bhagwati Tasks · styles. Layout: one phone-width column (max 480px) — sticky top bar, scrolling screen, fixed bottom tabs; detail screens slide over the column. Colours follow bhagwatiflourmilling.com. */
:root{
  --bg:#EADFCB; --app:#FAF5EC; --surface:#FFFDF9; --ink:#2B2015; --soft:#6B5A48; --faint:#9C8B78;
  --line:#E4D6C1; --line2:#D3C0A3;
  --accent:#B5502C; --accent-ink:#FFFDF9; --accent-tint:#F3E0D4;
  --good:#3B7548; --good-tint:#DEEBDC; --warn:#946010; --warn-tint:#F6E7C9;
  --bad:#B3261E; --bad-tint:#F7DAD6; --info:#2C6A80; --info-tint:#D9EAF0;
  --gold:#B08A12; --silver:#7E848D; --bronze:#9D5E28;
  --f-display:'Fraunces',Georgia,serif;
  --f-body:'Work Sans','Noto Sans Gujarati','Noto Sans Devanagari',system-ui,-apple-system,sans-serif;
  --r:12px; --nav-h:62px;
  /* department tile tints: b = background, i = text */
  --t1b:#E3E7F8; --t1i:#2E3C8C; --t2b:#DCEFDE; --t2i:#2B6635; --t3b:#F3E0F1; --t3i:#7A2C77; --t4b:#DBEDF5; --t4i:#1E5D76;
  --t5b:#ECF2D6; --t5i:#566718; --t6b:#F8DFDD; --t6i:#8E2E28; --t7b:#F7E6D1; --t7i:#864911; --t8b:#E6E0F5; --t8i:#4B3A8C; --t9b:#DCF1EC; --t9i:#1D5F55;
  --dir-bg:#FBE9E6; --dir-line:#E8A79F; --dir-ink:#A3231B; /* tasks the Director assigned */
  /* one colour per person, used wherever their name appears */
  --c1:#C0392B; --c2:#1F6FB2; --c3:#2E8B57; --c4:#8E44AD; --c5:#D35400; --c6:#00838F; --c7:#9A6F00; --c8:#C2185B; --c9:#5D6D1E; --c10:#3949AB; --c11:#6D4C41; --c12:#546E7A;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --t1b:#232A4A; --t1i:#BAC4F5; --t2b:#1E3523; --t2i:#A6DBAE; --t3b:#3A2238; --t3i:#E8B4E5; --t4b:#18323C; --t4i:#A3D6EA;
  --t5b:#2D3419; --t5i:#CFDC9A; --t6b:#3F2120; --t6i:#F2B0AB; --t7b:#3D2B17; --t7i:#F0C795; --t8b:#2B2545; --t8i:#C9BDF2; --t9b:#16332E; --t9i:#9FDCD1; --dir-bg:#3A1C19; --dir-line:#7A3530; --dir-ink:#F59A90; --c1:#FF7B6B; --c2:#6FB3F2; --c3:#6FD39B; --c4:#C99BE6; --c5:#FF9E5C; --c6:#4FD1DC; --c7:#E8C060; --c8:#F48FB1; --c9:#B5C76A; --c10:#9FA8F5; --c11:#C9A38F; --c12:#A8BCC6;}}
:root[data-theme="dark"]{
  --t1b:#232A4A; --t1i:#BAC4F5; --t2b:#1E3523; --t2i:#A6DBAE; --t3b:#3A2238; --t3i:#E8B4E5; --t4b:#18323C; --t4i:#A3D6EA;
  --t5b:#2D3419; --t5i:#CFDC9A; --t6b:#3F2120; --t6i:#F2B0AB; --t7b:#3D2B17; --t7i:#F0C795; --t8b:#2B2545; --t8i:#C9BDF2; --t9b:#16332E; --t9i:#9FDCD1; --dir-bg:#3A1C19; --dir-line:#7A3530; --dir-ink:#F59A90; --c1:#FF7B6B; --c2:#6FB3F2; --c3:#6FD39B; --c4:#C99BE6; --c5:#FF9E5C; --c6:#4FD1DC; --c7:#E8C060; --c8:#F48FB1; --c9:#B5C76A; --c10:#9FA8F5; --c11:#C9A38F; --c12:#A8BCC6;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#110D0A; --app:#1B1611; --surface:#251F19; --ink:#F3EADC; --soft:#C2B19B; --faint:#8E7E6B;
  --line:#372D24; --line2:#4A3E32;
  --accent:#E3825B; --accent-ink:#1B1611; --accent-tint:#41271B;
  --good:#82C493; --good-tint:#1E3124; --warn:#E3AE52; --warn-tint:#3A2C15;
  --bad:#F28D83; --bad-tint:#43201C; --info:#84C4DB; --info-tint:#17303A;
  --gold:#E2BC3E; --silver:#B7BCC4; --bronze:#D58F59; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#110D0A; --app:#1B1611; --surface:#251F19; --ink:#F3EADC; --soft:#C2B19B; --faint:#8E7E6B;
  --line:#372D24; --line2:#4A3E32;
  --accent:#E3825B; --accent-ink:#1B1611; --accent-tint:#41271B;
  --good:#82C493; --good-tint:#1E3124; --warn:#E3AE52; --warn-tint:#3A2C15;
  --bad:#F28D83; --bad-tint:#43201C; --info:#84C4DB; --info-tint:#17303A;
  --gold:#E2BC3E; --silver:#B7BCC4; --bronze:#D58F59; color-scheme:dark}

*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

#app{max-width:480px;margin:0 auto;min-height:100%;background:var(--app);position:relative;box-shadow:0 0 0 1px var(--line)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--app);border-bottom:1px solid var(--line)}
.brand{font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.01em;flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.brand small{font-family:var(--f-body);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:var(--accent-tint);padding:2px 6px;border-radius:4px}
.iconbtn{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;flex:none}
.iconbtn svg{width:20px;height:20px}
.dot{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:14px;border:0;flex:none}

main{padding:16px 16px calc(var(--nav-h) + 28px)}
.h1{font-family:var(--f-display);font-weight:600;font-size:24px;line-height:1.2;margin:2px 0 2px;text-wrap:balance}
.sub{color:var(--soft);margin:0 0 14px;font-size:14px}
.sect{margin:22px 0 8px;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--soft);display:flex;align-items:center;gap:8px}
.sect .count{background:var(--line);color:var(--ink);border-radius:9px;padding:0 7px;font-size:11px;letter-spacing:0}
.sect.bad{color:var(--bad)} .sect.warn{color:var(--warn)}
.stack{display:flex;flex-direction:column;gap:8px}
.empty{padding:18px;border:1px dashed var(--line2);border-radius:var(--r);color:var(--soft);text-align:center;font-size:14px}

/* task card */
.tcard{display:flex;flex-direction:column;gap:6px;text-align:left;width:100%;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);position:relative;overflow:hidden}
.tcard.is-late{border-left:4px solid var(--bad)} .tcard.is-back{border-left:4px solid var(--warn)} .tcard.is-done{border-left:4px solid var(--info)}
.tc-top{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tc-title{font-weight:600;font-size:16px;line-height:1.3}
.tc-meta{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--soft);font-size:13px}
.bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--good);border-radius:2px}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--line);color:var(--ink);white-space:nowrap}
.st-late{background:var(--bad-tint);color:var(--bad)} .st-sent_back{background:var(--warn-tint);color:var(--warn)}
.st-done{background:var(--info-tint);color:var(--info)} .st-approved{background:var(--good-tint);color:var(--good)}
.tcard.by-dir{background:var(--dir-bg);border-color:var(--dir-line)}
.tcard.by-dir .tc-title{color:var(--dir-ink)}
.st-bydir{background:var(--dir-ink);color:var(--surface)}
.st-repeat{background:var(--accent-tint);color:var(--accent)}
.st-closed,.st-cancelled{background:var(--line);color:var(--soft)}
.pill.ghost{background:transparent;border:1px solid var(--line2);color:var(--soft)}
.prio{font-size:12px;font-weight:600;color:var(--soft)}
.prio.p-high{color:var(--warn)} .prio.p-urgent{color:var(--bad)}

/* attention strip */
.attn{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 4px}
.attn button{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px;text-align:left;display:flex;flex-direction:column;gap:2px}
.attn b{font-size:22px;font-variant-numeric:tabular-nums;line-height:1.1}
.attn span{font-size:12px;color:var(--soft);line-height:1.25}
.attn .hot b{color:var(--bad)}

/* month strip */
.mstrip{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.mrow{display:flex;gap:14px;align-items:center}
.mrow .k{display:flex;flex-direction:column;flex:1;min-width:0}
.mrow .k b{font-size:20px;font-variant-numeric:tabular-nums}
.mrow .k span{font-size:12px;color:var(--soft)}
.hint{font-size:13px;color:var(--soft)}

/* bottom nav */
nav.tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,480px);z-index:20;background:var(--surface);border-top:1px solid var(--line);display:flex;padding-bottom:env(safe-area-inset-bottom,0px)}
nav.tabs button{flex:1;height:var(--nav-h);border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11.5px;font-weight:500;color:var(--soft);position:relative}
nav.tabs button svg{width:22px;height:22px}
nav.tabs button[aria-current="page"]{color:var(--accent);font-weight:700}
nav.tabs .dot{top:6px;right:calc(50% - 22px)}

/* sheet */
.sheet{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,480px);z-index:40;background:var(--app);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);animation:up .18s ease-out}
@keyframes up{from{transform:translate(-50%,24px);opacity:.6}to{transform:translate(-50%,0);opacity:1}}
@media (prefers-reduced-motion: reduce){.sheet{animation:none}}
.sh-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--app)}
.sh-head h2{margin:0;font-size:16px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-body{flex:1;overflow:auto;padding:16px 16px 28px}
.sh-foot{padding:10px 16px;border-top:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:6px}

.dtitle{font-family:var(--f-display);font-weight:600;font-size:22px;line-height:1.25;margin:6px 0 10px;text-wrap:balance}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px;margin:0 0 6px}
.facts dt{color:var(--soft)} .facts dd{margin:0;min-width:0}
.facts s{color:var(--faint)}
.note{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font-size:14px;white-space:pre-wrap}
.banner{border-radius:var(--r);padding:10px 12px;font-size:14px;display:flex;flex-direction:column;gap:2px}
.banner b{font-size:13px}
.banner.warn{background:var(--warn-tint);color:var(--warn)} .banner.bad{background:var(--bad-tint);color:var(--bad)}
.banner.info{background:var(--info-tint);color:var(--info)} .banner.good{background:var(--good-tint);color:var(--good)}
.banner .q{color:var(--ink)}

.check{display:flex;align-items:flex-start;gap:12px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.check .box{width:28px;height:28px;flex:none;border-radius:8px;border:2px solid var(--line2);background:var(--app);display:grid;place-items:center;padding:0}
.check .box svg{width:18px;height:18px;opacity:0}
.check.on .box{background:var(--good);border-color:var(--good);color:#fff}
.check.on .box svg{opacity:1}
.check .box:disabled{cursor:default}
.check .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding-top:3px}
.check.on .txt>span{color:var(--soft)}
.ph{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ph img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.ph small{color:var(--soft);font-size:12px}
.phbtn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--accent);border:1px solid var(--line2);border-radius:8px;padding:6px 10px;background:var(--app);cursor:pointer}
.phbtn svg{width:16px;height:16px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:10px;border:1px solid var(--line2);background:var(--surface);font-weight:600;font-size:15px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.good{background:var(--good);border-color:var(--good);color:#fff}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{min-height:36px;padding:0 12px;font-size:13px;border-radius:8px}
.linkbtn{background:none;border:0;color:var(--accent);font-weight:600;padding:8px 0;font-size:14px;text-align:left}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row>.btn{flex:1}

.field{display:flex;flex-direction:column;gap:5px;margin:0 0 14px}
.field label,.flabel{font-size:13px;font-weight:600;color:var(--soft)}
.input{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--surface)}
textarea.input{min-height:84px;resize:vertical}
.input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-tint)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-height:38px;padding:0 12px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);font-size:14px;font-weight:500}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.who{color:var(--uc);font-weight:700;white-space:nowrap}
.who::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--uc);margin-right:5px;vertical-align:1px}
.chip.person{color:var(--uc);font-weight:600;border-color:var(--uc)}
.chip.person[aria-pressed="true"]{background:var(--uc);border-color:var(--uc);color:var(--surface)}
.duebar{display:flex;gap:8px;margin:0 0 8px;font-size:13px}
.duebar button{flex:1;padding:8px 10px;border-radius:10px;display:flex;align-items:baseline;gap:6px;font-size:13px;text-align:left;border:1px solid var(--line);background:var(--surface);color:var(--soft)}
.duebar b{font-size:20px}
.duebar .mineN{color:var(--dir-ink)}
.duebar .mineN[aria-pressed="true"]{background:var(--dir-bg);border:2px solid var(--dir-ink)}
.duebar .othN[aria-pressed="true"]{background:var(--surface);color:var(--ink);border:2px solid var(--ink)}
.snap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.snapcard{display:flex;flex-direction:column;gap:6px;text-align:left;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--uc);min-width:0}
.snapcard.hot{border-color:var(--bad);border-left-color:var(--uc)}
.sc-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.sc-top b{color:var(--uc);font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-top span{font-size:13px;font-weight:600}
.sc-pct{display:flex;gap:10px;font-size:12px;color:var(--soft)}
.sc-pct b{font-size:14px}
.sc-stats{display:flex;flex-direction:column;gap:1px;font-size:12.5px;line-height:1.3;color:var(--soft)}
.sc-stats b{font-weight:700}
.c-info{color:var(--info)}
.c-dir{color:var(--dir-ink);font-weight:600}
.pstrip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:thin}
.pchip{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:96px;padding:8px 12px;border-radius:12px;border:1.5px solid var(--uc);background:var(--surface);text-align:left}
.pchip b{color:var(--uc);font-size:15px}
.pchip span{font-size:12px;color:var(--soft)}
.pchip i{font-style:normal;color:var(--bad);font-weight:600}
.namelink{cursor:pointer;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.grp{display:flex;flex-direction:column;gap:6px;padding:10px 0 2px}
.grp+.grp{border-top:1px dashed var(--line2);margin-top:6px}
.grp-h{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dtile{position:relative;min-height:66px;border-radius:12px;border:2px solid transparent;text-align:left;padding:10px 12px;font-weight:700;font-size:15px;line-height:1.25;display:flex;flex-direction:column;justify-content:center;gap:2px}
.dtile small{font-weight:500;font-size:13px;opacity:.85}
.dtile[aria-pressed="true"]{border-color:currentColor}
.dtile[aria-pressed="true"]::after{content:"✓";position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:var(--ti);color:var(--surface);font-size:12px;font-weight:700;display:grid;place-items:center}
.dtile:disabled{opacity:.45;cursor:not-allowed}
.seg{display:flex;background:var(--line);border-radius:10px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:none;min-height:36px;border-radius:8px;font-weight:600;font-size:14px;color:var(--soft)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.panel{border:1px solid var(--line2);border-radius:var(--r);padding:12px;background:var(--surface);margin-top:8px}
.panel .field{margin-bottom:10px}
.scores{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:6px 0 10px}
.scores button{min-height:42px;border-radius:8px;border:1px solid var(--line2);background:var(--app);font-weight:700;font-variant-numeric:tabular-nums}
.scores button[aria-pressed="true"]{background:var(--good);border-color:var(--good);color:#fff}

.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.log li{display:grid;grid-template-columns:14px 1fr;gap:10px;padding:0 0 12px;position:relative;font-size:13.5px}
.log li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--line2);margin-top:5px}
.log li::after{content:"";position:absolute;left:4px;top:16px;bottom:0;width:1px;background:var(--line)}
.log li:last-child::after{display:none}
.log time{display:block;color:var(--faint);font-size:12px}

/* scores screen */
.toolbar{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.pnav{display:flex;align-items:center;gap:8px}
.pnav b{flex:1;text-align:center;font-size:15px}
.pnav .iconbtn:disabled{opacity:.35}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tile span{font-size:12px;color:var(--soft)}
.tile b{font-size:28px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.15}
.tile small{font-size:12px;color:var(--soft)}
.tile b.good{color:var(--good)} .tile b.warn{color:var(--warn)} .tile b.bad{color:var(--bad)}
.badgecard{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-top:8px}
.badgecard .t{flex:1;min-width:0;font-size:14px}
.badgecard .t b{display:block;font-size:16px}
.medal{width:44px;height:44px;flex:none}
.chart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-top:8px}
.chart h3{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--soft)}
.chart svg{width:100%;height:auto;display:block}
.tbl-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-top:8px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--soft);text-align:right;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
td{padding:10px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr:last-child td{border-bottom:0}
tr.tap{cursor:pointer}
tr.tap:hover td{background:var(--app)}
td .mini{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:-1px}
.c-good{color:var(--good)} .c-warn{color:var(--warn)} .c-bad{color:var(--bad)} .c-soft{color:var(--soft)}

/* lists (people, settings) */
.list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:0}
.li .grow{flex:1;min-width:0}
.li .grow b{display:block;font-weight:600}
.li .grow span{font-size:13px;color:var(--soft)}
.li.off .grow{opacity:.5}
.li.wrap{flex-wrap:wrap}
.li .acts{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.offpick{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--soft);flex:1;min-width:140px}
.offpick .input{min-height:36px;padding:4px 8px;font-size:14px}
button.li{width:100%;background:none;border:0;border-bottom:1px solid var(--line);text-align:left}
button.li svg{width:18px;height:18px;color:var(--faint)}
.pinbox{background:var(--good-tint);color:var(--good);border-radius:var(--r);padding:12px 14px;margin:0 0 12px;font-size:14px}
.pinbox b{font-size:26px;letter-spacing:.2em;display:block;color:var(--ink);font-variant-numeric:tabular-nums}
.thr{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:6px;align-items:center;font-size:13px}
.thr .h{font-weight:600;color:var(--soft);text-align:center}
.thr input{text-align:center;min-height:40px;padding:6px}

/* login */
.login{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:28px 20px 24px;gap:18px}
.login .mark{width:56px;height:56px;border-radius:16px;background:var(--accent);display:grid;place-items:center;color:var(--accent-ink)}
.login .mark svg{width:34px;height:34px}
.login h1{font-family:var(--f-display);font-size:30px;line-height:1.1;margin:10px 0 4px}
.login p{margin:0;color:var(--soft)}
.err{color:var(--bad);font-size:14px;margin:-6px 0 10px}
.demo{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.demo .li{border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.demonote{font-size:13px;color:var(--soft);background:var(--accent-tint);border-radius:10px;padding:10px 12px}
.pin-input{letter-spacing:.6em;font-size:22px;text-align:center;font-variant-numeric:tabular-nums}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom,0px));z-index:60;background:var(--ink);color:var(--app);padding:10px 16px;border-radius:10px;font-size:14px;font-weight:500;max-width:calc(min(100vw,480px) - 32px);box-shadow:0 6px 20px rgba(0,0,0,.2)}

/* ---------- added for Version 1 ---------- */
.btn svg{width:20px;height:20px;flex:none}
.btn.sm svg{width:16px;height:16px}
.brand .offline{font-family:var(--f-body);font-size:10.5px;font-weight:600;color:var(--bad);background:var(--bad-tint);padding:2px 6px;border-radius:4px;letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:8px}
.filters .input{min-height:42px;padding:6px 10px}
.pnote{background:var(--warn-tint);color:var(--warn);border-radius:10px;padding:9px 12px;font-size:13px;margin-bottom:12px}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.pg{position:relative;aspect-ratio:1;border:0;padding:0;border-radius:8px;overflow:hidden;background:var(--line)}
.pg img{width:100%;height:100%;object-fit:cover;display:block}
.pg-who{position:absolute;left:4px;bottom:4px;max-width:calc(100% - 8px);font-size:11px;font-weight:700;color:#fff;background:var(--uc);padding:1px 6px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phthumb{border:0;padding:0;background:none;border-radius:8px;line-height:0}
.phthumb img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.viewer{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,480px);z-index:50;background:#14100D;color:#F3EADC;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.v-head{display:flex;align-items:center;gap:10px;padding:10px 12px}
.v-head button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:inherit;display:grid;place-items:center}
.v-head button svg{width:20px;height:20px}
.v-head span{flex:1;font-size:13px;opacity:.75;text-align:center}
.v-img{flex:1;display:grid;place-items:center;min-height:0;padding:0 8px}
.v-img img{max-width:100%;max-height:100%;border-radius:6px}
.v-info{padding:12px 16px 4px;display:flex;flex-direction:column;gap:3px}
.v-info b{font-size:16px}
.v-info .item{font-size:14px;opacity:.85}
.v-info .meta{font-size:13px;opacity:.75}
.v-who{color:var(--uc);font-weight:700;filter:brightness(1.4)}
.v-acts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:12px 16px 16px}
.v-acts button{min-height:56px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:inherit;font-weight:600;font-size:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.v-acts button.wa{background:#1F8F4E;border-color:#1F8F4E;color:#fff}
.v-acts svg{width:20px;height:20px}
.v-exp{font-size:12px;opacity:.6;text-align:center;padding:0 16px 10px}
.viewer ~ .toast{bottom:150px;background:#F3EADC;color:#14100D}