:root{
  --green:#15803D; --green-deep:#0E5530; --green-bright:#1FA15B;
  --green-tint:#E9F4ED; --green-tint-2:#F1F8F3;
  --blue:#2563A8; --blue-tint:#E8EFF8;
  --amber:#A66514; --amber-tint:#FBF0DC;
  --red:#B4342B; --red-tint:#FBE9E7;
  --violet:#6D4AAE; --violet-tint:#EFEAF7;
  --ink:#16201A; --muted:#5C6862; --faint:#8C958F;
  --bg:#F4F5F4; --surface:#FFFFFF; --surface-2:#FAFBFA;
  --line:#E5E8E6; --line-soft:#EEF0EE;
  --r-lg:14px; --r:10px; --r-sm:7px;
  --sh-sm:0 1px 2px rgba(22,32,26,.04),0 1px 3px rgba(22,32,26,.05);
  --sh-md:0 4px 14px rgba(22,32,26,.07),0 1px 3px rgba(22,32,26,.05);
  --sh-lg:0 16px 44px rgba(22,32,26,.16);
  --sidebar-w:248px; --sidebar-w-collapsed:64px; --topbar-h:58px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Manrope',sans-serif;background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}
.mono{font-family:'JetBrains Mono',monospace}
button{font-family:inherit;cursor:pointer}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#D4D9D5;border-radius:9px;border:2px solid var(--bg)}

/* ---------- APP SHELL ---------- */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;
  grid-template-rows:var(--topbar-h) 1fr;height:100vh;transition:grid-template-columns .22s ease}
.app.collapsed{grid-template-columns:var(--sidebar-w-collapsed) 1fr}
.sidebar{grid-row:1 / span 2;background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden}
.side-brand{height:var(--topbar-h);display:flex;align-items:center;gap:10px;
  padding:0 16px;border-bottom:1px solid var(--line-soft);flex-shrink:0}
.brand-mark{width:30px;height:30px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(140deg,var(--green-bright),var(--green-deep));display:grid;place-items:center}
.brand-mark svg{width:16px;height:16px}
.brand-name{font-weight:800;font-size:15px;letter-spacing:-.02em;white-space:nowrap}
.collapsed .brand-name,.collapsed .side-label,.collapsed .nav-text,
.collapsed .ws-text,.collapsed .nav-badge,.collapsed .ws-chev{display:none}
.collapsed .side-brand{padding:0;justify-content:center}
.ws-switch{margin:12px 12px 6px;padding:9px 10px;border:1px solid var(--line);
  border-radius:var(--r);display:flex;align-items:center;gap:9px;cursor:pointer;
  background:var(--surface-2);transition:border-color .14s}
.ws-switch:hover{border-color:#D3D9D5}
.collapsed .ws-switch{padding:9px;justify-content:center;margin:12px 8px 6px}
.ws-ico{width:26px;height:26px;border-radius:7px;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:12px;flex-shrink:0}
.ws-text{flex:1;min-width:0}
.ws-text .wn{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-text .wr{font-size:10px;color:var(--faint);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.ws-chev{color:var(--faint)}.ws-chev svg{width:14px;height:14px}
.side-nav{flex:1;overflow-y:auto;padding:8px 12px}
.collapsed .side-nav{padding:8px}
.side-label{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);padding:14px 10px 6px}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r);
  color:var(--muted);font-weight:600;font-size:13.5px;cursor:pointer;margin-bottom:2px;
  transition:background .12s,color .12s;position:relative;white-space:nowrap}
.collapsed .nav-item{justify-content:center;padding:10px}
.nav-item svg{width:18px;height:18px;flex-shrink:0}
.nav-item:hover{background:var(--green-tint-2);color:var(--ink)}
.nav-item.active{background:var(--green-tint);color:var(--green)}
.nav-item.active::before{content:'';position:absolute;left:-12px;top:7px;bottom:7px;
  width:3px;background:var(--green);border-radius:0 3px 3px 0}
.collapsed .nav-item.active::before{left:-8px}
.nav-badge{margin-left:auto;font-size:10.5px;font-weight:700;background:var(--green);color:#fff;
  border-radius:999px;min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center}
.nav-badge.soft{background:var(--line-soft);color:var(--muted)}
.nav-badge.amber{background:var(--amber)}
.side-foot{border-top:1px solid var(--line-soft);padding:10px 12px}
.collapsed .side-foot{padding:10px 8px}

.topbar{background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 22px}
.collapse-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);
  background:var(--surface);display:grid;place-items:center;color:var(--muted)}
.collapse-btn:hover{background:var(--bg)}.collapse-btn svg{width:15px;height:15px}
.search{margin-left:8px;flex:1;max-width:380px;position:relative}
.search input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--line);
  border-radius:9px;font-family:inherit;font-size:13px;background:var(--surface-2);
  color:var(--ink);outline:none;transition:border-color .14s,background .14s}
.search input:focus{border-color:var(--green-bright);background:var(--surface)}
.search input::placeholder{color:var(--faint)}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--faint)}
.search kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%);
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--faint);
  background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface);display:grid;place-items:center;color:var(--muted);position:relative}
.icon-btn:hover{background:var(--green-tint-2);color:var(--green)}
.icon-btn svg{width:17px;height:17px}
.icon-btn .ping{position:absolute;top:7px;right:8px;width:7px;height:7px;
  border-radius:50%;background:var(--red);border:1.5px solid var(--surface)}
.avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(140deg,#3D7A5A,#16201A);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:11px;cursor:pointer}

.main{overflow-y:auto;padding:22px 28px 60px}

/* ---------- SHARED ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:9px;
  font-weight:600;font-size:13px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);transition:background .14s,border-color .14s,transform .07s}
.btn svg{width:14px;height:14px}
.btn:hover{background:var(--green-tint-2);border-color:#D6DCD8}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--green-deep);color:#fff;border-color:var(--green-deep);
  box-shadow:0 2px 8px rgba(14,85,48,.26)}
.btn.primary:hover{background:#0B4426}
.btn.sm{padding:7px 11px;font-size:12px}
.btn.lg{padding:11px 18px;font-size:14px}
.btn.danger{background:var(--red);color:#fff;border-color:var(--red)}
.btn.danger:hover{background:#9C2D25}
.card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  padding:4px 9px;border-radius:999px;white-space:nowrap}
.pill svg{width:11px;height:11px}
.pill.ok{background:var(--green-tint);color:var(--green)}
.pill.warn{background:var(--amber-tint);color:var(--amber)}
.pill.info{background:var(--blue-tint);color:var(--blue)}
.pill.bad{background:var(--red-tint);color:var(--red)}
.pill.soft{background:var(--line-soft);color:var(--muted)}
.pill.violet{background:var(--violet-tint);color:var(--violet)}

/* ---------- PROJECT HEADER + TABS ---------- */
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--muted);margin-bottom:12px;cursor:pointer}
.back-link:hover{color:var(--green)}.back-link svg{width:14px;height:14px}
.proj-head{display:flex;align-items:flex-start;gap:15px;margin-bottom:16px;flex-wrap:wrap}
.proj-ico{width:52px;height:52px;border-radius:13px;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:16px;flex-shrink:0}
.proj-meta h1{font-size:20px;font-weight:800;letter-spacing:-.03em;display:flex;align-items:center;gap:10px}
.proj-meta .sub{color:var(--muted);font-size:12.5px;margin-top:4px;display:flex;
  gap:8px;align-items:center;flex-wrap:wrap}
.proj-meta .sub .sep{width:3px;height:3px;border-radius:50%;background:var(--faint)}
.proj-head .spacer{margin-left:auto}
.deadline-chip{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;
  background:var(--amber-tint);border:1px solid #F0E2C4}
.deadline-chip svg{width:15px;height:15px;color:var(--amber)}
.deadline-chip .dl{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--amber)}
.deadline-chip .dd{font-size:12.5px;font-weight:800;color:var(--ink)}

.stage-tabs{display:flex;align-items:center;gap:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:6px 10px;margin-bottom:18px;box-shadow:var(--sh-sm)}
.stage-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;
  border-radius:var(--r);cursor:pointer;transition:background .12s;position:relative;z-index:1}
.stage-tab:hover{background:var(--green-tint-2)}
.stage-tab.active{background:var(--green-tint)}
.stage-tab .st-no{width:22px;height:22px;border-radius:6px;flex-shrink:0;
  display:grid;place-items:center;font-size:11px;font-weight:800;
  background:var(--surface);color:var(--faint);border:1.5px solid var(--line)}
.stage-tab.done .st-no{background:var(--green);color:#fff;border-color:var(--green)}
.stage-tab.active .st-no{background:var(--green);color:#fff;border-color:var(--green)}
.stage-tab.current .st-no{background:var(--amber);color:#fff;border-color:var(--amber)}
.stage-tab .st-no svg{width:12px;height:12px}
.stage-tab .st-name{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.stage-tab.active .st-name{color:var(--green)}
.stage-tab.done .st-name,.stage-tab.current .st-name{color:var(--ink)}
.stage-tab.locked{opacity:.4;pointer-events:none}
/* Continuous line — the connectors ARE the line. Each connector stretches
   between two tabs and tucks under the tab edges via negative margin, so
   the rail visually passes behind the tab pills. Because there is no
   connector after the last stage tab, the line naturally stops before the
   divider+Chat group on the right. */
.stage-conn{flex:1;min-width:24px;height:1.5px;background:var(--line);align-self:center;
  margin:0 -6px;position:relative;z-index:0}
.stage-conn.done{background:var(--green-bright)}
.stage-divider{width:1px;align-self:stretch;background:var(--line);margin:4px 12px;position:relative;z-index:1}
.stage-tab.side{flex:0 0 auto;position:relative}
.stage-tab.side .st-ico-plain{width:22px;height:22px;display:grid;place-items:center;
  color:var(--faint);flex-shrink:0}
.chat-dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;
  background:var(--red);border:1.5px solid var(--surface)}

/* ---------- CHAT DRAWER ---------- */
/* Slides in from the right; pushes #appMain content (no overlap) so the
   user can keep working in any stage while chatting. */
.chat-drawer{position:fixed;top:var(--topbar-h);right:0;bottom:0;width:380px;background:var(--surface);
  border-left:1px solid var(--line);box-shadow:-8px 0 28px rgba(22,32,26,.06);
  transform:translateX(100%);transition:transform .26s cubic-bezier(.2,.7,.2,1);
  z-index:80;display:flex;flex-direction:column}
.chat-drawer.open{transform:translateX(0)}
.chat-drawer-head{display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--line-soft);flex-shrink:0}
.chat-drawer-close{margin-left:4px;width:30px;height:30px;border-radius:8px;
  border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;
  cursor:pointer;color:var(--muted);flex-shrink:0}
.chat-drawer-close:hover{background:var(--bg);color:var(--ink)}
.chat-drawer-close svg{width:14px;height:14px}
.chat-drawer-body{flex:1;overflow-y:auto;padding:14px 16px;
  display:flex;flex-direction:column;gap:11px;background:var(--surface-2)}
.chat-drawer-input{display:flex;align-items:center;gap:8px;padding:10px 14px;
  border-top:1px solid var(--line);flex-shrink:0;background:var(--surface)}
.chat-drawer-input input{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:9px;
  font-family:inherit;font-size:13px;outline:none;background:var(--surface-2)}
/* Push the scroll container right when the drawer is open. The padding
   shrinks the effective content area; the line/strip naturally re-flow. */
.app.chat-open .app-main-host{padding-right:412px}
@media(max-width:1100px){
  .app.chat-open .app-main-host{padding-right:380px;padding-left:18px}
  .chat-drawer{width:340px}
  .app.chat-open .app-main-host{padding-right:354px}
}
/* ---------- UNIVERSAL COMPONENTS (shell + every fragment) ---------- */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:11px 18px;border-radius:10px;font-size:13px;
  font-weight:600;box-shadow:var(--sh-lg);opacity:0;pointer-events:none;transition:all .26s;
  z-index:200;display:flex;align-items:center;gap:9px}
.toast svg{width:15px;height:15px;color:var(--green-bright)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.scrim{position:fixed;inset:0;background:rgba(22,32,26,.42);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:100}
.scrim.show{opacity:1;pointer-events:auto}
.hidden{display:none!important}
/* .app-main-host padding lives in index.html — it uses calc() for the
   ultrawide-aware gutters and should not be redeclared here. */