/* password eye */
.pw{position:relative;display:block}.pw input{padding-right:48px}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;background:none;color:var(--mute);cursor:pointer;display:grid;place-items:center;border-radius:10px}
.eye:hover{color:var(--ink);background:#eef2fb}.eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* workspace shell */
body[data-page]:not([data-page=login]):not([data-page=signup]):not([data-page=confirm]){background:linear-gradient(135deg,#e6edff 0%,#e1f5fb 48%,#f3f6fd 100%) fixed;min-height:100vh}
.side{background:linear-gradient(180deg,#10203a 0%,#1c3d8c 100%);border-right:0;color:#b4c4e2;padding:20px 14px}
.side .brand{color:#fff}.side a.nl{color:#9db0d0;border-radius:10px;padding:10px 12px}
.side a.nl:hover{background:rgba(255,255,255,.08);color:#fff}.side a.nl[aria-current]{background:rgba(255,255,255,.12);color:#fff}
.usr{border-top:1px solid #1d2a47}.usr b{color:#fff}.usr small{color:#7f93b8}
.main{background:none;padding:30px clamp(18px,3.5vw,44px) 56px}
.top{margin-bottom:18px}.top h1{font-size:clamp(1.7rem,2.6vw,2.2rem)}.top .sub{margin:0 0 4px;font-size:.92rem;color:var(--mute)}
/* key numbers */
.kp{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}.kp.four{grid-template-columns:repeat(4,1fr)}
.k{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px;display:grid;gap:2px}
.k b{font:700 1.8rem/1.1 var(--head);letter-spacing:-.03em}.k small{color:var(--mute);font-size:.86rem}.k.warn b{color:var(--warn)}.k.blue b{color:var(--blue)}
.pip{width:9px;height:9px;border-radius:50%;background:#c3cde2;flex:none;display:inline-block}
.pip.needs_reply{background:var(--warn)}.pip.ai_answered{background:var(--ok)}.pip.closed{background:#c3cde2}
/* inbox + reader */
.work{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:14px;align-items:start}
.inbox,.reader,.panel{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:none;padding:0;margin-top:0}
.reader,.panel{padding:20px 24px}.panel h2{font-size:1.05rem;margin:0 0 10px}
.seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:10px;padding:3px}
.seg button{border:0;background:none;border-radius:7px;padding:6px 14px;font:600 .84rem var(--body);color:var(--ink2);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--blue);color:#fff}
.seg em{font-style:normal;background:var(--warn);color:#fff;border-radius:99px;padding:0 6px;margin-left:3px;font-size:.74rem}.seg em:empty{display:none}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
#recent{display:grid}
.trow{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:14px 20px;cursor:pointer;font:inherit;color:inherit}
.trow:last-child{border-bottom:0}.trow:hover{background:#f6f8fd}.trow.sel{background:#eef2ff}
.tmain{display:grid;gap:3px;min-width:0}.trow-h{display:flex;align-items:center;gap:8px}.trow-h b{font-size:.92rem}.trow-h small{margin-left:auto;color:var(--mute);font-size:.78rem}
.tsub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2);font-size:.86rem}
.reader{min-height:420px}.pane-h{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:14px}.pane-h h3{font-size:1.2rem}.pane-h .sub{margin:4px 0 0;color:var(--mute);font-size:.86rem}
.who{font:600 .8rem var(--body);color:var(--mute);margin:16px 0 4px}
.note{border-radius:12px;padding:12px 16px;margin-top:16px;font-size:.9rem;color:var(--ink2)}.note.warn{background:#fff5e0}.note a{text-decoration:underline}
.pane-empty{display:grid;place-items:center;text-align:center;min-height:340px;color:var(--mute);align-content:center;gap:8px}.pane-empty b{color:var(--ink);font:700 1.1rem var(--head)}.pane-empty p{max-width:34ch}
.empty{padding:24px 20px;color:var(--mute)}.empty b{display:block;color:var(--ink)}
/* owner */
.owork{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:14px;align-items:start}.rcol{display:grid;gap:14px}
.svl{padding:20px 0 6px}.svl h2{padding:0 24px}
.srow{display:flex;align-items:center;gap:12px;padding:14px 24px;border-top:1px solid var(--line)}
.stx{flex:1;min-width:0;display:grid;gap:2px}.stx b{font-size:.95rem}.stx small{color:var(--mute);font-size:.84rem}
.sst{display:inline-flex;align-items:center;gap:7px;font:600 .84rem var(--body);color:var(--ink2);white-space:nowrap}.sst i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.sst.warn i{background:var(--warn)}.sst.bad i{background:var(--bad)}.sst.off i{background:#c3cde2}
.sdet{padding:6px 24px 16px;border-top:1px solid var(--line);display:grid;gap:10px}.sdet[hidden]{display:none}
.sub-row{background:#f6f8fd;border-radius:12px;padding:12px 14px;display:grid;gap:6px}.sub-row.vid{grid-template-columns:140px 1fr;align-items:start}.sub-row video{width:140px;border-radius:10px}
.mini{display:flex;justify-content:space-between;gap:10px;padding:8px 0;font-size:.88rem}.mini em{font-style:normal;background:#f1f4fa;border-radius:8px;padding:2px 10px;font-size:.78rem;font-weight:600;color:var(--ink2)}.mini.col{display:grid;gap:1px;color:var(--ink2)}.mini.col b{color:var(--ink)}
@media(max-width:1100px){.work,.owork{grid-template-columns:1fr}.kp.four{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.kp,.kp.four{grid-template-columns:1fr}.sub-row.vid{grid-template-columns:1fr}}
/* nav account icon */
.acct{width:42px;height:42px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;flex:none;box-shadow:0 8px 18px -8px rgba(47,91,255,.7)}
.acct svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.acct:hover{transform:translateY(-1px)}

/* drawer shell */
.app{display:block}
.side{position:fixed;left:0;top:0;bottom:0;width:272px;height:auto;z-index:60;transform:translateX(-102%);transition:transform .22s ease;overflow-y:auto}
.app.open .side{transform:none;box-shadow:0 0 40px rgba(16,32,58,.35)}
.scrim{position:fixed;inset:0;background:rgba(16,32,58,.45);opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}.app.open .scrim{opacity:1;pointer-events:auto}
.main{max-width:1180px;margin:0 auto}
.bar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.ham{width:44px;height:44px;border-radius:12px;border:1px solid rgba(16,32,58,.1);background:rgba(255,255,255,.75);backdrop-filter:blur(6px);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.ham:hover{background:#fff}.ham svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.bt{font:700 1.05rem var(--head);letter-spacing:.01em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nh{margin:16px 12px 4px;font:600 .74rem var(--body);letter-spacing:.06em;text-transform:uppercase;color:#7f95bd}
.side a.nl[aria-current]{background:rgba(255,255,255,.16)}
@media(prefers-reduced-motion:reduce){.side,.scrim{transition:none}}
/* gradient accents */
.k{background:rgba(255,255,255,.82);backdrop-filter:blur(6px);border-color:rgba(16,32,58,.08)}
.k b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.k.warn b{background:none;color:var(--warn)}.k.blue b{background:none;color:var(--blue)}
.inbox,.reader,.panel{background:rgba(255,255,255,.88);border-color:rgba(16,32,58,.08)}
.seg button[aria-pressed=true]{background:var(--grad)}
.lead2{margin:-8px 0 16px;color:var(--ink2)}
.stack{display:grid;gap:12px}
.panel+.panel{margin-top:14px}.kp+.panel{margin-top:0}.kp{margin-bottom:14px}
.attn{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;border-top:1px solid var(--line);background:none;padding:13px 0;font:inherit;color:var(--ink);cursor:pointer;text-align:left}
.attn:first-of-type{border-top:0}.attn i{font-style:normal;font-weight:600;font-size:.84rem;color:var(--blue)}.attn:hover i{text-decoration:underline}
.panel.vid{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:start}.panel.vid video{width:150px;border-radius:10px}
@media(max-width:700px){.panel.vid{grid-template-columns:1fr}.kp,.kp.four{grid-template-columns:1fr 1fr}.main{padding-left:16px;padding-right:16px}}
/* phone: keep the drawer a real drawer (site.css turns .side into a top bar under 900px) */
@media(max-width:900px){
.app{grid-template-columns:1fr}
.side{position:fixed;height:auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;padding:20px 14px;gap:6px;border-bottom:0;width:min(290px,86vw)}
.side .brand{margin-right:0;padding:6px 10px 18px}.side .sp{display:block}.side a.nl span{display:inline}.side a.nl{padding:11px 12px}.usr{display:flex}
.kp>.k:last-child:nth-child(odd){grid-column:1/-1}
}
/* client overview, invoices, single-column auth */
.authwrap{grid-template-columns:minmax(0,460px);justify-content:center}
.invrow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:6px 0}
.invr{display:grid;justify-items:end;gap:4px}.invr small{color:var(--mute)}
.plans2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:14px}
.plans2 .card{padding:18px 20px;display:grid;gap:8px;align-content:start}
.cta-row{display:flex;gap:8px;flex-wrap:wrap}
/* the hidden attribute must win over nav link display rules (Owner view stays out of clients' sight) */
.side a.nl[hidden],.navn[hidden],.side [hidden]{display:none!important}
/* updates feed */
.upd{display:grid;gap:8px;padding:18px 0;border-top:1px solid var(--line)}.upd:first-of-type{border-top:0;padding-top:4px}
.upd h3{font-size:1.08rem;margin:0}.upd .when{color:var(--mute);font-size:.84rem}.upd p{margin:0;color:var(--ink2);line-height:1.6;white-space:pre-wrap}
.upd.fresh h3::after{content:"New";margin-left:10px;font:600 .72rem/1 var(--body,inherit);background:#e8eeff;color:var(--blue);border-radius:99px;padding:3px 9px;vertical-align:middle}
.upd .btn{justify-self:start}