/* ==========================================================================
   Densu Sim Racing — Design System
   Signature element: the "timing strip" — a pit-wall style bar with a
   cyan scanline edge, used for dividers, nav underlines and data readouts.
   ========================================================================== */

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

:root{
  --dsr-night:   #0A0E1A;
  --dsr-navy:    #121A33;
  --dsr-navy-2:  #182448;
  --dsr-blue:    #2B5CFF;
  --dsr-blue-2:  #6E93FF;
  --dsr-cyan:    #33D6FF;
  --dsr-ice:     #FFFFFF;
  --dsr-white:   #F3F6FC;
  --dsr-muted:   #8A93AC;
  --dsr-line:    rgba(243,246,252,0.09);
  --dsr-green:   #3ED598;
  --dsr-red:     #FF5C6C;

  --font-display: 'Rajdhani', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius: 10px;
  --container: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--dsr-night);
  color:var(--dsr-white);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(43,92,255,0.18), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(51,214,255,0.10), transparent 60%);
  pointer-events:none;
  z-index:0;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; letter-spacing:0.01em; margin:0 0 .5em; text-transform:uppercase; }
h1{ font-size:clamp(2.4rem,5vw,4.2rem); line-height:1.02; }
h2{ font-size:clamp(1.6rem,3vw,2.3rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1em; color:var(--dsr-muted); }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; position:relative; z-index:1; }
::selection{ background:var(--dsr-cyan); color:var(--dsr-night); }
:focus-visible{ outline:2px solid var(--dsr-cyan); outline-offset:2px; }

/* eyebrow / kicker */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dsr-cyan);
}
.eyebrow::before{ content:""; width:18px; height:2px; background:var(--dsr-cyan); }

/* ---------- Timing strip (signature divider) ---------- */
.timing-strip{
  position:relative;
  height:3px;
  background:linear-gradient(90deg, var(--dsr-cyan) 0%, var(--dsr-blue) 40%, transparent 40%, transparent 46%, var(--dsr-ice) 46%, var(--dsr-ice) 52%, transparent 52%);
  background-size:220px 3px;
  opacity:.85;
  margin:0;
}
.timing-strip.thin{ height:2px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  font-size:.92rem;
  padding:13px 26px;
  border-radius:6px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary{ background:var(--dsr-cyan); color:var(--dsr-night); box-shadow:0 0 0 rgba(51,214,255,0); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(51,214,255,.25); }
.btn-outline{ background:transparent; color:var(--dsr-white); border-color:var(--dsr-line); }
.btn-outline:hover{ border-color:var(--dsr-cyan); color:var(--dsr-cyan); }
.btn-white{ background:var(--dsr-white); color:var(--dsr-night); border-color:var(--dsr-white); }
.btn-white:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(255,255,255,.18); background:var(--dsr-blue-2); border-color:var(--dsr-blue-2); color:var(--dsr-night); }
.btn-sm{ padding:8px 16px; font-size:.78rem; }
.btn-danger{ background:transparent; border-color:rgba(255,92,108,.4); color:var(--dsr-red); }
.btn-danger:hover{ background:rgba(255,92,108,.1); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,14,26,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--dsr-line);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px; }
.brand{ display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; flex-shrink:0; }
.brand img{ height:42px; width:auto; flex-shrink:0; }
.brand small{ display:block; font-family:var(--font-mono); font-size:.6rem; color:var(--dsr-cyan); letter-spacing:.18em; font-weight:400; text-transform:uppercase; white-space:nowrap; }

.main-nav{ display:flex; align-items:center; gap:2px; flex-wrap:nowrap; }
.main-nav a{
  position:relative;
  font-family:var(--font-display); font-weight:600; text-transform:uppercase; font-size:.8rem; letter-spacing:.02em;
  color:var(--dsr-muted);
  padding:10px 11px;
  white-space:nowrap;
  transition:color .15s ease;
}
.main-nav a:hover, .main-nav a.active{ color:var(--dsr-white); }
.main-nav a.active::after{
  content:""; position:absolute; left:11px; right:11px; bottom:4px; height:2px;
  background:var(--dsr-cyan);
}
.nav-cta{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-toggle{ display:none; background:none; border:0; color:var(--dsr-white); font-size:1.6rem; cursor:pointer; }

.live-pill{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 12px; border-radius:100px; border:1px solid var(--dsr-line); color:var(--dsr-muted);
}
.live-pill.is-live{ color:var(--dsr-red); border-color:rgba(255,92,108,.4); }
.live-pill .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.live-pill.is-live .dot{ animation:pulse 1.4s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:96px 0 80px;
  border-bottom:1px solid var(--dsr-line);
}
.hero::after{
  content:"";
  position:absolute; top:-20%; right:-10%; width:60%; height:140%;
  background:linear-gradient(115deg, transparent 0%, transparent 46%, rgba(51,214,255,.10) 46%, rgba(51,214,255,.10) 49%, transparent 49%, transparent 58%, rgba(255,255,255,.08) 58%, rgba(255,255,255,.08) 61%, transparent 61%);
  pointer-events:none;
}
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.hero h1{ margin-bottom:.4em; }
.hero h1 span{ color:var(--dsr-cyan); }
.hero-lead{ font-size:1.08rem; max-width:44ch; }
.hero-actions{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }

.next-race{
  background:var(--dsr-navy); border:1px solid var(--dsr-line); border-radius:var(--radius);
  padding:22px; position:relative; overflow:hidden;
}
.next-race .timing-strip{ position:absolute; top:0; left:0; right:0; }
.next-race-title{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:1.05rem; margin:14px 0 4px; }
.next-race-meta{ font-family:var(--font-mono); font-size:.78rem; color:var(--dsr-muted); margin-bottom:16px; }
.countdown{ display:flex; gap:10px; }
.countdown div{ flex:1; background:var(--dsr-navy-2); border-radius:6px; padding:10px 4px; text-align:center; }
.countdown .num{ font-family:var(--font-mono); font-size:1.5rem; font-weight:700; color:var(--dsr-cyan); }
.countdown .lbl{ font-family:var(--font-mono); font-size:.6rem; color:var(--dsr-muted); text-transform:uppercase; letter-spacing:.08em; }

/* ---------- Sections ---------- */
.section{ padding:76px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:36px; flex-wrap:wrap; }
.section-head p{ margin:0; max-width:52ch; }
.section-alt{ background:linear-gradient(180deg, transparent, rgba(18,26,51,.5), transparent); }

/* ---------- Cards ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card{
  background:var(--dsr-navy); border:1px solid var(--dsr-line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .18s ease, border-color .18s ease;
}
.card:hover{ transform:translateY(-4px); border-color:rgba(51,214,255,.35); }
.card-media{ aspect-ratio:16/10; background:var(--dsr-navy-2); position:relative; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; }
.card-tag{
  position:absolute; top:12px; left:12px;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(10,14,26,.8); color:var(--dsr-cyan); padding:4px 10px; border-radius:100px; border:1px solid var(--dsr-line);
}
.card-body{ padding:20px 20px 22px; flex:1; display:flex; flex-direction:column; }
.card-date{ font-family:var(--font-mono); font-size:.72rem; color:var(--dsr-muted); margin-bottom:8px; }
.card-body h3{ margin-bottom:.35em; }
.card-body p{ font-size:.92rem; flex:1; }
.card-link{ font-family:var(--font-mono); font-size:.78rem; color:var(--dsr-cyan); margin-top:10px; }

/* ---------- Event / results table ---------- */
.timing-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.timing-table th{
  text-align:left; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dsr-muted); padding:10px 14px; border-bottom:1px solid var(--dsr-line);
}
.timing-table td{ padding:14px; border-bottom:1px solid var(--dsr-line); vertical-align:middle; }
.timing-table tr:hover td{ background:rgba(51,214,255,.04); }
.status-pill{ display:inline-block; padding:4px 10px; border-radius:100px; font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; }
.status-upcoming{ background:rgba(51,214,255,.12); color:var(--dsr-cyan); }
.status-completed{ background:rgba(62,213,152,.12); color:var(--dsr-green); }
.status-cancelled{ background:rgba(255,92,108,.12); color:var(--dsr-red); }

/* ---------- Team roster ---------- */
.roster-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.driver-card{ background:var(--dsr-navy); border:1px solid var(--dsr-line); border-radius:var(--radius); padding:22px; text-align:center; }
.driver-avatar{
  width:76px; height:76px; border-radius:50%; margin:0 auto 14px;
  background:linear-gradient(140deg, var(--dsr-blue), var(--dsr-cyan));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--dsr-night);
  overflow:hidden; flex-shrink:0;
}
.driver-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.driver-card h3{ margin-bottom:2px; font-size:1.05rem; }
.driver-role{ font-family:var(--font-mono); font-size:.72rem; color:var(--dsr-cyan); text-transform:uppercase; letter-spacing:.05em; }

/* ---------- Forms ---------- */
.form-panel{ background:var(--dsr-navy); border:1px solid var(--dsr-line); border-radius:var(--radius); padding:32px; max-width:460px; margin:0 auto; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--dsr-muted); margin-bottom:7px; }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius:6px;
  background:var(--dsr-night); border:1px solid var(--dsr-line); color:var(--dsr-white);
  font-family:var(--font-body); font-size:.95rem;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--dsr-cyan); }
.field textarea{ resize:vertical; min-height:100px; }
.form-msg{ padding:12px 14px; border-radius:6px; font-size:.88rem; margin-bottom:18px; }
.form-msg.error{ background:rgba(255,92,108,.1); border:1px solid rgba(255,92,108,.3); color:var(--dsr-red); }
.form-msg.success{ background:rgba(62,213,152,.1); border:1px solid rgba(62,213,152,.3); color:var(--dsr-green); }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--dsr-line); padding:56px 0 28px; margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:40px; }
.footer-grid h4{ font-size:.85rem; color:var(--dsr-muted); letter-spacing:.08em; }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-grid a{ color:var(--dsr-muted); font-size:.92rem; }
.footer-grid a:hover{ color:var(--dsr-cyan); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-family:var(--font-mono); font-size:.75rem; color:var(--dsr-muted); }

/* ---------- Member / Admin app shell ---------- */
.app-shell{ display:grid; grid-template-columns:250px 1fr; min-height:100vh; }
.app-sidebar{ background:var(--dsr-navy); border-right:1px solid var(--dsr-line); padding:24px 18px; position:sticky; top:0; height:100vh; overflow-y:auto; }
.app-sidebar .brand{ margin-bottom:28px; }
.app-nav{ display:flex; flex-direction:column; gap:3px; }
.app-nav a{ padding:11px 14px; border-radius:6px; font-family:var(--font-display); font-weight:600; text-transform:uppercase; font-size:.85rem; letter-spacing:.02em; color:var(--dsr-muted); }
.app-nav a:hover{ background:rgba(255,255,255,.04); color:var(--dsr-white); }
.app-nav a.active{ background:rgba(51,214,255,.12); color:var(--dsr-cyan); }
.app-nav .divider{ height:1px; background:var(--dsr-line); margin:14px 0; }
.app-main{ padding:34px 40px; }
.app-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; flex-wrap:wrap; gap:14px; }
.app-user{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:.8rem; color:var(--dsr-muted); }
.panel{ background:var(--dsr-navy); border:1px solid var(--dsr-line); border-radius:var(--radius); padding:24px; }
.panel + .panel{ margin-top:20px; }
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:24px; }
.stat-card{ background:var(--dsr-navy); border:1px solid var(--dsr-line); border-radius:var(--radius); padding:20px; }
.stat-card .num{ font-family:var(--font-mono); font-size:1.7rem; color:var(--dsr-cyan); font-weight:700; }
.stat-card .lbl{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--dsr-muted); margin-top:4px; }

.stint-block{ border:1px solid var(--dsr-line); border-radius:8px; padding:16px; margin-bottom:14px; }
.stint-block h4{ margin:0 0 10px; font-size:.95rem; }
.stint-slot{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--dsr-line); font-size:.9rem; }
.stint-slot:last-child{ border-bottom:0; }
.stint-slot .time{ font-family:var(--font-mono); color:var(--dsr-cyan); font-size:.82rem; }

/* Instagram-style grid, kept for continuity with old site */
.social-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:4px; }
.social-grid a{ aspect-ratio:1; background:var(--dsr-navy-2); position:relative; overflow:hidden; }
.social-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.social-grid a:hover img{ transform:scale(1.06); }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .card-grid{ grid-template-columns:repeat(2,1fr); }
  .roster-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .app-shell{ grid-template-columns:1fr; }
  .app-sidebar{ position:relative; height:auto; }
  .social-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 1000px){
  .nav-toggle{ display:block; }
  .main-nav{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--dsr-night); border-bottom:1px solid var(--dsr-line); flex-direction:column; padding:10px; }
  .main-nav.open{ display:flex; }
  .main-nav a{ padding:12px 14px; }
  .nav-cta .live-pill{ display:none; }
}
@media (max-width: 700px){
  .card-grid{ grid-template-columns:1fr; }
  .roster-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .stat-row{ grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  html{ scroll-behavior:auto; }
}