:root { --bg:#f4f7fb; --surface:#fff; --text:#162033; --muted:#637089; --primary:#2457d6; --border:#dce3ef; --success:#147a55; --danger:#b42318; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif; background:var(--bg); color:var(--text); }
.container { width:min(1060px,calc(100% - 32px)); margin:auto; }
.topbar { background:#102452; color:#fff; padding:18px 0; }
.brand { font-weight:750; letter-spacing:.02em; }
.hero { padding:64px 0 30px; max-width:820px; }
.hero.compact { padding-bottom:20px; }
h1 { margin:12px 0; font-size:clamp(2rem,5vw,3.6rem); line-height:1.05; }
h2 { margin-top:0; }
p { color:var(--muted); line-height:1.65; }
.badge { display:inline-block; padding:7px 11px; border-radius:999px; background:#e5ecff; color:var(--primary); font-size:.82rem; font-weight:750; }
.badge.success { background:#dcf6eb; color:var(--success); }
.card { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:26px; box-shadow:0 12px 35px rgba(22,32,51,.06); }
.upload-card { margin-bottom:24px; }
.file-zone { display:flex; min-height:180px; border:2px dashed #9db0d7; border-radius:14px; align-items:center; justify-content:center; flex-direction:column; gap:8px; cursor:pointer; padding:24px; text-align:center; }
.file-zone:hover { background:#f7f9ff; border-color:var(--primary); }
.file-zone input { margin-top:12px; max-width:100%; }
button, .secondary { display:inline-block; margin-top:18px; border:0; border-radius:11px; padding:13px 20px; font-weight:750; text-decoration:none; cursor:pointer; }
button { background:var(--primary); color:#fff; }
.secondary { background:#edf1f7; color:var(--text); }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:24px 0 60px; }
.alert { margin-top:22px; padding:14px 16px; border-radius:10px; }
.alert.error { background:#fee4e2; color:var(--danger); }
.downloads { display:grid; gap:11px; margin:20px 0; }
.download { display:flex; justify-content:space-between; gap:20px; border:1px solid var(--border); border-radius:12px; padding:15px 16px; color:var(--text); text-decoration:none; }
.download:hover { border-color:var(--primary); background:#f7f9ff; }
.download strong { color:var(--primary); }
@media (max-width:760px) { .grid { grid-template-columns:1fr; } .download { flex-direction:column; } }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
.metric { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px; }
.metric span,.metric small { display:block; color:var(--muted); }
.metric strong { display:block; margin-top:8px; font-size:1.25rem; }
.card { margin-bottom:24px; }
.highlight { border-color:#9db0d7; }
.section-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.gradient-value,.formula { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; background:#edf1f7; border-radius:10px; padding:10px 13px; }
.formula { display:inline-block; margin:6px 0; }
.analysis-image { display:block; width:100%; max-height:760px; object-fit:contain; margin-top:20px; border:1px solid var(--border); border-radius:12px; background:#fff; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.92rem; }
th,td { text-align:left; padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
th { background:#f7f9fc; }
.two-columns { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.note { font-size:.88rem; border-left:3px solid #9db0d7; padding-left:12px; }
@media (max-width:760px) { .metrics,.two-columns { grid-template-columns:1fr; } .section-heading { flex-direction:column; } }