:root {
  --clf1-bg: #080b10;
  --clf1-panel: #111722;
  --clf1-panel-2: #161e2b;
  --clf1-text: #f5f7fa;
  --clf1-muted: #aab3c1;
  --clf1-red: #e3232b;
  --clf1-gold: #f2b928;
  --clf1-cyan: #37b7e5;
  --clf1-green: #45ca79;
  --clf1-border: rgba(255,255,255,.12);
  --clf1-radius: 22px;
  --clf1-shadow: 0 22px 60px rgba(0,0,0,.32);
}

.clf1-app {
  color: var(--clf1-text);
  background:
    radial-gradient(circle at 85% 0%, rgba(55,183,229,.12), transparent 32%),
    radial-gradient(circle at 10% 20%, rgba(227,35,43,.12), transparent 30%),
    var(--clf1-bg);
  border-radius: 28px;
  overflow: hidden;
  margin: 24px 0;
  box-shadow: var(--clf1-shadow);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.clf1-app *, .clf1-app *::before, .clf1-app *::after { box-sizing: border-box; }

.clf1-loading, .clf1-error, .clf1-empty {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: 40px;
  text-align: center;
  color: var(--clf1-muted);
}

.clf1-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: var(--clf1-red);
  border-radius: 50%;
  animation: clf1-spin .9s linear infinite;
}

@keyframes clf1-spin { to { transform: rotate(360deg); } }

.clf1-hero, .clf1-results-hero {
  padding: clamp(28px, 5vw, 72px);
  background:
    linear-gradient(115deg, rgba(4,7,11,.96), rgba(15,22,32,.82)),
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.025) 22px 23px);
  border-bottom: 1px solid var(--clf1-border);
}

.clf1-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr);
  gap: 34px;
  align-items: end;
}

.clf1-eyebrow {
  color: var(--clf1-gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
}

.clf1-hero h1, .clf1-results-hero h1 {
  color: #fff;
  font-size: clamp(38px, 6vw, 78px);
  line-height: .95;
  letter-spacing: -.045em;
  margin: 14px 0 18px;
  text-transform: uppercase;
}

.clf1-location, .clf1-local-time, .clf1-results-hero p {
  color: var(--clf1-muted);
  margin: 8px 0;
  font-size: 16px;
}

.clf1-hero-country { margin-top: 22px; }

.clf1-country-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--clf1-border);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}

.clf1-countdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.clf1-countdown > span {
  min-height: 98px;
  display: grid;
  place-items: center;
  align-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--clf1-border);
  border-radius: 18px;
}

.clf1-countdown strong { font-size: 34px; line-height: 1; }
.clf1-countdown small { color: var(--clf1-muted); text-transform: uppercase; font-size: 10px; margin-top: 8px; letter-spacing: .12em; }

.clf1-session-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(175px, 1fr);
  gap: 10px;
  overflow-x: auto;
  margin-top: 38px;
  padding-bottom: 6px;
}

.clf1-session-chip {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--clf1-border);
  border-radius: 14px;
  padding: 14px;
}
.clf1-session-chip strong { display:block; color:#fff; font-size:13px; }
.clf1-session-chip span { display:block; color:var(--clf1-muted); font-size:11px; margin-top:6px; }

.clf1-section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  padding:42px clamp(22px, 4vw, 58px) 22px;
}

.clf1-section-heading h2, .clf1-race-result-head h2 {
  color:#fff;
  font-size:clamp(28px, 4vw, 48px);
  margin:5px 0 0;
  letter-spacing:-.035em;
}

.clf1-filters, .clf1-tabs {
  display:flex;
  gap:6px;
  padding:5px;
  border:1px solid var(--clf1-border);
  background:rgba(255,255,255,.04);
  border-radius:999px;
}

.clf1-filters button, .clf1-tabs button {
  border:0;
  color:var(--clf1-muted);
  background:transparent;
  border-radius:999px;
  padding:10px 16px;
  font-weight:800;
  cursor:pointer;
}

.clf1-filters button.is-active, .clf1-tabs button.is-active {
  color:#fff;
  background:var(--clf1-red);
}

.clf1-calendar-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  padding:0 clamp(22px, 4vw, 58px) 50px;
}

.clf1-race-card {
  position:relative;
  min-height:330px;
  padding:22px;
  background:linear-gradient(145deg, var(--clf1-panel-2), var(--clf1-panel));
  border:1px solid var(--clf1-border);
  border-radius:var(--clf1-radius);
  overflow:hidden;
  transition:transform .2s ease, border-color .2s ease;
}

.clf1-race-card:hover { transform:translateY(-4px); border-color:rgba(242,185,40,.5); }
.clf1-race-card::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:4px;
  background:var(--clf1-gold);
}
.clf1-race-card.is-completed::after { background:var(--clf1-green); }
.clf1-race-card.is-awaiting::after { background:var(--clf1-cyan); }

.clf1-race-top {
  display:grid;
  grid-template-columns:auto auto 1fr;
  gap:9px;
  align-items:center;
}
.clf1-round { font-weight:950; color:var(--clf1-gold); }
.clf1-status { justify-self:end; color:var(--clf1-muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.clf1-race-card h3 { color:#fff; font-size:25px; line-height:1.05; margin:24px 0 8px; }
.clf1-race-card > p { color:var(--clf1-muted); min-height:44px; }
.clf1-race-date { font-size:18px; font-weight:900; margin:20px 0; }

.clf1-winner {
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
  padding:12px 14px;
  background:rgba(69,202,121,.09);
  border:1px solid rgba(69,202,121,.22);
  border-radius:13px;
}
.clf1-winner span, .clf1-winner small { color:var(--clf1-muted); font-size:11px; }
.clf1-winner strong { color:#fff; }

.clf1-expand {
  margin-top:16px;
  border:0;
  color:#fff;
  background:transparent;
  font-weight:800;
  padding:0;
  cursor:pointer;
}
.clf1-session-list { margin-top:14px; border-top:1px solid var(--clf1-border); }
.clf1-session-list > div { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--clf1-border); font-size:11px; }
.clf1-session-list span { color:var(--clf1-muted); }

.clf1-source-note {
  color:var(--clf1-muted);
  font-size:11px;
  padding:0 clamp(22px, 4vw, 58px) 28px;
}

.clf1-results-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  padding:26px clamp(22px, 4vw, 58px);
  border-bottom:1px solid var(--clf1-border);
}

.clf1-race-select-wrap { display:grid; gap:6px; color:var(--clf1-muted); font-size:11px; }
.clf1-race-select {
  min-width:280px;
  color:#fff;
  background:var(--clf1-panel);
  border:1px solid var(--clf1-border);
  border-radius:12px;
  padding:12px 38px 12px 14px;
}

.clf1-results-content { padding:36px clamp(22px, 4vw, 58px); }
.clf1-race-result-head p { color:var(--clf1-muted); }
.clf1-podium {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  align-items:end;
  margin:30px 0;
}
.clf1-podium-card {
  min-height:210px;
  padding:22px;
  border-radius:20px;
  border:1px solid var(--clf1-border);
  background:linear-gradient(145deg, var(--clf1-panel-2), var(--clf1-panel));
}
.clf1-podium-card.place-1 { min-height:250px; order:2; border-color:rgba(242,185,40,.55); }
.clf1-podium-card.place-2 { order:1; }
.clf1-podium-card.place-3 { order:3; }
.clf1-podium-place { color:var(--clf1-gold); font-weight:950; }
.clf1-podium-code { display:block; color:var(--clf1-muted); font-size:46px; font-weight:950; letter-spacing:-.05em; margin-top:18px; }
.clf1-podium-card h3 { color:#fff; margin:4px 0; }
.clf1-podium-card p { color:var(--clf1-muted); }

.clf1-classification, .clf1-standings {
  border:1px solid var(--clf1-border);
  border-radius:20px;
  overflow:hidden;
}
.clf1-result-row, .clf1-standing-row {
  display:grid;
  grid-template-columns:45px 60px minmax(180px,1.4fr) minmax(90px,.6fr) minmax(120px,.8fr) 80px;
  gap:12px;
  align-items:center;
  padding:14px 18px;
  background:rgba(255,255,255,.025);
  border-bottom:1px solid var(--clf1-border);
}
.clf1-result-row:last-child, .clf1-standing-row:last-child { border-bottom:0; }
.clf1-result-row:nth-child(odd), .clf1-standing-row:nth-child(odd) { background:rgba(255,255,255,.045); }
.clf1-pos, .clf1-standing-pos { color:var(--clf1-gold); font-size:20px; font-weight:950; }
.clf1-driver-code, .clf1-standing-code { color:var(--clf1-muted); font-weight:950; }
.clf1-driver-name, .clf1-standing-name { display:grid; }
.clf1-driver-name small, .clf1-standing-name small, .clf1-grid-pos, .clf1-result-time, .clf1-standing-wins { color:var(--clf1-muted); font-size:11px; }
.clf1-points, .clf1-standing-points { text-align:right; font-weight:900; }
.clf1-standing-row { grid-template-columns:45px 60px minmax(180px,1.2fr) minmax(100px,1fr) 70px 90px; }
.clf1-standing-progress { height:6px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; }
.clf1-standing-progress i { display:block; height:100%; background:linear-gradient(90deg,var(--clf1-red),var(--clf1-gold)); border-radius:inherit; }

.clf1-error button {
  border:0;
  padding:11px 18px;
  border-radius:999px;
  color:#fff;
  background:var(--clf1-red);
  font-weight:800;
  cursor:pointer;
}

@media (max-width: 980px) {
  .clf1-calendar-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .clf1-hero-grid { grid-template-columns:1fr; }
}

@media (max-width: 720px) {
  .clf1-app { border-radius:18px; }
  .clf1-calendar-grid { grid-template-columns:1fr; padding-left:14px; padding-right:14px; }
  .clf1-section-heading, .clf1-results-toolbar { align-items:stretch; flex-direction:column; padding-left:14px; padding-right:14px; }
  .clf1-filters, .clf1-tabs { width:100%; overflow-x:auto; }
  .clf1-filters button, .clf1-tabs button { flex:1; white-space:nowrap; }
  .clf1-race-select { width:100%; min-width:0; }
  .clf1-podium { grid-template-columns:1fr; }
  .clf1-podium-card, .clf1-podium-card.place-1 { min-height:0; order:initial; }
  .clf1-result-row, .clf1-standing-row {
    grid-template-columns:38px 46px minmax(0,1fr) 70px;
  }
  .clf1-grid-pos, .clf1-result-time, .clf1-standing-progress, .clf1-standing-wins { display:none; }
  .clf1-hero, .clf1-results-hero, .clf1-results-content { padding-left:18px; padding-right:18px; }
  .clf1-countdown > span { min-height:78px; }
  .clf1-countdown strong { font-size:26px; }
}