/* ============ CSS Variables ============ */
    :root {
      --bg-primary: #0a0a0a;
      --bg-secondary: #111111;
      --bg-card: #161616;
      --bg-card-hover: #1a1a1a;
      --accent: #e10600;
      --accent-dark: #b30500;
      --accent-glow: rgba(225, 6, 0, 0.15);
      --text-primary: #ffffff;
      --text-secondary: #a0a0a0;
      --text-muted: #666666;
      --border: #222222;
      --border-light: #2a2a2a;
      --success: #00c853;
      --warning: #ffc107;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 20px;
      --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
      --transition: all 0.2s ease;

      /* F1 Team Colors */
      --team-redbull: #3671C6;
      --team-mclaren: #FF8000;
      --team-ferrari: #E8002D;
      --team-mercedes: #27F4D2;
      --team-aston: #229971;
      --team-alpine: #FF87BC;
      --team-williams: #64C4FF;
      --team-rb: #7AA8FF;
      --team-sauber: #52E252;
      --team-haas: #FF6B6B;
      --team-audi: #9CA3AF;
      --team-cadillac: #FFFFFF;

      /* Share template team colors (from Figma bundle) */
      --share-team-redbull: #1E3A8A;
      --share-team-ferrari: #DC0000;
      --share-team-mercedes: #00D2BE;
      --share-team-mclaren: #FF8700;
      --share-team-aston: #00665F;
      --share-team-alpine: #0090FF;
      --share-team-williams: #005AFF;
      --share-team-rb: #2B4562;
      --share-team-sauber: #900000;
      --share-team-haas: #FFFFFF;
    }

    /* ============ Reset & Base ============ */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    html,
    body {
      height: 100%;
      overflow: hidden;
    }

    body {
      /* Using Inter font as primary */
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: var(--bg-primary);
      color: var(--text-primary);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    /* ============ App Container ============ */
    .app {
      display: flex;
      flex-direction: column;
      height: 100vh;
      height: 100dvh;
      max-width: 480px;
      margin: 0 auto;
      background: var(--bg-primary);
    }

    /* ============ Header ============ */
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 16px;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .logo {
      font-size: 20px;
      font-weight: 700;
      color: var(--accent);
      letter-spacing: -1px;
    }

    .logo-text {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .season-badge {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      padding: 0;
      background: transparent;
      border-radius: 0;
      border: none;
    }

    .season-year {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums;
    }

    .season-label {
      font-size: 9px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }

    /* ============ Main Content ============ */
    .content {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 16px;
      padding-bottom: 80px;
    }

    /* ============ Tab Panes ============ */
    .tab-pane {
      display: none;
    }

    .tab-pane.active {
      display: block;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ============ Tab Header ============ */
    .tab-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }

    .tab-header h2 {
      font-size: 20px;
      font-weight: 600;
    }

    #tab-results .tab-header {
      margin-bottom: 4px;
    }

    #tab-results .tab-header.hero-back .back-btn {
      display: none;
    }

    .back-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      background: rgba(255,255,255,0.05);
      border: none;
      border-radius: 8px;
      color: var(--text-primary);
      cursor: pointer;
      transition: var(--transition);
    }

    .back-btn:active {
      background: rgba(255,255,255,0.1);
      transform: scale(0.95);
    }

    /* ============ Home (New) ============ */
    .home-hero {
      position: relative;
      padding: 22px;
      border-radius: 18px;
      background: linear-gradient(135deg, #e10600 0%, #c00500 45%, #a00400 100%);
      border: 1px solid rgba(225,6,0,0.25);
      overflow: hidden;
      cursor: pointer;
      margin-bottom: 14px;
    }

    .home-hero:active {
      transform: scale(0.99);
    }

    .hero-lines {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .hero-lines span {
      position: absolute;
      height: 1px;
      background: rgba(255,255,255,0.12);
      width: 200%;
      left: -100%;
      transform: rotate(-15deg);
      animation: heroLineMove 3.5s linear infinite;
    }

    .hero-lines span:nth-child(1) { top: 22%; animation-delay: 0s; }
    .hero-lines span:nth-child(2) { top: 37%; animation-delay: 0.4s; }
    .hero-lines span:nth-child(3) { top: 52%; animation-delay: 0.8s; }
    .hero-lines span:nth-child(4) { top: 67%; animation-delay: 1.2s; }
    .hero-lines span:nth-child(5) { top: 82%; animation-delay: 1.6s; }

    @keyframes heroLineMove {
      0% { left: 100%; }
      100% { left: -100%; }
    }

    .hero-flag {
      position: absolute;
      top: -24px;
      right: -8px;
      width: 180px;
      height: 170px;
      color: rgba(255,255,255,0.22);
      transform: rotate(-8deg);
      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 1;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      background: rgba(255,255,255,0.18);
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 12px;
    }

    .hero-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #fff;
      animation: pulse 1.5s infinite;
    }

    .hero-title {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 4px;
      color: #fff;
    }

    .hero-subtitle {
      font-size: 14px;
      color: rgba(255,255,255,0.9);
    }

    @keyframes heroFlagSpin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .home-next {
      position: relative;
      padding: 16px;
      border-radius: 18px;
      background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
      border: 1px solid rgba(255,255,255,0.06);
      margin-bottom: 14px;
      overflow: hidden;
      cursor: pointer;
    }

    .home-next:active {
      transform: scale(0.99);
    }

    .home-next-glow {
      position: absolute;
      top: -30px;
      right: -30px;
      width: 160px;
      height: 160px;
      background: rgba(225,6,0,0.15);
      border-radius: 50%;
      filter: blur(36px);
    }

    .home-next-header {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .home-next-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(225,6,0,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #e10600;
    }

    .home-next-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: rgba(255,255,255,0.45);
    }

    .home-next-name {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
    }

    .home-next-timer {
      display: grid;
      grid-template-columns: repeat(7, auto);
      align-items: center;
      justify-content: space-between;
      padding: 12px 10px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 12px;
      position: relative;
      z-index: 1;
      gap: 0;
      white-space: nowrap;
    }

    @media (max-width: 360px) {
      .home-next-timer {
        padding: 10px 8px;
      }
      .timer-value { font-size: 20px; }
      .timer-label { font-size: 9px; }
    }

    .timer-item {
      text-align: center;
    }

    .timer-value {
      font-size: 22px;
      font-weight: 700;
      color: #fff;
    }

    .timer-value.accent { color: #e10600; }

    .timer-label {
      font-size: 10px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
    }

    .timer-divider {
      width: 1px;
      height: 28px;
      background: rgba(255,255,255,0.1);
      align-self: center;
    }

    /* season note removed */

    .home-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 14px;
    }

    .stat-card {
      position: relative;
      padding: 14px;
      border-radius: 14px;
      background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
      border: 1px solid rgba(255,255,255,0.06);
      overflow: hidden;
      min-width: 0;
      box-sizing: border-box;
    }

    .stat-glow {
      position: absolute;
      top: -20px;
      right: -20px;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      filter: blur(24px);
    }

    .stat-glow.red { background: rgba(225,6,0,0.2); }
    .stat-glow.blue { background: rgba(59,130,246,0.18); }

    .stat-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      position: relative;
      z-index: 1;
    }

    .stat-icon.red { background: rgba(225,6,0,0.2); color: #e10600; }
    .stat-icon.blue { background: rgba(59,130,246,0.2); color: #60a5fa; }

    .stat-label {
      font-size: 11px;
      color: rgba(255,255,255,0.45);
      margin-bottom: 4px;
    }

    .stat-title {
      font-size: 13px;
      font-weight: 600;
      color: #fff;
      line-height: 1.2;
      white-space: nowrap;
    }

    .stat-points {
      font-size: 13px;
      font-weight: 600;
      color: #e10600;
      line-height: 1.2;
    }

    .stat-points.blue { color: #60a5fa; }

    .home-menu {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .menu-item {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 14px;
      border-radius: 14px;
      background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
      border: 1px solid rgba(255,255,255,0.06);
      text-align: left;
      cursor: pointer;
      transition: transform 0.15s ease;
      min-width: 0;
      box-sizing: border-box;
    }

    .menu-item:active { transform: scale(0.98); }

    .menu-icon-box {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: rgba(225,6,0,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #e10600;
      flex-shrink: 0;
    }

    .menu-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .menu-title { font-size: 13px !important; font-weight: 600; color: #fff; line-height: 1.2; white-space: nowrap; }
.menu-title.wrap-gp { white-space: normal; }
    .menu-subtitle { display: none; }

    /* keep legacy styles below */
    /* ============ Promo Banner ============ */
    .promo-banner {
      position: relative;
      padding: 24px;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
      border-radius: var(--radius-xl);
      margin-bottom: 24px;
      overflow: hidden;
      cursor: pointer;
      border: none;
      text-align: left;
    }

    .promo-banner:active {
      transform: scale(0.99);
    }

    .promo-content {
      position: relative;
      z-index: 1;
    }

    .promo-badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 12px;
    }

    .promo-badge::before {
      content: "";
      width: 6px;
      height: 6px;
      background: #fff;
      border-radius: 50%;
      margin-right: 6px;
      animation: pulse 1.5s infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.4;
      }
    }

    .promo-title {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 4px;
      letter-spacing: -0.5px;
    }

    .promo-subtitle {
      font-size: 14px;
      opacity: 0.9;
    }

    .promo-decoration {
      position: absolute;
      top: -20px;
      right: -20px;
      width: 120px;
      height: 120px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
    }

    /* ============ Menu Grid ============ */
    .menu-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .menu-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 20px 16px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      cursor: pointer;
      transition: var(--transition);
      text-align: left;
    }

    .menu-card:active {
      transform: scale(0.98);
      background: var(--bg-card-hover);
      border-color: var(--accent);
    }

    .menu-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      background: var(--accent-glow);
      border-radius: var(--radius-md);
      color: var(--accent);
      margin-bottom: 12px;
    }

    .menu-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 2px;
    }

    .menu-desc {
      font-size: 12px;
      color: var(--text-muted);
    }

    /* ============ Action Buttons ============ */
    .action-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 16px 20px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      color: var(--text-primary);
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      transition: var(--transition);
      margin-bottom: 10px;
    }

    .action-btn:active {
      background: var(--bg-card-hover);
      border-color: var(--accent);
    }

    .action-btn svg {
      color: var(--text-muted);
    }

    /* ============ Content Box ============ */
    .content-box {
      padding: 20px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      font-size: 14px;
      line-height: 1.7;
      color: var(--text-secondary);
    }

    /* Standings current should not look like a boxed content wrapper */
    #standings-content.standings-current-box,
    #constructors-content.standings-current-box {
      padding: 0;
      background: transparent;
      border: none;
    }

    .content-box.error {
      color: var(--accent);
      background: var(--accent-glow);
      border-color: var(--accent);
    }

    .content-box h3,
    .content-box b,
    .content-box strong {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 8px;
      display: block;
    }

    /* ============ Calendar (New) ============ */
    .calendar-stats {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-radius: 14px;
      background: linear-gradient(90deg, rgba(225,6,0,0.2) 0%, rgba(225,6,0,0.05) 100%);
      border: 1px solid rgba(225,6,0,0.2);
      margin-bottom: 14px;
    }

    .calendar-stat {
      text-align: left;
      flex: 1;
    }

    .calendar-stat .label {
      font-size: 11px;
      color: rgba(255,255,255,0.6);
      margin-bottom: 4px;
    }

    .calendar-stat .value {
      font-size: 22px;
      font-weight: 700;
      color: #fff;
    }

    .calendar-stat .value.accent { color: #e10600; }

    .calendar-divider {
      width: 1px;
      height: 36px;
      background: rgba(255,255,255,0.08);
      margin: 0 10px;
    }

    .calendar-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .calendar-card {
      position: relative;
      background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 14px;
      overflow: hidden;
      padding: 14px;
      transition: transform 0.15s ease;
    }

    .calendar-card:active { transform: scale(0.98); }

    .calendar-card::before {
      content: "";
      position: absolute;
      top: -20px;
      right: -20px;
      width: 120px;
      height: 120px;
      background: rgba(225,6,0,0.06);
      border-radius: 50%;
      filter: blur(24px);
    }

    .calendar-share-btn {
      position: absolute;
      top: 6px;
      right: 12px;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(0, 0, 0, 0.35);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 2;
      transition: transform 0.15s ease, background 0.2s ease;
    }

    .calendar-share-btn:active {
      transform: scale(0.95);
    }

    .calendar-share-btn svg {
      width: 12px;
      height: 12px;
    }

    .calendar-row {
      position: relative;
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }

    .calendar-number {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: rgba(225,6,0,0.2);
      border: 1px solid rgba(225,6,0,0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #e10600;
      font-weight: 700;
      font-size: 16px;
      flex-shrink: 0;
    }

    .calendar-info {
      min-width: 0;
      padding-right: 0;
    }

    .calendar-info h3 {
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .calendar-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: rgba(255,255,255,0.55);
      margin-bottom: 0;
    }

    .calendar-meta svg { width: 14px; height: 14px; opacity: 0.6; }

    .calendar-location {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      font-size: 12px;
      color: rgba(255,255,255,0.7);
    }

    .calendar-location svg { width: 14px; height: 14px; color: #e10600; margin-top: 2px; }

    .calendar-location small {
      display: block;
      font-size: 11px;
      color: rgba(255,255,255,0.4);
      margin-top: 2px;
    }

    .calendar-status {
      position: absolute;
      bottom: 12px;
      right: 12px;
      padding: 3px 6px;
      border-radius: 6px;
      font-size: 8px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.6);
    }

    .calendar-status.next {
      border-color: rgba(225,6,0,0.35);
      background: rgba(225,6,0,0.2);
      color: #e10600;
    }

    /* ============ NEXT GP - 1:1 GRAND PRIX DESIGN ============ */
    #tab-next {
      position: relative;
    }

    #tab-next .gp-content {
      padding: 0;
      background: transparent;
      border: none;
    }

    #tab-next .gp-tab-header {
      position: relative;
      width: 100%;
      margin: 0 0 20px;
      padding: 12px 16px;
      background: rgba(10, 10, 10, 0.96);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      box-sizing: border-box;
    }

    #tab-next .gp-tab-header::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -16px;
      height: 16px;
      background: linear-gradient(180deg, rgba(10, 10, 10, 0.96) 0%, rgba(10, 10, 10, 0) 100%);
      pointer-events: none;
    }

    #tab-next .gp-tab-header.is-results {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: 0;
      padding: 8px 16px;
      background: transparent;
      border-bottom: none;
      z-index: 5;
      backdrop-filter: none;
      box-shadow: none;
      pointer-events: none;
    }

    #tab-next .gp-tab-header.is-results .gp-back-btn {
      pointer-events: auto;
    }

    #tab-next .gp-tab-header.is-results.hero-back .gp-back-btn {
      display: none;
    }

    #tab-next .gp-tab-header.hero-back .gp-back-btn {
      display: none;
    }

    #tab-next .gp-tab-header.is-results::after {
      height: 0;
    }

    #tab-next .gp-tab-header.is-results .gp-tab-title {
      display: none;
    }

    #tab-next .gp-tab-header.hero-back .gp-tab-title {
      display: none;
    }

    #tab-next .gp-tab-header.hero-back {
      display: none;
    }

    #tab-next .gp-back-btn {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      background: transparent;
      border: none;
      color: var(--text-primary);
      cursor: pointer;
    }

    #tab-next .gp-back-btn:active {
      background: var(--bg-card);
    }

    #tab-next .gp-tab-title {
      flex: 1;
      text-align: center;
      font-size: 18px;
      font-weight: 700;
      margin-right: 32px;
    }

    .gp-card {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .gp-hero {
      position: relative;
      padding: 18px 18px 20px;
      background: linear-gradient(135deg,
          rgba(225, 6, 0, 0.28) 0%,
          rgba(225, 6, 0, 0.1) 55%,
          rgba(0, 0, 0, 0.15) 100%);
      border: 1px solid rgba(225, 6, 0, 0.28);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    }

    .gp-share-btn {
      position: absolute;
      top: 10px;
      right: 12px;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(0, 0, 0, 0.35);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 2;
      transition: transform 0.15s ease, background 0.2s ease;
    }

    .gp-share-btn:active {
      transform: scale(0.95);
    }

    .gp-share-btn svg {
      width: 12px;
      height: 12px;
    }

    .gp-hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
      opacity: 0.85;
    }

    .gp-hero::after {
      content: '';
      position: absolute;
      top: -60px;
      right: -60px;
      width: 200px;
      height: 200px;
      background: rgba(225, 6, 0, 0.25);
      filter: blur(60px);
      border-radius: 50%;
      pointer-events: none;
    }

    .gp-round {
      display: inline-flex;
      align-items: center;
      height: 20px;
      padding: 0 10px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--accent);
      background: rgba(225, 6, 0, 0.18);
      border-radius: 999px;
    }

    .gp-name {
      font-size: 20px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.25;
      margin-top: 10px;
      margin-bottom: 6px;
      letter-spacing: -0.4px;
    }

    .gp-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      font-size: 13px;
      color: var(--text-secondary);
    }

    .gp-meta-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .gp-meta-item svg {
      width: 14px;
      height: 14px;
      opacity: 0.8;
    }

    .gp-sessions {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .gp-sessions-title {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 2px;
      padding-left: 2px;
    }

    .gp-session-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 14px;
      transition: var(--transition);
    }

    .gp-session-card:last-child {
      margin-bottom: 0;
    }

    .gp-session-card:active {
      background: var(--bg-card-hover);
      border-color: var(--border-light);
      transform: translateY(1px);
    }

    .gp-session-card.highlight {
      background: rgba(225, 6, 0, 0.08);
      border-color: rgba(225, 6, 0, 0.28);
    }

    .gp-session-left {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .gp-session-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #1c1c1c;
      color: var(--text-muted);
      flex-shrink: 0;
    }

    .gp-session-icon svg {
      width: 20px;
      height: 20px;
    }

    .gp-session-card.highlight .gp-session-icon {
      background: rgba(225, 6, 0, 0.2);
      color: var(--accent);
    }

    .gp-session-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .gp-session-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0;
      line-height: 1.2;
    }

    .gp-session-time {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .gp-session-day {
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.2;
      white-space: nowrap;
    }

    /* Old styles - keeping for compatibility */
    .gp-info-row {
      display: none;
    }

    .sessions-title {
      display: none;
    }

    .session-item {
      display: none;
    }

    .info-note {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 12px 14px;
      background: rgba(255, 193, 7, 0.1);
      border: 1px solid rgba(255, 193, 7, 0.2);
      border-radius: var(--radius-md);
      margin-top: 16px;
      font-size: 13px;
      color: var(--text-secondary);
    }

    .info-note .icon {
      color: var(--warning);
      flex-shrink: 0;
    }

    /* New styles for driver standings cards */
    .standings-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* ============ Standings Current (New) ============ */
    .standings-current {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .standings-hero {
      position: relative;
      background: linear-gradient(135deg, #e10600 0%, #c00500 45%, #a00400 100%);
      border-radius: 16px;
      padding: 20px;
      overflow: hidden;
      margin-bottom: 16px;
    }

    .standings-hero-watermark {
      position: absolute;
      top: 0;
      right: 0;
      opacity: 0.2;
      color: #ffffff;
      transform: scaleY(-1);
      transform-origin: center;
    }

    .standings-hero-watermark svg {
      width: 128px;
      height: 128px;
      stroke-width: 1;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .standings-hero-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .standings-hero-icon {
      width: 20px;
      height: 20px;
      color: #fff;
      display: inline-block;
      vertical-align: middle;
      transform: scaleY(-1);
      transform-origin: center;
    }

    .standings-hero-label {
      font-size: 12px;
      line-height: 16px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: rgba(255,255,255,0.9);
      font-weight: 600;
    }

    .standings-hero-title {
      font-size: 24px;
      line-height: 32px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 4px;
    }

    .standings-hero-subtitle {
      font-size: 14px;
      line-height: 20px;
      color: rgba(255,255,255,0.8);
      margin-bottom: 12px;
    }

    .standings-hero-stats {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .standings-hero-stat-label {
      font-size: 12px;
      line-height: 16px;
      color: rgba(255,255,255,0.7);
    }

    .standings-hero-stat-value {
      font-size: 20px;
      line-height: 28px;
      font-weight: 700;
      color: #fff;
    }

    .standings-card {
      position: relative;
      background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.05);
      overflow: hidden;
    }

    .standings-accent {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
    }

    .standings-card-inner {
      padding: 16px 16px 16px 20px;
    }

    .standings-row-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .standings-pos {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(255,255,255,0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: rgba(255,255,255,0.7);
      border: 1px solid rgba(255,255,255,0.1);
      font-size: 13px;
    }

    .standings-name {
      font-weight: 600;
      font-size: 14px;
      color: #fff;
    }

    .standings-team {
      font-size: 12px;
      color: rgba(255,255,255,0.5);
    }

    .standings-points {
      text-align: right;
    }

    .standings-points strong {
      display: block;
      font-size: 18px;
      color: #fff;
    }

    .standings-points span {
      font-size: 10px;
      color: rgba(255,255,255,0.5);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .standings-row-bottom {
      display: flex;
      align-items: center;
      gap: 24px;
      font-size: 12px;
      color: rgba(255,255,255,0.6);
    }

    .standings-row-bottom .metric {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .standings-row-bottom svg {
      width: 14px;
      height: 14px;
    }

    /* Trophy SVG (solid) in standings cards is inverted in source — rotate to normal */
    .standings-row-bottom svg[viewBox="0 0 5120 5120"] {
      transform: rotate(180deg);
      transform-origin: center;
    }

    /* standings view-more removed (show all) */
    .driver-card {
      display: flex;
      align-items: center;
      padding: 14px 16px;
      padding-left: 12px;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-left: 4px solid var(--border);
      border-radius: var(--radius-md);
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }

    .driver-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      opacity: 0.05;
      pointer-events: none;
    }

    .driver-card.podium-1 {
      border-color: #FFD700;
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, var(--bg-secondary) 100%);
    }

    .driver-card.podium-2 {
      border-color: #C0C0C0;
      background: linear-gradient(135deg, rgba(192, 192, 192, 0.1) 0%, var(--bg-secondary) 100%);
    }

    .driver-card.podium-3 {
      border-color: #CD7F32;
      background: linear-gradient(135deg, rgba(205, 127, 50, 0.1) 0%, var(--bg-secondary) 100%);
    }

    .driver-position {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      background: var(--accent-glow);
      border-radius: var(--radius-sm);
      color: var(--accent);
      font-weight: 700;
      font-size: 14px;
      margin-right: 12px;
      flex-shrink: 0;
      font-variant-numeric: tabular-nums;
    }

    .driver-card.podium-1 .driver-position {
      background: rgba(255, 215, 0, 0.2);
      color: #FFD700;
    }

    .driver-card.podium-2 .driver-position {
      background: rgba(192, 192, 192, 0.2);
      color: #C0C0C0;
    }

    .driver-card.podium-3 .driver-position {
      background: rgba(205, 127, 50, 0.2);
      color: #CD7F32;
    }

    /* Team color variants */
    .driver-card[data-team="Red Bull"] {
      border-left-color: var(--team-redbull);
    }

    .driver-card[data-team="Red Bull"]::before {
      background: var(--team-redbull);
    }

    .driver-card[data-team="McLaren"] {
      border-left-color: var(--team-mclaren);
    }

    .driver-card[data-team="McLaren"]::before {
      background: var(--team-mclaren);
    }

    .driver-card[data-team="Ferrari"] {
      border-left-color: var(--team-ferrari);
    }

    .driver-card[data-team="Ferrari"]::before {
      background: var(--team-ferrari);
    }

    .driver-card[data-team="Mercedes"] {
      border-left-color: var(--team-mercedes);
    }

    .driver-card[data-team="Mercedes"]::before {
      background: var(--team-mercedes);
    }

    .driver-card[data-team="Aston Martin"] {
      border-left-color: var(--team-aston);
    }

    .driver-card[data-team="Aston Martin"]::before {
      background: var(--team-aston);
    }

    .driver-card[data-team="Alpine"] {
      border-left-color: var(--team-alpine);
    }

    .driver-card[data-team="Alpine"]::before {
      background: var(--team-alpine);
    }

    .driver-card[data-team="Williams"] {
      border-left-color: var(--team-williams);
    }

    .driver-card[data-team="Williams"]::before {
      background: var(--team-williams);
    }

    .driver-card[data-team="RB"] {
      border-left-color: var(--team-rb);
    }

    .driver-card[data-team="RB"]::before {
      background: var(--team-rb);
    }

    .driver-card[data-team="Kick Sauber"] {
      border-left-color: var(--team-sauber);
    }

    .driver-card[data-team="Kick Sauber"]::before {
      background: var(--team-sauber);
    }

    .driver-card[data-team="Haas"] {
      border-left-color: var(--team-haas);
    }

    .driver-card[data-team="Haas"]::before {
      background: var(--team-haas);
    }

    .driver-card[data-team="Red Bull Racing Audi"],
    .driver-card[data-team="Audi"] {
      border-left-color: var(--team-audi);
    }

    .driver-card[data-team="Red Bull Racing Audi"]::before,
    .driver-card[data-team="Audi"]::before {
      background: var(--team-audi);
    }

    .driver-card[data-team="Cadillac"] {
      border-left-color: var(--team-cadillac);
    }

    .driver-card[data-team="Cadillac"]::before {
      background: var(--team-cadillac);
    }

    .driver-info {
      flex: 1;
      min-width: 0;
    }

    .driver-name {
      font-weight: 600;
      color: var(--text-primary);
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .driver-team {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .driver-points {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      flex-shrink: 0;
      margin-left: 12px;
    }

    .points-value {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums;
      font-family: 'JetBrains Mono', monospace;
    }

    .points-label {
      font-size: 10px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Constructor cards - matching driver card styles */
    .constructor-card {
      display: flex;
      align-items: center;
      padding: 14px 16px;
      padding-left: 12px;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-left: 4px solid var(--border);
      border-radius: var(--radius-md);
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }

    .constructor-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      opacity: 0.05;
      pointer-events: none;
    }

    .constructor-card.podium-1 {
      border-color: #FFD700;
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, var(--bg-secondary) 100%);
    }

    .constructor-card.podium-2 {
      border-color: #C0C0C0;
      background: linear-gradient(135deg, rgba(192, 192, 192, 0.1) 0%, var(--bg-secondary) 100%);
    }

    .constructor-card.podium-3 {
      border-color: #CD7F32;
      background: linear-gradient(135deg, rgba(205, 127, 50, 0.1) 0%, var(--bg-secondary) 100%);
    }

    .constructor-position {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      background: var(--accent-glow);
      border-radius: var(--radius-sm);
      color: var(--accent);
      font-weight: 700;
      font-size: 14px;
      margin-right: 12px;
      flex-shrink: 0;
      font-variant-numeric: tabular-nums;
    }

    .constructor-card.podium-1 .constructor-position {
      background: rgba(255, 215, 0, 0.2);
      color: #FFD700;
    }

    .constructor-card.podium-2 .constructor-position {
      background: rgba(192, 192, 192, 0.2);
      color: #C0C0C0;
    }

    .constructor-card.podium-3 .constructor-position {
      background: rgba(205, 127, 50, 0.2);
      color: #CD7F32;
    }

    /* Team color variants for constructors */
    .constructor-card[data-team="Red Bull"] {
      border-left-color: var(--team-redbull);
    }

    .constructor-card[data-team="Red Bull"]::before {
      background: var(--team-redbull);
    }

    .constructor-card[data-team="McLaren"] {
      border-left-color: var(--team-mclaren);
    }

    .constructor-card[data-team="McLaren"]::before {
      background: var(--team-mclaren);
    }

    .constructor-card[data-team="Ferrari"] {
      border-left-color: var(--team-ferrari);
    }

    .constructor-card[data-team="Ferrari"]::before {
      background: var(--team-ferrari);
    }

    .constructor-card[data-team="Mercedes"] {
      border-left-color: var(--team-mercedes);
    }

    .constructor-card[data-team="Mercedes"]::before {
      background: var(--team-mercedes);
    }

    .constructor-card[data-team="Aston Martin"] {
      border-left-color: var(--team-aston);
    }

    .constructor-card[data-team="Aston Martin"]::before {
      background: var(--team-aston);
    }

    .constructor-card[data-team="Alpine"] {
      border-left-color: var(--team-alpine);
    }

    .constructor-card[data-team="Alpine"]::before {
      background: var(--team-alpine);
    }

    .constructor-card[data-team="Williams"] {
      border-left-color: var(--team-williams);
    }

    .constructor-card[data-team="Williams"]::before {
      background: var(--team-williams);
    }

    .constructor-card[data-team="RB"] {
      border-left-color: var(--team-rb);
    }

    .constructor-card[data-team="RB"]::before {
      background: var(--team-rb);
    }

    .constructor-card[data-team="Kick Sauber"] {
      border-left-color: var(--team-sauber);
    }

    .constructor-card[data-team="Kick Sauber"]::before {
      background: var(--team-sauber);
    }

    .constructor-card[data-team="Haas"] {
      border-left-color: var(--team-haas);
    }

    .constructor-card[data-team="Haas"]::before {
      background: var(--team-haas);
    }

    .constructor-card[data-team="Red Bull Racing Audi"],
    .constructor-card[data-team="Audi"] {
      border-left-color: var(--team-audi);
    }

    .constructor-card[data-team="Red Bull Racing Audi"]::before,
    .constructor-card[data-team="Audi"]::before {
      background: var(--team-audi);
    }

    .constructor-card[data-team="Cadillac"] {
      border-left-color: var(--team-cadillac);
    }

    .constructor-card[data-team="Cadillac"]::before {
      background: var(--team-cadillac);
    }

    .constructor-info {
      flex: 1;
      min-width: 0;
    }

    .constructor-name {
      font-weight: 600;
      color: var(--text-primary);
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .constructor-points {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      flex-shrink: 0;
      margin-left: 12px;
    }

    .constructor-points-value {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums;
      font-family: 'JetBrains Mono', monospace;
    }

    .constructor-points-label {
      font-size: 10px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* ============ Results template (Practice 1 design) ============ */
    .content-box.results-shell {
      padding: 0;
      background: transparent;
      border: none;
      color: #fff;
    }

    .content-box.results-shell.error {
      padding: 16px;
      background: var(--accent-glow);
      border: 1px solid var(--accent);
      border-radius: var(--radius-lg);
      color: var(--accent);
    }

    #tab-next .gp-tab-header.is-results ~ #next-results-view.has-offset {
      padding-top: 56px;
    }

    .results-template {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 4px 16px 20px;
    }

    .results-hero {
      position: relative;
      border-radius: 16px;
      background: linear-gradient(135deg, #e10600 0%, #c00500 45%, #8b0400 100%);
      overflow: hidden;
    }

    .results-speedlines {
      position: absolute;
      inset: 0;
      opacity: 0.2;
      overflow: hidden;
    }

    .results-speedline {
      position: absolute;
      height: 2px;
      width: var(--line-width);
      top: var(--line-top);
      left: -120%;
      background: rgba(255, 255, 255, 0.9);
      transform: skewX(-20deg);
      animation: results-speedline var(--line-duration) linear infinite;
      animation-delay: var(--line-delay);
    }

    @keyframes results-speedline {
      0% { transform: translateX(200%) skewX(-20deg); }
      100% { transform: translateX(-200%) skewX(-20deg); }
    }

    .results-flag-accent {
      position: absolute;
      top: -32px;
      right: -32px;
      width: 96px;
      height: 96px;
      opacity: 0.1;
      animation: results-flag-spin 20s linear infinite;
    }

    @keyframes results-flag-spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .results-glow {
      position: absolute;
      top: 50%;
      right: 16px;
      width: 128px;
      height: 128px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 999px;
      filter: blur(48px);
      transform: translateY(-50%);
    }

    .results-hero-content {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding: 8px 16px 12px;
    }

    .results-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(6px);
      margin-bottom: 8px;
      align-self: flex-end;
    }

    .results-hero-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .results-hero-top .results-badge {
      margin-bottom: 0;
    }

    .results-hero.is-schedule .results-badge {
      position: absolute;
      top: 10px;
      right: 12px;
      margin-bottom: 0;
      align-self: auto;
      z-index: 2;
    }

    .results-hero.is-schedule .results-title {
      margin-top: 6px;
    }

    .results-hero.is-schedule .results-meta {
      margin-top: -2px;
    }

    .results-back-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border: none;
      background: transparent;
      color: #fff;
      padding: 0;
      cursor: pointer;
    }

    .results-back-btn svg {
      width: 18px;
      height: 18px;
    }

    .results-badge svg {
      width: 12px;
      height: 12px;
      color: #fff;
    }

    .results-badge span {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: #fff;
    }

    .results-title {
      color: #fff;
      margin-bottom: 6px;
    }

    .results-title-name {
      display: block;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.5px;
      line-height: 1.05;
    }

    .results-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(255, 255, 255, 0.9);
      font-size: 11px;
      font-weight: 500;
      flex-wrap: wrap;
    }

    .results-meta-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .results-meta-item svg {
      width: 12px;
      height: 12px;
    }

    .results-meta-dot {
      width: 4px;
      height: 4px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.4);
    }

    .results-divider {
      margin-top: 10px;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%);
      transform-origin: left;
    }

    .results-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .results-card {
      position: relative;
      background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px;
      overflow: hidden;
    }

    .results-rank-bar {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: rgba(255, 255, 255, 0.2);
    }

    .results-card.is-winner .results-rank-bar {
      background: #e10600;
    }

    .results-card.is-podium .results-rank-bar {
      background: #3b82f6;
    }


    /* Team colors for results cards */
    .results-card[data-team="Red Bull"] .results-rank-bar {
      background: var(--team-redbull);
    }

    .results-card[data-team="McLaren"] .results-rank-bar {
      background: var(--team-mclaren);
    }

    .results-card[data-team="Ferrari"] .results-rank-bar {
      background: var(--team-ferrari);
    }

    .results-card[data-team="Mercedes"] .results-rank-bar {
      background: var(--team-mercedes);
    }

    .results-card[data-team="Aston Martin"] .results-rank-bar {
      background: var(--team-aston);
    }

    .results-card[data-team="Alpine"] .results-rank-bar {
      background: var(--team-alpine);
    }

    .results-card[data-team="Williams"] .results-rank-bar {
      background: var(--team-williams);
    }

    .results-card[data-team="RB"] .results-rank-bar {
      background: var(--team-rb);
    }

    .results-card[data-team="Kick Sauber"] .results-rank-bar {
      background: var(--team-sauber);
    }

    .results-card[data-team="Haas"] .results-rank-bar {
      background: var(--team-haas);
    }

    .results-card[data-team="Red Bull Racing Audi"],
    .results-card[data-team="Audi"] {
      --team-color: var(--team-audi);
    }

    .results-card[data-team="Red Bull Racing Audi"] .results-rank-bar,
    .results-card[data-team="Audi"] .results-rank-bar {
      background: var(--team-audi);
    }

    .results-card[data-team="Cadillac"] .results-rank-bar {
      background: var(--team-cadillac);
    }

    .results-card-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 12px 12px 16px;
      gap: 8px;
    }

    .results-rank {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.7);
      font-weight: 700;
      font-size: 13px;
      flex-shrink: 0;
    }

    .results-card.is-winner .results-rank {
      background: rgba(225, 6, 0, 0.2);
      border-color: rgba(225, 6, 0, 0.3);
      color: #e10600;
    }

    .results-driver-info {
      flex: 1;
      min-width: 0;
    }

    .results-driver {
      font-size: 12px;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .results-team {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.5);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .results-timebox {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
      min-width: 96px;
      text-align: center;
      padding-left: 6px;
    }

    .results-time {
      font-size: 12px;
      font-weight: 600;
      color: #fff;
      font-variant-numeric: tabular-nums;
      font-family: 'JetBrains Mono', monospace;
    }

    .results-gap {
      font-size: 10px;
      color: #ffffff;
      font-variant-numeric: tabular-nums;
      font-family: 'JetBrains Mono', monospace;
      text-align: center;
      width: 100%;
    }

    .results-fallback {
      padding: 16px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.6;
    }

    /* ============ Share Results (templates + modal) ============ */
    .results-share-bar {
      display: none;
    }

    .results-share-btn {
      position: absolute;
      right: 12px;
      bottom: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(0, 0, 0, 0.35);
      color: #fff;
      cursor: pointer;
      transition: transform 0.15s ease, background 0.2s ease;
      z-index: 2;
    }

    .results-share-btn:active {
      transform: scale(0.98);
    }

    .results-share-btn svg {
      width: 16px;
      height: 16px;
    }

    .share-modal.hidden {
      display: none;
    }

    /* ============ Share Modal — приведено к общему стилю приложения ============ */
    .share-modal {
      position: fixed;
      inset: 0;
      z-index: 2000;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      animation: share-modal-fade 0.2s ease;
    }

    @keyframes share-modal-fade {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .share-modal-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 24px;
      width: min(100%, 1100px);
      max-height: 90vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6);
      animation: share-modal-pop 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes share-modal-pop {
      from { opacity: 0; transform: scale(0.96) translateY(8px); }
      to { opacity: 1; transform: scale(1) translateY(0); }
    }

    .share-modal-header {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--bg-card);
      border-bottom: 1px solid var(--border);
      padding: 20px 24px;
    }

    .share-modal-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .share-modal-title h2 {
      font-size: 17px;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: -0.2px;
      white-space: nowrap;
    }

    .share-modal-title .share-title-left {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text-primary);
    }

    .share-modal-title .share-title-left > svg {
      display: none; /* минималистичная шапка — без иконки */
    }

    .share-modal-close {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
      flex-shrink: 0;
    }

    .share-modal-close:hover {
      background: var(--bg-card-hover);
      color: var(--text-primary);
    }

    .share-modal-close:active {
      transform: scale(0.94);
    }

    .share-modal-close svg {
      width: 16px;
      height: 16px;
    }

    .share-template-toggle {
      display: flex;
      gap: 8px;
      margin-top: 16px;
      padding: 4px;
      background: var(--bg-secondary);
      border-radius: 12px;
      border: 1px solid var(--border);
    }

    .share-modal.is-schedule .share-template-toggle {
      display: none;
    }

    .share-template-btn {
      flex: 1;
      padding: 10px 14px;
      border-radius: 9px;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      font-weight: 600;
      font-size: 13px;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .share-template-btn.active {
      background: var(--bg-card);
      color: var(--text-primary);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .share-modal-preview {
      padding: 24px;
      overflow-y: auto;
      display: flex;
      justify-content: center;
      max-height: calc(90vh - 220px);
    }

    .share-preview-scale {
      width: 1024px;
      height: 1280px;
      transform: scale(var(--share-preview-scale, 0.5));
      transform-origin: top center;
      will-change: transform;
    }

    .share-modal-footer {
      position: sticky;
      bottom: 0;
      z-index: 2;
      background: var(--bg-card);
      border-top: 1px solid var(--border);
      padding: 20px 24px calc(20px + env(safe-area-inset-bottom));
    }

    .share-modal-actions {
      display: flex;
      gap: 12px;
    }

    .share-modal-btn {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 16px 20px;
      border-radius: 14px;
      font-weight: 600;
      font-size: 15px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: transform 0.15s ease, background 0.2s ease, opacity 0.2s ease;
      letter-spacing: -0.1px;
    }

    .share-modal-btn.secondary {
      background: var(--bg-secondary);
      color: var(--text-primary);
      border-color: var(--border);
    }

    .share-modal-btn.secondary:active {
      background: var(--bg-card-hover);
    }

    .share-modal-btn.primary {
      background: var(--accent);
      color: #fff;
    }

    .share-modal-btn.primary:active {
      background: var(--accent-dark);
      transform: scale(0.98);
    }

    .share-modal-btn:disabled {
      opacity: 0.5;
      cursor: default;
      transform: none;
    }

    .share-modal-btn svg {
      width: 18px;
      height: 18px;
    }

    .share-export-spinner {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 12px;
      font-size: 12px;
      color: var(--text-secondary);
    }

    .share-export-spinner.active {
      display: flex;
    }

    .share-spinner {
      width: 14px;
      height: 14px;
      border-radius: 999px;
      border: 2px solid var(--border);
      border-top-color: var(--text-primary);
      animation: share-spin 0.8s linear infinite;
    }

    @keyframes share-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .share-modal-note {
      text-align: center;
      color: var(--text-muted);
      font-size: 12px;
      margin-top: 12px;
      letter-spacing: -0.1px;
    }

    .share-debug {
      margin-top: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(0, 0, 0, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.9);
      font-size: 12px;
      line-height: 1.4;
      white-space: pre-wrap;
      max-height: 140px;
      overflow: auto;
      display: none;
    }

    .share-debug.active {
      display: block;
    }

    .share-export-root {
      position: fixed;
      left: -9999px;
      top: 0;
      width: 1024px;
      height: 1280px;
      pointer-events: none;
      opacity: 0;
    }

    .share-export-root.is-exporting {
      left: 0;
      top: 0;
      opacity: 0.01;
      z-index: -1;
    }

    .share-standalone {
      position: fixed;
      inset: 0;
      background: #0a0a0a;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      overflow: auto;
      z-index: 1500;
      pointer-events: auto;
    }

    .share-standalone.active {
      display: flex;
    }

    .share-toast {
      position: fixed;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%) translateY(12px);
      background: rgba(0, 0, 0, 0.85);
      color: #fff;
      padding: 10px 16px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 700;
      z-index: 2000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
      text-align: center;
      max-width: 90vw;
    }

    .share-toast.active {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .share-image-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      max-width: 90vw;
      pointer-events: auto;
    }

    .share-image-card img {
      width: min(90vw, 480px);
      height: auto;
      border-radius: 16px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: default;
      -webkit-user-drag: none;
      touch-action: auto;
    }

    .share-image-card .share-image-hint {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.6);
      text-align: center;
    }

    .share-template {
      position: relative;
      width: 1024px;
      height: 1280px;
      overflow: hidden;
      font-family: 'Inter', sans-serif;
    }

    .share-template .share-content {
      position: relative;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 48px;
    }

    .share-top10 {
      background: linear-gradient(135deg, #e10600 0%, #ff1a00 45%, #ff4400 100%);
      color: #fff;
    }

    .share-top10 .share-orb {
      position: absolute;
      border-radius: 999px;
      background: transparent;
      display: none;
    }

    .share-top10 .share-orb.orb-1,
    .share-top10 .share-orb.orb-2 {
      background-image: url("data:image/png;base64,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");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }

    .share-top10 .share-orb.orb-1 {
      top: 80px;
      right: 80px;
      width: 256px;
      height: 256px;
    }

    .share-top10 .share-orb.orb-2 {
      bottom: 128px;
      left: 80px;
      width: 320px;
      height: 320px;
    }

    .share-top10-lines {
      position: absolute;
      inset: 0;
      opacity: 0.3;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1024' height='1280' viewBox='0 0 1024 1280'><defs><linearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='143' y2='0' gradientTransform='rotate(45)' spreadMethod='repeat'><stop offset='0' stop-color='white' stop-opacity='0'/><stop offset='0.4196' stop-color='white' stop-opacity='0'/><stop offset='0.4196' stop-color='white' stop-opacity='0.6'/><stop offset='0.4545' stop-color='white' stop-opacity='0.6'/><stop offset='0.4545' stop-color='white' stop-opacity='0'/><stop offset='0.9790' stop-color='white' stop-opacity='0'/><stop offset='0.9790' stop-color='white' stop-opacity='0.3'/><stop offset='1' stop-color='white' stop-opacity='0.3'/></linearGradient></defs><rect width='1024' height='1280' fill='url(%23g)'/></svg>");
      background-repeat: no-repeat;
      background-size: 1024px 1280px;
    }

    .share-dot-pattern {
      position: absolute;
      inset: 0;
      opacity: 0.1;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><circle cx='4' cy='4' r='2' fill='rgba(255,255,255,0.9)'/></svg>");
      background-repeat: repeat;
      background-size: 40px 40px;
    }

    .share-brand {
      position: absolute;
      top: 48px;
      right: 48px;
      display: inline-flex;
      align-items: center;
      gap: 0;
      padding: 10px 16px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.2);
      border: 2px solid rgba(255, 255, 255, 0.3);
      margin-bottom: 0;
      font-weight: 800;
      letter-spacing: 2px;
      font-size: 18px;
      width: fit-content;
      max-width: 100%;
      z-index: 2;
    }

    .share-brand svg {
      width: 24px;
      height: 24px;
    }

    .share-title {
      font-size: 48px;
      font-weight: 900;
      line-height: 1.1;
      margin-bottom: 12px;
      text-transform: uppercase;
    }

    .share-session-badge {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 12px 20px;
      border-radius: 18px;
      background: #fff;
      color: #000;
      font-weight: 900;
      font-size: 22px;
      letter-spacing: 1px;
      margin-bottom: 12px;
      width: fit-content;
      max-width: 100%;
    }

    .share-session-badge svg {
      width: 22px;
      height: 22px;
      color: #e10600;
    }

    .share-meta {
      display: flex;
      gap: 10px;
      align-items: center;
      font-size: 16px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.9);
    }

    .share-results-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-top: 80px;
    }

    .share-result-card {
      position: relative;
      background: #fff;
      border-radius: 24px;
      padding: 16px;
      color: #000;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    }

    .share-export-root.is-exporting .share-result-card {
      box-shadow: none;
    }

    .share-result-card.is-podium {
      border: 4px solid #facc15;
    }

    .share-result-card .share-podium-badge {
      position: absolute;
      top: -12px;
      right: -12px;
      width: 48px;
      height: 48px;
      border-radius: 999px;
      background: #facc15;
      border: 4px solid #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    }

    .share-result-card .share-podium-badge svg {
      width: 22px;
      height: 22px;
      color: #7c5f00;
    }

    .share-result-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .share-rank-pill {
      width: 56px;
      height: 56px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 900;
      font-size: 22px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    .share-rank-pill.is-light {
      color: #111;
      border: 2px solid rgba(0, 0, 0, 0.12);
    }

    .share-driver {
      font-weight: 900;
      font-size: 21px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .share-team {
      font-weight: 700;
      font-size: 16px;
      color: #6b7280;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .share-timebar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 2px solid #f3f4f6;
    }

    .share-timebar.is-leader {
      justify-content: flex-end;
    }

    .share-time {
      font-family: 'JetBrains Mono', monospace;
      font-size: 21px;
      font-weight: 900;
    }

    .share-gap {
      font-family: 'JetBrains Mono', monospace;
      font-size: 18px;
      font-weight: 700;
      color: #6b7280;
    }

    .share-footer {
      margin-top: auto;
      padding-top: 24px;
    }

    .share-footer-chip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-radius: 18px;
      background: rgba(0, 0, 0, 0.2);
      border: 2px solid rgba(255, 255, 255, 0.3);
      font-weight: 700;
      font-size: 16px;
    }

    .share-footer-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
    }

    .share-remaining {
      background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 60%, #3a3a3a 100%);
      color: #fff;
    }

    .share-remaining .share-accent-line {
      position: absolute;
      left: 0;
      right: 0;
      height: 8px;
      background: linear-gradient(90deg, #e10600, #ff3333, #e10600);
    }

    .share-remaining .share-accent-line.top {
      top: 0;
    }

    .share-remaining .share-accent-line.bottom {
      bottom: 0;
    }

    .share-remaining .share-orb {
      position: absolute;
      border-radius: 999px;
      background: transparent;
    }

    .share-remaining .share-orb.orb-1,
    .share-remaining .share-orb.orb-2 {
      background-image: url("data:image/png;base64,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");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }

    .share-remaining .share-orb.orb-1 {
      top: 80px;
      right: 80px;
      width: 256px;
      height: 256px;
    }

    .share-remaining .share-orb.orb-2 {
      bottom: 128px;
      left: 80px;
      width: 320px;
      height: 320px;
    }

    .share-remaining .share-brand {
      background: #e10600;
      border-color: transparent;
    }

    .share-remaining .share-session-badge {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border: 2px solid rgba(255, 255, 255, 0.2);
    }

    .share-remaining .share-session-badge svg {
      color: #e10600;
    }

    .share-remaining .share-results-grid {
      gap: 12px;
    }

    .share-remaining .share-result-card {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      padding: 12px;
    }

    .share-remaining .share-rank-pill {
      width: 56px;
      height: 56px;
      border-radius: 18px;
      font-size: 22px;
    }

    .share-remaining .share-driver {
      font-size: 21px;
      font-weight: 900;
    }

    .share-remaining .share-team {
      font-size: 16px;
      font-weight: 700;
    }

    .share-remaining .share-time {
      font-size: 21px;
      font-weight: 900;
    }

    .share-remaining .share-gap {
      font-size: 18px;
      font-weight: 700;
    }

    .share-remaining .share-footer-chip {
      background: #e10600;
      border-color: transparent;
    }

    /* ============ Share Schedule Template ============ */
    .share-schedule {
      background: linear-gradient(135deg, #e10600 0%, #ff2200 45%, #ff4400 100%);
      color: #fff;
    }

    .share-schedule .share-content {
      padding: 80px 48px 48px;
    }

    .share-schedule-orb {
      position: absolute;
      border-radius: 999px;
      filter: blur(64px);
      opacity: 0.9;
    }

    .share-schedule-orb.orb-1 {
      top: 0;
      right: 0;
      width: 384px;
      height: 384px;
      background: rgba(255, 255, 255, 0.1);
    }

    .share-schedule-orb.orb-2 {
      bottom: 0;
      left: 0;
      width: 500px;
      height: 500px;
      background: rgba(253, 224, 71, 0.1);
    }

    .share-schedule-dots {
      position: absolute;
      inset: 0;
      opacity: 0.3;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1024' height='1280' viewBox='0 0 1024 1280'><defs><linearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='143' y2='0' gradientTransform='rotate(45)' spreadMethod='repeat'><stop offset='0' stop-color='white' stop-opacity='0'/><stop offset='0.4196' stop-color='white' stop-opacity='0'/><stop offset='0.4196' stop-color='white' stop-opacity='0.6'/><stop offset='0.4545' stop-color='white' stop-opacity='0.6'/><stop offset='0.4545' stop-color='white' stop-opacity='0'/><stop offset='0.9790' stop-color='white' stop-opacity='0'/><stop offset='0.9790' stop-color='white' stop-opacity='0.3'/><stop offset='1' stop-color='white' stop-opacity='0.3'/></linearGradient></defs><rect width='1024' height='1280' fill='url(%23g)'/></svg>");
      background-repeat: no-repeat;
      background-size: 1024px 1280px;
    }

    .share-schedule-header {
      margin-bottom: 40px;
    }

    .share-schedule-header-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 32px;
    }

    .share-schedule-flag {
      position: relative;
      flex-shrink: 0;
    }

    .share-schedule-flag-glow {
      position: absolute;
      inset: 0;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.3);
      filter: blur(24px);
    }

    .share-schedule-flag-frame {
      position: relative;
      border-radius: 12px;
      border: 4px solid rgba(255, 255, 255, 0.5);
      overflow: hidden;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
      background: rgba(255, 255, 255, 0.1);
    }

    .share-schedule-flag-frame img {
      width: 128px;
      height: auto;
      display: block;
    }

    .share-schedule-flag-emoji {
      width: 128px;
      height: 84px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
    }

    .share-schedule-brand {
      display: inline-flex;
      align-items: center;
      gap: 0;
      padding: 10px 16px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.2);
      border: 2px solid rgba(255, 255, 255, 0.3);
      box-shadow: none;
      font-weight: 800;
      font-size: 18px;
      letter-spacing: 2px;
      white-space: nowrap;
    }

    .share-schedule-title {
      font-size: 48px;
      font-weight: 900;
      line-height: 1.1;
      margin-bottom: 8px;
      text-transform: uppercase;
      text-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
    }

    .share-schedule-meta {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 20px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.9);
    }

    .share-schedule-sessions {
      display: flex;
      flex-direction: column;
      gap: 16px;
      flex: 1;
    }

    .share-schedule-card {
      position: relative;
      border-radius: 24px;
      padding: 24px;
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 24px 40px rgba(0, 0, 0, 0.25);
      overflow: hidden;
      color: #000;
    }

    .share-schedule-card.is-race {
      background: #fff;
      border: 4px solid #fcd34d;
    }

    .share-schedule-card.is-sprint {
      background: #fff;
      border: 4px solid #fb923c;
    }

    .share-schedule-card.is-qualifying {
      background: #fff;
      border: 4px solid #60a5fa;
    }

    .share-schedule-accent {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 8px;
      background: linear-gradient(180deg, #e10600 0%, #c00500 100%);
    }

    .share-schedule-card.is-race .share-schedule-accent {
      background: linear-gradient(180deg, #facc15 0%, #eab308 100%);
    }

    .share-schedule-card.is-sprint .share-schedule-accent {
      background: linear-gradient(180deg, #fb923c 0%, #f97316 100%);
    }

    .share-schedule-card.is-qualifying .share-schedule-accent {
      background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
    }

    .share-schedule-card-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding-left: 16px;
    }

    .share-schedule-session-title {
      font-size: 24px;
      font-weight: 900;
      margin-bottom: 8px;
    }

    .share-schedule-session-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 18px;
      font-weight: 700;
      color: #6b7280;
    }

    .share-schedule-time {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 12px 24px;
      border-radius: 16px;
      background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
      box-shadow: 0 16px 24px rgba(0, 0, 0, 0.2);
      flex-shrink: 0;
    }

    .share-schedule-time svg {
      width: 28px;
      height: 28px;
      color: #e10600;
    }

    .share-schedule-time span {
      font-size: 30px;
      font-weight: 900;
      font-family: 'JetBrains Mono', monospace;
    }

    .share-schedule-footer {
      margin-top: 40px;
    }

    .share-schedule-footer-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-radius: 18px;
      background: rgba(0, 0, 0, 0.2);
      border: 2px solid rgba(255, 255, 255, 0.3);
      box-shadow: none;
    }

    .share-schedule-footer-title {
      font-size: 24px;
      font-weight: 900;
      color: #fff;
    }

    .share-schedule-footer-round {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.2);
      font-size: 18px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      color: #fff;
    }

    .share-schedule-footer-round svg {
      width: 20px;
      height: 20px;
    }

    .share-export-root.is-exporting .share-schedule-card,
    .share-export-root.is-exporting .share-schedule-time,
    .share-export-root.is-exporting .share-schedule-flag-frame,
    .share-export-root.is-exporting .share-schedule-footer-card {
      box-shadow: none;
    }

    .share-export-root.is-exporting .share-schedule-orb,
    .share-export-root.is-exporting .share-schedule-flag-glow {
      display: none;
    }

    .share-export-root.is-exporting .share-schedule-brand {
      box-shadow: none;
    }

    /* ============ Downforce LIGHT share design (calendar + results) ============ */
    .share-template.dfs {
      width: 1024px;
      height: auto;
      overflow: hidden;
      background: #F4F4F6;
      color: #111114;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
      letter-spacing: -0.01em;
    }
    .dfs * { box-sizing: border-box; }
    .share-preview-scale { height: auto !important; }

    .dfs-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        radial-gradient(circle at 18% 0%, rgba(230,57,70,0.06), transparent 52%),
        radial-gradient(circle at 92% 100%, rgba(10,108,219,0.04), transparent 50%);
    }
    .dfs-inner {
      position: relative;
      padding: 64px 64px 56px;
      display: flex;
      flex-direction: column;
    }

    .dfs-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 32px;
      margin-bottom: 12px;
    }
    .dfs-flag {
      width: 144px;
      height: 96px;
      border-radius: 14px;
      background: #fff;
      overflow: hidden;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(0,0,0,0.07);
      box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 32px -16px rgba(0,0,0,0.12);
    }
    .dfs-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .dfs-flag-emoji { font-size: 54px; line-height: 1; }
    .dfs-headmeta {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 12px;
      padding-top: 6px;
    }
    .dfs-chip {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid rgba(0,0,0,0.07);
      font-size: 18px;
      font-weight: 600;
      color: #5C5C63;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }
    .dfs-chip .dot { width: 9px; height: 9px; border-radius: 999px; background: #E63946; }
    .dfs-brand { font-size: 16px; font-weight: 600; color: #8E8E95; letter-spacing: 0.1em; text-align: right; }
    .dfs-title {
      font-size: 58px;
      font-weight: 700;
      letter-spacing: -0.035em;
      line-height: 1.04;
      color: #111114;
      margin: 0 0 14px;
      text-wrap: balance;
    }
    .dfs-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 22px;
      font-weight: 500;
      color: #5C5C63;
    }
    .dfs-meta .sep { width: 5px; height: 5px; border-radius: 999px; background: #8E8E95; }

    .dfs-sessions { margin-top: 40px; display: flex; flex-direction: column; gap: 14px; }
    .dfs-session {
      display: flex;
      align-items: center;
      gap: 20px;
      background: #fff;
      border: 1px solid rgba(0,0,0,0.07);
      border-radius: 20px;
      padding: 24px 28px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }
    .dfs-session-marker { width: 5px; align-self: stretch; border-radius: 999px; background: rgba(0,0,0,0.12); flex-shrink: 0; }
    .dfs-session[data-kind="practice"] .dfs-session-marker { background: #8E8E95; }
    .dfs-session[data-kind="sprint-shootout"] .dfs-session-marker { background: #8E4EC6; }
    .dfs-session[data-kind="sprint"] .dfs-session-marker { background: #C57A00; }
    .dfs-session[data-kind="qualifying"] .dfs-session-marker { background: #0A6CDB; }
    .dfs-session[data-kind="race"] .dfs-session-marker { background: #E63946; }
    .dfs-session-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
    .dfs-session-name { font-size: 30px; font-weight: 600; color: #111114; letter-spacing: -0.015em; }
    .dfs-session-meta { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 500; color: #5C5C63; }
    .dfs-session-meta .sep { width: 4px; height: 4px; border-radius: 999px; background: #8E8E95; }
    .dfs-session-time {
      font-family: 'JetBrains Mono', monospace;
      font-size: 34px;
      font-weight: 600;
      color: #111114;
      letter-spacing: -0.01em;
      font-variant-numeric: tabular-nums;
      padding-left: 24px;
      border-left: 1px solid rgba(0,0,0,0.07);
    }
    .dfs-session[data-kind="race"] .dfs-session-time { color: #E63946; }

    .dfs-footer {
      margin-top: 44px;
      padding-top: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid rgba(0,0,0,0.07);
    }
    .dfs-foot-left { display: flex; align-items: center; gap: 16px; }
    .dfs-mark {
      width: 44px; height: 44px; border-radius: 12px;
      background: #111114; color: #fff;
      font-weight: 800; font-size: 18px; letter-spacing: -0.02em;
      display: flex; align-items: center; justify-content: center;
    }
    .dfs-foot-text { display: flex; flex-direction: column; gap: 2px; }
    .dfs-foot-text strong { font-size: 19px; font-weight: 600; color: #111114; }
    .dfs-foot-text span { font-size: 14px; color: #8E8E95; font-weight: 500; letter-spacing: 0.04em; }
    .dfs-foot-right { font-size: 18px; font-weight: 600; color: #8E8E95; letter-spacing: 0.06em; }

    .dfs-results .dfs-head-titles { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
    .dfs-sub {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 12px 22px 12px 14px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid rgba(0,0,0,0.07);
      font-size: 24px;
      font-weight: 600;
      color: #111114;
      box-shadow: 0 1px 2px rgba(0,0,0,0.03);
      width: fit-content;
    }
    .dfs-sub .zap {
      width: 38px; height: 38px; border-radius: 11px;
      background: rgba(230,57,70,0.10);
      display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .dfs-sub .zap svg { width: 20px; height: 20px; color: #E63946; }

    .dfs-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; }
    .dfs-card {
      position: relative;
      background: #fff;
      border: 1px solid rgba(0,0,0,0.07);
      border-radius: 20px;
      padding: 22px 24px 18px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.03);
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-width: 0;
    }
    .dfs-card.is-podium { border-color: rgba(197,122,0,0.32); }
    .dfs-card.is-podium .dfs-card-top { padding-right: 36px; }
    .dfs-card-top { display: flex; align-items: center; gap: 16px; min-width: 0; }
    .dfs-rank {
      width: 62px; height: 62px; border-radius: 16px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: 'JetBrains Mono', monospace;
      font-size: 26px; font-weight: 700; color: #fff;
      font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
    }
    .dfs-rank.is-light { color: #14141A; border: 1px solid rgba(0,0,0,0.14); }
    .dfs-driver { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .dfs-name { font-size: 25px; font-weight: 700; color: #111114; letter-spacing: -0.02em; line-height: 1.15; }
    .dfs-team { font-size: 18px; font-weight: 500; color: #8E8E95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dfs-card-bottom { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.07); }
    .dfs-time { font-family: 'JetBrains Mono', monospace; font-size: 30px; font-weight: 700; color: #111114; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
    .dfs-card.is-winner .dfs-time { color: #E63946; }
    .dfs-gap { font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 600; color: #5C5C63; font-variant-numeric: tabular-nums; }
    .dfs-ret { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 600; color: #8E8E95; }
    .dfs-trophy {
      position: absolute; top: 18px; right: 18px;
      width: 32px; height: 32px; border-radius: 10px;
      background: rgba(240,168,35,0.14);
      display: flex; align-items: center; justify-content: center;
    }
    .dfs-trophy svg { width: 18px; height: 18px; color: #C57A00; }

    .dfs-results.is-remaining .dfs-grid {
      margin-top: 32px;
      gap: 10px;
    }
    .dfs-results.is-remaining .dfs-card {
      border-radius: 18px;
      padding: 16px 20px 13px;
      gap: 10px;
    }
    .dfs-results.is-remaining .dfs-card.is-podium .dfs-card-top { padding-right: 30px; }
    .dfs-results.is-remaining .dfs-card-top { gap: 13px; }
    .dfs-results.is-remaining .dfs-rank {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      font-size: 22px;
    }
    .dfs-results.is-remaining .dfs-name {
      font-size: 21px;
      line-height: 1.1;
    }
    .dfs-results.is-remaining .dfs-team { font-size: 16px; }
    .dfs-results.is-remaining .dfs-card-bottom {
      padding-top: 10px;
      gap: 10px;
    }
    .dfs-results.is-remaining .dfs-time { font-size: 25px; }
    .dfs-results.is-remaining .dfs-gap { font-size: 22px; }
    .dfs-results.is-remaining .dfs-ret { font-size: 21px; }
    .dfs-results.is-remaining .dfs-trophy {
      top: 14px;
      right: 14px;
      width: 28px;
      height: 28px;
      border-radius: 9px;
    }
    .dfs-results.is-remaining .dfs-trophy svg {
      width: 16px;
      height: 16px;
    }
    .dfs-results.is-remaining .dfs-footer {
      margin-top: 34px;
      padding-top: 20px;
    }

    .share-export-root.is-exporting .dfs-session,
    .share-export-root.is-exporting .dfs-card,
    .share-export-root.is-exporting .dfs-sub,
    .share-export-root.is-exporting .dfs-flag { box-shadow: none; }

    /* ============ Skeleton Loading ============ */
    .skeleton {
      background: linear-gradient(90deg, var(--bg-card) 25%, var(--border) 50%, var(--bg-card) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
      color: transparent !important;
    }

    @keyframes shimmer {
      0% {
        background-position: 200% 0;
      }

      100% {
        background-position: -200% 0;
      }
    }

    /* ============ Years Grid ============ */
    .years-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-top: 16px;
    }

    .year-btn {
      padding: 14px 8px;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      color: var(--text-primary);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
      font-variant-numeric: tabular-nums;
    }

    .year-btn:active {
      background: var(--accent);
      border-color: var(--accent);
    }

    /* ============ Races List ============ */
    .races-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 16px;
    }

    .race-btn {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 14px 16px;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      color: var(--text-primary);
      font-size: 14px;
      cursor: pointer;
      transition: var(--transition);
      text-align: left;
    }

    .race-btn:active {
      background: var(--accent);
      border-color: var(--accent);
    }

    /* ============ News Cards (1:1 ref) ============ */
    .news-content {
      padding: 0 16px;
      margin-top: 16px;
    }

    .news-cards {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .news-card {
      padding: 16px;
      background: var(--bg-card);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px;
      transition: var(--transition);
    }

    .news-card:active {
      background: var(--bg-card-hover);
      border-color: var(--border);
      transform: scale(0.98);
    }

    .news-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .news-badge {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--accent);
      background: var(--accent-glow);
      padding: 2px 8px;
      border-radius: 999px;
    }

    .news-time {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      color: var(--text-muted);
    }

    .news-time svg {
      width: 12px;
      height: 12px;
    }

    .news-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 6px;
      line-height: 1.3;
    }

    .news-excerpt {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .news-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 12px;
      font-size: 12px;
      font-weight: 600;
      color: var(--accent);
      text-decoration: none;
    }

    .news-link svg {
      width: 12px;
      height: 12px;
    }

    /* ============ Live Placeholder (New) ============ */
    .live-placeholder {
      position: relative;
      min-height: 320px;
      padding: 24px 16px 28px;
      background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 18px;
      overflow: hidden;
    }

    .live-glow {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(225,6,0,0.2) 0%, transparent 55%);
      opacity: 0.5;
      pointer-events: none;
    }

    .live-pulse {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 90px;
      height: 90px;
      background: rgba(225,6,0,0.3);
      border-radius: 999px;
      filter: blur(28px);
      animation: livePulse 3s ease-in-out infinite;
      pointer-events: none;
    }

    .live-track {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: 0.15;
      filter: blur(3px);
      pointer-events: none;
    }

    .live-content {
      position: relative;
      z-index: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 16px 8px;
      gap: 10px;
    }

    .live-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(225,6,0,0.2);
      border: 1px solid rgba(225,6,0,0.35);
      color: #e10600;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .live-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #e10600;
      animation: liveDot 2s ease-in-out infinite;
    }

    .live-title {
      font-size: 34px;
      font-weight: 700;
      background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.6) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .live-subtitle {
      font-size: 13px;
      line-height: 1.4;
      color: rgba(255,255,255,0.55);
      max-width: 260px;
    }

    .live-underline {
      width: 160px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent 0%, #e10600 50%, transparent 100%);
      opacity: 0.6;
      animation: liveUnderline 2s ease-in-out infinite;
      margin-top: 6px;
    }

    .live-bottom-gradient {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 80px;
      background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.8) 100%);
      pointer-events: none;
    }

    @keyframes livePulse {
      0%, 100% { transform: scale(1); opacity: 0.3; }
      50% { transform: scale(1.2); opacity: 0.5; }
    }

    @keyframes liveDot {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }

    @keyframes liveUnderline {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 1; }
    }

    /* ============ Settings ============ */
    .settings-section {
      margin-bottom: 24px;
    }

    .section-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 12px;
    }

    .settings-card {
      padding: 16px;
      background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 16px;
      position: relative;
      overflow: hidden;
    }

    .settings-card::before {
      content: "";
      position: absolute;
      top: -20px;
      right: -20px;
      width: 120px;
      height: 120px;
      background: rgba(225,6,0,0.08);
      border-radius: 50%;
      filter: blur(24px);
    }

    .settings-user-row {
      display: flex;
      align-items: center;
      gap: 14px;
      position: relative;
      z-index: 1;
    }

    .settings-user-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle at 30% 30%, #e10600 0%, #c00500 60%, #a00400 100%);
      color: #fff;
      flex-shrink: 0;
    }

    .settings-user-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: rgba(255,255,255,0.5);
      margin-bottom: 4px;
    }

    .settings-user-value {
      font-size: 18px;
      font-weight: 700;
      color: #fff;
      font-variant-numeric: tabular-nums;
    }

    .settings-label {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 4px;
    }

    .settings-value {
      font-size: 15px;
      font-weight: 500;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums;
    }

    .timezone-card {
      padding: 16px;
      background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 14px;
    }

    .timezone-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .timezone-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: rgba(225,6,0,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #e10600;
      flex-shrink: 0;
    }

    .timezone-label {
      font-size: 11px;
      color: rgba(255,255,255,0.5);
      text-transform: uppercase;
      letter-spacing: 0.6px;
      margin-bottom: 2px;
    }

    .timezone-value {
      font-size: 15px;
      font-weight: 600;
      color: #fff;
    }

    .select-input {
      width: 100%;
      padding: 12px 14px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      color: #fff;
      font-size: 13px;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      margin-bottom: 10px;
    }

    .select-input option {
      color: #111;
      background: #fff;
    }

    .save-btn {
      width: 100%;
      padding: 12px;
      background: #e10600;
      border: none;
      border-radius: 12px;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
    }

    .save-btn:active {
      background: var(--accent-dark);
      transform: scale(0.98);
    }

    /* ============ Notifications ============ */
    .notifications-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .notification-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
    }

    .notification-item strong {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
    }

    .notification-item div:first-child div {
      font-size: 12px;
      margin-top: 2px;
    }

    .notif-select {
      padding: 8px 12px;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text-primary);
      font-size: 13px;
      cursor: pointer;
    }

    .notification-toggle {
      gap: 12px;
    }

    .switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
      flex: 0 0 auto;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .switch .slider {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 999px;
      transition: all 0.2s ease;
    }

    .switch .slider::before {
      content: "";
      position: absolute;
      height: 18px;
      width: 18px;
      left: 3px;
      top: 2px;
      background: var(--text-primary);
      border-radius: 50%;
      transition: transform 0.2s ease;
    }

    .switch input:checked + .slider {
      background: rgba(255, 61, 94, 0.2);
      border-color: rgba(255, 61, 94, 0.5);
    }

    .switch input:checked + .slider::before {
      transform: translateX(20px);
      background: var(--accent);
    }

    /* ===== Custom notif modal ===== */
    .modal {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 999;
    }
    .modal.hidden { display: none; }
    .modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.6);
    }
    .modal-card {
      position: relative;
      z-index: 1;
      width: 90%;
      max-width: 360px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 16px;
      box-shadow: var(--shadow);
    }
    .modal-card h4 {
      margin-bottom: 6px;
      font-size: 16px;
      font-weight: 600;
    }
    .modal-card p {
      color: var(--text-secondary);
      font-size: 13px;
      margin-bottom: 12px;
    }
    .modal-input {
      width: 100%;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--bg-secondary);
      color: var(--text-primary);
      font-size: 14px;
      margin-bottom: 12px;
    }
    .modal-actions {
      display: flex;
      gap: 8px;
    }
    .modal-btn {
      flex: 1;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--bg-secondary);
      color: var(--text-primary);
      font-weight: 600;
    }
    .modal-btn.primary {
      background: var(--accent);
      border-color: var(--accent);
    }

    /* ============ Bottom Navigation ============ */
    .bottom-nav {
      display: flex;
      justify-content: space-evenly;
      padding: 8px 0;
      padding-bottom: calc(8px + env(safe-area-inset-bottom));
      background: var(--bg-secondary);
      border-top: 1px solid var(--border);
      flex-shrink: 0;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      max-width: 480px;
      margin: 0 auto;
    }

    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px 16px;
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 11px;
      cursor: pointer;
      transition: var(--transition);
    }

    .nav-item.active {
      color: var(--accent);
    }

    .nav-item svg {
      width: 24px;
      height: 24px;
    }

    .nav-item:active {
      transform: scale(0.95);
    }

    /* ============ Scrollbar ============ */
    .content::-webkit-scrollbar {
      width: 4px;
    }

    .content::-webkit-scrollbar-track {
      background: transparent;
    }

    .content::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 2px;
    }

    /* ============ Toggle Switch (Pilots/Teams) ============ */
    .standings-toggle {
      display: flex;
      gap: 8px;
      padding: 4px;
      background: #1a1a1a;
      border-radius: 12px;
      margin-bottom: 16px;
      border: 1px solid rgba(255,255,255,0.05);
    }

    .toggle-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 12px;
      background: transparent;
      border: none;
      border-radius: 8px;
      color: rgba(255,255,255,0.5);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
    }

    .toggle-btn.active {
      background: #e10600;
      color: #ffffff;
    }

    .toggle-btn svg {
      width: 16px;
      height: 16px;
    }

    /* Tabular numbers for better alignment */
    .race-number,
    .driver-position,
    .result-position,
    .points-value,
    .season-year,
    .result-time {
      font-family: 'JetBrains Mono', monospace;
    }