:root { --accent:#63c6ee; --accent-2:#9ee37d; --ink:#0d1b2a; --muted:#5b6d85; --line:rgba(13,27,42,0.14); --surface:#ffffff; --panel:#f5f8ff; --border:rgba(13,27,42,0.14); }
* { box-sizing: border-box; font-family: "Manrope", "Segoe UI", system-ui, sans-serif; }
.logo { height:56px; width:auto; object-fit:contain; }
body { margin:0; background:
  radial-gradient(1200px 600px at 5% -20%, rgba(133, 167, 255, 0.35), transparent 60%),
  radial-gradient(800px 500px at 100% 10%, rgba(170, 240, 134, 0.28), transparent 55%),
  linear-gradient(180deg, #eff4ff 0%, #eef7ef 100%); color:var(--ink); min-height:100vh; }
main { display:flex; flex-direction:column; gap:16px; padding:36px 28px 24px; max-width:1280px; margin:0 auto; }
.topbar { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:18px 28px; position:sticky; top:0; z-index:2; background:rgba(255,255,255,0.86); border-bottom:1px solid var(--line); backdrop-filter: blur(10px); }
.brand { display:flex; align-items:center; gap:12px; }
.brand-text { font-weight:800; font-size:18px; color:#0b1221; letter-spacing:0.02em; }
.header-actions { display:flex; align-items:center; gap:10px; }
.home-link, .home-link:visited { display:inline-flex; align-items:center; text-decoration:none; font-size:12px; font-weight:700; letter-spacing:0.02em; color:#123255; background:#eaf0ff; border:1px solid var(--line); padding:8px 12px; border-radius:999px; transition:transform .1s ease, box-shadow .1s ease; }
.home-link:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(16,35,59,0.12); }
.last-saved { font-size:11px; color:#51647e; background:#f5f7ff; padding:6px 10px; border-radius:999px; border:1px solid var(--line); }
.badge { padding:8px 14px; border-radius:999px; background:linear-gradient(135deg, #10243d, #2c4565); color:#fff; font-size:11px; text-transform:uppercase; letter-spacing:0.18em; }
.card { background:var(--surface); border-radius:20px; padding:24px; box-shadow:0 20px 42px rgba(13,27,42,0.1); border:1px solid var(--line); animation:rise .4s ease both; }
.input-hint-wrapper { position:relative; }
.input-hint-wrapper input { width:100%; }
.input-hint { position:absolute; top:50%; left:12px; transform:translateY(-50%); font-size:12px; pointer-events:none; color:#94a3b8; opacity:0.7; transition:opacity .2s ease; }
.input-hint-wrapper:focus-within .input-hint { opacity:0; }
.input-hint-wrapper input:not(:placeholder-shown) + .input-hint { opacity:0; }
h1,h2,h3 { margin:0 0 10px 0; color:#10233b; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; }
label { display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--muted); }
input, select, button { padding:10px; border-radius:10px; border:1px solid rgba(15,23,42,0.2); background:#f4f7ff; color:#0b1221; }
input[type=checkbox] { padding:0; border-radius:4px; background:#fff; }
input::placeholder { color:#7c879a; }
button { border:none; font-weight:700; cursor:pointer; transition:transform .1s ease, box-shadow .1s ease; }
button.primary { background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#0b1221; }
button.primary:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(73,170,186,0.35); }
button.secondary { background:#eaf0ff; color:#123255; border:1px solid var(--line); }
button.secondary:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(16,35,59,0.12); }
button.danger { background:#ffe8ea; color:#8c1d2c; border:1px solid rgba(140,29,44,0.2); }
button.danger:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(140,29,44,0.15); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline:3px solid rgba(99,198,238,0.45); outline-offset:2px; }
.hidden { display:none; }
.tests-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
.result { margin-top:10px; padding:14px; border-radius:12px; background:#eef2ff; border:1px dashed rgba(15,23,42,0.16); min-height:40px; color:#141a36; }
.result-note { margin-top:8px; font-size:13px; color:#0b1221; font-weight:600; padding:10px; background:rgba(255,255,255,0.8); border-radius:10px; border:1px solid rgba(11,18,34,0.1); }
.result-viz { margin-top:10px; }
.viz-track { height:10px; background:#dde6fb; border-radius:999px; overflow:hidden; border:1px solid rgba(13,27,42,0.12); }
.viz-fill { height:100%; background:linear-gradient(90deg, #7fb8ff, #9de08c); border-radius:999px; }
.viz-caption { margin-top:4px; font-size:12px; color:#5f718a; }
.howto { margin-top:10px; color:var(--muted); }
.howto summary { cursor:pointer; color:var(--accent); }
.history-item { border-bottom:1px solid var(--border); padding:8px 0; font-size:14px; }
.history-item:last-child { border-bottom:none; }
.badge-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:linear-gradient(135deg, #b2b7ff, #cae9a5); border:1px solid rgba(11,18,34,0.1); color:#0b1221; font-weight:700; }
.metric { font-size:28px; font-weight:800; letter-spacing:-0.02em; line-height:1.1; }
.contra { margin:10px 0 14px 0; padding:0; border-radius:12px; border:1px solid rgba(11,18,34,0.2); background:linear-gradient(180deg, rgba(95,117,255,0.15), rgba(196,255,180,0.15)); color:#0b1221; font-size:14px; }
.contra summary { padding:12px 16px; cursor:pointer; font-weight:700; color:#0b1221; list-style:none; background:linear-gradient(135deg, #b2b7ff, #cae9a5); border-radius:12px; margin:0; transition:transform .2s ease, box-shadow .2s ease; }
.contra summary:hover { transform:translateY(-1px); box-shadow:0 10px 20px rgba(11,18,34,0.2); }
.contra-details { padding:0 16px 14px 16px; background:rgba(255,255,255,0.85); border-radius:0 0 12px 12px; color:#141a36; }
.contra-details ul { margin:8px 0 10px 18px; }
.norms { margin:12px 0; padding:16px; border-radius:14px; border:1px solid rgba(11,18,34,0.2); background:linear-gradient(135deg, rgba(178,183,255,0.3), rgba(196,255,180,0.3)); }
.norms h3 { margin:0 0 6px 0; color:#0b1221; font-size:16px; font-weight:700; }
.norms ul { margin:0; padding-left:16px; color:#081129; font-size:14px; }
.bibliography ol { margin:0; padding-left:18px; color:#081129; font-size:14px; }
.functional-intro { display:none; }
.summary-overview { color:#0b1221; font-weight:600; }
.summary-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); margin-top:12px; }
.summary-grid ul { margin:0; padding-left:18px; color:#0b1221; font-size:14px; }
.summary-callouts { display:grid; gap:12px; margin-top:12px; }
.callout { padding:12px; border-radius:12px; border:1px solid rgba(11,18,34,0.15); background:rgba(255,255,255,0.85); color:#0b1221; font-size:14px; }
.callout:empty { display:none; }
.consent-row { grid-column:1 / -1; display:flex; flex-direction:row; align-items:flex-start; gap:10px; font-size:13px; color:#304565; background:#f5f9ff; padding:10px; border-radius:10px; border:1px solid var(--line); }
.consent-row input { width:18px; height:18px; margin-top:2px; }
.safety-banner { margin-top:8px; font-size:13px; color:#76410e; background:#fff5e7; border:1px solid #f2d5a4; border-radius:10px; padding:10px; }
.dashboard-subtitle { color:var(--muted); margin:0 0 12px 0; }
.dashboard-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; margin-bottom:14px; }
.stat-tile { padding:14px; background:var(--panel); border-radius:14px; border:1px solid var(--line); }
.stat-label { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:0.06em; }
.stat-value { font-size:28px; font-weight:800; color:#10233b; margin-top:4px; }
.domain-bars { display:grid; gap:10px; margin-top:10px; }
.domain-row { display:grid; grid-template-columns: 150px 1fr 56px; gap:10px; align-items:center; }
.domain-label { color:#10233b; font-weight:700; font-size:13px; }
.domain-track { height:10px; border-radius:999px; background:#e7ebf8; overflow:hidden; }
.domain-fill { height:100%; background:linear-gradient(90deg, #8cb8ff, #8fd1b2); border-radius:999px; }
.domain-pct { font-size:12px; color:var(--muted); text-align:right; }
.prevention-tags { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.prevention-tag { padding:6px 10px; font-size:12px; border-radius:999px; border:1px solid var(--line); background:#f6f9ff; color:#123255; font-weight:700; }
.prevention-note { font-size:12px; color:#6f7d93; margin-top:8px; }
.prevention-map { margin-top:12px; padding:12px; border-radius:12px; border:1px solid var(--line); background:var(--panel); font-size:13px; color:#123255; }
.prevention-map:empty { display:none; }
.timeline-delta { margin-top:8px; font-size:13px; color:#123255; }
.data-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
#feedback-text { width:100%; resize:vertical; min-height:110px; border:1px solid var(--line); border-radius:10px; padding:10px; background:#f8fbff; color:#0b1221; }
#feedback-status { font-size:13px; color:#4d607d; margin-top:8px; min-height:18px; }
.tests-grid > .card { animation:rise .35s ease both; }
.tests-grid > .card:nth-child(2) { animation-delay:.08s; }
#compute-standard, #compute-alt { position:sticky; bottom:10px; z-index:1; box-shadow:0 8px 20px rgba(16,35,59,0.2); }
details[open] summary { box-shadow:0 12px 26px rgba(11,18,34,0.18); }
@keyframes rise { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:translateY(0);} }
@media(max-width:900px){ main{padding:24px 16px 20px;} .topbar{padding:14px 16px;} .card{padding:18px;} .metric{font-size:24px;} .header-actions{flex-direction:column; align-items:flex-end;} .home-link{font-size:11px; padding:6px 10px;} .last-saved{font-size:10px;} }
@media(max-width:640px){ .tests-grid{grid-template-columns:1fr;} .domain-row{grid-template-columns:1fr; gap:6px;} .domain-pct{text-align:left;} #compute-standard,#compute-alt{position:static;} }
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:12px; color:#5b6d85; margin:2px 0 4px; }
.breadcrumb a { color:#123255; text-decoration:none; font-weight:700; }
.breadcrumb span { color:#6c7f99; }