/* ============================================================
   turfcharts — LIGHT premium fintech design (Stripe/Mercury/Linear)
   Off-white + indigo accent + crisp white cards.
   Bright, modern, trustworthy. The anti-dark.
   ============================================================ */
:root {
  --bg:        #0d1220;
  --bg-2:      #161d2e;
  --surface:   #151c2e;
  --ink:       #e8ecf5;
  --ink-2:     #c2c9da;
  --muted:     #959db5;
  --faint:     #6a7390;
  --line:      #26324e;
  --line-2:    #1e2842;
  --accent:    #2563eb;
  --accent-2:  #3b82f6;
  --accent-3:  #60a5fa;
  --accent-soft:rgba(37,99,235,0.16);
  --up:        #22c55e;
  --down:      #ef4444;
  --warn:      #f59e0b;
  --radius:    14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --shadow:    0 24px 60px -24px rgba(0,0,0,.60);
  --sans:      "Inter", system-ui, -apple-system, sans-serif;
  --display:   "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(70% 45% at 50% -5%, rgba(37,99,235,0.12), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
}
a { color: var(--accent-3); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-2); }
::selection { background: var(--accent); color: #fff; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a3653; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13,18,32,0.82);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; gap: 40px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.brand .mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center; color: #fff; font-size: 14px;
  box-shadow: 0 6px 16px -4px rgba(37,99,235,.5);
}
.brand .name { font-size: 20px; color: var(--ink); letter-spacing: -0.02em; }
.brand .name .a { color: var(--accent); }
.nav { display: flex; gap: 30px; }
.nav a { color: var(--ink-2); font-size: 14.5px; font-weight: 500; }
.nav a:hover { color: var(--ink); }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.topbar .right .login { color: var(--ink-2); font-size: 14.5px; font-weight: 500; }
.btn {
  display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 14.5px;
  padding: 11px 22px; border-radius: 10px; cursor: pointer; border: 1px solid transparent;
  transition: all .15s ease; letter-spacing: -0.011em;
}
.btn-primary {
  background: var(--accent); color: #fff; box-shadow: 0 8px 20px -8px rgba(37,99,235,.55);
}
.btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); color:#fff; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: #c8cdd9; transform: translateY(-1px); }

/* ---------- hero (clean deep navy + crisp indigo glow) ---------- */
.hero {
  position: relative;
  padding: 100px 0 96px;
  background:
    radial-gradient(55% 60% at 80% 0%, rgba(37,99,235,0.45), transparent 60%),
    linear-gradient(135deg, #071033 0%, #0e1b52 55%, #08123a 100%);
  color: #f3f4fb;
  overflow: hidden;
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.08fr 1fr; gap: 56px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em;
  color: #cfe0ff; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 6px 13px; border-radius: 100px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: #60a5fa; box-shadow: 0 0 10px #60a5fa; }
.hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: 62px; line-height: 1.04; letter-spacing: -0.035em;
  color: #ffffff; margin: 22px 0;
}
.hero h1 em { font-style: normal; color: #7cb5ff; }
.hero p.lead { font-size: 18.5px; color: #c3c8e0; max-width: 500px; line-height: 1.55; }
.hero .cta { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero .trust { margin-top: 26px; color: #989db8; font-size: 13px; }
.hero .trust strong { color: #e0e3f5; font-weight: 600; }

/* hero card */
.hero-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 22px 24px; box-shadow: var(--shadow);
}
.hero-card .hc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.hero-card .hc-k { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.hero-card .hc-title { font-size: 21px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin-top: 2px; }
.hero-card .hc-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.hero-card .badge {
  font-size: 12px; font-weight: 700; color: #fff; background: var(--accent);
  padding: 5px 10px; border-radius: 7px; white-space: nowrap;
}
.hero-card .hero-chart { width: 100%; height: 200px; margin: 16px 0 4px; }
.hero-card .hc-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.hero-card .hc-stats .t .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); font-weight: 600; }
.hero-card .hc-stats .t .v { font-size: 18px; font-weight: 700; color: var(--ink); margin-top: 2px; letter-spacing: -0.02em; }
.hero-card .hc-stats .t .v.a { color: var(--accent); }

/* ---------- stat band ---------- */
.statband { padding: 30px 0; }
.statband .grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.statband .s { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.statband .s .n { font-size: 34px; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
.statband .s .l { font-size: 13.5px; color: var(--muted); margin-top: 6px; }

/* ---------- section ---------- */
.section { padding: 72px 0; }
.section-h { text-align: center; margin-bottom: 44px; }
.section-h .k { color: var(--accent); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.section-h h2 { font-family: var(--display); font-weight: 700; font-size: 40px; letter-spacing: -0.03em; color: var(--ink); margin-top: 10px; }
.section-h h2 em { font-style: normal; color: var(--accent); }
.section-h p { color: var(--muted); font-size: 17px; margin-top: 10px; }

.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card .ic { width: 44px; height: 44px; border-radius: 11px; background: var(--accent-soft); display: grid; place-items: center; font-size: 21px; margin-bottom: 16px; }
.card h3 { font-size: 18.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.card p { color: var(--muted); font-size: 14.5px; margin-top: 8px; line-height: 1.55; }

/* ---------- pricing ---------- */
.price { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 780px; margin: 0 auto; }
.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 32px; box-shadow: var(--shadow-sm); }
.pcard.feature { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); position: relative; }
.pcard .pname { font-size: 18px; font-weight: 700; color: var(--ink); }
.pcard .pp { font-size: 46px; font-weight: 700; color: var(--ink); margin: 14px 0 2px; letter-spacing: -0.03em; }
.pcard .pp .per { font-size: 16px; color: var(--muted); font-weight: 500; }
.pcard .pcur { font-size: 12.5px; color: var(--faint); margin-bottom: 20px; }
.pcard ul { list-style: none; margin-bottom: 22px; }
.pcard li { padding: 7px 0; font-size: 14.5px; color: var(--ink-2); display: flex; gap: 10px; align-items: center; }
.pcard li::before { content: "✓"; color: var(--up); font-weight: 700; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line-2); padding: 36px 0; margin-top: 40px; color: var(--faint); font-size: 13px; }
.footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero h1 { font-size: 42px; }
  .cards, .price, .statband .grid { grid-template-columns: 1fr; }
}

/* ============================================================
   COMPONENT LAYER (inner pages: register, login, dashboard,
   course/horse/jockey/trainer terminals, matchup, scanner)
   Same light + pure-blue palette as the landing.
   ============================================================ */

/* ---------- panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
.panel-h {
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  padding: 11px 16px; color: var(--accent);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
  display: flex; align-items: center; gap: 10px;
}
.panel-h .right-ml { margin-left: auto; color: var(--faint); font-weight: 500; letter-spacing: 0.02em; text-transform: none; font-size: 12px; }
.panel-b { padding: 16px; }
.panel-body-flush { padding: 0; }

/* ---------- status tags ---------- */
.tag {
  display: inline-block; padding: 2px 8px; font-size: 10.5px; font-weight: 700;
  border: 1px solid var(--accent); color: var(--accent); border-radius: 5px;
  text-transform: uppercase; letter-spacing: 0.05em; line-height: 18px; white-space: nowrap;
}
.tag.ok   { border-color: var(--up);   color: var(--up); }
.tag.err  { border-color: var(--down); color: var(--down); }
.tag.warn { border-color: var(--warn); color: var(--warn); }
.tag.info { border-color: var(--accent-2); color: var(--accent-2); }
.tag.live::before { content: "●"; color: var(--down); margin-right: 4px; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* ---------- data tables ---------- */
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th {
  text-align: left; color: var(--faint); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px;
  padding: 9px 16px; border-bottom: 1px solid var(--line); white-space: nowrap;
  background: var(--bg-2);
}
table.tbl td { padding: 9px 16px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
table.tbl tbody tr { transition: background .12s; }
table.tbl tbody tr:hover { background: var(--accent-soft); cursor: pointer; }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl tr.sel td { background: var(--accent-soft); }

/* ---------- tabs ---------- */
.tabs { display: flex; border-bottom: 1px solid var(--line); gap: 2px; margin-bottom: 16px; }
.tabs button {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  padding: 9px 16px; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.tabs button.pro-tab { color: var(--warn); border-bottom-color: var(--warn); }
.tabs button.pro-tab:hover { color: var(--warn); }
.tabs button.pro-tab.on { color: var(--warn); border-bottom-color: var(--warn); background: rgba(245,158,11,0.08); }

/* ---------- bar gauge ---------- */
.gauge { display: inline-flex; align-items: center; gap: 8px; }
.gauge .track { display: inline-block; width: 90px; height: 7px; background: var(--bg-2); border-radius: 4px; overflow: hidden; }
.gauge .fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.gauge .fill.up { background: linear-gradient(90deg, #16a34a, #4ade80); }
.gauge .fill.down { background: var(--down); }
.gauge .v { font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 26px; font-weight: 600; }

/* ---------- probability bars ---------- */
.pbar-row { display: grid; grid-template-columns: 22px 1fr 64px; gap: 10px; align-items: center; padding: 3px 0; }
.pbar-row .num { color: var(--faint); font-size: 12px; text-align: right; }
.pbar-track { position: relative; height: 22px; background: var(--bg-2); border-radius: 5px; overflow: hidden; }
.pbar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(37,99,235,0.16), rgba(37,99,235,0.30)); }
.pbar-fill.pick { background: linear-gradient(90deg, rgba(22,163,74,0.16), rgba(74,222,128,0.30)); }
.pbar-fill.value { background: linear-gradient(90deg, rgba(37,99,235,0.30), rgba(59,130,246,0.45)); }
.pbar-label { position: absolute; left: 8px; top: 3px; color: var(--ink); font-size: 12px; white-space: nowrap; overflow: hidden; font-weight: 500; }
.pbar-pct { text-align: right; font-size: 12px; line-height: 1.25; }
.pbar-pct .p { color: var(--ink); font-weight: 600; }
.pbar-pct .c { color: var(--faint); font-size: 10.5px; }

/* ---------- stat tiles (inner) ---------- */
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 13px 16px; box-shadow: var(--shadow-sm); }
.stat .k { color: var(--faint); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.08em; font-weight: 600; }
.stat .v { color: var(--ink); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 3px; letter-spacing: -0.02em; }
.stat .v.up { color: var(--accent); }

/* ---------- buttons (inner variants) ---------- */
.btn.sm { padding: 7px 13px; font-size: 12.5px; }
.btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.btn.ghost:hover { border-color: var(--accent-3); color: var(--accent); }

/* ---------- forms ---------- */
input, select, textarea {
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--sans); font-size: 14px; padding: 9px 12px; border-radius: 9px; outline: none;
  transition: border-color .15s, box-shadow .15s; width: 100%;
}
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.label { color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; font-weight: 700; }
.flash { background: #fef2f2; border: 1px solid #fecaca; color: var(--down); padding: 10px 13px; border-radius: 9px; font-size: 13.5px; margin-bottom: 12px; }

/* ---------- search bar (inner) ---------- */
.searchbar { background: var(--surface); border-bottom: 1px solid var(--line); padding: 9px 28px; display: flex; align-items: center; gap: 12px; position: relative; }
.searchbar .prompt { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.searchbar input { flex: 1; max-width: 540px; background: transparent; border: 1px solid transparent; padding: 6px 0; box-shadow: none; }
.searchbar input:focus { border-color: transparent; box-shadow: none; }
#sr { position: absolute; left: 28px; right: 28px; margin-top: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; z-index: 60; box-shadow: var(--shadow); overflow: hidden; }
#sr a.muted-link { display: block; padding: 8px 14px; border-bottom: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2); }
#sr a.muted-link:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }

/* ---------- helpers ---------- */
.dim { color: var(--muted); } .mute, .muted { color: var(--faint); }
.amber { color: var(--accent); } .cyan { color: var(--accent-2); }
.up { color: var(--up); } .down { color: var(--down); }
.num { font-variant-numeric: tabular-nums; } .caps { text-transform: uppercase; letter-spacing: 0.06em; }
.hide { display: none; } .flex { display: flex; } .between { justify-content: space-between; } .aic { align-items: center; }
.right { text-align: right; } .center { text-align: center; } .nowrap { white-space: nowrap; }
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:14px}.mt-4{margin-top:22px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:14px}.mb-4{margin-bottom:22px}
.kvs { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13.5px; }
.kvs .k { color: var(--faint); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.06em; font-weight: 700; }
.tagline { color: var(--accent); text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; }
.muted-link { color: var(--muted); } .muted-link:hover { color: var(--accent); text-decoration: none; }
main { padding: 22px 0 40px; }
@media (max-width: 920px) {
  main { padding: 16px 0 30px; }
  .wrap { padding: 0 18px; }
}

/* ---------- auth (login / register) — split screen ---------- */
.auth-wrap { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
.auth-brand {
  position: relative; padding: 56px; display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(60% 55% at 78% 8%, rgba(37,99,235,0.42), transparent 60%),
    radial-gradient(45% 50% at 12% 92%, rgba(96,165,250,0.18), transparent 60%),
    linear-gradient(135deg, #071033 0%, #0e1b52 55%, #08123a 100%);
  color: #e8ecf5; overflow: hidden;
}
.auth-brand .abr-top { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; color: #fff; }
.auth-brand .abr-top .mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #fff; }
.auth-brand .abr-top .a { color: #7cb5ff; }
.auth-brand .abr-mid h2 { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; color: #fff; }
.auth-brand .abr-mid h2 em { font-style: normal; color: #7cb5ff; }
.auth-brand .abr-mid p { color: #b8c0db; font-size: 15.5px; margin-top: 14px; max-width: 440px; line-height: 1.55; }
.auth-brand .abr-mid ul { list-style: none; margin-top: 26px; }
.auth-brand .abr-mid li { padding: 7px 0; color: #cfd5ea; font-size: 14.5px; display: flex; gap: 11px; align-items: center; }
.auth-brand .abr-mid li::before { content: "✓"; color: #60a5fa; font-weight: 800; }
.auth-brand .abr-stats { display: flex; gap: 36px; }
.auth-brand .abr-stats .n { font-size: 26px; font-weight: 700; color: #7cb5ff; letter-spacing: -0.02em; }
.auth-brand .abr-stats .l { font-size: 12px; color: #8b93ab; margin-top: 2px; }

.auth-main { display: flex; align-items: center; justify-content: center; padding: 40px 28px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card .ac-logo { display: none; align-items: center; gap: 10px; font-weight: 700; font-size: 22px; color: var(--ink); margin-bottom: 26px; }
.auth-card .ac-logo .mark { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #fff; }
.auth-card h1 { font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.auth-card .ac-sub { color: var(--muted); font-size: 14.5px; margin-top: 6px; margin-bottom: 26px; }
.auth-card .field { margin-bottom: 14px; }
.auth-card .field .label { display: block; margin-bottom: 6px; }
.auth-card .btn { width: 100%; margin-top: 8px; }
.auth-card .ac-switch { text-align: center; margin-top: 22px; color: var(--muted); font-size: 13.5px; }
.auth-card .ac-back { display: block; text-align: center; margin-top: 14px; color: var(--faint); font-size: 12.5px; }

@media (max-width: 900px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-card .ac-logo { display: flex; }
}

/* ---------- logo image ---------- */
img.logo { display: block; width: 34px; height: 34px; border-radius: 9px; object-fit: cover; box-shadow: 0 4px 12px -3px rgba(0,0,0,.45); }
.ac-logo img.logo { width: 36px; height: 36px; }

/* ---------- SVG icons (Lucide-style) ---------- */
.ic svg { width: 22px; height: 22px; color: var(--accent); display: block; }
.flash svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; color: inherit; }

/* ---------- integrated search (in topbar) ---------- */
.search { position: relative; flex: 1; max-width: 400px; margin: 0 16px; }
.search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--faint); pointer-events: none; z-index: 2; }
.search input { width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 9px; padding: 8px 12px 8px 36px; color: var(--ink); font-size: 13.5px; box-shadow: none; }
.search input::placeholder { color: var(--faint); }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }
.search #sr { left: 0; right: 0; top: calc(100% + 8px); margin: 0; max-height: 70vh; overflow-y: auto; }
.topbar .who-email { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 920px) {
  .nav { display: none; }
  .search { max-width: none; margin: 0 10px; }
}

/* ---------- showcase (Race Terminal mockup) ---------- */
.showcase { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.showcase-text h2, .steps-h h2, .depth-h h2 { font-family: var(--display); font-weight: 700; font-size: 38px; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; }
.showcase-text h2 em, .depth-h h2 em { font-style: normal; color: var(--accent); }
.showcase-text p { color: var(--muted); font-size: 16px; margin-top: 14px; max-width: 460px; line-height: 1.6; }
.showcase-text ul { list-style: none; margin-top: 20px; }
.showcase-text li { padding: 6px 0; color: var(--ink-2); font-size: 14.5px; display: flex; gap: 10px; align-items: flex-start; }
.showcase-text li svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }

.term-mock { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.term-mock-head { background: var(--bg-2); padding: 10px 14px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line); }
.term-mock-head .d { width: 11px; height: 11px; border-radius: 50%; background: var(--bg-4); }
.term-mock-head .t { margin-left: 10px; color: var(--faint); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; }
.term-mock-body { padding: 18px; }
.tm-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.tm-side { display: flex; flex-direction: column; gap: 8px; }
.tm-sig { background: var(--bg-2); border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: 7px; padding: 8px 11px; }
.tm-sig .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); font-weight: 700; }
.tm-sig .v { font-size: 13px; color: var(--ink); font-weight: 600; margin-top: 1px; }
.tm-sig .v .a { color: var(--accent); }

/* ---------- features 6-grid ---------- */
.feat6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ---------- how it works (steps) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px; position: relative; }
.step .num { font-family: var(--display); font-size: 34px; font-weight: 700; color: var(--accent); opacity: 0.25; line-height: 1; }
.step .sic { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft); display: grid; place-items: center; margin: 8px 0 14px; }
.step .sic svg { width: 22px; height: 22px; color: var(--accent); }
.step h3 { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.step p { color: var(--muted); font-size: 14px; margin-top: 7px; line-height: 1.5; }

/* ---------- data depth ---------- */
.depth { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.depth-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.depth-stats .ds { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.depth-stats .ds .n { font-family: var(--display); font-size: 30px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; }
.depth-stats .ds .l { color: var(--muted); font-size: 13px; margin-top: 4px; }
.depth-text p { color: var(--muted); font-size: 16px; margin-top: 14px; max-width: 440px; line-height: 1.6; }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; margin-bottom: 10px; overflow: hidden; }
.faq summary { padding: 16px 20px; cursor: pointer; font-weight: 600; color: var(--ink); font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 20px; font-weight: 700; }
.faq details[open] summary::after { content: "−"; }
.faq .a { padding: 0 20px 16px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* ---------- final CTA band ---------- */
.cta-band {
  margin-top: 20px; padding: 56px 40px; border-radius: 20px; text-align: center;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(37,99,235,0.35), transparent 70%),
    linear-gradient(135deg, #071033 0%, #0e1b52 100%);
  border: 1px solid var(--line);
}
.cta-band h2 { font-family: var(--display); font-weight: 700; font-size: 36px; color: #fff; letter-spacing: -0.03em; }
.cta-band p { color: #c3c8e0; font-size: 16px; margin-top: 10px; }
.cta-band .btn { margin-top: 24px; }

@media (max-width: 920px) {
  .showcase, .depth, .feat6, .steps { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE / RESPONSIVE
   ============================================================ */
.menu-btn { display: none; background: transparent; border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; cursor: pointer; align-items: center; justify-content: center; }
.menu-btn svg { width: 20px; height: 20px; color: var(--ink); }
.nav-mobile {
  display: none; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px; margin-top: 10px; box-shadow: var(--shadow);
}
.nav-mobile.open { display: flex; }
.nav-mobile a { padding: 10px 12px; border-radius: 8px; color: var(--ink-2); font-weight: 500; }
.nav-mobile a:hover { background: var(--accent-soft); color: var(--accent); }
.nav-mobile .lang-switch { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line-2); margin-top: 4px; }

/* horizontally scrollable tables on small screens */
@media (max-width: 720px) {
  .panel:has(table.tbl) .panel-b,
  .panel:has(table.tbl).panel-body-flush,
  .panel:has(table.tbl) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .panel:has(table.tbl) .tbl { min-width: 520px; }
}

/* responsive 2-col inline grids -> stack */
.resp2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) {
  .resp2.main-side { grid-template-columns: 1fr 320px; }
  .resp2.split { grid-template-columns: 1.3fr 1fr; gap: 12px; }
  .resp2.half { grid-template-columns: 1fr 1fr; }
}

/* desktop hide menu button, show nav */
@media (min-width: 921px) {
  .menu-btn { display: none; }
  .nav { display: flex; }
}
/* mobile: hide inline nav, show menu button + mobile drawer */
@media (max-width: 920px) {
  .topbar-inner { gap: 14px; height: 60px; }
  .brand .name { font-size: 18px; }
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .right .dim, .right .who-email { display: none; }
  .langswitch.desktop { display: none; }      /* hide login text on mobile, keep button */
  .hero { padding: 56px 0 50px; }
  .hero h1 { font-size: 36px; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-card { padding: 18px; }
  .showcase, .depth { grid-template-columns: 1fr; gap: 30px; }
  .showcase-text h2, .depth-h h2, .section-h h2, .cta-band h2 { font-size: 28px; }
  .feat6 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .price { grid-template-columns: 1fr; }
  .statband .grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .statband .s { padding: 16px; }
  .statband .s .n { font-size: 26px; }
  .tm-row { grid-template-columns: 1fr; }
  .depth-stats { grid-template-columns: 1fr 1fr; }
  .hc-stats, .hero-card .hc-stats { grid-template-columns: 1fr 1fr; }
  .auth-wrap { grid-template-columns: 1fr; min-height: auto; }
  .wrap { padding: 0 16px; }
  main { padding: 16px 0 30px; }
  .grid-5 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 30px; }
  .statband .grid, .depth-stats, .grid-5 { grid-template-columns: 1fr; }
}

/* ---------- desktop language switch ---------- */
.langswitch { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.langswitch a { color: var(--faint); padding: 3px 6px; border-radius: 5px; text-decoration: none; }
.langswitch a:hover { color: var(--ink); background: var(--bg-2); }
.langswitch a.a { color: var(--accent); background: var(--accent-soft); }
.langswitch .sep { color: var(--faint); opacity: 0.45; }

/* ---------- comparison table (pricing) ---------- */
.cmp-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
table.cmp-tbl { width: 100%; border-collapse: collapse; }
table.cmp-tbl th, table.cmp-tbl td { padding: 13px 18px; border-bottom: 1px solid var(--line-2); text-align: left; font-size: 14px; }
table.cmp-tbl th { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; background: var(--bg-2); }
table.cmp-tbl th.col-f, table.cmp-tbl th.col-p { text-align: center; }
table.cmp-tbl td.feat { color: var(--ink-2); font-weight: 500; }
table.cmp-tbl td.cell { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
table.cmp-tbl td.y { color: var(--up); }
table.cmp-tbl td.n { color: var(--faint); }
table.cmp-tbl td.lim { color: var(--warn); font-size: 12.5px; }
table.cmp-tbl td.col-p { background: rgba(37,99,235,0.06); }
table.cmp-tbl tbody tr:hover { background: transparent; cursor: default; }
.plan-desc { color: var(--muted); font-size: 13.5px; margin: 8px 0 16px; min-height: 38px; }

/* ---------- toast (post register/login) ---------- */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 100;
  background: var(--surface); border: 1px solid var(--accent);
  color: var(--ink); padding: 14px 18px 14px 14px; border-radius: 12px;
  box-shadow: var(--shadow); display: flex; align-items: center; gap: 11px;
  font-size: 14px; font-weight: 500; max-width: 380px;
  animation: toast-in .35s cubic-bezier(.2,.8,.2,1);
}
.toast svg { width: 20px; height: 20px; color: var(--up); flex-shrink: 0; }
.toast.hide { opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .4s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) { .toast { left: 16px; right: 16px; bottom: 16px; max-width: none; } }

/* live clock (red) */
#clock { color: var(--down); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
#clock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--down); display: inline-block; animation: blink 1.4s infinite; box-shadow: 0 0 8px var(--down); }

/* pricing reassurance + grouped comparison */
.reassure { display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin:20px 0 6px; }
.reassure .r { display:flex; align-items:center; gap:7px; color: var(--muted); font-size:13px; }
.reassure .r svg { width:15px; height:15px; color: var(--up); flex-shrink:0; }
table.cmp-tbl tr.group td { background: var(--bg-2); color: var(--accent); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; padding: 9px 18px; border-bottom: 1px solid var(--line); }
table.cmp-tbl tr.group:hover td { background: var(--bg-2) !important; }

/* date picker (dark-friendly) */
input[type="date"] { color-scheme: dark; cursor: pointer; padding: 7px 10px; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.85); cursor: pointer; opacity: 0.9; }

/* ---------- flatpickr (WHITE theme) + date icon ---------- */
.dp-wrap { position: relative; display: inline-flex; align-items: center; }
.dp-wrap input { width: 150px; padding-right: 30px; cursor: pointer; }
.dp-icon { position: absolute; right: 8px; width: 15px; height: 15px; color: var(--accent); pointer-events: none; display: block; }
.flatpickr-calendar { background: #ffffff !important; border: 1px solid #d6dae3; box-shadow: 0 24px 60px -20px rgba(0,0,0,.55); color: #14241c; }
.flatpickr-calendar.open { z-index: 9999; }
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { display: none; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month span.cur-month { color: #14241c; }
.flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: #14241c; }
.flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: #14241c; }
.flatpickr-current-month input.cur-year, .flatpickr-monthDropdown-months { color: #14241c !important; }
.flatpickr-monthDropdown-month { background: #ffffff; color: #14241c; }
.flatpickr-monthDropdown-month:hover { background: #eef2fb; }
.flatpickr-weekday { color: #6b7484; fill: #6b7484; font-weight: 600; }
.flatpickr-days, .dayContainer { border: none; }
span.flatpickr-day { color: #2a3344; border-radius: 7px; border: 1px solid transparent; }
.flatpickr-day:hover { background: #eef2fb; border-color: #eef2fb; color: #14241c; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #aab2c0; }
.flatpickr-day.today { border-color: var(--accent); color: #14241c; font-weight: 700; }
.flatpickr-day.today:hover { border-color: var(--accent); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.selected.nextMonthDay {
  background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important;
}
.flatpickr-prev-month, .flatpickr-next-month { fill: #2a3344; color: #2a3344; }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: var(--accent); }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: #2a3344; fill: #2a3344; }

/* ---------- global loader (top progress bar) + search spinner ---------- */
#loader { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); z-index: 200; box-shadow: 0 0 12px var(--accent); opacity: 0; }
#loader.go { opacity: 1; animation: loadergrow 9s ease-out forwards; }
@keyframes loadergrow { from { width: 0; } to { width: 80vw; } }
.search-spin { display: none; position: absolute; right: 12px; top: 50%; margin-top: -8px; width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
.search-spin.htmx-request { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* flatpickr white — bulletproof contrast */
.flatpickr-calendar, .flatpickr-calendar * { color-scheme: light; }
.flatpickr-calendar .flatpickr-day,
.flatpickr-calendar .flatpickr-weekday,
.flatpickr-calendar .flatpickr-monthDropdown-month,
.flatpickr-calendar .flatpickr-current-month,
.flatpickr-calendar .flatpickr-current-month * { color: #1a2230; }
.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay { color: #b8bfcc; }
.flatpickr-calendar .flatpickr-day.inRange,
.flatpickr-calendar .flatpickr-day.inRange:hover { background: #e8edf7; border-color: #e8edf7; color: #1a2230; }

/* masquer les jours grisés hors-mois (évite la confusion "dates vides") */
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { visibility: hidden; }

/* quinté badge (red) */
.tag.quinte { border-color: var(--down); color: var(--down); font-weight: 700; background: rgba(239,68,68,0.08); margin-left: 5px; }

/* reunion group headers (dashboard) */
tr.reunion-row td { background: var(--bg-2) !important; padding: 8px 14px; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
tr.reunion-row:hover td { background: var(--bg-2) !important; cursor: default !important; }
.reunion-badge { display: inline-block; background: var(--accent); color: #fff; font-weight: 700; font-size: 11px; padding: 2px 8px; border-radius: 5px; margin-right: 8px; }
.reunion-hippo { color: var(--ink); font-weight: 600; font-size: 13px; }
.reunion-disc { font-size: 12px; margin-left: 6px; }
/* 3-column pricing */
.price-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 920px) { .price-3 { grid-template-columns: 1fr; } }

/* user avatar (initials) */
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: 0.5px; flex-shrink: 0; text-decoration: none; transition: transform .15s; }
.avatar:hover { transform: scale(1.08); text-decoration: none; }
.who-avatar { display: flex; align-items: center; gap: 8px; }
.who-avatar .who-email-text { font-size: 13px; color: var(--text-dim); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 920px) { .who-avatar .who-email-text { display: none; } }

/* avatar with PRO/FREE badge */
.avatar-wrap { position: relative; display: inline-block; flex-shrink: 0; }
.avatar-wrap:hover .avatar { transform: scale(1.08); }
.avatar-badge { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); font-size: 8px; font-weight: 800; letter-spacing: 0.5px; padding: 1px 5px; border-radius: 4px; white-space: nowrap; line-height: 1.4; }
.avatar-badge.pro { background: var(--up); color: #fff; }
.avatar-badge.free { background: var(--bg-4); color: var(--text-dim); border: 1px solid var(--line); }

/* lang toggle (pill button) */
.langtoggle { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.langtoggle a { display: inline-flex; align-items: center; padding: 4px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--faint); text-decoration: none; transition: all .15s; }
.langtoggle a:hover { color: var(--ink); }
.langtoggle a.a { background: var(--accent); color: #fff; }
.langtoggle a+a { border-left: 1px solid var(--line); }

/* account page — professional */
.acc-header { display: flex; align-items: center; gap: 16px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 20px; }
.acc-header .avatar { width: 56px; height: 56px; font-size: 20px; }
.acc-header .avatar-badge { font-size: 9px; padding: 2px 7px; bottom: -3px; }
.acc-header .acc-info h2 { font-size: 20px; font-weight: 700; color: var(--ink); }
.acc-header .acc-info .email { font-size: 13px; color: var(--muted); }
.acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .acc-grid { grid-template-columns: 1fr; } }
.acc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.acc-card .acc-card-h { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--accent); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 8px; }
.acc-card .acc-card-h svg { width: 16px; height: 16px; }
.acc-card .acc-card-b { padding: 16px; }
.acc-card input { margin-bottom: 8px; }
.acc-card .btn { margin-top: 4px; }
.acc-stat { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.acc-stat:last-child { border-bottom: none; }
.acc-stat .label { color: var(--muted); font-size: 13px; }
.acc-stat .value { color: var(--ink); font-weight: 600; font-size: 14px; }
.acc-flash { padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; }
.acc-flash.ok { background: rgba(34,197,94,0.1); border: 1px solid var(--up); color: var(--up); }
.acc-flash.err { background: rgba(239,68,68,0.1); border: 1px solid var(--down); color: var(--down); }
.acc-ref-box { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
.acc-ref-box code { flex: 1; font-size: 12px; color: var(--accent-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-dl-btn { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; color: var(--ink-2); font-size: 12px; transition: all .15s; text-decoration: none; }
.acc-dl-btn:hover { border-color: var(--accent); color: var(--accent); }
.acc-dl-btn .sz { color: var(--faint); font-size: 11px; }