/*!
 * GO Tools — Unified Design System
 * One stylesheet powers the homepage and every tool page.
 * Mobile-first, responsive, light + dark theme via [data-theme].
 */

/* ============================= */
/* 1. Design Tokens              */
/* ============================= */
:root{
  /* Brand */
  --brand-50:#eff6ff; --brand-100:#dbeafe; --brand-200:#bfdbfe; --brand-300:#93c5fd;
  --brand-400:#60a5fa; --brand-500:#3b82f6; --brand-600:#2563eb; --brand-700:#1d4ed8;
  --brand-800:#1e40af; --brand-900:#1e3a8a;
  --accent-500:#22d3ee; --accent-600:#06b6d4;

  --success-500:#22c55e; --success-600:#16a34a; --success-bg:#ecfdf5; --success-fg:#059669;
  --warning-500:#f59e0b; --warning-600:#d97706; --warning-bg:#fffbeb; --warning-fg:#b45309;
  --danger-500:#ef4444;  --danger-600:#dc2626;  --danger-bg:#fef2f2;  --danger-fg:#dc2626;
  --info-500:#3b82f6;    --info-bg:#eff6ff;     --info-fg:#1d4ed8;

  /* Typography */
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --fs-xs: 0.75rem;    --fs-sm: 0.875rem;  --fs-base: 1rem;
  --fs-md: 1.125rem;   --fs-lg: 1.25rem;   --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;  --fs-3xl: 2.25rem;  --fs-4xl: 2.75rem;

  /* Spacing scale */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem;

  /* Radii + shadows */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);
  --shadow-md: 0 6px 16px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.06);
  --shadow-lg: 0 16px 40px rgba(15,23,42,.16), 0 4px 12px rgba(15,23,42,.08);
  --shadow-glow: 0 0 0 4px rgba(59,130,246,.15);

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur-fast: .15s;
  --dur-base: .25s;
  --dur-slow: .45s;

  /* Layout */
  --container-w: 1180px;
  --header-h: 68px;

  color-scheme: light;
}

/* ---- Dark theme (default) ---- */
:root,
[data-theme="dark"]{
  --bg: #0b1120;
  --bg-elevated: #111827;
  --bg-elevated-2: #161f32;
  --surface: #1a2438;
  --surface-hover: #212c44;
  --border: #263148;
  --border-soft: #1c273b;
  --text: #f8fafc;
  --text-muted: #94a3b8;
  --text-faint: #64748b;
  --input-bg: #101929;
  color-scheme: dark;
}

/* ---- Light theme ---- */
[data-theme="light"]{
  --bg: #f4f6fb;
  --bg-elevated: #ffffff;
  --bg-elevated-2: #f8fafc;
  --surface: #ffffff;
  --surface-hover: #f1f5fb;
  --border: #e2e8f0;
  --border-soft: #edf1f7;
  --text: #0f172a;
  --text-muted: #55617a;
  --text-faint: #8593ac;
  --input-bg: #ffffff;
  color-scheme: light;
}

/* ============================= */
/* 2. Reset                      */
/* ============================= */
*, *::before, *::after{ box-sizing: border-box; }
*{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html, body{ height:100%; }
body{
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
img, svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration:none; }
button, input, select, textarea{ font: inherit; color: inherit; }
button{ cursor:pointer; background:none; border:none; }
ul{ list-style:none; }
h1,h2,h3,h4{ line-height:1.2; font-weight:700; letter-spacing:-0.01em; }
table{ border-collapse: collapse; width:100%; }

::selection{ background: var(--brand-500); color:#fff; }

/* Focus visibility (accessible, mobile-first friendly) */
:focus-visible{ outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 4px; }
a:focus-visible, button:focus-visible{ outline-offset: 3px; }

/* Scrollbar (webkit) */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover{ background: var(--text-faint); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ============================= */
/* 3. Layout primitives          */
/* ============================= */
.container{
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.main{
  flex: 1 0 auto;
  width: 100%;
}
.section{ padding-block: var(--sp-10); }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.skip-link{
  position:absolute; left:var(--sp-4); top:-60px; z-index:200;
  background: var(--brand-600); color:#fff; padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm); transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top: var(--sp-4); }

/* ============================= */
/* 4. Header / Navigation        */
/* ============================= */
.site-header{
  position: sticky; top:0; z-index:100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border-soft);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  min-height: var(--header-h);
  gap: var(--sp-4);
}
.brand{
  display:flex; align-items:center; gap: var(--sp-2);
  font-weight:800; font-size: var(--fs-lg); color: var(--text);
  flex-shrink: 0;
}
.brand-mark{
  width:36px; height:36px; border-radius:10px;
  background: linear-gradient(155deg, var(--brand-500), var(--brand-700));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size: .95rem; letter-spacing:-.03em;
  box-shadow: 0 4px 10px rgba(37,99,235,.35);
}
.brand-text .accent{ color: var(--brand-500); }

.nav-primary{
  display:flex; align-items:center; gap: var(--sp-1);
  flex-wrap: wrap;
}
.nav-primary a{
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight:600;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.nav-primary a:hover{ background: var(--surface-hover); color: var(--text); }
.nav-primary a.is-active{ background: var(--brand-600); color:#fff; }

.header-actions{ display:flex; align-items:center; gap: var(--sp-2); }

.icon-btn{
  width:40px; height:40px; border-radius: var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  background: var(--surface); border:1px solid var(--border);
  color: var(--text-muted);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  flex-shrink:0;
}
.icon-btn:hover{ color: var(--text); border-color: var(--brand-500); background: var(--surface-hover); }
.icon-btn:active{ transform: scale(.94); }
.icon-btn svg{ width:19px; height:19px; }

.theme-toggle .sun{ display:none; }
.theme-toggle .moon{ display:block; }
[data-theme="light"] .theme-toggle .sun{ display:block; }
[data-theme="light"] .theme-toggle .moon{ display:none; }

.nav-toggle{ display:none; }

/* Mobile nav */
@media (max-width: 860px){
  .nav-primary{
    position:fixed; inset: var(--header-h) 0 0 0;
    background: var(--bg);
    flex-direction:column; align-items:stretch;
    padding: var(--sp-4) var(--sp-5) var(--sp-8);
    gap: var(--sp-1);
    transform: translateY(-8px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility var(--dur-base);
    overflow-y:auto;
    border-top: 1px solid var(--border-soft);
  }
  .nav-primary.is-open{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  }
  .nav-primary a{
    padding: var(--sp-4); font-size: var(--fs-md); border-radius: var(--radius-md);
    border-bottom: 1px solid var(--border-soft);
  }
  .nav-toggle{
    display:flex; width:40px; height:40px; border-radius: var(--radius-md);
    align-items:center; justify-content:center; background: var(--surface);
    border:1px solid var(--border); color: var(--text);
  }
  .nav-toggle svg{ width:20px; height:20px; }
  .nav-toggle .icon-close{ display:none; }
  .nav-toggle.is-open .icon-open{ display:none; }
  .nav-toggle.is-open .icon-close{ display:block; }
  body.nav-open{ overflow:hidden; }
}

/* ============================= */
/* 5. Hero                       */
/* ============================= */
.hero{
  text-align:center;
  padding-block: var(--sp-12) var(--sp-10);
  position: relative;
  overflow: hidden;
}
.hero::before{
  content:"";
  position:absolute; inset: -20% -10% auto -10%; height: 420px;
  background:
    radial-gradient(420px 220px at 20% 20%, color-mix(in srgb, var(--brand-500) 28%, transparent), transparent 70%),
    radial-gradient(420px 220px at 80% 10%, color-mix(in srgb, var(--accent-500) 22%, transparent), transparent 70%);
  pointer-events:none; z-index:-1;
  filter: blur(10px);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.4em;
  font-size: var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--brand-500);
  background: color-mix(in srgb, var(--brand-500) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-500) 30%, transparent);
  padding: .4em .9em; border-radius: var(--radius-full);
  margin-bottom: var(--sp-4);
}
.hero h1{
  font-size: clamp(2rem, 5.4vw, var(--fs-4xl));
  margin-bottom: var(--sp-4);
}
.hero h1 .accent{
  background: linear-gradient(100deg, var(--brand-400), var(--accent-500));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lede{
  color: var(--text-muted);
  font-size: var(--fs-md);
  max-width: 640px; margin-inline:auto;
}
.hero-stats{
  display:flex; justify-content:center; flex-wrap:wrap; gap: var(--sp-8);
  margin-top: var(--sp-8);
}
.hero-stat{ text-align:center; }
.hero-stat strong{ display:block; font-size: var(--fs-2xl); color: var(--text); }
.hero-stat span{ font-size: var(--fs-xs); color: var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }

.search-box{
  max-width: 460px; margin: var(--sp-8) auto 0;
  position: relative;
}
.search-box input{
  width:100%; padding: .9rem 1.1rem .9rem 2.7rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.search-box input:focus{ border-color: var(--brand-500); box-shadow: var(--shadow-glow); outline:none; }
.search-box svg{
  position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color: var(--text-faint);
}

/* ============================= */
/* 6. Breadcrumb / back nav       */
/* ============================= */
.breadcrumb{
  display:flex; align-items:center; gap: var(--sp-2);
  padding-block: var(--sp-5) var(--sp-2);
  font-size: var(--fs-sm); color: var(--text-muted);
  flex-wrap: wrap;
}
.breadcrumb a{ color: var(--text-muted); font-weight:600; transition: color var(--dur-fast) var(--ease); }
.breadcrumb a:hover{ color: var(--brand-500); }
.breadcrumb .sep{ color: var(--text-faint); }
.breadcrumb .current{ color: var(--text); font-weight:600; }

.back-btn{
  display:inline-flex; align-items:center; gap:.4em;
  font-weight:600; font-size: var(--fs-sm);
  color: var(--text-muted);
  padding: .55em 1em; border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: all var(--dur-fast) var(--ease);
}
.back-btn:hover{ color:#fff; background: var(--brand-600); border-color: var(--brand-600); transform: translateX(-2px); }
.back-btn svg{ width:16px; height:16px; }

/* ============================= */
/* 7. Tool grid + cards           */
/* ============================= */
.tool-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: var(--sp-5);
}
.tool-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display:flex; flex-direction:column;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
  position: relative;
  overflow: hidden;
}
.tool-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--brand-500) 0%, transparent), color-mix(in srgb, var(--brand-500) 0%, transparent));
  opacity:0; transition: opacity var(--dur-base) var(--ease);
  pointer-events:none;
}
.tool-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--brand-500) 55%, var(--border));
}
.tool-card-icon{
  width:52px; height:52px; border-radius: var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(155deg, color-mix(in srgb, var(--brand-500) 22%, var(--surface)), color-mix(in srgb, var(--accent-500) 14%, var(--surface)));
  color: var(--brand-500);
  margin-bottom: var(--sp-4);
}
.tool-card-icon svg{ width:26px; height:26px; }
.tool-card h3{ font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.tool-card .tool-description{ color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-5); flex-grow:1; }
.tool-card .tool-link{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  background: var(--brand-600); color:#fff; font-weight:600; font-size: var(--fs-sm);
  padding: .75em 1.2em; border-radius: var(--radius-md);
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.tool-card .tool-link:hover{ background: var(--brand-700); transform: translateX(2px); }
.tool-card .tool-link svg{ width:15px; height:15px; transition: transform var(--dur-fast) var(--ease); }
.tool-card .tool-link:hover svg{ transform: translateX(3px); }

.badge{
  display:inline-flex; align-items:center; gap:.35em;
  padding: .3em .8em; border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  margin-bottom: var(--sp-3); width:fit-content;
}
.badge-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-ready{ background: var(--success-bg); color: var(--success-fg); }
.badge-soon{ background: var(--warning-bg); color: var(--warning-fg); }

/* ============================= */
/* 8. Buttons                     */
/* ============================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding: .8em 1.5em;
  border-radius: var(--radius-md);
  font-weight:600; font-size: var(--fs-sm);
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  width: 100%;
}
.btn:active{ transform: scale(.98); }
.btn-primary{ background: var(--brand-600); color:#fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background: var(--brand-700); }
.btn-success{ background: var(--success-600); color:#fff; }
.btn-success:hover{ background:#15803d; }
.btn-danger{ background: var(--danger-600); color:#fff; }
.btn-danger:hover{ background:#b91c1c; }
.btn-ghost{ background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-ghost:hover{ background: var(--surface-hover); border-color: var(--brand-500); }
.btn-block{ width:100%; }
.btn-sm{ width:auto; padding:.55em 1em; font-size: var(--fs-xs); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

/* Calculator keypad buttons */
.keypad{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-2); }
.key{
  padding: var(--sp-4) 0; border-radius: var(--radius-md);
  background: var(--surface-hover); color: var(--text);
  font-size: var(--fs-lg); font-weight:600;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  border: 1px solid var(--border-soft);
}
.key:hover{ background: var(--border); }
.key:active{ transform: scale(.95); }
.key-operator{ background: color-mix(in srgb, var(--warning-500) 16%, var(--surface)); color: var(--warning-fg); }
.key-operator:hover{ background: color-mix(in srgb, var(--warning-500) 28%, var(--surface)); }
.key-equals{ background: var(--brand-600); color:#fff; }
.key-equals:hover{ background: var(--brand-700); }
.key-clear{ background: color-mix(in srgb, var(--danger-500) 16%, var(--surface)); color: var(--danger-fg); }
.key-clear:hover{ background: color-mix(in srgb, var(--danger-500) 28%, var(--surface)); }

/* ============================= */
/* 9. Cards / panels               */
/* ============================= */
.panel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.panel + .panel{ margin-top: var(--sp-4); }
.panel-title{
  font-size: var(--fs-sm); font-weight:700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing:.04em;
  margin-bottom: var(--sp-4);
}
.tool-layout{
  display:grid; grid-template-columns: 1fr; gap: var(--sp-5);
  align-items:start;
}
@media (min-width: 760px){
  .tool-layout.two-col{ grid-template-columns: 1fr 1fr; }
}
.tool-shell{ max-width: 640px; margin-inline:auto; }
.tool-shell.wide{ max-width: 960px; }

.result-value{ font-size: var(--fs-2xl); font-weight:800; color: var(--brand-500); margin-bottom: var(--sp-2); }
.result-value.lg{ font-size: var(--fs-3xl); }
.result-sub{ color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.breakdown-item, .summary-row{
  display:flex; justify-content:space-between; align-items:center;
  padding: var(--sp-2) 0; font-size: var(--fs-sm); color: var(--text-muted);
  border-bottom: 1px dashed var(--border-soft);
}
.breakdown-item:last-child, .summary-row:last-child{ border-bottom:none; }
.summary-row .value{ font-weight:700; color: var(--text); }
.summary-row.total{
  font-size: var(--fs-lg); font-weight:800; color: var(--text);
  border-top: 2px solid var(--border); border-bottom:none;
  margin-top: var(--sp-2); padding-top: var(--sp-4);
}

/* ============================= */
/* 10. Forms                      */
/* ============================= */
.field{ margin-bottom: var(--sp-5); }
.field label{
  display:block; margin-bottom: var(--sp-2);
  font-weight:600; font-size: var(--fs-sm); color: var(--text-muted);
}
.field-row{ display:flex; gap: var(--sp-3); }
.field-row .field{ flex:1; }
.input, select.input{
  width:100%; padding: .8em 1em;
  background: var(--input-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input:focus, select.input:focus{ border-color: var(--brand-500); box-shadow: var(--shadow-glow); outline:none; }
.input::placeholder{ color: var(--text-faint); }
select.input{ appearance:none; -webkit-appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right .8em center; padding-right: 2.4em;
}
input[type="range"]{
  -webkit-appearance:none; width:100%; height:6px; border-radius:999px;
  background: var(--border); margin: var(--sp-3) 0; accent-color: var(--brand-500);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background: var(--brand-500); cursor:pointer; border:3px solid var(--bg);
  box-shadow:0 0 0 1px var(--brand-500);
}
.range-values{ display:flex; justify-content:space-between; font-size: var(--fs-xs); color: var(--text-faint); }
.field-error{
  color: var(--danger-fg); font-size: var(--fs-xs); margin-top: var(--sp-2); display:none;
}
.field-error.is-visible{ display:block; }
.field-hint{ font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--sp-2); }

.unit-toggle, .tabs{ display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.unit-toggle{ background: var(--bg-elevated-2); padding: var(--sp-1); border-radius: var(--radius-full); border: 1px solid var(--border-soft); display:inline-flex; }
.unit-toggle .seg{
  padding: .55em 1.3em; border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight:600;
  color: var(--text-muted); transition: all var(--dur-fast) var(--ease);
}
.unit-toggle .seg.active{ background: var(--brand-600); color:#fff; }
.chip{
  border: 1px solid var(--border); background: var(--surface);
  padding: .5em 1em; border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight:600; color: var(--text-muted);
  transition: all var(--dur-fast) var(--ease);
}
.chip:hover{ background: var(--brand-600); color:#fff; border-color: var(--brand-600); }
.chip.active{ background: var(--brand-600); color:#fff; border-color: var(--brand-600); }

.swap-btn{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background: var(--surface-hover); border: 1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition: all var(--dur-base) var(--ease); color: var(--text);
}
.swap-btn:hover{ background: var(--brand-600); color:#fff; border-color: var(--brand-600); transform: rotate(180deg); }
.swap-btn svg{ width:19px; height:19px; }

.divider{ height:1px; background: var(--border-soft); margin: var(--sp-6) 0; border:none; }

table.data-table{ font-size: var(--fs-sm); }
table.data-table td{ padding: var(--sp-2) var(--sp-1); border-bottom: 1px solid var(--border-soft); color: var(--text-muted); }
table.data-table td:last-child{ text-align:right; font-weight:700; color: var(--text); }

.status-banner{
  font-size: var(--fs-xs); font-weight:600; padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md); margin-bottom: var(--sp-5); text-align:center; display:none;
}
.status-banner.show{ display:block; }
.status-live{ background: var(--success-bg); color: var(--success-fg); }
.status-offline{ background: var(--warning-bg); color: var(--warning-fg); }

/* Category / bmi color badges */
.pill-underweight{ background:#3498db; color:#fff; }
.pill-normal{ background: var(--success-500); color:#fff; }
.pill-overweight{ background: var(--warning-500); color:#fff; }
.pill-obese{ background: var(--danger-500); color:#fff; }
.pill{ display:inline-block; padding:.4em 1em; border-radius: var(--radius-full); font-weight:700; font-size: var(--fs-sm); margin-bottom: var(--sp-4); }

/* ============================= */
/* 11. Countdown-specific         */
/* ============================= */
.countdown-card{ position:relative; }
.countdown-card.expired{ background: var(--danger-bg); }
.countdown-title{ font-size: var(--fs-md); font-weight:700; padding-right: var(--sp-8); margin-bottom: var(--sp-1); }
.countdown-target{ font-size: var(--fs-xs); color: var(--text-faint); margin-bottom: var(--sp-4); }
.countdown-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-2); }
.countdown-unit{ background: var(--bg-elevated-2); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-1); text-align:center; }
.countdown-unit .num{ font-size: var(--fs-xl); font-weight:800; color: var(--brand-500); font-variant-numeric: tabular-nums; }
.countdown-unit .lbl{ font-size: 10px; color: var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }
.expired-msg{ text-align:center; font-weight:700; color: var(--danger-fg); padding: var(--sp-4) 0; }
.delete-btn{
  position:absolute; top: var(--sp-4); right: var(--sp-4);
  color: var(--text-faint); font-size: var(--fs-lg); line-height:1;
}
.delete-btn:hover{ color: var(--danger-fg); }
.empty-state{ text-align:center; color: var(--text-faint); padding: var(--sp-8) 0; font-size: var(--fs-sm); }

/* discount rows */
.discount-row{ display:flex; gap: var(--sp-2); margin-bottom: var(--sp-3); align-items:center; }
.discount-row .input{ flex:1; }
.remove-discount{ width:34px; height:34px; border-radius:50%; color: var(--text-faint); font-size:1.2rem; flex-shrink:0; }
.remove-discount:hover{ color: var(--danger-fg); background: var(--danger-bg); }
.discounts-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--sp-3); }
.discounts-header label{ margin-bottom:0; }
.savings-highlight{ text-align:center; margin: var(--sp-4) 0; }
.savings-badge{ display:inline-block; background: var(--success-bg); color: var(--success-fg); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-full); font-weight:700; font-size: var(--fs-sm); }

/* BMI chart bar */
.bmi-chart{ display:flex; border-radius: var(--radius-md); overflow:hidden; height:38px; margin-top: var(--sp-5); }
.chart-segment{ display:flex; align-items:center; justify-content:center; color:#fff; font-size: var(--fs-xs); font-weight:700; }
.segment-marker{ position:relative; height:0; }
.marker{ position:absolute; width:4px; height:14px; background: var(--text); top:-14px; transform:translateX(-50%); border-radius:2px; }

/* EMI payment chart */
.chart-container{ height:180px; position:relative; margin-top: var(--sp-3); }
.chart{ display:flex; height:100%; align-items:flex-end; gap:4px; }
.chart-bar{ flex:1; border-radius: 6px 6px 0 0; transition: height var(--dur-slow) var(--ease); min-height:4px; }
.principal-bar{ background: var(--brand-500); }
.interest-bar{ background: var(--danger-500); }
.chart-legend{ display:flex; justify-content:center; gap: var(--sp-5); margin-top: var(--sp-3); flex-wrap:wrap; }
.legend-item{ display:flex; align-items:center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); }
.legend-color{ width:11px; height:11px; border-radius:3px; }

/* Age calc live */
.live-counter{ color: var(--accent-500); font-weight:700; font-variant-numeric: tabular-nums; }
.result-item{ display:flex; justify-content:space-between; padding: var(--sp-2) 0; border-bottom:1px dashed var(--border-soft); font-size: var(--fs-sm); }
.result-item:last-child{ border-bottom:none; }
.result-label{ font-weight:600; color: var(--text-muted); }

/* ============================= */
/* 12. Info / content sections    */
/* ============================= */
.info-section h2{ font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
.info-section p{ color: var(--text-muted); margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.faq-item{ border-bottom: 1px solid var(--border-soft); padding-block: var(--sp-4); }
.faq-item h3{ font-size: var(--fs-base); margin-bottom: var(--sp-2); }
.faq-item p{ color: var(--text-muted); font-size: var(--fs-sm); margin:0; }

.related-tools{ margin-top: var(--sp-10); }
.related-tools h2{ font-size: var(--fs-lg); margin-bottom: var(--sp-4); }

/* ============================= */
/* 13. Footer                     */
/* ============================= */
.site-footer{
  border-top: 1px solid var(--border-soft);
  margin-top: var(--sp-16);
  padding-block: var(--sp-10) var(--sp-8);
  background: var(--bg-elevated);
}
.footer-grid{
  display:grid; gap: var(--sp-8);
  grid-template-columns: 1.4fr 1fr 1fr;
}
.footer-brand p{ color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--sp-3); max-width:320px; }
.footer-col h4{ font-size: var(--fs-sm); text-transform:uppercase; letter-spacing:.04em; color: var(--text-faint); margin-bottom: var(--sp-3); }
.footer-col ul{ display:flex; flex-direction:column; gap: var(--sp-2); }
.footer-col a{ color: var(--text-muted); font-size: var(--fs-sm); transition: color var(--dur-fast) var(--ease); }
.footer-col a:hover{ color: var(--brand-500); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: var(--sp-3);
  margin-top: var(--sp-8); padding-top: var(--sp-6);
  border-top: 1px solid var(--border-soft);
  color: var(--text-faint); font-size: var(--fs-xs);
}
.footer-bottom .socials{ display:flex; gap: var(--sp-3); }

@media (max-width: 760px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }
}
@media (max-width: 480px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* ============================= */
/* 14. Install / offline banners  */
/* ============================= */
.install-banner{
  position:fixed; left:50%; bottom: var(--sp-4); transform: translateX(-50%) translateY(120%);
  width: calc(100% - 2rem); max-width:420px;
  background: var(--surface); border:1px solid var(--border); box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg); padding: var(--sp-4);
  display:flex; align-items:center; gap: var(--sp-3);
  z-index:150; transition: transform var(--dur-slow) var(--ease);
}
.install-banner.is-visible{ transform: translateX(-50%) translateY(0); }
.install-banner img{ width:42px; height:42px; border-radius:10px; flex-shrink:0; }
.install-banner .msg{ flex:1; font-size: var(--fs-sm); }
.install-banner .msg strong{ display:block; font-size: var(--fs-sm); }
.install-banner .msg span{ color: var(--text-muted); font-size: var(--fs-xs); }
.install-banner .actions{ display:flex; gap: var(--sp-2); flex-shrink:0; }
.install-banner button{ padding: .5em .9em; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight:700; }
.install-banner .btn-install{ background: var(--brand-600); color:#fff; }
.install-banner .btn-dismiss{ color: var(--text-faint); }

.offline-pill{
  position:fixed; top: calc(var(--header-h) + 10px); left:50%; transform:translateX(-50%) translateY(-140%);
  background: var(--warning-bg); color: var(--warning-fg); font-size: var(--fs-xs); font-weight:700;
  padding: .5em 1.1em; border-radius: var(--radius-full); z-index:120;
  transition: transform var(--dur-base) var(--ease); box-shadow: var(--shadow-md);
}
.offline-pill.is-visible{ transform:translateX(-50%) translateY(0); }

/* ============================= */
/* 15. Animations                 */
/* ============================= */
@keyframes fadeInUp{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:translateY(0); } }
.animate-in{ animation: fadeInUp var(--dur-slow) var(--ease) both; }
.tool-grid .tool-card{ animation: fadeInUp var(--dur-slow) var(--ease) both; }
.tool-grid .tool-card:nth-child(1){ animation-delay:.02s; }
.tool-grid .tool-card:nth-child(2){ animation-delay:.06s; }
.tool-grid .tool-card:nth-child(3){ animation-delay:.10s; }
.tool-grid .tool-card:nth-child(4){ animation-delay:.14s; }
.tool-grid .tool-card:nth-child(5){ animation-delay:.18s; }
.tool-grid .tool-card:nth-child(6){ animation-delay:.22s; }
.tool-grid .tool-card:nth-child(7){ animation-delay:.26s; }
.tool-grid .tool-card:nth-child(8){ animation-delay:.30s; }

/* ============================= */
/* 16. Responsive helpers         */
/* ============================= */
@media (max-width: 600px){
  .hide-mobile{ display:none; }
}
@media (max-width: 480px){
  :root{ --header-h: 60px; }
  .hero{ padding-block: var(--sp-8) var(--sp-6); }
  .panel, .tool-card{ padding: var(--sp-4); }
  .field-row{ flex-direction: column; gap:0; }
  .keypad .key{ padding: var(--sp-3) 0; font-size: var(--fs-base); }
  .countdown-grid{ gap: var(--sp-1); }
}