:root{
  --ground:#F3F6FA; --panel:#FFFFFF; --ink:#12213A; --muted:#5B6B84; --line:#DDE4EE;
  --side:#0E2747; --side-ink:#C9D6EA; --side-hi:#FFFFFF; --side-sel:#2F6FDB;
  --accent:#2F6FDB; --accent-soft:#E3ECFB; --sun:#F2B544; --sun-soft:#FDF1D8;
  --ok:#1E9E6A; --warn:#C9831A; --bad:#D2493F;
  --a-claude:#E0864A; --a-mkt:#E5537A; --a-dev:#2F6FDB; --a-qa:#1E9E6A; --a-sec:#7A5AD8; --a-res:#E0A82E; --a-arch:#2AA7B8;
  --shadow:0 1px 2px rgba(18,33,58,.06),0 6px 20px rgba(18,33,58,.06);
  --disp:"Bricolage Grotesque",ui-rounded,system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark; --ground:#0B1422; --panel:#121E31; --ink:#E6EDF7; --muted:#93A3BC; --line:#22324B;
  --side:#07101D; --side-ink:#9FB1CC; --accent:#5B8FF0; --accent-soft:#1A2D4E; --sun-soft:#3A2E14;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
}}
:root[data-theme="dark"]{
  color-scheme:dark; --ground:#0B1422; --panel:#121E31; --ink:#E6EDF7; --muted:#93A3BC; --line:#22324B;
  --side:#07101D; --side-ink:#9FB1CC; --accent:#5B8FF0; --accent-soft:#1A2D4E; --sun-soft:#3A2E14;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.45}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app{display:grid;grid-template-columns:250px minmax(0,1fr) 300px;height:100%;min-height:600px}
/* sidebar */
.side{background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;gap:18px;padding:16px 10px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px}
.brand .logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--sun),var(--a-claude));display:grid;place-items:center;font-family:var(--disp);font-weight:800;color:#0E2747}
.brand b{font-family:var(--disp);font-size:17px;color:var(--side-hi)}
.brand small{display:block;font-size:11px;opacity:.7}
.sec h4{margin:0 0 6px;padding:0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.6;font-weight:600}
.item{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;color:var(--side-ink);padding:6px 8px;border-radius:7px;text-align:left}
.item:hover{background:rgba(255,255,255,.06);color:var(--side-hi)}
.item.sel{background:var(--side-sel);color:#fff}
.item .hash{opacity:.6;width:14px;text-align:center}
.item .badge{margin-left:auto;background:var(--bad);color:#fff;font-size:11px;font-weight:700;border-radius:10px;padding:0 6px}
.item .dot{width:8px;height:8px;border-radius:50%;margin-left:auto;background:#5d6f8a}
.item .dot.on{background:var(--ok)} .item .dot.busy{background:var(--sun)}
.mini{width:20px;height:20px;border-radius:7px;flex:none;position:relative}
.mini::before,.mini::after{content:"";position:absolute;top:7px;width:3px;height:4px;border-radius:2px;background:#0E2747}
.mini::before{left:5px}.mini::after{right:5px}
/* main */
.main{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.top{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--panel)}
.top h2{margin:0;font-family:var(--disp);font-size:18px;font-weight:700}
.top .sub{color:var(--muted);font-size:13px}
.tabs{margin-left:auto;display:flex;gap:4px;background:var(--ground);padding:3px;border-radius:9px}
.tabs button{border:0;background:none;padding:5px 12px;border-radius:7px;color:var(--muted);font-weight:600;font-size:13px}
.tabs button.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
.scroll{flex:1;overflow-y:auto;padding:20px}
.wrap{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
/* hero / clock-in */
.hello{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.hello-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.hello h1{margin:0;font-family:var(--disp);font-weight:800;font-size:28px;letter-spacing:-.01em;text-wrap:balance}
.hello p{margin:0;color:var(--muted);max-width:60ch}
.clock{margin-left:auto;display:flex;align-items:center;gap:12px}
.time{font-family:var(--mono);font-size:22px;font-variant-numeric:tabular-nums}
.punch{border:0;background:var(--accent);color:#fff;font-weight:700;padding:10px 18px;border-radius:10px;transition:transform .15s}
.punch:hover{transform:translateY(-1px)}
.punch.in{background:var(--ok)}
.crew{display:flex;flex-wrap:wrap;gap:10px}
.mate{display:flex;flex-direction:column;align-items:center;gap:6px;width:86px;border:0;background:none;padding:6px 0;border-radius:10px}
.mate:hover{background:var(--ground)}
.mate span{font-size:12px;font-weight:600;text-align:center;line-height:1.2}
.mate em{font-style:normal;font-size:11px;color:var(--muted)}
/* agent face */
.face{--c:var(--accent);width:52px;height:52px;border-radius:18px;background:var(--c);position:relative;box-shadow:inset 0 -5px 0 rgba(0,0,0,.12)}
.face .eye{position:absolute;top:18px;width:7px;height:10px;border-radius:4px;background:#0E2747;animation:blink 5s infinite}
.face .eye.l{left:14px}.face .eye.r{right:14px}
.face .mouth{position:absolute;left:50%;bottom:12px;width:14px;height:6px;margin-left:-7px;border-radius:0 0 8px 8px;background:#0E2747;opacity:.85}
.face.work{animation:bob 1.6s ease-in-out infinite}
.face.sleep .eye{height:3px;top:22px;animation:none}
.face.sleep .mouth{width:8px;margin-left:-4px;height:3px;border-radius:3px}
.face .st{position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;border:3px solid var(--panel);background:#8392a8}
.face.work .st{background:var(--sun)} .face.on .st{background:var(--ok)}
.face.claude{border-radius:50%}
.face.mkt{border-radius:22px 22px 10px 22px}
.face.sec{border-radius:12px}
.face.res{border-radius:26px 26px 14px 14px}
.face.arch{border-radius:50% 50% 16px 16px}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* feed */
.feed h3,.col h3{margin:0 0 4px;font-family:var(--disp);font-size:15px;font-weight:700}
.msg{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line);animation:rise .4s both}
.msg:first-of-type{border-top:0}
.msg .face{width:36px;height:36px;border-radius:12px}
.msg .face .eye{top:12px;width:5px;height:7px}.msg .face .eye.l{left:9px}.msg .face .eye.r{right:9px}
.msg .face .mouth{bottom:8px;width:10px;margin-left:-5px;height:4px}
.msg .face .st{display:none}
.msg .who{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.msg .who b{font-weight:700}
.msg .who time{color:var(--muted);font-size:12px;font-family:var(--mono)}
.msg .body{margin-top:2px}
.tag{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:1px 7px;margin-right:4px}
.tag.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.tag.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.tag.bad{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.tag.new{background:var(--accent-soft);color:var(--accent)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.typing{display:inline-flex;gap:3px;vertical-align:middle;margin-left:4px}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:dots 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes dots{0%,60%,100%{opacity:.25}30%{opacity:1}}
@keyframes rise{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}}
.compose{display:flex;gap:8px;padding:12px 20px;border-top:1px solid var(--line);background:var(--panel)}
.compose input{flex:1;min-width:0;border:1px solid var(--line);background:var(--ground);color:var(--ink);border-radius:10px;padding:10px 12px;font:inherit}
.compose button{border:0;background:var(--accent);color:#fff;border-radius:10px;padding:0 16px;font-weight:700}
/* right column */
.col{background:var(--panel);border-left:1px solid var(--line);padding:18px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:18px}
.dec{display:flex;flex-direction:column;gap:10px}
.d{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.d.urgent{border-color:color-mix(in srgb,var(--sun) 70%,var(--line));background:var(--sun-soft)}
.d p{margin:0;font-size:13px}
.d small{color:var(--muted);font-size:12px}
.d .btns{display:flex;gap:6px;flex-wrap:wrap}
.d .btns button{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:4px 10px;font-size:12px;font-weight:600}
.d .btns button.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.d.done{opacity:.55}
.cal{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.cal li{display:grid;grid-template-columns:62px 1fr;gap:8px;font-size:13px}
.cal time{font-family:var(--mono);color:var(--muted);font-size:12px}
/* office view */
.floor{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.desk{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;position:relative}
.desk .screen{width:100%;height:46px;border-radius:8px;background:var(--ground);border:1px solid var(--line);font-family:var(--mono);font-size:10.5px;color:var(--muted);padding:6px 8px;text-align:left;overflow:hidden;white-space:nowrap}
.desk .screen .cur{display:inline-block;width:6px;height:11px;background:var(--accent);vertical-align:middle;animation:dots 1s infinite}
.desk b{font-size:13px}
.desk small{color:var(--muted);font-size:12px;min-height:2.4em}
/* plan view */
.phase{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.phase .n{font-family:var(--disp);font-weight:800;font-size:20px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.phase h4{margin:2px 0 4px;font-family:var(--disp);font-size:16px}
.phase p{margin:0 0 6px;color:var(--muted);max-width:65ch}
.cost{font-weight:700;font-size:12px}
.note{font-size:12px;color:var(--muted)}
.hide-md{display:block}
@media (max-width:1050px){.app{grid-template-columns:220px minmax(0,1fr);height:auto}.main{overflow:visible}.scroll{overflow:visible}.col{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}}
@media (max-width:720px){
  .app{grid-template-columns:minmax(0,1fr);height:auto}.col{grid-column:auto}
  .side{flex-direction:row;overflow-x:auto;padding:10px 16px;gap:10px}
  .side .sec{display:none}
  .main{overflow:visible}.scroll{overflow:visible;padding:16px}
  .top{flex-wrap:wrap;padding:12px 16px}.tabs{margin-left:0}
  .compose{padding:12px 16px}
  .hello h1{font-size:23px}.clock{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* per-agent colours as classes (strict CSP: no inline style attributes) */
.c-claude{--c:var(--a-claude)}.c-mkt{--c:var(--a-mkt)}.c-dev{--c:var(--a-dev)}.c-qa{--c:var(--a-qa)}
.c-sec{--c:var(--a-sec)}.c-res{--c:var(--a-res)}.c-arch{--c:var(--a-arch)}.c-you{--c:var(--sun)}
.mini{background:var(--c)}
.face.planned{opacity:.55;filter:grayscale(.4)}
.face.idle .eye{height:3px;top:22px;animation:none}
.msg .face.idle .eye{top:15px}
.muted{color:var(--muted)}
.empty{color:var(--muted);font-size:13px;margin:0}
.pr{display:flex;gap:8px;align-items:baseline;font-size:13px;padding:6px 0;border-top:1px solid var(--line)}
.pr:first-child{border-top:0}
.pr a{color:var(--accent);text-decoration:none;font-weight:600}
.pr small{color:var(--muted);font-family:var(--mono);font-size:11px;flex:none}
.compose a{border:0;background:var(--accent);color:#fff;border-radius:10px;padding:10px 16px;font-weight:700;text-decoration:none;white-space:nowrap}
.compose p{margin:0;flex:1;color:var(--muted);align-self:center;font-size:13px}
.logout{border:0;background:none;color:var(--side-ink);font-size:12px;padding:6px 8px;text-align:left;opacity:.7}
.logout:hover{opacity:1}
.login{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.login form{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:12px;width:100%;max-width:340px;box-shadow:var(--shadow)}
.login h1{margin:0;font-family:var(--disp);font-size:24px}
.login input{border:1px solid var(--line);background:var(--ground);color:var(--ink);border-radius:10px;padding:10px 12px;font:inherit}
.login .err{color:var(--bad);font-size:13px;margin:0}
.desk .screen{height:auto;min-height:46px;white-space:normal;overflow-wrap:anywhere}
.thread{display:flex;flex-direction:column;gap:3px;padding:10px 0;border-top:1px solid var(--line)}
.card h3+.thread{border-top:0}
.thread-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.thread-top a{color:var(--ink);text-decoration:none}.thread-top a:hover{color:var(--accent)}
.thread-top time{margin-left:auto;color:var(--muted);font-family:var(--mono);font-size:12px}
.thread-doing{color:var(--ink);font-size:13px}
.thread small{color:var(--muted);font-size:12px}
.tag.work{background:var(--accent-soft);color:var(--accent)}
.d small a{color:var(--accent)}
.card h3{margin:0 0 4px}