:root { --ink:#173042; --muted:#61707c; --line:#dbe4e8; --paper:#f6f8f8; --blue:#167b8e; --navy:#123042; --green:#28775d; --amber:#b57320; --red:#bd4d4a; --white:#fff; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button { font:inherit; cursor:pointer; } .prototype-banner { background:#f0bd63; color:#553701; font-size:12px; font-weight:700; text-align:center; padding:8px 16px; }
.topbar { height:78px; background:var(--white); display:flex; justify-content:space-between; align-items:center; padding:0 34px; border-bottom:1px solid var(--line); } .brand { display:flex; align-items:center; gap:11px; } .brand-mark { background:var(--blue); color:#fff; border-radius:10px; display:grid; place-items:center; width:38px; height:38px; font-weight:800; letter-spacing:-1px; } .brand strong,.brand small { display:block; } .brand small { color:var(--muted); font-size:12px; } .day-control { display:flex; align-items:center; gap:14px; color:var(--muted); font-weight:650; }.primary { border:0; border-radius:8px; padding:11px 15px; background:var(--blue); color:#fff; font-weight:750; box-shadow:0 2px 8px #167b8e40; }.primary:hover { background:#116c7d; }.primary span { margin-left:7px; }
.shell { display:grid; grid-template-columns:220px minmax(0,1fr); min-height:calc(100vh - 104px); }.sidebar { background:var(--navy); color:#d9e8ed; padding:26px 14px; }.eyebrow { color:#78b7c5; font-size:10px; font-weight:800; letter-spacing:1.2px; margin:0 12px 12px; }.nav-item { width:100%; border:0; border-radius:7px; background:transparent; color:#d9e8ed; padding:11px 12px; text-align:left; display:flex; gap:10px; align-items:center; }.nav-item:hover,.nav-item.active { background:#275164; color:#fff; }.nav-item span { font-size:17px; width:18px; text-align:center; }.sidebar-note { margin:32px 8px 0; border-top:1px solid #416776; padding-top:18px; font-size:12px; color:#bed3d9; }
.content { padding:34px clamp(24px,4vw,56px) 60px; max-width:1460px; width:100%; }.headline { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:26px; }.headline h1 { margin:0; font-size:30px; letter-spacing:-.8px; }.headline p { color:var(--muted); margin:5px 0 0; }.pill { border-radius:999px; padding:6px 10px; font-size:12px; font-weight:750; white-space:nowrap; }.pill.blue { background:#d8eef1; color:#0a6575; }.pill.green { background:#dcefe8; color:#176147; }.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:26px; }.metric { background:#fff; border:1px solid var(--line); border-radius:12px; padding:17px; }.metric small { display:block; color:var(--muted); font-weight:650; }.metric strong { display:block; font-size:27px; letter-spacing:-1px; margin:7px 0 3px; }.metric span { color:var(--muted); font-size:12px; }.metric.alert strong { color:var(--red); }.metric.warn strong { color:var(--amber); }
.grid { display:grid; grid-template-columns:1.45fr .9fr; gap:22px; }.panel { background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }.panel-heading { padding:18px 20px 14px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }.panel-heading h2 { font-size:16px; margin:0; }.panel-heading span { color:var(--muted); font-size:12px; }.list { padding:6px 12px 12px; }.work-item { display:grid; grid-template-columns:9px 1fr auto; gap:12px; align-items:center; padding:14px 8px; border-bottom:1px solid #edf1f2; }.work-item:last-child { border:0; }.dot { width:9px; height:9px; border-radius:50%; }.dot.red{background:var(--red)} .dot.amber{background:var(--amber)} .dot.blue{background:var(--blue)} .dot.green{background:var(--green)}.work-item strong,.work-item small { display:block; }.work-item small { color:var(--muted); margin-top:2px; }.status { text-align:right; }.status b { display:block; font-size:12px; }.status small { font-size:11px; color:var(--muted); }.next-step { padding:18px 20px; }.next-step h3 { font-size:14px; margin:0 0 8px; }.next-step p { margin:0 0 16px; color:var(--muted); }.outline { background:#fff; border:1px solid #8aa9b4; color:var(--blue); border-radius:7px; padding:9px 12px; font-weight:700; }.outline:hover { background:#eff7f8; }
.detail-table { width:100%; border-collapse:collapse; }.detail-table th { text-align:left; background:#f7fafb; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.5px; padding:11px 16px; }.detail-table td { padding:14px 16px; border-top:1px solid var(--line); }.tag { display:inline-block; border-radius:999px; padding:4px 8px; font-size:11px; font-weight:750; }.tag.red{background:#f9e5e4;color:#963b39}.tag.amber{background:#fff0d4;color:#8b5613}.tag.blue{background:#e0f1f4;color:#086576}.tag.green{background:#e2f1eb;color:#176248}.action { border:0; border-radius:6px; background:#eef6f7; color:#0c6878; padding:7px 9px; font-size:12px; font-weight:750; }.action:hover{background:#dceff1}.scenario { background:#e8f3f4; border:1px solid #c9e2e5; border-radius:10px; padding:17px; margin-bottom:22px; color:#195462; }.scenario strong{display:block;margin-bottom:3px}.chat { padding:20px; }.question { border:1px solid var(--line); border-radius:9px; padding:12px; margin:0 0 10px; background:#f8fafb; font-weight:650; }.answer { margin:0 0 18px; padding:13px; border-left:3px solid var(--blue); background:#f4fbfc; color:#294652; }.answer small { display:block; margin-top:8px; color:var(--muted); }.empty { color:var(--muted); padding:18px; }
@media (max-width:900px){.shell{grid-template-columns:1fr}.sidebar{padding:10px;display:flex;overflow:auto;align-items:center;gap:8px}.eyebrow,.sidebar-note{display:none}.sidebar nav{display:flex;gap:4px}.nav-item{white-space:nowrap;width:auto}.metrics{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}.topbar{padding:0 18px}.day-control>span{display:none}}@media(max-width:560px){.content{padding:24px 16px}.metrics{grid-template-columns:1fr 1fr}.metric strong{font-size:22px}.headline{align-items:flex-start;flex-direction:column}.detail-table{font-size:12px}.detail-table th:nth-child(3),.detail-table td:nth-child(3){display:none}}