/* Auteur client portal. Approved design (client-final, 4 Nov) plus sign-in, reset, messages and skeleton states.
   One external stylesheet so the CSP can stay at style-src 'self'. */

/* ---------- theme tokens: light = Sea glass + Moss, dark = Night desk ---------- */
html{
 --g:#e3ede8;--s1:#f4f8f6;--s2:#d8e6df;--s3:#c6d9d0;
 --ink:#0b1a18;--ink2:#4f6661;--ink3:#7d918b;
 --acc:#0b1a18;--acc-ink:#eef5f3;
 --focal:#9fd0c4;--focal-row:#e4f2ee;--focal-ink:#0b1a18;--focal-ink2:#2e5a51;--focal-ink3:#4e7d74;--focal-s2:#bfe0d8;--ht:#7cbcad;
 --dot:#c6d9d0;--fill:#0b1a18;--scrim:rgba(11,26,24,.36);
 --r:22px;--rr:14px;--rb:999px;--fs:14px;--pad:18px;--gap:12px;--navw:232px;--toph:56px;--bh:38px;
 --ease:cubic-bezier(.2,.7,.2,1);
 color-scheme:light;
}
html[data-theme=dark]{
 --g:#040b0b;--s1:#0f1b1a;--s2:#182927;--s3:#213633;
 --ink:#eef5f3;--ink2:#9fb3ae;--ink3:#6f8580;
 --acc:#9fd0c4;--acc-ink:#040b0b;
 --focal:#152422;--focal-row:#213633;--focal-ink:#eef5f3;--focal-ink2:#9fb3ae;--focal-ink3:#6f8580;--focal-s2:#2a403d;--ht:#2a403d;
 --dot:#213633;--fill:#9fd0c4;--scrim:rgba(0,0,0,.55);
 color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--g);color:var(--ink)}
body{font:var(--fs)/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
input{font:inherit;color:inherit;border:0;outline:0;background:var(--s2);border-radius:var(--rb);padding:0 14px;height:42px;width:100%}
input::placeholder{color:var(--ink3)}
input:disabled{opacity:.6}
*:focus{outline:none}
input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
svg{display:block}
b,strong{font-weight:600}
.n{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* ---------- motion (click driven only) ---------- */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes draw{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
.view>*{animation:rise .26s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms)}
.scr.on>*{animation:rise .24s var(--ease) both;animation-delay:calc(var(--i,0) * 30ms)}
html[data-quiet] .view>*,html[data-quiet] .scr.on>*,html[data-quiet] .authbox{animation:none!important}
.b{transition:transform .12s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.b:active{transform:scale(.96)}
.b.done,.idx.ok,.ico.ok{animation:pop .22s var(--ease) both}
.nav a,.tabbar button,.prow,.crow,.lrow,.tsw button{transition:background .2s var(--ease),color .2s var(--ease)}
.pf{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--acc-ink);opacity:.28;transition:width .4s var(--ease)}
.b.go .pf{width:100%}
.b.go{pointer-events:none}
.b.wait{pointer-events:none;opacity:.7}
.chk{stroke-dasharray:30}
.chk.draw{animation:draw .4s var(--ease) both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- screens: loading, auth, app ---------- */
html:not([data-screen=app]) .d,html:not([data-screen=app]) .pm,html:not([data-screen=app]) .pk,html:not([data-screen=app]) .pv{display:none!important}
.auth{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:16px;background:var(--g);overflow:auto}
html[data-screen=auth] .auth{display:flex}
.authbox{width:min(400px,100%);background:var(--s1);border-radius:var(--r);padding:26px 24px 20px;display:flex;flex-direction:column;gap:14px;animation:rise .26s var(--ease) both;position:relative;overflow:hidden}
.authbox .brand{padding:0 0 4px}
.authbox h1{font-size:26px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.authbox .lead{color:var(--ink2);font-size:15px;margin-top:-8px}
.authbox form{display:flex;flex-direction:column;gap:12px}
.authbox .field input{background:var(--s2)}
.authbox .b.big{margin-top:2px}
.authbox .msg{background:var(--s2);border-radius:var(--rr);padding:10px 14px;font-size:var(--fs);color:var(--ink);line-height:1.35}
.authbox .msg.ok{background:var(--focal);color:var(--focal-ink)}
.authbox .hint{color:var(--ink2);font-size:13px;padding:0 4px}
.authbox .row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-top:4px}
.authbox .tsw{align-self:center}
.authbox .who{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--rr);background:var(--s2)}
.authbox .who i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--acc);color:var(--acc-ink);font-style:normal;font-size:13px;font-weight:700;flex:none}
.authbox .who b{display:block;font-size:15px}
.authbox .who span{display:block;color:var(--ink2);font-size:13px}
.authbox .who .b{margin-left:auto}

/* ---------- desktop shell ---------- */
.d{position:fixed;inset:0;display:grid;grid-template-columns:var(--navw) minmax(0,1fr);grid-template-rows:var(--toph) minmax(0,1fr);gap:var(--gap);padding:var(--gap)}
.nav{grid-row:1/3;display:flex;flex-direction:column;gap:4px;padding:var(--pad) 12px;min-height:0;min-width:0}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 22px;color:var(--ink)}
.brand svg{width:28px;height:15px;flex:none}
.brand b{font-weight:700;font-size:16px;display:block;line-height:1.2}
.brand small{display:block;font-weight:500;color:var(--ink2);font-size:var(--fs)}
.nav a{display:flex;align-items:center;gap:12px;height:42px;padding:0 14px;border-radius:999px;color:var(--ink2);font-weight:500;cursor:pointer;font-size:15px;user-select:none}
.nav a:hover{background:var(--s2);color:var(--ink)}
.nav a svg{flex:none}
.nav a.on{background:var(--acc);color:var(--acc-ink);font-weight:600}
.nav a.on:hover{background:var(--acc);color:var(--acc-ink)}
.navfoot{margin-top:auto;padding:12px 10px 0;color:var(--ink2);font-size:var(--fs);display:flex;flex-direction:column;gap:12px;min-width:0}
.navfoot b{color:var(--ink);font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navfoot span{display:block}
.navfoot .b.ghost{padding:0 10px;height:34px;align-self:flex-start;color:var(--ink2)}
.navfoot .b.ghost:hover{background:var(--s2);color:var(--ink)}
.top{display:flex;align-items:center;gap:14px;padding:0 var(--pad);min-width:0}
.top h1{font-size:22px;font-weight:700;white-space:nowrap;letter-spacing:-.01em}
.top .org{color:var(--ink2);font-size:var(--fs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .meta{margin-left:auto;color:var(--ink2);font-size:var(--fs);white-space:nowrap}
.acct{display:flex;align-items:center;gap:10px;font-weight:600;font-size:var(--fs);white-space:nowrap}
.acct i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--acc);color:var(--acc-ink);font-style:normal;font-size:13px;font-weight:700}
.main{min-height:0;min-width:0}

/* unread badge */
.bdg{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--acc);color:var(--acc-ink);font-size:12px;font-weight:700;display:grid;place-items:center;line-height:1}
.nav a.on .bdg{background:var(--acc-ink);color:var(--acc)}
.tabbar button{position:relative}
.tabbar .dot{position:absolute;top:8px;left:calc(50% + 7px);width:10px;height:10px;border-radius:50%;background:var(--acc)}

/* theme switch */
.tsw{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--s2);flex:none;align-self:flex-start}
.tsw button{height:28px;padding:0 11px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tsw button.on{background:var(--acc);color:var(--acc-ink)}

/* ---------- views ---------- */
.view{height:100%;min-height:0;display:grid;gap:var(--gap)}
.view.fit{align-items:start}
.view.fit .pn{max-height:100%}
.view.fit .pn-b.even{justify-content:flex-start}
.home{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) minmax(0,.55fr);grid-template-areas:"hero hero" "needs comp" "bot bot"}
.home .needs .task{flex:1}
.home .bot{grid-area:bot;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.7fr);gap:var(--gap);min-width:0}
.ga-needs{grid-area:needs}.ga-comp{grid-area:comp}.ga-a{grid-area:a}.ga-b{grid-area:b}
.tasksv{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.compv{grid-template-columns:minmax(0,1fr)}
.filesv{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.payv{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"hero hero" "a b"}
.upv{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.helpv{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.msgv{grid-template-columns:minmax(0,1fr)}
.msgv.fit .pn{height:100%}

.pn{background:var(--s1);border-radius:var(--r);padding:var(--pad);display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0;overflow:hidden;position:relative;--row:var(--s2);--row2:var(--s3)}
.pn-h{display:flex;align-items:flex-start;gap:12px;flex:none;position:relative}
.pn-h h2{font-size:17px;font-weight:700;line-height:1.3}
.pn-h p{color:var(--ink2);font-size:var(--fs);margin-top:1px}
.pn-h .sp{margin-left:auto}
.pn-b{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;position:relative}
.pn-b.even{justify-content:space-between}
.pn-b.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start}

/* focal panel: sea glass (light), lifted night (dark) */
.needs{background:var(--focal);color:var(--focal-ink);--ink:var(--focal-ink);--ink2:var(--focal-ink2);--ink3:var(--focal-ink3);--row:var(--focal-row);--row2:var(--focal-s2);--s2:var(--focal-s2)}
.needs .pn-h h2{font-size:24px;letter-spacing:-.01em}
.needs .pn-h p{font-size:15px}
.ht{position:absolute;right:0;top:0;pointer-events:none;color:var(--ht)}
.needs .task{background:var(--row)}

/* hero: bare numerals (Moss) over the dot track */
.hero{grid-area:hero;display:flex;flex-direction:column;gap:14px;padding:4px 6px 2px;min-width:0}
.nums4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.payv .nums4{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi{display:flex;flex-direction:column;gap:2px;min-width:0;padding:0 var(--pad) 0 0}
.kpi .l{font-size:var(--fs);color:var(--ink2);font-weight:500;order:2}
.kpi .n{font-size:42px;font-weight:700;letter-spacing:-.025em;line-height:1.2;white-space:nowrap}
.kpi .n small{font-size:15px;font-weight:600;color:var(--ink2);letter-spacing:0;margin-left:6px}
.kpi .n.tx{font-size:30px;line-height:1.68;overflow:hidden;text-overflow:ellipsis}

/* dot track */
.track{display:flex;min-width:0}
.track .st{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.track .dr{display:flex;align-items:center;height:18px}
.track .nd{width:18px;height:18px;border-radius:50%;background:var(--dot);flex:none;position:relative;transition:background .3s var(--ease)}
.track .nd::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--g);opacity:0;transition:opacity .3s var(--ease)}
.pn .track .nd::after{background:var(--s1)}
.track .tr{flex:1;display:flex;justify-content:space-evenly;align-items:center;min-width:0}
.track .tr i{width:5px;height:5px;border-radius:50%;background:var(--dot);transition:background .3s var(--ease)}
.track .tr i:nth-child(2){transition-delay:40ms}.track .tr i:nth-child(3){transition-delay:80ms}.track .tr i:nth-child(4){transition-delay:120ms}.track .tr i:nth-child(5){transition-delay:160ms}.track .tr i:nth-child(6){transition-delay:200ms}
.track .st.done .nd,.track .st.now .nd{background:var(--fill)}
.track .st.now .nd::after{opacity:1}
.track .st.done .tr i{background:var(--fill)}
.track .lb{font-size:13px;color:var(--ink3);white-space:nowrap;font-weight:500;overflow:hidden;text-overflow:ellipsis}
.track .st.done .lb{color:var(--ink2)}
.track .st.now .lb{color:var(--ink);font-weight:700}
.track.compact .st{gap:0}
.track.compact .nd{width:14px;height:14px}
.track.compact .nd::after{inset:4px}
.track.compact .tr i{width:4px;height:4px}

/* ---------- buttons ---------- */
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--bh);padding:0 16px;border-radius:var(--rb);font-size:var(--fs);font-weight:600;background:var(--s2);color:var(--ink);white-space:nowrap;flex:none;line-height:1.2;position:relative;overflow:hidden}
.b>*{position:relative}
.b:hover{background:var(--s3)}
.b.p{background:var(--acc);color:var(--acc-ink)}
.b.p:hover{background:var(--acc)}
.b.done,.b.done:hover{background:transparent;color:var(--ink2);cursor:default;padding:0 6px}
.b.done svg{color:var(--ink)}
html[data-theme=dark] .b.done svg{color:var(--acc)}
.b.sm{height:32px;padding:0 12px}
.b.ic{width:36px;height:36px;padding:0}
.b.ic.sm{width:32px;height:32px}
.b.big{height:50px;font-size:17px;width:100%}
.b.ghost{background:transparent}
.b.ghost:hover{background:var(--s2)}

/* ---------- rows ---------- */
.task{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;border-radius:var(--rr);background:var(--row);position:relative}
.task .idx{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--row2);font-size:var(--fs);color:var(--ink)}
.task .tx{min-width:0}
.task .tx b{display:block;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task .tx span{display:block;color:var(--ink2);font-size:var(--fs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task.ok .idx{background:var(--acc);color:var(--acc-ink)}
.task.ok .tx b{color:var(--ink2)}
.task .own{font-size:var(--fs);color:var(--ink2);font-weight:500;white-space:nowrap}
.task .own.you{color:var(--ink);font-weight:600}
.crow{display:grid;grid-template-columns:28px minmax(0,1.25fr) minmax(0,1fr) 20px;gap:12px;align-items:center;padding:9px 12px;border-radius:var(--rr);background:var(--row);cursor:pointer;width:100%;color:inherit;min-width:0}
.crow:hover{background:var(--row2)}
.crow .rk{font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
.crow .cn{min-width:0}
.crow b{font-weight:600;font-size:var(--fs);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow span{color:var(--ink2);font-size:var(--fs);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .chev{color:var(--ink3);justify-self:end}
.crow.full{grid-template-columns:28px minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.6fr) 20px}
.chips{display:flex;gap:6px;min-width:0;flex-wrap:wrap}
.crow .chips{flex-wrap:nowrap;overflow:hidden}
.chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--row2);font-size:13px;color:var(--ink);font-weight:500;white-space:nowrap;flex:none}
.thead{display:grid;grid-template-columns:28px minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.6fr) 20px;gap:12px;padding:0 12px;color:var(--ink2);font-size:13px;font-weight:600;flex:none}
.lrow{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--rr);background:var(--row);min-height:54px;min-width:0;width:100%;color:inherit;text-align:left}
.lrow .ico{width:36px;height:36px;border-radius:10px;background:var(--row2);display:grid;place-items:center;flex:none;color:var(--ink)}
.lrow .ico.ok{background:var(--acc);color:var(--acc-ink)}
.lrow .ft{width:40px;height:30px;border-radius:8px;background:var(--row2);display:grid;place-items:center;flex:none;font-size:13px;font-weight:700;letter-spacing:.02em}
.lrow .tx{flex:1;min-width:0}
.lrow .tx b{display:block;font-weight:600;font-size:var(--fs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .tx span{display:block;color:var(--ink2);font-size:var(--fs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .v{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.lrow .chev{color:var(--ink3);flex:none}
.lrow.btn{cursor:pointer}
.lrow.btn:hover{background:var(--row2)}
.kv{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:var(--rr);background:var(--row);min-height:46px;min-width:0}
.kv span{color:var(--ink2);white-space:nowrap}
.kv b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ucard{background:var(--row);border-radius:var(--rr);padding:16px;display:flex;flex-direction:column;gap:10px;min-height:0;flex:1}
.ucard .pr{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
.ucard .pr small{font-size:14px;color:var(--ink2);font-weight:600;letter-spacing:0;margin-left:6px}
.ucard .kvs{display:flex;flex-direction:column;gap:6px}
.ucard .kvs .kv{background:var(--row2);min-height:42px;padding:8px 12px}
.ucard .acts{margin-top:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.step{display:inline-flex;align-items:center;gap:8px}
.step button{width:36px;height:36px;border-radius:999px;background:var(--row);display:grid;place-items:center}
.step button:hover{background:var(--s3)}
.step b{min-width:32px;text-align:center;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.hint{color:var(--ink2);font-size:var(--fs)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:var(--fs);color:var(--ink2);font-weight:500}
.opt{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--rr);background:var(--row);min-height:50px;width:100%;color:inherit;text-align:left}
.opt .rd{width:22px;height:22px;border-radius:50%;background:var(--row2);flex:none;position:relative}
.opt.on .rd{background:var(--acc)}
.opt.on .rd::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--acc-ink)}
.opt b{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt span{color:var(--ink2);white-space:nowrap}
.chips.pick .chip{height:32px;padding:0 14px;cursor:pointer;font-weight:600;background:var(--row)}
.chips.pick .chip.on{background:var(--acc);color:var(--acc-ink)}
.err{color:var(--ink);background:var(--row);border-radius:var(--rr);padding:8px 12px;font-size:13px;font-weight:500}
.empty{color:var(--ink2);text-align:center;padding:18px 10px;font-size:15px;margin:auto 0}

/* file preview (flat page) */
.page{background:var(--row);border-radius:var(--rr);padding:16px;display:flex;flex-direction:column;gap:9px;flex:none}
.page .ln{height:9px;border-radius:5px;background:var(--row2)}
.page .ln.t{height:14px;width:55%;background:var(--ink);opacity:.85}
.page .ln.w1{width:92%}.page .ln.w2{width:76%}.page .ln.w3{width:84%}.page .ln.w4{width:60%}
.page .tbl{display:grid;grid-template-columns:28px 1fr 1fr;gap:6px;margin-top:4px}
.page .tbl i{height:16px;border-radius:5px;background:var(--row2);display:block}
.page .tbl i.h{background:var(--ink);opacity:.7}
.page .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.page .grid i{height:14px;border-radius:4px;background:var(--row2);display:block}
.page .grid i.h{background:var(--ink);opacity:.7}

/* ---------- messages ---------- */
.thread{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:8px;padding:2px 2px 6px;scroll-behavior:smooth}
.bub{max-width:76%;padding:10px 14px;border-radius:18px;background:var(--row);font-size:15px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;flex:none}
.bub.me{align-self:flex-end;background:var(--acc);color:var(--acc-ink);border-bottom-right-radius:6px}
.bub.desk{align-self:flex-start;border-bottom-left-radius:6px}
.bub.pending{opacity:.6}
.bub .when{display:block;font-size:12px;opacity:.72;margin-top:4px;font-weight:500}
.bub.me .when{text-align:right}
.day{align-self:center;font-size:12px;font-weight:600;color:var(--ink3);padding:4px 0;flex:none}
.composer{display:flex;gap:8px;flex:none;align-items:center}
.composer input{flex:1;min-width:0}
.composer .b.ic{width:42px;height:42px;flex:none}

/* ---------- skeleton (loading, design fills, no motion) ---------- */
.sk{background:var(--row,var(--s2));border-radius:8px;display:block}
.sk.t{height:14px;width:60%}.sk.s{height:10px;width:40%;margin-top:6px}
.sk.num{height:44px;width:120px;border-radius:12px;margin-bottom:6px}
.sk.lab{height:12px;width:80px}
.sk.row{height:60px;border-radius:var(--rr);width:100%}
.sk.row.sm{height:48px}
.sk.circ{width:36px;height:36px;border-radius:50%}
.sk.ln{height:12px;width:70%}
.skl .pn-h h2{display:inline-block;height:18px;width:120px;background:var(--row);border-radius:7px;color:transparent}
.skl .pn-h p{display:inline-block;height:12px;width:90px;background:var(--row);border-radius:6px;color:transparent;margin-top:6px}
.skl .track .st .lb{height:12px;width:60%;background:var(--dot);border-radius:6px;color:transparent}
.sktitle{height:34px;width:60%;border-radius:10px;background:var(--s1)}
.sksub{height:14px;width:45%;border-radius:7px;background:var(--s1);margin-top:-2px}

/* ---------- sheets ---------- */
.shl{position:fixed;inset:0;z-index:50;display:none}
.shl.show{display:block}
.scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity .25s var(--ease)}
.shl.on .scrim{opacity:1}
.sh{position:absolute;top:var(--gap);right:var(--gap);bottom:var(--gap);width:min(440px,calc(100% - var(--gap) * 2));background:var(--s1);border-radius:var(--r);padding:var(--pad);display:flex;flex-direction:column;gap:14px;overflow:hidden;transform:translateX(calc(100% + var(--gap)));transition:transform .3s var(--ease);--row:var(--s2);--row2:var(--s3)}
.shl.on .sh{transform:none}
.sh-h{display:flex;align-items:flex-start;gap:12px;flex:none}
.sh-h>div{min-width:0}
.sh-h h3{font-size:22px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-h p{color:var(--ink2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-h .b{margin-left:auto}
.sh .acts{display:flex;gap:10px;justify-content:flex-end;margin-top:auto;flex-wrap:wrap;flex:none}
.sh .acts .b.big{width:auto;flex:1}
.sh .grp{display:flex;flex-direction:column;gap:6px;flex:none}
.sh .grp.scroll{flex:0 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sh .big{height:48px;font-size:16px}
.sec{font-size:13px;font-weight:600;color:var(--ink2);padding:2px 4px 0;flex:none}
.sec.pt{padding-top:8px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);z-index:70;background:var(--ink);color:var(--g);padding:0 18px;height:44px;display:flex;align-items:center;gap:10px;border-radius:999px;font-weight:600;font-size:15px;opacity:0;pointer-events:none;transition:opacity .24s var(--ease),transform .24s var(--ease);white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- phone preview toggle (desktop review aid, shown with ?pk=1) ---------- */
.pk{position:fixed;right:14px;bottom:12px;z-index:45;display:flex;padding:3px;border-radius:999px;background:var(--ink);color:var(--g);font-size:13px}
.pk:empty{display:none}
.pk button{height:30px;padding:0 12px;border-radius:999px;color:inherit;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pk button.on{background:var(--g);color:var(--ink)}
.pv{position:fixed;right:14px;bottom:52px;z-index:44;display:none;width:410px;height:864px;padding:10px;border-radius:44px;background:var(--ink);transform-origin:bottom right}
.pv.on{display:block;animation:pop .3s var(--ease)}
.pv iframe{width:390px;height:844px;border:0;border-radius:34px;display:block;background:var(--g)}
html[data-embed] .pk,html[data-embed] .pv,html[data-noui] .pk,html[data-noui] .pv{display:none!important}

/* ---------- compact desktop heights ---------- */
@media (max-height:840px){
 html{--pad:16px;--gap:10px;--toph:52px}
 .kpi .n{font-size:36px}
 .hero{gap:10px;padding-top:2px}
 .needs .pn-h h2{font-size:21px}
 .task{padding:9px 14px}
 .pn-b{gap:6px}
 .lrow{min-height:48px;padding:7px 12px}
 .crow{padding:6px 12px}
 .brand{padding-bottom:14px}
 .nav a{height:40px}
}

/* ---------- phone (native app) ---------- */
.pm{position:fixed;inset:0;display:none;flex-direction:column;background:var(--g)}
@media (max-width:699px){
 html{--fs:15px;--r:20px;--rr:14px}
 .d{display:none}
 .pm{display:flex}
 .shl .sh{top:auto;left:0;right:0;bottom:0;width:100%;max-height:90%;border-radius:var(--r) var(--r) 0 0;padding:16px 16px calc(28px + env(safe-area-inset-bottom));transform:translateY(100%)}
 .sh-h h3{font-size:24px}
 .sh .acts{flex-direction:column}
 .sh .acts .b{height:50px;font-size:17px;width:100%;flex:0 0 auto}
 .sh .acts .b.big{flex:0 0 auto;width:100%}
 .sh>*{flex-shrink:0}
 .sh .grp.scroll{flex-shrink:1}
 .sh .b.big{height:50px;font-size:17px}
 .sec{font-size:15px}
 .chip{font-size:15px;height:30px}
 .toast{bottom:92px;transform:translate(-50%,12px)}
 .toast.on{transform:translate(-50%,0)}
 .pv,.pk{display:none!important}
 input{height:50px;font-size:17px}
 .tsw button{height:34px;font-size:15px;padding:0 13px}
 .opt b,.opt span,.kv span,.kv b{white-space:normal}
 .auth{align-items:stretch;padding:0}
 .authbox{width:100%;border-radius:0;background:var(--g);padding:calc(18px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));gap:16px;justify-content:center}
 .authbox h1{font-size:34px;letter-spacing:-.015em}
 .authbox .field input{background:var(--s1)}
 .authbox .msg,.authbox .who{background:var(--s1)}
 .authbox .brand{padding-bottom:10px}
 .bub{max-width:84%}
 .composer .b.ic{width:50px;height:50px}
}
.scrs{flex:1;min-height:0;position:relative}
.scr{position:absolute;inset:0;display:none;flex-direction:column;padding:10px 16px 10px;gap:10px;overflow:hidden}
.scr.on{display:flex}
.ptop{display:flex;align-items:center;gap:8px;height:34px;font-weight:600;font-size:15px;color:var(--ink2);flex:none}
.ptop svg{width:22px;height:12px;color:var(--ink)}
.ptop .bk{display:inline-flex;align-items:center;gap:2px;height:34px;padding:0 8px 0 0;border-radius:12px;color:var(--ink);font-size:17px;font-weight:500}
.ptop .bk svg{width:22px;height:22px}
.ptop .tt{margin-left:auto;width:34px;height:34px;border-radius:50%;background:var(--s1);display:grid;place-items:center;color:var(--ink)}
.ptop .tt svg{width:18px;height:18px}
.lt{font-size:34px;font-weight:700;letter-spacing:-.015em;line-height:1.15;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub{color:var(--ink2);font-size:15px;flex:none;margin-top:-4px}
.card{background:var(--s1);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:6px;flex:none;position:relative;overflow:hidden}
.card.pri{background:var(--focal);color:var(--focal-ink);--ink:var(--focal-ink);--ink2:var(--focal-ink2);--ink3:var(--focal-ink3);--s2:var(--focal-s2);--row:var(--focal-row);--row2:var(--focal-s2)}
.card .ey{font-size:15px;color:var(--ink2);font-weight:600}
.card .t{font-size:22px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .h{font-size:15px;color:var(--ink2)}
.card .b.big{margin-top:8px}
.card .track{margin:2px 0 8px}
.card .stepline{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.card .stepline b{font-size:22px;font-weight:700}
.card .stepline span{font-size:15px;color:var(--ink2)}
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex:none;padding:2px 4px}
.nums div{display:flex;flex-direction:column;min-width:0}
.nums b{font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.25}
.nums span{font-size:15px;color:var(--ink2)}
.grp{display:flex;flex-direction:column;gap:6px;flex:none}
.grp.fill{flex:1;min-height:0;overflow:hidden}
.grp.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.prow{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border-radius:var(--rr);background:var(--s1);text-align:left;width:100%;color:inherit;min-width:0;flex:none}
.prow:active{background:var(--s2)}
.prow .ico{width:36px;height:36px;border-radius:10px;background:var(--s2);display:grid;place-items:center;flex:none;color:var(--ink);font-weight:700;font-size:15px}
.prow .ico.ok{background:var(--acc);color:var(--acc-ink)}
.prow .ft{width:42px;height:30px;border-radius:8px;background:var(--s2);display:grid;place-items:center;flex:none;font-size:13px;font-weight:700;letter-spacing:.02em}
.prow .tx{flex:1;min-width:0}
.prow .tx b{display:block;font-size:17px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .tx span{display:block;font-size:15px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .chev{color:var(--ink3);flex:none}
.prow .v{font-size:15px;font-weight:600;flex:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.prow .tsw{margin-left:auto}
.pbtn{margin-top:auto;flex:none;padding-top:4px}
.tabbar{height:78px;display:flex;background:var(--s1);padding:8px 8px 18px;flex:none}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:13px;color:var(--ink3);border-radius:12px;font-weight:500;min-height:44px}
.tabbar button.on{color:var(--ink);font-weight:600}
html[data-theme=dark] .tabbar button.on svg{color:var(--acc)}
.pm .ft{font-size:15px}
.pm .thread{background:var(--s1);border-radius:var(--r);padding:12px}
.pm .composer{padding-bottom:4px}
.pn .track.compact{margin:2px 0 0}
.stepline{display:flex;align-items:baseline;gap:8px;white-space:nowrap;flex:none}
.stepline b{font-size:17px;font-weight:700}
.stepline span{font-size:var(--fs);color:var(--ink2)}