/* AyurMedX Desk. Tokens and components from the approved prototype (docs/crm-prototypes/index.html), Herbal Ink. */
:root{
  --paper:#F1F4EF; --card:#FFFFFF; --card2:#F7F9F5; --ink:#13221B; --ink2:#46564D; --ink3:#77867D; --line:#DCE4DA;
  --herb:#0F3D2E; --herbInk:#E6F0EA; --herbMute:#8FB3A2;
  --leaf:#1E8656; --leafSoft:#DCF0E3; --saffron:#B8690F; --saffronSoft:#FBEBD3;
  --red:#BE3B28; --redSoft:#F8DDD6; --blue:#2D6AAE; --blueSoft:#DDE8F5; --lilac:#6F60BD; --lilacSoft:#E8E4F8;
  --shadow:0 1px 2px rgba(15,61,46,.06),0 8px 24px rgba(15,61,46,.06);
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --onAccent:#FFFFFF; --scrim:rgba(19,34,27,.30); --railOn:rgba(255,255,255,.13); --railOnInk:#FFFFFF;
  --sh1:0 1px 2px rgba(15,61,46,.12); --pop:0 14px 40px rgba(15,61,46,.18);
  --ease:cubic-bezier(.23,1,.32,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0D1411; --card:#151F1A; --card2:#1A2620; --ink:#E3ECE6; --ink2:#A8B8AE; --ink3:#7D8D84; --line:#26342C;
  --herb:#0A2A1F; --herbInk:#DDEAE2; --herbMute:#6F9785;
  --leaf:#45C08A; --leafSoft:#163A2A; --saffron:#E8A04A; --saffronSoft:#3A2A14;
  --red:#EC745F; --redSoft:#3C1E18; --blue:#74A8E4; --blueSoft:#172A3E; --lilac:#A99DEB; --lilacSoft:#272241;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  --onAccent:#0B1510; --scrim:rgba(0,0,0,.55); --railOn:rgba(255,255,255,.08); --railOnInk:#DDEAE2;
  --sh1:0 1px 2px rgba(0,0,0,.45); --pop:0 14px 40px rgba(0,0,0,.55); color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0D1411; --card:#151F1A; --card2:#1A2620; --ink:#E3ECE6; --ink2:#A8B8AE; --ink3:#7D8D84; --line:#26342C;
  --herb:#0A2A1F; --herbInk:#DDEAE2; --herbMute:#6F9785;
  --leaf:#45C08A; --leafSoft:#163A2A; --saffron:#E8A04A; --saffronSoft:#3A2A14;
  --red:#EC745F; --redSoft:#3C1E18; --blue:#74A8E4; --blueSoft:#172A3E; --lilac:#A99DEB; --lilacSoft:#272241;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  --onAccent:#0B1510; --scrim:rgba(0,0,0,.55); --railOn:rgba(255,255,255,.08); --railOnInk:#DDEAE2;
  --sh1:0 1px 2px rgba(0,0,0,.45); --pop:0 14px 40px rgba(0,0,0,.55); color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit;touch-action:manipulation;-webkit-user-select:none;user-select:none}
input,textarea{font:inherit;color:inherit}
input[type=search]{-webkit-appearance:none;appearance:none}
:focus-visible{outline:2px solid var(--leaf);outline-offset:2px}
.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.i.sm{width:14px;height:14px}
.i.dim{opacity:.35}
.mono{font-family:var(--mono);font-size:.92em;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
.faint{color:var(--ink3)} .muted{color:var(--ink2)}
.grow{flex:1;min-width:0}
.sp{flex:1}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block;flex:none}
.sev-g{color:var(--leaf)} .sev-a{color:var(--saffron)} .sev-r{color:var(--red)} .sev-b{color:var(--blue)} .sev-l{color:var(--lilac)}
small{font-size:inherit}


.phr{display:flex;flex-direction:column}

/* chips, avatars, buttons */
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;line-height:1.55;background:var(--card2);color:var(--ink2);border:1px solid var(--line);white-space:nowrap}
.chip.g{background:var(--leafSoft);color:var(--leaf);border-color:transparent}
.chip.a{background:var(--saffronSoft);color:var(--saffron);border-color:transparent}
.chip.r{background:var(--redSoft);color:var(--red);border-color:transparent}
.chip.b{background:var(--blueSoft);color:var(--blue);border-color:transparent}
.chip.l{background:var(--lilacSoft);color:var(--lilac);border-color:transparent}
.chip .i{width:12px;height:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.av{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;font-size:10.5px;font-weight:700;color:var(--onAccent);flex:none;letter-spacing:.02em;position:relative}
.av.lilac{background:var(--lilac)} .av.blue{background:var(--blue)} .av.leaf{background:var(--leaf)} .av.saffron{background:var(--saffron)}
.av.herb{background:var(--herb);color:var(--herbInk);box-shadow:inset 0 0 0 1px var(--herbMute)}
.av.sm{width:24px;height:24px;font-size:9.5px}
.av .on{position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 2px var(--card)}
.cta{display:inline-flex;align-items:center;gap:6px;min-height:36px;border-radius:999px;padding:0 14px;font-size:13px;font-weight:650;background:var(--saffron);color:var(--onAccent);white-space:nowrap;transition:transform .1s ease-out}
.btn2{display:inline-flex;align-items:center;gap:6px;min-height:32px;border-radius:10px;padding:0 12px;font-size:12.5px;font-weight:600;background:var(--card);border:1px solid var(--line);color:var(--ink);white-space:nowrap;transition:transform .1s ease-out}
.btn2.sm{min-height:28px;padding:0 10px;font-size:12px}
.btn2.wide{width:100%;justify-content:center;min-height:40px}
.lnk{color:var(--leaf);font-weight:600;display:inline-flex;align-items:center;gap:6px;text-align:left}
.lnk.who{color:var(--ink)}
.icbtn{width:36px;height:36px;border-radius:10px;display:inline-grid;place-items:center;color:var(--ink2);position:relative;flex:none;transition:transform .1s ease-out}
.cta:active,.btn2:active,.icbtn:active,.actionbar button:active,.send:active{transform:scale(.97)}
@media (hover:hover){.btn2:hover{border-color:var(--ink3)} .icbtn:hover{background:var(--card2);color:var(--ink)} .lnk:hover{text-decoration:underline}}
.kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--ink2);background:var(--card2)}
.badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;border-radius:8px;background:var(--saffron);color:var(--onAccent);font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px;font-variant-numeric:tabular-nums;line-height:1}
.seg{display:inline-flex;background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:2px;gap:2px;flex:none}
.seg button{display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;color:var(--ink3);white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--sh1)}
.seg .i{width:14px;height:14px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ph{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:650;min-height:28px;flex-wrap:wrap}
.ph>.i{color:var(--ink3)}
.ph small{font-size:12px;font-weight:500;color:var(--ink3)}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.h3{font-size:16px;font-weight:700;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.h3 .faint{font-size:12.5px;font-weight:500}
.h4{font-size:13.5px;font-weight:650}
.row-b{display:flex;align-items:center;justify-content:space-between;gap:8px}
.note{font-size:12px;color:var(--ink2)}
.field{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 10px;min-height:36px;color:var(--ink3);min-width:0}
.field input{border:0;outline:0;background:none;color:var(--ink);font-size:13px;min-width:0;flex:1;padding:8px 0}
.field:focus-within{border-color:var(--leaf);box-shadow:0 0 0 3px var(--leafSoft)}
.empty{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:22px 12px;color:var(--ink2);font-size:12.5px}
.empty .i{width:22px;height:22px;color:var(--ink3);margin-bottom:4px}
.empty b{color:var(--ink);font-size:13.5px}

/* rows */
.qrow{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding:8px 6px;border-radius:10px;text-align:left}
.qrow+.qrow{border-top:1px solid var(--line)}
.ki{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--card2);color:var(--ink2)}
.ki .i{width:16px;height:16px}
.qrow .t{display:block;font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrow .s{display:flex;gap:6px;font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden}
.w{display:flex;flex-direction:column;align-items:flex-end;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.w>span{display:inline-flex;align-items:center;gap:5px}
.w small{font-size:10.5px;font-weight:500;color:var(--ink3)}
@media (hover:hover){.qrow:hover,.mini:hover,.bi:hover,.nrow:hover,.opt:hover,.arow:hover,.orow2:hover{background:var(--card2)}}
.qrow:active,.mini:active,.bi:active,.nrow:active,.arow:active,.orow2:active{background:var(--card2)}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.kpi .l{font-size:12px;color:var(--ink2);font-weight:550}
.kpi .row{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.kpi .v{font-size:24px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.bars{display:flex;align-items:flex-end;gap:3px;height:28px}
.bars i{width:5px;border-radius:3px;background:var(--leafSoft);display:block}
.bars i:last-child{background:var(--leaf)}
.delta{align-self:flex-start;font-size:11px;font-weight:650;padding:2px 7px;border-radius:999px;white-space:nowrap}
.delta.up{background:var(--leafSoft);color:var(--leaf)} .delta.dn{background:var(--redSoft);color:var(--red)} .delta.wa{background:var(--saffronSoft);color:var(--saffron)}
.kstrip{display:flex;gap:8px;overflow-x:auto;margin:0 -12px;padding:0 12px 2px;scroll-snap-type:x proximity;scrollbar-width:none}
.kstrip .kpi{flex:0 0 140px;scroll-snap-align:start}
.kstrip::-webkit-scrollbar,.car::-webkit-scrollbar,.ptabs::-webkit-scrollbar,.qr::-webkit-scrollbar,.kchips::-webkit-scrollbar,.fchips::-webkit-scrollbar{display:none}

/* stage board */
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.lane{background:var(--card2);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px;min-width:0}
.lh{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:650;padding:2px 2px 0}
.mini{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px;font-size:12px;min-width:0}
.mini b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini .r{font-family:var(--mono);font-size:10.5px;color:var(--ink3)}
.more{font-size:11.5px;color:var(--ink3);padding:0 4px}
.phr .board{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -14px;padding:0 14px 4px;scrollbar-width:none}
.phr .lane{flex:0 0 74%;scroll-snap-align:start}
.phr .mini{min-height:56px}

/* tables */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
th{font-size:11.5px;font-weight:600;color:var(--ink3);background:var(--card2);letter-spacing:.02em}
th button{display:inline-flex;align-items:center;gap:4px;font-weight:600;min-height:24px}
th.r,td.r{text-align:right}
tbody tr:last-child td{border-bottom:0}
@media (hover:hover){tbody tr:hover td{background:var(--card2)}}
.cellp{display:flex;align-items:center;gap:10px}
.cellp small{display:block;font-size:11.5px}
.ell{max-width:220px;overflow:hidden;text-overflow:ellipsis}
.panel>.tbl{border:0;border-radius:0;margin:0 -14px -12px}

/* Order Lifeline: the signature */
.ll{display:flex;align-items:flex-start;padding:6px 0 2px}
.ll .node{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--ink2);flex:1 1 0;min-width:0;text-align:center;position:relative}
.ll .node+.node::before{content:"";position:absolute;top:6px;right:50%;width:100%;height:2px;background:var(--leaf)}
.ll .node.todo::before{background:var(--line)}
.ll .node i{width:14px;height:14px;border-radius:50%;border:2px solid var(--leaf);background:var(--leaf);display:block;position:relative;z-index:1}
.ll .node.wait{color:var(--saffron)}
.ll .node.wait i{background:var(--card);border-color:var(--saffron);box-shadow:0 0 0 4px var(--saffronSoft)}
.ll .node.todo{color:var(--ink3);font-weight:500}
.ll .node.todo i{background:var(--card);border-color:var(--line)}
.ll .node small{font-family:var(--mono);font-size:10px;font-weight:400;color:var(--ink3);line-height:1.3}
.phone .ll .node{font-size:10.5px}
.wait i::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--saffron);opacity:0}
@media (prefers-reduced-motion:no-preference){.wait i::after{animation:ring 2.4s var(--ease) infinite}}
@keyframes ring{0%{transform:scale(.55);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.mll{display:inline-flex;align-items:center;gap:2px;width:84px;flex:none}
.mll i{width:8px;height:8px;border-radius:50%;background:var(--leaf);flex:none}
.mll i.wt{background:var(--saffron);box-shadow:0 0 0 2px var(--saffronSoft)} .mll i.t{background:var(--line)}
.mll b{flex:1;height:2px;background:var(--leaf)} .mll b.t{background:var(--line)}
.vll{display:flex;flex-direction:column}
.vn{display:grid;grid-template-columns:16px 1fr auto;gap:10px;position:relative;padding-bottom:14px;font-size:12.5px;align-items:start}
.vn::before{content:"";position:absolute;left:7px;top:16px;bottom:0;width:2px;background:var(--leaf)}
.vn.todo::before,.vn.wait::before{background:var(--line)}
.vn:last-child{padding-bottom:0}
.vn:last-child::before{display:none}
.vn i{width:16px;height:16px;border-radius:50%;background:var(--leaf);border:2px solid var(--leaf);position:relative}
.vn.wait i{background:var(--card);border-color:var(--saffron);box-shadow:0 0 0 4px var(--saffronSoft)}
.vn.todo i{background:var(--card);border-color:var(--line)}
.vn span{font-weight:600} .vn.todo span{color:var(--ink3);font-weight:500} .vn.wait span{color:var(--saffron)}
.vn small{font-family:var(--mono);font-size:10.5px;color:var(--ink3);text-align:right}

/* timeline, key-values, tabs */
.tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;font-size:12.5px}
.tl li{display:grid;grid-template-columns:48px 10px 1fr;gap:8px;padding:6px 0;align-items:start}
.tl time{font-family:var(--mono);font-size:10.5px;color:var(--ink3);padding-top:2px}
.tl i{width:9px;height:9px;border-radius:50%;margin-top:4px;display:block}
.k-quote{background:var(--saffron)} .k-app{background:var(--lilac)} .k-pay{background:var(--leaf)} .k-ship{background:var(--blue)} .k-photo{background:var(--ink3)} .k-chat{background:var(--blue)}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11px;color:var(--ink3)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:8px;height:8px;border-radius:50%;display:block}
.kv{display:grid;grid-template-columns:84px 1fr;gap:6px 10px;font-size:12.5px;margin:0}
.kv dt{color:var(--ink3)} .kv dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
.ptabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:2px}
.ptabs button{padding:0 11px;min-height:32px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ink3);white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.ptabs button[aria-selected="true"]{background:var(--herb);color:var(--herbInk)}
.cnt{font-size:10.5px;font-weight:650;padding:0 6px;border-radius:999px;background:var(--card2);color:var(--ink2);font-variant-numeric:tabular-nums;line-height:1.6}
.ptabs button[aria-selected="true"] .cnt{background:var(--railOn);color:inherit}
details.addr{font-size:12.5px;border:1px solid var(--line);border-radius:12px;padding:8px 12px}
details.addr summary{cursor:pointer;font-weight:600;min-height:24px;display:flex;align-items:center}
details.addr ul{margin:8px 0 2px;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
details.addr li{display:flex;justify-content:space-between;gap:10px}
details.addr li.old{color:var(--ink3)}
.olist{display:flex;flex-direction:column}
.orow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:12.5px}
.orow:first-child{border-top:0}
.pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.pic{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);font-size:11.5px}
.pic .ph-img{height:76px;background:repeating-linear-gradient(135deg,var(--card2) 0 6px,var(--paper) 6px 12px);display:grid;place-items:center;color:var(--ink3)}
.pic div:last-child{padding:6px 8px;display:flex;flex-direction:column}

/* drawer + palette + popover */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:460px;max-width:100%;background:var(--card);border-left:1px solid var(--line);z-index:41;display:flex;flex-direction:column;box-shadow:var(--pop)}
.phone .drawer{width:100%;border-left:0;box-shadow:none}
.dr-h{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.dr-h h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
.dr-b{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.sub-card{border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;background:var(--card2)}
.actionbar{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;padding:10px 12px 12px;border-top:1px solid var(--line);background:var(--card)}
.actionbar button{min-height:44px;border-radius:12px;font-weight:650;font-size:13.5px;background:var(--card2);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform .1s ease-out}
.actionbar .p{background:var(--leaf);color:var(--onAccent);border-color:transparent}
.foot-note{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink3)}
.pal-wrap{position:fixed;inset:0;z-index:50;background:var(--scrim);display:flex;justify-content:center;align-items:flex-start;padding-top:72px}
.pal{width:580px;max-width:calc(100% - 32px);background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--pop);overflow:hidden;display:flex;flex-direction:column}
.phone .pal-wrap{padding:0}
.phone .pal{width:100%;max-width:none;height:100%;border-radius:0;border:0}
.pal-in{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);color:var(--ink3)}
.pal-in input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:16px;color:var(--ink);padding:6px 0}
.pal-res{max-height:380px;overflow:auto;padding:6px;overscroll-behavior:contain}
.phone .pal-res{flex:1;max-height:none}
.pal-sec{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);padding:8px 10px 4px}
.opt{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;width:100%;text-align:left;padding:8px 10px;border-radius:10px;min-height:48px}
.opt small{display:block;font-size:11.5px}
.opt[aria-selected="true"]{background:var(--leafSoft)}
.pop{position:fixed;top:64px;right:14px;width:340px;z-index:45;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--pop);padding:10px;display:flex;flex-direction:column;gap:2px}
.phone .pop{left:10px;right:10px;width:auto;top:64px}
.arow{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 6px;border-radius:8px;font-size:12.5px;min-height:34px}
.sys{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--leaf);padding:6px 6px 2px}
.feed{display:flex;flex-direction:column;gap:5px;font-size:12px;padding:4px 6px 0;border-top:1px solid var(--line);margin-top:4px;padding-top:8px}
.feed div{display:flex;gap:8px;align-items:center}
.online{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--ink2)}
.online .av+.av{margin-left:-6px}
@media (prefers-reduced-motion:no-preference){
  .anim .drawer{animation:dIn .26s var(--ease)} .phone .anim .drawer{animation:pushIn .28s var(--ease)}
  .anim .scrim,.anim.pal-wrap{animation:fade .2s ease-out} .anim .pal{animation:pop .2s var(--ease)}
  .push{animation:pushIn .28s var(--ease)} .pop{animation:pop .18s var(--ease)}
}
@keyframes dIn{from{transform:translateX(28px);opacity:0}}
@keyframes pushIn{from{transform:translateX(100%)}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{transform:translateY(-6px) scale(.98);opacity:0}}

/* toast (page level) */
.toast{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%,-8px);z-index:2147483646;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.4;max-width:min(460px,calc(100vw - 32px));box-shadow:var(--pop);opacity:0;pointer-events:none;transition:opacity .2s ease-out,transform .2s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}

.phh{background:var(--card);border-bottom:1px solid var(--line);padding:8px 12px 8px 14px;display:flex;align-items:center;gap:8px;flex:none;min-height:56px}
.phh h2{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.phh .sub{font-size:11.5px;color:var(--ink3)}
.phone .icbtn{width:44px;height:44px}
.pbody{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain;min-height:0}
.pbody>*,.dr-b>*,.amain>*,.bpage>*,.b360>*,.thread>*{flex-shrink:0}
.tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--card);border-top:1px solid var(--line);padding:4px 4px 8px;flex:none}
.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10.5px;font-weight:550;color:var(--ink3);min-height:50px;position:relative}
.tabbar button[aria-current="page"]{color:var(--leaf);font-weight:700}
.tabbar .badge{top:3px;right:auto;left:calc(50% + 5px)}
.phone .seg button{min-height:38px;padding:0 12px}
.phone .qrow{min-height:56px}
.phone .btn2{min-height:40px}
.phone .btn2.sm{min-height:36px}
.phone .ptabs button{min-height:40px}
.phone .field{min-height:44px}
@media (pointer:coarse){input,textarea{font-size:16px!important}}

.sub{font-size:12px;color:var(--ink3)}
.searchbox{flex:1;max-width:400px;margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 12px;min-height:38px;font-size:13px;color:var(--ink3);text-align:left}
.searchbox span:first-of-type{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cols{display:grid;grid-template-columns:1.25fr 1fr;gap:12px;align-items:start}
.lrow{display:flex;flex-direction:column;gap:2px;padding:6px 0 2px}
.lrow+.lrow{border-top:1px solid var(--line)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ===== B · Inbox-first split ===== */
.dB.lapr{display:flex;flex-direction:column}
.bnav{display:flex;align-items:center;gap:14px;padding:8px 14px;background:var(--card);border-bottom:1px solid var(--line);min-height:52px;flex:none}
.blogo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.lm{width:28px;height:28px;border-radius:9px;background:var(--herb);color:var(--herbInk);display:grid;place-items:center;font-weight:750;font-size:13px}
.btabs{display:flex;gap:2px}
.btabs button{padding:0 12px;min-height:34px;border-radius:9px;font-weight:600;font-size:13px;color:var(--ink2);display:inline-flex;align-items:center;gap:6px}
.btabs button[aria-current="page"]{background:var(--leafSoft);color:var(--leaf)}
.searchbox.sm{max-width:240px;min-height:34px}
.bstrip{display:flex;align-items:center;gap:6px 14px;padding:6px 14px;border-bottom:1px solid var(--line);background:var(--card2);font-size:12.5px;color:var(--ink2);flex:none;flex-wrap:wrap}
.kq{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}
.kq b{color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums}
.kq .delta{align-self:center;font-size:10.5px;padding:1px 6px}
.bstrip .sep{width:1px;height:14px;background:var(--line)}
.bgrid{flex:1;display:grid;grid-template-columns:340px minmax(0,1fr) 320px;min-height:0}
.bq{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--card)}
.bq-h{padding:12px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--line)}
.bq-list{flex:1;overflow:auto;overscroll-behavior:contain}
.fchips{display:flex;gap:6px;flex-wrap:wrap}
.fchips button{min-height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink2);background:var(--card);white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.fchips button[aria-pressed="true"]{background:var(--herb);color:var(--herbInk);border-color:var(--herb)}
.fchips .num{opacity:.75}
.bi{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;width:100%;position:relative;align-items:center}
.bi[aria-current="true"]{background:var(--leafSoft)}
.bi[aria-current="true"]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 2px 2px 0;background:var(--leaf)}
.ring{position:relative;width:34px;height:34px;display:grid;place-items:center}
.ring .rs{position:absolute;inset:0;width:34px;height:34px;transform:rotate(-90deg)}
.ring.mini,.ring.mini .rs{width:16px;height:16px}
.ring .rt{fill:none;stroke:var(--line);stroke-width:2.5}
.ring .rp{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}
.ring .i{width:15px;height:15px;color:var(--ink2)}
.bi-m{display:flex;flex-direction:column;min-width:0;gap:1px}
.bi .nm{font-weight:650;font-size:13px;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}
.kt{font-size:10.5px;font-weight:600;color:var(--ink3);border:1px solid var(--line);border-radius:999px;padding:0 6px}
.bi .tx{font-size:12.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bi .rf{font-family:var(--mono);font-size:10.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm{font-size:12.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tm small{display:block;font-size:10.5px;font-weight:500;color:var(--ink3)}
.legend-note{font-size:11px;color:var(--ink3);display:flex;align-items:center;gap:6px}
.bmid{display:flex;flex-direction:column;min-width:0;min-height:0}
.bmid-h{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--card);flex:none}
.bmid-h b{font-size:14px}
.thread{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:0;overscroll-behavior:contain}
.dayline{align-self:center;font-size:11px;color:var(--ink3);background:var(--card2);border:1px solid var(--line);padding:1px 10px;border-radius:999px}
.msg{max-width:78%;padding:8px 11px;border-radius:14px;font-size:13px;line-height:1.4;display:flex;flex-direction:column;gap:2px}
.msg .who{font-size:10.5px;font-weight:650;opacity:.75}
.msg time{font-family:var(--mono);font-size:10px;opacity:.7;align-self:flex-end}
.msg.c{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.b{align-self:flex-start;background:var(--card2);color:var(--ink2);border:1px dashed var(--line);border-bottom-left-radius:4px}
.msg.o,.msg.n{align-self:flex-end;background:var(--herb);color:var(--herbInk);border-bottom-right-radius:4px}
.sysc{align-self:flex-start;display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;font-size:12.5px;max-width:90%}
.sysc>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.proof{width:60px;height:76px;border-radius:10px;background:repeating-linear-gradient(135deg,var(--card2) 0 6px,var(--paper) 6px 12px);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink3);flex:none}
.qbox{display:flex;flex-direction:column;gap:4px;min-width:210px}
.qline{display:flex;justify-content:space-between;gap:16px}
.qline.tot{border-top:1px solid var(--line);padding-top:4px;font-weight:700}
.lbl{border:1.5px dashed var(--ink3);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.composer{border-top:1px solid var(--line);background:var(--card);padding:10px 12px;display:flex;flex-direction:column;gap:8px;flex:none}
.ctx{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 12px;border-radius:12px;background:var(--saffronSoft);font-size:12.5px}
.ctx.g{background:var(--leafSoft)} .ctx.r{background:var(--redSoft);color:var(--red);font-weight:600;padding:9px 12px}
.ctx>span{flex:1;min-width:0}
.qr{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.qr button{flex:none;font-size:12px;font-weight:550;padding:0 10px;min-height:28px;border-radius:999px;border:1px solid var(--line);background:var(--card2);color:var(--ink2);white-space:nowrap}
.phone .qr button{min-height:36px}
.cmp{display:flex;gap:8px;align-items:flex-end}
.cmp textarea{flex:1;min-width:0;resize:none;border:1px solid var(--line);border-radius:12px;padding:9px 12px;background:var(--paper);min-height:40px;max-height:120px;font-size:13.5px;line-height:1.4;outline:0}
.cmp textarea:focus{border-color:var(--leaf);box-shadow:0 0 0 3px var(--leafSoft)}
.send{width:40px;height:40px;border-radius:12px;background:var(--leaf);color:var(--onAccent);display:grid;place-items:center;flex:none;transition:transform .1s ease-out}
.phone .send{width:44px;height:44px}
.b360{border-left:1px solid var(--line);background:var(--card);overflow:auto;padding:14px;display:flex;flex-direction:column;gap:14px;overscroll-behavior:contain}
.b360-h{display:flex;align-items:center;gap:12px}
.b360-h b{font-size:15px;display:block}
.sec{display:flex;flex-direction:column;gap:8px}
.sec h4{font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.bpage{flex:1;overflow:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-height:0}
.kchips{display:flex;gap:6px;overflow-x:auto;margin:0 -12px;padding:0 12px;scrollbar-width:none;flex:none}
.kc{flex:none;display:inline-flex;align-items:baseline;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:12px;color:var(--ink2);white-space:nowrap}
.kc b{color:var(--ink);font-variant-numeric:tabular-nums}
.phr .fchips{flex-wrap:nowrap;overflow-x:auto;margin:0 -12px;padding:0 12px;scrollbar-width:none;flex:none}
.phr .fchips button{min-height:38px}
.blist{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.blist .bi:last-child{border-bottom:0}
.segbar{padding:8px 12px;background:var(--card);border-bottom:1px solid var(--line);flex:none}
.segbar .seg{display:flex}
.segbar .seg button{flex:1;justify-content:center}

/* radar (my additions) */
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.phr .rgrid{grid-template-columns:1fr}
.big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:2px 0 6px}
.big b{font-size:28px;font-weight:700;letter-spacing:-.02em}
.rrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}
.rrow .who{font-weight:600;min-width:0}
.rrow .who small{display:block;font-weight:500;color:var(--ink3);font-size:11.5px}
.rgroup{font-size:11.5px;font-weight:650;color:var(--ink2);padding:8px 0 2px;display:flex;align-items:center;gap:6px}
.meter{display:block;height:18px;border-radius:6px;background:var(--card2);border:1px solid var(--line);overflow:hidden;min-width:40px}
.meter i{display:block;height:100%;background:repeating-linear-gradient(135deg,var(--leaf) 0 3px,transparent 3px 7px)}
.meter.wa i{background:repeating-linear-gradient(135deg,var(--saffron) 0 3px,transparent 3px 7px)}
.meter.li i{background:repeating-linear-gradient(135deg,var(--lilac) 0 3px,transparent 3px 7px)}

/* ===== C · Overview tabs ===== */
.dC{background:radial-gradient(900px 360px at 8% -10%,var(--leafSoft),transparent 70%),var(--paper)}
.dC.lapr{display:flex;flex-direction:column}
.ctop{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 22px;flex:none}
.cbrand{display:flex;gap:10px;align-items:center}
.cbrand b{display:block;font-size:14px}
.cbrand small{display:block;font-size:11.5px;color:var(--ink3)}
.cbrand .lm{border-radius:50%;background:var(--leaf);color:var(--onAccent)}
.pilltabs{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:var(--sh1)}
.pilltabs button{padding:0 16px;min-height:34px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink2)}
.pilltabs button[aria-current="page"]{background:var(--ink);color:var(--paper)}
.cright{justify-self:end;display:flex;gap:8px;align-items:center}
.circbtn{width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2);position:relative}
.cbody{flex:1;overflow:auto;padding:4px 22px 24px;min-height:0}
.ctitle{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:6px 0 16px;flex-wrap:wrap}
.ctitle h2{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.upd{font-size:12.5px;color:var(--ink3);display:flex;align-items:center;gap:6px;margin-top:4px}
.live{width:8px;height:8px;border-radius:50%;background:var(--leaf);position:relative;display:inline-block}
@media (prefers-reduced-motion:no-preference){.live::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--leaf);animation:livep 2s ease-out infinite}}
@keyframes livep{from{transform:scale(1);opacity:.6}to{transform:scale(2.6);opacity:0}}
.ctools{display:flex;gap:10px;align-items:center}
.pchips{display:inline-flex;gap:4px}
.pchips button{min-height:30px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:650;color:var(--ink2);border:1px solid var(--line);background:var(--card)}
.pchips button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.phone .pchips button{min-height:38px;flex:1}
.phone .pchips{display:flex}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0;box-shadow:var(--sh1)}
.tile h3{font-size:13.5px;font-weight:650;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.tile h3 small{font-weight:500;color:var(--ink3);font-size:12px}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}
.fun{display:flex;flex-direction:column;gap:10px}
.fr{display:grid;grid-template-columns:86px minmax(0,1fr) 92px;gap:10px;align-items:center;font-size:12.5px}
.fr>span:last-child{text-align:right;white-space:nowrap}
.fr .meter{height:22px;border-radius:7px}
.gwrap{position:relative;max-width:240px;margin:0 auto;width:100%}
.gauge{display:block;width:100%;height:auto}
.gauge circle{fill:var(--line)} .gauge circle.on{fill:var(--leaf)} .gauge circle.goal{fill:var(--saffron)}
.gnum{position:absolute;left:0;right:0;bottom:0;text-align:center;display:flex;flex-direction:column;line-height:1.1}
.gnum b{font-size:30px;font-weight:700;letter-spacing:-.02em}
.gnum small{font-size:11.5px;color:var(--ink3)}
.money{background:linear-gradient(135deg,var(--lilac),var(--blue));color:var(--onAccent);border-color:transparent}
.money h3 small{color:inherit;opacity:.85}
.money .chip{background:transparent;border-color:currentColor;color:inherit}
.money .bars{height:44px;gap:5px}
.money .bars i{width:auto;flex:1;max-width:22px;background:currentColor;opacity:.35;border-radius:4px}
.money .bars i:last-child{opacity:1}
.money .mv{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1}
.money .lnk{color:inherit;text-decoration:underline;text-underline-offset:3px}
.map{display:block;width:100%;height:auto}
.map .md circle{fill:var(--ink3);opacity:.32}
.map .mk{fill:var(--leaf)} .map .mkr{fill:var(--leaf);opacity:.22}
.mleg{display:grid;grid-template-columns:repeat(5,auto);justify-content:space-between;gap:4px 8px;font-size:11.5px;color:var(--ink2)}
.mleg span{display:flex;flex-direction:column;align-items:flex-start}
.mleg b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.nrow{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;gap:10px;align-items:center;width:100%;text-align:left;padding:8px 6px;border-radius:10px}
.nrow+.nrow{border-top:1px solid var(--line)}
.nrow .grow b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nrow .grow small{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nrow .w{min-width:44px}
.car{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -12px;padding:2px 12px 4px;scrollbar-width:none;position:relative;flex:none}
.car>.tile{flex:0 0 86%;scroll-snap-align:center}
.cdots{display:flex;justify-content:center;gap:0;margin-top:-8px}
.cdots button{width:26px;height:30px;display:grid;place-items:center}
.cdots button::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line);transition:transform .2s var(--ease)}
.cdots button[aria-current="true"]::before{background:var(--ink);transform:scale(1.25)}
.dC .phh{background:transparent;border-bottom:0}
.olist2{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.orow2{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border-top:1px solid var(--line);min-height:56px}
.orow2:first-child{border-top:0}
.orow2 .grow b{display:block;font-size:13px}
.orow2 .grow small{display:block;font-size:11.5px}
.phr .mll{width:64px}
.phr .fr{grid-template-columns:1fr auto;gap:4px 10px}
.phr .fr .meter{grid-column:1/-1;grid-row:2}


/* ===== Real app layer: fills the viewport (no device frames), Telegram + safe areas ===== */
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.45;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none}
#app{height:100vh;height:100dvh;display:flex;flex-direction:column}
html.tg #app{height:var(--tg-viewport-stable-height,100dvh)}
.app{flex:1;min-height:0}
.lapr{display:flex;flex-direction:column}
.ell1{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
select{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;min-height:40px;padding:0 10px;max-width:100%}
.lnk:disabled,.qrow:disabled,.nrow:disabled,.orow2:disabled,.mini:disabled,.arow:disabled{cursor:default}

/* header (C) */
.ctop{grid-template-columns:auto minmax(0,1fr) auto;gap:16px;padding:14px max(22px,env(safe-area-inset-right,0px)) 12px max(22px,env(safe-area-inset-left,0px))}
.cbrand{min-width:0}
.cbody{padding:4px max(22px,env(safe-area-inset-right,0px)) 24px max(22px,env(safe-area-inset-left,0px))}
.pilltabs{max-width:100%;overflow-x:auto;scrollbar-width:none}
.pilltabs::-webkit-scrollbar{display:none}
.pilltabs button{white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.pilltabs button[aria-current="page"] .cnt{background:var(--paper);color:var(--ink)}
.seg.pres button{min-height:30px}
.mebadge{width:38px;height:38px;font-size:13px}
.av .on.away{background:var(--saffron)}
@media (max-width:1100px){.cbrand>span.grow{display:none}.pilltabs button{padding:0 12px}}
.ctitle h2{overflow-wrap:anywhere}
.upd{display:inline-flex;margin-top:0}
.upd-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--ink3);margin-top:4px}
.upd.stale{color:var(--saffron);font-weight:600}
.upd.stale .live{background:var(--saffron)}
.upd.stale .live::after{display:none}

/* phone shell */
.phh{padding:calc(8px + env(safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 8px max(14px,env(safe-area-inset-left,0px))}
.phh .upd-row{margin-top:0;font-size:11.5px}
.pbody{padding:12px max(12px,env(safe-area-inset-right,0px)) 16px max(12px,env(safe-area-inset-left,0px))}
.tabbar{padding:4px max(4px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px))}
.preschip{min-height:44px;padding:0 12px;font-size:12.5px;cursor:pointer}
.phone .pchips button,.phone .fchips button,.phone .seg button,.phone .ptabs button,.phone .qr button,.phone .btn2,.phone .btn2.sm,.phone .arow,.phone button.chip,.phone .segbar .seg button,.phone .cta{min-height:44px}
.phone .cdots button{width:44px;height:44px}
.phone .rrow .lnk,.phone .tbl .lnk,.phone .lnk,.phone .more.lnk{min-height:44px;display:inline-flex;align-items:center}
.phone .frow input,.phone select{min-height:44px}
.phone .field input{min-height:42px}
.phone .composer{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.phone .actionbar{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.phone .pchips{display:flex}
.phone .pchips button{flex:1}
.phone .toolbar .pchips{flex:1 1 100%}
.phr .thread{flex:1}

/* inbox (B panes inside the C shell) */
.cbody.inbox{overflow:hidden;display:flex;flex-direction:column;padding-bottom:16px}
.bwrap{flex:1;min-height:0;display:grid;grid-template-columns:340px minmax(0,1fr) 320px;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--sh1)}
.only-narrow{display:none}
@media (max-width:1100px){.bwrap{grid-template-columns:300px minmax(0,1fr)}.b360{display:none}.only-narrow{display:inline-flex}}
.bi .nm{min-width:0}
.msg .tx{white-space:pre-wrap;overflow-wrap:anywhere}
.msg{min-width:0}
.ro{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink2);flex-wrap:wrap}
.ro .i{vertical-align:-2px}
.composer textarea:disabled,.qr button:disabled,.send:disabled{opacity:.5;cursor:not-allowed}
.sysc .i{color:var(--ink2)}

/* lists, tables, rows */
.tl li{grid-template-columns:84px 10px minmax(0,1fr)}
.tl li span{overflow-wrap:anywhere;min-width:0}
.cellp .grow{max-width:260px}
.rrow .lnk.who{min-width:0}
.rrow .lnk.who small{font-weight:500;color:var(--ink3);font-size:11.5px}
.rrow .lnk.who .grow{display:flex;flex-direction:column;align-items:stretch;text-align:left;min-width:0}
.olist .orow{grid-template-columns:minmax(0,1fr) auto auto}
.subh{font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin:14px 0 2px}
details.ord{border-top:1px solid var(--line)}
details.ord:first-child{border-top:0}
details.ord summary{list-style:none;cursor:pointer;border-top:0}
details.ord summary::-webkit-details-marker{display:none}
details.ord[open]{padding-bottom:8px}
.tkh{display:flex;align-items:center;gap:8px;padding:10px 0 4px;font-size:12.5px;flex-wrap:wrap}
.thread.inline{padding:4px 0 8px;overflow:visible}
.oprow{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.ph+.oprow{border-top:0}
.oprow>.grow{flex:1 1 160px}
.oprow small{display:block}

/* meters vs 7-day average */
.fr{grid-template-columns:96px minmax(0,1fr) auto}
.meter{position:relative}
.meter .avg{position:absolute;top:2px;bottom:2px;left:50%;width:2px;margin-left:-1px;border-radius:1px;background:var(--ink2);opacity:.7}
.meter.none{background:none;border-style:dashed;display:flex;align-items:center;padding:0 8px}
.meter.none small{font-size:11px;color:var(--ink3)}
.sys.bad{color:var(--red)}

/* report bar chart: widths drawn to scale */
.bchart{display:flex;flex-direction:column;gap:6px;margin:4px 0 10px}
.brow{display:grid;grid-template-columns:minmax(80px,200px) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:12.5px}
.bs{display:block;background:var(--card2);border-radius:3px}
.bs rect{fill:var(--leaf)}
.bv{font-weight:600;text-align:right;min-width:52px}
.phone .brow{grid-template-columns:minmax(0,1fr) auto;gap:2px 8px}
.phone .brow .bs{grid-column:1/-1;grid-row:2}

/* loading, error, offline, sign-in */
.skel{display:flex;flex-direction:column;gap:8px;padding:4px 0}
.skel i{display:block;border-radius:10px;background:linear-gradient(90deg,var(--card2) 0%,var(--line) 50%,var(--card2) 100%);background-size:200% 100%}
@media (prefers-reduced-motion:no-preference){.skel i{animation:shim 1.4s ease-in-out infinite}}
@keyframes shim{from{background-position:200% 0}to{background-position:-200% 0}}
.empty.err .i{color:var(--red)}
.offline{flex:none;display:flex;align-items:center;justify-content:center;gap:8px;padding:calc(8px + env(safe-area-inset-top,0px)) 16px 8px;background:var(--saffronSoft);color:var(--saffron);font-size:12.5px;font-weight:600;text-align:center}
.gate{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;max-width:460px;margin:0 auto}
.gate h1{font-size:22px;font-weight:700;letter-spacing:-.02em}
.gate p{color:var(--ink2);font-size:14.5px}
.lm.big{width:56px;height:56px;border-radius:50%;font-size:24px;background:var(--leaf);color:var(--onAccent)}

/* overlays */
.pop-scrim{position:fixed;inset:0;z-index:44}
.pop{max-height:calc(100dvh - 80px);overflow:auto}
.drawer .dr-h h3{min-width:0}
.actionbar .soon{background:var(--card2);color:var(--ink3);cursor:not-allowed}
.actionbar .p.soon{background:var(--leafSoft);color:var(--leaf)}
.actionbar button>span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.actionbar small{font-size:10px;font-weight:500;opacity:.85}

/* team form */
.form .frow{display:flex;flex-direction:column;gap:4px;margin:0 0 10px;border:0;padding:0;min-width:0}
.frow label,.frow legend{font-size:12.5px;font-weight:650;padding:0}
.frow input{min-height:40px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:var(--card);color:var(--ink);font-size:14px;max-width:420px;outline:0}
.frow input:focus{border-color:var(--leaf);box-shadow:0 0 0 3px var(--leafSoft)}
.frow input[aria-invalid="true"]{border-color:var(--red)}
.frow input:disabled,select:disabled{background:var(--card2);color:var(--ink2)}
.frow select{max-width:420px}
/* Texts page (2b) */
.txitem .txt{white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0;font-size:13.5px}
.txed textarea{width:100%;min-height:120px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card);color:var(--ink);font:inherit;font-size:14px;resize:vertical;outline:0}
.txed textarea:focus{border-color:var(--leaf);box-shadow:0 0 0 3px var(--leafSoft)}
.txed textarea[aria-invalid="true"]{border-color:var(--red)}
.txprev{white-space:pre-wrap;overflow-wrap:anywhere;border:1px dashed var(--line);border-radius:10px;padding:10px 12px;background:var(--card2);font-size:13.5px}
.txhist{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}
.txver{border-bottom:1px solid var(--line);padding:6px 0}
.frow small{font-size:11.5px}
.ferr{color:var(--red);font-weight:600}
.chip.tog{min-height:32px;padding:0 12px;cursor:pointer}
.chip.tog[aria-pressed="true"]{background:var(--leafSoft);color:var(--leaf);border-color:transparent}
.tgroup{border:1px solid var(--line);border-radius:14px;padding:4px 12px 6px;margin:6px 0 4px;min-width:0}
.tgroup legend{font-size:12.5px;font-weight:650;padding:0 6px}
.trow{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.tgroup legend+.trow,.ph+.trow{border-top:0}
.tcmd{flex:1;min-width:0;display:flex;flex-direction:column}
.tcmd small{font-size:11.5px;color:var(--ink3);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.seg.tri button[aria-pressed="true"].t-allowed{background:var(--leafSoft);color:var(--leaf)}
.seg.tri button[aria-pressed="true"].t-approval{background:var(--saffronSoft);color:var(--saffron)}
.seg.tri button[aria-pressed="true"].t-blocked{background:var(--redSoft);color:var(--red)}
.phone .trow{flex-direction:column;align-items:stretch;gap:6px}
.phone .trow .seg{display:flex}
.phone .trow .seg button{flex:1;justify-content:center;padding:0 6px}
.ck{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line);cursor:pointer}
.ck input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--leaf);flex:none}
.ck span{display:flex;flex-direction:column}
.ck small{font-size:11.5px;color:var(--ink3)}
.phone .ck{min-height:44px}
.savebar{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--pop);z-index:2;flex-wrap:wrap}
.btn2.danger{color:var(--red);border-color:var(--red)}
.panel.danger{border-color:var(--red);background:var(--redSoft)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.field.sel{padding:0 4px}
.field.sel select{border:0;min-height:32px;max-width:220px;background:none}

/* mid widths */
@media (max-width:1180px){.bento .s3,.bento .s4,.bento .s5{grid-column:span 6}.bento .s7,.bento .s8{grid-column:span 12}.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.pilltabs{justify-self:center}
@media (max-width:1320px){.cbrand small{display:none}}
/* 2c/2d actions: order/payment buttons, inline forms, label preview, quote drawer */
.acts{display:flex;flex-direction:column;gap:6px;margin:8px 0 2px}
.actform{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--card2)}
.actform label,.qlbl{font-size:12.5px;font-weight:650}
.actform input,.actform select,.qdrawer select,.qdrawer input.qty,.qdrawer #q-dv{min-height:36px;border:1px solid var(--line);border-radius:10px;padding:0 10px;background:var(--card);color:var(--ink);font-size:14px;max-width:100%;outline:0}
.actform input:focus,.qdrawer input:focus,.qdrawer select:focus{border-color:var(--leaf);box-shadow:0 0 0 3px var(--leafSoft)}
.actst{display:block;font-size:12px}
.lblprev{max-width:100%;border:1px solid var(--line);border-radius:10px;background:#fff}
.cta.sm{min-height:30px;padding:0 12px;font-size:12px}
.qdrawer{z-index:43}
.qdrawer input.qty{width:64px}
.qdrawer textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--card);color:var(--ink);font:inherit;font-size:14px;resize:vertical}
.qdrawer ul.ferr{margin:0;padding-left:18px}
.dlv .frow input{max-width:100%}
.qscrim{z-index:42}