/* ==========================================================================
   ANGELRACE — Design System
   Palette: midnight track-night navy + halo gold + win-violet + pace-teal
   Type: Bebas Neue (display / saddlecloth numerals) · Inter (body) · JetBrains Mono (data)
   Signature: the Halo Gauge — a horseshoe-shaped arc that is also a halo
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  /* --- color --- */
  --bg:        #0A0E1B;
  --bg-elev:   #0E1426;
  --card:      #131A31;
  --card-hi:   #182040;
  --line:      #232C4C;
  --line-soft: #1A2140;

  --text:      #F3F1E8;
  --text-dim:  #A6AFCB;
  --text-mute: #6B7392;

  --gold:      #F2B441;   /* AngelScore / halo */
  --gold-dim:  #6E552A;
  --violet:    #9B6BFF;   /* AngelWin probability */
  --violet-dim:#3B2E6E;
  --teal:      #2FE0C4;   /* Pace / speed */
  --teal-dim:  #1B5C51;
  --green:     #38D68C;   /* Value / positive */
  --red:       #FF6B6B;   /* Risk / negative */
  --magenta:   #FF4FA3;   /* Dark Angel */

  --grad-halo: conic-gradient(from -90deg, var(--gold), var(--violet), var(--teal), var(--gold));

  /* --- type --- */
  --f-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', 'SFMono-Regular', monospace;

  /* --- layout --- */
  --maxw: 1240px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 20px 40px -24px rgba(0,0,0,0.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(155,107,255,0.14), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(47,224,196,0.10), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

h1,h2,h3,h4{font-family:var(--f-display); letter-spacing:0.01em; margin:0; font-weight:400;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;}

.mono{font-family:var(--f-mono);}
.dim{color:var(--text-dim);}
.mute{color:var(--text-mute);}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
@media (max-width:640px){ .wrap{padding:0 18px;} }

/* ---------- top nav ---------- */
.topnav{
  position:sticky; top:0; z-index:40;
  background:rgba(10,14,27,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.topnav .row{display:flex; align-items:center; justify-content:space-between; height:66px; gap:20px;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-size:22px; letter-spacing:0.03em;}
.brand .mark{
  width:26px; height:26px; border-radius:50%;
  background:var(--grad-halo);
  box-shadow:0 0 14px rgba(242,180,65,0.55);
}
.brand small{font-family:var(--f-mono); font-size:9px; letter-spacing:0.18em; color:var(--text-mute); font-weight:600; margin-left:2px;}
.navlinks{display:flex; gap:26px; font-size:14px; color:var(--text-dim); font-weight:500;}
.navlinks a{padding:6px 2px; border-bottom:2px solid transparent; transition:color .15s, border-color .15s;}
.navlinks a:hover, .navlinks a.active{color:var(--text); border-color:var(--gold);}
.navcta{display:flex; align-items:center; gap:12px;}
@media (max-width:860px){ .navlinks{display:none;} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:999px; font-size:14px; font-weight:700;
  border:1px solid transparent; cursor:pointer; transition:transform .15s, box-shadow .15s, background .15s, border-color .15s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-gold{background:linear-gradient(180deg, #FFCE6B, var(--gold)); color:#1A1300; box-shadow:0 8px 20px -8px rgba(242,180,65,0.55);}
.btn-gold:hover{box-shadow:0 10px 24px -6px rgba(242,180,65,0.7);}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--text);}
.btn-ghost:hover{border-color:var(--text-dim);}
.btn-violet{background:linear-gradient(180deg,#B892FF,var(--violet)); color:#100826; box-shadow:0 8px 20px -8px rgba(155,107,255,0.55);}
.btn-sm{padding:8px 14px; font-size:12.5px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.45; cursor:not-allowed; box-shadow:none;}

/* ---------- pills / badges ---------- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px; font-size:11.5px; font-weight:600;
  border:1px solid var(--line); color:var(--text-dim); font-family:var(--f-mono);
  letter-spacing:0.02em;
}
.pill-gold{border-color:var(--gold-dim); color:var(--gold); background:rgba(242,180,65,0.08);}
.pill-violet{border-color:var(--violet-dim); color:var(--violet); background:rgba(155,107,255,0.10);}
.pill-teal{border-color:var(--teal-dim); color:var(--teal); background:rgba(47,224,196,0.08);}
.pill-green{border-color:#1c4a35; color:var(--green); background:rgba(56,214,140,0.08);}
.pill-red{border-color:#4a1c1c; color:var(--red); background:rgba(255,107,107,0.08);}
.pill-magenta{border-color:#4a1c3a; color:var(--magenta); background:rgba(255,79,163,0.08);}

/* ---------- cards ---------- */
.card{
  background:linear-gradient(180deg, var(--card-hi), var(--card));
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}
.card-pad{padding:24px;}

/* ---------- finish-line divider (signature structural device) ---------- */
.finish{
  display:flex; align-items:center; gap:14px; margin:64px 0 28px;
  color:var(--text-mute); font-family:var(--f-mono); font-size:11px; letter-spacing:0.24em; text-transform:uppercase;
}
.finish::before, .finish::after{
  content:""; flex:1; height:0;
  border-top:2px dashed var(--line);
}
.finish b{color:var(--text-dim); font-weight:600;}

/* ---------- section headers ---------- */
.eyebrow{font-family:var(--f-mono); font-size:11.5px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; display:block;}
.h1{font-size:clamp(40px, 6vw, 74px); line-height:0.98;}
.h2{font-size:clamp(28px, 4vw, 40px); line-height:1.02;}
.sub{color:var(--text-dim); font-size:17px; max-width:60ch; line-height:1.6;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line-soft); margin-top:90px; padding:40px 0 60px; color:var(--text-mute); font-size:13px;}
footer .fgrid{display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; margin-bottom:28px;}
footer a{color:var(--text-dim);}
footer a:hover{color:var(--gold);}
.disclosure{
  border:1px solid var(--line-soft); background:var(--bg-elev); border-radius:var(--radius-sm);
  padding:14px 16px; font-size:12.5px; color:var(--text-mute); line-height:1.6;
}

/* ---------- generic grids ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:900px){ .grid-3, .grid-4{grid-template-columns:repeat(2,1fr);} .grid-2{grid-template-columns:1fr;} }
@media (max-width:560px){ .grid-3, .grid-4{grid-template-columns:1fr;} }

/* ---------- halo gauge (signature element) ---------- */
.halo-wrap{position:relative; width:280px; height:280px; margin:0 auto;}
.halo-ring{
  position:absolute; inset:0; border-radius:50%;
  background:var(--grad-halo);
  filter:blur(0.3px);
  animation:spin 14s linear infinite;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px));
}
.halo-glow{position:absolute; inset:-30px; border-radius:50%; background:radial-gradient(circle, rgba(242,180,65,0.18), transparent 65%); pointer-events:none;}
.halo-core{
  position:absolute; inset:16px; border-radius:50%;
  background:radial-gradient(120% 120% at 30% 20%, #1a2140, #0A0E1B);
  border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.halo-core .score{font-family:var(--f-display); font-size:64px; line-height:1; color:var(--text);}
.halo-core .label{font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.2em; color:var(--text-mute); margin-top:6px;}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- progress / meter bars ---------- */
.meter{height:8px; border-radius:999px; background:var(--line-soft); overflow:hidden; position:relative;}
.meter > span{display:block; height:100%; border-radius:999px; transition:width .5s cubic-bezier(.2,.8,.2,1);}
.meter.gold > span{background:linear-gradient(90deg,#a97a1f,var(--gold));}
.meter.violet > span{background:linear-gradient(90deg,#5a3ea8,var(--violet));}
.meter.teal > span{background:linear-gradient(90deg,#1a6459,var(--teal));}
.meter.green > span{background:linear-gradient(90deg,#1e6b46,var(--green));}

/* ---------- tables ---------- */
table{width:100%; border-collapse:collapse; font-size:14px;}
th{text-align:left; font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-mute); font-weight:600; padding:0 10px 10px;}
td{padding:14px 10px; border-top:1px solid var(--line-soft); vertical-align:middle;}
tr.rowlink{cursor:pointer; transition:background .12s;}
tr.rowlink:hover{background:rgba(255,255,255,0.02);}

/* ---------- form controls ---------- */
.field{display:flex; flex-direction:column; gap:7px;}
.field label{font-size:12px; color:var(--text-dim); font-weight:600; display:flex; justify-content:space-between;}
.field select, .field input[type=number], .field input[type=text]{
  background:var(--bg-elev); border:1px solid var(--line); color:var(--text);
  border-radius:var(--radius-sm); padding:10px 12px; font-family:var(--f-mono); font-size:14px;
}
input[type=range]{
  -webkit-appearance:none; width:100%; height:6px; border-radius:999px; background:var(--line-soft); outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--gold); border:3px solid #1A1300; cursor:pointer; box-shadow:0 0 0 2px rgba(242,180,65,0.35);
}
.seg{display:flex; border:1px solid var(--line); border-radius:999px; padding:3px; gap:3px;}
.seg button{
  flex:1; background:transparent; border:none; color:var(--text-dim); padding:8px 14px; border-radius:999px;
  font-size:12.5px; font-weight:700; cursor:pointer; transition:background .15s, color .15s;
}
.seg button.active{background:var(--gold); color:#1A1300;}

/* ---------- misc ---------- */
.flex{display:flex;}
.between{justify-content:space-between;}
.center{align-items:center;}
.gap8{gap:8px;} .gap12{gap:12px;} .gap16{gap:16px;} .gap24{gap:24px;}
.mt8{margin-top:8px;} .mt16{margin-top:16px;} .mt24{margin-top:24px;} .mt32{margin-top:32px;} .mt48{margin-top:48px;}
.mb8{margin-bottom:8px;} .mb16{margin-bottom:16px;} .mb24{margin-bottom:24px;}
.tag-strength{color:var(--green);}
.tag-risk{color:var(--red);}
.small{font-size:12.5px;}
.hidden{display:none !important;}
.skeleton{background:linear-gradient(90deg,var(--line-soft),var(--line),var(--line-soft)); background-size:200% 100%; animation:shimmer 1.4s infinite;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}