:root{color-scheme:light;--bg:#f3f6fb;--surface:#fff;--surface-alt:#e8eef7;--text:#0f1724;--muted:#5f6f86;--line:#d5deea;--brand:#0a6c74;--brand-dark:#084d53;--accent:#c96d2d;--good:#1d8f5f;--warn:#c67b00;--radius:8px;--shadow:0 18px 50px rgba(16,28,45,.08)}*{box-sizing:border-box}body,html{padding:0;margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}.page-shell,body{min-height:100vh}.page-shell{display:flex;flex-direction:column}.topbar{background:linear-gradient(135deg,#0d2438,#0a6c74);color:#fff;padding:28px 32px 20px}.topbar h1{margin:0 0 6px;font-size:2rem}.topbar p{margin:0;max-width:760px;color:hsla(0,0%,100%,.86)}.main-grid{width:min(1440px,calc(100% - 32px));margin:24px auto;display:grid;grid-template-columns:250px minmax(0,1fr);grid-gap:20px;gap:20px;flex:1 1}.callout,.metric-card,.nav-panel,.panel,.table-card,.upload-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.nav-panel{padding:14px;position:-webkit-sticky;position:sticky;top:18px;align-self:start}.nav-list{display:grid;grid-gap:8px;gap:8px}.nav-button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:11px 12px;text-align:left;cursor:pointer;color:var(--text)}.nav-button.active{background:var(--surface-alt);border-color:var(--brand);color:var(--brand-dark);font-weight:700}.content{display:grid;grid-gap:18px;gap:18px}.hero-panel,.panel,.upload-panel{padding:20px}.section-title{margin:0 0 6px;font-size:1.5rem}.section-subtitle{margin:0;color:var(--muted)}.metrics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:16px;gap:16px}.metric-card{padding:18px}.metric-label{color:var(--muted);font-size:.92rem;margin-bottom:8px}.metric-value{font-size:2rem;font-weight:700}.stack{grid-gap:16px}.dual-grid,.stack{display:grid;gap:16px}.dual-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:16px}.table-card{overflow:hidden}table{width:100%;border-collapse:collapse}td,th{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}th{background:#f8fbff;color:var(--muted);font-size:.9rem}.bars{display:grid;grid-gap:12px;gap:12px}.bar-row{display:grid;grid-gap:6px;gap:6px}.bar-head{display:flex;justify-content:space-between;gap:12px;font-size:.95rem}.bar-track{background:#edf2f8;border-radius:999px;overflow:hidden;height:12px}.bar-fill{background:linear-gradient(90deg,var(--brand),var(--accent));height:100%}.callout{padding:18px}.callout h3{margin:0 0 8px}.muted{color:var(--muted)}.upload-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px;gap:16px}.file-input,.input,.textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:#fff;font:inherit}.textarea{min-height:120px;resize:vertical}.button{border:0;border-radius:8px;background:var(--brand);color:#fff;padding:11px 14px;font-weight:700;cursor:pointer}.button.secondary{background:#fff;color:var(--brand-dark);border:1px solid var(--line)}.button-row{display:flex;gap:12px;flex-wrap:wrap}.code-block{background:#0f1724;color:#edf5ff;padding:16px;border-radius:8px;overflow:auto}.safety{border-left:4px solid var(--accent);background:#fff8f1;padding:14px 16px;border-radius:8px;color:#6b4a18}.footer{padding:18px 32px 28px;color:var(--muted)}@media (max-width:980px){.dual-grid,.main-grid,.metrics-grid,.upload-grid{grid-template-columns:1fr}.nav-panel{position:static}}