/* Auteur team dashboard. Design: team-v1 L07 Bento (4 Nov 2026), ported one to one; inline styles became classes (strict CSP). No em or en dashes. */
:root{
  --g:#ECE9E3;--p:#F8F6F2;--p2:#E3DFD7;--p3:#D6D1C7;
  --k:#1C1B19;--k2:#2A2927;--k3:#3A3834;
  --ink:#1B1A18;--mut:#6B665E;--inkd:#F3F0EA;--mutd:#ABA69C;
  --money:#9A6512;--money-t:#F0E0BE;--money-d:#E6AA47;--money-k:#4A3610;
  --cli:#33609F;--cli-t:#D3DEF0;--cli-d:#8FB3EA;--cli-k:#223253;
  --pipe:#1B7378;--pipe-t:#C9E3E2;--pipe-d:#66C3C6;--pipe-k:#163C3E;
  --blk:#B23A26;--blk-t:#F3D3CA;--blk-d:#F0836D;--blk-k:#4E211A;
  --r:16px;--rs:11px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --dot-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='1' fill='%23000' fill-opacity='.11'/%3E%3C/svg%3E");
  --dot-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='1' fill='%23fff' fill-opacity='.09'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:var(--g);color:var(--ink);font:14px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button,a{font:inherit;color:inherit;text-decoration:none;background:none;border:0;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
button:focus,a:focus{outline:0}
button:focus-visible,a:focus-visible{background-color:rgba(0,0,0,.08)}
svg{display:block}
#app{height:100%;width:100%;position:relative}
.view{height:100%;width:100%;animation:vin .32s var(--ease)}
@keyframes vin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pr{transition:transform .14s var(--ease),background-color .14s var(--ease)}
.pr:active{transform:scale(.975)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* surfaces */
.k{background:var(--k);color:var(--inkd)}
.k2{background:var(--k2);color:var(--inkd)}
.p{background:var(--p);border-radius:var(--r)}
.p2{background:var(--p2);border-radius:var(--r)}
.kp{background:var(--k2);color:var(--inkd);border-radius:var(--r)}
.kp2{background:var(--k3);color:var(--inkd);border-radius:var(--r)}
.dots{background-image:var(--dot-l)}
.k .dots,.k2 .dots,.kp .dots,.dots.d{background-image:var(--dot-d)}
.rel{position:relative;overflow:hidden}
.ht{position:absolute;right:14px;top:14px;pointer-events:none;color:currentColor;opacity:.26}
.ph .ht{right:12px;top:12px;opacity:.2}
.ht.b{top:auto;bottom:14px}
.ht.money{color:var(--money-d)}.ht.cli{color:var(--cli-d)}.ht.pipe{color:var(--pipe-d)}.ht.blk{color:var(--blk-d)}
.ht svg{width:100%;height:auto}

/* type */
.mut{color:var(--mut)}
.k .mut,.k2 .mut,.kp .mut,.kp2 .mut,.tile.k .mut{color:var(--mutd)}
.t13{font-size:13px}.t14{font-size:14px}.t15{font-size:15px}.t16{font-size:16px}.t18{font-size:18px}.t22{font-size:22px}
.b{font-weight:600}.sb{font-weight:500}
.cap{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);font-weight:600}
.k .cap,.k2 .cap,.kp .cap{color:var(--mutd)}
.money{color:var(--money)}.cli{color:var(--cli)}.pipe{color:var(--pipe)}.blk{color:var(--blk)}
.k .money,.k2 .money,.kp .money,.kp2 .money,.k .cli,.k2 .cli,.kp .cli,.k .pipe,.k2 .pipe,.kp .pipe,.k .blk,.k2 .blk,.kp .blk{}
.k .money,.k2 .money,.kp .money,.kp2 .money,.tile.k .money{color:var(--money-d)}
.k .cli,.k2 .cli,.kp .cli,.kp2 .cli,.tile.k .cli{color:var(--cli-d)}
.k .pipe,.k2 .pipe,.kp .pipe,.kp2 .pipe,.tile.k .pipe{color:var(--pipe-d)}
.k .blk,.k2 .blk,.kp .blk,.kp2 .blk,.tile.k .blk{color:var(--blk-d)}

/* big numerals */
.stat{display:flex;flex-direction:column;gap:4px;min-width:0}
.stat .lb{font-size:13px;color:var(--mut)}
.k .stat .lb,.k2 .stat .lb,.kp .stat .lb,.tile.k .stat .lb{color:var(--mutd)}
.n{font-weight:600;letter-spacing:-.025em;line-height:1.2;font-variant-numeric:tabular-nums}
.n.s1{font-size:28px}.n.s2{font-size:40px}.n.s3{font-size:56px}.n.s4{font-size:76px}.n.s5{font-size:96px}
.n .u{font-size:max(.42em,13px);font-weight:500;letter-spacing:0;margin-right:.08em;position:relative;top:-.5em;opacity:.8}
.n .uu{font-size:max(.32em,13px);font-weight:500;letter-spacing:0;margin-left:.2em;opacity:.75}
.ph .n .u{font-size:max(.42em,15px)}.ph .n .uu{font-size:max(.32em,15px)}
.stat .hint{font-size:13px;color:var(--mut)}
.k .stat .hint,.k2 .stat .hint,.kp .stat .hint,.tile.k .stat .hint{color:var(--mutd)}

/* dot matrix */
.dm{display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start}
.dm i{display:block;width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,.12)}
.k .dm i,.k2 .dm i,.kp .dm i,.tile.k .dm i{background:rgba(255,255,255,.14)}
.dm.money i.on{background:var(--money)}.dm.cli i.on{background:var(--cli)}.dm.pipe i.on{background:var(--pipe)}.dm.blk i.on{background:var(--blk)}
.k .dm.money i.on,.k2 .dm.money i.on,.kp .dm.money i.on,.tile.k .dm.money i.on{background:var(--money-d)}
.k .dm.cli i.on,.k2 .dm.cli i.on,.kp .dm.cli i.on,.tile.k .dm.cli i.on{background:var(--cli-d)}
.k .dm.pipe i.on,.k2 .dm.pipe i.on,.kp .dm.pipe i.on,.tile.k .dm.pipe i.on{background:var(--pipe-d)}
.k .dm.blk i.on,.k2 .dm.blk i.on,.kp .dm.blk i.on,.tile.k .dm.blk i.on{background:var(--blk-d)}
.dm i.half{width:10px;height:10px;background:transparent!important;position:relative}
.dm i.half:after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:var(--hc,rgba(0,0,0,.3))}
.dm.money i.half:after{background:var(--money)}.k .dm.money i.half:after,.kp .dm.money i.half:after{background:var(--money-d)}
.dm.pipe i.half:after{background:var(--pipe)}.dm.cli i.half:after{background:var(--cli)}
.dm.big i{width:14px;height:14px}.dm.big{gap:6px}
.dm.sm i{width:7px;height:7px}.dm.sm{gap:4px}
/* dot bar chart */
.dbar{display:flex;gap:10px;align-items:flex-end}
.dbar .c{display:flex;flex-direction:column-reverse;gap:3px;align-items:center}
.dbar .c i{display:block;width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.16)}
.k .dbar .c i,.kp .dbar .c i,.tile.k .dbar .c i{background:rgba(255,255,255,.26)}
.dbar .c.today i{background:var(--ink)}.k .dbar .c.today i,.kp .dbar .c.today i,.tile.k .dbar .c.today i{background:var(--inkd)}
.dbar .c span{font-size:13px;color:var(--mut);margin-top:4px}
.k .dbar .c span,.kp .dbar .c span,.tile.k .dbar .c span{color:var(--mutd)}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;line-height:1.3}
.chip:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.chip.money{background:var(--money-t);color:var(--money)}.chip.cli{background:var(--cli-t);color:var(--cli)}
.chip.pipe{background:var(--pipe-t);color:var(--pipe)}.chip.blk{background:var(--blk-t);color:var(--blk)}
.chip.neu{background:rgba(0,0,0,.08);color:var(--mut)}
.k .chip.money,.kp .chip.money,.tile.k .chip.money{background:var(--money-k);color:var(--money-d)}
.k .chip.cli,.kp .chip.cli,.tile.k .chip.cli{background:var(--cli-k);color:var(--cli-d)}
.k .chip.pipe,.kp .chip.pipe,.tile.k .chip.pipe{background:var(--pipe-k);color:var(--pipe-d)}
.k .chip.blk,.kp .chip.blk,.tile.k .chip.blk{background:var(--blk-k);color:var(--blk-d)}
.k .chip.neu,.kp .chip.neu,.tile.k .chip.neu{background:rgba(255,255,255,.1);color:var(--mutd)}
.cnt{display:inline-block;min-width:24px;text-align:center;padding:2px 7px;border-radius:999px;font-size:13px;font-weight:600;background:rgba(0,0,0,.08);color:var(--mut)}
.cnt.money{background:var(--money-t);color:var(--money)}.cnt.cli{background:var(--cli-t);color:var(--cli)}.cnt.pipe{background:var(--pipe-t);color:var(--pipe)}.cnt.blk{background:var(--blk-t);color:var(--blk)}
.k .cnt,.kp .cnt{background:rgba(255,255,255,.1);color:var(--mutd)}
.k .cnt.money,.kp .cnt.money{background:var(--money-k);color:var(--money-d)}.k .cnt.cli,.kp .cnt.cli{background:var(--cli-k);color:var(--cli-d)}
.k .cnt.pipe,.kp .cnt.pipe{background:var(--pipe-k);color:var(--pipe-d)}.k .cnt.blk,.kp .cnt.blk{background:var(--blk-k);color:var(--blk-d)}

/* brand, switcher, nav */
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px;min-width:0}
.brand .sub{font-weight:500;color:var(--mut)}
.k .brand .sub,.k2 .brand .sub{color:var(--mutd)}
.mark{flex:none}
.sw{display:flex;background:rgba(0,0,0,.09);border-radius:12px;padding:3px;gap:2px}
.k .sw,.k2 .sw{background:rgba(255,255,255,.09)}
.sw-b{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 4px;border-radius:9px;font-weight:600;font-size:14px;color:var(--mut);min-width:0}
.k .sw-b,.k2 .sw-b{color:var(--mutd)}
.sw-b b{width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.14);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:none}
.k .sw-b b,.k2 .sw-b b{background:rgba(255,255,255,.14)}
.sw-b.on{background:var(--p);color:var(--ink)}
.sw-b.on b{background:var(--ink);color:var(--p)}
.sw.col{flex-direction:column}
.sw.mini .sw-b span{display:none}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-i{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--rs);font-weight:500;color:var(--mut);font-size:14px}
.k .nav-i,.k2 .nav-i{color:var(--mutd)}
.nav-i .ic{width:18px;height:18px;flex:none}
.nav-i .cnt{margin-left:auto}
.nav-i.on{background:var(--p);color:var(--ink);font-weight:600}
.k .nav-i.on,.k2 .nav-i.on{background:rgba(255,255,255,.12);color:var(--inkd)}
.nav.hor{flex-direction:row;gap:4px}
.nav.hor .nav-i{padding:8px 12px}
.nav.seg{flex-direction:row;background:rgba(0,0,0,.08);border-radius:12px;padding:3px;gap:2px}
.k .nav.seg{background:rgba(255,255,255,.09)}
.nav.seg .nav-i{border-radius:9px;padding:7px 14px}
.nav.rail{align-items:center}
.nav.rail .nav-i{flex-direction:column;gap:4px;padding:8px 2px;width:66px;font-size:13px;justify-content:center;text-align:center}
.nav.rail .nav-i .ic{width:20px;height:20px}
.ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* panels, headings, rows */
.hd{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.hd .hd-t{font-weight:600;font-size:15px}
.hd .r{margin-left:auto;font-size:13px;color:var(--mut)}
.k .hd .r,.kp .hd .r{color:var(--mutd)}
.scroll{overflow:auto;min-height:0;scrollbar-width:none;overscroll-behavior:contain}
.scroll::-webkit-scrollbar{display:none}
.list{display:flex;flex-direction:column;gap:6px}
.row{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center;padding:10px 12px;border-radius:var(--rs);background:rgba(0,0,0,.035);min-width:0}
.k .row,.kp .row,.k2 .row{background:rgba(255,255,255,.06)}
.row.flat{background:transparent;padding:8px 0}
.row-m{min-width:0}
.row-t{font-weight:600;font-size:14px;overflow-wrap:anywhere}
.row-s{font-size:13px;color:var(--mut);margin-top:2px;overflow-wrap:anywhere}
.k .row-s,.kp .row-s,.k2 .row-s{color:var(--mutd)}
.row-r{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap;text-align:right}
.row-r:empty{display:none}
.row-c{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px}
.numline{display:none}
.ph .numline{display:inline;font-weight:600;color:var(--pipe);font-variant-numeric:tabular-nums}
.ph .called .numline{color:var(--mut)}
.ph .row .tel,.ph .tr .tel,.ph .qi .tel{width:52px;height:52px;border-radius:50%;padding:0;justify-content:center;flex:none}
.ph .row .tel span,.ph .tr .tel span,.ph .qi .tel span{display:none}
.ph .row .tel .ic,.ph .tr .tel .ic,.ph .qi .tel .ic{width:22px;height:22px}
.row .amt{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.row .x{grid-column:1/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.row.open .x{grid-template-rows:1fr}
.row .x>div{overflow:hidden;min-height:0}
.row .x .xi{padding-top:8px;font-size:13px;color:var(--mut);overflow-wrap:anywhere}
.k .row .x .xi,.kp .row .x .xi{color:var(--mutd)}
.row.pr:active{transform:scale(.99)}
.lead{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.lead.money{background:var(--money)}.lead.cli{background:var(--cli)}.lead.pipe{background:var(--pipe)}.lead.blk{background:var(--blk)}.lead.neu{background:var(--p3)}
.row.lead3{grid-template-columns:auto 1fr auto}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;border-radius:var(--rs);font-weight:600;font-size:14px;background:rgba(0,0,0,.08);white-space:nowrap}
.k .btn,.kp .btn{background:rgba(255,255,255,.1)}
.btn.pri{background:var(--ink);color:var(--p)}
.k .btn.pri,.kp .btn.pri{background:var(--inkd);color:var(--ink)}
.btn.money{background:var(--money);color:#fff}.btn.cli{background:var(--cli);color:#fff}.btn.pipe{background:var(--pipe);color:#fff}.btn.blk{background:var(--blk);color:#fff}
.btn .ic{width:16px;height:16px}
.tel{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--rs);background:var(--pipe-t);color:var(--pipe);font-weight:600;font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.k .tel,.kp .tel{background:var(--pipe-k);color:var(--pipe-d)}
.tel .ic{width:16px;height:16px}
.row.called .tel{background:rgba(0,0,0,.08);color:var(--mut)}
.k .row.called .tel,.kp .row.called .tel{background:rgba(255,255,255,.1);color:var(--mutd)}
.row.called .row-t,.tl-e.called .row-t{color:var(--mut)}
.tl-e.called .tel,.qi.called .tel{background:rgba(0,0,0,.08);color:var(--mut)}
.called-tag{display:none;font-size:13px;color:var(--mut);font-weight:600}
.row.called .called-tag{display:inline}
.k .called-tag,.kp .called-tag{color:var(--mutd)}

/* generic desktop frames */
.app{height:100%;display:grid;min-height:0}
.side{display:flex;flex-direction:column;gap:14px;padding:18px 14px;min-height:0}
.side .foot{margin-top:auto;font-size:13px;color:var(--mut)}
.k .side .foot{color:var(--mutd)}
.main{min-height:0;min-width:0;display:grid;padding:18px 22px;gap:14px}
.panel{padding:16px 18px;min-height:0;min-width:0;display:flex;flex-direction:column}
.panel>.scroll{flex:1}
.top{display:flex;align-items:center;gap:14px;min-width:0}
.top .sp{flex:1}
.top .asof{font-size:13px;color:var(--mut);white-space:nowrap}
.k .top .asof{color:var(--mutd)}
.h1{font-size:22px;font-weight:600;letter-spacing:-.01em}
.h2{font-size:18px;font-weight:600;letter-spacing:-.01em}
.grid{display:grid;gap:14px;min-height:0;min-width:0}
.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px}
.kv dt{color:var(--mut);white-space:nowrap}
.k .kv dt,.kp .kv dt{color:var(--mutd)}
.kv dd{overflow-wrap:anywhere}
.ol{display:flex;flex-direction:column;gap:8px;counter-reset:q}
.ol>div{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start}
.ol>div:before{counter-increment:q;content:counter(q);width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.k .ol>div:before,.kp .ol>div:before{background:rgba(255,255,255,.12)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.07);font-size:13px;font-weight:600;color:var(--mut)}
.k .pill,.kp .pill{background:rgba(255,255,255,.1);color:var(--mutd)}
.pill.on{background:var(--ink);color:var(--p)}
.k .pill.on,.kp .pill.on{background:var(--inkd);color:var(--ink)}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.wrap{overflow-wrap:anywhere}
.nowrap{white-space:nowrap}

/* phone */
.ph{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr);font-size:16px;background:var(--g)}
.ph .t13{font-size:15px}.ph .cap{font-size:15px}.ph .chip{font-size:15px;padding:4px 10px}.ph .cnt{font-size:15px}
.ph .row-t{font-size:16px}.ph .row-s{font-size:15px}.ph .row{padding:12px 14px}.ph .stat .lb,.ph .stat .hint{font-size:15px}
.ph .hd .r{font-size:15px}.ph .hd .hd-t{font-size:16px}.ph .kv{font-size:15px}.ph .btn{font-size:16px;padding:12px 16px}
.ph .tel{font-size:16px;padding:10px 14px}.ph .nav-i{font-size:16px}.ph .sw-b{font-size:15px}.ph .sw-b b{font-size:14px}
.ph .row .x .xi{font-size:15px}.ph .pill{font-size:15px}.ph .dbar .c span{font-size:15px}.ph .brand{font-size:16px}
.ph .ol>div:before{font-size:15px}.ph .called-tag{font-size:15px}.ph .top .asof{font-size:15px}
.ph .hour .hh,.ph .tl-h,.ph .tbl .tr.th,.ph .tbl .tr .x .xi,.ph .map .st,.ph .map .st .a,.ph .map .st .c,.ph .legend,.ph .tile .ttl,.ph .sw-b b,.ph .nav.rail .nav-i,.ph .side .foot{font-size:15px}
.ph .tbl .td{font-size:16px}.ph .t14{font-size:16px}.ph .t16{font-size:17px}.ph .h2{font-size:22px}
.ph .map .st{border-radius:7px;gap:0}
.ph-h{display:flex;flex-direction:column;gap:12px;padding:52px 16px 10px;min-width:0}
.ph-h .ttl{display:flex;align-items:center;gap:10px}
.ph-h .h1{font-size:28px;letter-spacing:-.02em}
.ph-h .sw{margin-left:auto;padding:2px}
.ph-h .sw-b{padding:5px 8px;gap:5px}
.ph-b{overflow:auto;min-height:0;padding:4px 16px 16px;scrollbar-width:none;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.ph-b::-webkit-scrollbar{display:none}
.ph-b>*{flex:none}
.ph .seg.wide{overflow-x:auto;scrollbar-width:none}.ph .seg.wide::-webkit-scrollbar{display:none}.ph .seg.wide button{flex:none;padding:8px 12px}
.ph-t{display:grid;grid-template-columns:repeat(4,1fr);padding:8px 10px 26px;background:var(--p);gap:4px}
.ph-t button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;border-radius:12px;font-size:15px;font-weight:500;color:var(--mut)}
.ph-t button .ic{width:24px;height:24px}
.ph-t button.on{color:var(--ink);font-weight:600}
.ph-t button.on .ic{stroke-width:2.2}
.ph-pri{position:relative;margin:0 16px 10px}
.ph-pri .btn{width:100%;padding:16px;font-size:17px;border-radius:14px}
.ph .panel{padding:16px}
.ph .call-big{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px;border-radius:14px;background:var(--p);min-height:76px}
.ph .call-big .tel.round{width:56px;height:56px;border-radius:50%;padding:0;justify-content:center;align-self:center}
.ph .call-big .tel.round span{display:none}
.ph .call-big .tel.round .ic{width:24px;height:24px}
.ph .call-big .num{font-size:17px;font-weight:600;color:var(--pipe);margin-top:4px;font-variant-numeric:tabular-nums}
.ph .call-big.called .num{color:var(--mut)}
.ph .call-big .x{grid-column:1/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.ph .call-big.open .x{grid-template-rows:1fr}
.ph .call-big .x>div{overflow:hidden;min-height:0}
.ph .call-big .x .xi{padding-top:8px;font-size:15px;color:var(--mut)}
.ph .call-big.called{background:var(--p2)}
.ph .call-big.called .row-t{color:var(--mut)}
.ph .call-big.called .tel{background:rgba(0,0,0,.08);color:var(--mut)}
.ph .seg{display:flex;background:rgba(0,0,0,.08);border-radius:12px;padding:3px;gap:2px}
.ph .seg button{flex:1;padding:8px 4px;border-radius:9px;font-weight:600;font-size:15px;color:var(--mut);text-align:center;display:flex;justify-content:center;gap:6px;align-items:center}
.ph .seg button.on{background:var(--p);color:var(--ink)}
.ph .back{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:16px;color:var(--cli)}
.ph .back .ic{width:18px;height:18px}
.ph .tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ph .tiles .tile{padding:14px;border-radius:14px;min-height:112px;display:flex;flex-direction:column;gap:6px;background:var(--p)}
.ph .tiles .tile.w{grid-column:1/-1}
.ph .tiles .tile.k{background:var(--k);color:var(--inkd)}

/* bento tiles (desktop) */
.tiles{display:grid;gap:12px;min-height:0}
.tile{padding:16px 18px;border-radius:var(--r);background:var(--p);display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0;position:relative;overflow:hidden}
.tile.k{background:var(--k);color:var(--inkd)}
.tile .ttl{font-size:13px;color:var(--mut);font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.tile.k .ttl{color:var(--mutd)}
.tile .fill{flex:1;min-height:0}

/* table */
.tbl{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;flex:1}
.ph .tbl{grid-template-rows:auto;flex:none}
.tbl .tr{display:grid;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--rs);min-width:0}
.tbl .tr.th{font-size:13px;color:var(--mut);font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding-top:4px;padding-bottom:6px}
.tbl .tr.pr{background:rgba(0,0,0,.035)}
.tbl .tr.pr:nth-child(even){background:rgba(0,0,0,.055)}
.tbl .td{min-width:0;overflow-wrap:anywhere;font-size:14px}
.tbl .td.r{text-align:right;font-variant-numeric:tabular-nums}
.tbl .body{display:flex;flex-direction:column;gap:4px}
.tbl .tr .x{grid-column:1/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.tbl .tr.open .x{grid-template-rows:1fr}
.tbl .tr .x>div{overflow:hidden;min-height:0}
.tbl .tr .x .xi{padding-top:6px;font-size:13px;color:var(--mut)}

/* timeline */
.tlw{display:grid;grid-template-columns:72px 1fr;column-gap:12px;row-gap:0;align-content:start}
.tl-h{font-size:13px;color:var(--mut);font-weight:600;padding-top:10px;text-align:right;font-variant-numeric:tabular-nums}
.tl-e{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:10px 12px;border-radius:var(--rs);background:rgba(0,0,0,.035);margin:4px 0}
.tl-e .lead{margin-top:5px}
.tl-gap{height:14px;grid-column:2;display:flex;gap:5px;align-items:center;padding-left:14px}
.tl-gap i{width:5px;height:5px;border-radius:50%;background:rgba(0,0,0,.14);display:block}
.hours{display:flex;flex-direction:column;gap:0}
.hour{display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:start;min-height:34px;flex:none}
.ph .hour{grid-template-columns:68px 1fr}
.hour .hh{font-size:13px;color:var(--mut);font-weight:600;padding-top:7px;text-align:right}
.hour .hq{display:flex;gap:6px;padding-top:11px}
.hour .hq i{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.14);display:block}
.hour .hq i.now{background:var(--blk);width:8px;height:8px;margin-top:-1px}
.hour.has .hq{display:none}
.hour .ev{display:flex;flex-direction:column;gap:4px}

/* map */
.map{position:relative;min-height:0}
.map .st{position:absolute;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:var(--p2);color:var(--mut);font-size:13px;font-weight:600}
.map .st.has{color:#fff}
.map .st.cli.has{background:var(--cli)}.map .st.pipe.has{background:var(--pipe)}.map .st.money.has{background:var(--money)}
.map .st.on{background:var(--ink);color:var(--p)}
.map .st .c{font-size:16px;font-weight:700;line-height:1}
.map .st .a{font-size:13px;opacity:.9;line-height:1}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--mut)}
.legend span{display:inline-flex;align-items:center;gap:6px}

/* queue */
.q{display:flex;flex-direction:column;gap:6px}
.q .qi{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:var(--rs);background:rgba(0,0,0,.035)}
.q .qi .no{font-weight:700;font-size:16px;color:var(--mut)}
.k .q .qi,.kp .q .qi{background:rgba(255,255,255,.06)}

/* payments */
.pay{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start;padding:12px 14px;border-radius:var(--rs);background:rgba(0,0,0,.035);min-width:0}
.k .pay,.kp .pay,.tile.k .pay{background:rgba(255,255,255,.06)}
.pay-m{min-width:0}
.pay-amt{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums}
.pay-chips{display:flex;gap:6px;flex-wrap:wrap}
.pay.ok .pay-chips .chip{animation:pop .3s var(--ease) both}
.pay.ok .pay-chips .chip:nth-child(2){animation-delay:.12s}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.pay-r{display:flex;align-items:flex-start}
.pay-foot{grid-column:1/-1;display:none;align-items:center;gap:10px;flex-wrap:wrap}
.pay.ok .pay-foot{display:flex}
.pay-bar .pay{grid-template-columns:1fr}
.pay-bar .pay-r{margin-top:2px}
.pay-btn{transition:background-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.pay.ok .pay-btn{background:var(--money-t);color:var(--money);pointer-events:none}
.k .pay.ok .pay-btn,.kp .pay.ok .pay-btn,.tile.k .pay.ok .pay-btn{background:var(--money-k);color:var(--money-d)}
.pay.ok .pay-btn{animation:pop .3s var(--ease)}
.pay-replay{font-size:13px;font-weight:600;color:var(--mut);padding:2px 4px}
.k .pay-replay,.kp .pay-replay{color:var(--mutd)}
.pay-empty{display:flex;flex-direction:column;gap:3px;padding:14px;border-radius:var(--rs);background:rgba(0,0,0,.035)}
.k .pay-empty,.kp .pay-empty,.tile.k .pay-empty{background:rgba(255,255,255,.06)}
.ph .pay-amt{font-size:24px}.ph .pay-replay{font-size:15px}.ph .pay{padding:12px}

.fillh{height:100%}


/* ---------- additions for the live app (classes in place of the design's inline styles; strict CSP) ---------- */
.hid{display:none!important}
.mt6{margin-top:6px}.mt8{margin-top:8px}.mt10{margin-top:10px}.mt12{margin-top:12px}.mt14{margin-top:14px}.mt18{margin-top:18px}.mt22{margin-top:22px}
.mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb10{margin-bottom:10px}.mta{margin-top:auto}
.mw420{max-width:420px}.mw640{max-width:640px}
.g4{gap:4px}.g10{gap:10px}
.p6{padding:6px 0}.p4{padding:4px 0}
.pad18{padding:18px}.pad0{padding:0}
.row.c2{grid-template-columns:1fr auto}
.app.rows2{grid-template-rows:auto minmax(0,1fr)}
.top.bar{padding:12px 22px;gap:18px;background:var(--p)}
.main.one{grid-template-rows:minmax(0,1fr)}
.main.two{grid-template-columns:minmax(0,1fr) 440px;grid-template-rows:minmax(0,1fr)}
.main.hdr{grid-template-rows:auto minmax(0,1fr)}
.tiles.bento{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr)}
.t-a{grid-column:1/3;grid-row:1/3}.t-b{grid-column:3;grid-row:1/3;padding:0}.t-c{grid-column:4;grid-row:1/3}
.t-d{grid-column:1/3}.t-e{grid-column:3/5}.t-f{grid-column:1/5;padding:0}
.eng{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:end;flex:1;min-height:0}
.cols3.g10{gap:10px}
.pay-win{margin:-4px 0 12px}
.pay-bar{padding:14px 18px}
.pay-bar.fill{padding:16px 18px;height:100%}
.pay-grid{display:grid;grid-template-columns:1.1fr 1.5fr 1fr;gap:18px;align-items:start;min-width:0}
.pay-grid>div{min-width:0}
.tile.w.pad-s{padding:10px 12px}
.panel.flexnone{flex:none}
.wrap15{font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.asof.sub{display:block;font-size:13px;color:var(--mut)}

/* buttons that are real actions */
.btn.sm{padding:7px 11px;font-size:13px}
.btn.ghost{background:transparent;color:var(--mut)}
.k .btn.ghost,.kp .btn.ghost,.tile.k .btn.ghost{color:var(--mutd)}
.btn:disabled{opacity:.5;cursor:default}
.btn.busy{opacity:.7;pointer-events:none}

/* forms */
.form{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;grid-column:1/-1}
.form .full{grid-column:1/-1}
.inp,.sel,.ta{width:100%;font:inherit;font-size:14px;color:var(--ink);background:rgba(0,0,0,.06);border:0;border-radius:var(--rs);padding:10px 12px;min-width:0;outline:0}
.k .inp,.kp .inp,.tile.k .inp,.k .sel,.kp .sel,.tile.k .sel,.k .ta,.kp .ta,.tile.k .ta{background:rgba(255,255,255,.1);color:var(--inkd)}
.inp:focus-visible,.sel:focus-visible,.ta:focus-visible{background:rgba(0,0,0,.1)}
.k .inp:focus-visible,.kp .inp:focus-visible,.tile.k .inp:focus-visible{background:rgba(255,255,255,.16)}
.inp::placeholder,.ta::placeholder{color:var(--mut)}
.ta{min-height:70px;resize:vertical;font-family:inherit}
.lbl{font-size:13px;color:var(--mut);font-weight:600;margin-bottom:4px;display:block}
.k .lbl,.kp .lbl,.tile.k .lbl{color:var(--mutd)}
.form-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap;grid-column:1/-1}
.composer{display:flex;gap:8px;align-items:flex-start;margin-top:8px;grid-column:1/-1}
.composer .ta{flex:1;min-height:48px}
.segd{display:flex;flex-wrap:wrap;gap:4px}
.segd button{padding:7px 11px;border-radius:9px;font-weight:600;font-size:13px;color:var(--mut);background:rgba(0,0,0,.06)}
.segd button.on{background:var(--ink);color:var(--p)}
.k .segd button,.kp .segd button,.tile.k .segd button{background:rgba(255,255,255,.1);color:var(--mutd)}
.k .segd button.on,.kp .segd button.on,.tile.k .segd button.on{background:var(--inkd);color:var(--ink)}
.row .x .xi .thread{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.msg{padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.05);font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.msg.desk{background:var(--cli-t);color:var(--cli-k)}
.msg small{display:block;font-size:13px;color:var(--mut);margin-top:2px}
.job-log{font-size:13px;color:var(--mut);white-space:pre-wrap;overflow-wrap:anywhere;margin-top:6px}
.err{font-size:13px;color:var(--blk);font-weight:600}

/* pay item in its live states */
.pay.queued .pay-btn,.pay.running .pay-btn{background:var(--money-t);color:var(--money);pointer-events:none}
.k .pay.queued .pay-btn,.kp .pay.queued .pay-btn,.tile.k .pay.queued .pay-btn,.k .pay.running .pay-btn,.kp .pay.running .pay-btn,.tile.k .pay.running .pay-btn{background:var(--money-k);color:var(--money-d)}
.pay.ok .pay-foot,.pay.queued .pay-foot,.pay.running .pay-foot,.pay.failed .pay-foot{display:flex}
.pay.failed .pay-btn{background:var(--blk-t);color:var(--blk);pointer-events:none}

/* sign-in */
.auth{height:100%;display:grid;place-items:center;padding:24px;background:var(--g)}
.auth .card{width:100%;max-width:420px;padding:28px 26px;border-radius:var(--r);background:var(--p);display:flex;flex-direction:column;gap:14px}
.auth .card .brand{font-size:16px}
.auth .h1{font-size:26px}
.auth .inp{font-size:16px;padding:13px 14px}
.auth .inp.code{letter-spacing:.3em;font-size:22px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
.auth .btn{padding:13px 16px;font-size:16px}
.auth .note{font-size:14px;color:var(--mut);line-height:1.45}
.auth .who{display:flex;gap:6px;flex-wrap:wrap}
.auth .who button{padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.07);font-weight:600;font-size:14px;color:var(--mut)}
.auth .who button.on{background:var(--ink);color:var(--p)}
.auth .ok{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--pipe);animation:pop .3s var(--ease) both}
.auth .ok .ic{width:18px;height:18px}

/* toast */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--ink);color:var(--p);padding:11px 16px;border-radius:12px;font-weight:600;font-size:14px;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);max-width:min(92vw,520px);text-align:center;z-index:9}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
body.phone .toast{bottom:112px;font-size:15px}

/* loading */
.loading{height:100%;display:grid;place-items:center;color:var(--mut);font-weight:600;font-size:15px}

/* phone sizes for the additions */
.ph .inp,.ph .sel,.ph .ta{font-size:16px;padding:12px 14px}.ph .segd button{font-size:15px;padding:9px 12px}.ph .lbl{font-size:15px}.ph .msg{font-size:15px}.ph .msg small{font-size:15px}.ph .job-log{font-size:15px}.ph .err{font-size:15px}.ph .btn.sm{font-size:15px;padding:9px 12px}.ph .form{grid-template-columns:1fr}.ph .asof.sub{font-size:15px}
.ph .main{padding:0}
.view.still{animation:none}
.ht svg{width:auto;height:auto;max-width:100%}
/* bottom block of a bento tile: sits at the bottom when short, shrinks and scrolls when long */
.bot{margin-top:auto;display:flex;flex-direction:column;justify-content:flex-end;min-height:0;flex:0 1 auto}
.bot>.list{overflow:auto;min-height:0;scrollbar-width:none;overscroll-behavior:contain;flex:0 1 auto}
.bot>.list::-webkit-scrollbar{display:none}
body.phone .auth .lbl,body.phone .auth .note,body.phone .auth .ok,body.phone .auth .err{font-size:15px}