:root { --paper:#f5f1e6; --panel:#fffdf7; --ink:#26342b; --muted:#657066; --line:#d9d6c9; --accent:#60734b; --accent-ink:#f7f5eb; --wash:#e7eadb; --danger:#9b4137; --shadow:0 16px 48px rgba(48,55,38,.10); --radius:17px; }
:root[data-theme="graphite"] { --paper:#1d201f; --panel:#282c29; --ink:#f2f0e8; --muted:#b4b9b1; --line:#454a45; --accent:#c6d686; --accent-ink:#20231e; --wash:#333a31; --danger:#f1a19a; --shadow:0 16px 48px rgba(0,0,0,.34); color-scheme:dark; }
:root[data-theme="blueprint"] { --paper:#e7eff0; --panel:#f7fbfb; --ink:#173c50; --muted:#58717c; --line:#abc3ca; --accent:#176c89; --accent-ink:#f8feff; --wash:#d9e9e9; --danger:#a6403d; --shadow:0 16px 48px rgba(20,70,90,.12); }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:15px; line-height:1.48; }
button, input, textarea, select { font:inherit; } button { cursor:pointer; } button:disabled { cursor:not-allowed; opacity:.56; } a { color:inherit; } :focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 60%, white); outline-offset:3px; }
.app-shell { min-height:100vh; } .auth-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 82% 6%, var(--wash), transparent 34%),var(--paper); }
.auth-card { width:min(100%,490px); background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:clamp(25px,5vw,48px); box-shadow:var(--shadow); } .brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.035em; font-size:20px; } .brand-mark { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; background:var(--accent); color:var(--accent-ink); font-family:Georgia,serif; font-weight:700; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { line-height:1.12; letter-spacing:-.035em; } h1 { font:600 clamp(34px,5vw,53px)/1.03 Georgia,serif; margin:28px 0 13px; } h2 { font:600 28px/1.12 Georgia,serif; margin-bottom:10px; } h3 { font-size:16px; margin-bottom:6px; }.subtle,.form-note { color:var(--muted); }.eyebrow { margin:0 0 7px; color:var(--accent); text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.11em; }
label { display:grid; gap:7px; margin:18px 0; font-weight:650; } input,textarea,select { width:100%; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:11px 12px; resize:vertical; } textarea { min-height:82px; }
.primary-button,.quiet-button,.outline-button,.icon-button,.nav-button,.tab-button,.theme-choice { border:0; border-radius:10px; padding:10px 13px; font-weight:750; transition:transform .15s ease,background .15s ease; } .primary-button { background:var(--accent); color:var(--accent-ink); } .quiet-button,.outline-button { background:transparent; color:var(--ink); border:1px solid var(--line); } .outline-button { color:var(--accent); border-color:var(--accent); } .primary-button:hover,.quiet-button:hover,.outline-button:hover,.theme-choice:hover { transform:translateY(-1px); } .full { width:100%; }.error-message { color:var(--danger); font-weight:650; min-height:24px; }
.workspace { min-height:100vh; display:grid; grid-template-columns:265px minmax(0,1fr); }.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:23px 15px 16px; border-right:1px solid var(--line); background:color-mix(in srgb,var(--panel) 82%,transparent); }.sidebar-header { padding:0 9px 20px; }.sidebar-copy { color:var(--muted); font-size:12px; margin:11px 0 0; }.sidebar-section { margin:14px 0 4px; }.sidebar-label { padding:0 9px; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.nav-button { width:100%; display:flex; align-items:center; gap:9px; margin:3px 0; color:var(--ink); background:transparent; text-align:left; }.nav-button.active { background:var(--wash); color:var(--accent); }.nav-count { margin-left:auto; min-width:20px; text-align:center; padding:1px 6px; border-radius:999px; color:var(--accent-ink); background:var(--accent); font-size:12px; }.project-list { overflow:auto; max-height:37vh; padding:0 4px; }.project-item { width:100%; display:block; padding:10px 9px; border:0; border-radius:10px; background:transparent; color:var(--ink); text-align:left; }.project-item:hover,.project-item.active { background:var(--wash); }.project-item strong,.project-item span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.project-item span { color:var(--muted); font-size:12px; margin-top:2px; }.sidebar-bottom { margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }
.main { min-width:0; padding:clamp(18px,3vw,42px); }.topline { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; }.owner-note { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:13px; }.dot { width:8px;height:8px;border-radius:50%;background:var(--muted); }.dot.connected { background:#63975f; }.dot.pending { background:#c89335; }.split { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:26px; }.project-head { border-bottom:1px solid var(--line); padding-bottom:22px; }.project-head h1 { margin:5px 0 11px; }.project-description { color:var(--muted); max-width:750px; white-space:pre-wrap; }.status-row,.action-row,.modal-actions,.tab-list { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }.status-pill { display:inline-flex; align-items:center; padding:4px 9px; border-radius:999px; background:var(--wash); color:var(--accent); font-size:12px; font-weight:800; }.phase-track { display:flex; align-items:center; overflow:auto; padding:22px 0 16px; gap:0; }.phase { flex:1; min-width:94px; position:relative; display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; font-weight:750; }.phase:not(:last-child)::after { content:""; position:absolute; height:1px; left:18px; right:0; top:8px; background:var(--line); z-index:0; }.phase b { position:relative; z-index:1; display:grid; place-items:center; width:17px;height:17px;border-radius:50%; background:var(--panel); border:1px solid var(--line); font-size:9px; }.phase.current,.phase.complete { color:var(--accent); }.phase.current b,.phase.complete b { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }.phase.complete:not(:last-child)::after { background:var(--accent); }
.content-card,.side-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:0 3px 14px rgba(50,55,45,.025); }.side-card { margin-bottom:13px; }.side-card h3 { margin-bottom:7px; }.tab-list { border-bottom:1px solid var(--line); padding:0 0 9px; margin-top:16px; }.tab-button { background:transparent; color:var(--muted); }.tab-button.active { color:var(--accent); background:var(--wash); }.content-card { min-height:290px; }.message-list,.activity-list,.review-list,.file-list { list-style:none; margin:0; padding:0; }.message { max-width:790px; padding:13px 15px; margin:11px 0; border-radius:13px; background:var(--paper); border:1px solid var(--line); white-space:pre-wrap; }.message.owner { margin-left:auto; background:var(--wash); }.message-meta,.event-time { color:var(--muted); font-size:12px; margin-bottom:4px; }.composer { display:grid; gap:9px; margin-top:19px; }.composer-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; }.activity-item { border-bottom:1px solid var(--line); padding:11px 0; }.activity-item:last-child { border:0; }.review-card { padding:15px; margin-bottom:11px; background:var(--paper); border:1px solid var(--line); border-radius:13px; }.review-card p { white-space:pre-wrap; }.review-card h3 { margin:0 0 5px; }.review-question { padding-top:11px; margin-top:11px; border-top:1px solid var(--line); }.review-question label { margin:9px 0; }.choice-row { display:flex; flex-wrap:wrap; gap:7px; margin:8px 0; }.choice { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:7px 9px; color:var(--ink); }.choice.selected { border-color:var(--accent); background:var(--wash); }.review-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }.file-button { width:100%; text-align:left; color:var(--accent); background:transparent; border:0; padding:11px 0; border-bottom:1px solid var(--line); }.file-view { max-height:380px; overflow:auto; margin-top:15px; padding:14px; white-space:pre-wrap; background:var(--paper); border:1px solid var(--line); border-radius:10px; font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }.empty { display:grid; place-items:center; gap:8px; text-align:center; min-height:230px; color:var(--muted); }.empty h2 { color:var(--ink); }.worker-state { display:flex; align-items:center; gap:7px; font-weight:700; }.helper { font-size:13px; color:var(--muted); }.takeover { margin-top:17px; padding:14px; border-radius:11px; background:var(--wash); }.takeover p { margin-bottom:8px; }.takeover textarea { font-size:12px; min-height:104px; }.device-code { display:grid; gap:4px; margin:12px 0 0; color:var(--muted); font-size:12px; font-weight:750; }.device-code code { width:max-content; max-width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); font:700 16px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }.care-grid { display:grid; grid-template-columns:1fr 150px; gap:14px; }.check-label { display:flex; align-items:center; gap:9px; margin:18px 0; }.check-label input { width:auto; }.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }.theme-choice { min-height:98px; border:1px solid var(--line); background:var(--panel); color:var(--ink); text-align:left; }.theme-choice.selected { border:2px solid var(--accent); }.swatch { display:block; width:100%; height:26px; border-radius:6px; margin-bottom:7px; }.workshop-swatch { background:linear-gradient(110deg,#f5f1e6 0 45%,#60734b 46%); }.graphite-swatch { background:linear-gradient(110deg,#1d201f 0 45%,#c6d686 46%); }.blueprint-swatch { background:linear-gradient(110deg,#e7eff0 0 45%,#176c89 46%); }.modal { width:min(100% - 28px,600px); padding:0; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); }.modal::backdrop { background:rgba(15,20,17,.38); backdrop-filter:blur(3px); }.modal-card { padding:24px; }.modal-heading { display:flex; justify-content:space-between; gap:16px; }.icon-button { width:35px;height:35px;padding:0;font-size:23px;line-height:1;background:transparent;color:var(--muted); }.toast { position:fixed; z-index:10; bottom:22px; left:50%; transform:translateX(-50%); max-width:calc(100% - 28px); padding:10px 14px; border-radius:10px; color:var(--accent-ink); background:var(--ink); box-shadow:var(--shadow); }.auth-theme { margin-top:24px; }.auth-theme .settings-grid { grid-template-columns:repeat(3,1fr); }.auth-theme .theme-choice { min-height:74px; padding:8px; font-size:12px; }
@media (max-width:900px) { .workspace { grid-template-columns:1fr; }.sidebar { position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); padding:14px; }.sidebar-header { padding:0 4px 8px; }.sidebar-copy,.sidebar-label,.project-list { display:none; }.sidebar-section { display:inline-block; margin:0; }.sidebar-section:first-of-type { display:block; }.sidebar nav { display:flex; gap:3px; overflow:auto; }.nav-button { width:auto; white-space:nowrap; }.sidebar-bottom { display:none; }.split { grid-template-columns:1fr; }.side-column { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.side-card { margin:0; }.main { padding:19px; } }
@media (max-width:600px) { h1 { font-size:35px; }.topline { align-items:flex-start; flex-direction:column; }.side-column,.settings-grid,.care-grid { grid-template-columns:1fr; }.phase { min-width:80px; }.auth-theme .settings-grid { grid-template-columns:1fr; }.project-head .action-row > * { flex:1; text-align:center; }.content-card,.side-card { padding:15px; } }

/* Keep grid minimums inside the viewport; long paths/tracks scroll within their panels. */
.workspace,.sidebar,.main,.split,.split > *,.side-column,.content-card,.side-card { min-width:0; }
.sidebar nav,.phase-track { max-width:100%; min-width:0; }
.file-button,.message,.helper,.review-card { overflow-wrap:anywhere; }
@media (max-width:900px) { .workspace,.split { grid-template-columns:minmax(0,1fr); } }