:root {
  --bg-1: #ffffff;
  --bg-2: #f4f4f4;
  --bg-3: #e8e8e8;
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.1);
  --text-primary: #111111;
  --text-secondary: #5f5f5f;
  --text-on-dark: #ffffff;
  --accent: #111111;
  --accent-2: #454545;
  --accent-text: #ffffff;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius-lg: 20px;
  --radius-md: 12px;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  --max-width: 1080px;
}

/* Fixed light theme by design — predictable branding regardless of visitor's OS setting. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: "Segoe UI", Inter, system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--text-primary);
  background: linear-gradient(160deg, var(--bg-1), var(--bg-2) 55%, var(--bg-3));
  background-attachment: fixed;
  line-height: 1.5;
}

a { color: inherit; }

/* ---------- Header / Nav ---------- */
header#site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(10px);
  background: rgba(10, 10, 10, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
}

.brand {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-on-dark);
  text-decoration: none;
  letter-spacing: 0.2px;
}
.brand span { color: rgba(255, 255, 255, 0.55); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--text-on-dark);
  font-size: 1.1rem;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}

.nav-links { display: flex; gap: 22px; }
.nav-link {
  color: rgba(243, 247, 250, 0.8);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.nav-link:hover, .nav-link.active {
  color: var(--text-on-dark);
  border-bottom-color: var(--text-on-dark);
}

@media (max-width: 720px) {
  .nav-toggle { display: inline-block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: var(--bg-1);
    flex-direction: column;
    padding: 12px 20px 18px;
    gap: 14px;
  }
  .nav-links.open { display: flex; }
}

/* ---------- Layout ---------- */
main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 20px 60px;
}

.page-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 32px clamp(20px, 5vw, 48px);
  max-width: 760px;
  margin: 20px auto;
}
.page-card h1 { margin-top: 0; }
.page-card p { color: var(--text-secondary); }

/* ---------- Hero / Test card ---------- */
.hero-intro {
  text-align: center;
  color: var(--text-primary);
  margin-bottom: 22px;
}
.hero-intro h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 8px;
}
.hero-intro p {
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto;
}

.test-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 44px);
}

.meta-line {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 14px;
}

/* ---------- Gauge ---------- */
.gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.gauge-svg { width: min(340px, 90vw); height: auto; }

#needle {
  transform-origin: 150px 150px;
  transition: transform 0.35s cubic-bezier(.4,1.4,.4,1);
}

.gauge-readout {
  text-align: center;
  margin-top: -14px;
}
.gauge-value {
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.gauge-unit {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-left: 4px;
}
.gauge-status {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-top: 4px;
  min-height: 1.2em;
}

.go-btn {
  display: block;
  margin: 14px auto 6px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  color: var(--accent-text);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  animation: pulse 2.6s ease-in-out infinite;
}
.go-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); animation-play-state: paused; }
.go-btn:active { transform: translateY(0); }
.go-btn:disabled { opacity: 0.6; cursor: progress; animation: pulse 1.2s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
  50% { box-shadow: 0 10px 42px rgba(0, 0, 0, 0.55); }
}

/* ---------- Result tiles ---------- */
.results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 28px;
}
@media (max-width: 620px) {
  .results-grid { grid-template-columns: repeat(2, 1fr); }
}

.result-tile {
  background: rgba(120, 120, 120, 0.07);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 16px 10px;
  text-align: center;
}
.tile-icon {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.result-tile .label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.result-tile .value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}
.result-tile .value small { font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); }

.tile-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--card-border);
  margin-top: 10px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.tile-progress.active { opacity: 1; }
.tile-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--text-primary);
  transition: width 0.15s linear;
}

/* ---------- History ---------- */
.history-section { margin-top: 28px; }
.history-section h2 {
  font-size: 1rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}
table.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
table.history-table th, table.history-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--card-border);
  color: var(--text-secondary);
}
table.history-table th { font-weight: 600; color: var(--text-primary); }

/* ---------- Ad slots ---------- */
/* Slots stay hidden until AdSense is live. Generous margins keep ads clear of the GO button and
   result tiles so they can't be mistaken for, or accidentally clicked as, page controls. */
.ad-slot {
  margin: 36px auto;
  max-width: 728px;
  border-radius: var(--radius-md);
}
.ad-slot[hidden] { display: none; }
.ad-slot.ad-live { min-height: 90px; text-align: center; }
.ad-slot.ad-live::before {
  content: "Advertisement";
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* ---------- Footer ---------- */
footer#site-footer {
  border-top: 1px solid var(--card-border);
  color: var(--text-secondary);
  padding: 26px 20px 40px;
}
.footer-inner { max-width: var(--max-width); margin: 0 auto; text-align: center; font-size: 0.85rem; }
.footer-links a { text-decoration: none; color: var(--text-secondary); }
.footer-links a:hover { color: var(--text-primary); }

/* ---------- Consent banner ---------- */
.consent-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  max-width: 640px;
  margin: 0 auto;
  background: var(--card-bg);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.consent-banner p { margin: 0; font-size: 0.85rem; color: var(--text-secondary); flex: 1 1 260px; }
.consent-actions { display: flex; gap: 8px; }

.btn {
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--card-border); }

/* ---------- Static pages ---------- */
.legal ul, .legal ol { color: var(--text-secondary); }
.legal li { margin-bottom: 6px; }
.legal h2 { margin-top: 28px; }
.legal table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 0.92rem; }
.legal th, .legal td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--card-border); color: var(--text-secondary); }
.legal th { color: var(--text-primary); font-weight: 600; }
.legal .updated { font-size: 0.85rem; }
.legal .back-link { margin-top: 28px; font-size: 0.9rem; }

/* ---------- Homepage explainer + guides ---------- */
.info-section { max-width: 760px; margin: 48px auto 0; }
.info-section h2 { font-size: 1.35rem; margin: 0 0 10px; }
.info-section h3 { font-size: 1.05rem; margin: 22px 0 6px; }
.info-section p, .info-section li { color: var(--text-secondary); }
.metric-list { display: grid; gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.metric-list li { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 14px 16px; }
.metric-list strong { color: var(--text-primary); }
.guide-grid { display: grid; gap: 16px; margin-top: 18px; }
.guide-card { display: block; text-decoration: none; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 18px 20px; }
.guide-card:hover { border-color: var(--text-primary); }
.guide-card h3 { margin: 0 0 6px; font-size: 1.1rem; color: var(--text-primary); }
.guide-card p { margin: 0; color: var(--text-secondary); font-size: 0.95rem; }
/* ---------- Share bar ---------- */
.share-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--card-border); }
.share-heading { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.share-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.share-btn {
  font: inherit; font-size: 0.82rem; font-weight: 600; text-decoration: none; cursor: pointer;
  color: var(--text-primary); background: var(--card-bg);
  border: 1px solid var(--card-border); border-radius: 999px; padding: 6px 14px;
}
.share-btn:hover { background: var(--text-primary); color: var(--accent-text); border-color: var(--text-primary); }
.share-result { margin-top: 8px; }
.share-result[hidden] { display: none; }
.share-result .share-bar { justify-content: center; margin-top: 18px; }
.noscript-note { max-width: 560px; margin: 16px auto; text-align: center; color: var(--text-secondary); }