/* ============================================================
   UnitPrism — Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --primary:        #3B82F6;
  --purple:          #7C3AED;
  --purple-light:    #EDE9FE;
  --primary-dark:   #2563EB;
  --primary-light:  #EFF6FF;
  --accent:         #F59E0B;
  --accent-light:   #FFFBEB;
  --accent-border:  #FDE68A;
  --bg:             #FFFFFF;
  --surface:        #F8FAFC;
  --border:         #E2E8F0;
  --text:           #1E293B;
  --text-2:         #64748B;
  --text-3:         #94A3B8;
  --green:          #10B981;
  --radius:         12px;
  --shadow-sm:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow:         0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.05);
  --shadow-lg:      0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

/* ── HEADER ─────────────────────────────────────────────── */
header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.header-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  gap: 16px;
}

.logo {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.logo span { color: var(--purple); }

nav {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
nav a {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 6px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
nav a:hover { background: var(--surface); color: var(--text); }
nav a.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }

/* ── DROPDOWN NAV ────────────────────────────────────────── */
.nav-group { position: relative; display: inline-flex; }
.nav-trigger {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: background .15s, color .15s;
  user-select: none;
  border: none;
  background: none;
  font-family: inherit;
}
.nav-trigger:hover,
.nav-group:hover .nav-trigger { background: var(--surface); color: var(--text); }
.nav-trigger.active-group { background: var(--primary-light); color: var(--primary); }
.nav-caret { font-size: 0.6rem; opacity: .7; transition: transform .15s; }
.nav-group:hover .nav-caret { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  min-width: 210px;
  padding: 6px;
  display: none;
  z-index: 500;
}
.nav-group:hover .nav-dropdown { display: block; }
.nav-dropdown a {
  display: block;
  padding: 7px 12px;
  font-size: 0.82rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 6px;
  transition: background .12s;
  white-space: nowrap;
}
.nav-dropdown a:hover { background: var(--surface); }
.nav-dropdown a.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.nav-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 5px 6px;
}

/* ── LAYOUT ──────────────────────────────────────────────── */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 36px 24px;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  align-items: start;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── CARDS ───────────────────────────────────────────────── */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

/* ── STANDALONE FACT (homepage) ──────────────────────────── */
.standalone-fact {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 2px solid #FCD34D;
  border-radius: 16px;
  padding: 30px 36px 30px 44px;
  margin-bottom: 40px;
  position: relative;
  box-shadow: 0 4px 20px rgba(245,158,11,.15);
}
.standalone-fact::before {
  content: '"';
  position: absolute;
  top: -8px; left: 18px;
  font-size: 5.5rem;
  color: #FCD34D;
  line-height: 1;
  font-family: Georgia, 'Times New Roman', serif;
  pointer-events: none;
}
.sf-badge {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #B45309;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sf-badge::after {
  content: '— refreshes every visit';
  font-weight: 500;
  letter-spacing: .03em;
  opacity: .7;
}
.sf-text {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #78350F;
  line-height: 1.55;
}

/* ── AD ZONES ────────────────────────────────────────────── */
.ad-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ad-zone.leaderboard  { min-height: 90px;  width: 100%; }
.ad-zone.sidebar-ad   { min-height: 250px; }
.ad-zone.banner       { min-height: 60px;  width: 100%; margin-bottom: 24px; }

/* ── CONVERTER ───────────────────────────────────────────── */
.converter-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.converter-desc {
  color: var(--text-2);
  font-size: 0.9rem;
  margin-bottom: 24px;
}

.input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.input-group { display: flex; flex-direction: column; gap: 5px; }
.input-group.value-group { flex: 1; min-width: 120px; }
.input-group.unit-group  { flex: 1; min-width: 140px; }

.input-group label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.input-group input,
.input-group select {
  padding: 11px 14px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  color: var(--text);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  background: white;
  width: 100%;
  -webkit-appearance: none;
}

.input-group input:focus,
.input-group select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

.input-group input { font-weight: 600; font-size: 1.1rem; }

.swap-btn {
  width: 38px;
  height: 38px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
  margin-bottom: 2px;
}
.swap-btn:hover { background: var(--primary); border-color: var(--primary); color: white; }

/* ── RESULTS ─────────────────────────────────────────────── */
.results {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}

.result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.result-item:hover             { border-color: var(--primary); background: var(--primary-light); }
.result-item.source-unit       { border-color: var(--primary); background: var(--primary-light); }

.result-name  { font-size: 0.85rem; color: var(--text-2); }
.result-right { display: flex; align-items: baseline; gap: 4px; }
.result-value { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.result-sym   { font-size: 0.8rem;  color: var(--text-2); }

/* ── COMPARISON BOX ──────────────────────────────────────── */
.comparison-box {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 2px solid #FCD34D;
  border-left: 5px solid var(--accent);
  border-radius: 10px;
  padding: 16px 20px;
  margin-top: 16px;
  display: none;
  box-shadow: 0 2px 12px rgba(245,158,11,.12);
}
.comparison-box.visible { display: block; }

.comp-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #B45309;
  margin-bottom: 6px;
}
.comp-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: #78350F;
  line-height: 1.55;
}

/* ── UNIT INFO ───────────────────────────────────────────── */
.unit-info {
  margin-top: 20px;
}
.unit-info h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.unit-info p {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.7;
}

/* ── HOMEPAGE HERO ───────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 50%, #1E3A8A 100%);
  border-radius: 16px;
  padding: 22px 36px 20px;
  color: white;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: rgba(255,255,255,.06);
  border-radius: 50%;
}
.hero-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: .65;
  margin-bottom: 6px;
}
.hero h1 {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 5px;
  line-height: 1.2;
}
.hero-tagline {
  font-size: 0.88rem;
  opacity: .78;
  max-width: 540px;
  margin: 0;
}

/* ── CATEGORY GRID ───────────────────────────────────────── */
.section-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px 20px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: all .2s;
  box-shadow: var(--shadow-sm);
}
.category-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.cat-icon { font-size: 2rem; margin-bottom: 10px; }
.cat-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; }
.cat-units { font-size: 0.78rem; color: var(--text-2); }

/* ── FREE TEXT SEARCH ────────────────────────────────────── */
.freetext-wrap {
  margin-bottom: 36px;
}
.freetext-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.freetext-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.freetext-input {
  flex: 1;
  padding: 14px 18px;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
  background: white;
}
.freetext-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.freetext-btn {
  padding: 14px 22px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.freetext-btn:hover { background: var(--primary-dark); }
.freetext-result {
  margin-top: 12px;
  padding: 16px 18px;
  background: var(--primary-light);
  border: 1.5px solid var(--primary);
  border-radius: 10px;
  font-size: 0.92rem;
  color: var(--text);
  display: none;
}
.freetext-result.visible { display: block; }
.freetext-result strong { color: var(--primary-dark); }
.freetext-hint {
  font-size: 0.78rem;
  color: var(--text-3);
  margin-top: 6px;
}
.freetext-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.freetext-example {
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--text-2);
  cursor: pointer;
  font-family: monospace;
  transition: all .12s;
}
.freetext-example:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }

/* ── SIDEBAR FACT CARD ───────────────────────────────────── */
.sidebar-fact-card { border-left: 4px solid var(--accent); }
.sidebar-fact-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #B45309;
  margin-bottom: 8px;
}
.sidebar-fact-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--text);
}

/* ── QUICK LINKS ─────────────────────────────────────────── */
.popular-heading {
  font-size: 1rem;
  font-weight: 600;
  margin: 32px 0 12px;
}
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 6px 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  font-size: 0.82rem;
  color: var(--text-2);
  text-decoration: none;
  transition: all .15s;
}
.chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

/* ── TOAST ───────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--text);
  color: white;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  transition: transform .25s ease;
  z-index: 999;
  pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ── CURRENCY CONVERTER ──────────────────────────────────── */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #065F46;
  background: #D1FAE5;
  border: 1px solid #6EE7B7;
  border-radius: 20px;
  padding: 3px 10px;
  margin-bottom: 20px;
}
.live-badge::before { content: '●'; font-size: .5rem; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.currency-result-card {
  background: var(--primary-light);
  border: 2px solid var(--primary);
  border-radius: 12px;
  padding: 20px 24px;
  margin-top: 16px;
  text-align: center;
}
.currency-result-from {
  font-size: 0.85rem;
  color: var(--text-2);
  margin-bottom: 4px;
}
.currency-result-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: -0.02em;
}
.currency-result-rate {
  font-size: 0.78rem;
  color: var(--text-2);
  margin-top: 6px;
}

.currency-rates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 20px;
}
.currency-rate-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  font-size: 0.88rem;
}
.currency-rate-item:hover { border-color: var(--primary); background: var(--primary-light); }
.currency-rate-item .cri-label { color: var(--text-2); display: flex; align-items: center; gap: 5px; }
.currency-rate-item .cri-value { font-weight: 700; color: var(--text); }

.currency-meta {
  margin-top: 16px;
  font-size: 0.76rem;
  color: var(--text-3);
  text-align: right;
}
.currency-meta a { color: var(--text-2); }

.currency-loading {
  text-align: center;
  padding: 32px;
  color: var(--text-2);
  font-size: .9rem;
}
.currency-error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: .88rem;
  color: #991B1B;
  margin-top: 12px;
}

/* ── CALCULATORS ─────────────────────────────────────────── */
.calc-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
.calc-desc  { font-size: 0.9rem; color: var(--text-2); margin-bottom: 24px; }

.calc-form { display: flex; flex-direction: column; gap: 16px; }
.calc-row { display: flex; gap: 12px; flex-wrap: wrap; }

.calc-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 140px; }
.calc-field label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-2);
}
.calc-field input,
.calc-field select {
  padding: 11px 14px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  color: var(--text);
  font-family: inherit;
  background: white;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.calc-field input:focus,
.calc-field select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.calc-btn {
  padding: 12px 24px;
  background: var(--primary); color: white;
  border: none; border-radius: 8px;
  font-size: 0.95rem; font-weight: 600;
  cursor: pointer; transition: background .15s;
  align-self: flex-end;
}
.calc-btn:hover { background: var(--primary-dark); }

.calc-result {
  margin-top: 20px;
  background: var(--primary-light);
  border: 2px solid var(--primary);
  border-radius: 12px;
  padding: 20px 24px;
  display: none;
}
.calc-result.visible { display: block; }
.calc-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.calc-result-item {
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.calc-result-item .cri-val {
  font-size: 1.4rem; font-weight: 800;
  color: var(--primary-dark); letter-spacing: -0.02em;
}
.calc-result-item .cri-label {
  font-size: 0.75rem; color: var(--text-2); margin-top: 2px;
}
.calc-result-main {
  font-size: 1.8rem; font-weight: 800;
  color: var(--primary-dark); letter-spacing: -0.03em;
  margin-bottom: 4px;
}
.calc-result-sub {
  font-size: 0.9rem; color: var(--text-2); line-height: 1.6;
}
.calc-fun-fact {
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  font-size: 0.9rem;
  color: #78350F;
  font-weight: 500;
}

/* Roman numeral specific */
.roman-display {
  font-size: 3rem; font-weight: 800;
  color: var(--primary-dark); letter-spacing: .05em;
  text-align: center; padding: 16px;
}
.roman-secondary {
  text-align: center; font-size: 0.9rem; color: var(--text-2); margin-top: 4px;
}
/* Calc section on homepage */
.section-divider {
  border: none; border-top: 1px solid var(--border);
  margin: 44px 0 36px;
}

/* ── FOOTER ──────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 28px 24px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-2);
  margin-top: 64px;
}
footer a { color: var(--primary); text-decoration: none; }
footer a:hover { text-decoration: underline; }
.footer-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 10px; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
  .sidebar { display: contents; }
  .sidebar > *:not(.sidebar-ad) { order: 10; }
  .sidebar-ad { order: 5; }
}

@media (max-width: 640px) {
  .hero { padding: 32px 24px 28px; }
  .hero h1 { font-size: 1.8rem; }
  nav { display: none; }
  .container { padding: 24px 16px; }
  .input-row { flex-direction: column; }
  .swap-btn { transform: rotate(90deg); align-self: center; margin-bottom: 0; }
}

/* ── FINANCE / HEALTH CALCULATORS ───────────────────────── */

/* Input prefix/suffix wrappers */
.input-prefix-wrap { position: relative; display: flex; align-items: center; }
.input-prefix-wrap input { padding-left: 28px; width: 100%; }
.input-prefix-wrap input + .input-suffix { position: absolute; right: 10px; font-size: .85rem; color: var(--text-2); pointer-events: none; }
.input-prefix { position: absolute; left: 10px; font-size: .85rem; color: var(--text-2); pointer-events: none; z-index: 1; }
.input-prefix-wrap input:has(+ .input-suffix) { padding-right: 36px; }

/* Two/three column calc grid */
.calc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.calc-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 540px) {
  .calc-grid-2, .calc-grid-3 { grid-template-columns: 1fr; }
}

/* Hint text below input */
.calc-hint { font-size: .78rem; color: var(--text-2); margin-top: 4px; }

/* Finance result hero panel */
.finance-result-hero {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border: 1px solid #BFDBFE;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  margin-bottom: 16px;
}
.frh-label { font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #3B82F6; margin-bottom: 6px; }
.frh-value { font-size: 2.8rem; font-weight: 800; color: #1E3A5F; letter-spacing: -0.03em; line-height: 1; margin-bottom: 6px; }
.frh-sub   { font-size: .85rem; color: var(--text-2); }

/* Finance breakdown grid */
.finance-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}
@media (max-width: 640px) { .finance-breakdown-grid { grid-template-columns: 1fr 1fr; } }
.fbg-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.fbg-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin-bottom: 6px; }
.fbg-value { font-size: 1.1rem; font-weight: 700; color: var(--text); }

/* Donut chart */
.donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.donut-legend { flex: 1; min-width: 160px; }
.donut-leg-item { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: .85rem; }
.donut-leg-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.donut-leg-label { flex: 1; color: var(--text-2); }
.donut-leg-value { font-weight: 700; color: var(--text); }

/* Amortization table */
.amort-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.amort-table th { background: var(--surface); padding: 8px 12px; text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); border-bottom: 2px solid var(--border); }
.amort-table td { padding: 7px 12px; border-bottom: 1px solid var(--border); color: var(--text); }
.amort-table tr:last-child td { border-bottom: none; }
.amort-table tr:hover td { background: var(--surface); }

/* Affiliate CTA block */
.affiliate-cta {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1px solid #FDE68A;
  border-radius: 14px;
  padding: 20px 24px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.aff-icon { font-size: 2rem; flex-shrink: 0; }
.aff-title { font-weight: 700; font-size: 1rem; color: var(--text); margin-bottom: 3px; }
.aff-desc  { font-size: .85rem; color: var(--text-2); }
.aff-btn {
  margin-left: auto; background: var(--primary); color: white;
  padding: 10px 20px; border-radius: 8px; font-size: .9rem; font-weight: 600;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: background .15s;
}
.aff-btn:hover { background: #1D4ED8; }

/* Unit toggle (metric / imperial) */
.unit-toggle-wrap { display: flex; background: var(--surface); border-radius: 10px; padding: 4px; margin-bottom: 20px; border: 1px solid var(--border); width: fit-content; }
.unit-toggle { background: none; border: none; cursor: pointer; padding: 8px 18px; border-radius: 7px; font-size: .88rem; font-weight: 600; color: var(--text-2); transition: all .15s; }
.unit-toggle.active { background: white; color: var(--primary); box-shadow: 0 1px 4px rgba(0,0,0,.12); }

/* Radio labels */
.radio-label { display: flex; align-items: center; gap: 6px; font-size: .9rem; cursor: pointer; }
.radio-label input { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }

/* BMI gauge card */
.bmi-gauge-card { text-align: center; }
.bmi-category-badge {
  display: inline-block; margin: 10px auto 16px;
  padding: 6px 18px; border-radius: 99px; border: 1px solid;
  font-size: .9rem; font-weight: 700;
}
.bmi-gauge-wrap { display: flex; flex-direction: column; align-items: center; }
.bmi-scale-labels { display: flex; justify-content: space-between; width: 100%; max-width: 320px; font-size: .7rem; color: var(--text-2); margin-top: 4px; }

/* Info/warning note */
.info-note {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: .85rem;
  color: var(--text);
  line-height: 1.55;
}

/* Small secondary button */
.calc-btn-sm {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 14px; font-size: .82rem;
  font-weight: 600; cursor: pointer; color: var(--text-2);
  transition: all .15s;
}
.calc-btn-sm:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }

/* Highlight row in reference table */
.bmi-row-highlight td { background: #ECFDF5; font-weight: 600; color: #065F46; }

.section-subtitle { font-size: .92rem; color: var(--text-2); margin: -12px 0 20px; }

/* ── SURPRISE CALCULATOR ─────────────────────────────────── */

/* Header / badge */
.surp-header { text-align:center; padding: 8px 0 24px; }
.surp-badge {
  display:inline-block; background: linear-gradient(135deg,#7C3AED,#EC4899);
  color:white; font-size:.78rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 14px; border-radius:99px; margin-bottom:14px;
}
.surp-title  { font-size:1.7rem; font-weight:800; letter-spacing:-0.03em; margin-bottom:8px; }
.surp-tagline{ font-size:.95rem; color:var(--text-2); font-style:italic; }

/* Input card */
.surp-input-card { margin-bottom:20px; }

/* Result card */
.surp-result-card {
  background: linear-gradient(135deg,#1E1B4B 0%, #312E81 100%);
  border-radius:20px; padding:32px 24px; text-align:center; margin-bottom:16px;
}
.surp-result-number {
  font-size:3rem; font-weight:900; color:#FBBF24; letter-spacing:-0.04em;
  line-height:1; margin-bottom:8px; font-variant-numeric:tabular-nums;
}
.surp-result-unit  { font-size:1rem; color:#C7D2FE; margin-bottom:12px; font-weight:600; }
.surp-live-hint    { font-size:.78rem; color:#818CF8; margin-bottom:10px; }
.surp-result-subline { font-size:.95rem; color:#E0E7FF; line-height:1.6; }

/* Comparison box */
.surp-comparison {
  display:flex; gap:14px; align-items:flex-start;
  background:#FFFBEB; border:1px solid #FDE68A; border-radius:14px;
  padding:18px 20px; margin-bottom:16px;
}
.surp-comp-icon { font-size:2rem; flex-shrink:0; line-height:1; margin-top:2px; }
.surp-comp-text { font-size:.95rem; color:var(--text); line-height:1.65; font-weight:500; }

/* Fact card */
.surp-fact-card {
  background: linear-gradient(135deg,#F0FDF4,#DCFCE7);
  border:1px solid #BBF7D0; border-radius:14px; padding:20px 24px; margin-bottom:16px;
}
.surp-fact-label { font-size:.78rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:#16A34A; margin-bottom:10px; }
.surp-fact-text  { font-size:.92rem; color:#14532D; line-height:1.7; }

/* Share row */
.surp-share-row {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:16px 20px; background:var(--surface); border-radius:12px;
  border:1px solid var(--border);
}
.share-btn {
  padding:8px 18px; border-radius:8px; font-size:.85rem; font-weight:600;
  cursor:pointer; border:none; text-decoration:none; transition:all .15s;
}
.twitter-btn { background:#000; color:#fff; }
.twitter-btn:hover { background:#333; }
.copy-btn { background:var(--primary-light); color:var(--primary); border:1px solid var(--primary); }
.copy-btn:hover { background:var(--primary); color:white; }

/* ── ILLUSTRATIONS ───────────────────────────────────────── */
.surp-illus {
  display:flex; justify-content:center; align-items:center;
  min-height:120px; margin:0 0 20px; position:relative;
  gap:16px; flex-wrap:wrap;
}

/* Heart */
.heart-beat { font-size:4rem; animation:heartbeat 0.8s ease-in-out infinite; }
@keyframes heartbeat { 0%,100%{transform:scale(1)} 14%{transform:scale(1.3)} 28%{transform:scale(1)} 42%{transform:scale(1.2)} 70%{transform:scale(1)} }
.pulse-ring {
  position:absolute; border-radius:50%; border:2px solid #EF4444; opacity:0;
  animation:pulse-out 2s ease-out infinite;
}
.r1{width:60px;height:60px;animation-delay:0s}
.r2{width:90px;height:90px;animation-delay:0.4s}
.r3{width:120px;height:120px;animation-delay:0.8s}
@keyframes pulse-out { 0%{opacity:.6;transform:scale(.5)} 100%{opacity:0;transform:scale(1.5)} }

/* Planet orbit */
.planet-illus { position:relative; width:160px; height:120px; }
.orbit-sun    { position:absolute; font-size:2.5rem; left:50%;top:50%;transform:translate(-50%,-50%); }
.orbit-track  { position:absolute; width:130px; height:130px; left:50%;top:50%;
  transform:translate(-50%,-50%); border-radius:50%; border:1px dashed #D1D5DB;
  animation:orbit 4s linear infinite; }
.orbit-planet { position:absolute; font-size:1.8rem; top:-18px; left:50%; transform:translateX(-50%); }
@keyframes orbit { from{transform:translate(-50%,-50%) rotate(0deg)} to{transform:translate(-50%,-50%) rotate(360deg)} }

/* Sleep */
.sleep-person,.sleep-illus { font-size:3.5rem; animation:float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.zzz { font-size:1.6rem; font-weight:900; color:#818CF8; animation:zfloat 2s ease-in-out infinite; }
.z1{animation-delay:0s} .z2{animation-delay:.5s;font-size:2rem} .z3{animation-delay:1s;font-size:2.5rem}
@keyframes zfloat { 0%{opacity:0;transform:translate(0,10px)} 50%{opacity:1} 100%{opacity:0;transform:translate(10px,-20px)} }

/* Toilet */
.toilet-icon { font-size:3.5rem; }
.toilet-phone { font-size:2rem; animation:tilt 2s ease-in-out infinite; }
@keyframes tilt { 0%,100%{transform:rotate(-10deg)} 50%{transform:rotate(10deg)} }

/* Speech */
.face-icon { font-size:3.5rem; }
.speech-bubble { font-size:1.4rem; background:#DBEAFE; border-radius:12px; padding:6px 12px;
  animation:pop 1.5s ease-in-out infinite; color:#1E40AF; font-weight:700; }
.sb1{animation-delay:0s} .sb2{animation-delay:.5s} .sb3{animation-delay:1s}
@keyframes pop { 0%,100%{transform:scale(.85);opacity:.4} 50%{transform:scale(1);opacity:1} }

/* Eye blink */
.eye-wrap { position:relative; display:inline-block; }
.eye-outer { font-size:4rem; }
.eyelid { position:absolute; top:0; left:0; right:0; height:0; background:#F3F4F6;
  border-radius:0 0 50% 50%; animation:blink 3s ease-in-out infinite; }
@keyframes blink { 0%,90%,100%{height:0} 95%{height:100%} }

/* Hair */
.hair-person { font-size:3rem; }
.hair-grow { width:6px; height:0; background:linear-gradient(#92400E,#D97706);
  border-radius:3px; animation:grow-hair 2s ease-in-out infinite alternate; margin:0 auto; }
@keyframes grow-hair { from{height:0} to{height:80px} }

/* Food spin */
.food-spin { font-size:2.2rem; animation:spin-float 3s ease-in-out infinite; }
.f1{animation-delay:0s} .f2{animation-delay:.75s} .f3{animation-delay:1.5s} .f4{animation-delay:2.25s}
@keyframes spin-float { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-12px) rotate(20deg)} }

/* Dreams */
.dream-moon { font-size:3.5rem; animation:moonrock 4s ease-in-out infinite; }
@keyframes moonrock { 0%,100%{transform:rotate(-10deg)} 50%{transform:rotate(10deg)} }
.dream-bubble { font-size:2.5rem; opacity:0; animation:dreampop 3s ease-in-out infinite; }
.db1{animation-delay:0s} .db2{animation-delay:1.5s}
@keyframes dreampop { 0%{opacity:0;transform:scale(.5) translateY(10px)} 30%{opacity:1;transform:scale(1) translateY(0)} 80%{opacity:.8} 100%{opacity:0;transform:scale(1.2) translateY(-20px)} }

/* Phone */
.phone-body { font-size:3.5rem; }
.phone-tap { font-size:2rem; animation:tap 1s ease-in-out infinite; transform-origin:bottom center; }
@keyframes tap { 0%,100%{transform:translateY(0) rotate(-20deg)} 50%{transform:translateY(-8px) rotate(0deg)} }

/* Sneeze particles */
.sneeze-face { font-size:3.5rem; }
.sneeze-particle { font-size:1.4rem; color:#93C5FD; font-weight:900;
  animation:shoot 1.2s ease-out infinite; }
.sp1{animation-delay:0s} .sp2{animation-delay:.2s} .sp3{animation-delay:.4s} .sp4{animation-delay:.6s}
@keyframes shoot { 0%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:0;transform:translate(60px,-20px) scale(.3)} }

/* Breath waves */
.breath-face { font-size:3.5rem; }
.breath-wave { height:3px; background:linear-gradient(90deg,#93C5FD,transparent);
  border-radius:3px; animation:breathe-wave 2s ease-in-out infinite; margin:4px 0; }
.bw1{width:60px;animation-delay:0s} .bw2{width:40px;animation-delay:.5s}
@keyframes breathe-wave { 0%{width:0;opacity:0} 50%{opacity:1} 100%{width:80px;opacity:0} }

/* Money */
.money-spin { font-size:2.5rem; animation:money-fly 2s ease-in-out infinite; }
.m1{animation-delay:0s} .m2{animation-delay:.6s} .m3{animation-delay:1.2s}
@keyframes money-fly { 0%{transform:translateY(10px) rotate(0)} 50%{transform:translateY(-10px) rotate(15deg)} 100%{transform:translateY(10px) rotate(0)} }

/* Steps */
.foot-l,.foot-r { font-size:2.5rem; animation:step-walk 1s ease-in-out infinite alternate; }
.foot-r { animation-delay:.5s; }
@keyframes step-walk { from{transform:translateY(0)} to{transform:translateY(-14px)} }

/* Cells */
.cell-wrap { display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; }
.cell { font-size:1.8rem; color:#6D28D9; animation:cell-pulse 2s ease-in-out infinite; }
.c1{animation-delay:0s} .c2{animation-delay:.3s} .c3{animation-delay:.6s}
.c4{animation-delay:.9s} .c5{animation-delay:1.2s} .c6{animation-delay:1.5s}
@keyframes cell-pulse { 0%,100%{opacity:.4;transform:scale(.8)} 50%{opacity:1;transform:scale(1)} }

/* Laugh */
.laugh-face { font-size:4rem; animation:shake-laugh .5s ease-in-out infinite alternate; }
@keyframes shake-laugh { from{transform:rotate(-5deg) scale(1)} to{transform:rotate(5deg) scale(1.1)} }

/* Wait */
.wait-person { font-size:3rem; }
.wait-clock { font-size:2.5rem; animation:tick 1s steps(2) infinite; }
@keyframes tick { from{transform:rotate(0)} to{transform:rotate(30deg)} }

/* Birthday */
.bday-cake { font-size:3.5rem; animation:bounce 1s ease-in-out infinite alternate; }
@keyframes bounce { from{transform:translateY(0)} to{transform:translateY(-10px)} }
.confetti { font-size:1.8rem; animation:confetti-fly 2s ease-in-out infinite; }
.cf1{animation-delay:0s} .cf2{animation-delay:.7s} .cf3{animation-delay:1.4s}
@keyframes confetti-fly { 0%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-20px) rotate(180deg)} 100%{transform:translateY(0) rotate(360deg)} }

/* Coffee */
.coffee-cup { font-size:3.5rem; }
.steam { width:3px; height:0; background:linear-gradient(#D1D5DB,transparent);
  border-radius:3px; animation:steam-rise 2s ease-in-out infinite; margin:0 3px; }
.s1{animation-delay:0s;height:20px} .s2{animation-delay:.5s;height:30px} .s3{animation-delay:1s;height:25px}
@keyframes steam-rise { 0%{opacity:0;transform:translateY(0) scaleX(1)} 50%{opacity:.8;transform:translateY(-15px) scaleX(2)} 100%{opacity:0;transform:translateY(-30px) scaleX(.5)} }

/* ── AI IMAGE CARD ───────────────────────────────────────── */
.ai-image-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
}
.ai-image-label {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.ai-badge {
  background: linear-gradient(135deg, #7C3AED, #EC4899);
  color: white; font-size: .72rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 99px;
}
.ai-label-text { font-size: .82rem; color: var(--text-2); }

.ai-image-wrap { position: relative; min-height: 220px; background: #0F0F1A; }

/* Skeleton loader */
.ai-skeleton {
  position: relative; overflow: hidden;
  min-height: 220px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%);
}
.ai-skeleton-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.ai-loading-text {
  display: flex; align-items: center; gap: 10px;
  color: #C7D2FE; font-size: .9rem; font-weight: 500; z-index: 1;
}
.ai-spinner {
  width: 20px; height: 20px; border: 2px solid #4338CA;
  border-top-color: #A78BFA; border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.ai-image-actions {
  display: flex; gap: 10px; padding: 12px 16px;
  border-top: 1px solid var(--border); flex-wrap: wrap;
}

/* ── LOGO IMAGE ──────────────────────────────────────────── */
.logo-img-link { display:flex; align-items:center; text-decoration:none; }
.logo-img { height: 42px; width: auto; display:block; }

@media (max-width: 640px) {
  .logo-img { height: 34px; }
}