/* =========================================================
   ZUUP SPEED TEST | style.css
   Brand: #FF3D7F / #050505 / #FFFFFF
   Fonts: Inter (primary) · Caveat (accent)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Caveat:wght@400..700&display=swap');

/* ── Variables ─────────────────────────────────────────── */
:root {
  --pink:            #FF3D7F;
  --pink-dim:        rgba(255,61,127,0.12);
  --pink-mid:        rgba(255,61,127,0.25);
  --pink-glow:       rgba(255,61,127,0.40);
  --pink-strong:     rgba(255,61,127,0.65);
  --black:           #050505;
  --black-card:      #0a0a0a;
  --black-light:     #0f0f0f;
  --white:           #FFFFFF;
  --white-70:        rgba(255,255,255,0.70);
  --white-40:        rgba(255,255,255,0.40);
  --white-10:        rgba(255,255,255,0.08);
  --white-5:         rgba(255,255,255,0.04);
  --border:          rgba(255,255,255,0.09);
  --border-pink:     rgba(255,61,127,0.35);
  --success:         #00E87A;
  --warn:            #FFB800;
  --danger:          #FF4444;
  --orange:          #FF6B35;

  --font-body:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-accent: 'Caveat', cursive;

  --nav-h:    68px;
  --max-w:    1180px;
  --r:        16px;
  --r-sm:     12px;
  --r-xs:     6px;
  --ease:     cubic-bezier(0.4,0,0.2,1);
  --spring:   cubic-bezier(0.34,1.56,0.64,1);
  --dur:      0.25s;
}

/* ── Reset ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; max-width:100%; overflow-x:hidden; }
body {
  font-family: var(--font-body);
  background: var(--black);
  color: var(--white);
  min-height:100vh;
  max-width:100%;
  overflow-x:hidden;
  position:relative;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--black); }
::-webkit-scrollbar-thumb { background:rgba(255,61,127,0.6); border-radius:3px; }
::selection { background:var(--pink); color:var(--black); }

/* ── Utilities ──────────────────────────────────────────── */
.container { max-width:var(--max-w); margin:0 auto; padding:0 24px; }
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:0.9em; }
.hidden { display:none !important; }
.visible { display:block !important; }
.visible-flex { display:flex !important; }

/* ── Background Canvas ──────────────────────────────────── */
#bg-canvas {
  position:fixed; inset:0; z-index:0;
  pointer-events:none; opacity:0.35;
}

/* ── Floating Header / Nav ──────────────────────────────── */
.nav-header {
  position:fixed; top:16px; left:0; right:0; z-index:200;
  pointer-events:none; padding:0 20px;
}
.nav-pill {
  pointer-events:auto;
  max-width:1040px; margin:0 auto;
  padding:6px 16px 6px 14px;
  height:54px;
  border-radius:9999px;
  background:rgba(12,12,12,0.82);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 10px 32px rgba(0,0,0,0.65);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  transition:border-color var(--dur), background var(--dur), box-shadow var(--dur);
}
.nav-pill:hover {
  border-color:rgba(255,255,255,0.18);
  box-shadow:0 12px 36px rgba(0,0,0,0.75);
}
.nav-brand {
  display:flex; align-items:center; gap:8px;
  text-decoration:none; cursor:pointer; flex-shrink:0;
}
.nav-logo-img {
  height:32px; width:32px; object-fit:contain; display:block;
}
.nav-brand-sep {
  color:rgba(255,255,255,0.22); font-size:15px; font-weight:300;
}
.nav-brand-title {
  font-size:16px; font-weight:700;
  letter-spacing:-0.01em; color:var(--white);
}
.nav-links {
  display:flex; align-items:center; gap:24px;
}
.nav-link {
  font-size:13px; font-weight:600;
  color:rgba(255,255,255,0.6); text-decoration:none;
  letter-spacing:0.2px; position:relative;
  transition:color var(--dur); padding:6px 0;
}
.nav-link:hover, .nav-link.active {
  color:var(--white);
}
.nav-link::after {
  content:''; position:absolute; bottom:0; left:0; width:0; height:2px;
  background:var(--pink); transition:width 0.22s var(--ease);
  border-radius:1px;
}
.nav-link:hover::after, .nav-link.active::after {
  width:100%;
}
.nav-actions {
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.nav-action-btn {
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.7);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all var(--dur);
}
.nav-action-btn:hover {
  color:var(--pink); border-color:var(--border-pink);
  background:var(--pink-dim);
  transform:rotate(30deg);
}
.nav-cta-btn {
  background:var(--pink);
  color:#050505;
  font-family:var(--font-body);
  font-size:12px; font-weight:800;
  letter-spacing:1px; text-transform:uppercase;
  padding:8px 18px; border-radius:9999px;
  border:none; cursor:pointer;
  box-shadow:0 4px 16px var(--pink-dim);
  transition:all var(--dur);
}
.nav-cta-btn:hover {
  background:#FF5591;
  box-shadow:0 6px 24px var(--pink-glow);
  transform:translateY(-1px);
}
.nav-portal-link {
  font-size:12px; font-weight:600;
  color:rgba(255,255,255,0.45); text-decoration:none;
  transition:color var(--dur); padding:4px 6px;
}
.nav-portal-link:hover { color:var(--white); }
.nav-hamburger {
  display:none; cursor:pointer;
  background:none; border:none; color:var(--white-70);
  padding:6px; border-radius:6px;
  align-items:center; justify-content:center;
}
.nav-hamburger:hover { color:var(--white); }

/* ── Main Wrapper ───────────────────────────────────────── */
main { position:relative; z-index:1; padding-top:40px; max-width:100%; overflow-x:hidden; }

/* ── HERO ───────────────────────────────────────────────── */
.hero {
  min-height:calc(100vh - var(--nav-h));
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:50px 24px 40px;
  gap:28px; text-align:center;
}
.hero-header { max-width:720px; }
.hero-title {
  font-family:var(--font-body);
  font-size:clamp(40px,6.5vw,78px);
  font-weight:800; letter-spacing:-0.03em;
  line-height:1.05; color:var(--white);
  margin-bottom:14px;
}
.hero-title .pink-accent {
  font-family:var(--font-accent);
  font-size:1.15em; font-weight:700;
  color:var(--pink);
  text-decoration:none !important;
  display:inline-block;
  text-shadow:0 0 40px var(--pink-glow);
}
.hero-sub {
  font-size:16px; color:var(--white-70);
  max-width:540px; margin:0 auto; line-height:1.6;
}

/* ── Gauge ──────────────────────────────────────────────── */
.gauge-wrap {
  position:relative;
  width:380px; height:380px;
}
#gauge-canvas { display:block; }
.gauge-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  pointer-events:none;
}
.gauge-speed {
  font-size:78px; font-weight:900; line-height:1;
  letter-spacing:-3px;
  font-variant-numeric:tabular-nums;
  color:var(--white);
  transition:color 0.4s;
}
.gauge-unit-toggle {
  font-size:13px; font-weight:800;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--pink); margin-top:6px;
  cursor:pointer; user-select:none;
  transition:color var(--dur);
  pointer-events:all;
  background:none; border:none;
  font-family:var(--font-body);
}
.gauge-unit-toggle:hover { color:var(--white); }
.gauge-phase-label {
  font-size:11px; font-weight:800;
  letter-spacing:2.5px; text-transform:uppercase;
  color:var(--white-40); margin-top:10px;
}

/* ── Start Button ───────────────────────────────────────── */
.start-btn {
  position:relative;
  padding:18px 64px;
  font-family:var(--font-body);
  font-size:15px; font-weight:800;
  letter-spacing:2px; text-transform:uppercase;
  color:#050505;
  background:var(--pink);
  border:none;
  border-radius:14px;
  cursor:pointer; outline:none;
  box-shadow:0 8px 30px var(--pink-dim);
  transition:transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background var(--dur);
}
.start-btn:hover {
  background:#FF5591;
  transform:translateY(-2px);
  box-shadow:0 12px 40px var(--pink-glow), 0 0 60px var(--pink-dim);
}
.start-btn:active { transform:scale(0.97); }
.start-btn.running {
  background:rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.4);
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}

/* ── Quick Stats Row ────────────────────────────────────── */
.quick-stats {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:12px; width:100%; max-width:680px;
}
.stat-chip {
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px 12px; text-align:center;
  transition:border-color var(--dur), background var(--dur), box-shadow var(--dur);
}
.stat-chip.active {
  border-color:var(--border-pink);
  background:var(--pink-dim);
  box-shadow:0 0 20px var(--pink-dim);
}
.stat-chip.done {
  border-color:rgba(0,232,122,0.3);
  background:rgba(0,232,122,0.04);
}
.chip-label {
  display:block; font-size:10px; font-weight:800;
  letter-spacing:1.8px; text-transform:uppercase;
  color:var(--white-40); margin-bottom:6px;
}
.chip-value {
  display:block; font-size:20px; font-weight:800;
  color:var(--white); font-variant-numeric:tabular-nums;
  letter-spacing:-0.5px;
  transition:color var(--dur);
}
.chip-value.live { color:var(--pink); text-shadow:0 0 15px var(--pink-glow); }
.chip-value.set { color:var(--success); }

/* ── Phase Strip ─────────────────────────────────────────── */
.phase-strip {
  display:flex; align-items:stretch;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  width:100%; max-width:580px;
}
.phase-item {
  flex:1; padding:12px 10px;
  text-align:center; position:relative;
  transition:background 0.3s;
}
.phase-item:not(:last-child)::after {
  content:''; position:absolute;
  right:0; top:20%; height:60%;
  width:1px; background:var(--border);
}
.phase-item.active { background:var(--pink-dim); }
.phase-item.done { background:rgba(0,232,122,0.05); }
.phase-step {
  font-family:monospace; font-size:10px; font-weight:700;
  color:var(--white-40); margin-bottom:2px; display:block;
}
.phase-name {
  font-size:11px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  color:var(--white-70); display:block;
}
.phase-item.active .phase-step,
.phase-item.active .phase-name { color:var(--pink); }
.phase-item.done .phase-step,
.phase-item.done .phase-name { color:var(--success); }

/* ── Section base ────────────────────────────────────────── */
.section {
  padding:72px 24px;
  max-width:var(--max-w); margin:0 auto;
}
.section-eyebrow {
  font-size:11px; font-weight:800;
  letter-spacing:2.5px; text-transform:uppercase;
  color:var(--pink); margin-bottom:8px;
}
.section-heading {
  font-family:var(--font-body);
  font-size:clamp(30px,4vw,44px);
  font-weight:800; color:var(--white);
  margin-bottom:12px; line-height:1.15;
  letter-spacing:-0.02em;
}
.section-heading .pink-accent {
  font-family:var(--font-accent);
  color:var(--pink); font-size:1.15em;
}
.section-subtext {
  font-size:15px; color:var(--white-70);
  max-width:580px; margin-bottom:32px;
}

/* ── Live Section ─────────────────────────────────────────── */
#live-section { display:none; }
#live-section.show { display:block; }

.graph-card {
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:24px; overflow:hidden;
}
.graph-legend {
  display:flex; gap:24px; margin-bottom:16px; flex-wrap:wrap;
}
.legend-item {
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; color:var(--white-70);
}
.legend-dot { width:10px; height:10px; border-radius:50%; }
.legend-dot.dl { background:var(--pink); box-shadow:0 0 6px var(--pink-glow); }
.legend-dot.ul { background:#7C5CFF; box-shadow:0 0 6px rgba(124,92,255,0.5); }
#graph-canvas { width:100%; height:180px; display:block; }

/* ── Results Section ──────────────────────────────────────── */
#results-section { display:none; }
#results-section.show { display:block; }

/* Grade Banner */
.grade-banner {
  display:flex; align-items:center; gap:40px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:36px 40px; margin-bottom:28px;
  position:relative; overflow:hidden;
  animation:fadeInUp 0.6s var(--ease) both;
}
.grade-banner::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 100% at 0% 50%, var(--pink-dim), transparent);
}
.grade-letter {
  font-family:var(--font-accent);
  font-size:clamp(80px,12vw,140px);
  font-weight:800; line-height:1;
  position:relative; z-index:1;
}
.grade-S { color:var(--pink); text-shadow:0 0 60px var(--pink-glow); }
.grade-A { color:var(--success); text-shadow:0 0 60px rgba(0,232,122,0.4); }
.grade-B { color:var(--warn); text-shadow:0 0 60px rgba(255,184,0,0.4); }
.grade-C { color:var(--orange); text-shadow:0 0 60px rgba(255,107,53,0.4); }
.grade-D, .grade-F { color:var(--danger); text-shadow:0 0 60px rgba(255,68,68,0.4); }
.grade-text { position:relative; z-index:1; }
.grade-text h3 {
  font-size:clamp(22px,3vw,30px);
  font-weight:800; margin-bottom:8px;
}
.grade-text p { font-size:15px; color:var(--white-70); max-width:520px; line-height:1.6; }

/* Result Cards Grid */
.result-cards {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:16px; margin-bottom:28px;
}
.result-card {
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:24px; position:relative;
  overflow:hidden;
  transition:border-color var(--dur), transform var(--dur) var(--spring);
  animation:fadeInUp 0.5s var(--ease) both;
}
.result-card:hover {
  border-color:var(--border-pink);
  transform:translateY(-4px);
}
.result-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--pink),transparent);
  opacity:0; transition:opacity var(--dur);
}
.result-card:hover::after { opacity:1; }
.rc-label {
  font-size:10px; font-weight:800;
  letter-spacing:1.8px; text-transform:uppercase;
  color:var(--white-40); margin-bottom:8px;
  display:block;
}
.rc-value {
  font-size:38px; font-weight:900; line-height:1;
  letter-spacing:-1.5px;
  font-variant-numeric:tabular-nums;
  margin-bottom:4px; display:block;
}
.rc-unit { font-size:13px; color:var(--white-40); font-weight:600; }
.rc-bar {
  margin-top:16px; height:4px;
  background:rgba(255,255,255,0.08);
  border-radius:2px; overflow:hidden;
}
.rc-bar-fill {
  height:100%; background:var(--pink);
  border-radius:2px; width:0%;
  transition:width 1.2s var(--spring);
  box-shadow:0 0 8px var(--pink-glow);
}

/* Detailed Table */
.detail-table {
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden; margin-bottom:28px;
  animation:fadeInUp 0.6s var(--ease) 0.2s both;
}
.detail-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  border-bottom:1px solid rgba(255,255,255,0.04);
  transition:background var(--dur);
}
.detail-row:last-child { border-bottom:none; }
.detail-row:hover { background:var(--pink-dim); }
.dk { font-size:14px; color:var(--white-70); font-weight:500; }
.dv { font-size:14px; font-weight:700; color:var(--white); font-variant-numeric:tabular-nums; }
.dv.pink { color:var(--pink); }
.dv.success { color:var(--success); }
.dv.warn { color:var(--warn); }
.dv.danger { color:var(--danger); }

/* Bar Chart */
.chart-wrap {
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:28px; margin-bottom:28px;
  animation:fadeInUp 0.6s var(--ease) 0.3s both;
}
.chart-title {
  font-size:12px; font-weight:800;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--white-40); margin-bottom:24px;
}
.bar-chart {
  display:flex; gap:28px; height:200px; align-items:flex-end;
}
.bar-col {
  flex:1; display:flex; flex-direction:column;
  align-items:center; height:100%;
}
.bar-fill-zone {
  flex:1; width:100%; display:flex; align-items:flex-end;
}
.bar-fill {
  width:100%; min-height:4px;
  border-radius:8px 8px 0 0;
  transition:height 1.4s var(--spring);
  position:relative;
}
.bar-fill::before {
  content:attr(data-label);
  position:absolute; top:-26px; left:50%;
  transform:translateX(-50%);
  font-size:12px; font-weight:800;
  color:var(--white); white-space:nowrap;
}
.bar-fill.dl {
  background:linear-gradient(180deg, var(--pink) 0%, rgba(255,61,127,0.25) 100%);
  box-shadow:0 -4px 20px var(--pink-glow);
}
.bar-fill.ul {
  background:linear-gradient(180deg, #7C5CFF 0%, rgba(124,92,255,0.25) 100%);
  box-shadow:0 -4px 20px rgba(124,92,255,0.4);
}
.bar-fill.ping {
  background:linear-gradient(180deg, var(--success) 0%, rgba(0,232,122,0.25) 100%);
  box-shadow:0 -4px 20px rgba(0,232,122,0.4);
}
.bar-label {
  font-size:10px; font-weight:800;
  letter-spacing:1.8px; text-transform:uppercase;
  color:var(--white-40); margin-top:12px; text-align:center;
}

/* Share Row */
.share-row {
  display:flex; gap:12px; flex-wrap:wrap;
  animation:fadeInUp 0.6s var(--ease) 0.4s both;
}

/* ── REDESIGNED NETWORK DIAGNOSTICS ────────────────────────── */
.network-section { border-top:1px solid var(--border); }
.profile-grid {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.profile-card {
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:24px;
  transition:border-color var(--dur), transform var(--dur) var(--spring);
}
.profile-card:hover {
  border-color:var(--border-pink);
  transform:translateY(-3px);
}
.profile-card-header {
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding-bottom:14px; margin-bottom:18px;
}
.profile-card-tag {
  font-size:10px; font-weight:800;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--pink); display:block; margin-bottom:4px;
}
.profile-card-title {
  font-size:17px; font-weight:700; color:var(--white);
}
.profile-items {
  display:flex; flex-direction:column; gap:16px;
}
.profile-item {
  display:flex; flex-direction:column; gap:4px;
}
.pi-label {
  font-size:11px; font-weight:600;
  color:var(--white-40); text-transform:uppercase;
  letter-spacing:0.8px;
}
.pi-val {
  font-size:14px; font-weight:600;
  color:var(--white); word-break:break-word;
}
.pi-val.mono {
  font-family:ui-monospace, Menlo, Monaco, monospace;
  font-size:13px;
}
.pi-val.accent { color:var(--pink); }
.pi-val.success { color:var(--success); }

/* ── Test History ──────────────────────────────────────────── */
.history-section { border-top:1px solid var(--border); }
.history-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:24px; flex-wrap:wrap; gap:12px;
}
.history-actions { display:flex; gap:10px; }
.hist-table-wrap {
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:auto;
}
.hist-table {
  width:100%; border-collapse:collapse; min-width:700px;
}
.hist-table th {
  padding:14px 20px; text-align:left;
  font-size:10px; font-weight:800;
  letter-spacing:1.8px; text-transform:uppercase;
  color:var(--white-40);
  background:rgba(255,61,127,0.03);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.hist-table td {
  padding:14px 20px;
  font-size:13px; font-weight:600;
  color:var(--white); border-bottom:1px solid rgba(255,255,255,0.03);
  font-variant-numeric:tabular-nums;
}
.hist-table tr:last-child td { border-bottom:none; }
.hist-table tbody tr:hover td { background:var(--pink-dim); }
.hist-table .empty td {
  color:var(--white-40); text-align:center;
  padding:44px; font-style:italic;
}
.grade-pill {
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px;
  border-radius:6px; font-weight:800; font-size:12px;
}
.gp-S { background:rgba(255,61,127,0.15); color:var(--pink); border:1px solid rgba(255,61,127,0.4); }
.gp-A { background:rgba(0,232,122,0.12); color:var(--success); border:1px solid rgba(0,232,122,0.4); }
.gp-B { background:rgba(255,184,0,0.12); color:var(--warn); border:1px solid rgba(255,184,0,0.4); }
.gp-C { background:rgba(255,107,53,0.12); color:var(--orange); border:1px solid rgba(255,107,53,0.4); }
.gp-D,.gp-F { background:rgba(255,68,68,0.12); color:var(--danger); border:1px solid rgba(255,68,68,0.4); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px;
  font-family:var(--font-body); font-size:13px; font-weight:700;
  border-radius:12px; cursor:pointer;
  transition:all var(--dur) var(--ease);
  border:1px solid transparent; text-decoration:none;
  outline:none; white-space:nowrap;
}
.btn-ghost {
  background:transparent;
  border-color:var(--border);
  color:var(--white-70);
}
.btn-ghost:hover {
  border-color:var(--border-pink);
  color:var(--white); background:var(--pink-dim);
}
.btn-pink {
  background:var(--pink);
  border-color:var(--pink);
  color:#050505;
}
.btn-pink:hover {
  background:#FF5591; border-color:#FF5591;
  box-shadow:0 0 24px var(--pink-glow);
}
.btn-outline-white {
  background:transparent;
  border-color:rgba(255,255,255,0.25);
  color:var(--white);
}
.btn-outline-white:hover {
  border-color:var(--white);
  background:rgba(255,255,255,0.06);
}
.btn-dashed {
  background:transparent;
  border:2px dashed #ffffff;
  color:#ffffff;
  padding:12px 24px;
  border-radius:12px;
  font-family:var(--font-accent);
  font-size:20px;
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  transition:all var(--dur);
}
.btn-dashed:hover {
  border-color:var(--pink);
  color:var(--pink);
  background:rgba(255,61,127,0.06);
}

/* ── Settings FAB & Drawer ─────────────────────────────────── */
.settings-fab {
  position:fixed; bottom:28px; right:28px; z-index:150;
  width:48px; height:48px;
  background:var(--black-card);
  border:1px solid var(--border);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--white-70); cursor:pointer;
  transition:all var(--dur) var(--ease);
  box-shadow:0 4px 20px rgba(0,0,0,0.6);
}
.settings-fab:hover {
  border-color:var(--pink);
  color:var(--pink);
  box-shadow:0 0 20px var(--pink-glow);
  transform:rotate(45deg);
}
.settings-drawer {
  position:fixed; bottom:88px; right:28px; z-index:150;
  width:320px;
  background:#0d0d0d;
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:24px;
  box-shadow:0 20px 60px rgba(0,0,0,0.9);
  transform:translateY(16px) scale(0.95);
  opacity:0; pointer-events:none;
  transition:all 0.25s var(--spring);
}
.settings-drawer.open {
  transform:translateY(0) scale(1);
  opacity:1; pointer-events:auto;
}
.settings-drawer-title {
  font-size:14px; font-weight:700; color:var(--white);
  margin-bottom:20px;
  display:flex; align-items:center; justify-content:space-between;
}
.settings-close {
  cursor:pointer; color:var(--white-40);
  background:none; border:none; display:flex; align-items:center;
  transition:color var(--dur);
}
.settings-close:hover { color:var(--white); }
.settings-row { margin-bottom:18px; }
.settings-row:last-child { margin-bottom:0; }
.s-label {
  display:block; font-size:10px; font-weight:800;
  letter-spacing:1.8px; text-transform:uppercase;
  color:var(--white-40); margin-bottom:8px;
}
.s-opts { display:flex; gap:6px; }
.s-opt {
  flex:1; padding:8px 6px; text-align:center;
  font-size:12px; font-weight:700;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  border-radius:var(--r-xs);
  cursor:pointer; color:var(--white-40);
  transition:all var(--dur);
  font-family:var(--font-body);
}
.s-opt:hover { color:var(--white); border-color:rgba(255,255,255,0.2); }
.s-opt.active {
  background:var(--pink-dim);
  border-color:var(--pink);
  color:var(--pink);
}

/* ── MOZA DOODLE SECTION (AUTHENTIC ZUUP THEME) ────────────── */
.moza-section {
  border-top:1px solid var(--border);
  padding:80px 24px;
  max-width:var(--max-w); margin:0 auto;
}
.moza-inner {
  display:flex; align-items:center; gap:56px;
  background:#080808;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:24px;
  padding:56px 52px;
  position:relative;
  overflow:visible;
}
.moza-img-wrap {
  flex-shrink:0; width:280px; position:relative; text-align:center;
}
.moza-hand-note {
  display:block;
  font-family:var(--font-accent);
  font-size:22px; color:var(--pink);
  white-space:nowrap; transform:rotate(-3deg);
  margin-bottom:6px; text-align:center;
}
.moza-img {
  width:100%; height:auto; max-height:280px;
  object-fit:contain; display:block;
  filter:drop-shadow(0 0 20px rgba(255,255,255,0.06));
}
.moza-content { flex:1; }
.moza-heading {
  font-family:var(--font-body);
  font-size:clamp(32px,4.5vw,48px);
  font-weight:800; color:var(--white);
  margin-bottom:16px; line-height:1.1;
  letter-spacing:-0.02em;
}
.moza-heading .pink-accent {
  font-family:var(--font-accent);
  color:var(--pink); font-size:1.15em;
}
.moza-quote {
  font-size:16px; color:var(--white-70); line-height:1.7;
  margin-bottom:24px;
}
.moza-tags {
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px;
}
.moza-tag {
  font-size:11px; font-weight:700;
  padding:6px 14px; border-radius:100px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  color:var(--white-70);
}
.moza-actions {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}

/* ── ZUUP.DEV EXACT FOOTER ─────────────────────────────────── */
.zuup-footer {
  border-top:1px solid rgba(255,255,255,0.08);
  background:#050505;
  padding:80px 24px 40px;
  position:relative; z-index:1;
}
.zuup-footer-container {
  max-width:var(--max-w); margin:0 auto;
}
.zuup-footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr;
  gap:48px; margin-bottom:60px;
}
.zuup-footer-logo {
  height:64px; width:64px; object-fit:contain;
  margin-bottom:14px; display:block;
}
.zuup-footer-tagline {
  font-family:'Caveat', cursive;
  font-size:24px; letter-spacing:1px;
  color:#FFFFFF; margin-bottom:4px;
}
.zuup-footer-phone {
  font-family:ui-monospace, Menlo, Monaco, monospace;
  font-size:14px; color:rgba(255,255,255,0.5);
  margin-bottom:22px;
}
.zuup-footer-socials {
  display:flex; gap:12px; align-items:center;
}
.zuup-social-btn {
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.12);
  background:#000000;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.6); text-decoration:none;
  transition:all var(--dur);
}
.zuup-social-btn:hover {
  border-color:rgba(255,255,255,0.4);
  color:#FFFFFF; transform:translateY(-2px);
}
.zuup-footer-col-title {
  color:#FFFFFF; font-size:18px; font-weight:700;
  letter-spacing:0.5px; margin-bottom:24px;
}
.zuup-footer-links {
  list-style:none; display:flex; flex-direction:column; gap:16px;
}
.zuup-footer-links a {
  color:rgba(255,255,255,0.55); text-decoration:none;
  font-size:15px; font-weight:500;
  transition:color var(--dur);
}
.zuup-footer-links a:hover { color:#FFFFFF; }
.zuup-surprise-link { color:var(--pink) !important; font-weight:600; }
.zuup-footer-bottom {
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:32px;
  display:flex; align-items:center; justify-content:space-between;
  font-family:ui-monospace, Menlo, Monaco, monospace;
  font-size:14px; color:rgba(255,255,255,0.45);
  flex-wrap:wrap; gap:16px;
}
.zuup-footer-made {
  display:flex; align-items:center; gap:6px;
}
.zuup-heart-icon {
  vertical-align:middle;
}

/* ── Animations ────────────────────────────────────────────── */
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.4; transform:scale(0.75); }
}
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(0.92); }
  to   { opacity:1; transform:scale(1); }
}
.anim-fade { animation:fadeInUp 0.6s var(--ease) both; }
.anim-scale { animation:scaleIn 0.4s var(--spring) both; }
.d1 { animation-delay:0.08s; }
.d2 { animation-delay:0.16s; }
.d3 { animation-delay:0.24s; }
.d4 { animation-delay:0.32s; }
.d5 { animation-delay:0.40s; }

/* ── Toast ─────────────────────────────────────────────────── */
#toast {
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%) translateY(80px);
  background:#0f0f0f;
  border:1px solid var(--border-pink);
  border-radius:var(--r-sm);
  padding:12px 24px;
  font-size:14px; font-weight:600; color:var(--white);
  z-index:300;
  transition:transform 0.35s var(--spring), opacity 0.35s;
  opacity:0; pointer-events:none;
  white-space:nowrap;
  box-shadow:0 10px 30px rgba(0,0,0,0.8);
}
#toast.show {
  transform:translateX(-50%) translateY(0);
  opacity:1;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .result-cards { grid-template-columns:repeat(2,1fr); }
  .profile-grid { grid-template-columns:1fr; }
  .zuup-footer-grid { grid-template-columns:1fr 1fr; gap:36px; }
}

@media (max-width: 768px) {
  .container { padding:0 16px; }

  /* Floating Navbar */
  .nav-header { padding:0 12px; top:10px; width:100%; }
  .nav-pill { height:48px; padding:4px 10px; gap:8px; width:100%; max-width:100%; }
  .nav-portal-link { display:none; }
  .nav-links {
    display:none; position:fixed; top:66px; left:12px; right:12px;
    background:rgba(12,12,12,0.98); backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border:1px solid rgba(255,255,255,0.14); border-radius:18px;
    flex-direction:column; padding:16px; gap:8px;
    box-shadow:0 16px 48px rgba(0,0,0,0.9);
    pointer-events:auto; z-index:250;
  }
  .nav-links.open { display:flex; animation:fadeInUp 0.25s var(--ease) both; }
  .nav-link {
    font-size:14px; padding:12px 14px;
    border-radius:10px; background:rgba(255,255,255,0.03);
    width:100%; display:block;
  }
  .nav-link:hover, .nav-link.active {
    background:var(--pink-dim); color:var(--white);
  }
  .nav-link::after { display:none; }
  .nav-hamburger { display:flex; }
  .nav-cta-btn { padding:6px 12px; font-size:11px; letter-spacing:0.5px; }
  .nav-action-btn { width:34px; height:34px; }

  /* Hero & Speed Gauge */
  .hero { padding:72px 16px 32px; gap:22px; min-height:auto; }
  .hero-title { font-size:clamp(30px, 7.5vw, 52px); line-height:1.1; margin-bottom:10px; }
  .hero-sub { font-size:14px; line-height:1.5; padding:0 4px; }
  .gauge-wrap {
    width:min(320px, 84vw);
    height:min(320px, 84vw);
    margin:0 auto;
  }
  #gauge-canvas { width:100% !important; height:100% !important; }
  .gauge-speed { font-size:clamp(52px, 15vw, 76px); letter-spacing:-2px; }
  .start-btn { padding:16px 40px; font-size:14px; width:min(100%, 300px); }

  /* Stats & Phase Strip */
  .quick-stats { grid-template-columns:repeat(2,1fr); gap:10px; width:100%; max-width:100%; }
  .stat-chip { padding:12px 8px; }
  .chip-label { font-size:9px; letter-spacing:1.2px; }
  .chip-value { font-size:18px; }
  .phase-strip { width:100%; max-width:100%; }
  .phase-item { padding:8px 4px; }
  .phase-step { font-size:8px; }
  .phase-name { font-size:9px; letter-spacing:0.5px; }

  /* Results Section */
  .section { padding:52px 16px; }
  .section-heading { font-size:clamp(26px, 6vw, 36px); }
  .section-subtext { font-size:14px; }
  .grade-banner { flex-direction:column; padding:24px 20px; gap:16px; text-align:center; }
  .grade-letter { font-size:84px; }
  .result-cards { grid-template-columns:repeat(2,1fr); gap:12px; }
  .rc-value { font-size:32px; }
  .detail-table { margin-bottom:20px; }
  .detail-row { padding:12px 16px; }
  .dk, .dv { font-size:13px; }
  .chart-wrap { padding:20px 16px; }
  .bar-chart { gap:16px; height:170px; }
  .share-row { flex-direction:column; }
  .share-row .btn { width:100%; justify-content:center; }

  /* Network Diagnostics */
  .profile-grid { grid-template-columns:1fr; gap:16px; }
  .profile-card { padding:20px; }

  /* History Table */
  .history-head { flex-direction:column; align-items:flex-start; gap:12px; }
  .history-actions { width:100%; display:flex; gap:8px; }
  .history-actions .btn { flex:1; justify-content:center; font-size:12px; padding:10px 12px; }
  .hist-table-wrap { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .hist-table { min-width:540px; }
  .hist-table th, .hist-table td { padding:10px 12px; font-size:12px; }

  /* Moza Section */
  .moza-inner { flex-direction:column; padding:32px 20px; gap:24px; text-align:center; }
  .moza-hand-note { position:static; margin-bottom:8px; display:inline-block; }
  .moza-img-wrap { width:min(220px, 68vw); margin:0 auto; }
  .moza-heading { font-size:clamp(26px, 6vw, 36px); }
  .moza-quote { font-size:14px; }
  .moza-actions { flex-direction:column; width:100%; gap:10px; }
  .moza-actions .btn { width:100%; justify-content:center; }
  .moza-tags { justify-content:center; }

  /* Exact Zuup Footer */
  .zuup-footer { padding:56px 16px 36px; }
  .zuup-footer-grid { grid-template-columns:1fr; gap:32px; margin-bottom:40px; }
  .zuup-footer-bottom { flex-direction:column; align-items:flex-start; gap:14px; font-size:13px; }

  /* Settings Drawer */
  .settings-drawer {
    width:calc(100vw - 24px); left:12px; right:12px;
    bottom:76px; max-height:80vh; overflow-y:auto;
  }
  .settings-fab { bottom:18px; right:18px; width:44px; height:44px; }
}

@media (max-width: 480px) {
  .hero { padding:68px 12px 28px; gap:18px; }
  .gauge-wrap { width:min(280px, 82vw); height:min(280px, 82vw); }
  .gauge-speed { font-size:clamp(44px, 13vw, 64px); }
  .quick-stats { grid-template-columns:repeat(2,1fr); gap:8px; }
  .stat-chip { padding:10px 6px; }
  .chip-value { font-size:16px; }
  .result-cards { grid-template-columns:1fr; gap:10px; }
  .rc-value { font-size:28px; }
  .section { padding:40px 12px; }
  .section-eyebrow { font-size:10px; letter-spacing:2px; }
  .chart-wrap { padding:16px 12px; }
  .bar-chart { gap:10px; height:150px; }
  .moza-inner { padding:24px 14px; border-radius:18px; }
  #toast { width:calc(100vw - 32px); white-space:normal; text-align:center; padding:10px 16px; font-size:13px; }
}

@media (max-width: 360px) {
  .nav-pill { padding:4px 8px; gap:6px; }
  .nav-brand-title { font-size:14px; }
  .nav-logo-img { height:26px; width:26px; }
  .nav-cta-btn { padding:5px 8px; font-size:10px; letter-spacing:0.2px; }
  .gauge-wrap { width:min(240px, 80vw); height:min(240px, 80vw); }
  .gauge-speed { font-size:42px; }
  .hero-title { font-size:28px; }
  .start-btn { padding:14px 24px; font-size:13px; }
}