
/* WorkPilot V3: shared tokens drive all workspace and legacy surfaces. */
:root,[data-theme="ocean"]{color-scheme:dark;--bg:#07111d;--panel:#101f30;--panel-strong:#15283d;--line:#294157;--line-strong:#4dcce8;--text:#eaf4ff;--muted:#a0b5c9;--cyan:#67dff3;--blue:#8baeff;--green:#7de0b3;--amber:#ffce82;--red:#ff93a2;--purple:#b5a6ff;--button-ink:#07111d;--shadow:0 16px 50px #0005;--glow:#143a55}
[data-theme="business"]{color-scheme:light;--bg:#f3f5f8;--panel:#fff;--panel-strong:#eaf0f7;--line:#c6d1de;--line-strong:#255cb0;--text:#1b2c44;--muted:#52657b;--cyan:#175ca2;--blue:#3155b1;--green:#147347;--amber:#835914;--red:#b3263b;--purple:#6c43aa;--button-ink:#fff;--shadow:0 12px 40px #21334b0c;--glow:#dae7fa}
[data-theme="gold"]{color-scheme:dark;--bg:#100f0d;--panel:#1c1a17;--panel-strong:#28241e;--line:#514735;--line-strong:#dab66b;--text:#f8f0dc;--muted:#c0b49a;--cyan:#e8c77d;--blue:#c99e55;--green:#acd19d;--amber:#f1cd88;--red:#f5a699;--purple:#d4b7d7;--button-ink:#19150c;--shadow:0 16px 50px #0005;--glow:#46371c}
[data-theme="purple"]{color-scheme:dark;--bg:#120e20;--panel:#211a35;--panel-strong:#2e2347;--line:#50426d;--line-strong:#b499fc;--text:#f3edff;--muted:#beaed5;--cyan:#c3a7ff;--blue:#e5a5e9;--green:#9ce3cc;--amber:#f4cf9d;--red:#f6a4c5;--purple:#c3a7ff;--button-ink:#1c1130;--shadow:0 16px 50px #0005;--glow:#442861}
[hidden]{display:none!important}
html{scroll-padding-top:18px}
body{background:radial-gradient(ellipse at 40% 0,var(--glow),transparent 55%),var(--bg);font-size:14px;overflow-x:visible}
body .ambient{display:none}
body .app-shell{display:grid;grid-template-columns:208px minmax(0,1fr) minmax(330px,390px);align-items:start;max-width:2100px;margin:auto}
body .sidebar{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:26px 16px;background:var(--panel);border-color:var(--line);z-index:5;overflow-y:auto}
body .main{min-width:0;padding:30px clamp(16px,2.3vw,40px);max-width:none;width:auto}
body .brand-mark{background:linear-gradient(135deg,var(--cyan),var(--blue));color:var(--button-ink)}
body .nav{display:grid;gap:7px;margin-top:28px}
body .nav-item{width:100%;background:transparent;border:1px solid transparent;text-align:left;color:var(--muted);font-size:13px;cursor:pointer;min-height:44px}
body .nav-item.active,body .nav-item:hover{background:var(--panel-strong);border-color:var(--line);color:var(--cyan)}
.nav-item small{margin-left:auto;font-size:10px}
body .demo-badge,body .notice,body .side-note{background:var(--panel-strong);color:var(--text);border-color:var(--line)}
body .side-note{margin-top:auto}
.side-note a{display:block;color:var(--cyan);margin-top:14px;font-size:12px}
body .side-note p,body .side-footer{color:var(--muted)}
body .topbar{align-items:center;gap:14px;margin-bottom:24px}
body .topbar h1{font-size:clamp(23px,2.1vw,32px);line-height:1.45;letter-spacing:-.02em}
body .topbar h1 span{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:6px}
body .top-actions{flex-wrap:wrap;gap:10px;width:auto}
body .notice{margin-bottom:20px}
body .notice p{color:var(--muted)}
body .hero-grid,body .workspace-grid{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:20px}
body .hero-grid>*,body .workspace-grid>*{min-width:0}
body .card,body .task-console,body .progress-card,body .timeline-panel,body .result-panel,body .scene-card,body .capability-card,body .price-card,body .diagnosis-section,body .commercial-card,body .consult-card,body .contact-card{background:var(--panel);border-color:var(--line);color:var(--text);box-shadow:none}
body .card-head h2{font-size:17px}
body input,body textarea,body select{max-width:100%;background:var(--bg);color:var(--text);border-color:var(--line);accent-color:var(--cyan)}
body textarea{resize:vertical}
body input::placeholder,body textarea::placeholder{color:var(--muted);opacity:1}
body button:focus-visible,body a:focus-visible,body input:focus-visible,body textarea:focus-visible,body select:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
body button{cursor:pointer}
body button:disabled{cursor:not-allowed;opacity:.65}
body .primary-btn,body .diagnose-btn,body #mb2-run,body #mb3-start,body .lead-submit{background:linear-gradient(120deg,var(--cyan),var(--blue));color:var(--button-ink);border:0}
body .secondary-btn,body .header-consult-btn,body .runtime-pill{background:var(--panel-strong);color:var(--text);border-color:var(--line)}
.v3-kicker{color:var(--cyan);font-size:10px;letter-spacing:.15em;font-weight:700}
.v3-tag{display:inline-flex;padding:5px 8px;border:1px solid var(--line);border-radius:6px;color:var(--cyan);font-size:10px;white-space:nowrap}
.v3-section-head{display:flex;gap:12px;align-items:center;justify-content:space-between}
.v3-section-head h2{font-size:clamp(18px,1.7vw,24px);line-height:1.5;margin:8px 0}
.v3-chat{padding:24px;border-radius:18px}
.v3-chat-log{display:grid;gap:12px;margin:20px 0;max-height:340px;overflow:auto}
.v3-message{margin:0;padding:14px 16px;border-radius:12px;background:var(--panel-strong);line-height:1.8;overflow-wrap:anywhere}
.v3-message.user{margin-left:24px;border:1px solid var(--line-strong)}
.v3-chat form{display:grid;gap:9px}
.v3-chat label{font-size:12px;color:var(--muted)}
#v3-prompt{width:100%;padding:14px;border:1px solid var(--line);border-radius:12px;line-height:1.7}
.v3-chat-actions{display:flex;gap:12px;align-items:center;justify-content:space-between}
.v3-chat-actions span{color:var(--muted);font-size:11px}
.v3-chat-actions button{padding:12px 16px;border-radius:10px;white-space:nowrap}
.v3-suggestions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.v3-suggestions button,.v3-page button:not(.v3-theme-choice),.v3-floating button{padding:10px 13px;background:var(--panel-strong);border:1px solid var(--line);color:var(--text);border-radius:8px}
.v3-brain{min-width:0;border-left:1px solid var(--line);background:var(--panel);padding:28px 18px;min-height:100vh}
.v3-brain-head h2{font-size:20px;display:flex;align-items:center;gap:10px}
.v3-brain-head p{font-size:11px;color:var(--muted);line-height:1.8}
body .mb2-section,body .mb3-section{padding:16px;margin:18px 0;background:var(--bg);border-color:var(--line);color:var(--text);box-shadow:none;border-radius:14px}
body .mb2-section h2,body .mb3-section h2{font-size:18px}
body .mb2-results,body .mb3-grid,body .mb3-stats{grid-template-columns:minmax(0,1fr)}
body .mb2-card,body .mb3-card,body .mb3-stats>div,body .mb2-input-area{background:var(--panel);border-color:var(--line);padding:13px}
body .mb2-full,body .mb3-wide{grid-column:auto}
body #mb2-task,body .mb3-controls select{background:var(--bg);color:var(--text);border-color:var(--line);width:100%}
body .mb2-controls{gap:10px}
body #mb2-run{width:100%;margin-left:0}
body .mb2-tag,body .mb3-kicker,body .mb2-card h3,body .mb3-card h3{color:var(--cyan);letter-spacing:.04em}
body .mb2-card pre,body .mb3-card pre{color:var(--text);max-height:none;overflow:visible;white-space:pre-wrap;overflow-wrap:anywhere}
body .mb2-desc,body .mb3-desc,body .mb2-disclaimer,body .mb3-foot,body .mb2-card small,body .mb2-controls label,body .mb3-controls label,body .mb3-message,body #mb2-message{color:var(--muted)}
body .mb2-activation,body .mb2-step strong,body .mb3-stats strong{color:var(--text)}
body .mb2-step span,body .mb3-stats span{color:var(--muted)}
body .mb2-bar{background:var(--panel-strong)}
body .mb2-bar span{background:linear-gradient(90deg,var(--cyan),var(--blue))}
body .mb3-controls button,body .mb3-actions button{background:var(--panel-strong);color:var(--text);border-color:var(--line)}
.v3-page>p{color:var(--muted);line-height:1.8}
.v3-page h2{font-size:28px;letter-spacing:-.03em}
.v3-pad{padding:22px;border-radius:14px;margin:18px 0}
.v3-stat-grid,.v3-skill-grid,.v3-theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.v3-stat-grid .card{padding:20px;border-radius:14px}
.v3-stat-grid span,.v3-stat-grid strong{display:block}
.v3-stat-grid strong{margin-top:12px;font-size:18px;color:var(--cyan)}
.v3-history{padding-left:24px}
.v3-history li{padding:16px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.v3-file-list{padding:0;list-style:none;display:grid;gap:0}
.v3-file-list li,.v3-file-list>div{padding:16px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-bottom:1px solid var(--line)}
.v3-lock-banner{padding:16px;border:1px solid var(--line-strong);background:var(--panel-strong);color:var(--cyan);border-radius:12px;margin:22px 0}
#v3-model-fields{border:1px solid var(--line);border-radius:14px;padding:20px;display:grid;gap:18px;background:var(--panel)}
#v3-model-fields label{display:grid;gap:8px;font-size:12px}
#v3-model-fields input,#v3-model-fields select{padding:12px;width:100%;border:1px solid var(--line);border-radius:8px}
.v3-model-buttons{display:flex;flex-wrap:wrap;gap:8px}
.v3-theme-choice{border:1px solid var(--line);background:var(--panel);padding:12px;color:var(--text);border-radius:14px;text-align:left}
.v3-theme-choice[aria-pressed="true"]{outline:2px solid var(--cyan);outline-offset:3px}
.v3-theme-choice strong,.v3-theme-choice>span{display:block;margin:12px 5px}
.v3-theme-choice>span{color:var(--muted);font-size:12px}
.v3-swatch{display:block;border-radius:8px;height:100px;border:1px solid #8884}
.v3-swatch.ocean{background:linear-gradient(135deg,#07111d 60%,#67dff3)}
.v3-swatch.business{background:linear-gradient(135deg,#fff 60%,#175ca2)}
.v3-swatch.gold{background:linear-gradient(135deg,#100f0d 60%,#e8c77d)}
.v3-swatch.purple{background:linear-gradient(135deg,#120e20 60%,#c3a7ff)}
.v3-legacy{border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:24px}
.v3-legacy summary{cursor:pointer;color:var(--cyan);font-size:13px}
.v3-fab{position:fixed;right:24px;bottom:24px;z-index:70;display:flex;align-items:center;gap:8px;background:var(--cyan);color:var(--button-ink);border:0;border-radius:999px;box-shadow:var(--shadow);padding:15px 20px;font-size:20px}
.v3-fab span{font-size:12px}
.v3-floating{position:fixed;right:24px;bottom:90px;width:min(350px,calc(100vw - 32px));max-height:calc(100dvh - 120px);overflow:auto;z-index:80;border:1px solid var(--line-strong);background:var(--panel);color:var(--text);box-shadow:var(--shadow);border-radius:18px;padding:20px}
.v3-floating h3{font-size:15px}
.v3-floating>p{color:var(--muted);font-size:12px;line-height:1.8}
.v3-floating>button{display:block;width:100%;margin-top:10px}
.v3-floating progress{width:100%;accent-color:var(--cyan);margin-bottom:15px}
body .modal{z-index:100}
body .modal-box{background:var(--panel);color:var(--text);border-color:var(--line)}
body .modal-box p{color:var(--muted)}
/* Normalize legacy hard-coded colors so all four skins are complete. */
body :is(.scene-card,.capability-card,.price-card,.difference-section,.diagnosis-section,.commercial-grid,.architecture-section,.workspace-grid,.hero-grid) :is(p,small,label,li,span){color:var(--muted)}
body :is(.scene-card,.capability-card,.price-card,.difference-section,.diagnosis-section,.commercial-grid,.architecture-section,.workspace-grid,.hero-grid) :is(h2,h3,strong){color:var(--text)}
body :is(.capability-card,.price-card,.assistant-side,.workpilot-side,.diagnosis-form,.diagnosis-result,.diag-check-grid label,.external-write-check,.implementation-steps span,.execution-chain span,.workpilot-advantages div,.capability-note>div,.pricing-note,.timeline-item,.metric,.metric-box,.approval-summary){background:var(--panel-strong);border-color:var(--line)}
body .commercial-grid{grid-template-columns:minmax(0,1fr)}
body .capability-grid,body .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body .diagnosis-layout{grid-template-columns:minmax(0,1fr)}
body .footer,body footer{color:var(--muted)}
@media(min-width:1700px){body .app-shell{grid-template-columns:220px minmax(0,1fr) 460px}}
@media(max-width:1279px){body .app-shell{grid-template-columns:180px minmax(0,1fr)}.v3-brain{grid-column:2;min-height:0;border-top:1px solid var(--line);border-left:0;padding:24px}.v3-brain .mb2-results,.v3-brain .mb3-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v3-brain .mb2-full,.v3-brain .mb3-wide{grid-column:1/-1}body .sidebar{grid-row:1/3}}
@media(max-width:760px){body .app-shell{display:flex;flex-direction:column}body .sidebar{position:relative;height:auto;width:100%;padding:18px;border-right:0;border-bottom:1px solid var(--line);overflow:visible}body .brand{gap:10px}body .demo-badge{margin-top:14px}body .nav{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}body .nav-item{width:auto;flex:1 0 120px;padding:10px;font-size:12px}body .side-note,body .side-footer{display:none}body .main{width:100%;padding:22px 16px}.v3-brain{width:100%;padding:22px 16px}.v3-brain .mb2-results,.v3-brain .mb3-grid{grid-template-columns:minmax(0,1fr)}body .topbar{flex-direction:column;align-items:flex-start}.v3-stat-grid,.v3-skill-grid{grid-template-columns:minmax(0,1fr)}.v3-chat{padding:18px}.v3-chat-actions{align-items:flex-start;flex-direction:column}.v3-chat-actions button{width:100%}.v3-floating{right:16px}.v3-fab{right:16px;bottom:16px}body .capability-grid,body .pricing-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:380px){.v3-theme-grid{grid-template-columns:minmax(0,1fr)}.v3-section-head{align-items:flex-start;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

body .side-note strong,body .mb2-input-area>label{color:var(--text)}
body .mb3-controls #mb3-start{background:linear-gradient(120deg,var(--cyan),var(--blue));color:var(--button-ink)}

body .mb2-status{color:var(--green)}
.v3-fab{font-size:15px;font-weight:700}
