/* Collab Studio — Maison 2026 */
:root{
  --bg:#FAF7F2;--surf:#FFFFFF;--surf2:rgba(125,63,69,.07);--text:#1A1015;--soft:#6E5357;--line:rgba(125,63,69,.12);
  --acc:#7D3F45;--accTxt:#7D3F45;--accSoft:#EFDDDA;--onAcc:#fff;--onAccSoft:#F3E6E4;--gold:#8A6A2F;--goldFill:#C4A76B;
  --sh:0 1px 1px rgba(44,31,31,.03),0 10px 30px rgba(92,46,51,.07);--hero:0 12px 28px rgba(125,63,69,.30);
  --glass:rgba(255,255,255,.62);--glassBd:rgba(255,255,255,.85);--glassSh:0 10px 30px rgba(44,31,31,.14),0 0 0 .5px rgba(125,63,69,.12);
  --pay:#1A1015;--payTxt:#fff;--paySoft:#D9C9CB;--payBtn:#fff;--payBtnTxt:#1A1015;--unpaidBg:rgba(223,201,154,.18);--unpaidTxt:#DFC99A;--payOk:#9FDDB3;
  --urgBg:#F8DCDC;--urgTxt:#8E2424;--okBg:#DDF0E2;--okTxt:#1E6337;--scrim:rgba(26,16,21,.32);--fade0:rgba(250,247,242,0);
  --s0b:#EEEAE8;--s0f:#4A3F42;--s1b:#DDE8F5;--s1f:#1F4A7A;--s2b:#F7EAD2;--s2f:#7A5410;--s3b:#F8DCDC;--s3f:#8E2424;--s4b:#DDF0E2;--s4f:#1E6337;--s5b:#EDD5D2;--s5f:#5C2E33;
  --D:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;--B:'Plus Jakarta Sans',-apple-system,system-ui,sans-serif;
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#120A0D;--surf:#1F1417;--surf2:rgba(255,255,255,.07);--text:#F6EEEC;--soft:#B7A3A6;--line:rgba(255,255,255,.09);
  --acc:#8E4850;--accTxt:#E6A6AD;--accSoft:rgba(230,166,173,.16);--onAccSoft:#F3DDE0;--gold:#DFC99A;
  --sh:0 0 0 .5px rgba(255,255,255,.06);--hero:0 12px 30px rgba(142,72,80,.45);
  --glass:rgba(44,28,33,.6);--glassBd:rgba(255,255,255,.12);--glassSh:0 10px 30px rgba(0,0,0,.45);
  --pay:#F3E6E4;--payTxt:#1A1015;--paySoft:#6E5357;--payBtn:#1A1015;--payBtnTxt:#fff;--unpaidBg:rgba(138,106,47,.14);--unpaidTxt:#5E4412;--payOk:#1E6337;
  --urgBg:rgba(230,110,110,.18);--urgTxt:#F2A9A9;--okBg:rgba(110,200,140,.16);--okTxt:#9FDDB3;--scrim:rgba(0,0,0,.55);--fade0:rgba(18,10,13,0);
  --s0b:rgba(255,255,255,.08);--s0f:#D9CCCE;--s1b:rgba(120,170,230,.16);--s1f:#A9CBF2;--s2b:rgba(230,180,90,.16);--s2f:#F0CD8A;--s3b:rgba(230,110,110,.18);--s3f:#F2A9A9;--s4b:rgba(110,200,140,.16);--s4f:#9FDDB3;--s5b:rgba(230,166,173,.18);--s5f:#EDB9BE;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--B);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
body{min-height:100dvh}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--accTxt);text-decoration:none}
svg{flex-shrink:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button,a,.tap{transition:transform .38s cubic-bezier(.34,1.56,.64,1),background-color .25s,color .25s,box-shadow .25s,opacity .25s}
button:active,a:active,.tap:active{transform:scale(.96)}
button{cursor:pointer;border:0;background:none;padding:0}
button:disabled{cursor:default;opacity:.55}
:focus-visible{outline:2px solid var(--accTxt);outline-offset:2px}
@keyframes rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes sheet{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.rise{animation:rise .5s cubic-bezier(.2,.9,.3,1) both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- shell ---------- */
#app{min-height:100dvh}
.phone{max-width:560px;margin:0 auto;min-height:100dvh;position:relative;padding-bottom:calc(120px + var(--sb))}
.hdr{padding:calc(var(--st) + 22px) 20px 0;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.hdr .sub{font-size:15px;font-weight:500;color:var(--soft)}
.title{margin:0;font-family:var(--D);font-size:34px;font-weight:700;letter-spacing:-1px;line-height:1.1}
.h2{margin:0;font-family:var(--D);font-size:19px;font-weight:700;letter-spacing:-.35px}
.row{display:flex;align-items:center;gap:10px}
.col{display:flex;flex-direction:column}
.grow{flex:1;min-width:0}
.soft{color:var(--soft)}
.small{font-size:13px}.tiny{font-size:12px}
.b{font-weight:700}
.pad{padding:16px}
.stack{display:flex;flex-direction:column;gap:12px}
.sec{padding:0 16px;margin-top:22px;display:flex;flex-direction:column;gap:10px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;padding:0 4px}
.link{color:var(--accTxt);font-weight:700;font-size:14px}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gbtn{width:44px;height:44px;border-radius:22px;display:inline-flex;align-items:center;justify-content:center;background:var(--glass);border:.5px solid var(--glassBd);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:var(--glassSh);color:var(--text)}
.gbtn.pri{background:var(--acc);color:var(--onAcc);border:0;box-shadow:var(--hero)}
.card{background:var(--surf);border-radius:22px;box-shadow:var(--sh)}
.hero{background:var(--acc);color:var(--onAcc);border-radius:22px;box-shadow:var(--hero)}
.paycard{background:var(--pay);color:var(--payTxt);border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 14px 30px rgba(26,16,21,.22)}
.paycard .soft{color:var(--paySoft)}
.big{font-family:var(--D);font-weight:700;letter-spacing:-1.4px;line-height:1}
.pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--s0b);color:var(--s0f)}
.pill[data-s="1"]{background:var(--s1b);color:var(--s1f)}.pill[data-s="2"]{background:var(--s2b);color:var(--s2f)}.pill[data-s="3"]{background:var(--s3b);color:var(--s3f)}.pill[data-s="4"]{background:var(--s4b);color:var(--s4f)}.pill[data-s="5"]{background:var(--s5b);color:var(--s5f)}
.chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:13px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--surf2);color:var(--soft)}
.chip.pay{background:var(--unpaidBg);color:var(--unpaidTxt)}
.chip.urg{background:var(--urgBg);color:var(--urgTxt)}.chip.acc{background:var(--accSoft);color:var(--accTxt)}.chip.ok{background:var(--okBg);color:var(--okTxt)}.chip.gold{background:var(--unpaidBg);color:var(--gold)}
.mono{display:inline-flex;align-items:center;justify-content:center;font-family:var(--D);font-weight:700;letter-spacing:-.4px;flex-shrink:0}
.seg{display:flex;gap:4px;padding:4px;border-radius:22px;background:var(--surf2)}
.seg button{flex:1;height:36px;border-radius:18px;font-size:13px;font-weight:700;color:var(--soft);white-space:nowrap;padding:0 10px}
.seg button.on{background:var(--surf);color:var(--text);box-shadow:var(--sh)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 16px 4px;margin:0 -16px}
.chips::-webkit-scrollbar{display:none}
.fchip{flex-shrink:0;height:36px;padding:0 15px;border-radius:18px;background:var(--surf2);color:var(--text);font-size:14px;font-weight:700}
.fchip.on{background:var(--acc);color:var(--onAcc)}
.btn{height:48px;padding:0 20px;border-radius:24px;font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--acc);color:var(--onAcc);box-shadow:var(--hero);white-space:nowrap}
.btn.soft{background:var(--surf2);color:var(--text);box-shadow:none}
.btn.ghost{background:none;color:var(--soft);box-shadow:none}
.btn.danger{background:#8E2424;color:#fff;box-shadow:none}
.btn.white{background:var(--payBtn);color:var(--payBtnTxt);box-shadow:none}
.btn.sm{height:36px;padding:0 14px;border-radius:18px;font-size:13px}
.btn.full{width:100%}
.btn.ok{background:#1E6337;color:#fff;box-shadow:none}
.search{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:14px;background:var(--surf);box-shadow:var(--sh);color:var(--soft)}
.search input{flex:1;border:0;background:none;outline:none;font-size:16px;color:var(--text);min-width:0}
.empty{padding:28px 16px;text-align:center;color:var(--soft);font-size:14px;line-height:1.5}
.empty .h2{color:var(--text);margin-bottom:4px}

/* tab bar */
.edge{position:fixed;left:0;right:0;bottom:0;height:calc(150px + var(--sb));pointer-events:none;background:linear-gradient(to bottom,var(--fade0),var(--bg) 62%);z-index:20}
.tabbar{position:fixed;left:0;right:0;margin:0 auto;bottom:calc(14px + var(--sb));width:min(528px,calc(100% - 28px));height:64px;padding:0 6px;display:flex;align-items:center;gap:2px;background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:.5px solid var(--glassBd);border-radius:32px;box-shadow:var(--glassSh);z-index:30}
.tabbar a{position:relative;flex:1;height:52px;border-radius:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--soft);font-size:10px;font-weight:600}
.tabbar a.on{color:var(--accTxt);background:var(--surf2);font-weight:700}
.tabbar a:active{transform:scale(.95)}
.badge{position:absolute;top:4px;left:50%;margin-left:6px;min-width:17px;height:17px;border-radius:9px;background:var(--acc);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:18px 16px 0}
.span2{grid-column:span 2}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.day{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--soft)}
.day b{width:32px;height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text)}
.day.today b{background:var(--acc);color:var(--onAcc)}
.day i{width:5px;height:5px;border-radius:3px}
.day.due i{background:var(--goldFill)}
.lrow{display:flex;align-items:center;gap:10px;padding:10px 0;color:var(--text)}
.lrow+.lrow{border-top:.5px solid var(--line)}
.icirc{width:38px;height:38px;border-radius:19px;background:var(--surf2);color:var(--accTxt);display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* collab cards */
.ccard{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:22px;background:var(--surf);box-shadow:var(--sh);color:var(--text);text-align:left;width:100%}
.ring{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;font-weight:700}
.ring svg{position:absolute;inset:0}
.ocard{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:24px;background:var(--surf);box-shadow:var(--sh);color:var(--text);text-align:left;width:100%}

/* sheet */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:50;animation:fadein .25s both}
.sheet{position:fixed;left:0;right:0;margin:0 auto;bottom:0;top:calc(var(--st) + 44px);width:min(560px,100%);background:var(--bg);border-radius:28px 28px 0 0;z-index:51;display:flex;flex-direction:column;animation:sheet .45s cubic-bezier(.2,.9,.3,1) both}
.sheet .grab{width:36px;height:5px;border-radius:3px;background:var(--line);margin:8px auto 0;flex-shrink:0}
.sheet .sh-top{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 0;flex-shrink:0}
.sheet .sh-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px calc(120px + var(--sb))}
.bar{position:absolute;left:14px;right:14px;bottom:calc(14px + var(--sb));display:flex;gap:8px;padding:8px;border-radius:32px;background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:.5px solid var(--glassBd);box-shadow:var(--glassSh);z-index:5}
.bar .btn{height:52px;border-radius:26px;flex:1;min-width:0;padding:0 14px}
.bar .btn.ghost{padding:0 12px}
.bar .btn.ghost{flex:0 0 auto}
@media (min-width:700px){.sheet{top:40px;bottom:40px;border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.3)}.sheet .grab{display:none}}

/* forms */
.form{display:flex;flex-direction:column;gap:14px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld>span{font-size:13px;font-weight:700;color:var(--soft)}
.inp{height:48px;padding:0 14px;border-radius:14px;border:1px solid var(--line);background:var(--surf);font-size:16px;outline:none;width:100%;color:var(--text)}
textarea.inp{height:auto;min-height:90px;padding:12px 14px;line-height:1.45;resize:vertical}
.inp:focus{border-color:var(--accTxt)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.step{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 16px;border-radius:16px;border:1px solid var(--line);background:var(--surf)}
.step.on{border-color:var(--accTxt)}
.step .n{width:20px;text-align:center;font-weight:700;font-size:16px}
.rbtn{width:36px;height:36px;border-radius:18px;background:var(--surf2);display:flex;align-items:center;justify-content:center;color:var(--text)}

/* detail */
.stages{display:flex;gap:8px;overflow-x:auto;padding:4px 16px 10px;margin:0 -16px;scrollbar-width:none}
.stages::-webkit-scrollbar{display:none}
.stg{flex-shrink:0;height:44px;padding:0 16px;border-radius:22px;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;border:1px solid var(--line);background:var(--surf);color:var(--soft);white-space:nowrap}
.stg.done{border-color:transparent;background:var(--surf2);color:var(--text)}
.stg.cur{border-color:transparent;background:var(--acc);color:var(--onAcc);box-shadow:0 0 0 4px var(--accSoft),var(--hero)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:14px;min-height:108px;border-radius:22px;background:var(--surf);box-shadow:var(--sh);text-align:left;color:var(--text)}
.tile .ti{width:36px;height:36px;border-radius:18px;background:var(--accSoft);color:var(--accTxt);display:flex;align-items:center;justify-content:center;transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.tile .ts{font-size:13px;color:var(--soft)}
.tile.on{background:var(--acc);color:var(--onAcc);box-shadow:var(--hero)}
.tile.on .ti{background:rgba(255,255,255,.18);color:#fff;transform:rotateY(360deg)}
.tile.on .ts{color:var(--onAccSoft)}
.vids{display:flex;gap:8px;padding:8px;border-radius:22px;background:var(--surf);box-shadow:var(--sh);flex-wrap:wrap}
.vid{flex:1;min-width:84px;min-height:56px;border-radius:16px;background:var(--surf2);font-size:14px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--text)}
.vid small{font-size:11px;font-weight:600;color:var(--soft)}
.vid.s1{background:var(--accSoft);color:var(--accTxt)}
.vid.s2{background:var(--acc);color:var(--onAcc)}.vid.s2 small{color:var(--onAccSoft)}
.dtile{flex:1;display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:22px;background:var(--surf);box-shadow:var(--sh)}
.term{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;font-size:14px}
.term+.term{border-top:.5px solid var(--line)}
.term b{font-size:15px;text-align:right}
.tl{display:flex;gap:12px}
.tl .d{display:flex;flex-direction:column;align-items:center;width:12px}
.tl .d i{width:12px;height:12px;border-radius:6px;margin-top:4px;border:2px solid var(--accSoft);background:var(--surf)}
.tl .d s{flex:1;width:2px;background:var(--accSoft)}
.tl.last .d i{border-color:var(--acc);background:var(--acc)}
.tl .c{flex:1;display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-bottom:14px;font-size:14px;color:var(--soft)}
.tl.last .c{padding-bottom:0}
.tl b{color:var(--text)}

/* thread */
.sys{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--surf2);font-size:13px;color:var(--soft)}
.sys b{color:var(--text)}
.bub{max-width:82%;display:flex;flex-direction:column;gap:3px}
.bub>div{padding:10px 14px;border-radius:20px 20px 20px 6px;background:var(--surf);box-shadow:var(--sh);font-size:15px;line-height:1.4;white-space:pre-wrap;word-break:break-word}
.bub.me{align-self:flex-end;align-items:flex-end}
.bub.me>div{border-radius:20px 20px 6px 20px;background:var(--acc);color:var(--onAcc);box-shadow:none}
.bub span{font-size:11px;color:var(--soft);padding:0 4px}
.draft{align-self:flex-end;width:min(280px,86%);border-radius:22px;background:var(--surf);box-shadow:var(--sh);overflow:hidden}
.draft.them{align-self:flex-start}
.draft .vid-ph{height:130px;background:#2A1A1E;display:flex;align-items:center;justify-content:center;color:#fff}
.composer{position:fixed;left:0;right:0;margin:0 auto;bottom:calc(14px + var(--sb));width:min(528px,calc(100% - 28px));display:flex;align-items:center;gap:8px;padding:8px;border-radius:32px;background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:.5px solid var(--glassBd);box-shadow:var(--glassSh);z-index:30}
.composer input{flex:1;height:48px;padding:0 16px;border-radius:24px;border:0;background:var(--surf2);outline:none;font-size:16px;min-width:0}

/* login */
.login{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.login .box{width:min(420px,100%);display:flex;flex-direction:column;gap:18px}

/* toast */
.toast{position:fixed;left:0;right:0;margin:0 auto;width:max-content;bottom:calc(96px + var(--sb));z-index:80;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 18px;border-radius:20px;background:var(--pay);color:var(--payTxt);font-size:14px;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.25);animation:rise .35s cubic-bezier(.2,.9,.3,1) both;max-width:calc(100% - 32px)}
.toast button{color:var(--unpaidTxt);font-weight:700;padding:6px 8px}
.offline{position:fixed;top:calc(var(--st) + 6px);left:0;right:0;margin:0 auto;width:max-content;z-index:90;padding:6px 14px;border-radius:14px;background:var(--urgBg);color:var(--urgTxt);font-size:12px;font-weight:700}

/* ---------- brand portal ---------- */
.bshell{display:flex;min-height:100dvh}
.side{width:232px;flex-shrink:0;display:flex;flex-direction:column;gap:24px;padding:24px 14px;border-right:1px solid var(--line);position:sticky;top:0;height:100dvh}
.side nav{display:flex;flex-direction:column;gap:4px}
.side nav a{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;border-radius:14px;font-size:15px;font-weight:600;color:var(--soft)}
.side nav a.on{background:var(--surf);box-shadow:var(--sh);color:var(--text);font-weight:700}
.side nav a.on svg{color:var(--accTxt)}
.bmain{flex:1;min-width:0;padding:32px 36px 60px}
.bhdr{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:22px}
.kpi{padding:16px 18px;border-radius:22px;background:var(--surf);box-shadow:var(--sh);display:flex;flex-direction:column;gap:8px}
.kanban{display:grid;grid-template-columns:repeat(6,minmax(170px,1fr));gap:12px;margin-top:22px;overflow-x:auto;padding-bottom:8px}
.kcol{display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:22px;background:var(--surf2);min-height:240px}
.kcol-h{display:flex;justify-content:space-between;padding:4px 6px;font-size:14px;font-weight:700}
.kcard{display:flex;flex-direction:column;gap:10px;padding:12px 10px;border-radius:18px;background:var(--surf);box-shadow:var(--sh);color:var(--text);text-align:left;width:100%}
.kcard.hot{box-shadow:0 0 0 1.5px var(--acc),var(--sh)}
.deal{display:grid;grid-template-columns:340px minmax(0,1fr) 340px;gap:0;min-height:calc(100dvh - 0px)}
.deal>section{padding:28px 20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.deal>section+section{border-left:1px solid var(--line)}
.compose{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;margin-top:24px}
@media (max-width:1100px){.deal{grid-template-columns:320px minmax(0,1fr)}.deal>section:last-child{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}}
@media (max-width:899px){
  .side{display:none}
  .bhdr>.row{width:100%}
  .bhdr .seg{flex:1 1 100%;overflow-x:auto;scrollbar-width:none}
  .bhdr .seg button{flex:0 0 auto}
  .bhdr .btn{flex:1}
  .bmain{padding:calc(var(--st) + 22px) 16px calc(120px + var(--sb))}
  .kpis{display:flex;overflow-x:auto;scrollbar-width:none;margin:22px -16px 0;padding:0 16px 4px}
  .kpi{flex:0 0 132px}
  .kcol.empty{display:none}
  .kanban{grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:minmax(260px,82%)}
  .kanban{grid-template-columns:repeat(6,minmax(240px,1fr));margin:22px -16px 0;padding:0 16px 8px;scroll-snap-type:x mandatory}
  .kcol{scroll-snap-align:start}
  .deal{display:flex;flex-direction:column}
  .deal>section{padding:0;margin-top:16px}
  .deal>section+section{border:0}
  .compose{grid-template-columns:1fr}
}
@media (min-width:900px){.btabbar{display:none}}

/* print (invoices) */
@media print{
  .tabbar,.edge,.noprint,.composer,.toast,.offline{display:none!important}
  html,body{background:#fff!important;color:#000}
  .phone{padding:0!important;max-width:none}
  .card{box-shadow:none!important;border:1px solid #ddd}
}

/* narrow phones */
.wrap{flex-wrap:wrap}
.dtile{min-width:0}
.ccard .row,.ocard .row{min-width:0}
@media (max-width:380px){
  .title{font-size:30px}
  .hdr{padding-left:16px;padding-right:16px}
  .dates{flex-direction:column}
  .bar .btn{font-size:14px;padding:0 10px}
  .tabbar a{font-size:9.5px}
}
/* links inside running text */
.txt a{text-decoration:underline;text-underline-offset:2px}

.ptr{position:fixed;top:calc(var(--st) + 8px);left:0;right:0;margin:0 auto;width:36px;height:36px;border-radius:18px;background:var(--surf);box-shadow:var(--glassSh);display:flex;align-items:center;justify-content:center;color:var(--accTxt);opacity:0;z-index:95;pointer-events:none;transition:opacity .2s}
.ptr.spin svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dot{width:9px;height:9px;border-radius:5px;background:var(--acc);flex-shrink:0;display:inline-block}
.bars rect,.bars path{transition:opacity .2s}
.bars .bar:hover path,.bars .bar:focus path{opacity:.8}
.bars .bar:focus{outline:none}
.bars .bar:focus-visible path{stroke:var(--text);stroke-width:2}