:root {
      --wc-blue: #1d5cb3;
      --wc-green: #0d7e3d;
      --wc-gold: #f4c542;
      --wc-ink: #0f172a;
      --wc-soft: #f8fafc;
    }

    body {
      background:
        radial-gradient(circle at top left, rgba(29, 92, 179, .10), transparent 34rem),
        radial-gradient(circle at top right, rgba(13, 126, 61, .10), transparent 30rem),
        #f8fafc;
    }

    main>section,
    main>div {
      scroll-margin-top: 96px;
    }

    .header {
      padding: 1.25rem 1.25rem 0;
    }

    #schedule {
      border-radius: 1.5rem !important;
      border-color: rgb(226 232 240) !important;
      background: rgba(255, 255, 255, .96) !important;
      box-shadow: 0 18px 45px rgba(15, 23, 42, .07) !important;
    }

    #schedule>div[x-show] {
      padding: 0 1.25rem 1.25rem;
    }

    #schedule .title span,
    .header .title span {
      background: linear-gradient(180deg, var(--wc-blue), var(--wc-green)) !important;
    }

    #schedule button {
      border-radius: 999px !important;
      font-weight: 700 !important;
      box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    }

    #schedule .space-y-3>div,
    .matches-list {
      border-color: rgb(226 232 240) !important;
    }

    #schedule .space-y-3>div {
      border-radius: 1rem !important;
      overflow: hidden !important;
      background: #fff !important;
      box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
    }

    .match-item {
      min-height: 56px;
      transition: background-color .2s ease, transform .2s ease;
    }

    .match-item:hover {
      background: #f8fafc !important;
    }

    .match-time {
      color: var(--wc-blue) !important;
      font-weight: 800 !important;
    }

    .score {
      min-width: 74px;
      border-radius: 999px;
      background: #f1f5f9;
      padding: .25rem .5rem;
      text-align: center;
      font-weight: 900 !important;
    }

    .home-team img,
    .away-team img {
      width: 1.5rem !important;
      height: 1.5rem !important;
      border-radius: 999px;
      background: #fff;
      border: 1px solid #e2e8f0;
      padding: 2px;
      box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
    }

    #stadiums,
    #faq,
    main section:not(#schedule) {
      border-radius: 1.5rem;
    }

    #stadiums>h2,
    #faq>h2,
    main section>h2 {
      position: relative;
      border-left-color: var(--wc-gold) !important;
      color: var(--wc-ink) !important;
      letter-spacing: -.02em;
    }

    #stadiums .grid>div,
    #faq details,
    main section.bg-white {
      border-color: rgb(226 232 240) !important;
      box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
    }

    #faq details {
      border-radius: 1rem;
      background: #fff;
      padding: 1rem 1.25rem;
      border: 1px solid #e2e8f0;
      margin-bottom: .75rem;
    }

    #faq summary {
      font-weight: 800;
      color: #0f172a;
    }

    #faq p,
    main section p {
      color: #475569;
      line-height: 1.9;
    }

    footer {
      background:
        radial-gradient(circle at top left, rgba(244, 197, 66, .14), transparent 24rem),
        linear-gradient(135deg, #020617, #0f172a 55%, #111827) !important;
    }

    @media (max-width: 640px) {
      .header {
        padding: 1rem 1rem 0;
      }

      #schedule>div[x-show] {
        padding: 0 1rem 1rem;
      }

      .match-item {
        padding: .75rem .625rem !important;
        gap: .375rem !important;
      }

      .score {
        min-width: 62px;
        padding: .2rem .35rem;
      }

      .match-item>.w-14 {
        width: 3rem !important;
      }
    }