:root {
      --blue: #07111F;
      --blue-2: #0A1728;
      --blue-3: #10223B;
      --red: #C62839;
      --red-dark: #5F0F1A;
      --red-bright: #E32B42;
      --white: #FFFFFF;
      --bg: #182232;
      --card: #FFFFFF;
      --text: #07111F;
      --muted: #667287;
      --muted-2: #8A95A7;
      --line: #E2E8F1;
      --soft: #F8FAFD;
      --green: #16A36A;
      --amber: #F4B740;
      --shadow: 0 12px 32px rgba(7, 17, 31, 0.075);
      --shadow-soft: 0 7px 18px rgba(7, 17, 31, 0.05);
      --radius: 18px;
      --condensed: "Arial Narrow", "Roboto Condensed", "Segoe UI Condensed", Impact, system-ui, sans-serif;
      --ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: var(--ui);
      background:
        radial-gradient(circle at 82% -8%, rgba(198,40,57,0.13), transparent 28%),
        radial-gradient(circle at 12% 0%, rgba(255,255,255,0.045), transparent 24%),
        radial-gradient(circle at 8% 78%, rgba(120,139,165,0.13), transparent 34%),
        linear-gradient(180deg, #0E1520 0%, #151F2D 180px, #1D2A3C 520px, #293647 100%);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      background:
        radial-gradient(ellipse at 50% 118px, transparent 0 132px, rgba(255,255,255,0.028) 133px 134px, transparent 135px),
        radial-gradient(ellipse at 50% 118px, transparent 0 220px, rgba(120,139,165,0.045) 221px 222px, transparent 223px);
      opacity: 0.9;
    }

    body.detail-open { overflow: hidden; }

    a { color: inherit; text-decoration: none; }
    button { font: inherit; }

    .skip-link {
      position: absolute;
      left: 14px;
      top: -48px;
      z-index: 100;
      padding: 10px 14px;
      border-radius: 999px;
      background: var(--red);
      color: #FFFFFF;
      -webkit-text-fill-color: #FFFFFF;
      font-size: 13px;
      font-weight: 900;
      transition: top 0.16s ease;
    }

    .skip-link:focus { top: 12px; }

    :focus-visible {
      outline: 3px solid rgba(198,40,57,0.48);
      outline-offset: 3px;
    }

    .site { min-height: 100vh; }

    .app-shell {
      max-width: 980px;
      margin: 0 auto;
      padding: 16px 18px 12px;
    }

    .app-hero {
      position: relative;
      background:
        radial-gradient(circle at 92% 4%, rgba(227,43,66,0.26), transparent 28%),
        radial-gradient(circle at 8% 0%, rgba(255,255,255,0.08), transparent 24%),
        linear-gradient(135deg, rgba(255,255,255,0.045), transparent 32%),
        linear-gradient(135deg, #07111F 0%, #0A1728 56%, #050B14 100%);
      color: var(--white);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 26px;
      box-shadow: 0 24px 58px rgba(2,8,18,0.28), 0 0 0 1px rgba(198,40,57,0.05);
      overflow: hidden;
      margin-bottom: 22px;
    }

    .app-hero::before {
      content: "";
      position: absolute;
      right: -40px;
      top: -64px;
      width: 210px;
      height: 210px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 50%;
      box-shadow: inset 0 0 0 30px rgba(255,255,255,0.016);
      pointer-events: none;
    }

    .app-hero::after {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--red), rgba(227,43,66,0.0) 46%, rgba(255,255,255,0.14));
      opacity: 0.95;
      pointer-events: none;
    }

    .app-hero-inner {
      position: relative;
      z-index: 1;
      min-height: 94px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 18px;
      padding: 16px 18px;
    }

    .hero-brand {
      display: inline-flex;
      align-items: baseline;
      white-space: nowrap;
      font-family: var(--condensed);
      font-size: 39px;
      font-weight: 900;
      letter-spacing: -0.045em;
      line-height: 0.92;
      margin: 0;
    }

    .hero-brand .hero-brand-main { color: var(--white); }
    .hero-brand .hero-brand-cat {
      color: var(--red-bright);
      margin-left: 2px;
    }

    .brand-rule {
      width: 138px;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--red), var(--red-bright));
      box-shadow: 0 0 18px rgba(198,40,57,0.34);
    }

    .kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: rgba(255,255,255,0.72);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      white-space: nowrap;
    }

    .live-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--red-bright);
      box-shadow: 0 0 0 6px rgba(227,43,66,0.14);
      animation: slowPulse 2.4s ease-in-out infinite;
    }

    @keyframes slowPulse {
      0%, 100% { opacity: 0.55; transform: scale(0.92); box-shadow: 0 0 0 4px rgba(227,43,66,0.10); }
      50% { opacity: 1; transform: scale(1.06); box-shadow: 0 0 0 8px rgba(227,43,66,0.20); }
    }

    .app-title {
      margin: 0;
      color: rgba(255,255,255,0.82);
      font-family: var(--ui);
      font-size: 14px;
      line-height: 1.25;
      letter-spacing: 0.035em;
      font-weight: 800;
      white-space: nowrap;
    }

    .app-title span {
      color: var(--red-bright);
      margin-left: 7px;
      font-weight: 900;
    }

    .app-hero-copy {
      margin: 7px 0 0;
      max-width: 600px;
      color: rgba(255,255,255,0.66);
      font-size: 13px;
      line-height: 1.45;
      font-weight: 650;
    }

    .hero-copy-block {
      min-width: 0;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    .hero-main {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 24px;
      width: 100%;
    }

    .hero-meta {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-start;
      gap: 12px;
      min-width: max-content;
      padding-top: 2px;
    }

    .hero-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center; }

    .controls-status {
      order: 3;
      margin-left: auto;
      justify-content: flex-end;
      flex: 0 0 auto;
    }

    .status-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 34px;
      padding: 0 11px;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.80);
      font-size: 12px;
      font-weight: 850;
      white-space: nowrap;
    }

    .status-chip.strong { background: var(--red); border-color: var(--red); color: var(--white); }

    .refresh-btn {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 11px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.82);
      font-size: 11px;
      font-weight: 850;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
    }

    .refresh-icon {
      display: inline-block;
      color: var(--red-bright);
      font-size: 14px;
      font-weight: 950;
      line-height: 1;
    }

    .refresh-btn:hover {
      transform: translateY(-1px);
      color: var(--white);
      background: rgba(255,255,255,0.13);
      border-color: rgba(255,255,255,0.20);
    }

    .refresh-btn.is-refreshing .refresh-icon { animation: refreshSpin 0.8s ease-in-out; }

    @keyframes refreshSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .refresh-btn #updatedChip { color: rgba(255,255,255,0.62); }

    .refresh-pill { margin-left: 0; }

    .app-controls {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      margin-bottom: 12px;
    }

    .filters-row {
      display: grid;
      grid-template-columns: 1fr;
      align-items: start;
      gap: 10px;
      width: 100%;
      min-width: 0;
    }

    .tabs-scroll {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
      overflow: visible;
      scrollbar-width: none;
      padding: 2px 0;
      width: 100%;
    }

    .tabs-scroll::-webkit-scrollbar { display: none; }

    .tab {
      flex: 1 1 auto;
      border: 1px solid rgba(226,232,241,0.92);
      background: rgba(255,255,255,0.92);
      border-radius: 999px;
      padding: 9px 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-size: 12.5px;
      font-weight: 850;
      white-space: nowrap;
      cursor: pointer;
      box-shadow: 0 7px 18px rgba(7,17,31,0.075);
      backdrop-filter: blur(12px);
    }

    .tab.active { background: var(--red); border-color: var(--red); color: var(--white); }

    .calendar-group {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      min-width: 0;
      width: 100%;
    }

    .calendar-label {
      border: 1px solid rgba(7,17,31,0.10);
      background: rgba(255,255,255,0.94);
      border-radius: 999px;
      min-height: 38px;
      padding: 0 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: var(--blue);
      font-size: 11px;
      font-weight: 930;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      white-space: nowrap;
      box-shadow: 0 6px 16px rgba(17,24,33,0.08);
      cursor: pointer;
      transition: transform 0.14s ease, border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
    }

    .calendar-button span {
      color: var(--red);
      font-size: 15px;
      line-height: 1;
      transform: translateY(-1px);
    }

    .calendar-button:hover {
      transform: translateY(-1px);
      color: var(--red);
      border-color: rgba(198,40,57,0.24);
      background: #FFFFFF;
    }

    .calendar-popover {
      display: none;
      width: min(360px, 100%);
      margin-left: auto;
      padding: 12px;
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 20px;
      background: rgba(255,255,255,0.965);
      box-shadow: 0 18px 42px rgba(7,17,31,0.22);
      backdrop-filter: blur(16px);
      color: var(--blue);
      z-index: 10;
    }

    .calendar-popover.open { display: grid; gap: 10px; }

    .calendar-popover-head {
      display: grid;
      grid-template-columns: 34px 1fr 34px;
      align-items: center;
      gap: 8px;
    }

    .calendar-popover-head strong {
      text-align: center;
      font-size: 12px;
      font-weight: 950;
      letter-spacing: 0.02em;
    }

    .calendar-nav-btn {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(226,232,241,0.95);
      border-radius: 999px;
      background: #FFFFFF;
      color: var(--blue);
      font-size: 18px;
      font-weight: 950;
      cursor: pointer;
    }

    .calendar-weekdays,
    .calendar-month-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 5px;
    }

    .calendar-weekdays span {
      color: var(--muted);
      font-size: 9.5px;
      font-weight: 920;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .calendar-date,
    .calendar-empty {
      min-height: 34px;
      border-radius: 11px;
      display: grid;
      place-items: center;
      font-size: 11.5px;
      font-weight: 880;
    }

    .calendar-date {
      border: 1px solid rgba(226,232,241,0.95);
      background: #FFFFFF;
      color: var(--blue);
      cursor: pointer;
      transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
    }

    .calendar-date:hover {
      transform: translateY(-1px);
      border-color: rgba(198,40,57,0.24);
      color: var(--red);
    }

    .calendar-date.active {
      background: linear-gradient(180deg, var(--red-bright), var(--red));
      border-color: var(--red);
      color: var(--white);
      box-shadow: 0 8px 16px rgba(198,40,57,0.20);
    }

    .calendar-date.is-limited,
    .day-chip.is-limited {
      opacity: 0.72;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(7,17,31,0.045);
    }

    .calendar-date.is-limited:hover,
    .day-chip.is-limited:hover {
      transform: translateY(-1px);
      border-color: rgba(198,40,57,0.18);
      color: var(--red);
    }

    .calendar-empty { opacity: 0; }

    .calendar-popover-note {
      color: var(--muted);
      font-size: 11px;
      font-weight: 760;
      line-height: 1.35;
      text-align: center;
    }

    .calendar-strip { display: grid; grid-template-columns: repeat(3, 64px); gap: 7px; overflow-x: auto; scrollbar-width: none; order: 1; }
    .calendar-label { order: 2; }
    .calendar-strip::-webkit-scrollbar { display: none; }

    .day-chip {
      border: 1px solid rgba(7,17,31,0.09);
      background: linear-gradient(180deg, #FFFFFF, #F8FAFD);
      border-radius: 16px;
      min-height: 50px;
      padding: 7px 6px;
      display: grid;
      place-items: center;
      cursor: pointer;
      box-shadow: 0 6px 16px rgba(17,24,33,0.08);
      transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
    }

    .day-chip:hover {
      transform: translateY(-1px);
      border-color: rgba(198,40,57,0.20);
      box-shadow: 0 8px 18px rgba(17,24,33,0.10);
    }

    .day-chip span:first-child {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--muted);
      font-size: 9px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .day-chip span:last-child { margin-top: 2px; color: var(--blue); font-size: 15px; font-weight: 950; letter-spacing: -0.03em; }
    .day-chip.active { background: linear-gradient(180deg, var(--red-bright), var(--red)); border-color: var(--red); box-shadow: 0 10px 22px rgba(198,40,57,0.22); transform: translateY(-1px); }
    .day-chip.active span, .day-chip.active span:last-child { color: var(--white); }

    .home-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      align-items: start;
    }

    #today { order: 1; }
    #live { order: 2; }
    #results { order: 3; }


    .quiet-note {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 12px;
      padding: 11px 13px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(255,255,255,0.88);
      box-shadow: var(--shadow-soft);
      color: var(--muted);
      font-size: 12.5px;
      font-weight: 760;
    }

    .quiet-text strong { color: var(--blue); }

    .quiet-tools {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .inline-search {
      min-width: 190px;
      width: 100%;
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      border: 1px solid rgba(226,232,241,0.92);
      border-radius: 999px;
      background: rgba(255,255,255,0.92);
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      box-shadow: 0 7px 18px rgba(7,17,31,0.075);
      backdrop-filter: blur(12px);
      white-space: nowrap;
    }

    .inline-search span { color: var(--red); font-size: 14px; font-weight: 950; }

    .inline-search input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--blue);
      font-size: 12px;
      font-weight: 850;
    }

    .inline-search input::placeholder { color: var(--muted); opacity: 0.84; }

    .calendar-search {
      order: 4;
      min-width: 158px;
      flex: 0 0 168px;
      width: 168px;
      margin-left: 0;
    }

    .state-stack {
      display: grid;
      gap: 10px;
    }

    .state-card {
      display: none;
      align-items: center;
      gap: 12px;
      padding: 15px 15px;
      border: 1px solid rgba(226,232,241,0.92);
      border-radius: 20px;
      background:
        radial-gradient(circle at 94% 0%, rgba(198,40,57,0.08), transparent 28%),
        rgba(255,255,255,0.88);
      box-shadow: var(--shadow-soft);
      color: var(--blue);
    }

    .state-card.visible { display: flex; }

    .state-icon {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(198,40,57,0.09);
      color: var(--red);
      font-size: 16px;
      font-weight: 950;
      flex: 0 0 auto;
    }

    .state-copy { min-width: 0; display: grid; gap: 3px; }
    .state-copy strong { font-size: 13px; font-weight: 950; letter-spacing: -0.01em; }
    .state-copy span { color: var(--muted); font-size: 12px; font-weight: 760; line-height: 1.35; }

    .state-loading .state-icon {
      animation: statePulse 1.4s ease-in-out infinite;
      box-shadow: 0 0 0 6px rgba(198,40,57,0.08);
    }

    @keyframes statePulse {
      0%, 100% { transform: scale(0.94); opacity: 0.62; }
      50% { transform: scale(1.04); opacity: 1; }
    }

    .state-skeletons {
      display: grid;
      gap: 6px;
      margin-left: auto;
      width: min(210px, 32%);
      flex: 0 1 auto;
    }

    .state-skeletons i {
      display: block;
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(90deg, #E9EEF5, #F8FAFD, #E9EEF5);
      background-size: 200% 100%;
      animation: skeletonMove 1.6s linear infinite;
    }

    .state-skeletons i:nth-child(2) { width: 78%; }
    .state-skeletons i:nth-child(3) { width: 54%; }

    @keyframes skeletonMove {
      from { background-position: 200% 0; }
      to { background-position: -200% 0; }
    }

    .state-fallback {
      border-color: rgba(198,40,57,0.18);
      background:
        radial-gradient(circle at 94% 0%, rgba(198,40,57,0.13), transparent 30%),
        rgba(255,255,255,0.90);
    }

    .state-fallback .state-icon { background: rgba(198,40,57,0.11); }

    .quiet-badge {
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      padding: 0 12px;
      border-radius: 999px;
      background: var(--blue);
      color: var(--white);
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .panel,
    .detail-sheet {
      background: rgba(255,255,255,0.955);
      border: 1px solid rgba(255,255,255,0.78);
      border-radius: var(--radius);
      box-shadow: 0 16px 40px rgba(7,17,31,0.13);
      backdrop-filter: blur(16px);
      overflow: hidden;
      margin-bottom: 8px;
    }

    .panel-head {
      padding: 12px 14px;
      border-bottom: 1px solid rgba(226,232,241,0.88);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: linear-gradient(180deg, rgba(255,255,255,0.985), rgba(247,249,252,0.955));
    }

    .panel-title {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 12.5px;
      font-weight: 980;
      text-transform: uppercase;
      letter-spacing: 0.105em;
      color: var(--red);
    }

    .panel-title .mark {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--red);
      box-shadow: 0 0 0 6px rgba(198,40,57,0.10);
      animation: liveNowPulse 3.1s ease-in-out infinite;
    }

    @keyframes liveNowPulse {
      0%, 100% { opacity: 0.58; transform: scale(0.94); box-shadow: 0 0 0 4px rgba(198,40,57,0.08); }
      50% { opacity: 1; transform: scale(1.04); box-shadow: 0 0 0 7px rgba(198,40,57,0.14); }
    }
    .panel-link { color: var(--red); font-size: 12px; font-weight: 850; }

    .match-row.is-hidden { display: none; }
    .panel.is-hidden { display: none; }

    .panel.secondary-panel {
      background: rgba(255,255,255,0.86);
      box-shadow: 0 9px 22px rgba(7,17,31,0.07);
      border-color: rgba(226,232,241,0.78);
    }

    .panel.secondary-panel .panel-head {
      background: linear-gradient(180deg, rgba(250,252,255,0.96), rgba(244,247,251,0.92));
    }

    .panel.secondary-panel .panel-title,
    .panel.secondary-panel .panel-link { color: var(--muted); }

    .section-note.is-hidden { display: none; }

    .section-note {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 54px;
      padding: 0 18px;
      border-bottom: 1px solid rgba(226,232,241,0.72);
      color: var(--muted);
      font-size: 12.5px;
      font-weight: 760;
      background: linear-gradient(180deg, rgba(248,250,253,0.84), rgba(255,255,255,0.72));
    }

    .section-note strong { color: var(--blue); font-weight: 950; }

    .section-note::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(198,40,57,0.38);
      box-shadow: 0 0 0 5px rgba(198,40,57,0.07);
      flex: 0 0 auto;
    }

    .secondary-panel .match-row {
      min-height: 52px;
      opacity: 0.92;
    }

    .secondary-panel .score { font-size: 22px; }

    .match-row {
      position: relative;
      display: grid;
      grid-template-columns: 52px 54px minmax(150px, 1.08fr) 88px minmax(150px, 1.08fr) minmax(164px, 0.86fr) 20px;
      justify-content: center;
      align-items: center;
      gap:  11px;
      min-height: 58px;
      padding:  0 16px 0 14px;
      border-bottom: 1px solid rgba(226,232,241,0.88);
      transition: 0.14s ease;
      cursor: pointer;
    }

    .match-open-btn {
      position: absolute;
      inset: 0;
      z-index: 1;
      border: 0;
      padding: 0;
      margin: 0;
      background: transparent;
      color: transparent;
      cursor: pointer;
      border-radius: inherit;
      pointer-events: none;
    }

    .match-open-btn:focus-visible {
      outline: 3px solid rgba(198,40,57,0.48);
      outline-offset: -4px;
    }

    .match-row > :not(.match-open-btn) {
      position: relative;
      z-index: 2;
      pointer-events: none;
    }

    .match-row .team-favorite-btn {
      pointer-events: auto;
    }

    .match-row:hover { background: #FBFCFE; }
    .match-row:focus-within { position: relative; z-index: 1; background: #FBFCFE; }
    .match-row.is-selected { background: linear-gradient(90deg, rgba(198,40,57,0.065), #FFFFFF 44%); }
    .match-row:last-child { border-bottom: 0; }

    .minute { color: var(--red); font-size: 14px; font-weight: 920; font-variant-numeric: tabular-nums; }
    .status { color: var(--red); font-size: 12px; font-weight: 920; text-transform: uppercase; letter-spacing: 0.08em; }
    .status.done, .minute.done { color: var(--red); }
    .match-row.is-stopped .minute {
      grid-column: 1 / span 2;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 11.5px;
      letter-spacing: 0;
    }
    .match-row.is-stopped .status { display: none; }
    .match-row.is-stopped .score {
      color: var(--muted);
      font-size: 18px;
    }

    .team { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; width: 100%; font-size: 15.2px; font-weight: 840; }
    .team.away { justify-content: center; flex-direction: row-reverse; }
    .team-copy { min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
    .team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }

    .score {
      text-align: center;
      font-family: var(--condensed);
      font-size: 24px;
      font-weight: 920;
      letter-spacing: -0.03em;
      white-space: nowrap;
      color: var(--blue);
    }

    .score.upcoming { font-family: var(--ui); font-size: 14px; font-weight: 850; color: var(--muted); letter-spacing: 0; }
    .score.penalty {
      font-family: var(--ui);
      font-size: 14px;
      font-weight: 950;
      letter-spacing: 0;
    }
    .league {
      color: var(--muted);
      font-size: 12.5px;
      font-weight: 800;
      text-align: right;
      white-space: nowrap;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 7px;
    }
    .league-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .context-chip {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 34px;
      min-height: 18px;
      padding: 0 7px;
      border-radius: 999px;
      border: 1px solid rgba(226,232,241,0.95);
      background: rgba(255,255,255,0.76);
      color: #718096;
      font-size: 9.2px;
      font-weight: 950;
      letter-spacing: 0.065em;
      text-transform: uppercase;
    }
    .context-chip.priority {
      color: var(--red);
      border-color: rgba(198,40,57,0.20);
      background: rgba(198,40,57,0.055);
    }
    .context-chip.selected {
      color: #42516A;
      background: rgba(236,240,246,0.92);
    }
    .context-chip.live {
      color: #66758C;
      background: rgba(255,255,255,0.62);
    }
    .chev { color: #B0BAC9; font-size: 20px; text-align: right; }

    .team-favorite-btn {
      width: 22px;
      height: 22px;
      display: inline-grid;
      place-items: center;
      border: 1px solid rgba(226,232,241,0.96);
      border-radius: 999px;
      background: rgba(255,255,255,0.82);
      color: #A8B2C2;
      font-size: 13px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
      flex: 0 0 auto;
      box-shadow: 0 3px 8px rgba(7,17,31,0.05);
      transition: transform 0.14s ease, color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
    }

    .team-favorite-btn:hover {
      transform: translateY(-1px);
      color: var(--red);
      border-color: rgba(198,40,57,0.28);
      background: rgba(255,255,255,0.96);
    }

    .team-favorite-btn.is-favorite,
    .team-favorite-btn[aria-pressed="true"] {
      color: var(--red);
      border-color: rgba(198,40,57,0.34);
      background: rgba(198,40,57,0.08);
    }

    .team-logo { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
    .club-logo { width: 28px; height: 28px; object-fit: contain; display: block; filter: drop-shadow(0 2px 5px rgba(7,17,31,0.14)); }
    .team-logo.has-real-logo .badge { display: none; }
    .team-logo.has-fallback .club-logo { display: none; }

    .badge {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      color: #fff;
      font-size: 8px;
      font-weight: 950;
      letter-spacing: -0.04em;
      border: 2px solid rgba(255,255,255,0.96);
      box-shadow: 0 2px 8px rgba(7,17,31,0.12), inset 0 -8px 14px rgba(0,0,0,0.16);
      position: relative;
      overflow: hidden;
    }

    .badge::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; }
    .badge.mci { background: linear-gradient(135deg, #75BDEB, #1A5D95); }
    .badge.ars { background: linear-gradient(135deg, #E63546, #8F1020); }
    .badge.bar { background: linear-gradient(135deg, #163A70 0 50%, #9A1738 50%); }
    .badge.vil { background: linear-gradient(135deg, #F4D044, #D3A900); color: #1B2738; }
    .badge.bay { background: linear-gradient(135deg, #E22535, #0A57A5); }
    .badge.bvb { background: linear-gradient(135deg, #F7CD19, #111); }
    .badge.nap { background: linear-gradient(135deg, #33AEEA, #0964A8); }
    .badge.fio { background: linear-gradient(135deg, #6D35B8, #421D72); }
    .badge.lyo { background: linear-gradient(135deg, #FFFFFF, #D4DAE4); color: #17345F; }
    .badge.mar { background: linear-gradient(135deg, #8ED8F8, #1777A8); }
    .badge.rma { background: linear-gradient(135deg, #FFFFFF, #E7D18A); color: #152442; }
    .badge.sev { background: linear-gradient(135deg, #E53946, #FFFFFF); color: #871120; }
    .badge.che { background: linear-gradient(135deg, #0E47A1, #052C6C); }
    .badge.new { background: linear-gradient(135deg, #111, #E7E7E7); color: #111; }
    .badge.mil { background: linear-gradient(135deg, #D81932 0 50%, #111 50%); }
    .badge.udi { background: linear-gradient(135deg, #FFFFFF 0 50%, #111 50%); color: #111; }

    .detail-overlay {
      position: fixed;
      inset: 0;
      z-index: 40;
      display: none;
      background: rgba(7,17,31,0.62);
      backdrop-filter: blur(10px);
      padding: 18px;
    }

    .detail-overlay.open { display: grid; place-items: center; }

    .detail-sheet {
      width: min(760px, 100%);
      max-height: calc(100vh - 36px);
      overflow: auto;
      margin: 0;
      animation: sheetIn 0.18s ease-out;
    }

    @keyframes sheetIn {
      from { transform: translateY(14px) scale(0.985); opacity: 0; }
      to { transform: translateY(0) scale(1); opacity: 1; }
    }

    .detail-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 14px 12px;
      border-bottom: 1px solid rgba(226,232,241,0.88);
      background: linear-gradient(180deg, rgba(255,255,255,0.985), rgba(247,249,252,0.955));
    }

    .back-btn,
    .close-btn {
      border: 1px solid var(--line);
      background: var(--white);
      color: var(--blue);
      border-radius: 999px;
      height: 36px;
      padding: 0 13px;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }

    .close-btn { width: 36px; padding: 0; font-size: 18px; line-height: 1; }

    .detail-title { min-width: 0; text-align: center; }
    .detail-title strong { display: block; color: var(--blue); font-size: 14px; font-weight: 930; text-transform: uppercase; letter-spacing: 0.10em; }
    .detail-title span { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; font-weight: 820; text-transform: uppercase; letter-spacing: 0.06em; }

    .detail-body { padding: 14px; display: grid; gap: 12px; }

    .team-detail-overlay { z-index: 60; }

    .team-detail-sheet {
      width: min(820px, 100%);
    }

    .team-hero-card {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      border-radius: 22px;
      padding: 16px;
      background:
        radial-gradient(circle at 88% 8%, rgba(198,40,57,0.14), transparent 30%),
        linear-gradient(135deg, var(--blue), #0B1A2F);
      color: var(--white);
      box-shadow: 0 14px 34px rgba(7,17,31,0.18);
    }

    .team-hero-logo,
    .team-hero-logo .club-logo,
    .team-hero-logo .badge {
      width: 58px;
      height: 58px;
    }

    .team-hero-main {
      min-width: 0;
      display: grid;
      gap: 5px;
    }

    .team-hero-main strong {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--white);
      font-size: 24px;
      font-weight: 950;
      letter-spacing: -0.03em;
      line-height: 1.05;
    }

    .team-hero-main span {
      color: rgba(255,255,255,0.72);
      font-size: 12px;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0.065em;
    }

    .team-hero-card .team-favorite-btn {
      width: 38px;
      height: 38px;
      border-color: rgba(255,255,255,0.22);
      background: rgba(255,255,255,0.10);
      color: var(--white);
    }

    .team-hero-card .team-favorite-btn.is-favorite {
      background: var(--red);
      color: var(--white);
    }

    .team-context-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .team-context-card {
      min-width: 0;
      border: 1px solid rgba(226,232,241,0.92);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,253,0.92));
      padding: 11px;
      display: grid;
      gap: 9px;
      box-shadow: var(--shadow-soft);
    }

    .team-context-head {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(226,232,241,0.78);
    }

    .team-context-head strong {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--red);
      font-size: 11px;
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .team-context-head span {
      color: var(--muted);
      font-size: 10px;
      font-weight: 900;
      white-space: nowrap;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .team-context-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 7px;
    }

    .team-metric {
      min-width: 0;
      border-radius: 12px;
      background: rgba(255,255,255,0.82);
      border: 1px solid rgba(226,232,241,0.68);
      padding: 8px;
      display: grid;
      gap: 4px;
    }

    .team-metric span {
      color: var(--muted);
      font-size: 10px;
      font-weight: 930;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .team-metric strong {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--blue);
      font-size: 14px;
      font-weight: 950;
    }

    .team-metric strong.team-form-value {
      overflow: visible;
      white-space: normal;
    }

    .team-form-trail {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
      flex-wrap: wrap;
    }

    .team-form-letter {
      width: 21px;
      height: 21px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      color: #FFFFFF;
      -webkit-text-fill-color: #FFFFFF;
      font-family: var(--condensed);
      font-size: 10.5px;
      font-weight: 950;
      line-height: 1;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.20),
        0 3px 8px rgba(7,17,31,0.16);
    }

    .team-form-letter.win { background: #139764; }
    .team-form-letter.draw { background: #717783; }
    .team-form-letter.loss { background: var(--red); }

    .team-tabs {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
    }

    .team-tab {
      min-height: 34px;
      padding: 0 13px;
      border: 1px solid rgba(226,232,241,0.95);
      border-radius: 999px;
      background: #FFFFFF;
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 900;
      cursor: pointer;
    }

    .team-tab[aria-selected="true"] {
      background: var(--red);
      border-color: var(--red);
      color: var(--white);
    }

    .team-panel { display: none; }
    .team-panel.active { display: block; }
    .team-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .team-grid.team-panel.active { display: grid; }

    .team-status {
      margin: 0 12px 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 780;
      line-height: 1.4;
    }

    .team-match-list,
    .team-squad-list,
    .team-stat-list {
      padding: 0 12px 12px;
      display: grid;
      gap: 8px;
    }

    .team-match-row {
      min-width: 0;
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(226,232,241,0.78);
      border-radius: 12px;
      background: rgba(248,250,253,0.76);
      padding: 8px 10px;
      color: var(--blue);
    }

    .team-match-row time {
      color: var(--red);
      font-size: 11px;
      font-weight: 950;
    }

    .team-match-main {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .team-match-main strong {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--blue);
      font-size: 12.5px;
      font-weight: 900;
    }

    .team-match-main span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--muted);
      font-size: 10.8px;
      font-weight: 780;
    }

    .team-match-score {
      color: var(--blue);
      font-family: var(--condensed);
      font-size: 19px;
      font-weight: 950;
      white-space: nowrap;
    }

    .team-squad-groups {
      padding: 0 12px 12px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .team-squad-group {
      min-width: 0;
      border: 1px solid rgba(226,232,241,0.78);
      border-radius: 14px;
      background: rgba(248,250,253,0.76);
      padding: 10px;
      display: grid;
      gap: 8px;
    }

    .team-squad-group-title {
      color: var(--red);
      font-size: 10px;
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .team-player-row {
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      min-height: 42px;
    }

    .team-player-avatar {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      font-size: 10px;
      box-shadow: 0 4px 10px rgba(2,8,18,0.14);
    }

    .team-player-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .team-player-copy strong {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--blue);
      font-size: 11.5px;
      font-weight: 900;
    }

    .team-player-copy span {
      color: var(--muted);
      font-size: 10.2px;
      font-weight: 780;
    }

    .team-player-number {
      min-width: 26px;
      min-height: 22px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(198,40,57,0.08);
      color: var(--red);
      font-size: 10px;
      font-weight: 950;
    }

    .team-stat-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(226,232,241,0.78);
      border-radius: 12px;
      background: rgba(248,250,253,0.76);
      padding: 10px 11px;
      color: var(--blue);
      font-size: 12px;
      font-weight: 850;
    }

    .team-stat-row span {
      color: var(--muted);
      font-weight: 820;
    }

    .team-stat-row strong {
      color: var(--blue);
      font-weight: 950;
      white-space: nowrap;
    }

    .team-stat-card {
      min-width: 0;
      border: 1px solid rgba(226,232,241,0.82);
      border-radius: 15px;
      background: rgba(248,250,253,0.78);
      overflow: hidden;
    }

    .team-stat-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 11px;
      border-bottom: 1px solid rgba(226,232,241,0.78);
      background: rgba(255,255,255,0.74);
    }

    .team-stat-card-head strong {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--red);
      font-size: 10.5px;
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .team-stat-card-head span {
      color: var(--muted);
      font-size: 10px;
      font-weight: 900;
      white-space: nowrap;
    }

    .team-stat-card .team-stat-row {
      margin: 0;
      border-width: 0 0 1px;
      border-radius: 0;
      background: transparent;
    }

    .team-stat-card .team-stat-row:last-child {
      border-bottom: 0;
    }

    .team-table-groups {
      padding: 0 12px 12px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .team-table-group {
      min-width: 0;
      border: 1px solid rgba(226,232,241,0.82);
      border-radius: 14px;
      background: rgba(248,250,253,0.78);
      overflow: hidden;
    }

    .team-table-context {
      min-width: 0;
      display: grid;
      gap: 9px;
      align-content: start;
      border: 1px solid rgba(226,232,241,0.82);
      border-radius: 16px;
      background: rgba(255,255,255,0.78);
      padding: 10px;
      box-shadow: var(--shadow-soft);
    }

    .team-table-context > .team-table-title {
      border: 0;
      padding: 0 0 2px;
      background: transparent;
    }

    .team-table-title {
      padding: 9px 10px;
      border-bottom: 1px solid rgba(226,232,241,0.78);
      color: var(--red);
      font-size: 10px;
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .team-table-row {
      min-width: 0;
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr) 34px 42px 42px;
      align-items: center;
      gap: 7px;
      min-height: 38px;
      padding: 6px 10px;
      border-bottom: 1px solid rgba(226,232,241,0.62);
      color: var(--blue);
      font-size: 11.5px;
      font-weight: 850;
    }

    .team-table-row:last-child { border-bottom: 0; }

    .team-table-row.is-head {
      min-height: 32px;
      background: rgba(255,255,255,0.76);
      color: var(--muted);
      font-size: 9.5px;
      font-weight: 940;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .team-table-row.is-current {
      background: linear-gradient(90deg, rgba(198,40,57,0.10), rgba(255,255,255,0.72));
      box-shadow: inset 3px 0 0 var(--red);
    }

    .team-table-team {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 7px;
      overflow: hidden;
    }

    .team-table-team .team-logo,
    .team-table-team .club-logo,
    .team-table-team .badge {
      width: 24px;
      height: 24px;
      flex: 0 0 auto;
    }

    .team-table-team span:last-child {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .team-empty {
      margin: 0 12px 12px;
      border: 1px solid rgba(226,232,241,0.78);
      border-radius: 12px;
      background: rgba(248,250,253,0.76);
      padding: 11px;
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 760;
      line-height: 1.35;
    }

    @media (max-width: 720px) {
      .team-detail-overlay { padding: 0; place-items: end center; }
      .team-detail-sheet { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; border-bottom: 0; }
      .team-hero-card { grid-template-columns: auto minmax(0, 1fr); border-radius: 18px; }
      .team-hero-card .team-favorite-btn { grid-column: 1 / -1; justify-self: start; }
      .team-hero-logo,
      .team-hero-logo .club-logo,
      .team-hero-logo .badge { width: 46px; height: 46px; }
      .team-hero-main strong { font-size: 20px; }
      .team-context-metrics,
      .team-table-groups { grid-template-columns: 1fr; }
      .team-context-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .team-grid { grid-template-columns: 1fr; }
      .team-squad-groups { grid-template-columns: 1fr; }
    }

    @media (max-width: 420px) {
      .team-context-grid { grid-template-columns: 1fr; }
      .team-match-row { grid-template-columns: 44px minmax(0, 1fr); }
      .team-match-score { grid-column: 2; justify-self: start; }
      .team-table-row {
        grid-template-columns: 24px minmax(0, 1fr) 28px 34px 34px;
        gap: 5px;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 10.8px;
      }
      .team-table-team .team-logo,
      .team-table-team .club-logo,
      .team-table-team .badge {
        width: 21px;
        height: 21px;
      }
      .h2h-top {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      .h2h-team,
      .h2h-team.is-away {
        justify-content: flex-start;
        text-align: left;
      }
      .h2h-score {
        justify-self: start;
        text-align: left;
      }
    }

    .focus-score-card {
      border-radius: 22px;
      padding: 14px 16px 16px;
      background:
        radial-gradient(circle at 86% 10%, rgba(198,40,57,0.12), transparent 28%),
        linear-gradient(135deg, var(--blue), #0B1A2F);
      color: var(--white);
      box-shadow: 0 14px 34px rgba(7,17,31,0.18);
    }

    .focus-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
      color: rgba(255,255,255,0.76);
      font-size: 10.5px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .mini-live { color: var(--white); background: var(--red); padding: 6px 9px; border-radius: 999px; }

    .focus-phase {
      min-height: 28px;
      display: inline-grid;
      place-items: center;
      padding: 0 10px;
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.84);
      font-size: 10.5px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .focus-scoreline {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: start;
      gap: 12px;
    }

    .focus-team {
      display: grid;
      justify-items: center;
      gap: 6px;
      min-width: 0;
      font-size: 13px;
      font-weight: 880;
      text-align: center;
    }

      .focus-team .team-logo,
      .focus-team .club-logo,
      .focus-team .badge { width: 42px; height: 42px; }

    .focus-scorers {
      width: 100%;
      min-width: 0;
      display: grid;
      gap: 4px;
      align-content: start;
      justify-items: center;
      margin-top: 1px;
    }

    .focus-scorer {
      max-width: 100%;
      min-height: 19px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      border: 1px solid rgba(255,255,255,0.13);
      border-radius: 999px;
      background: rgba(255,255,255,0.075);
      color: rgba(255,255,255,0.92);
      padding: 2px 7px;
      font-size: 10.5px;
      font-weight: 850;
      line-height: 1.15;
      overflow-wrap: anywhere;
    }

    .focus-scorer time {
      color: rgba(255,255,255,0.68);
      font-size: 9.5px;
      font-weight: 950;
      white-space: nowrap;
    }

    .focus-score-number {
      min-width: 112px;
      text-align: center;
      font-family: var(--condensed);
      font-size: 45px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: -0.045em;
      margin-top: 8px;
    }

    .focus-score-number.penalty {
      font-family: var(--ui);
      font-size: 30px;
      letter-spacing: 0;
    }

    .focus-tools {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .team-form-card {
      border: 1px solid rgba(226,232,241,0.92);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,253,0.94));
      box-shadow: var(--shadow-soft);
      padding: 12px;
      display: grid;
      gap: 10px;
    }

    .team-form-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--blue);
      font-size: 11px;
      font-weight: 930;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .team-form-head span {
      color: var(--muted);
      font-size: 10.5px;
      font-weight: 850;
      letter-spacing: 0.04em;
    }

    .form-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
    }

    .form-team-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--blue);
      font-size: 12.5px;
      font-weight: 880;
    }

    .form-dots {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 5px;
    }

    .form-dot {
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      color: var(--white);
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: 0 4px 10px rgba(7,17,31,0.16), inset 0 -8px 12px rgba(0,0,0,0.12);
    }

    .form-dot.win { background: linear-gradient(180deg, var(--red-bright), var(--red)); }
    .form-dot.draw { background: linear-gradient(180deg, #68717D, #414A55); }
    .form-dot.loss { background: linear-gradient(180deg, #1E5C8F, var(--blue-3)); }

    .focus-metric {
      border: 1px solid rgba(226,232,241,0.92);
      border-radius: 16px;
      background: rgba(255,255,255,0.90);
      padding: 10px 11px;
      box-shadow: var(--shadow-soft);
    }

    .focus-metric span {
      display: block;
      color: var(--muted);
      font-size: 10px;
      font-weight: 930;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .focus-metric strong {
      display: block;
      margin-top: 4px;
      color: var(--blue);
      font-size: 15px;
      font-weight: 950;
      letter-spacing: -0.03em;
    }

    .detail-tabs {
      display: flex;
      gap: 7px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .detail-tabs::-webkit-scrollbar { display: none; }

    .detail-tab {
      border: 1px solid rgba(226,232,241,0.92);
      background: #FFFFFF;
      color: var(--muted);
      border-radius: 999px;
      min-height: 34px;
      padding: 0 12px;
      font-size: 11.5px;
      font-weight: 900;
      white-space: nowrap;
      cursor: pointer;
    }

    .detail-tab.active,
    .detail-tab[aria-selected="true"] {
      background: var(--red);
      border-color: var(--red);
      color: var(--white);
      box-shadow: 0 7px 18px rgba(198,40,57,0.22);
    }

    .focus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

    .detail-panel { display: none; }
    .detail-panel.active { display: block; }
    .detail-panel.focus-grid.active { display: grid; }

    .app-widget {
      border: 1px solid var(--line);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(255,255,255,0.985), rgba(247,249,252,0.955));
      overflow: hidden;
    }

    .widget-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 8px; gap: 10px; }
    .widget-title { font-size: 11px; font-weight: 930; letter-spacing: 0.09em; text-transform: uppercase; color: var(--blue); }
    .widget-subtle { color: var(--muted); font-size: 11px; font-weight: 800; }

    .insight-list { padding: 2px 12px 12px; display: grid; gap: 8px; }
    .insight-item { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 9px; font-size: 12px; line-height: 1.35; color: var(--blue); font-weight: 760; }
    .insight-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(198,40,57,0.09); }

    .summary-card { grid-column: 1 / -1; }
    .summary-list { padding: 2px 12px 12px; display: grid; gap: 9px; }
    .summary-item {
      min-width: 0;
      border: 1px solid rgba(226,232,241,0.82);
      border-radius: 12px;
      background: rgba(248,250,253,0.76);
      padding: 10px 11px;
      display: grid;
      gap: 4px;
    }

    .summary-label {
      color: var(--muted);
      font-size: 10px;
      font-weight: 930;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .summary-value {
      color: var(--blue);
      font-size: 12.5px;
      font-weight: 850;
      line-height: 1.34;
    }

    .stat-row { display: grid; grid-template-columns: 42px 1fr 42px; gap: 10px; align-items: center; padding: 8px 12px; color: var(--blue); font-size: 12px; font-weight: 850; }
    .stat-row span:nth-child(2) { color: var(--muted); text-align: center; font-weight: 800; }

    .bar { height: 7px; border-radius: 999px; background: #EDF1F7; overflow: hidden; margin: 0 12px 8px; }
    .bar-fill { height: 100%; background: var(--red); border-radius: inherit; }
    .stat-fill-58 { width: 58%; }
    .stat-fill-59 { width: 59%; }
    .stat-fill-60 { width: 60%; }
    .stat-fill-62 { width: 62%; }

    .event-list { padding: 0 12px 12px; display: grid; gap: 8px; }
    .event-item { display: grid; grid-template-columns: 42px 1fr; gap: 10px; color: var(--blue); font-size: 12px; font-weight: 760; }
    .event-item time { color: var(--red); font-weight: 950; }

    .h2h-list {
      padding: 0 12px 12px;
      display: grid;
      gap: 9px;
    }

    .h2h-row {
      min-width: 0;
      border: 1px solid rgba(226,232,241,0.82);
      border-radius: 14px;
      background: rgba(248,250,253,0.78);
      padding: 10px;
      display: grid;
      gap: 8px;
      color: var(--blue);
    }

    .h2h-top {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 10px;
    }

    .h2h-team {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      font-weight: 900;
    }

    .h2h-team.is-away {
      justify-content: flex-end;
      text-align: right;
    }

    .h2h-team span:last-child {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .h2h-team .team-logo,
    .h2h-team .club-logo,
    .h2h-team .badge {
      width: 24px;
      height: 24px;
      flex: 0 0 auto;
    }

    .h2h-score {
      min-width: 58px;
      text-align: center;
      color: var(--blue);
      font-family: var(--condensed);
      font-size: 22px;
      font-weight: 950;
      white-space: nowrap;
    }

    .h2h-meta,
    .h2h-goals {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      line-height: 1.35;
    }

    .h2h-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      text-transform: uppercase;
      letter-spacing: 0.045em;
    }

    .h2h-goals strong {
      color: var(--red);
      font-weight: 950;
    }

    .lineup-status {
      margin: 0 12px 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 780;
      line-height: 1.4;
    }

    .lineups-grid {
      padding: 0 12px 12px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      align-items: start;
    }

    .lineup-card {
      min-width: 0;
      border: 1px solid rgba(226,232,241,0.92);
      border-radius: 14px;
      background: rgba(255,255,255,0.9);
      display: grid;
      gap: 10px;
      padding: 10px;
    }

    .lineup-match-card {
      gap: 12px;
    }

    .lineup-match-head,
    .lineup-benches {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      min-width: 0;
    }

    .lineup-team-panel,
    .lineup-bench-card {
      min-width: 0;
      border: 1px solid rgba(226,232,241,0.78);
      border-radius: 12px;
      background: rgba(248,250,253,0.86);
      padding: 9px;
    }

    .lineup-team-panel {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }

    .lineup-bench-card {
      display: grid;
      gap: 8px;
    }

    .lineup-card-head {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      min-width: 0;
    }

    .lineup-team-logo,
    .lineup-team-logo .club-logo,
    .lineup-team-logo .badge {
      width: 30px;
      height: 30px;
    }

    .lineup-team-main {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .lineup-team-main strong {
      min-width: 0;
      color: var(--blue);
      font-size: 13px;
      font-weight: 950;
      line-height: 1.18;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .lineup-team-main span,
    .lineup-coach {
      color: var(--muted);
      font-size: 10.5px;
      font-weight: 850;
      line-height: 1.25;
    }

    .lineup-formation {
      min-height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: rgba(198,40,57,0.09);
      color: var(--red);
      padding: 0 8px;
      font-size: 10px;
      font-weight: 950;
      white-space: nowrap;
    }

    .lineup-pitch {
      position: relative;
      width: 100%;
      max-width: 560px;
      min-height: 700px;
      aspect-ratio: 0.78;
      margin: 0 auto;
      border: 1px solid rgba(255,255,255,0.34);
      border-radius: 12px;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 50%, transparent 0 39px, rgba(255,255,255,0.34) 40px 41px, transparent 42px),
        linear-gradient(to bottom, transparent 49.85%, rgba(255,255,255,0.34) 49.85% 50.15%, transparent 50.15%),
        linear-gradient(to bottom, rgba(255,255,255,0.24) 0 1px, transparent 1px 100%),
        linear-gradient(135deg, #2e704a 0%, #367a52 50%, #2a6844 100%);
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.16), inset 0 18px 34px rgba(255,255,255,0.05);
    }

    .lineup-pitch::before,
    .lineup-pitch::after {
      content: "";
      position: absolute;
      left: 30%;
      right: 30%;
      height: 48px;
      border: 1px solid rgba(255,255,255,0.34);
      pointer-events: none;
    }

    .lineup-pitch::before {
      top: 0;
      border-top: 0;
      border-radius: 0 0 8px 8px;
    }

    .lineup-pitch::after {
      bottom: 0;
      border-bottom: 0;
      border-radius: 8px 8px 0 0;
    }

    .pitch-player {
      position: absolute;
      width: 70px;
      display: grid;
      justify-items: center;
      gap: 2px;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #FFFFFF;
      text-shadow: 0 1px 4px rgba(0,0,0,0.54);
      z-index: 2;
    }

    .pitch-player.is-subbed-in .pitch-avatar {
      border-color: rgba(34,197,94,0.98);
      box-shadow: 0 0 0 3px rgba(34,197,94,0.22), 0 6px 15px rgba(2,8,18,0.32);
    }

    .pitch-sub-badge {
      position: absolute;
      top: -7px;
      right: 11px;
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 2px solid rgba(255,255,255,0.94);
      border-radius: 999px;
      background: #16A34A;
      color: #FFFFFF;
      font-size: 12px;
      font-weight: 950;
      line-height: 1;
      box-shadow: 0 4px 10px rgba(2,8,18,0.32);
      z-index: 3;
    }

    .player-avatar,
    .pitch-avatar,
    .bench-avatar {
      position: relative;
      display: grid;
      place-items: center;
      overflow: visible;
      background: linear-gradient(180deg, #E9EEF5, #C7D0DD);
      color: var(--blue);
      font-weight: 950;
      box-shadow: 0 5px 14px rgba(2,8,18,0.28);
      isolation: isolate;
    }

    .pitch-avatar {
      width: 44px;
      height: 44px;
      border: 2px solid rgba(255,255,255,0.92);
      border-radius: 15px;
      font-size: 11px;
    }

    .bench-avatar {
      width: 38px;
      height: 38px;
      border: 1px solid rgba(255,255,255,0.82);
      border-radius: 12px;
      font-size: 10px;
      flex: 0 0 auto;
    }

    .player-avatar img {
      grid-area: 1 / 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: inherit;
      z-index: 1;
    }

    .player-avatar-fallback {
      grid-area: 1 / 1;
      z-index: 0;
    }

    .player-rating-badge {
      position: absolute;
      left: -5px;
      bottom: -5px;
      min-width: 24px;
      height: 17px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
      border-radius: 999px;
      border: 2px solid rgba(255,255,255,0.96);
      background: #F7C948;
      color: #07111F;
      font-size: 9px;
      font-weight: 950;
      line-height: 1;
      box-shadow: 0 4px 9px rgba(2,8,18,0.28);
      z-index: 4;
    }

    .player-rating-badge.rating-good { background: #22C55E; color: #FFFFFF; }
    .player-rating-badge.rating-strong { background: #16A34A; color: #FFFFFF; }
    .player-rating-badge.rating-low { background: #F97316; color: #FFFFFF; }

    .player-card-stack {
      position: absolute;
      top: -5px;
      left: -5px;
      display: inline-flex;
      gap: 2px;
      z-index: 5;
    }

    .player-card {
      width: 9px;
      height: 13px;
      border: 1px solid rgba(255,255,255,0.88);
      border-radius: 2px;
      box-shadow: 0 3px 7px rgba(2,8,18,0.28);
    }

    .player-card.yellow { background: #FACC15; }
    .player-card.red { background: #DC2626; }

    .bench-avatar .player-rating-badge {
      min-width: 22px;
      height: 16px;
      font-size: 8.5px;
      left: -4px;
      bottom: -4px;
    }

    .bench-avatar .player-card {
      width: 8px;
      height: 12px;
    }

    .pitch-player-number {
      min-height: 16px;
      min-width: 22px;
      padding: 1px 5px;
      border-radius: 999px;
      background: var(--red);
      color: #FFFFFF;
      font-size: 10px;
      font-weight: 950;
      line-height: 1.35;
      box-shadow: 0 3px 8px rgba(2,8,18,0.24);
    }

    .pitch-player.away-shape .pitch-player-number {
      background: var(--blue);
    }

    .pitch-player-name {
      max-width: 76px;
      color: #FFFFFF;
      font-size: 10px;
      font-weight: 850;
      line-height: 1.16;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .lineup-section-title {
      color: var(--blue);
      font-size: 10px;
      font-weight: 940;
      text-transform: uppercase;
      letter-spacing: 0.075em;
    }

    .lineup-bench-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }

    .bench-player {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 7px;
      min-height: 46px;
      padding: 5px 6px;
      border: 1px solid rgba(226,232,241,0.72);
      border-radius: 10px;
      background: rgba(248,250,253,0.88);
      color: var(--blue);
    }

    .bench-player.is-subbed-off {
      border-color: rgba(198,40,57,0.26);
      background: linear-gradient(90deg, rgba(198,40,57,0.075), rgba(248,250,253,0.92));
    }

    .bench-player.is-subbed-in {
      border-color: rgba(22,163,74,0.24);
      background: linear-gradient(90deg, rgba(22,163,74,0.075), rgba(248,250,253,0.92));
    }

    .bench-player-copy {
      min-width: 0;
      flex: 1 1 auto;
      display: grid;
      gap: 2px;
    }

    .bench-player-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 11px;
      font-weight: 880;
    }

    .bench-player-meta {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--muted);
      font-size: 10px;
      font-weight: 820;
      white-space: nowrap;
    }

    .bench-sub-badge {
      width: 19px;
      height: 19px;
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      border-radius: 999px;
      background: var(--red);
      color: #FFFFFF;
      font-size: 12px;
      font-weight: 950;
      line-height: 1;
      box-shadow: 0 3px 8px rgba(198,40,57,0.24);
    }

    .bench-sub-badge.is-in {
      background: #16A34A;
      box-shadow: 0 3px 8px rgba(22,163,74,0.24);
    }

    .lineup-empty {
      color: var(--muted);
      font-size: 11px;
      font-weight: 780;
      line-height: 1.35;
    }

    .footer {
      color: rgba(255,255,255,0.68);
      padding: 2px 18px 22px;
    }

    .footer a,
    .footer-link {
      color: rgba(255,255,255,0.82);
    }

    .footer a:hover,
    .footer-link:hover {
      color: var(--white);
    }

    .footer-link {
      border: 0;
      background: transparent;
      padding: 0;
      font: inherit;
      font-weight: 860;
      line-height: inherit;
      cursor: pointer;
    }

    .footer-inner {
      max-width: 980px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 740;
      line-height: 1.3;
      flex-wrap: wrap;
      min-width: 0;
      text-align: center;
    }

    .footer-inner > div:first-child {
      margin-left: 0;
      max-width: 100%;
    }

    .footer strong { color: var(--blue); }
    .footer .boxed { display: inline-block; background: var(--red); color: var(--white); border-radius: 6px; padding: 2px 5px; margin-left: 3px; font-weight: 900; line-height: 1.15; box-shadow: inset 0 -10px 18px rgba(0,0,0,0.14); }
    .footer-logo {
      display: inline-flex;
      align-items: baseline;
      font-family: var(--condensed);
      font-size: 18px;
      font-weight: 950;
      letter-spacing: -0.045em;
      line-height: 1;
      margin-right: 3px;
    }
    .footer-logo-main { color: var(--white); }
    .footer-logo-cat { color: var(--red); margin-left: 2px; }
    .footer-red { color: var(--red); font-weight: 900; }
    .footer-links {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 5px 6px;
      min-width: 0;
      max-width: 100%;
      width: auto;
      padding: 0;
      transform: none;
      white-space: normal;
      text-align: center;
    }
    .footer-copy {
      margin-left: 4px;
      color: rgba(255,255,255,0.52);
      font-weight: 850;
      white-space: nowrap;
      flex: 0 0 auto;
    }

    .footer-info-overlay {
      position: fixed;
      inset: 0;
      z-index: 54;
      display: none;
      background: rgba(7,17,31,0.66);
      backdrop-filter: blur(10px);
      padding: 18px;
    }

    .footer-info-overlay.open {
      display: grid;
      place-items: center;
    }

    .footer-info-sheet {
      width: min(680px, 100%);
      max-height: calc(100vh - 36px);
      overflow: auto;
      border: 1px solid rgba(255,255,255,0.72);
      border-radius: 26px;
      background:
        radial-gradient(circle at 92% 2%, rgba(198,40,57,0.09), transparent 30%),
        rgba(255,255,255,0.975);
      box-shadow: 0 26px 70px rgba(2,8,18,0.34);
      color: var(--blue);
      animation: sheetIn 0.18s ease-out;
    }

    .footer-info-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 15px 16px;
      border-bottom: 1px solid rgba(226,232,241,0.90);
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,253,0.94));
    }

    .footer-info-title {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .footer-info-title strong {
      color: var(--blue);
      font-size: 18px;
      font-weight: 960;
      letter-spacing: -0.02em;
    }

    .footer-info-title span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 760;
      line-height: 1.35;
    }

    .footer-info-body {
      display: grid;
      gap: 12px;
      padding: 16px;
    }

    .footer-info-body p {
      margin: 0;
      color: var(--blue);
      font-size: 13px;
      font-weight: 760;
      line-height: 1.55;
    }

    .footer-info-list {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footer-info-list li {
      position: relative;
      padding-left: 18px;
      color: var(--muted);
      font-size: 12.5px;
      font-weight: 780;
      line-height: 1.45;
    }

    .footer-info-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.64em;
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--red);
      box-shadow: 0 0 0 4px rgba(198,40,57,0.08);
    }

    .footer-info-action {
      width: fit-content;
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 12px;
      border: 1px solid rgba(198,40,57,0.18);
      border-radius: 999px;
      background: rgba(198,40,57,0.065);
      color: var(--red);
      font-size: 11px;
      font-weight: 930;
      text-decoration: none;
    }

    @media (max-width: 720px) {
      .footer-info-overlay {
        padding: 0;
        place-items: end center;
      }

      .footer-info-sheet {
        width: 100%;
        max-height: 88vh;
        border-radius: 24px 24px 0 0;
        border-bottom: 0;
      }

      .footer-info-head {
        padding: 13px 12px;
      }

      .footer-info-body {
        padding: 14px 12px 16px;
      }
    }

    @media (max-width: 980px) {
      .controls-status { margin-left: 0; justify-content: flex-start; }
      .app-shell { padding: 12px 10px 12px; }
      .app-hero-inner { grid-template-columns: 1fr; gap: 12px; }
      .hero-status { grid-template-columns: repeat(3, minmax(0, max-content)); }
      .app-controls { align-items: stretch; }
      .filters-row { grid-template-columns: 1fr; }
      .inline-search { justify-self: stretch; }
      .calendar-group { width: 100%; overflow-x: auto; scrollbar-width: none; }
      .calendar-group::-webkit-scrollbar { display: none; }
      .calendar-strip { grid-template-columns: repeat(3, minmax(56px, 1fr)); }
    }

    @media (max-width: 720px) {
      body {
        background:
          radial-gradient(circle at 82% -8%, rgba(198,40,57,0.11), transparent 30%),
          radial-gradient(circle at 8% 78%, rgba(120,139,165,0.12), transparent 34%),
          linear-gradient(180deg, #0E1520 0%, #151F2D 150px, #1D2A3C 390px, #293647 100%);
      }
      .app-shell { padding: 10px 8px 12px; }
      .app-hero { border-radius: 20px; margin-bottom: 16px; }
      .app-hero-inner { min-height: 0; padding: 14px 13px; }
      .hero-main { flex-direction: column; align-items: flex-start; gap: 12px; }
      .hero-meta { width: 100%; align-items: flex-start; gap: 10px; padding-top: 0; }
      .hero-brand { font-size: 33px; margin-bottom: 0; }
      .brand-rule { width: 120px; height: 3px; }
      .app-title { font-size: 12.5px; letter-spacing: 0.03em; white-space: normal; }
      .hero-status { justify-content: flex-start; }
      .filters-row { flex-direction: column; gap: 8px; }
      .tabs-scroll { gap: 6px; }
      .tab { padding: 8px 11px; font-size: 12px; }
      .calendar-group { gap: 6px; flex-wrap: wrap; }
      .calendar-popover { width: 100%; margin-left: 0; }
      .controls-status { width: 100%; margin-left: 0; justify-content: flex-start; }
      .refresh-pill { margin-left: 8px; }
      .calendar-label { min-height: 36px; padding: 0 11px; font-size: 10.5px; }
      .calendar-strip { grid-template-columns: repeat(3, 60px); padding-bottom: 2px; }
      .day-chip { min-height: 48px; border-radius: 15px; }
      .inline-search { min-width: 0; width: 100%; justify-content: flex-start; }
      .panel { border-radius: 15px; margin-bottom: 8px; }
      .panel-head { padding: 12px 11px; }
      .panel-title { font-size: 10.5px; letter-spacing: 0.085em; }
      .panel-link { font-size: 11px; }
      .match-row {
        grid-template-columns: 36px minmax(0,1fr) 50px minmax(0,1fr) 30px 14px;
        gap: 6px;
        min-height: 54px;
        padding: 0 9px;
      }
      .status, .league { display: none; }
      .minute { font-size: 12.5px; font-weight: 900; }
      .team-logo, .club-logo { width: 23px; height: 23px; }
      .badge { width: 23px; height: 23px; font-size: 7px; border-width: 1.5px; }
      .team { gap: 6px; font-size: 13.5px; font-weight: 800; justify-content: center; width: 100%; }
      .score { font-size: 19px; min-width: 48px; }
      .score.upcoming { font-size: 13px; min-width: 42px; }
      .team-favorite-btn { width: 21px; height: 21px; font-size: 12px; }
      .chev { font-size: 18px; }
      .detail-overlay { padding: 0; place-items: end center; }
      .detail-sheet { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; border-bottom: 0; }
      .detail-head { padding: 12px 11px; }
      .focus-score-card { border-radius: 18px; padding: 14px; }
      .focus-score-number { min-width: 86px; font-size: 36px; }
      .focus-team { font-size: 12px; }
      .focus-team .team-logo, .focus-team .club-logo, .focus-team .badge { width: 34px; height: 34px; }
      .focus-tools { grid-template-columns: 1fr; }
      .form-row { grid-template-columns: 1fr; gap: 7px; }
      .form-dots { justify-content: flex-start; }
      .focus-grid { grid-template-columns: 1fr; }
      .lineups-grid { grid-template-columns: 1fr; }
      .lineup-match-head,
      .lineup-benches { grid-template-columns: 1fr; }
      .lineup-pitch { max-width: 440px; min-height: 620px; }
      .footer { padding: 2px 10px 18px; }
      .footer-inner { flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 12px; line-height: 1.35; overflow: hidden; text-align: center; }
      .footer-inner > div:first-child { margin-left: 0; max-width: 100%; }
      .footer-logo { font-size: 17px; }
      .footer-links { width: auto; justify-content: center; gap: 5px 6px; padding-left: 0; padding-right: 0; transform: none; text-align: center; }
      .footer-copy { display: inline-block; margin-left: 2px; margin-top: 0; }
    }

    @media (max-width: 420px) {
      .hero-brand { font-size: 32px; }
      .brand-rule { width: 112px; }
      .app-title { font-size: 12px; }
      .match-row { grid-template-columns: 34px minmax(0,1fr) 46px minmax(0,1fr) 28px 12px; gap: 5px; padding: 0 8px; }
      .team-logo, .club-logo, .badge { width: 21px; height: 21px; }
      .team { font-size: 13px; gap: 5px; justify-content: center; width: 100%; }
      .score { font-size: 18px; }
      .minute { font-size: 11.5px; }
      .focus-scoreline { gap: 8px; }
      .focus-score-number { min-width: 76px; font-size: 32px; }
      .lineup-pitch { max-width: 100%; min-height: 560px; }
      .lineup-bench-list { grid-template-columns: 1fr; }
      .pitch-player { width: 64px; }
      .pitch-avatar { width: 39px; height: 39px; border-radius: 13px; }
      .pitch-player-name { max-width: 68px; font-size: 9.5px; }
    }
  
    /* Soccer.cat 5.8 — Mobile Polish overrides */
    @media (max-width: 720px) {
      .calendar-group {
        align-items: flex-start;
        gap: 6px;
      }

      .calendar-popover {
        width: 100%;
        margin-left: 0;
        margin-top: 2px;
        padding: 11px;
        border-radius: 18px;
      }

      .controls-status {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        gap: 7px 8px;
        padding-top: 2px;
      }

      .status-chip {
        min-height: 32px;
        padding: 0 9px;
        font-size: 11.5px;
      }

      .refresh-btn {
        min-height: 32px;
        padding: 0 10px;
      }

      .refresh-pill {
        margin-left: 0;
      }

      .match-row {
        grid-template-columns: 34px minmax(0,1fr) 48px minmax(0,1fr) 28px 12px;
        gap: 5px;
        min-height: 54px;
        padding: 0 8px;
      }

      .team {
        gap: 5px;
        font-size: 13.2px;
      }

      .team-name {
        max-width: 92px;
      }

      .team-favorite-btn { width: 21px; height: 21px; font-size: 12px; }

      .chev {
        font-size: 17px;
      }

      .detail-body {
        padding: 12px 10px 14px;
        gap: 10px;
      }

      .focus-score-card {
        padding: 13px;
      }

      .focus-tools {
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 6px;
      }

      .focus-metric {
        padding: 9px 8px;
        border-radius: 14px;
      }

      .focus-metric span {
        font-size: 8.8px;
        letter-spacing: 0.055em;
      }

      .focus-metric strong {
        font-size: 13px;
      }

      .team-form-card {
        padding: 11px;
        gap: 7px;
      }

      .footer {
        padding: 4px 10px 18px;
      }
    }

    @media (max-width: 390px) {
      .team-name { max-width: 76px; }
      .team { font-size: 12.7px; }
      .score { font-size: 17px; min-width: 44px; }
      .minute { font-size: 11px; }
      .status-chip { font-size: 11px; padding: 0 8px; }
      .refresh-btn { padding: 0 9px; }
      .focus-tools { grid-template-columns: 1fr; }
    }

/* 5.8.3 — stronger red section titles */
    @media (max-width: 720px) {
      .panel-title {
        font-size: 11.5px;
        font-weight: 980;
        letter-spacing: 0.09em;
        color: var(--red);
      }
    }

  
    /* Current controls placement: Updated now + Profile align right on desktop and full-width/right on mobile. */
    .controls-status {
      width: auto;
      margin-left: auto;
      justify-content: flex-end;
      flex: 1 1 auto;
    }

    .refresh-pill {
      margin-left: 0;
    }

    @media (max-width: 720px) {
      .calendar-group {
        align-items: center;
      }

      .controls-status {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
        padding-top: 0;
      }

      .refresh-pill {
        margin-left: 0;
      }
    }

  
    /* 5.9 test — neutral Profile center */
    .profile-btn {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 12px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.84);
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
    }

    .profile-btn:hover {
      transform: translateY(-1px);
      color: var(--white);
      background: rgba(255,255,255,0.13);
      border-color: rgba(255,255,255,0.20);
    }

    .profile-overlay {
      position: fixed;
      inset: 0;
      z-index: 52;
      display: none;
      background: rgba(7,17,31,0.66);
      backdrop-filter: blur(10px);
      padding: 18px;
    }

    .profile-overlay.open { display: grid; place-items: center; }

    .profile-sheet {
      width: min(740px, 100%);
      max-height: calc(100vh - 36px);
      overflow: auto;
      border: 1px solid rgba(255,255,255,0.72);
      border-radius: 26px;
      background:
        radial-gradient(circle at 92% 2%, rgba(198,40,57,0.09), transparent 30%),
        rgba(255,255,255,0.975);
      box-shadow: 0 26px 70px rgba(2,8,18,0.34);
      color: var(--blue);
      animation: sheetIn 0.18s ease-out;
    }

    .profile-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 15px 16px;
      border-bottom: 1px solid rgba(226,232,241,0.90);
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,253,0.94));
    }

    .profile-title { min-width: 0; display: grid; gap: 3px; }
    .profile-title strong { color: var(--blue); font-size: 17px; font-weight: 950; letter-spacing: -0.02em; }
    .profile-title span { color: var(--muted); font-size: 12px; font-weight: 760; line-height: 1.35; }

    .profile-close {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(226,232,241,0.95);
      border-radius: 999px;
      background: var(--white);
      color: var(--blue);
      font-size: 20px;
      font-weight: 850;
      cursor: pointer;
      flex: 0 0 auto;
    }

    .profile-body { padding: 14px; display: grid; gap: 12px; }
    .profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

    .profile-section {
      border: 1px solid rgba(226,232,241,0.92);
      border-radius: 20px;
      background: rgba(255,255,255,0.92);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }

    .profile-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 13px;
      border-bottom: 1px solid rgba(226,232,241,0.88);
      background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,253,0.92));
    }

    .profile-section-title { color: var(--red); font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: 0.09em; }
    .profile-section-subtle { color: var(--muted); font-size: 11px; font-weight: 820; }
    .profile-list { display: grid; }

    .profile-item {
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-height: 52px;
      padding: 9px 12px;
      border-bottom: 1px solid rgba(226,232,241,0.78);
      background: rgba(255,255,255,0.56);
    }

    .profile-item:last-child { border-bottom: 0; }

    .profile-icon {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(198,40,57,0.08);
      color: var(--red);
      font-size: 14px;
      font-weight: 950;
    }

    .profile-item-copy { min-width: 0; display: grid; gap: 2px; }
    .profile-item-copy strong { color: var(--blue); font-size: 12.8px; font-weight: 920; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .profile-item-copy span { color: var(--muted); font-size: 11.3px; font-weight: 740; line-height: 1.3; }

    .profile-action {
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 9px;
      border: 1px solid rgba(226,232,241,0.96);
      border-radius: 999px;
      background: #FFFFFF;
      color: var(--muted);
      font-size: 10.5px;
      font-weight: 900;
      white-space: nowrap;
    }

    .profile-action.red { color: var(--red); border-color: rgba(198,40,57,0.18); background: rgba(198,40,57,0.055); }

    .favorite-teams-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      padding: 10px;
      border-top: 1px solid rgba(226,232,241,0.78);
      background: rgba(248,250,253,0.56);
    }

    .favorite-team-row,
    .favorite-team-empty {
      min-height: 50px;
      display: grid;
      align-items: center;
      border: 1px solid rgba(226,232,241,0.78);
      border-radius: 14px;
      background: rgba(255,255,255,0.62);
    }

    .favorite-team-row {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      padding: 5px 7px;
    }

    .favorite-team-open {
      min-width: 0;
      width: 100%;
      min-height: 42px;
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      align-items: center;
      gap: 9px;
      border: 0;
      background: transparent;
      color: inherit;
      padding: 2px 0;
      text-align: left;
      cursor: pointer;
    }

    .favorite-team-row:hover {
      border-color: rgba(198,40,57,0.20);
      background: rgba(255,255,255,0.86);
    }

    .favorite-team-logo {
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .favorite-team-logo .club-logo,
    .favorite-team-logo .badge {
      width: 32px;
      height: 32px;
    }

    .favorite-team-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .favorite-team-copy strong {
      overflow: hidden;
      color: var(--blue);
      font-size: 12.8px;
      font-weight: 930;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .favorite-team-copy span {
      overflow: hidden;
      color: var(--muted);
      font-size: 11px;
      font-weight: 740;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .favorite-team-empty {
      grid-column: 1 / -1;
      padding: 11px 13px;
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 760;
      line-height: 1.35;
    }

    .favorite-team-row .team-favorite-btn {
      width: 28px;
      height: 28px;
      font-size: 15px;
    }

    .profile-local-note {
      display: grid;
      grid-template-columns: 1fr;
      gap: 5px;
      padding: 13px 14px;
      border: 1px solid rgba(226,232,241,0.92);
      border-radius: 20px;
      background:
        linear-gradient(90deg, rgba(198,40,57,0.045), rgba(255,255,255,0.92) 42%),
        linear-gradient(180deg, rgba(248,250,253,0.98), rgba(255,255,255,0.92));
      color: var(--blue);
    }

    .profile-local-note strong {
      color: var(--red);
      font-size: 11px;
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .profile-local-note span {
      color: var(--muted);
      font-size: 11.8px;
      font-weight: 760;
      line-height: 1.42;
    }

    .profile-grid.compact {
      grid-template-columns: minmax(0, 1fr);
    }

    @media (max-width: 720px) {
      .profile-overlay { padding: 0; place-items: end center; }
      .profile-sheet { width: 100%; max-height: 92vh; border-radius: 24px 24px 0 0; border-bottom: 0; }
      .profile-head { padding: 13px 12px; }
      .profile-body { padding: 12px 10px 14px; }
      .profile-grid { grid-template-columns: 1fr; gap: 10px; }
      .profile-local-note { border-radius: 18px; }
      .profile-grid.compact { grid-template-columns: 1fr; }
      .favorite-teams-list { grid-template-columns: 1fr; }
      .profile-item { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 9px 10px; }
      .profile-icon { width: 30px; height: 30px; }
      .profile-action { padding: 0 8px; }
    }

  
    /* 5.9.1 — Profile button red icon polish */
    .profile-btn {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 12px 0 10px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.84);
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
    }

    .profile-btn:hover {
      transform: translateY(-1px);
      color: var(--white);
      background: rgba(255,255,255,0.13);
      border-color: rgba(255,255,255,0.20);
    }

    .profile-btn-icon {
      width: 16px;
      height: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--red-bright);
      flex: 0 0 auto;
    }

    .profile-btn-icon svg {
      width: 16px;
      height: 16px;
      display: block;
      stroke: currentColor;
      stroke-width: 2.2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    @media (max-width: 720px) {
      .profile-btn {
        min-height: 32px;
        padding: 0 10px 0 9px;
      }

      .profile-btn-icon,
      .profile-btn-icon svg {
        width: 15px;
        height: 15px;
      }
    }



    /* 6.2.2B note: removed the superseded 5.8.2 controls-status/refresh-pill block; no visual CSS values changed. */

    /* Soccer.cat 6.1 — Mobile View Polish / safe overrides
       Goal: keep 6.0 visual base, improve phone ergonomics only. */
    @media (max-width: 720px) {
      html,
      body {
        max-width: 100%;
        overflow-x: hidden;
      }

      .app-shell {
        width: 100%;
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
      }

      .app-hero {
        margin-bottom: 14px;
        box-shadow: 0 16px 34px rgba(2,8,18,0.24), 0 0 0 1px rgba(198,40,57,0.04);
      }

      .app-hero-inner {
        padding: 13px 12px 14px;
      }

      .hero-main {
        gap: 9px;
      }

      .hero-copy-block {
        gap: 7px;
        width: 100%;
      }

      .hero-brand {
        font-size: clamp(31px, 9.5vw, 36px);
      }

      .brand-rule {
        width: 118px;
      }

      .app-title {
        max-width: 100%;
        font-size: 12.4px;
        line-height: 1.25;
      }

      .kicker {
        min-height: 30px;
        padding: 0 10px;
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 999px;
        background: rgba(255,255,255,0.06);
        font-size: 10px;
        letter-spacing: 0.12em;
      }

      .app-controls {
        gap: 9px;
        margin-bottom: 11px;
      }

      .filters-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .tabs-scroll {
        padding: 1px 1px 4px;
        scroll-snap-type: x proximity;
      }

      .tab {
        min-height: 36px;
        padding: 0 12px;
        scroll-snap-align: start;
      }

      .inline-search {
        min-height: 39px;
        border-radius: 16px;
        box-shadow: 0 8px 18px rgba(7,17,31,0.09);
      }

      .inline-search input {
        width: 100%;
        min-height: 37px;
      }

      .calendar-group {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
          "days cal"
          "status status"
          "search search"
          "popover popover";
        align-items: center;
        gap: 7px;
        overflow: visible;
      }

      .calendar-strip {
        grid-area: days;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        overflow: visible;
        padding-bottom: 0;
      }

      .calendar-label {
        grid-area: cal;
        min-height: 48px;
        align-self: stretch;
        border-radius: 16px;
        padding: 0 11px;
        box-shadow: 0 7px 16px rgba(17,24,33,0.09);
      }

      .day-chip {
        min-width: 0;
        min-height: 48px;
        border-radius: 16px;
        padding: 7px 4px;
      }

      .day-chip span:first-child {
        font-size: 8.8px;
      }

      .day-chip span:last-child {
        font-size: 14px;
      }

      .controls-status {
        grid-area: status;
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 7px;
        justify-content: stretch;
      }

      .calendar-search {
        grid-area: search;
        width: 100%;
        flex-basis: auto;
      }

      .refresh-btn,
      .profile-btn {
        width: 100%;
        min-height: 38px;
        border-radius: 16px;
        background: rgba(255,255,255,0.10);
        border-color: rgba(255,255,255,0.14);
      }

      .refresh-btn #updatedChip,
      .profile-btn span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .profile-btn-icon,
      .profile-btn-icon svg {
        width: 16px;
        height: 16px;
      }

      .calendar-popover {
        grid-area: popover;
        margin-top: 1px;
        border-radius: 18px;
      }

      .quiet-note {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 11px;
        border-radius: 16px;
        font-size: 12px;
      }

      .quiet-tools {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
      }

      .quiet-badge {
        min-height: 32px;
        font-size: 11.5px;
      }

      .panel-head {
        min-height: 46px;
      }

      .panel-title {
        font-size: 11.8px;
        letter-spacing: 0.082em;
      }

      .match-row {
        grid-template-columns: 34px minmax(0,1fr) 48px minmax(0,1fr) 28px 12px;
        min-height: 58px;
        padding: 0 8px;
        touch-action: manipulation;
      }

      .team {
        align-self: stretch;
        gap: 5px;
        font-size: clamp(12.1px, 3.45vw, 13.5px);
      }

      .team-name {
        max-width: 100%;
      }

      .score {
        font-size: clamp(17px, 5.3vw, 20px);
        min-width: 46px;
      }

      .score.upcoming {
        font-size: 12.6px;
        min-width: 42px;
      }

      .minute {
        font-size: 11.6px;
      }

      .team-favorite-btn {
        box-shadow: none;
      }

      .detail-sheet,
      .profile-sheet {
        max-height: min(92vh, 760px);
        padding-bottom: env(safe-area-inset-bottom);
      }

      .detail-head,
      .profile-head {
        position: sticky;
        top: 0;
        z-index: 2;
      }

      .detail-title strong {
        font-size: 12px;
        letter-spacing: 0.08em;
      }

      .detail-title span {
        font-size: 12px;
      }

      .profile-title strong {
        font-size: 16px;
      }

      .profile-title span {
        font-size: 11.5px;
      }

      .profile-item {
        min-height: 54px;
      }
    }

    @media (max-width: 390px) {
      .app-shell {
        padding-left: 7px;
        padding-right: 7px;
      }

      .calendar-group {
        grid-template-columns: 1fr;
        grid-template-areas:
          "days"
          "cal"
          "status"
          "search"
          "popover";
      }

      .calendar-label {
        width: 100%;
        min-height: 38px;
      }

      .controls-status {
        grid-template-columns: 1fr 1fr;
      }

      .refresh-btn,
      .profile-btn {
        min-height: 37px;
        padding-left: 8px;
        padding-right: 8px;
      }

      .match-row {
        grid-template-columns: 31px minmax(0,1fr) 43px minmax(0,1fr) 26px 10px;
        gap: 4px;
        padding: 0 7px;
      }

      .team-logo,
      .club-logo,
      .badge {
        width: 20px;
        height: 20px;
      }

      .team {
        font-size: 12.1px;
      }

      .score {
        min-width: 42px;
      }
    }

  
    /* v6.4.5 — Match row alignment polish */
    .match-row .league {
      min-width: 0;
      overflow: visible;
      padding-right: 2px;
    }

    .match-row .chev {
      justify-self: end;
    }

    @media (max-width: 720px) {
      .match-row {
        grid-template-columns: 40px 42px minmax(94px, 1fr) 58px minmax(94px, 1fr) minmax(74px, 0.58fr) 14px;
        gap: 7px;
        padding-right: 10px;
      }

      .match-row.is-stopped .minute {
        grid-column: 1;
        font-size: 11px;
      }

      .score {
        font-size: 19px;
        letter-spacing: -0.01em;
      }

      .league {
        font-size: 10.4px;
        gap: 4px;
      }

      .context-chip {
        min-width: 25px;
        min-height: 16px;
        padding: 0 4px;
        font-size: 7.8px;
      }

      .team-favorite-btn { width: 21px; height: 21px; font-size: 12px; }
    }

    @media (max-width: 390px) {
      .match-row {
        grid-template-columns: 36px 38px minmax(76px, 1fr) 48px minmax(76px, 1fr) minmax(48px, 0.42fr) 10px;
        gap: 5px;
        padding-left: 8px;
        padding-right: 7px;
      }

      .score {
        font-size: 18px;
      }

      .league {
        font-size: 10px;
      }

      .team-favorite-btn { width: 20px; height: 20px; font-size: 11px; }
    }

  
    /* Official team logos with safe CSS badge fallback */
    .team-logo.has-real-logo .club-logo,
    .focus-team .team-logo.has-real-logo .club-logo {
      display: block;
    }

    .team-logo.has-real-logo .badge,
    .focus-team .team-logo.has-real-logo .badge {
      display: none;
    }

    .team-logo.has-fallback .badge,
    .focus-team .team-logo.has-fallback .badge,
    .team-badge .badge {
      display: grid;
    }

    .team-logo.has-fallback .club-logo,
    .focus-team .team-logo.has-fallback .club-logo {
      display: none;
    }

    .team-logo .badge.logo-fallback,
    .focus-team .badge.logo-fallback {
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.68), 0 4px 12px rgba(7,17,31,0.12);
      letter-spacing: -0.04em;
    }
/* CSP-safe generated percentage utility classes. */
.pct-w-0 { width: 0%; }
.pct-w-1 { width: 1%; }
.pct-w-2 { width: 2%; }
.pct-w-3 { width: 3%; }
.pct-w-4 { width: 4%; }
.pct-w-5 { width: 5%; }
.pct-w-6 { width: 6%; }
.pct-w-7 { width: 7%; }
.pct-w-8 { width: 8%; }
.pct-w-9 { width: 9%; }
.pct-w-10 { width: 10%; }
.pct-w-11 { width: 11%; }
.pct-w-12 { width: 12%; }
.pct-w-13 { width: 13%; }
.pct-w-14 { width: 14%; }
.pct-w-15 { width: 15%; }
.pct-w-16 { width: 16%; }
.pct-w-17 { width: 17%; }
.pct-w-18 { width: 18%; }
.pct-w-19 { width: 19%; }
.pct-w-20 { width: 20%; }
.pct-w-21 { width: 21%; }
.pct-w-22 { width: 22%; }
.pct-w-23 { width: 23%; }
.pct-w-24 { width: 24%; }
.pct-w-25 { width: 25%; }
.pct-w-26 { width: 26%; }
.pct-w-27 { width: 27%; }
.pct-w-28 { width: 28%; }
.pct-w-29 { width: 29%; }
.pct-w-30 { width: 30%; }
.pct-w-31 { width: 31%; }
.pct-w-32 { width: 32%; }
.pct-w-33 { width: 33%; }
.pct-w-34 { width: 34%; }
.pct-w-35 { width: 35%; }
.pct-w-36 { width: 36%; }
.pct-w-37 { width: 37%; }
.pct-w-38 { width: 38%; }
.pct-w-39 { width: 39%; }
.pct-w-40 { width: 40%; }
.pct-w-41 { width: 41%; }
.pct-w-42 { width: 42%; }
.pct-w-43 { width: 43%; }
.pct-w-44 { width: 44%; }
.pct-w-45 { width: 45%; }
.pct-w-46 { width: 46%; }
.pct-w-47 { width: 47%; }
.pct-w-48 { width: 48%; }
.pct-w-49 { width: 49%; }
.pct-w-50 { width: 50%; }
.pct-w-51 { width: 51%; }
.pct-w-52 { width: 52%; }
.pct-w-53 { width: 53%; }
.pct-w-54 { width: 54%; }
.pct-w-55 { width: 55%; }
.pct-w-56 { width: 56%; }
.pct-w-57 { width: 57%; }
.pct-w-58 { width: 58%; }
.pct-w-59 { width: 59%; }
.pct-w-60 { width: 60%; }
.pct-w-61 { width: 61%; }
.pct-w-62 { width: 62%; }
.pct-w-63 { width: 63%; }
.pct-w-64 { width: 64%; }
.pct-w-65 { width: 65%; }
.pct-w-66 { width: 66%; }
.pct-w-67 { width: 67%; }
.pct-w-68 { width: 68%; }
.pct-w-69 { width: 69%; }
.pct-w-70 { width: 70%; }
.pct-w-71 { width: 71%; }
.pct-w-72 { width: 72%; }
.pct-w-73 { width: 73%; }
.pct-w-74 { width: 74%; }
.pct-w-75 { width: 75%; }
.pct-w-76 { width: 76%; }
.pct-w-77 { width: 77%; }
.pct-w-78 { width: 78%; }
.pct-w-79 { width: 79%; }
.pct-w-80 { width: 80%; }
.pct-w-81 { width: 81%; }
.pct-w-82 { width: 82%; }
.pct-w-83 { width: 83%; }
.pct-w-84 { width: 84%; }
.pct-w-85 { width: 85%; }
.pct-w-86 { width: 86%; }
.pct-w-87 { width: 87%; }
.pct-w-88 { width: 88%; }
.pct-w-89 { width: 89%; }
.pct-w-90 { width: 90%; }
.pct-w-91 { width: 91%; }
.pct-w-92 { width: 92%; }
.pct-w-93 { width: 93%; }
.pct-w-94 { width: 94%; }
.pct-w-95 { width: 95%; }
.pct-w-96 { width: 96%; }
.pct-w-97 { width: 97%; }
.pct-w-98 { width: 98%; }
.pct-w-99 { width: 99%; }
.pct-w-100 { width: 100%; }
.pitch-x-0 { left: 0%; }
.pitch-x-1 { left: 1%; }
.pitch-x-2 { left: 2%; }
.pitch-x-3 { left: 3%; }
.pitch-x-4 { left: 4%; }
.pitch-x-5 { left: 5%; }
.pitch-x-6 { left: 6%; }
.pitch-x-7 { left: 7%; }
.pitch-x-8 { left: 8%; }
.pitch-x-9 { left: 9%; }
.pitch-x-10 { left: 10%; }
.pitch-x-11 { left: 11%; }
.pitch-x-12 { left: 12%; }
.pitch-x-13 { left: 13%; }
.pitch-x-14 { left: 14%; }
.pitch-x-15 { left: 15%; }
.pitch-x-16 { left: 16%; }
.pitch-x-17 { left: 17%; }
.pitch-x-18 { left: 18%; }
.pitch-x-19 { left: 19%; }
.pitch-x-20 { left: 20%; }
.pitch-x-21 { left: 21%; }
.pitch-x-22 { left: 22%; }
.pitch-x-23 { left: 23%; }
.pitch-x-24 { left: 24%; }
.pitch-x-25 { left: 25%; }
.pitch-x-26 { left: 26%; }
.pitch-x-27 { left: 27%; }
.pitch-x-28 { left: 28%; }
.pitch-x-29 { left: 29%; }
.pitch-x-30 { left: 30%; }
.pitch-x-31 { left: 31%; }
.pitch-x-32 { left: 32%; }
.pitch-x-33 { left: 33%; }
.pitch-x-34 { left: 34%; }
.pitch-x-35 { left: 35%; }
.pitch-x-36 { left: 36%; }
.pitch-x-37 { left: 37%; }
.pitch-x-38 { left: 38%; }
.pitch-x-39 { left: 39%; }
.pitch-x-40 { left: 40%; }
.pitch-x-41 { left: 41%; }
.pitch-x-42 { left: 42%; }
.pitch-x-43 { left: 43%; }
.pitch-x-44 { left: 44%; }
.pitch-x-45 { left: 45%; }
.pitch-x-46 { left: 46%; }
.pitch-x-47 { left: 47%; }
.pitch-x-48 { left: 48%; }
.pitch-x-49 { left: 49%; }
.pitch-x-50 { left: 50%; }
.pitch-x-51 { left: 51%; }
.pitch-x-52 { left: 52%; }
.pitch-x-53 { left: 53%; }
.pitch-x-54 { left: 54%; }
.pitch-x-55 { left: 55%; }
.pitch-x-56 { left: 56%; }
.pitch-x-57 { left: 57%; }
.pitch-x-58 { left: 58%; }
.pitch-x-59 { left: 59%; }
.pitch-x-60 { left: 60%; }
.pitch-x-61 { left: 61%; }
.pitch-x-62 { left: 62%; }
.pitch-x-63 { left: 63%; }
.pitch-x-64 { left: 64%; }
.pitch-x-65 { left: 65%; }
.pitch-x-66 { left: 66%; }
.pitch-x-67 { left: 67%; }
.pitch-x-68 { left: 68%; }
.pitch-x-69 { left: 69%; }
.pitch-x-70 { left: 70%; }
.pitch-x-71 { left: 71%; }
.pitch-x-72 { left: 72%; }
.pitch-x-73 { left: 73%; }
.pitch-x-74 { left: 74%; }
.pitch-x-75 { left: 75%; }
.pitch-x-76 { left: 76%; }
.pitch-x-77 { left: 77%; }
.pitch-x-78 { left: 78%; }
.pitch-x-79 { left: 79%; }
.pitch-x-80 { left: 80%; }
.pitch-x-81 { left: 81%; }
.pitch-x-82 { left: 82%; }
.pitch-x-83 { left: 83%; }
.pitch-x-84 { left: 84%; }
.pitch-x-85 { left: 85%; }
.pitch-x-86 { left: 86%; }
.pitch-x-87 { left: 87%; }
.pitch-x-88 { left: 88%; }
.pitch-x-89 { left: 89%; }
.pitch-x-90 { left: 90%; }
.pitch-x-91 { left: 91%; }
.pitch-x-92 { left: 92%; }
.pitch-x-93 { left: 93%; }
.pitch-x-94 { left: 94%; }
.pitch-x-95 { left: 95%; }
.pitch-x-96 { left: 96%; }
.pitch-x-97 { left: 97%; }
.pitch-x-98 { left: 98%; }
.pitch-x-99 { left: 99%; }
.pitch-x-100 { left: 100%; }
.pitch-y-0 { top: 0%; }
.pitch-y-1 { top: 1%; }
.pitch-y-2 { top: 2%; }
.pitch-y-3 { top: 3%; }
.pitch-y-4 { top: 4%; }
.pitch-y-5 { top: 5%; }
.pitch-y-6 { top: 6%; }
.pitch-y-7 { top: 7%; }
.pitch-y-8 { top: 8%; }
.pitch-y-9 { top: 9%; }
.pitch-y-10 { top: 10%; }
.pitch-y-11 { top: 11%; }
.pitch-y-12 { top: 12%; }
.pitch-y-13 { top: 13%; }
.pitch-y-14 { top: 14%; }
.pitch-y-15 { top: 15%; }
.pitch-y-16 { top: 16%; }
.pitch-y-17 { top: 17%; }
.pitch-y-18 { top: 18%; }
.pitch-y-19 { top: 19%; }
.pitch-y-20 { top: 20%; }
.pitch-y-21 { top: 21%; }
.pitch-y-22 { top: 22%; }
.pitch-y-23 { top: 23%; }
.pitch-y-24 { top: 24%; }
.pitch-y-25 { top: 25%; }
.pitch-y-26 { top: 26%; }
.pitch-y-27 { top: 27%; }
.pitch-y-28 { top: 28%; }
.pitch-y-29 { top: 29%; }
.pitch-y-30 { top: 30%; }
.pitch-y-31 { top: 31%; }
.pitch-y-32 { top: 32%; }
.pitch-y-33 { top: 33%; }
.pitch-y-34 { top: 34%; }
.pitch-y-35 { top: 35%; }
.pitch-y-36 { top: 36%; }
.pitch-y-37 { top: 37%; }
.pitch-y-38 { top: 38%; }
.pitch-y-39 { top: 39%; }
.pitch-y-40 { top: 40%; }
.pitch-y-41 { top: 41%; }
.pitch-y-42 { top: 42%; }
.pitch-y-43 { top: 43%; }
.pitch-y-44 { top: 44%; }
.pitch-y-45 { top: 45%; }
.pitch-y-46 { top: 46%; }
.pitch-y-47 { top: 47%; }
.pitch-y-48 { top: 48%; }
.pitch-y-49 { top: 49%; }
.pitch-y-50 { top: 50%; }
.pitch-y-51 { top: 51%; }
.pitch-y-52 { top: 52%; }
.pitch-y-53 { top: 53%; }
.pitch-y-54 { top: 54%; }
.pitch-y-55 { top: 55%; }
.pitch-y-56 { top: 56%; }
.pitch-y-57 { top: 57%; }
.pitch-y-58 { top: 58%; }
.pitch-y-59 { top: 59%; }
.pitch-y-60 { top: 60%; }
.pitch-y-61 { top: 61%; }
.pitch-y-62 { top: 62%; }
.pitch-y-63 { top: 63%; }
.pitch-y-64 { top: 64%; }
.pitch-y-65 { top: 65%; }
.pitch-y-66 { top: 66%; }
.pitch-y-67 { top: 67%; }
.pitch-y-68 { top: 68%; }
.pitch-y-69 { top: 69%; }
.pitch-y-70 { top: 70%; }
.pitch-y-71 { top: 71%; }
.pitch-y-72 { top: 72%; }
.pitch-y-73 { top: 73%; }
.pitch-y-74 { top: 74%; }
.pitch-y-75 { top: 75%; }
.pitch-y-76 { top: 76%; }
.pitch-y-77 { top: 77%; }
.pitch-y-78 { top: 78%; }
.pitch-y-79 { top: 79%; }
.pitch-y-80 { top: 80%; }
.pitch-y-81 { top: 81%; }
.pitch-y-82 { top: 82%; }
.pitch-y-83 { top: 83%; }
.pitch-y-84 { top: 84%; }
.pitch-y-85 { top: 85%; }
.pitch-y-86 { top: 86%; }
.pitch-y-87 { top: 87%; }
.pitch-y-88 { top: 88%; }
.pitch-y-89 { top: 89%; }
.pitch-y-90 { top: 90%; }
.pitch-y-91 { top: 91%; }
.pitch-y-92 { top: 92%; }
.pitch-y-93 { top: 93%; }
.pitch-y-94 { top: 94%; }
.pitch-y-95 { top: 95%; }
.pitch-y-96 { top: 96%; }
.pitch-y-97 { top: 97%; }
.pitch-y-98 { top: 98%; }
.pitch-y-99 { top: 99%; }
.pitch-y-100 { top: 100%; }

/* Soccer.cat mobile production polish */
:root {
  --red: #C62839;
}

.hero-brand .hero-brand-cat,
.footer-logo-cat {
  color: var(--red) !important;
}

@media (max-width: 720px) {
  .hero-brand .hero-brand-cat {
    color: var(--red) !important;
  }

  .match-row {
    grid-template-columns: 42px minmax(0, 1fr) 18px minmax(0, 1fr) 64px 14px !important;
    gap: 5px !important;
    padding: 10px 8px !important;
    min-height: 54px !important;
  }

  .team {
    min-width: 0 !important;
    gap: 4px !important;
    font-size: 12.5px !important;
    line-height: 1.15 !important;
  }

  .team.home {
    justify-content: flex-start !important;
  }

  .team.away {
    justify-content: flex-end !important;
  }

  .team-copy {
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 3px !important;
  }

  .team-name {
    display: block !important;
    max-width: 78px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .team-logo,
  .club-logo,
  .team-logo .badge {
    width: 20px !important;
    height: 20px !important;
  }

  .match-row .team-favorite-btn {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
  }

  .match-row .status,
  .match-row .competition {
    font-size: 10px !important;
  }
}

@media (max-width: 380px) {
  .match-row {
    grid-template-columns: 40px minmax(0, 1fr) 16px minmax(0, 1fr) 58px 12px !important;
  }

  .team-name {
    max-width: 64px !important;
  }
}

/* Soccer.cat mobile VS spacing fix */
@media (max-width: 720px) {
  .match-row {
    grid-template-columns: 42px minmax(0, 1.15fr) 34px minmax(0, 1.15fr) 58px 14px !important;
    column-gap: 6px !important;
  }

  .team.home {
    justify-content: flex-start !important;
    text-align: left !important;
    padding-right: 4px !important;
  }

  .team.away {
    justify-content: flex-end !important;
    text-align: right !important;
    padding-left: 4px !important;
  }

  .score,
  .vs {
    min-width: 34px !important;
    text-align: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    position: relative !important;
  }

  .team-name {
    max-width: 72px !important;
  }
}

@media (max-width: 380px) {
  .match-row {
    grid-template-columns: 38px minmax(0, 1fr) 32px minmax(0, 1fr) 54px 12px !important;
  }

  .team-name {
    max-width: 58px !important;
  }

  .score,
  .vs {
    min-width: 32px !important;
  }
}

/* Soccer.cat mobile strict centered VS fix */
@media (max-width: 720px) {
  .match-row {
    grid-template-columns: 42px minmax(88px, 1fr) 40px minmax(88px, 1fr) 14px !important;
    column-gap: 4px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .match-row .competition,
  .match-row .provider-status,
  .match-row .priority,
  .match-row .match-provider-label {
    display: none !important;
  }

  .team.home {
    justify-content: flex-end !important;
    text-align: right !important;
    padding-right: 6px !important;
    padding-left: 0 !important;
  }

  .team.away {
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 6px !important;
    padding-right: 0 !important;
  }

  .team.home .team-copy {
    justify-content: flex-end !important;
    text-align: right !important;
  }

  .team.away .team-copy {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .team-name {
    max-width: 96px !important;
    font-size: 12.5px !important;
  }

  .score,
  .vs,
  .match-row .score {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    text-align: center !important;
    justify-content: center !important;
    justify-self: center !important;
    align-self: center !important;
    z-index: 3 !important;
  }

  .team-logo,
  .club-logo,
  .team-logo .badge {
    width: 19px !important;
    height: 19px !important;
  }

  .match-row .team-favorite-btn {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
  }
}

@media (max-width: 380px) {
  .match-row {
    grid-template-columns: 40px minmax(78px, 1fr) 38px minmax(78px, 1fr) 12px !important;
    column-gap: 3px !important;
  }

  .team-name {
    max-width: 82px !important;
    font-size: 12px !important;
  }

  .score,
  .vs,
  .match-row .score {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
  }
}

/* Soccer.cat mobile overlay scroll-lock fix */
html.soccer-overlay-lock,
body.soccer-overlay-lock {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.soccer-overlay-lock {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

.detail-overlay.open,
.team-detail-overlay.open,
.profile-overlay.open,
.footer-info-overlay.open {
  position: fixed !important;
  inset: 0 !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

.detail-sheet,
.team-detail-sheet,
.profile-sheet,
.footer-info-sheet {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 720px) {
  .detail-overlay.open,
  .team-detail-overlay.open,
  .profile-overlay.open,
  .footer-info-overlay.open {
    align-items: end !important;
  }

  .detail-sheet,
  .team-detail-sheet,
  .profile-sheet,
  .footer-info-sheet {
    max-height: 92dvh !important;
    overflow-y: auto !important;
  }
}

/* Soccer.cat mobile Match Focus vertical position fix */
@media (max-width: 720px) {
  .detail-overlay.open {
    place-items: start center !important;
    align-items: start !important;
    padding: 10px 8px 0 !important;
  }

  .detail-sheet {
    margin-top: 0 !important;
    width: 100% !important;
    max-height: calc(100dvh - 10px) !important;
    height: auto !important;
    border-radius: 22px 22px 0 0 !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 420px) {
  .detail-overlay.open {
    padding-top: 6px !important;
  }

  .detail-sheet {
    max-height: calc(100dvh - 6px) !important;
  }
}

/* Soccer.cat mobile team name readability tweak */
@media (max-width: 720px) {
  .team-name {
    font-size: 13px !important;
    font-weight: 850 !important;
  }
}

@media (max-width: 380px) {
  .team-name {
    font-size: 12.5px !important;
  }
}

/* Soccer.cat mobile final match-row alignment polish */
@media (max-width: 720px) {
  .match-row {
    grid-template-columns: 42px minmax(88px, 1fr) 40px minmax(92px, 1fr) 18px !important;
    column-gap: 4px !important;
  }

  /* home team: slightly closer to the time column */
  .team.home {
    transform: translateX(-4px) !important;
    padding-right: 4px !important;
  }

  /* away team: slightly closer to the center, away from the chevron */
  .team.away {
    transform: translateX(-5px) !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  /* right chevron / open indicator */
  .match-row > :last-child,
  .match-row .chevron,
  .match-row .match-chevron,
  .match-row [aria-hidden="true"]:last-child {
    color: var(--red) !important;
    font-weight: 900 !important;
    opacity: 1 !important;
    text-shadow: 0 0 0 currentColor !important;
  }
}

@media (max-width: 380px) {
  .team.home {
    transform: translateX(-3px) !important;
  }

  .team.away {
    transform: translateX(-4px) !important;
  }
}