:root {
  --bg: #05070a;
  --panel: #0b1015;
  --panel2: #10161d;
  --line: #222b35;
  --text: #f3f6f8;
  --muted: #8995a3;
  --accent: #f2d31c;
  --danger: #ff6d6d;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 75% 0%, rgba(242,211,28,.08), transparent 26%), var(--bg); font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.site-header, .site-footer { width:min(1120px, calc(100% - 32px)); margin:auto; display:flex; justify-content:space-between; align-items:center; }
.site-header { min-height:82px; border-bottom:1px solid var(--line); }
.site-footer { padding:28px 0 36px; border-top:1px solid var(--line); color:#687483; font-size:11px; font-weight:800; }
.eyebrow { color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.16em; }
.eyebrow.accent { color:var(--accent); }
.brand { margin-top:5px; font-size:18px; font-weight:950; letter-spacing:.04em; }
.build-badge { border:1px solid rgba(242,211,28,.38); color:var(--accent); border-radius:999px; padding:8px 11px; font-size:10px; font-weight:900; letter-spacing:.08em; }
.page-shell { width:min(980px, calc(100% - 32px)); margin:auto; padding:54px 0 76px; }
.hero { display:grid; grid-template-columns:1.5fr .7fr; gap:24px; align-items:stretch; margin-bottom:28px; }
.hero h1 { margin:12px 0 16px; font-size:clamp(42px, 7vw, 76px); line-height:.95; letter-spacing:-.055em; }
.hero p { max-width:650px; color:#a9b4c0; line-height:1.85; font-size:14px; }
.preview-card { border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,#10161d,#080b0f); padding:24px; display:flex; flex-direction:column; justify-content:flex-end; }
.preview-card span,.preview-card small { color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.12em; }
.preview-card strong { color:var(--accent); font-size:82px; line-height:.9; margin:10px 0; }
.rank-form { display:grid; gap:14px; }
.form-card,.future-card,.error-summary { background:rgba(11,16,21,.96); border:1px solid var(--line); border-radius:18px; padding:20px; }
.card-head { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; margin-bottom:18px; }
.card-head h2,.future-card h2,.error-summary h2 { margin:3px 0 0; font-size:24px; letter-spacing:-.025em; }
.step { width:38px; height:38px; display:grid; place-items:center; border:1px solid #2a3440; border-radius:10px; color:var(--accent); font-weight:950; }
.status { padding:6px 9px; border-radius:999px; border:1px solid #27313b; background:#151b22; color:#84909d; font-size:9px; font-weight:900; letter-spacing:.12em; }
.radio-grid ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.radio-grid.two ul { grid-template-columns:repeat(2, minmax(0,1fr)); }
.radio-grid.three ul { grid-template-columns:repeat(3, minmax(0,1fr)); }
.radio-grid label { display:flex; align-items:center; min-height:42px; padding:10px 12px; border:1px solid #28323d; border-radius:10px; background:#090d12; cursor:pointer; font-size:12px; font-weight:850; }
.radio-grid input,.check-row input { accent-color:var(--accent); margin-right:8px; }
.conditional-block { margin-top:16px; }
.hint { color:var(--accent); font-size:10px; font-weight:900; margin-bottom:8px; }
.phase-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.phase-card,.app-field { border:1px solid #222c36; border-radius:11px; padding:10px; background:#080c11; }
.phase-card > span,.apparatus-title { display:block; color:var(--accent); font-size:9px; font-weight:950; letter-spacing:.12em; margin-bottom:6px; }
.phase-card label,.app-field label,.single-field label,.sub-label { display:block; color:#aeb7c2; font-size:10px; font-weight:850; margin-bottom:6px; }
input[type="number"] { width:100%; min-height:42px; padding:10px 11px; background:#05080c; border:1px solid #29333e; color:#fff; border-radius:9px; outline:none; font-size:14px; }
input[type="number"]:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(242,211,28,.08); }
.mini-note { color:#7d8996; font-size:11px; line-height:1.65; margin:9px 0 0; }
.apparatus-details { margin-top:16px; border-top:1px solid var(--line); }
.apparatus-details summary { min-height:50px; display:flex; justify-content:space-between; align-items:center; list-style:none; cursor:pointer; font-size:12px; font-weight:900; }
.apparatus-details summary::-webkit-details-marker { display:none; }
.apparatus-details[open] summary { color:var(--accent); }
.plus { color:var(--accent); font-size:17px; }
.apparatus-body { padding:3px 0 6px; }
.apparatus-grid { display:grid; gap:8px; }
.apparatus-grid.mag { grid-template-columns:repeat(3, minmax(0,1fr)); }
.apparatus-grid.wag { grid-template-columns:repeat(2, minmax(0,1fr)); }
.day-table { display:grid; gap:7px; }
.day-row { display:grid; grid-template-columns:minmax(90px,1.2fr) 1fr 1fr; gap:8px; align-items:center; padding:7px; border:1px solid #222c36; border-radius:10px; background:#080c11; }
.day-row.head { background:transparent; border:0; color:var(--accent); font-size:9px; font-weight:950; padding-bottom:0; }
.day-row > span:first-child { font-size:11px; font-weight:850; }
.day-row input { min-height:36px; padding:7px 9px; }
.check-row { display:flex; align-items:center; margin:12px 0; font-size:12px; font-weight:850; }
.single-field { margin-top:12px; }
.rule-note { display:flex; flex-wrap:wrap; gap:7px 12px; margin-top:14px; padding:10px 12px; border-left:3px solid var(--accent); background:#080c11; color:#8d98a5; font-size:10px; }
.rule-note strong { color:var(--accent); }
.future-card { background:linear-gradient(135deg, rgba(242,211,28,.07), transparent 45%), #0b1015; }
.future-card p { color:#9da8b4; line-height:1.75; font-size:13px; }
.submit-button { border:0; border-radius:13px; min-height:56px; background:var(--accent); color:#090b0d; font-weight:950; letter-spacing:.07em; cursor:pointer; font-size:14px; }
.legal { color:#6d7986; font-size:10px; text-align:center; line-height:1.7; }
.error-summary { border-color:rgba(255,109,109,.45); border-left:4px solid var(--danger); }
.error-summary ul,.errorlist { color:#ffaaaa; font-size:11px; line-height:1.7; }
.errorlist { list-style:none; padding:5px 0; margin:0; }

/* result */
.result-shell { width:min(900px, calc(100% - 32px)); margin:auto; padding:70px 0 80px; }
.result-hero { padding-bottom:34px; border-bottom:1px solid var(--line); }
.rank-hero-row { display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-top:6px; }
.rank-hero-row .rank-display { margin:0; }
.rank-income-badge { display:flex; flex-direction:column; gap:4px; padding:12px 18px; border:1px solid var(--line); border-radius:14px; background:#0b1015; }
.rank-income-badge .label { color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.1em; }
.rank-income-badge .value { color:var(--accent); font-size:clamp(15px,2vw,21px); font-weight:900; white-space:nowrap; }
.income-disclaimer { color:var(--muted); font-size:9.5px; line-height:1.5; margin-top:2px; white-space:normal; max-width:260px; }
.rank-display { margin:10px 0 0; color:var(--accent); font-size:clamp(70px, 13vw, 145px); line-height:.88; letter-spacing:-.06em; }
.rank-sub { color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.14em; }
.hero-sub-line { margin-top:10px; color:#9da8b4; font-size:12px; line-height:1.6; }
.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.metric-card,.mission-card,.result-note,.next-rank-card { border:1px solid var(--line); background:#0b1015; border-radius:16px; padding:20px; }
.metric-label,.mission-score-label { color:var(--muted); font-size:9px; font-weight:950; letter-spacing:.14em; }
.metric-value { margin-top:14px; font-size:clamp(36px,6vw,62px); font-weight:950; }
.metric-value-inline { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; }
.metric-unit-inline { color:var(--accent); font-size:.34em; }
.next-rank-card { margin-top:20px; }
.next-rank-head { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:16px; }
.next-rank-name { margin-top:8px; font-size:clamp(32px,5vw,48px); font-weight:950; color:var(--accent); line-height:1; }
.next-rank-points { text-align:right; }
.next-rank-points-main { font-size:clamp(28px,4.4vw,40px); font-weight:950; }
.next-rank-note { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); color:#c3cbd3; font-size:13px; line-height:1.8; }
.next-rank-note strong { color:var(--accent); }
.mission-card { margin-top:12px; background:linear-gradient(135deg,rgba(242,211,28,.08),transparent 38%),#0b1015; }
.mission-top { color:var(--accent); font-size:9px; font-weight:950; letter-spacing:.14em; }
.mission-card h2 { font-size:26px; margin:10px 0; }
.mission-lead,.result-note p { color:#9da8b4; font-size:12px; line-height:1.7; }
.mission-score { border-top:1px solid var(--line); margin-top:16px; padding-top:16px; }
.mission-score-main { margin-top:8px; font-size:clamp(28px,5vw,48px); font-weight:950; }
.result-note { margin-top:12px; }
.secondary-link { display:flex; justify-content:center; margin-top:12px; padding:16px; border:1px solid #2b3540; border-radius:12px; color:#fff; text-decoration:none; font-weight:900; background:#111820; }

@media (max-width:760px) {
  .hero { grid-template-columns:1fr; }
  .preview-card { min-height:160px; }
  .radio-grid.three ul { grid-template-columns:1fr; }
  .apparatus-grid.mag,.apparatus-grid.wag { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px) {
  .site-header { min-height:68px; }
  .page-shell { padding-top:30px; }
  .hero h1 { font-size:44px; }
  .card-head { grid-template-columns:auto 1fr; }
  .status { display:none; }
  .radio-grid.two ul,.phase-grid,.result-grid { grid-template-columns:1fr; }
  .apparatus-grid.mag,.apparatus-grid.wag { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .day-row { grid-template-columns:minmax(72px,1fr) 1fr 1fr; gap:5px; }
  .form-card,.future-card { padding:16px; }
}