:root {
      --bg: #030506;
      --panel: #070b0d;
      --panel-2: #0b1115;
      --line: #3a2c16;
      --line-soft: rgba(218, 166, 74, .22);
      --text: #f7ead0;
      --muted: #a89469;
      --soft: #d9c9a7;
      --lime: #d8a64a;
      --green: #77c8ff;
      --blue: #7fc7ff;
      --amber: #e5b65d;
      --danger: #ff7d7d;
      --red: #ff5b4f;
      --gold: #d8a64a;
      --gold-soft: rgba(216, 166, 74, .28);
      --ink: #05080a;
      --radius: 8px;
      color-scheme: dark;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      background:
        radial-gradient(circle at 42% -10%, rgba(216, 166, 74, .08), transparent 34%),
        linear-gradient(180deg, rgba(216, 166, 74, .045), transparent 230px),
        linear-gradient(135deg, rgba(127, 199, 255, .045), transparent 38%),
        var(--bg);
      color: var(--text);
      font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
      letter-spacing: 0;
    }

    button, input {
      font: inherit;
      color: inherit;
    }

    button {
      border: 0;
      cursor: pointer;
    }

    .app {
      min-height: 100vh;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
    }

    .sidebar {
      position: fixed;
      inset: 0 auto 0 0;
      z-index: 70;
      width: min(360px, calc(100vw - 28px));
      height: 100vh;
      display: flex;
      flex-direction: column;
      border-right: 1px solid var(--line-soft);
      background:
        linear-gradient(180deg, rgba(214, 255, 107, .035), rgba(7, 11, 10, .94) 36%),
        rgba(7, 11, 10, .96);
      box-shadow: 28px 0 80px rgba(0, 0, 0, .45);
      transform: translateX(calc(-100% - 24px));
      transition: transform .22s ease;
      will-change: transform;
    }

    .app.drawer-open .sidebar {
      transform: translateX(0);
    }

    .drawer-backdrop {
      position: fixed;
      inset: 0;
      z-index: 60;
      display: none;
      background: rgba(0, 0, 0, .52);
      backdrop-filter: blur(2px);
    }

    .app.drawer-open .drawer-backdrop {
      display: block;
    }

    .brand {
      padding: 22px 22px 14px;
      border-bottom: 1px solid var(--line-soft);
      position: relative;
      padding-right: 66px;
    }

    .drawer-close {
      position: absolute;
      top: 18px;
      right: 18px;
      display: inline-grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid var(--line-soft);
      border-radius: 8px;
      background: rgba(255, 255, 255, .045);
      color: var(--soft);
      font-size: 22px;
      line-height: 1;
      font-weight: 500;
    }

    .drawer-close:hover {
      border-color: rgba(214, 255, 107, .42);
      color: var(--lime);
      background: rgba(214, 255, 107, .08);
    }

    .kicker {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      height: 24px;
      padding: 0 9px;
      border: 1px solid rgba(214, 255, 107, .28);
      border-radius: 999px;
      color: var(--lime);
      background: rgba(214, 255, 107, .08);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
    }

    h1 {
      margin: 12px 0 5px;
      font-size: 25px;
      line-height: 1.08;
      letter-spacing: 0;
    }

    .subtle {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

    .summary-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      padding: 14px 22px 6px;
    }

    .mini-stat {
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .025);
      padding: 10px;
      min-width: 0;
    }

    .mini-stat strong {
      display: block;
      font-size: 18px;
      line-height: 1;
    }

    .mini-stat span {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
    }

    .controls {
      padding: 12px 22px 12px;
      border-bottom: 1px solid var(--line-soft);
    }

    .picker-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
      color: var(--soft);
      font-size: 12px;
      font-weight: 900;
    }

    .picker-title span:last-child {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      padding: 4px;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .025);
    }

    .tab {
      min-height: 35px;
      border-radius: 6px;
      background: transparent;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

    .tab.active {
      background: var(--lime);
      color: #10150f;
    }

    .search {
      margin-top: 10px;
      width: 100%;
      height: 38px;
      padding: 0 12px;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: rgba(0, 0, 0, .24);
      outline: none;
      font-size: 13px;
    }

    .search:focus { border-color: rgba(214, 255, 107, .5); }

    .match-list {
      flex: 1;
      overflow: auto;
      padding: 12px 14px 20px;
    }

    .match-card {
      width: 100%;
      display: block;
      text-align: left;
      margin-bottom: 9px;
      padding: 12px;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .025);
      transition: background .16s ease, border-color .16s ease, transform .16s ease;
    }

    .match-card:hover {
      transform: translateY(-1px);
      border-color: rgba(214, 255, 107, .32);
      background: rgba(255, 255, 255, .045);
    }

    .match-card.active {
      border-color: rgba(214, 255, 107, .72);
      background: linear-gradient(135deg, rgba(214, 255, 107, .13), rgba(87, 210, 141, .06));
    }

    .match-meta {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
    }

    .teams {
      margin-top: 10px;
      display: grid;
      gap: 6px;
    }

    .team-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
      font-size: 14px;
      font-weight: 800;
    }

    .team-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .flag-code {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 18px;
      margin-right: 6px;
      border-radius: 4px;
      border: 1px solid rgba(214, 255, 107, .26);
      background: rgba(214, 255, 107, .09);
      color: var(--lime);
      font-size: 10px;
      line-height: 1;
      font-weight: 950;
      vertical-align: 1px;
    }

    .pack-mark {
      display: inline-flex;
      align-items: center;
      height: 20px;
      padding: 0 7px;
      border-radius: 999px;
      color: var(--lime);
      background: rgba(214, 255, 107, .1);
      font-size: 10px;
      font-weight: 900;
    }

    .score {
      color: var(--lime);
      font-variant-numeric: tabular-nums;
    }

    .main {
      min-width: 0;
      padding: 22px;
      overflow: auto;
    }

    .main-toolbar {
      max-width: 1460px;
      margin: 0 auto 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .drawer-toggle {
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 0 13px;
      border: 1px solid rgba(214, 255, 107, .28);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(214, 255, 107, .13), rgba(141, 183, 255, .055)),
        rgba(0, 0, 0, .24);
      color: var(--soft);
      box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
    }

    .drawer-toggle-icon {
      display: inline-grid;
      gap: 4px;
      width: 18px;
      flex: 0 0 auto;
    }

    .drawer-toggle-icon span {
      display: block;
      height: 2px;
      border-radius: 999px;
      background: var(--lime);
    }

    .drawer-toggle-text {
      display: grid;
      gap: 2px;
      text-align: left;
      min-width: 0;
    }

    .drawer-toggle-text span {
      color: var(--muted);
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .drawer-toggle-text strong {
      max-width: min(420px, 54vw);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
      line-height: 1.15;
    }

    .drawer-toggle:hover {
      border-color: rgba(214, 255, 107, .56);
      background:
        linear-gradient(135deg, rgba(214, 255, 107, .18), rgba(141, 183, 255, .075)),
        rgba(0, 0, 0, .28);
    }

    .detail {
      max-width: 1460px;
      margin: 0 auto;
    }

    .score-ticker {
      max-width: 1320px;
      margin: 0 auto 14px;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background:
        linear-gradient(90deg, rgba(214, 255, 107, .09), rgba(255, 255, 255, .025) 24%, rgba(255, 255, 255, .025) 76%, rgba(141, 183, 255, .08)),
        rgba(0, 0, 0, .2);
      overflow: hidden;
    }

    .score-ticker-head {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      min-height: 38px;
      padding-left: 12px;
    }

    .score-ticker-label {
      display: inline-flex;
      align-items: center;
      height: 22px;
      padding: 0 9px;
      border-radius: 999px;
      background: var(--lime);
      color: #10150f;
      font-size: 11px;
      font-weight: 950;
      white-space: nowrap;
    }

    .score-track {
      min-width: 0;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 30px), transparent);
      mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 30px), transparent);
    }

    .score-track:hover .score-marquee {
      animation-play-state: paused;
    }

    .score-track:focus-within .score-marquee {
      animation-play-state: paused;
    }

    .score-marquee {
      display: flex;
      width: max-content;
      gap: 8px;
      padding: 6px 0;
      animation: scoreMarquee 28s linear infinite;
    }

    .score-row {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      gap: 8px;
      padding-right: 8px;
    }

    .score-pill {
      display: inline-grid;
      grid-template-columns: auto auto auto auto;
      align-items: center;
      gap: 8px;
      min-height: 26px;
      padding: 0 10px;
      border: 1px solid var(--line-soft);
      border-radius: 6px;
      background: rgba(7, 11, 10, .78);
      color: var(--soft);
      font-size: 12px;
      font-weight: 850;
      white-space: nowrap;
      transition: border-color .16s ease, background .16s ease, transform .16s ease;
    }

    .score-pill:hover {
      transform: translateY(-1px);
      border-color: rgba(214, 255, 107, .46);
      background: rgba(214, 255, 107, .09);
    }

    .score-pill .final-tag {
      color: var(--lime);
      font-size: 10px;
      font-weight: 950;
    }

    .score-pill .scoreline {
      color: var(--text);
      font-size: 14px;
      font-weight: 950;
      font-variant-numeric: tabular-nums;
    }

    .match-center {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.36fr) minmax(340px, .64fr);
      gap: 14px;
      min-height: calc(100vh - 96px);
      margin-bottom: 14px;
    }

    .broadcast-stage, .control-tower {
      min-width: 0;
      border: 1px solid rgba(237, 244, 239, .13);
      border-radius: var(--radius);
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)),
        rgba(4, 9, 8, .72);
    }

    .broadcast-stage {
      position: relative;
      display: grid;
      grid-template-rows: auto minmax(360px, 1fr) auto;
      padding: 18px;
      background:
        radial-gradient(circle at 18% 26%, rgba(214, 255, 107, .18), transparent 31%),
        radial-gradient(circle at 84% 54%, rgba(141, 183, 255, .14), transparent 30%),
        linear-gradient(135deg, rgba(15, 40, 27, .92), rgba(5, 12, 12, .96) 58%, rgba(12, 21, 18, .92));
    }

    .broadcast-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(circle at 50% 45%, #000, transparent 78%);
    }

    .broadcast-topline,
    .broadcast-bottom {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .broadcast-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .broadcast-field {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(250px, .9fr) minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      min-height: 390px;
      margin: 18px 0;
      padding: 20px;
      border: 1px solid rgba(237, 244, 239, .14);
      border-radius: 10px;
      background:
        linear-gradient(90deg, rgba(214, 255, 107, .08), transparent 18%, transparent 82%, rgba(141, 183, 255, .08)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .028) 0 72px, rgba(255, 255, 255, .052) 72px 144px),
        rgba(8, 30, 20, .58);
      box-shadow: inset 0 0 80px rgba(0, 0, 0, .28);
    }

    .broadcast-field::before {
      content: "";
      position: absolute;
      inset: 20px;
      border: 1px solid rgba(237, 244, 239, .18);
      border-radius: 5px;
    }

    .broadcast-field::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 20px;
      bottom: 20px;
      width: 1px;
      background: rgba(237, 244, 239, .18);
    }

    .field-circle {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 132px;
      height: 132px;
      border: 1px solid rgba(237, 244, 239, .18);
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    .field-box {
      position: absolute;
      top: 34%;
      width: 82px;
      height: 132px;
      border: 1px solid rgba(237, 244, 239, .18);
      transform: translateY(-50%);
    }

    .field-box.home { left: 20px; border-left: 0; }
    .field-box.away { right: 20px; border-right: 0; }

    .field-heat {
      position: absolute;
      border-radius: 999px;
      filter: blur(.2px);
      opacity: .92;
    }

    .field-heat.home {
      left: 23%;
      top: 45%;
      width: var(--home-size, 144px);
      height: var(--home-size, 144px);
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(214, 255, 107, .54), rgba(87, 210, 141, .15) 61%, transparent 72%);
    }

    .field-heat.away {
      right: 23%;
      top: 45%;
      width: var(--away-size, 132px);
      height: var(--away-size, 132px);
      transform: translate(50%, -50%);
      background: radial-gradient(circle, rgba(141, 183, 255, .54), rgba(141, 183, 255, .13) 61%, transparent 72%);
    }

    .field-arrow {
      position: absolute;
      z-index: 1;
      left: 50%;
      top: 50%;
      width: 34%;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(127, 199, 255, .16), var(--gold));
      transform: translate(-50%, -50%) rotate(var(--tilt, -8deg));
      transform-origin: center;
      box-shadow: 0 0 24px rgba(216, 166, 74, .22);
    }

    .field-arrow::after {
      content: "";
      position: absolute;
      right: -2px;
      top: 50%;
      width: 12px;
      height: 12px;
      border-top: 3px solid var(--gold);
      border-right: 3px solid var(--gold);
      transform: translateY(-50%) rotate(45deg);
    }

    .field-readout {
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: 18px;
      z-index: 3;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .field-readout-item {
      min-width: 0;
      padding: 9px 10px;
      border: 1px solid rgba(237, 244, 239, .14);
      border-radius: 7px;
      background: rgba(3, 9, 8, .7);
      box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
    }

    .field-readout-item strong {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      color: var(--text);
      font-size: 12px;
      font-weight: 950;
      line-height: 1.1;
    }

    .field-readout-item strong span {
      color: var(--lime);
      font-size: 14px;
      font-variant-numeric: tabular-nums;
    }

    .field-readout-track {
      display: block;
      height: 5px;
      margin-top: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 255, 255, .08);
    }

    .field-readout-track i {
      display: block;
      width: var(--value, 50%);
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--green), var(--lime));
    }

    .field-readout-item em {
      display: block;
      margin-top: 7px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.25;
      font-style: normal;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .match-side {
      position: relative;
      z-index: 2;
      display: grid;
      gap: 12px;
      justify-items: center;
      text-align: center;
      min-width: 0;
    }

    .match-side.away {
      justify-self: stretch;
    }

    .center-score {
      position: relative;
      z-index: 2;
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 12px;
      min-height: 210px;
      padding: 18px;
      border: 1px solid rgba(237, 244, 239, .2);
      border-radius: 10px;
      background: rgba(4, 9, 8, .66);
      box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
    }

    .center-score strong {
      color: var(--text);
      font-size: clamp(46px, 6vw, 86px);
      line-height: .88;
      font-weight: 950;
      font-variant-numeric: tabular-nums;
    }

    .center-score span {
      color: var(--lime);
      font-size: 12px;
      font-weight: 950;
    }

    .broadcast-code {
      display: grid;
      place-items: center;
      width: 96px;
      height: 96px;
      border: 1px solid rgba(237, 244, 239, .24);
      border-radius: 50%;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .035)),
        rgba(0, 0, 0, .18);
      color: var(--text);
      font-size: 28px;
      font-weight: 950;
      box-shadow: inset 0 0 0 8px rgba(0, 0, 0, .14);
    }

    .broadcast-name {
      color: var(--text);
      font-size: clamp(31px, 4.2vw, 58px);
      line-height: .95;
      font-weight: 950;
    }

    .side-caption {
      display: inline-flex;
      min-height: 25px;
      align-items: center;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(214, 255, 107, .11);
      color: var(--lime);
      font-size: 12px;
      font-weight: 950;
    }

    .broadcast-lead {
      max-width: 860px;
      margin: 0;
      color: var(--text);
      font-size: clamp(18px, 1.8vw, 25px);
      line-height: 1.35;
      font-weight: 900;
      overflow-wrap: anywhere;
    }

    .control-tower {
      display: grid;
      gap: 14px;
      align-content: start;
      padding: 16px;
    }

    .tower-block {
      min-width: 0;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .026);
      padding: 14px;
    }

    .tower-label {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

    .tower-title {
      margin: 10px 0 0;
      color: var(--text);
      font-size: clamp(20px, 2vw, 30px);
      line-height: 1.25;
      font-weight: 950;
    }

    .tower-kpis {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 12px;
    }

    .tower-kpi {
      min-width: 0;
      padding: 9px 8px;
      border: 1px solid var(--line-soft);
      border-radius: 7px;
      background: rgba(0, 0, 0, .15);
    }

    .tower-kpi strong {
      display: block;
      color: var(--text);
      font-size: 18px;
      line-height: 1;
      font-weight: 950;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .tower-kpi span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 850;
    }

    .tower-note {
      margin: 10px 0 0;
      color: var(--soft);
      font-size: 13px;
      line-height: 1.65;
    }

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

    .result-bar {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) 42px;
      gap: 9px;
      align-items: center;
      color: var(--soft);
      font-size: 12px;
      font-weight: 900;
    }

    .result-bar-track {
      height: 18px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 255, 255, .08);
    }

    .result-bar-track span {
      display: block;
      width: var(--value, 35%);
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--green), var(--lime));
    }

    .result-bar:nth-child(2) .result-bar-track span {
      background: linear-gradient(90deg, var(--amber), #ffe39a);
    }

    .result-bar:nth-child(3) .result-bar-track span {
      background: linear-gradient(90deg, var(--blue), #b8d2ff);
    }

    .score-tiles {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .score-tile {
      min-width: 0;
      padding: 12px 9px;
      border: 1px solid var(--line-soft);
      border-radius: 7px;
      background: rgba(0, 0, 0, .18);
      text-align: center;
    }

    .score-tile strong {
      display: block;
      color: var(--text);
      font-size: 22px;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .score-tile span {
      display: block;
      margin-top: 7px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }

    .phase-rail {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .phase-rail-item {
      min-width: 0;
      padding: 11px 9px;
      border: 1px solid var(--line-soft);
      border-radius: 7px;
      background: rgba(0, 0, 0, .16);
    }

    .phase-rail-item strong {
      display: block;
      color: var(--text);
      font-size: 13px;
    }

    .phase-rail-item span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
    }

    .tower-gaps {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 12px;
    }

    .tower-gap {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 8px;
      border-radius: 999px;
      background: rgba(255, 200, 95, .1);
      color: #ffe0a3;
      font-size: 11px;
      font-weight: 850;
    }

    @keyframes scoreMarquee {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 14px;
      align-items: stretch;
      margin-bottom: 12px;
    }

    .hero-main, .hero-side, .section {
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .022));
    }

    .hero-main {
      padding: 0;
      min-width: 0;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(214, 255, 107, .12), rgba(141, 183, 255, .07) 46%, rgba(255, 255, 255, .025)),
        radial-gradient(circle at 50% 150%, rgba(87, 210, 141, .22), transparent 46%),
        #0b1411;
    }

    .hero-main::after {
      content: "";
      position: absolute;
      inset: 62px 38px 28px;
      border: 1px solid rgba(237, 244, 239, .1);
      border-radius: 50% / 42%;
      pointer-events: none;
    }

    .hero-main::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 116px;
      bottom: 30px;
      width: 1px;
      background: rgba(237, 244, 239, .12);
      pointer-events: none;
    }

    .match-visual {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      gap: 16px;
      align-items: center;
      min-height: 280px;
      padding: 20px;
    }

    .team-block {
      display: grid;
      justify-items: center;
      gap: 10px;
      min-width: 0;
      text-align: center;
    }

    .team-crest {
      width: 92px;
      height: 92px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(237, 244, 239, .22);
      border-radius: 50%;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .035)),
        rgba(0, 0, 0, .18);
      box-shadow: inset 0 0 0 8px rgba(0, 0, 0, .14);
      color: var(--text);
      font-size: 28px;
      font-weight: 950;
      line-height: 1;
      letter-spacing: 0;
    }

    .team-code-large {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 52px;
      height: 26px;
      padding: 0 9px;
      border-radius: 999px;
      background: rgba(214, 255, 107, .12);
      color: var(--lime);
      font-size: 12px;
      font-weight: 950;
    }

    .team-display-name {
      max-width: 100%;
      color: var(--text);
      font-size: clamp(24px, 3vw, 42px);
      line-height: 1;
      font-weight: 950;
      overflow-wrap: anywhere;
    }

    .scoreboard {
      display: grid;
      justify-items: center;
      gap: 9px;
      min-width: 150px;
      padding: 14px 16px;
      border: 1px solid rgba(237, 244, 239, .18);
      border-radius: var(--radius);
      background: rgba(7, 11, 10, .62);
      box-shadow: 0 20px 60px rgba(0, 0, 0, .24);
    }

    .scoreboard .scoreline-main {
      color: var(--text);
      font-size: clamp(32px, 5vw, 58px);
      line-height: .95;
      font-weight: 950;
      font-variant-numeric: tabular-nums;
    }

    .scoreboard .state {
      color: var(--lime);
      font-size: 12px;
      font-weight: 950;
    }

    .hero-copy {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 12px;
      padding: 0 20px 20px;
    }

    .hero-copy .match-title {
      display: none;
    }

    .stage-line {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-bottom: 0;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 24px;
      padding: 0 9px;
      border: 1px solid var(--line-soft);
      border-radius: 999px;
      color: var(--muted);
      background: rgba(0, 0, 0, .18);
      font-size: 11px;
      font-weight: 800;
    }

    .pill.good {
      color: #10150f;
      border-color: transparent;
      background: var(--lime);
    }

    .match-title {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      margin: 0;
      font-size: clamp(28px, 3.6vw, 46px);
      line-height: 1.02;
      letter-spacing: 0;
    }

    .vs {
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
    }

    .title-team {
      display: inline-flex;
      align-items: baseline;
      gap: 10px;
      min-width: 0;
    }

    .title-code {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 30px;
      border: 1px solid rgba(214, 255, 107, .34);
      border-radius: 6px;
      background: rgba(214, 255, 107, .1);
      color: var(--lime);
      font-size: 15px;
      line-height: 1;
      font-weight: 950;
    }

    .lead {
      max-width: 820px;
      margin: 0;
      padding-left: 14px;
      border-left: 3px solid var(--lime);
      color: var(--text);
      font-size: clamp(17px, 1.8vw, 22px);
      line-height: 1.42;
      font-weight: 850;
    }

    .hero-side {
      padding: 16px;
      display: grid;
      align-content: start;
      gap: 14px;
    }

    .result-box {
      display: grid;
      gap: 6px;
    }

    .result-box .label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .result-box .value {
      font-size: 32px;
      line-height: 1;
      color: var(--lime);
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }

    .intel-strip {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }

    .intel-card {
      min-width: 0;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(214, 255, 107, .055), rgba(255, 255, 255, .02)),
        rgba(0, 0, 0, .14);
      padding: 13px;
    }

    .intel-value {
      display: block;
      color: var(--text);
      font-size: 25px;
      line-height: 1;
      font-weight: 950;
      font-variant-numeric: tabular-nums;
    }

    .intel-label {
      display: block;
      margin-top: 7px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .intel-hint {
      margin-top: 8px;
      color: var(--soft);
      font-size: 11px;
      line-height: 1.35;
      min-height: 30px;
    }

    .prediction-board {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(250px, .74fr) minmax(250px, .74fr);
      gap: 14px;
      margin-bottom: 14px;
    }

    .decision-panel, .odds-panel, .score-panel, .confidence-panel {
      min-width: 0;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .022));
      padding: 16px;
    }

    .decision-panel {
      display: grid;
      gap: 14px;
      align-content: start;
      border-color: rgba(214, 255, 107, .32);
      background:
        linear-gradient(135deg, rgba(214, 255, 107, .11), rgba(87, 210, 141, .035) 58%, rgba(255, 255, 255, .025)),
        rgba(0, 0, 0, .12);
    }

    .verdict-meter {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 2px;
    }

    .verdict-cell {
      min-width: 0;
      min-height: 82px;
      padding: 10px;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: rgba(0, 0, 0, .18);
    }

    .verdict-cell strong {
      display: block;
      color: var(--text);
      font-size: 22px;
      line-height: 1;
      font-weight: 950;
      font-variant-numeric: tabular-nums;
    }

    .verdict-cell span {
      display: block;
      margin-top: 7px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
    }

    .verdict-cell .mini-fill {
      display: block;
      height: 5px;
      margin-top: 11px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .08);
      overflow: hidden;
    }

    .verdict-cell .mini-fill i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--green), var(--lime));
    }

    .panel-label {
      display: inline-flex;
      align-items: center;
      width: max-content;
      min-height: 22px;
      padding: 0 8px;
      border-radius: 999px;
      background: rgba(214, 255, 107, .12);
      color: var(--lime);
      font-size: 11px;
      font-weight: 950;
    }

    .decision-title {
      margin: 0;
      color: var(--text);
      font-size: clamp(21px, 2vw, 30px);
      line-height: 1.28;
      letter-spacing: 0;
    }

    .decision-sub {
      margin: 0;
      color: var(--soft);
      font-size: 14px;
      line-height: 1.75;
    }

    .decision-hero {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 12px;
      margin: 0 14px 12px;
      padding: 15px;
      border: 1px solid rgba(127, 199, 255, .34);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(127, 199, 255, .14), rgba(216, 166, 74, .075)),
        rgba(1, 8, 11, .74);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035), 0 16px 38px rgba(0, 0, 0, .26);
    }

    .decision-hero.is-caution {
      border-color: rgba(216, 166, 74, .42);
      background:
        linear-gradient(135deg, rgba(216, 166, 74, .16), rgba(127, 199, 255, .075)),
        rgba(8, 8, 5, .78);
    }

    .decision-hero.muted {
      border-color: rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .035);
    }

    .decision-hero-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .decision-hero-head span,
    .decision-action span {
      color: #9fdfff;
      font-size: 11px;
      line-height: 1.2;
      font-weight: 950;
    }

    .decision-hero-head em {
      flex: 0 0 auto;
      padding: 5px 10px;
      border: 1px solid rgba(127, 199, 255, .22);
      border-radius: 999px;
      background: rgba(127, 199, 255, .12);
      color: #dff6ff;
      font-size: 11px;
      line-height: 1;
      font-style: normal;
      font-weight: 950;
    }

    .decision-action {
      min-width: 0;
      display: grid;
      gap: 7px;
    }

    .decision-action strong {
      display: block;
      color: #f8edd6;
      font-size: clamp(24px, 2.7vw, 40px);
      line-height: 1.08;
      font-weight: 950;
      overflow-wrap: anywhere;
    }

    .decision-action p {
      margin: 0;
      color: #cbd7d7;
      font-size: 13px;
      line-height: 1.55;
    }

    .confidence-stars {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
    }

    .star-meter {
      position: relative;
      display: inline-block;
      color: rgba(255, 255, 255, .20);
      font-size: 18px;
      line-height: 1;
      letter-spacing: 1px;
      white-space: nowrap;
    }

    .star-meter::before,
    .star-meter i::before {
      content: "★★★★★";
    }

    .star-meter i {
      position: absolute;
      inset: 0 auto 0 0;
      width: var(--rating, 0%);
      overflow: hidden;
      color: #f4c56f;
      font-style: normal;
      text-shadow: 0 0 16px rgba(244, 197, 111, .24);
    }

    .confidence-stars b {
      flex: 0 0 auto;
      color: #f8edd6;
      font-size: 12px;
      line-height: 1;
      font-weight: 950;
    }

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

    .decision-grid div {
      min-width: 0;
      padding: 10px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 6px;
      background: rgba(0, 0, 0, .24);
    }

    .decision-grid span,
    .decision-grid strong {
      display: block;
      overflow-wrap: anywhere;
    }

    .decision-grid span {
      color: var(--muted);
      font-size: 10.5px;
      line-height: 1.2;
      font-weight: 900;
    }

    .decision-grid strong {
      margin-top: 6px;
      color: var(--text);
      font-size: 13px;
      line-height: 1.28;
      font-weight: 950;
    }

    .decision-warning {
      min-width: 0;
      padding: 10px 12px;
      border: 1px solid rgba(216, 166, 74, .22);
      border-radius: 6px;
      background: rgba(216, 166, 74, .075);
      color: #ecd8ae;
      font-size: 12px;
      line-height: 1.55;
      font-weight: 800;
      overflow-wrap: anywhere;
    }

    .legacy-signal {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 4px 10px;
      min-width: 0;
      padding: 9px 10px;
      border: 1px dashed rgba(216, 166, 74, .26);
      border-radius: 6px;
      background: rgba(216, 166, 74, .045);
    }

    .legacy-signal.is-reverse {
      border-color: rgba(255, 182, 96, .42);
      background: rgba(216, 166, 74, .075);
    }

    .legacy-signal span {
      align-self: start;
      padding: 4px 7px;
      border-radius: 999px;
      background: rgba(0, 0, 0, .22);
      color: #e6c47d;
      font-size: 10px;
      line-height: 1;
      font-weight: 950;
      white-space: nowrap;
    }

    .legacy-signal strong {
      min-width: 0;
      color: #f4dfb6;
      font-size: 13px;
      line-height: 1.25;
      font-weight: 950;
      overflow-wrap: anywhere;
    }

    .legacy-signal p {
      grid-column: 2;
      margin: 0;
      color: #bfb6a2;
      font-size: 11.5px;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .strategy-summary {
      display: grid;
      gap: 9px;
      min-width: 0;
      margin: 0 14px 12px;
      padding: 11px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .015)),
        rgba(0, 0, 0, .14);
    }

    .strategy-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
    }

    .strategy-head strong {
      color: var(--text);
      font-size: 15px;
      line-height: 1.2;
      font-weight: 950;
    }

    .strategy-head span {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
      text-align: right;
    }

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

    .strategy-card {
      min-width: 0;
      padding: 9px;
      border: 1px solid rgba(255, 255, 255, .075);
      border-radius: 6px;
      background: rgba(0, 0, 0, .16);
    }

    .strategy-card.value {
      border-color: rgba(216, 166, 74, .28);
      background: rgba(216, 166, 74, .07);
    }

    .strategy-card.aligned {
      border-color: rgba(127, 199, 255, .22);
      background: rgba(127, 199, 255, .06);
    }

    .strategy-card.risk {
      border-color: rgba(255, 125, 125, .34);
      background: rgba(255, 125, 125, .07);
    }

    .strategy-card span,
    .strategy-card p,
    .strategy-card em {
      display: block;
      overflow-wrap: anywhere;
    }

    .strategy-card span {
      color: var(--muted);
      font-size: 10.5px;
      line-height: 1.25;
      font-weight: 900;
    }

    .strategy-card strong {
      display: block;
      margin-top: 5px;
      color: var(--text);
      font-size: 14px;
      line-height: 1.25;
      font-weight: 950;
    }

    .strategy-card p {
      margin: 7px 0 0;
      color: var(--soft);
      font-size: 11px;
      line-height: 1.45;
    }

    .strategy-card em {
      width: max-content;
      max-width: 100%;
      margin-top: 8px;
      padding: 3px 7px;
      border-radius: 999px;
      background: rgba(0, 0, 0, .24);
      color: #d9e6ec;
      font-size: 10.5px;
      line-height: 1.25;
      font-style: normal;
      font-weight: 850;
    }

    .prediction-side {
      display: contents;
    }

    .odds-list {
      display: grid;
      gap: 12px;
    }

    .odds-row {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr) 46px;
      align-items: center;
      gap: 10px;
      color: var(--soft);
      font-size: 13px;
      font-weight: 850;
    }

    .odds-track {
      height: 9px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 255, 255, .08);
    }

    .odds-track span {
      display: block;
      height: 100%;
      min-width: 4px;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--green), var(--lime));
    }

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

    .probability-bar {
      display: grid;
      grid-template-columns: var(--home, 33fr) var(--draw, 34fr) var(--away, 33fr);
      height: 38px;
      overflow: hidden;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .04);
    }

    .probability-bar span {
      display: grid;
      place-items: center;
      min-width: 30px;
      color: #10150f;
      font-size: 12px;
      font-weight: 950;
      font-variant-numeric: tabular-nums;
    }

    .probability-bar span:nth-child(1) { background: var(--green); }
    .probability-bar span:nth-child(2) { background: var(--amber); }
    .probability-bar span:nth-child(3) { background: var(--blue); }

    .probability-legend {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .legend-item {
      min-width: 0;
      padding: 9px;
      border: 1px solid var(--line-soft);
      border-radius: 6px;
      background: rgba(0, 0, 0, .18);
    }

    .legend-item strong {
      display: block;
      color: var(--text);
      font-size: 17px;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .legend-item span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      white-space: nowrap;
    }

    .score-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .score-chip {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid rgba(214, 255, 107, .28);
      border-radius: 999px;
      color: var(--text);
      background: rgba(0, 0, 0, .2);
      font-size: 14px;
      font-weight: 950;
      font-variant-numeric: tabular-nums;
    }

    .score-ladder {
      display: grid;
      gap: 9px;
    }

    .score-ladder-row {
      display: grid;
      grid-template-columns: 70px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-height: 34px;
      color: var(--soft);
      font-size: 13px;
      font-weight: 850;
    }

    .score-ladder-row strong {
      color: var(--text);
      font-size: 16px;
      font-variant-numeric: tabular-nums;
    }

    .score-ladder-row .odds-track span {
      background: linear-gradient(90deg, var(--blue), var(--lime));
    }

    .visual-lab {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
      gap: 14px;
      margin-bottom: 14px;
    }

    .pitch-card, .flow-card {
      min-width: 0;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02));
      padding: 16px;
    }

    .pitch {
      position: relative;
      min-height: 260px;
      overflow: hidden;
      border: 1px solid rgba(237, 244, 239, .14);
      border-radius: var(--radius);
      background:
        linear-gradient(90deg, rgba(214, 255, 107, .08), transparent 22%, transparent 78%, rgba(141, 183, 255, .09)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 48px, rgba(255, 255, 255, .045) 48px 96px),
        #102018;
    }

    .pitch::before {
      content: "";
      position: absolute;
      inset: 18px;
      border: 1px solid rgba(237, 244, 239, .18);
      border-radius: 4px;
    }

    .pitch::after {
      content: "";
      position: absolute;
      top: 18px;
      bottom: 18px;
      left: 50%;
      width: 1px;
      background: rgba(237, 244, 239, .18);
    }

    .pitch-circle {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 92px;
      height: 92px;
      border: 1px solid rgba(237, 244, 239, .18);
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    .penalty-box {
      position: absolute;
      top: 72px;
      width: 62px;
      height: 116px;
      border: 1px solid rgba(237, 244, 239, .18);
    }

    .penalty-box.home { left: 18px; border-left: 0; }
    .penalty-box.away { right: 18px; border-right: 0; }

    .heat-zone {
      position: absolute;
      border-radius: 999px;
      filter: blur(.1px);
      opacity: .88;
    }

    .heat-zone.home {
      left: 20%;
      top: 28%;
      width: var(--home-size, 132px);
      height: var(--home-size, 132px);
      background: radial-gradient(circle, rgba(214, 255, 107, .42), rgba(87, 210, 141, .08) 68%, transparent 72%);
    }

    .heat-zone.away {
      right: 20%;
      bottom: 24%;
      width: var(--away-size, 112px);
      height: var(--away-size, 112px);
      background: radial-gradient(circle, rgba(141, 183, 255, .42), rgba(141, 183, 255, .08) 68%, transparent 72%);
    }

    .pitch-team {
      position: absolute;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 28px;
      padding: 0 10px;
      border: 1px solid rgba(237, 244, 239, .16);
      border-radius: 999px;
      background: rgba(7, 11, 10, .76);
      color: var(--text);
      font-size: 12px;
      font-weight: 950;
    }

    .pitch-team.home { left: 30px; top: 28px; }
    .pitch-team.away { right: 30px; bottom: 28px; }

    .momentum-arrow {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 42%;
      height: 2px;
      background: linear-gradient(90deg, rgba(214, 255, 107, .2), var(--lime));
      transform: translate(-50%, -50%) rotate(var(--tilt, -8deg));
      transform-origin: center;
    }

    .momentum-arrow::after {
      content: "";
      position: absolute;
      right: -1px;
      top: 50%;
      width: 9px;
      height: 9px;
      border-top: 2px solid var(--lime);
      border-right: 2px solid var(--lime);
      transform: translateY(-50%) rotate(45deg);
    }

    .pitch-legend {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 10px;
    }

    .pitch-legend-item {
      min-width: 0;
      padding: 9px;
      border: 1px solid var(--line-soft);
      border-radius: 6px;
      background: rgba(0, 0, 0, .16);
    }

    .pitch-legend-item strong {
      display: block;
      color: var(--text);
      font-size: 15px;
      line-height: 1;
    }

    .pitch-legend-item span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
    }

    .flow-card {
      display: grid;
      gap: 14px;
    }

    .flow-row {
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr) 52px;
      gap: 10px;
      align-items: center;
      color: var(--soft);
      font-size: 13px;
      font-weight: 850;
    }

    .flow-track {
      position: relative;
      height: 12px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 255, 255, .08);
    }

    .flow-track span {
      position: absolute;
      inset: 0 auto 0 0;
      width: var(--value, 50%);
      border-radius: inherit;
      background: linear-gradient(90deg, var(--green), var(--lime));
    }

    .phase-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .phase-item {
      min-width: 0;
      padding: 10px 8px;
      border: 1px solid var(--line-soft);
      border-radius: 6px;
      background: rgba(0, 0, 0, .18);
    }

    .phase-item strong {
      display: block;
      color: var(--text);
      font-size: 13px;
      white-space: nowrap;
    }

    .phase-item span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
    }

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

    .source-chip {
      display: grid;
      gap: 5px;
      min-width: 0;
      padding: 9px;
      border: 1px solid var(--line-soft);
      border-radius: 6px;
      background: rgba(255, 255, 255, .025);
    }

    .source-chip strong {
      color: var(--text);
      font-size: 13px;
    }

    .source-chip span {
      color: var(--muted);
      font-size: 11px;
    }

    .confidence-panel {
      display: grid;
      gap: 9px;
    }

    .confidence-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--soft);
      font-size: 13px;
      line-height: 1.5;
    }

    .confidence-badge {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 0 10px;
      border-radius: 999px;
      background: var(--lime);
      color: #10150f;
      font-size: 12px;
      font-weight: 950;
      white-space: nowrap;
    }

    .confidence-badge.mid {
      background: var(--amber);
    }

    .confidence-badge.low {
      background: rgba(255, 125, 125, .92);
    }

    .quality {
      display: grid;
      gap: 8px;
    }

    .quality-top {
      display: flex;
      justify-content: space-between;
      color: var(--soft);
      font-size: 12px;
      font-weight: 800;
    }

    .bar {
      height: 8px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255, 255, 255, .08);
    }

    .bar > span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--green), var(--lime));
    }

    .section-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr);
      gap: 14px;
    }

    .stack {
      display: grid;
      gap: 14px;
      align-content: start;
    }

    .section {
      padding: 16px;
      min-width: 0;
    }

    .section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 12px;
      margin-bottom: 14px;
      border-bottom: 1px solid var(--line-soft);
    }

    .section h2 {
      margin: 0;
      font-size: 15px;
      line-height: 1.2;
    }

    .blueprint-panel {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      min-height: 0;
      margin-bottom: 14px;
      padding: 18px;
      border: 1px solid rgba(216, 166, 74, .34);
      border-radius: 8px;
      background:
        linear-gradient(90deg, rgba(216, 166, 74, .028) 1px, transparent 1px),
        linear-gradient(180deg, rgba(216, 166, 74, .022) 1px, transparent 1px),
        radial-gradient(circle at 18% 16%, rgba(127, 199, 255, .10), transparent 32%),
        radial-gradient(circle at 82% 38%, rgba(216, 166, 74, .08), transparent 30%),
        linear-gradient(135deg, rgba(5, 8, 10, .99), rgba(11, 14, 13, .99) 48%, rgba(3, 5, 6, .99));
      background-size: 34px 34px, 34px 34px, auto, auto, auto;
      box-shadow:
        inset 0 0 0 1px rgba(255, 238, 190, .035),
        inset 0 0 54px rgba(216, 166, 74, .04),
        0 26px 70px rgba(0, 0, 0, .46);
      overflow: hidden;
    }

    .blueprint-panel::before,
    .blueprint-panel::after {
      content: "";
      position: absolute;
      pointer-events: none;
      z-index: 1;
    }

    .blueprint-panel::before {
      inset: 8px;
      border: 1px solid rgba(216, 166, 74, .16);
    }

    .blueprint-panel::after {
      inset: 0;
      background:
        linear-gradient(90deg, rgba(216, 166, 74, .32), transparent 76px) left 12px top 12px / 120px 1px no-repeat,
        linear-gradient(90deg, transparent, rgba(216, 166, 74, .32)) right 12px top 12px / 120px 1px no-repeat,
        linear-gradient(90deg, rgba(216, 166, 74, .32), transparent 76px) left 12px bottom 12px / 120px 1px no-repeat,
        linear-gradient(90deg, transparent, rgba(216, 166, 74, .32)) right 12px bottom 12px / 120px 1px no-repeat,
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px);
      opacity: .44;
      mix-blend-mode: screen;
    }

    .blueprint-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 2;
      gap: 12px;
      flex-wrap: wrap;
      min-height: 46px;
      padding: 2px 8px 0;
    }

    .blueprint-main {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(250px, .7fr) minmax(330px, 1fr) minmax(320px, .96fr);
      gap: 12px;
      align-items: start;
    }

    .blueprint-card {
      position: relative;
      min-width: 0;
      border: 1px solid rgba(216, 166, 74, .26);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(216, 166, 74, .045), transparent 42%),
        rgba(3, 7, 9, .78);
      box-shadow:
        inset 0 0 0 1px rgba(255, 238, 190, .035),
        inset 0 0 34px rgba(0, 0, 0, .34);
      overflow: hidden;
    }

    .blueprint-card::before {
      content: "";
      position: absolute;
      inset: 6px;
      border: 1px solid rgba(216, 166, 74, .065);
      pointer-events: none;
    }

    .blueprint-card-head,
    .score-top,
    .tab-labels {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 1;
      gap: 12px;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(216, 166, 74, .22);
      background: linear-gradient(90deg, rgba(216, 166, 74, .075), rgba(127, 199, 255, .035), transparent);
    }

    .blueprint-card-head h2,
    .score-top h2 {
      margin: 0;
      color: var(--gold);
      font-family: Georgia, "Times New Roman", "Microsoft YaHei", serif;
      font-size: 15px;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .blueprint-card-head span,
    .score-state,
    .tab-labels label {
      color: #c9a969;
      font-size: 12px;
      font-weight: 900;
    }

    .pitch-board {
      display: grid;
      grid-template-rows: auto 1fr;
      align-content: start;
    }

    .tactical-pitch {
      position: relative;
      z-index: 1;
      width: min(calc(100% - 28px), 360px);
      aspect-ratio: 68 / 105;
      min-height: 0;
      margin: 14px auto;
      border: 1px solid rgba(127, 199, 255, .42);
      border-radius: 1px;
      background:
        linear-gradient(90deg, rgba(127, 199, 255, .10) 1px, transparent 1px),
        linear-gradient(180deg, rgba(127, 199, 255, .08) 1px, transparent 1px),
        radial-gradient(circle at 50% 26%, rgba(127, 199, 255, .16), transparent 28%),
        radial-gradient(circle at 50% 74%, rgba(255, 91, 79, .14), transparent 28%),
        linear-gradient(180deg, rgba(4, 20, 29, .92), rgba(7, 12, 13, .95) 50%, rgba(26, 8, 8, .9));
      background-size: 26px 26px, 26px 26px, auto, auto, auto;
      box-shadow:
        inset 0 0 0 5px rgba(0, 0, 0, .18),
        inset 0 0 90px rgba(0, 0, 0, .42),
        0 18px 35px rgba(0, 0, 0, .26);
      overflow: hidden;
    }

    .pitch-line {
      position: absolute;
      pointer-events: none;
      border-color: rgba(127, 199, 255, .48);
    }

    .pitch-line.center {
      left: 0;
      right: 0;
      top: 50%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(216, 166, 74, .74), transparent);
    }

    .pitch-line.circle {
      left: 50%;
      top: 50%;
      width: 112px;
      height: 112px;
      border: 1px solid rgba(216, 166, 74, .58);
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    .pitch-line.box {
      left: 50%;
      width: 132px;
      height: 58px;
      border: 1px solid rgba(127, 199, 255, .5);
      transform: translateX(-50%);
    }

    .pitch-line.box.home { top: 0; border-top: 0; }
    .pitch-line.box.away { bottom: 0; border-bottom: 0; }

    .pitch-glow {
      position: absolute;
      left: 50%;
      border-radius: 50%;
      transform: translateX(-50%);
      opacity: .92;
    }

    .pitch-glow.home {
      top: 16%;
      width: var(--home-size, 142px);
      height: var(--home-size, 142px);
      background: radial-gradient(circle, rgba(127, 199, 255, .45), rgba(127, 199, 255, .11) 62%, transparent 72%);
    }

    .pitch-glow.away {
      bottom: 16%;
      width: var(--away-size, 132px);
      height: var(--away-size, 132px);
      background: radial-gradient(circle, rgba(255, 91, 79, .42), rgba(255, 91, 79, .11) 62%, transparent 72%);
    }

    .formation-side {
      position: absolute;
      z-index: 2;
      left: 16px;
      right: 16px;
      height: 45%;
      display: grid;
      grid-template-rows: auto 1fr;
      align-items: center;
      justify-items: center;
      gap: 8px;
    }

    .formation-side.home { top: 16px; }
    .formation-side.away { bottom: 42px; }

    .team-code-tag {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      min-height: 28px;
      padding: 3px 9px;
      border: 1px solid rgba(216, 166, 74, .58);
      border-radius: 2px;
      color: var(--gold);
      background: rgba(0, 0, 0, .48);
      font-size: 11px;
      font-weight: 950;
    }

    .team-code-tag .tag-flag {
      font-size: 16px;
      line-height: 1;
    }

    .formation-grid {
      width: 100%;
      height: 100%;
      display: grid;
      align-content: space-evenly;
      gap: 8px;
    }

    .formation-row {
      display: flex;
      justify-content: space-around;
      gap: 8px;
    }

    .formation-row span {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(216, 166, 74, .34);
      border-radius: 50%;
      background: rgba(4, 9, 8, .82);
      color: var(--text);
      font-size: 10px;
      font-weight: 950;
      box-shadow: 0 10px 22px rgba(0, 0, 0, .26);
    }

    .formation-grid.home .formation-row span {
        border-color: rgba(127, 199, 255, .74);
        color: #c9ecff;
        box-shadow: 0 0 0 2px rgba(127, 199, 255, .08), 0 10px 22px rgba(0, 0, 0, .26);
      }

    .formation-grid.away .formation-row span {
      border-color: rgba(255, 91, 79, .7);
      color: #ffb0a9;
      box-shadow: 0 0 0 2px rgba(255, 91, 79, .08), 0 10px 22px rgba(0, 0, 0, .26);
    }

    .pitch-missing {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 3;
      padding: 8px 10px;
      border: 1px solid rgba(216, 166, 74, .32);
      border-radius: 2px;
      background: rgba(3, 9, 8, .82);
      color: var(--muted);
      font-size: 12px;
      text-align: center;
    }

    .pitch-orientation {
      position: absolute;
      z-index: 3;
      left: 12px;
      top: 50%;
      display: grid;
      gap: 4px;
      transform: translateY(-50%);
      color: rgba(216, 166, 74, .72);
      font-size: 10px;
      font-weight: 950;
      writing-mode: vertical-rl;
      letter-spacing: 0;
    }

    .matchup-board {
      display: grid;
      align-content: start;
      background:
        radial-gradient(circle at 50% 8%, rgba(127, 199, 255, .075), transparent 34%),
        linear-gradient(180deg, rgba(8, 11, 11, .88), rgba(3, 7, 9, .84));
    }

    .score-top {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: flex-start;
      min-height: 124px;
      padding-right: 102px;
    }

    .score-top > div:first-child {
      min-width: 0;
    }

    .score-top h2 {
      margin-top: 4px;
      color: var(--text);
      font-family: Georgia, "Times New Roman", "Microsoft YaHei", serif;
      font-size: clamp(21px, 1.7vw, 31px);
      line-height: 1.08;
      text-transform: uppercase;
    }

    .score-top h2 strong {
      display: inline-block;
      margin: 4px 0 0;
      color: var(--gold);
      font-size: clamp(38px, 3.5vw, 58px);
      font-variant-numeric: tabular-nums;
      vertical-align: middle;
      letter-spacing: 0;
      text-shadow: 0 0 22px rgba(216, 166, 74, .18);
    }

    .score-top p {
      margin: 8px 0 0;
      color: #d9c9a7;
      font-size: 13px;
      line-height: 1.55;
    }

    .score-quality {
      display: grid;
      position: absolute;
      right: 14px;
      top: 14px;
      place-items: center;
      justify-self: end;
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background:
        radial-gradient(circle at center, rgba(4, 9, 8, .96) 57%, transparent 59%),
        conic-gradient(var(--gold) calc(var(--value, 0) * 1%), rgba(127, 199, 255, .16) 0);
      box-shadow: inset 0 0 0 1px rgba(216, 166, 74, .28);
    }

    .score-quality strong {
      color: var(--gold);
      font-size: 20px;
      line-height: 1;
    }

    .score-quality span,
    .score-quality em {
      color: var(--muted);
      font-size: 10px;
      font-style: normal;
      font-weight: 900;
    }

    .center-verdict {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 10px;
      padding: 0 14px 12px;
      border-bottom: 1px solid rgba(216, 166, 74, .24);
    }

    .verdict-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
      padding: 12px;
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 8px;
      background:
        radial-gradient(circle at 18% 10%, rgba(216, 166, 74, .075), transparent 34%),
        rgba(0, 0, 0, .18);
    }

    .verdict-line div {
      min-width: 0;
    }

    .verdict-line span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .verdict-line strong {
      display: block;
      margin-top: 5px;
      color: var(--text);
      font-size: clamp(18px, 1.6vw, 25px);
      line-height: 1.16;
      overflow-wrap: anywhere;
    }

    .verdict-line em {
      flex: 0 0 auto;
      color: #0d120e;
      background: var(--gold);
      border-radius: 999px;
      padding: 6px 9px;
      font-size: 11px;
      font-style: normal;
      font-weight: 950;
      white-space: nowrap;
    }

    .verdict-probabilities {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .verdict-probabilities div {
      min-width: 0;
      padding: 9px;
      border: 1px solid rgba(216, 166, 74, .2);
      border-radius: 2px;
      background: rgba(0, 0, 0, .18);
    }

    .verdict-probabilities strong {
      display: block;
      color: var(--text);
      font-size: 17px;
      line-height: 1;
    }

    .verdict-probabilities span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }

    .scoreline-strip {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(216, 166, 74, .22);
    }

    .scoreline-card {
      min-width: 0;
      border: 1px solid rgba(216, 166, 74, .24);
      border-radius: 2px;
      background: rgba(0, 0, 0, .22);
      padding: 10px;
    }

    .scoreline-card:first-child {
      border-color: rgba(216, 166, 74, .48);
      background:
        radial-gradient(circle at 20% 10%, rgba(216, 166, 74, .16), transparent 38%),
        rgba(0, 0, 0, .28);
    }

    .scoreline-card strong {
      display: block;
      color: var(--text);
      font-size: 20px;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .scoreline-card:first-child strong {
      color: var(--gold);
      font-family: Georgia, "Times New Roman", "Microsoft YaHei", serif;
      font-size: clamp(28px, 3vw, 42px);
      line-height: .95;
    }

    .scoreline-card span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }

    .center-section-title {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      padding: 13px 14px 0;
      color: var(--gold);
      font-size: 12px;
      font-weight: 950;
    }

    .center-section-title span:last-child {
      color: var(--muted);
      font-weight: 850;
    }

    .score-kpis,
    .center-data-grid,
    .mini-counts {
      display: grid;
      gap: 8px;
      padding: 14px;
      position: relative;
      z-index: 1;
      border-bottom: 1px solid rgba(216, 166, 74, .24);
    }

    .score-kpis {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .score-kpis div,
    .mini-counts div,
    .data-block {
      min-width: 0;
      border: 1px solid rgba(216, 166, 74, .26);
      border-radius: 2px;
      background:
        linear-gradient(180deg, rgba(216, 166, 74, .045), transparent),
        rgba(0, 0, 0, .28);
      padding: 10px;
    }

    .score-kpis strong,
    .mini-counts strong {
      display: block;
      color: var(--text);
      font-size: 18px;
      line-height: 1;
    }

    .score-kpis span,
    .mini-counts span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }

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

    .result-stack.compact {
      margin-top: 10px;
    }

    .metric-board {
      padding: 14px;
    }

    .blueprint-metric {
      margin-top: 12px;
    }

    .detail-tabs {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      max-height: min(760px, calc(100vh - 150px));
      overflow: hidden;
    }

    .detail-tabs > input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .tab-labels {
      justify-content: flex-start;
      padding: 8px;
      gap: 6px;
    }

    .tab-labels label {
      flex: 1;
      display: grid;
      place-items: center;
      min-height: 34px;
      border-radius: 2px;
      cursor: pointer;
      padding: 0 6px;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .detail-tabs input:nth-of-type(1):checked ~ .tab-labels label:nth-child(1),
    .detail-tabs input:nth-of-type(2):checked ~ .tab-labels label:nth-child(2),
    .detail-tabs input:nth-of-type(3):checked ~ .tab-labels label:nth-child(3),
    .detail-tabs input:nth-of-type(4):checked ~ .tab-labels label:nth-child(4) {
      border: 1px solid rgba(127, 199, 255, .58);
      background: rgba(127, 199, 255, .15);
      color: #c9ecff;
      box-shadow: inset 0 0 18px rgba(127, 199, 255, .13);
    }

    .tab-panels {
      min-height: 0;
      position: relative;
      z-index: 1;
      padding: 14px;
      overflow: auto;
      overscroll-behavior: contain;
    }

    .tab-panel { display: none; }
    .detail-tabs input:nth-of-type(1):checked ~ .tab-panels .tab-panel:nth-child(1),
    .detail-tabs input:nth-of-type(2):checked ~ .tab-panels .tab-panel:nth-child(2),
    .detail-tabs input:nth-of-type(3):checked ~ .tab-panels .tab-panel:nth-child(3),
    .detail-tabs input:nth-of-type(4):checked ~ .tab-panels .tab-panel:nth-child(4) {
      display: grid;
      gap: 12px;
      align-content: start;
    }

    .tab-brief {
      display: grid;
      gap: 7px;
      padding: 12px;
      border: 1px solid rgba(127, 199, 255, .26);
      border-radius: 2px;
      background:
        linear-gradient(135deg, rgba(127, 199, 255, .11), rgba(216, 166, 74, .05)),
        rgba(0, 0, 0, .25);
    }

    .tab-brief span {
      color: #c9ecff;
      font-size: 11px;
      font-weight: 950;
    }

    .tab-brief h3 {
      margin: 0;
      color: var(--text);
      font-family: Georgia, "Times New Roman", "Microsoft YaHei", serif;
      font-size: 20px;
      line-height: 1.15;
      letter-spacing: 0;
    }

    .tab-brief p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

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

    .highlight-card {
      min-width: 0;
      padding: 10px;
      border: 1px solid rgba(216, 166, 74, .24);
      border-radius: 2px;
      background: rgba(0, 0, 0, .22);
    }

    .highlight-card strong {
      display: block;
      color: var(--text);
      font-size: 14px;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .highlight-card span {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }

    .simulation-article {
      display: grid;
      gap: 12px;
    }

    .simulation-article section {
      min-width: 0;
      padding: 12px;
      border: 1px solid rgba(216, 166, 74, .22);
      border-radius: 2px;
      background: rgba(0, 0, 0, .22);
    }

    .simulation-article h3 {
      margin: 0;
      color: var(--gold);
      font-size: 14px;
      line-height: 1.25;
    }

    .simulation-article p {
      margin: 8px 0 0;
      color: var(--text);
      font-size: 13px;
      line-height: 1.72;
    }

    .simulation-article ul {
      display: grid;
      gap: 7px;
      margin: 9px 0 0;
      padding: 0;
      list-style: none;
    }

    .simulation-article li {
      position: relative;
      padding-left: 16px;
      color: var(--soft);
      font-size: 12px;
      line-height: 1.55;
    }

    .simulation-article li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .7em;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--gold);
    }

    .detail-fold {
      border: 1px solid rgba(216, 166, 74, .2);
      border-radius: 2px;
      background: rgba(0, 0, 0, .18);
      overflow: hidden;
    }

    .detail-fold > summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 38px;
      padding: 0 11px;
      cursor: pointer;
      color: var(--gold);
      font-size: 12px;
      font-weight: 950;
      list-style: none;
    }

    .detail-fold > summary::-webkit-details-marker {
      display: none;
    }

    .detail-fold > summary::after {
      content: "+";
      color: var(--muted);
      font-size: 15px;
      font-weight: 900;
    }

    .detail-fold[open] > summary {
      border-bottom: 1px solid rgba(216, 166, 74, .18);
    }

    .detail-fold[open] > summary::after {
      content: "-";
    }

    .detail-fold-body {
      display: grid;
      gap: 10px;
      padding: 10px;
    }

    .mini-counts {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      padding: 0;
      border-bottom: 0;
    }

    .compact-timeline {
      max-height: 320px;
      overflow: auto;
    }

    .official-readout {
      display: grid;
      gap: 10px;
    }

    .official-status {
      display: grid;
      gap: 7px;
      padding: 11px;
      border: 1px solid rgba(127, 199, 255, .24);
      border-radius: 2px;
      background: rgba(127, 199, 255, .07);
    }

    .official-status strong {
      color: var(--text);
      font-size: 13px;
      line-height: 1.25;
    }

    .official-status span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

    .official-preview-list {
      display: grid;
      gap: 8px;
    }

    .official-preview-list .metric {
      margin-top: 0;
    }

    .official-event-preview {
      display: grid;
      gap: 7px;
      padding: 10px;
      border: 1px solid rgba(216, 166, 74, .2);
      border-radius: 2px;
      background: rgba(0, 0, 0, .18);
    }

    .official-event-preview strong {
      color: var(--text);
      font-size: 12px;
    }

    .official-event-preview span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .official-fact-card {
      display: grid;
      gap: 6px;
      padding: 10px;
      border: 1px solid rgba(216, 166, 74, .22);
      border-radius: 2px;
      background: rgba(0, 0, 0, .2);
    }

    .official-fact-card strong {
      color: var(--text);
      font-size: 13px;
      line-height: 1.25;
    }

    .official-fact-card span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

    .player-cards {
      margin-top: 2px;
    }

    .small-empty {
      padding: 10px;
      font-size: 12px;
    }

    .blueprint-gaps {
      margin-top: 2px;
    }

    .market-floor {
      position: relative;
      z-index: 2;
      padding: 14px;
    }

    .market-floor .blueprint-card-head {
      padding: 0 0 12px;
      margin-bottom: 14px;
      border-bottom: 1px solid var(--line-soft);
    }

    .matchup-hero {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid rgba(216, 166, 74, .24);
    }

    .center-score-strip,
    .center-focus-grid {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 8px;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(216, 166, 74, .22);
    }

    .center-score-strip {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .center-score-strip .primary-score {
      border-color: rgba(216, 166, 74, .45);
      background:
        radial-gradient(circle at 20% 10%, rgba(216, 166, 74, .16), transparent 38%),
        rgba(0, 0, 0, .28);
    }

    .center-score-strip .primary-score strong {
      color: var(--gold);
      font-family: Georgia, "Times New Roman", "Microsoft YaHei", serif;
      font-size: clamp(28px, 3vw, 44px);
      line-height: .95;
    }

    .center-focus-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .center-score-strip div,
    .center-focus-grid div {
      min-width: 0;
      border: 1px solid rgba(216, 166, 74, .24);
      border-radius: 2px;
      background: rgba(0, 0, 0, .22);
      padding: 10px;
    }

    .center-score-strip strong,
    .center-focus-grid strong {
      display: block;
      color: var(--text);
      font-size: 16px;
      line-height: 1.1;
      overflow-wrap: anywhere;
      font-variant-numeric: tabular-nums;
    }

    .center-focus-grid strong {
      font-size: 15px;
      line-height: 1.25;
    }

    .center-focus-grid em {
      display: block;
      margin-top: 7px;
      color: var(--soft);
      font-size: 12px;
      line-height: 1.48;
      font-style: normal;
      overflow-wrap: anywhere;
    }

    .center-score-strip span,
    .center-focus-grid span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }

    .center-lead {
      position: relative;
      z-index: 1;
      padding: 12px 14px 14px;
    }

    .center-lead p {
      display: -webkit-box;
      margin: 0;
      color: #d9c9a7;
      font-size: 13px;
      line-height: 1.55;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .center-reason-list {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 8px;
      padding: 0 14px 14px;
    }

    .center-reason {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 8px;
      align-items: start;
      padding: 9px 10px;
      border: 1px solid rgba(216, 166, 74, .2);
      border-radius: 2px;
      background: rgba(0, 0, 0, .18);
      color: var(--soft);
      font-size: 12px;
      line-height: 1.45;
    }

    .center-reason strong {
      color: var(--gold);
      font-size: 11px;
      font-weight: 950;
      white-space: nowrap;
    }

    .center-risk-note {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 6px;
      margin: 0 14px 14px;
      padding: 10px;
      border: 1px solid rgba(127, 199, 255, .2);
      border-radius: 2px;
      background: rgba(127, 199, 255, .055);
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .center-risk-note strong {
      color: #c9ecff;
      font-size: 11px;
      font-weight: 950;
    }

    .matchup-team {
      min-width: 0;
      display: grid;
      justify-items: center;
      gap: 8px;
      text-align: center;
    }

    .matchup-badge {
      display: grid;
      place-items: center;
      width: 82px;
      height: 82px;
      border: 1px solid rgba(216, 166, 74, .48);
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 38%, rgba(255, 238, 190, .16), transparent 34%),
        rgba(0, 0, 0, .34);
      box-shadow: 0 18px 34px rgba(0, 0, 0, .3), inset 0 0 0 5px rgba(216, 166, 74, .06);
      font-size: 38px;
      line-height: 1;
    }

    .matchup-team strong {
      max-width: 100%;
      color: var(--text);
      font-family: Georgia, "Times New Roman", "Microsoft YaHei", serif;
      font-size: 18px;
      line-height: 1.1;
      overflow-wrap: anywhere;
    }

    .matchup-team span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .matchup-score {
      min-width: 112px;
      display: grid;
      justify-items: center;
      gap: 6px;
    }

    .matchup-score strong {
      color: var(--gold);
      font-family: Georgia, "Times New Roman", "Microsoft YaHei", serif;
      font-size: clamp(36px, 3.4vw, 54px);
      line-height: .95;
      font-variant-numeric: tabular-nums;
      text-shadow: 0 0 26px rgba(216, 166, 74, .2);
    }

    .matchup-score em,
    .matchup-score span {
      color: var(--muted);
      font-size: 11px;
      font-style: normal;
      font-weight: 900;
    }

    .matchup-summary,
    .matchup-meta-grid,
    .matchup-signal-grid,
    .matchup-candidates,
    .detail-fact-grid,
    .detail-card-grid,
    .basis-stack {
      position: relative;
      z-index: 1;
    }

    .matchup-summary p {
      margin: 0;
      color: #d9c9a7;
      font-size: 13px;
      line-height: 1.6;
    }

    .matchup-meta-grid,
    .matchup-signal-grid,
    .detail-fact-grid,
    .detail-card-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .matchup-meta-grid div,
    .matchup-signal-grid article,
    .score-chip,
    .detail-fact,
    .detail-card {
      min-width: 0;
      border: 1px solid rgba(216, 166, 74, .24);
      border-radius: 2px;
      background: rgba(0, 0, 0, .24);
      padding: 10px;
    }

    .matchup-meta-grid strong,
    .matchup-signal-grid strong,
    .score-chip strong,
    .detail-fact strong,
    .detail-card strong {
      display: block;
      color: var(--text);
      font-size: 13px;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .matchup-meta-grid span,
    .matchup-signal-grid span,
    .score-chip span,
    .detail-fact span,
    .detail-card span {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }

    .matchup-signal-grid p,
    .detail-card p {
      margin: 7px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .detail-card-grid.single {
      grid-template-columns: 1fr;
    }

    .detail-note-list {
      display: grid;
      gap: 8px;
    }

    .detail-note {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 9px;
      align-items: start;
      padding: 10px;
      border: 1px solid rgba(127, 199, 255, .2);
      border-radius: 2px;
      background: rgba(127, 199, 255, .055);
      color: var(--soft);
      font-size: 12px;
      line-height: 1.55;
    }

    .detail-note strong {
      color: #c9ecff;
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap;
    }

    .basis-stack {
      display: grid;
      gap: 8px;
    }

    .matchup-candidates {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .score-chip {
      flex: 1 1 95px;
      text-align: center;
    }

    .market-grid {
      display: grid;
      gap: 12px;
      align-items: start;
    }

    .match-feed {
      margin-top: 14px;
    }

    .feed-intro {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin: -4px 0 14px;
      padding: 12px 14px;
      border: 1px solid rgba(216, 166, 74, .22);
      border-radius: 4px;
      background: rgba(216, 166, 74, .055);
    }

    .feed-intro strong {
      color: var(--text);
      font-size: 13px;
      line-height: 1.35;
      white-space: nowrap;
    }

    .feed-intro span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
      text-align: right;
    }

    .match-feed .market-groups {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .feed-card {
      padding: 0;
      overflow: hidden;
    }

    .feed-card > summary {
      min-height: 72px;
      padding: 14px;
      cursor: pointer;
      background: rgba(0, 0, 0, .18);
    }

    .feed-card[open] > summary {
      border-bottom: 1px solid rgba(216, 166, 74, .18);
    }

    .feed-lazy-placeholder {
      margin: 10px;
      padding: 12px;
      border: 1px dashed rgba(216, 166, 74, .22);
      border-radius: 4px;
      background: rgba(216, 166, 74, .045);
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

    .simulation-feed-card > summary {
      background:
        linear-gradient(90deg, rgba(216, 166, 74, .12), transparent),
        rgba(0, 0, 0, .22);
    }

    .simulation-feed-card .simulation-panel {
      padding: 14px;
    }

    .match-feed .simulation-article {
      gap: 10px;
    }

    .match-feed .simulation-article section {
      padding: 14px;
      border-radius: 4px;
      background: rgba(255, 255, 255, .026);
    }

    .match-feed .simulation-article p,
    .match-feed .simulation-article li {
      font-size: 13px;
      line-height: 1.72;
    }

    .market-value-board {
      display: grid;
      gap: 10px;
    }

    .consensus-board,
    .algorithm-panel,
    .quality-panel,
    .odds-trend-cards {
      display: grid;
      gap: 10px;
    }

    .consensus-board {
      padding: 10px;
      border: 1px solid rgba(127, 199, 255, .22);
      border-radius: 4px;
      background:
        linear-gradient(135deg, rgba(127, 199, 255, .08), rgba(216, 166, 74, .04)),
        rgba(0, 0, 0, .2);
    }

    .consensus-board.is-conflict {
      border-color: rgba(255, 176, 169, .34);
      background:
        linear-gradient(135deg, rgba(255, 176, 169, .09), rgba(127, 199, 255, .04)),
        rgba(0, 0, 0, .24);
    }

    .risk-alert {
      display: grid;
      gap: 5px;
      min-width: 0;
      padding: 9px 10px;
      border: 1px solid rgba(255, 176, 169, .34);
      border-radius: 4px;
      background: rgba(255, 176, 169, .075);
    }

    .risk-alert strong {
      color: #ffb0a9;
      font-size: 12px;
      line-height: 1.25;
    }

    .risk-alert span {
      color: var(--soft);
      font-size: 12px;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }

    .consensus-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

    .consensus-head div {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .consensus-head span,
    .consensus-head em {
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      font-style: normal;
    }

    .consensus-head strong {
      color: var(--text);
      font-size: 15px;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .consensus-head em {
      flex: 0 0 auto;
      padding: 5px 8px;
      border: 1px solid rgba(255, 176, 169, .3);
      border-radius: 999px;
      color: #ffb0a9;
      background: rgba(255, 176, 169, .08);
    }

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

    .consensus-columns article {
      min-width: 0;
      display: grid;
      gap: 8px;
      padding: 9px;
      border: 1px solid rgba(216, 166, 74, .18);
      border-radius: 3px;
      background: rgba(0, 0, 0, .2);
    }

    .consensus-columns article > span,
    .consensus-columns article p {
      margin: 0;
      color: var(--muted);
      font-size: 10.5px;
      line-height: 1.35;
    }

    .consensus-columns article > strong {
      color: var(--soft);
      font-size: 13px;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .probability-mini-list {
      display: grid;
      gap: 6px;
    }

    .probability-mini-row {
      position: relative;
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      padding: 7px 8px;
      overflow: hidden;
      border: 1px solid rgba(127, 199, 255, .14);
      border-radius: 3px;
      background: rgba(255, 255, 255, .025);
    }

    .probability-mini-row div,
    .probability-mini-row em {
      position: relative;
      z-index: 1;
    }

    .probability-mini-row strong,
    .probability-mini-row span {
      display: block;
      overflow-wrap: anywhere;
    }

    .probability-mini-row strong {
      color: var(--text);
      font-size: 11.5px;
      line-height: 1.2;
    }

    .probability-mini-row span {
      margin-top: 3px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.2;
    }

    .probability-mini-row em {
      color: #c9ecff;
      font-size: 11px;
      font-weight: 950;
      font-style: normal;
    }

    .probability-mini-row i {
      position: absolute;
      inset: 0 auto 0 0;
      width: 0;
      max-width: 100%;
      background: linear-gradient(90deg, rgba(127, 199, 255, .18), rgba(216, 166, 74, .08));
    }

    .weight-strip {
      display: grid;
      grid-template-columns: minmax(62px, .55fr) minmax(90px, 1fr) minmax(62px, .55fr);
      gap: 8px;
      align-items: center;
      padding: 8px;
      border: 1px solid rgba(127, 199, 255, .14);
      border-radius: 3px;
      background: rgba(0, 0, 0, .17);
    }

    .weight-strip div:not(.weight-bar) {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .weight-strip span {
      color: var(--muted);
      font-size: 10px;
      font-weight: 850;
    }

    .weight-strip strong {
      color: var(--text);
      font-size: 12px;
    }

    .weight-strip div:last-child {
      text-align: right;
    }

    .weight-bar {
      position: relative;
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 255, 255, .08);
    }

    .weight-bar i,
    .weight-bar b {
      position: absolute;
      top: 0;
      bottom: 0;
    }

    .weight-bar i {
      left: 0;
      width: var(--model, 0%);
      background: #7fc7ff;
    }

    .weight-bar b {
      right: 0;
      width: var(--market, 0%);
      background: #d8a64a;
    }

    .brief-tags .is-risk {
      border-color: rgba(255, 176, 169, .36);
      color: #ffb0a9;
      background: rgba(255, 176, 169, .08);
    }

    .odds-trend-card {
      display: grid;
      grid-template-columns: minmax(76px, .7fr) minmax(100px, 1fr) auto;
      gap: 8px;
      align-items: center;
      min-width: 0;
      padding: 8px 9px;
      border: 1px solid rgba(216, 166, 74, .16);
      border-radius: 3px;
      background: rgba(0, 0, 0, .18);
    }

    .odds-trend-card strong,
    .odds-trend-card span,
    .odds-trend-card em {
      overflow-wrap: anywhere;
    }

    .odds-trend-card strong {
      color: var(--text);
      font-size: 12px;
    }

    .odds-trend-card span {
      color: var(--soft);
      font-size: 12px;
      font-weight: 850;
    }

    .odds-trend-card em {
      color: var(--muted);
      font-size: 10.5px;
      font-style: normal;
      text-align: right;
    }

    .odds-series-board {
      display: grid;
      gap: 8px;
      min-width: 0;
      padding: 10px;
      border: 1px solid rgba(127, 199, 255, .16);
      border-radius: 4px;
      background: rgba(0, 0, 0, .16);
    }

    .odds-series-head,
    .odds-series-row {
      min-width: 0;
    }

    .odds-series-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .odds-series-head strong {
      color: var(--text);
      font-size: 12px;
      line-height: 1.25;
    }

    .odds-series-head span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      text-align: right;
      overflow-wrap: anywhere;
    }

    .odds-series-rows {
      display: grid;
      gap: 7px;
    }

    .odds-series-row {
      display: grid;
      grid-template-columns: minmax(64px, .6fr) minmax(92px, .7fr) minmax(130px, 1fr);
      gap: 8px;
      align-items: center;
      padding: 7px 8px;
      border: 1px solid rgba(216, 166, 74, .12);
      border-radius: 3px;
      background: rgba(255, 255, 255, .025);
    }

    .odds-series-row strong,
    .odds-series-row span {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .odds-series-row strong {
      color: var(--soft);
      font-size: 11.5px;
    }

    .odds-series-row span,
    .odds-series-empty {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    .odds-mini-line {
      width: 100%;
      height: 42px;
      display: block;
      overflow: visible;
    }

    .odds-mini-line polyline {
      fill: none;
      stroke: var(--odds-line, #d8a64a);
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .odds-mini-line circle {
      fill: var(--odds-line, #d8a64a);
      stroke: rgba(0, 0, 0, .55);
      stroke-width: 1;
    }

    .odds-trend-cards.is-missing {
      padding: 10px;
      border: 1px dashed rgba(216, 166, 74, .24);
      border-radius: 4px;
      background: rgba(216, 166, 74, .035);
    }

    .trend-missing-note {
      display: grid;
      gap: 5px;
      padding: 10px;
      border: 1px solid rgba(127, 199, 255, .14);
      border-radius: 3px;
      background: rgba(0, 0, 0, .18);
    }

    .trend-missing-note strong {
      color: var(--text);
      font-size: 13px;
      line-height: 1.35;
    }

    .trend-missing-note span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

    .bookmaker-fold {
      min-width: 0;
      border: 1px solid rgba(127, 199, 255, .14);
      border-radius: 4px;
      background: rgba(0, 0, 0, .16);
    }

    .bookmaker-fold summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 9px 10px;
      color: var(--soft);
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
      overflow-wrap: anywhere;
    }

    .bookmaker-fold summary span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    .bookmaker-list {
      display: grid;
      gap: 6px;
      padding: 0 10px 10px;
    }

    .bookmaker-row {
      display: grid;
      grid-template-columns: minmax(90px, 1.1fr) repeat(3, minmax(64px, .8fr)) minmax(92px, 1fr);
      gap: 7px;
      align-items: center;
      min-width: 0;
      padding: 8px;
      border: 1px solid rgba(216, 166, 74, .13);
      border-radius: 3px;
      background: rgba(255, 255, 255, .025);
      font-size: 11px;
      line-height: 1.35;
    }

    .bookmaker-row strong,
    .bookmaker-row span,
    .bookmaker-row em,
    .bookmaker-row small {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .bookmaker-row strong {
      color: var(--text);
      font-size: 11.5px;
    }

    .bookmaker-row span,
    .bookmaker-row em,
    .bookmaker-row small {
      color: var(--muted);
      font-style: normal;
    }

    .predict-panel .market-value-board {
      gap: 8px;
    }

    .value-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px;
      border: 1px solid rgba(216, 166, 74, .28);
      border-radius: 4px;
      background: rgba(216, 166, 74, .06);
    }

    .value-summary strong {
      color: var(--text);
      font-size: 15px;
      line-height: 1.25;
    }

    .value-summary span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .value-table {
      display: grid;
      gap: 6px;
    }

    .value-row {
      display: grid;
      grid-template-columns: minmax(90px, 1.2fr) repeat(2, minmax(70px, 1fr));
      gap: 8px;
      align-items: center;
      padding: 9px 10px;
      border: 1px solid rgba(216, 166, 74, .18);
      border-radius: 3px;
      background: rgba(0, 0, 0, .2);
      font-size: 12px;
      line-height: 1.35;
    }

    .value-table.has-profit .value-row {
      grid-template-columns: minmax(90px, 1.2fr) repeat(3, minmax(70px, 1fr));
    }

    .value-table.has-profit.has-expected .value-row,
    .value-table.has-expected:not(.has-profit) .value-row {
      grid-template-columns: minmax(90px, 1.2fr) repeat(4, minmax(70px, 1fr));
    }

    .value-row.head {
      color: var(--muted);
      background: transparent;
      font-size: 11px;
      font-weight: 900;
    }

    .value-row strong {
      color: var(--text);
      font-size: 13px;
    }

    .value-row .positive {
      color: #9fe7c8;
      font-weight: 900;
    }

    .value-row .negative {
      color: var(--danger);
      font-weight: 900;
    }

    .predict-panel .value-summary {
      padding: 10px;
    }

    .predict-panel .value-summary strong {
      font-size: 14px;
    }

    .predict-panel .value-row {
      grid-template-columns: minmax(72px, 1.05fr) repeat(2, minmax(42px, .72fr));
      gap: 5px;
      padding: 8px 7px;
      font-size: 10.5px;
      overflow-wrap: anywhere;
    }

    .predict-panel .value-table.has-profit .value-row {
      grid-template-columns: minmax(72px, 1.05fr) repeat(3, minmax(42px, .72fr));
    }

    .predict-panel .value-table.has-profit.has-expected .value-row,
    .predict-panel .value-table.has-expected:not(.has-profit) .value-row {
      grid-template-columns: minmax(72px, 1.05fr) repeat(4, minmax(42px, .72fr));
    }

    .predict-panel .value-row strong {
      font-size: 11.5px;
    }

    .predict-panel .stage-track {
      grid-template-columns: 1fr;
    }

    .xg-compare {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .xg-compare div,
    .quality-summary-card,
    .quality-stat-grid div,
    .recommendation-card {
      min-width: 0;
      padding: 10px;
      border: 1px solid rgba(127, 199, 255, .16);
      border-radius: 3px;
      background: rgba(0, 0, 0, .2);
    }

    .xg-compare span,
    .xg-compare em,
    .recommendation-grid span,
    .recommendation-grid em,
    .quality-stat-grid span {
      display: block;
      color: var(--muted);
      font-size: 10.5px;
      line-height: 1.3;
      font-style: normal;
      overflow-wrap: anywhere;
    }

    .xg-compare strong {
      display: block;
      margin: 4px 0;
      color: var(--text);
      font-size: 24px;
      line-height: 1;
      font-family: Georgia, "Times New Roman", "Microsoft YaHei", serif;
    }

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

    .recommendation-card {
      display: grid;
      gap: 7px;
    }

    .recommendation-card.is-risk {
      border-color: rgba(255, 176, 169, .34);
      background: rgba(255, 176, 169, .06);
    }

    .recommendation-grid strong {
      color: var(--text);
      font-size: 13px;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .recommendation-card.is-risk strong {
      color: #ffb0a9;
    }

    .recommendation-note {
      margin: 0;
      color: #d9e6ec;
      font-size: 11px;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .recommendation-meta,
    .recommendation-probs,
    .recommendation-risks {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      min-width: 0;
    }

    .recommendation-meta em,
    .recommendation-probs span,
    .recommendation-risks b {
      display: inline-flex;
      align-items: center;
      min-width: 0;
      max-width: 100%;
      min-height: 22px;
      padding: 3px 6px;
      border: 1px solid rgba(216, 166, 74, .14);
      border-radius: 999px;
      background: rgba(216, 166, 74, .045);
      color: var(--muted);
      font-size: 10.5px;
      line-height: 1.25;
      font-weight: 850;
      overflow-wrap: anywhere;
    }

    .recommendation-probs span {
      border-color: rgba(127, 199, 255, .14);
      background: rgba(127, 199, 255, .055);
      color: #c9ecff;
    }

    .recommendation-risks b {
      border-color: rgba(255, 176, 169, .28);
      background: rgba(255, 176, 169, .075);
      color: #ffb0a9;
    }

    .quality-summary-card {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      border-color: rgba(216, 166, 74, .22);
    }

    .quality-summary-card > div:last-child {
      display: grid;
      gap: 5px;
      min-width: 0;
    }

    .quality-summary-card strong {
      color: var(--text);
      font-size: 14px;
      line-height: 1.25;
    }

    .quality-summary-card span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .quality-stat-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .quality-stat-grid div {
      text-align: center;
    }

    .quality-stat-grid strong {
      display: block;
      color: var(--text);
      font-size: 18px;
      line-height: 1;
      font-family: Georgia, "Times New Roman", "Microsoft YaHei", serif;
    }

    .quality-stat-grid span {
      margin-top: 5px;
    }

    .quality-warning {
      padding: 9px 10px;
      border: 1px solid rgba(255, 176, 169, .28);
      border-radius: 3px;
      color: #ffb0a9;
      background: rgba(255, 176, 169, .08);
      font-size: 12px;
      line-height: 1.45;
    }

    .stage-track {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .stage-card {
      min-width: 0;
      padding: 10px;
      border: 1px solid rgba(216, 166, 74, .2);
      border-radius: 3px;
      background: rgba(0, 0, 0, .18);
    }

    .stage-card strong,
    .stage-card span,
    .stage-card em {
      display: block;
      overflow-wrap: anywhere;
    }

    .stage-card strong {
      color: var(--text);
      font-size: 13px;
    }

    .stage-card span {
      margin-top: 6px;
      color: var(--soft);
      font-size: 12px;
      line-height: 1.45;
    }

    .stage-card em {
      margin-top: 5px;
      color: var(--muted);
      font-size: 11px;
      font-style: normal;
      line-height: 1.4;
    }

    .stage-trend-board {
      display: grid;
      gap: 10px;
      padding: 10px;
      border: 1px solid rgba(127, 199, 255, .2);
      border-radius: 3px;
      background:
        linear-gradient(135deg, rgba(127, 199, 255, .08), rgba(216, 166, 74, .04)),
        rgba(0, 0, 0, .2);
    }

    .trend-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 10px;
    }

    .trend-head strong {
      color: var(--text);
      font-size: 13px;
      line-height: 1.2;
    }

    .trend-head span {
      color: var(--muted);
      font-size: 10.5px;
      line-height: 1.35;
      text-align: right;
    }

    .trend-axis {
      display: grid;
      grid-template-columns: repeat(var(--count, 3), minmax(0, 1fr));
      gap: 4px;
      color: rgba(235, 230, 210, .62);
      font-size: 10px;
      font-weight: 850;
    }

    .trend-axis span {
      min-width: 0;
      text-align: center;
      overflow-wrap: anywhere;
    }

    .trend-rows {
      display: grid;
      gap: 7px;
    }

    .trend-row {
      display: grid;
      grid-template-columns: minmax(72px, .72fr) minmax(116px, 1fr) minmax(66px, .52fr);
      gap: 8px;
      align-items: center;
      min-width: 0;
      padding: 8px;
      border: 1px solid rgba(216, 166, 74, .16);
      border-radius: 3px;
      background: rgba(0, 0, 0, .22);
    }

    .trend-name {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .trend-name strong {
      color: var(--soft);
      font-size: 11.5px;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .trend-name span {
      color: var(--muted);
      font-size: 9.5px;
      line-height: 1.2;
    }

    .trend-sparkline {
      min-width: 0;
      height: 42px;
      border-radius: 3px;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
      background-size: 50% 100%, 100% 50%;
      border: 1px solid rgba(127, 199, 255, .12);
    }

    .trend-sparkline svg {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .trend-line {
      fill: none;
      stroke: var(--trend-color, #7fc7ff);
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 5px rgba(127, 199, 255, .2));
    }

    .trend-point {
      fill: #06100e;
      stroke: var(--trend-color, #7fc7ff);
      stroke-width: 2;
    }

    .trend-current {
      display: grid;
      gap: 3px;
      justify-items: end;
      min-width: 0;
      text-align: right;
    }

    .trend-current strong {
      color: var(--text);
      font-size: 12px;
      line-height: 1.15;
      font-variant-numeric: tabular-nums;
    }

    .trend-current span {
      font-size: 10px;
      line-height: 1.15;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }

    .trend-current .up { color: #9fe7c8; }
    .trend-current .down { color: #ffb0a9; }
    .trend-current .flat { color: var(--muted); }

    .ring-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .confidence-ring {
      display: grid;
      place-items: center;
      align-content: center;
      min-height: 116px;
      border-radius: 50%;
      background:
        radial-gradient(circle at center, rgba(4, 9, 8, .97) 57%, transparent 59%),
        conic-gradient(var(--gold) calc(var(--value, 0) * 1%), rgba(127, 199, 255, .15) 0);
      text-align: center;
      border: 1px solid rgba(216, 166, 74, .2);
      box-shadow: inset 0 0 24px rgba(216, 166, 74, .08);
    }

    .confidence-ring strong {
      color: var(--text);
      font-size: 23px;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .confidence-ring span {
      margin-top: 5px;
      color: var(--gold);
      font-size: 11px;
      font-weight: 950;
    }

    .confidence-ring em {
      max-width: 78px;
      margin-top: 4px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.2;
      font-style: normal;
    }

    .blueprint-panel .pill {
      border-color: rgba(216, 166, 74, .38);
      border-radius: 2px;
      background: rgba(0, 0, 0, .32);
      color: #d9c9a7;
    }

    .blueprint-panel .pill.good {
      border-color: rgba(127, 199, 255, .48);
      background: rgba(127, 199, 255, .11);
      color: #c9ecff;
    }

    .score-title {
      display: grid;
      gap: 4px;
    }

    .score-title .teamline {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: end;
      gap: 10px;
      color: var(--gold);
      font-family: Georgia, "Times New Roman", "Microsoft YaHei", serif;
      font-size: clamp(18px, 1.7vw, 28px);
      line-height: 1.05;
      text-transform: uppercase;
    }

    .score-title .teamline span {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .score-title .teamline span:first-child {
      color: #bfe9ff;
      text-align: left;
    }

    .score-title .teamline span:last-child {
      color: #ffb0a9;
      text-align: right;
    }

    .score-title .vs {
      color: rgba(216, 166, 74, .7);
      font-size: 13px;
      font-weight: 900;
    }

    .score-title .scoreline-hero {
      display: block;
      color: var(--gold);
      font-family: Georgia, "Times New Roman", "Microsoft YaHei", serif;
      font-size: clamp(48px, 4.6vw, 74px);
      line-height: .92;
      font-variant-numeric: tabular-nums;
      text-align: center;
      text-shadow: 0 0 26px rgba(216, 166, 74, .22);
    }

    .score-title .scoreline-hero.pending {
      font-size: clamp(36px, 3.45vw, 56px);
      letter-spacing: .035em;
    }

    .score-title .candidate-row {
      display: flex;
      justify-content: center;
      gap: 7px;
      flex-wrap: wrap;
      margin-top: 4px;
    }

    .score-title .candidate-row span {
      border: 1px solid rgba(216, 166, 74, .28);
      border-radius: 2px;
      padding: 3px 7px;
      background: rgba(0, 0, 0, .22);
      color: #d9c9a7;
      font-size: 11px;
      font-weight: 900;
    }

    .blueprint-panel .tower-label {
      color: var(--gold);
      border-bottom-color: rgba(216, 166, 74, .24);
    }

    .blueprint-panel .result-bar {
      color: var(--soft);
    }

    .blueprint-panel .result-bar-track {
      border-radius: 0;
      background: rgba(216, 166, 74, .12);
    }

    .blueprint-panel .result-bar-track span {
      background: linear-gradient(90deg, #7fc7ff, var(--gold));
    }

    .blueprint-panel .result-bar:nth-child(3) .result-bar-track span {
      background: linear-gradient(90deg, var(--gold), #ff5b4f);
    }

    .blueprint-panel .phase-rail {
      gap: 8px;
    }

    .blueprint-panel .phase-rail-item {
      border-color: rgba(216, 166, 74, .24);
      border-radius: 2px;
      background: rgba(0, 0, 0, .22);
    }

    .blueprint-panel .simulation-brief {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }

    .blueprint-panel .simulation-brief article,
    .blueprint-panel .simulation-brief details {
      min-width: 0;
      padding: 10px;
      border: 1px solid rgba(216, 166, 74, .22);
      border-radius: 2px;
      background: rgba(0, 0, 0, .22);
    }

    .blueprint-panel .simulation-brief details {
      margin: 0;
    }

    .blueprint-panel .simulation-brief details[open] summary {
      margin-bottom: 8px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(216, 166, 74, .18);
    }

    .blueprint-panel .simulation-brief details > div {
      display: grid;
      gap: 8px;
    }

    .blueprint-panel .simulation-brief strong,
    .blueprint-panel .simulation-brief summary {
      color: var(--gold);
      font-size: 12px;
      font-weight: 900;
    }

    .blueprint-panel .simulation-brief p {
      margin: 6px 0 0;
      color: var(--text);
      font-size: 12px;
      line-height: 1.45;
    }

    .blueprint-panel .simulation-brief article p {
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .blueprint-panel .fact,
    .blueprint-panel .soft-card,
    .blueprint-panel .timeline-item,
    .blueprint-panel .sentiment-card,
    .blueprint-panel .market-group-card,
    .blueprint-panel .insight-item,
    .blueprint-panel .gap-item,
    .blueprint-panel .empty {
      border-color: rgba(216, 166, 74, .22);
      border-radius: 2px;
      background: rgba(0, 0, 0, .22);
    }

    .blueprint-panel .fact strong,
    .blueprint-panel .soft-card h3,
    .blueprint-panel .sentiment-card h3,
    .blueprint-panel .timeline-time {
      color: var(--gold);
    }

    .blueprint-panel .timeline {
      border-left-color: rgba(216, 166, 74, .34);
    }

    .blueprint-panel .timeline-item::before {
      background: var(--gold);
      box-shadow: 0 0 0 4px #06090a;
    }

    .blueprint-panel .sentiment-badge,
    .blueprint-panel .insight-index {
      background: rgba(216, 166, 74, .16);
      color: var(--gold);
      border: 1px solid rgba(216, 166, 74, .28);
    }

    .blueprint-panel .post {
      border-left-color: var(--gold);
      background: rgba(216, 166, 74, .055);
    }

    .blueprint-panel .home-fill {
      background: #7fc7ff;
    }

    .blueprint-panel .away-fill {
      background: #ff5b4f;
    }

    .blueprint-panel .splitbar div {
      border-radius: 0;
      background: rgba(216, 166, 74, .11);
    }

    .market-groups {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 10px;
    }

    .market-group-card {
      min-width: 0;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .024);
      padding: 12px;
    }

    .market-posts {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .market-group-card summary {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      color: inherit;
      list-style: none;
    }

    .market-group-card summary h3 {
      margin: 0;
      color: var(--text);
      font-size: 14px;
      line-height: 1.25;
    }

    .market-group-card summary p {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

    .market-group-card summary::-webkit-details-marker {
      display: none;
    }

    .market-plain-summary {
      display: grid;
      gap: 8px;
      margin-top: 10px;
      padding: 10px;
      border: 1px solid rgba(127, 199, 255, .18);
      border-radius: 2px;
      background: rgba(127, 199, 255, .055);
    }

    .market-plain-summary strong {
      color: #c9ecff;
      font-size: 12px;
      line-height: 1.25;
    }

    .market-plain-summary span {
      color: var(--soft);
      font-size: 12px;
      line-height: 1.55;
    }

    .market-raw-samples {
      margin-top: 10px;
      border: 1px solid rgba(216, 166, 74, .18);
      border-radius: 2px;
      background: rgba(0, 0, 0, .16);
      overflow: hidden;
    }

    .market-raw-samples > summary {
      min-height: 34px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      color: var(--gold);
      cursor: pointer;
      font-size: 12px;
      font-weight: 900;
      list-style: none;
    }

    .market-raw-samples > summary::-webkit-details-marker {
      display: none;
    }

    .insight-list {
      display: grid;
      gap: 10px;
      counter-reset: insight;
    }

    .insight-item {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      min-width: 0;
      padding: 11px;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .025);
    }

    .insight-index {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(214, 255, 107, .12);
      color: var(--lime);
      font-size: 12px;
      font-weight: 950;
    }

    .insight-item strong {
      display: block;
      margin-bottom: 5px;
      color: var(--text);
      font-size: 13px;
    }

    .insight-item p {
      margin: 0;
      color: var(--soft);
      font-size: 13px;
      line-height: 1.6;
    }

    .risk-item .insight-index {
      background: rgba(255, 200, 95, .14);
      color: var(--amber);
    }

    .gap-grid {
      display: grid;
      gap: 8px;
    }

    .gap-item {
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: 36px;
      padding: 8px 10px;
      border: 1px solid rgba(255, 200, 95, .22);
      border-radius: 6px;
      background: rgba(255, 200, 95, .055);
      color: var(--soft);
      font-size: 13px;
      line-height: 1.45;
    }

    .gap-dot {
      width: 8px;
      height: 8px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--amber);
    }

    .gap-item.ok-gap {
      border-color: rgba(119, 200, 255, .28);
      background: rgba(119, 200, 255, .07);
    }

    .gap-item.ok-gap .gap-dot {
      background: var(--green);
    }

    .gap-item.soft-gap {
      border-color: rgba(216, 166, 74, .18);
      background: rgba(216, 166, 74, .045);
      color: var(--muted);
    }

    .gap-item.critical-gap {
      border-color: rgba(255, 125, 125, .36);
      background: rgba(255, 125, 125, .075);
    }

    .gap-item.critical-gap .gap-dot {
      background: var(--danger);
    }

    .section-note {
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
    }

    .facts, .cards, .timeline, .sentiment {
      display: grid;
      gap: 10px;
    }

    .facts.two-col {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fact, .soft-card, .timeline-item, .sentiment-card {
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: rgba(0, 0, 0, .17);
      padding: 13px;
    }

    .fact {
      color: var(--soft);
      line-height: 1.72;
      font-size: 14px;
    }

    .fact strong {
      display: block;
      margin-bottom: 5px;
      color: var(--lime);
      font-size: 12px;
    }

    .soft-card h3, .sentiment-card h3 {
      margin: 0 0 8px;
      color: var(--lime);
      font-size: 13px;
    }

    .soft-card .tagline {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      margin-bottom: 8px;
      padding: 0 7px;
      border-radius: 999px;
      background: rgba(214, 255, 107, .1);
      color: var(--lime);
      font-size: 11px;
      font-weight: 900;
    }

    .soft-card p, .sentiment-card p {
      margin: 0;
      color: var(--soft);
      line-height: 1.7;
      font-size: 13px;
    }

    .metric {
      display: grid;
      gap: 7px;
      margin-bottom: 13px;
    }

    .metric:last-child { margin-bottom: 0; }

    .metric-row {
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr) 64px;
      align-items: center;
      gap: 10px;
      color: var(--soft);
      font-size: 12px;
      font-weight: 800;
    }

    .metric-row span:nth-child(2) {
      text-align: center;
      color: var(--muted);
      font-weight: 700;
    }

    .splitbar {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
      height: 8px;
    }

    .splitbar div {
      background: rgba(255, 255, 255, .08);
      overflow: hidden;
    }

    .splitbar div:first-child { border-radius: 999px 0 0 999px; }
    .splitbar div:last-child { border-radius: 0 999px 999px 0; }
    .home-fill, .away-fill { height: 100%; }
    .home-fill { float: right; background: var(--green); }
    .away-fill { background: var(--blue); }

    .timeline {
      position: relative;
      padding-left: 14px;
      border-left: 1px solid rgba(214, 255, 107, .22);
    }

    .sentiment-lead {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 10px;
      align-items: start;
    }

    .sentiment-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 32px;
      height: 32px;
      border-radius: 999px;
      background: var(--lime);
      color: #10150f;
      font-size: 12px;
      font-weight: 950;
    }

    .timeline-item {
      position: relative;
    }

    .timeline-item::before {
      content: "";
      position: absolute;
      left: -19px;
      top: 18px;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--lime);
      box-shadow: 0 0 0 4px var(--bg);
    }

    .timeline-time {
      color: var(--lime);
      font-size: 12px;
      font-weight: 900;
      margin-bottom: 5px;
    }

    .timeline-text {
      color: var(--soft);
      font-size: 13px;
      line-height: 1.62;
    }

    details {
      border-top: 1px solid var(--line-soft);
      margin-top: 10px;
      padding-top: 10px;
    }

    summary {
      color: var(--muted);
      cursor: pointer;
      font-size: 12px;
      font-weight: 800;
    }

    .post {
      margin-top: 8px;
      padding: 10px 11px;
      border-left: 2px solid var(--lime);
      background: rgba(255, 255, 255, .035);
      color: var(--soft);
      font-size: 12px;
      line-height: 1.55;
    }

    .empty {
      border: 1px dashed rgba(155, 181, 167, .3);
      border-radius: var(--radius);
      padding: 18px;
      color: var(--muted);
      background: rgba(255, 255, 255, .02);
      font-size: 13px;
      line-height: 1.65;
    }

    .load-state {
      min-height: 100vh;
      display: grid;
      place-items: center;
      color: var(--muted);
    }

    @media (max-width: 980px) {
      .app { grid-template-columns: 1fr; }
      .match-list {
        max-height: none;
      }
      .main { padding: 18px; }
      .match-center {
        grid-template-columns: 1fr;
        min-height: 0;
      }
      .blueprint-main {
        grid-template-columns: 1fr;
      }
      .pitch-board {
        grid-template-rows: auto 1fr;
      }
      .tactical-pitch {
        width: min(calc(100% - 28px), 340px);
        min-height: 0;
      }
      .score-top {
        grid-template-columns: minmax(0, 1fr);
        padding-right: 12px;
      }
      .score-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .decision-grid,
      .strategy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .market-grid {
        grid-template-columns: 1fr;
      }
      .consensus-columns,
      .recommendation-grid {
        grid-template-columns: 1fr;
      }
      .odds-trend-card {
        grid-template-columns: minmax(0, 1fr);
      }
      .odds-trend-card em {
        text-align: left;
      }
      .bookmaker-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      }
      .bookmaker-row strong {
        grid-column: 1 / -1;
      }
      .value-row {
        grid-template-columns: minmax(86px, 1fr) repeat(2, minmax(64px, .8fr)) !important;
      }
      .trend-row {
        grid-template-columns: minmax(72px, .62fr) minmax(108px, 1fr) minmax(58px, .45fr);
      }
      .stage-track {
        grid-template-columns: 1fr;
      }
      .broadcast-stage {
        grid-template-rows: auto auto auto;
      }
      .broadcast-field {
        min-height: 360px;
        grid-template-columns: minmax(0, 1fr) minmax(210px, .8fr) minmax(0, 1fr);
      }
      .control-tower {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .control-tower .tower-block:first-child {
        grid-column: 1 / -1;
      }
      .hero, .section-grid {
        grid-template-columns: 1fr;
      }
      .prediction-board {
        grid-template-columns: 1fr;
      }
      .prediction-side {
        display: grid;
        gap: 14px;
      }
      .visual-lab {
        grid-template-columns: 1fr;
      }
      .pitch {
        min-height: 220px;
      }
      .intel-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 560px) {
      .main {
        padding: 12px;
      }
      .brand, .controls { padding-left: 14px; padding-right: 14px; }
      .brand { padding-right: 58px; }
      .summary-strip { padding-left: 14px; padding-right: 14px; }
      .main-toolbar {
        margin-bottom: 10px;
      }
      .drawer-toggle {
        width: 100%;
        justify-content: flex-start;
      }
      .drawer-toggle-text strong {
        max-width: calc(100vw - 112px);
      }
      .match-center {
        gap: 10px;
        margin-bottom: 10px;
      }
      .blueprint-panel {
        padding: 8px;
      }
      .blueprint-header {
        align-items: flex-start;
      }
      .blueprint-card-head,
      .score-top {
        padding: 12px;
      }
      .pitch-board {
        grid-template-rows: auto 1fr;
      }
      .tactical-pitch {
        width: min(calc(100% - 20px), 310px);
        min-height: 0;
        margin: 10px;
      }
      .formation-side {
        left: 12px;
        right: 12px;
        height: 43%;
      }
      .formation-side.home { top: 14px; bottom: auto; }
      .formation-side.away { top: auto; bottom: 42px; }
      .formation-row span {
        width: 28px;
        height: 28px;
        font-size: 9px;
      }
      .pitch-line.circle {
        width: 78px;
        height: 78px;
      }
      .pitch-line.box {
        width: 42px;
        height: 104px;
      }
      .score-kpis,
      .center-data-grid,
      .metric-board,
      .tab-panels,
      .market-floor {
        padding: 10px;
      }
      .tab-labels {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .tab-labels label {
        min-height: 32px;
      }
      .center-score-strip,
      .center-focus-grid,
      .highlight-grid,
      .matchup-meta-grid,
      .matchup-signal-grid,
      .detail-fact-grid,
      .detail-card-grid {
        grid-template-columns: 1fr;
      }
      .score-top h2 strong {
        display: block;
        margin: 6px 0;
      }
      .score-quality {
        position: static;
        justify-self: start;
        margin-top: 10px;
        width: 70px;
        height: 70px;
      }
      .decision-hero,
      .strategy-summary {
        margin-left: 10px;
        margin-right: 10px;
      }
      .decision-action strong {
        font-size: clamp(22px, 8vw, 30px);
      }
      .decision-grid,
      .strategy-grid {
        grid-template-columns: 1fr;
      }
      .legacy-signal {
        grid-template-columns: 1fr;
      }
      .legacy-signal p {
        grid-column: auto;
      }
      .score-title .scoreline-hero,
      .score-title .scoreline-hero.pending {
        font-size: clamp(35px, 12vw, 48px);
      }
      .score-kpis,
      .mini-counts,
      .ring-row {
        grid-template-columns: 1fr;
      }
      .trend-row {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      .trend-current {
        justify-items: start;
        text-align: left;
      }
      .trend-head {
        align-items: start;
        flex-direction: column;
      }
      .trend-head span {
        text-align: left;
      }
      .confidence-ring {
        min-height: 104px;
        border-radius: 8px;
      }
      .market-groups {
        grid-template-columns: 1fr;
      }
      .broadcast-stage, .control-tower {
        padding: 14px;
      }
      .broadcast-topline,
      .broadcast-bottom {
        align-items: flex-start;
      }
      .broadcast-field {
        min-height: 0;
        padding: 12px;
        grid-template-columns: 1fr;
        gap: 14px;
      }
      .broadcast-field::after,
      .field-circle,
      .field-box,
      .field-arrow {
        display: none;
      }
      .field-readout {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        order: 4;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .field-heat.home {
        left: 28%;
        top: 28%;
      }
      .field-heat.away {
        right: 28%;
        top: 72%;
      }
      .center-score {
        min-height: 128px;
        padding: 14px;
        order: 2;
      }
      .match-side.home {
        order: 1;
      }
      .match-side.away {
        order: 3;
      }
      .broadcast-code {
        width: 58px;
        height: 58px;
        font-size: 18px;
        box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .14);
      }
      .broadcast-name {
        font-size: 28px;
        line-height: 1.05;
        overflow-wrap: anywhere;
      }
      .center-score strong {
        font-size: 44px;
      }
      .broadcast-lead {
        font-size: 17px;
      }
      .control-tower {
        grid-template-columns: 1fr;
      }
      .tower-kpis,
      .phase-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .score-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .hero-main, .hero-side, .section { padding: 14px; }
      .match-title { font-size: 30px; }
      .match-visual {
        min-height: 168px;
        gap: 8px;
        padding: 12px 14px 8px;
      }
      .team-crest {
        width: 58px;
        height: 58px;
        font-size: 18px;
        box-shadow: inset 0 0 0 6px rgba(0, 0, 0, .14);
      }
      .team-display-name {
        font-size: 24px;
      }
      .team-code-large {
        min-width: 46px;
        height: 22px;
        font-size: 11px;
      }
      .scoreboard {
        min-width: 96px;
        padding: 10px 8px;
      }
      .scoreboard .scoreline-main {
        font-size: 36px;
      }
      .hero-copy {
        gap: 10px;
        padding: 0 14px 12px;
      }
      .hero-main::after {
        inset: 48px 28px 20px;
      }
      .hero-main::before {
        top: 78px;
        bottom: 20px;
      }
      .lead {
        font-size: 18px;
        line-height: 1.34;
      }
      .hero-side {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        align-items: center;
        gap: 10px;
      }
      .result-box .value {
        font-size: 26px;
      }
      .quality {
        gap: 6px;
      }
      .quality .subtle {
        font-size: 11px;
      }
      .metric-row { grid-template-columns: 50px minmax(0, 1fr) 50px; }
      .decision-panel, .odds-panel, .score-panel, .confidence-panel { padding: 14px; }
      .odds-row { grid-template-columns: 44px minmax(0, 1fr) 42px; }
      .verdict-meter { grid-template-columns: 1fr; }
      .pitch-card, .flow-card { padding: 14px; }
      .pitch { min-height: 190px; }
      .pitch::before { inset: 14px; }
      .pitch::after { top: 14px; bottom: 14px; }
      .penalty-box {
        top: 58px;
        width: 48px;
        height: 76px;
      }
      .pitch-circle {
        width: 70px;
        height: 70px;
      }
      .pitch-team.home { left: 22px; top: 22px; }
      .pitch-team.away { right: 22px; bottom: 22px; }
      .pitch-legend { grid-template-columns: 1fr; }
      .flow-row { grid-template-columns: 68px minmax(0, 1fr) 48px; }
      .phase-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .source-grid { grid-template-columns: 1fr; }
      .probability-legend { grid-template-columns: 1fr 1fr 1fr; }
      .legend-item { padding: 8px 6px; }
      .intel-strip { grid-template-columns: 1fr; }
    }