/* ── Skip Link ── */
.skip-link { position: absolute; top: -100px; left: 16px; background: #f97316; color: #fff; padding: 10px 20px; border-radius: 0 0 8px 8px; z-index: 1000; font-size: 14px; font-weight: 500; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 0; }

/* ── Back to Top ── */
.back-to-top { position: fixed; bottom: 24px; right: 24px; z-index: 99; width: 44px; height: 44px; border-radius: 50%; background: #f97316; color: #fff; border: none; font-size: 20px; cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s; box-shadow: 0 2px 12px rgba(249,115,22,0.3); }
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: #ea580c; transform: translateY(-2px); }

/* === Design Tokens === */
:root {
  --bg: #18181b;
  --bg-card: #27272a;
  --bg-input: #18181b;
  --bg-result: #1a1a1e;
  --text: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --border: #3f3f46;
  --border-light: #27272a;
  --accent: #f97316;
  --accent-hover: #ea580c;
  --accent-light: rgba(249, 115, 22, .12);
  --green: #22c55e;
  --yellow: #eab308;
  --red: #ef4444;
  --blue: #3b82f6;
  --radius: 12px;
  --radius-sm: 8px;
  --transition: .2s ease;
  --shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* === Reset & Base === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--accent-hover)}
::selection{background:var(--accent);color:#fff}

/* === Skip Link === */
.skip-link{position:absolute;top:-100px;left:16px;background:var(--accent);color:#fff;padding:8px 16px;border-radius:0 0 var(--radius-sm) var(--radius-sm);z-index:1000;font-weight:600;transition:top var(--transition)}
.skip-link:focus{top:0}

/* === Container === */
.container{max-width:960px;margin:0 auto;padding:32px 20px 48px;flex:1}

/* === Header === */
header{text-align:center;margin-bottom:36px}
h1{font-size:2.4rem;color:var(--accent);font-weight:800;letter-spacing:-.02em}
.subtitle{color:var(--text-secondary);font-size:1.05rem;margin-top:6px}

/* === Navigation === */
.tool-nav{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:36px}
.tool-nav a{color:var(--text-secondary);text-decoration:none;padding:7px 18px;border-radius:20px;border:1px solid var(--border);font-size:.9rem;font-weight:500;transition:all var(--transition)}
.tool-nav a:hover,.tool-nav a:focus-visible{background:var(--accent-light);color:var(--accent);border-color:var(--accent);outline:none}

/* === Calculator Section === */
.calc-section{background:var(--bg-card);border-radius:var(--radius);padding:28px;margin-bottom:24px;border:1px solid var(--border);transition:border-color var(--transition),box-shadow var(--transition)}
.calc-section:hover{border-color:var(--accent);box-shadow:0 4px 20px rgba(249,115,22,.08)}
.calc-section h2{font-size:1.25rem;color:var(--accent);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}

/* === Calculator Grid === */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:768px){.calc-grid{grid-template-columns:1fr;gap:20px}}

/* === Input Area === */
.calc-inputs label{display:block;margin-bottom:14px;font-size:.88rem;color:var(--text-secondary);font-weight:500}
.calc-inputs input,.calc-inputs select{width:100%;padding:11px 14px;margin-top:4px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);color:var(--text);font-size:.95rem;font-family:inherit;transition:border-color var(--transition),box-shadow var(--transition);appearance:none}
.calc-inputs input:focus,.calc-inputs select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
.calc-inputs input.invalid{border-color:var(--red);box-shadow:0 0 0 3px rgba(239,68,68,.12)}
.calc-inputs .error-msg{color:var(--red);font-size:.78rem;margin-top:2px;display:none}
.calc-inputs .error-msg.show{display:block}

/* === Button === */
.btn-calc{padding:11px 32px;font-size:.95rem;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;transition:all var(--transition);position:relative;overflow:hidden}
.btn-calc:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px rgba(249,115,22,.3)}
.btn-calc:active{transform:translateY(0);box-shadow:none}
.btn-calc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* === Results Area === */
.calc-results{display:flex;flex-direction:column;justify-content:center;background:var(--bg-result);border-radius:var(--radius-sm);padding:24px;gap:14px;border:1px solid var(--border-light);transition:all .3s ease}
.result-row{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--border-light);color:var(--text-secondary);font-size:.9rem}
.result-row strong{font-size:1.35rem;color:var(--text);transition:color .3s ease,transform .2s ease}
.result-row.pulse strong{animation:valuePulse .4s ease}
@keyframes valuePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* BMI Visual Gauge */
.bmi-gauge-wrap{margin-top:4px}
.bmi-gauge{height:8px;border-radius:4px;background:linear-gradient(to right,var(--blue),var(--green),var(--yellow),var(--accent),var(--red));position:relative;margin-bottom:4px}
.bmi-gauge-indicator{position:absolute;top:-5px;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--accent);transform:translateX(-50%);transition:left .5s ease;box-shadow:0 0 8px rgba(0,0,0,.4);z-index:1}
.bmi-labels{display:flex;justify-content:space-between;font-size:.65rem;color:var(--text-muted);padding:0 2px}

/* === Footer === */
.site-footer{text-align:center;padding:28px 20px;border-top:1px solid var(--border);margin-top:48px}
.footer-links{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.footer-links a{color:var(--text-secondary);font-size:.88rem;font-weight:500;transition:color var(--transition)}
.footer-links a:hover{color:var(--accent)}
.footer-copy{color:var(--text-muted);font-size:.8rem}

/* === Responsive === */
@media(max-width:640px){
  h1{font-size:1.8rem}
  .container{padding:24px 16px 36px}
  .calc-section{padding:20px}
  .result-row strong{font-size:1.15rem}
}

/* === Focus === */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* === Print === */
@media print{
  body{background:#fff;color:#000}
  .tool-nav,.btn-calc,.site-footer{display:none}
}