@font-face {
    font-family: "Bebas Neue";
    src: url("../fonts/BebasNeue-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
            color-scheme: light;
            --page: #f4f6fb;
            --panel: #ffffff;
            --panel-2: #f6f7fb;
            --line: #dfe3ec;
            --text: #292c40;
            --muted: #777f96;
            --blue: #4d7cff;
            --cyan: #16d9f5;
        }
        * { box-sizing: border-box; }
        [hidden] { display: none !important; }
        html, body { max-width: 100%; overflow-x: clip; }
        body {
            margin: 0;
            min-height: 100vh;
            background: radial-gradient(ellipse at 55% -20%, #ebe9fa 0, transparent 48%), var(--page);
            color: var(--text);
            font: 15px/1.5 Inter, "Segoe UI", Arial, sans-serif;
            -webkit-user-select: none;
            user-select: none;
        }
        button, input { font: inherit; }
        input, textarea { -webkit-user-select: text; user-select: text; }
        button {
            color: inherit;
            transition: transform .22s cubic-bezier(.2,.75,.25,1), border-color .22s ease, box-shadow .22s ease, background-color .22s ease, background-image .22s ease, color .22s ease, backdrop-filter .22s ease;
        }
        button:hover {
            transform: translateY(-2px);
            border-color: rgba(157,190,255,.72);
            background-color: rgba(138,174,230,.28);
            backdrop-filter: blur(14px) saturate(155%);
            -webkit-backdrop-filter: blur(14px) saturate(155%);
            box-shadow: 0 10px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.2);
        }
        button:active { transform: translateY(0) scale(.985); }
        button:focus-visible {
            outline: 2px solid rgba(133,177,255,.95);
            outline-offset: 3px;
        }
        .topbar {
            position: relative;
            z-index: 1000;
            min-height: 82px;
            padding: 0 5vw;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            border-bottom: 1px solid rgba(112,120,148,.16);
            background: rgba(255,255,255,.84);
        }
        .brand {
            display: inline-flex;
            align-items: center;
            color: var(--text);
            text-decoration: none;
            transition: transform .2s ease, opacity .2s ease;
        }
        .brand:hover { transform: translateY(-1px); opacity: .88; }
        .brand-icon {
            width: 64px;
            height: 64px;
            max-width: calc(100vw - 34px);
            padding: 0;
            border: 0;
            border-radius: 0;
            display: block;
            object-fit: contain;
            background: none;
            box-shadow: none;
        }
        .top-note { color: var(--muted); font-size: 13px; }
        .theme-switcher { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
        .theme-picker { position: relative; z-index: 1001; }
        .theme-select-native { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; }
        .theme-picker-trigger {
            display: inline-flex;
            min-width: 146px;
            min-height: 42px;
            align-items: center;
            gap: 10px;
            padding: 0 13px;
            border: 1px solid rgba(133,145,174,.2);
            border-radius: 13px;
            background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(246,247,252,.78));
            color: #34394e;
            box-shadow: 0 5px 16px rgba(48,56,90,.08), inset 0 1px 0 rgba(255,255,255,.9);
            cursor: pointer;
            text-align: left;
        }
        .theme-picker-trigger:hover { border-color: rgba(125,102,218,.42); box-shadow: 0 8px 20px rgba(76,66,140,.13), inset 0 1px 0 #fff; }
        .theme-picker-trigger:focus-visible, .theme-picker-option:focus-visible { outline: 2px solid #8065e2; outline-offset: 2px; }
        .theme-picker-current-icon {
            display: grid;
            width: 25px;
            height: 25px;
            flex: 0 0 auto;
            place-items: center;
            border-radius: 8px;
            background: rgba(123,101,218,.12);
            color: #7158ca;
            font-size: 17px;
        }
        .theme-picker-current-label { flex: 1; font-size: 12px; font-weight: 800; }
        .theme-picker-chevron { width: 7px; height: 7px; margin: -4px 2px 0 4px; border-right: 1.7px solid #858ba0; border-bottom: 1.7px solid #858ba0; transform: rotate(45deg); transition: transform .18s ease; }
        .theme-picker-trigger[aria-expanded="true"] .theme-picker-chevron { margin-top: 4px; transform: rotate(225deg); }
        .theme-picker-options {
            position: absolute;
            z-index: 1002;
            top: calc(100% + 9px);
            right: 0;
            width: 254px;
            padding: 6px;
            border: 1px solid rgba(133,145,174,.2);
            border-radius: 15px;
            background: rgba(255,255,255,.94);
            box-shadow: 0 18px 44px rgba(39,46,77,.18), inset 0 1px 0 rgba(255,255,255,.9);
            backdrop-filter: blur(18px) saturate(150%);
            -webkit-backdrop-filter: blur(18px) saturate(150%);
        }
        .theme-picker-option { display: flex; width: 100%; min-height: 54px; align-items: center; gap: 10px; padding: 7px 9px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #394056; cursor: pointer; text-align: left; }
        .theme-picker-option:hover, .theme-picker-option[aria-selected="true"] { border-color: rgba(123,101,218,.13); background: rgba(123,101,218,.075); }
        .theme-picker-option-icon { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: rgba(123,101,218,.11); color: #7158ca; font-size: 19px; }
        .theme-picker-option-copy { display: grid; flex: 1; gap: 2px; }
        .theme-picker-option-copy strong { font-size: 11px; font-weight: 800; }
        .theme-picker-option-copy small { color: #858ba0; font-size: 9px; font-weight: 500; }
        .theme-picker-check { width: 7px; height: 12px; margin: -3px 3px 0 0; border-right: 2px solid #7158ca; border-bottom: 2px solid #7158ca; opacity: 0; transform: rotate(45deg); }
        .theme-picker-option[aria-selected="true"] .theme-picker-check { opacity: 1; }
        main { width: min(1440px, 100%); margin: 0 auto; padding: 34px 28px 60px; }
        .intro { margin: 0 auto 28px; text-align: center; }
        .intro h1 { margin: 0 0 6px; font-size: clamp(25px, 3vw, 36px); letter-spacing: -.045em; }
        .intro p { margin: 0; color: var(--muted); }
        .home-view { max-width: 1180px; margin: 0 auto; }
        .home-view .intro { margin-bottom: 34px; }
        .template-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; }
        .template-card {
            position: relative;
            display: block; width: 100%; min-width: 0; padding: 12px; overflow: hidden;
            border: 1px solid var(--line); border-radius: 16px; background: rgba(17,27,43,.94);
            color: var(--text); text-align: left; cursor: pointer; box-shadow: 0 14px 40px rgba(0,0,0,.2);
            transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
        }
        .template-card:hover, .template-card:focus-visible {
            transform: translateY(-4px); border-color: #6387ff; box-shadow: 0 20px 48px rgba(0,0,0,.3);
        }
        .template-card-image { display: block; overflow: hidden; border-radius: 10px; background: #f4f4f4; }
        .template-preview { display: block; width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: contain; }
        .template-card-details { display: grid; gap: 5px; padding: 14px 3px 3px; }
        .template-card-title { font-size: 17px; font-weight: 800; }
        .template-card-description { color: var(--muted); font-size: 12px; }
        .template-card-action { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; color: #9cb3ff; font-size: 13px; font-weight: 700; }
        .back-to-templates { margin-bottom: 20px; }
        .workspace { display: grid; grid-template-columns: minmax(330px, 440px) minmax(0, 1fr); gap: 24px; align-items: start; }
        .editor, .preview-panel { border: 1px solid var(--line); border-radius: 18px; background: rgba(17,27,43,.94); box-shadow: 0 18px 55px rgba(0,0,0,.22); }
        .editor { padding: 22px; }
        .preview-panel { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; }
        .panel-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 17px; }
        .panel-heading h2 { margin: 0; font-size: 17px; }
        .panel-heading-actions { display: flex; align-items: center; gap: 9px; }
        .step { color: #8ca0bb; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
        .btn-reset-template { min-height: 30px; padding: 0 9px; font-size: 11px; white-space: nowrap; }
        .templates { display: grid; grid-template-columns: minmax(150px, 1fr); gap: 10px; margin-bottom: 22px; }
        .template {
            padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: #101a29;
            text-align: left; cursor: pointer; transition: .18s ease;
        }
        .template:hover { border-color: #6387ff; transform: translateY(-1px); }
        .template.active { border-color: #6d8eff; box-shadow: 0 0 0 2px rgba(96,132,255,.16); background: #17233a; }
        .template-art { height: 55px; border-radius: 7px; margin-bottom: 7px; overflow: hidden; position: relative; }
        .template-art::before, .template-art::after { content: ""; position: absolute; left: 15%; right: 15%; height: 7px; border-radius: 2px; background: rgba(255,255,255,.75); }
        .template-art::before { top: 15px; box-shadow: 0 12px 0 rgba(255,255,255,.55); }
        .template-art::after { top: 39px; left: 35%; right: 35%; background: rgba(255,255,255,.4); }
        .art-jf { background: linear-gradient(140deg, #fff 0 39%, #50d519 40% 60%, #fff 61%); }
        .art-jf::before, .art-jf::after { background: #18251a; }
        .template-name { display: block; font-size: 11px; font-weight: 700; line-height: 1.25; }
        .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .field { display: grid; gap: 6px; margin-bottom: 13px; }
        .field label, .field-label { color: #c7d2e2; font-size: 12px; font-weight: 650; }
        .field input {
            width: 100%; min-width: 0; height: 40px; padding: 0 11px; border: 1px solid #34435b;
            border-radius: 9px; outline: 0; background: #0c1523; color: var(--text);
        }
        .field textarea {
            width: 100%; min-width: 0; min-height: 110px; padding: 10px 11px; border: 1px solid #34435b;
            border-radius: 9px; outline: 0; background: #0c1523; color: var(--text); resize: vertical;
        }
        .field input:focus { border-color: #6485ff; box-shadow: 0 0 0 3px rgba(100,133,255,.13); }
        .field textarea:focus { border-color: #6485ff; box-shadow: 0 0 0 3px rgba(100,133,255,.13); }
        .monthly-fixtures-controls { display: grid; gap: 4px; margin: 4px 0 15px; }
        .monthly-channel-heading { margin-top: 4px; }
        .monthly-channel-hint { margin: -3px 0 7px; }
        .monthly-fixtures-controls .field { margin-bottom: 0; }
        .monthly-club-status { min-height: 18px; margin: 0; color: var(--muted); font-size: 11px; }
        .monthly-club-results { display: grid; gap: 7px; max-height: 240px; overflow-y: auto; }
        .monthly-club-result {
            display: flex; min-width: 0; align-items: center; gap: 10px; padding: 8px 10px;
            border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
            color: var(--text); text-align: left; font-size: 12px; font-weight: 700; cursor: pointer;
        }
        .monthly-club-result img { flex: 0 0 32px; width: 32px; height: 32px; object-fit: contain; }
        .monthly-club-result:hover, .monthly-club-result:focus-visible { border-color: var(--blue); }
        .monthly-fixtures-refresh { justify-self: start; min-height: 36px; padding: 0 12px; font-size: 11px; }
        .field input[type="color"] {
            display: block; width: 100%; max-width: 112px; min-height: 32px; padding: 0; border: 1px solid rgba(132,151,191,.45);
            border-radius: 10px; background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(241,245,255,.88));
            cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 6px 14px rgba(58,72,110,.1);
            -webkit-appearance: none; appearance: none; overflow: hidden;
        }
        .field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
        .field input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 9px; }
        .field input[type="color"]::-moz-color-swatch { border: 0; border-radius: 9px; }
        .field select {
            width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--line);
            border-radius: 9px; background: var(--panel); color: var(--text);
        }
        #football-news-controls .field:last-child { grid-column: 1 / -1; }
        .poster-ratio-field { grid-column: 1 / -1; }
        .football-news-ratio-options { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
        .football-news-ratio-option {
            display: grid; flex: 0 0 auto; place-items: center; height: 32px; width: auto; min-width: 0;
            padding: 0 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
            color: var(--muted); font-size: 9px; font-weight: 750; line-height: 1; cursor: pointer;
        }
        .football-news-ratio-option[data-ratio="1:1"] { aspect-ratio: 1 / 1; }
        .football-news-ratio-option[data-ratio="3:4"] { aspect-ratio: 3 / 4; }
        .football-news-ratio-option[data-ratio="5:6"] { aspect-ratio: 5 / 6; }
        .football-news-ratio-option[data-ratio="7:5"] { aspect-ratio: 7 / 5; }
        .football-news-ratio-option[data-ratio="16:9"] { aspect-ratio: 16 / 9; }
        .football-news-ratio-option[data-ratio="original"] { padding-inline: 7px; }
        .football-news-ratio-option:hover,
        .football-news-ratio-option[aria-pressed="true"] {
            border-color: var(--blue); background: rgba(77,124,255,.12); color: var(--blue);
        }
        .football-news-ratio-option:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
        .matchlist-layout-options { display: flex; gap: 7px; }
        .matchlist-layout-option {
            min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px;
            background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer;
        }
        .matchlist-layout-option:hover,
        .matchlist-layout-option[aria-pressed="true"] {
            border-color: var(--blue); background: rgba(77,124,255,.12); color: var(--blue);
        }
        .matchlist-layout-option:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
        .today-results-theme-options { display: flex; flex-wrap: wrap; gap: 7px; }
        .today-results-theme-option {
            min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px;
            background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer;
        }
        .today-results-theme-option:hover,
        .today-results-theme-option[aria-pressed="true"] {
            border-color: var(--blue); background: rgba(77,124,255,.12); color: var(--blue);
        }
        .today-results-theme-option:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
        .red-star-theme-options { display: flex; flex-wrap: wrap; gap: 7px; }
        .red-star-theme-option {
            min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px;
            background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer;
        }
        .red-star-theme-option:hover,
        .red-star-theme-option[aria-pressed="true"] {
            border-color: var(--blue); background: rgba(77,124,255,.12); color: var(--blue);
        }
        .red-star-theme-option:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
        .brand-logo-shape-options { display: flex; gap: 7px; }
        .brand-logo-shape-option {
            min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px;
            background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer;
        }
        .brand-logo-shape-option:hover,
        .brand-logo-shape-option[aria-pressed="true"],
        .brand-logo-shape-option.is-active {
            border-color: var(--blue); background: rgba(77,124,255,.12); color: var(--blue);
        }
        .brand-logo-shape-option:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
        .color-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
        .color-fields .field {
            padding: 8px 10px 7px; border: 1px solid rgba(136,150,185,.26); border-radius: 12px;
            background: linear-gradient(180deg, rgba(248,250,255,.72), rgba(241,244,255,.78));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
        }
        .color-fields .field input[type="color"] { height: 34px; }
        .field input[type="file"].file-input {
            height: auto; min-height: 40px; padding: 7px; font-size: 11px; cursor: pointer;
        }
        .field input[type="file"]::file-selector-button {
            margin-right: 8px; padding: 5px 8px; border: 0; border-radius: 6px; background: #283a55; color: #eaf1ff; cursor: pointer;
            transition: transform .22s ease, background-color .22s ease, box-shadow .22s ease;
        }
        .field input[type="file"]::file-selector-button:hover {
            transform: translateY(-1px);
            background-color: rgba(110,151,224,.48);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 12px rgba(0,0,0,.18);
        }
        .field input[type="range"].range-input {
            height: 24px; padding: 0; accent-color: #52d719;
            background: linear-gradient(90deg, rgba(82,215,25,.18), rgba(104,115,148,.12));
            border-radius: 999px; cursor: pointer;
        }
        .field input[type="range"].range-input::-webkit-slider-runnable-track {
            height: 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(82,215,25,.25), rgba(148,160,183,.32));
        }
        .field input[type="range"].range-input::-webkit-slider-thumb {
            -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -5px;
            border-radius: 50%; border: 2px solid rgba(255,255,255,.9); background: #fff; box-shadow: 0 4px 12px rgba(30,42,74,.18);
        }
        .field input[type="range"].range-input::-moz-range-track {
            height: 8px; border: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(82,215,25,.25), rgba(148,160,183,.32));
        }
        .field input[type="range"].range-input::-moz-range-thumb {
            width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(30,42,74,.18);
        }
        .field label span { float: right; color: #9baec8; font-weight: 500; }
        .result-controls { margin-top: 4px; }
        .result-controls .field textarea { line-height: 1.6; }
        .result-auto-field { gap: 8px; }
        .result-auto-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
        .result-mode-badge {
            display: inline-flex; align-items: center; justify-content: center; min-height: 22px;
            padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(154,171,226,.42);
            background: rgba(76,123,255,.1); color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
        }
        .result-auto-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
        .result-auto-row .hint-inline { flex: 1; }
        .result-auto-button {
            min-height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(77,124,255,.42);
            background: linear-gradient(135deg, rgba(93,131,255,.18), rgba(54,96,220,.14)); color: var(--blue);
            font-weight: 800; letter-spacing: .02em; cursor: pointer; white-space: nowrap;
        }
        .result-auto-button:hover { filter: brightness(1.03); }
        .result-auto-options {
            display: grid; gap: 8px; margin-top: 8px; padding: 8px; border: 1px solid rgba(140,160,210,.28);
            border-radius: 12px; background: rgba(13,20,32,.54); max-height: 260px; overflow: auto;
        }
        .result-auto-option {
            display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 12px; border: 1px solid rgba(137,159,206,.28);
            border-radius: 10px; background: rgba(255,255,255,.03); color: var(--text); text-align: left; cursor: pointer;
        }
        .result-auto-option strong { font-size: 12px; }
        .result-auto-option small { color: var(--muted); font-size: 10px; }
        .result-auto-option:hover,
        .result-auto-option:focus-visible { border-color: rgba(106,154,255,.72); background: rgba(77,124,255,.12); }
        .result-auto-empty { margin: 0; color: var(--muted); font-size: 12px; }
        .brand-logo-field { margin-top: 3px; }
        .brand-logo-controls { display: flex; align-items: center; gap: 10px; }
        .brand-logo-upload { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; background: #f7f8f5; color: #222; font-size: 15px; }
        .brand-logo-upload img { object-fit: contain; padding: 3px; }
        .hint-inline { flex: 1; color: #91a1b8; font-size: 11px; line-height: 1.35; }
        .btn-clear-logo { min-height: 34px; padding: 0 9px; font-size: 11px; }
        .section-label { margin: 6px 0 11px; display: flex; align-items: center; justify-content: space-between; }
        .section-label strong { font-size: 14px; }
        .section-label span { color: var(--muted); font-size: 12px; }
        .match-list { display: grid; gap: 9px; max-height: 350px; overflow: auto; padding-right: 3px; }
        .match-row {
            display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr) 28px;
            gap: 7px; align-items: center; min-width: 0; padding: 8px; border: 1px solid #2b394e; border-radius: 11px; background: #0d1725;
            transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease, backdrop-filter .22s ease;
        }
                .stat-editor-row {
                    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end;
                }
                .stat-editor-field {
                    display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 11px;
                }
                .stat-editor-field input {
                    width: 100%; min-width: 0; height: 36px; padding: 0 8px; border: 1px solid #34435b; border-radius: 7px; outline: 0; background: #0c1523; color: var(--text); font-size: 12px;
                }
                .match-row:hover {
            border-color: rgba(157,190,255,.52);
            background-color: rgba(42,61,91,.68);
            backdrop-filter: blur(12px) saturate(145%);
            -webkit-backdrop-filter: blur(12px) saturate(145%);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
        }
        .match-team-control { display: flex; align-items: center; gap: 6px; min-width: 0; }
        .match-team-control .logo-upload { flex: 0 0 32px; }
        .logo-upload {
            width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; overflow: hidden;
            background: #23344c; color: #dce8ff; cursor: pointer; font-weight: 800; font-size: 11px; border: 1px dashed #526785;
            transition: transform .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease, backdrop-filter .22s ease;
        }
        .logo-upload:hover, .logo-upload:focus-within {
            transform: translateY(-2px);
            background-color: rgba(130,170,230,.34);
            border-color: rgba(190,215,255,.85);
            backdrop-filter: blur(14px) saturate(155%);
            -webkit-backdrop-filter: blur(14px) saturate(155%);
            box-shadow: 0 6px 18px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2);
        }
        .logo-upload img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
        .logo-upload input { display: none; }
        .match-row input[type="text"] {
            display: block; width: 100%; min-width: 0; height: 36px; padding: 0 8px;
            border: 1px solid #34435b; border-radius: 7px; outline: 0; background: #0c1523; color: var(--text); font-size: 12px;
        }
        .match-row input[type="text"]:focus { border-color: #6485ff; box-shadow: 0 0 0 2px rgba(100,133,255,.13); }
        .time-control { text-align: center; }
        .remove-row { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: #93a2b8; cursor: pointer; font-size: 18px; }
        .remove-row:hover { color: #ff8290; background: rgba(255,95,117,.1); }
        .editor-actions { display: flex; gap: 9px; margin-top: 12px; }
        .btn {
            min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            padding: 0 15px; border-radius: 10px; border: 1px solid #35445c; background: #19263a;
            color: var(--text); font-weight: 700; cursor: pointer;
        }
        .btn-add { flex: 1; border-style: dashed; color: #c5d3e8; background: transparent; }
        .btn-export { border-color: transparent; background: linear-gradient(120deg, #4b73fa, #18bfd9); box-shadow: 0 7px 20px rgba(41,113,226,.23); }
        .hint { margin: 15px 0 0; color: #8192aa; font-size: 12px; }
        .preview-panel { padding: 20px; min-width: 0; }
        .preview-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
        .preview-top h2 { margin: 0; font-size: 17px; }
        .preview-size { color: #93a2b8; font-size: 12px; }
        .canvas-wrap {
            display: grid; place-items: center; padding: 18px;
            border-radius: 13px; background-color: #0a111d;
            background-image: linear-gradient(45deg,#121d2d 25%,transparent 25%),linear-gradient(-45deg,#121d2d 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#121d2d 75%),linear-gradient(-45deg,transparent 75%,#121d2d 75%);
            background-size: 18px 18px; background-position: 0 0,0 9px,9px -9px,-9px 0;
        }
        .preview-canvas-container { position: relative; }
        .preview-expand { position: absolute; right: 27px; bottom: 27px; z-index: 1; border-color: rgba(255,255,255,.2); background: rgba(17,27,43,.9); box-shadow: 0 5px 18px rgba(0,0,0,.25); }
        #poster { display: block; width: min(100%, 500px); height: auto; aspect-ratio: 5 / 6; border-radius: 3px; box-shadow: 0 18px 45px rgba(0,0,0,.45); }
        .expanded-preview {
            width: min(100vw, 1500px); height: min(100dvh, 1200px); max-width: none; max-height: none;
            padding: 0; overflow: hidden; border: 0; background: #0b1220; color: var(--text);
        }
        .expanded-preview::backdrop { background: rgba(3,8,16,.88); backdrop-filter: blur(8px); }
        .expanded-preview[open] { display: flex; flex-direction: column; }
        .club-picker-dialog {
            width: min(900px, calc(100vw - 32px));
            max-width: none;
            max-height: min(760px, calc(100dvh - 32px));
            padding: 0;
            overflow: hidden;
            border: 1px solid rgba(180,205,245,.2);
            border-radius: 22px;
            background: rgba(14,23,38,.88);
            color: var(--text);
            box-shadow: 0 30px 100px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
            backdrop-filter: blur(28px) saturate(155%);
            -webkit-backdrop-filter: blur(28px) saturate(155%);
        }
        .club-picker-dialog[open] { display: flex; flex-direction: column; }
        .club-picker-dialog::backdrop { background: rgba(3,8,16,.7); backdrop-filter: blur(9px); }
        .club-picker-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; }
        .club-picker-header h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
        .club-picker-header p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
        .club-picker-close { width: 38px; min-height: 38px; padding: 0; border-radius: 50%; font-size: 22px; }
        .league-tabs { display: grid; flex: 0 0 auto; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin-bottom: 12px; padding: 8px 24px 14px; border-bottom: 1px solid rgba(255,255,255,.09); }
        .league-tab { display: flex; min-width: 0; min-height: 38px; align-items: center; justify-content: center; gap: 5px; padding: 4px 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.045); color: #b9c7dc; font-size: clamp(9px, 1.1vw, 12px); font-weight: 750; line-height: 1.15; text-align: center; overflow-wrap: anywhere; cursor: pointer; }
        .league-tab > span:last-child { min-width: 0; }
        .league-tab img { display: block; width: 19px; height: 19px; flex: 0 0 auto; padding: 2px; border-radius: 50%; background: rgba(255,255,255,.94); object-fit: contain; }
        .league-tab-mark { display: grid; width: 19px; height: 19px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(185,199,220,.34); border-radius: 50%; background: rgba(255,255,255,.09); color: #d9e1ee; font-size: 6px; font-weight: 900; letter-spacing: -.04em; }
        .league-tab.is-active { border-color: rgba(143,179,255,.56); background: rgba(106,147,221,.25); color: #f6f8ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
        .club-picker-content { flex: 1 1 auto; min-height: 0; padding: 0 24px 22px; overflow: auto; }
        .club-picker-tools { display: flex; gap: 10px; margin-bottom: 16px; }
        .club-search { display: flex; flex: 1; min-width: 0; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid #34435b; border-radius: 11px; background: rgba(5,12,23,.58); color: #98abc6; }
        .club-search > span { font-size: 23px; line-height: 1; }
        .club-search input { width: 100%; min-width: 0; height: 42px; border: 0; outline: 0; background: transparent; color: var(--text); }
        .club-search:focus-within { border-color: #6485ff; box-shadow: 0 0 0 3px rgba(100,133,255,.13); }
        .device-logo-button { min-height: 44px; white-space: nowrap; background: rgba(89,125,190,.25); }
        .club-logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
        .club-logo-choice { display: grid; min-width: 0; min-height: 126px; align-content: center; justify-items: center; gap: 10px; padding: 12px 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.045); color: #e7edf8; cursor: pointer; }
        .club-logo-choice:hover, .club-logo-choice:focus-visible { border-color: rgba(152,187,255,.65); background-color: rgba(111,153,225,.2); }
        .club-logo-choice img { display: block; width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.28)); }
        .club-logo-choice span { max-width: 100%; overflow: hidden; font-size: 11px; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
        .club-picker-note { margin: 15px 0 0; color: #9aabc2; font-size: 12px; text-align: center; }
        .club-picker-note:empty { display: none; }
        .template-card { content-visibility: auto; contain-intrinsic-size: auto 400px; }
        .match-row { content-visibility: auto; contain-intrinsic-size: auto 64px; }
        .expanded-preview-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 22px; border-bottom: 1px solid var(--line); background: #111b2b; }
        .expanded-preview-header > div { display: grid; gap: 3px; }
        .expanded-preview-header strong { font-size: 15px; }
        .expanded-preview-header span { color: var(--muted); font-size: 12px; }
        .expanded-preview-body { position: relative; display: flex; flex: 1; min-width: 0; min-height: 0; align-items: center; justify-content: center; overflow: hidden; padding: 12px; }
        .expanded-canvas-stage { display: flex; width: 100%; height: 100%; min-width: 0; min-height: 0; align-items: center; justify-content: center; overflow: hidden; }
        .expanded-canvas-stage #poster { width: auto; height: min(100%, calc(100dvh - 90px)); max-width: 100%; max-height: 100%; object-fit: contain; }
        .canvas-inline-editor { position: absolute; z-index: 3; min-width: 100px; max-width: min(420px, 80vw); min-height: 42px; height: 42px; padding: 5px 10px; border: 2px solid #49d6c5; border-radius: 8px; outline: 0; background: #fff; color: #172b3d; font: 700 18px/1.2 "Segoe UI", Arial, sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,.28); transform: translate(-50%, -50%); resize: none; }
        .canvas-inline-editor.is-multiline { height: 150px; padding: 10px; white-space: pre-wrap; }
        .canvas-inline-editor[hidden] { display: none; }
        #poster.is-editable { cursor: crosshair; }
        @media (max-width: 520px) {
            .preview-expand { right: 14px; bottom: 14px; min-height: 36px; padding-inline: 10px; font-size: 11px; }
            .expanded-preview-header { padding: 12px; }
            .expanded-preview-header strong { font-size: 13px; }
            .expanded-preview-header span { font-size: 10px; }
            .expanded-preview-header .btn { min-height: 36px; padding-inline: 10px; font-size: 11px; }
            .expanded-preview-body { padding: 6px; }
            .expanded-canvas-stage #poster { height: min(100%, calc(100dvh - 74px)); }
        }
        .toast { min-height: 20px; margin: 12px 0 0; color: #9fefcf; font-size: 13px; }
        @media (prefers-reduced-motion: reduce) {
            button, .template-card, .logo-upload, .match-row, .field input[type="file"]::file-selector-button { transition-duration: .01ms; }
            button:hover, button:active, .template-card:hover, .template-card:focus-visible { transform: none; }
        }
        .scroll-reveal-pending {
            opacity: 0;
            transform: translate3d(-28px, 18px, 0);
            transition: none;
        }
        .scroll-reveal-visible {
            opacity: 1;
            transform: translate3d(0, 0, 0);
            transition: opacity .7s cubic-bezier(.2,.75,.25,1), transform .7s cubic-bezier(.2,.75,.25,1);
            transition-delay: var(--scroll-reveal-delay, 0ms);
        }
        .scroll-reveal-pending.scroll-reveal-from-right { transform: translate3d(28px, 18px, 0); }
        .scroll-reveal-pending.home-eyebrow { display: inline-block; }
        @media (prefers-reduced-motion: reduce) {
            .scroll-reveal-pending, .scroll-reveal-visible {
                opacity: 1;
                transform: none;
                transition: none;
            }
        }
        @media (max-width: 980px) {
            main { padding-inline: 18px; }
            .workspace { grid-template-columns: 1fr; }
            .editor { order: 1; }
            .preview-panel { position: static; order: 0; max-height: none; overflow: visible; }
            #poster { width: min(100%, 500px); }
            .expanded-canvas-stage #poster { width: auto; height: min(100%, calc(100dvh - 90px)); max-width: 100%; }
        }
        @media (max-width: 520px) {
            .topbar { gap: 8px; padding: 0 12px; min-height: 62px; }
            .brand-icon { width: 52px; height: 52px; }
            main { padding: 24px 12px 40px; }
            .editor, .preview-panel { padding: 15px; }
            .template-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
            .template-card { padding: 7px; border-radius: 12px; }
            .template-card-details { padding: 10px 2px 2px; }
            .template-card-title { font-size: 14px; }
            .template-card-description, .template-card-action { font-size: 10px; }
            .match-row { grid-template-columns: minmax(0,1fr) 54px minmax(0,1fr) 24px; gap: 5px; padding: 6px; }
            .match-team-control { gap: 4px; }
            .match-team-control .logo-upload { width: 23px; height: 27px; flex: 0 0 23px; border-radius: 6px; font-size: 9px; }
            .match-row input[type="text"] { height: 34px; padding: 0 5px; font-size: 10px; }
            .match-team-control input[type="text"] { flex: 1; }
            .match-row .remove-row { width: 24px; height: 28px; }
            .canvas-wrap { padding: 8px; }
            .preview-size { display: none; }
            .club-picker-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 17px; }
            .club-picker-header { padding: 16px 16px 12px; }
            .club-picker-header h2 { font-size: 17px; }
            .club-picker-header p { font-size: 11px; }
            .league-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin-bottom: 12px; padding: 8px 16px 12px; }
            .league-tab { min-height: 36px; gap: 3px; padding: 4px 3px; font-size: 9px; }
            .league-tab img, .league-tab-mark { width: 16px; height: 16px; }
            .club-picker-content { padding: 0 14px 18px; }
            .club-picker-tools { flex-direction: column; }
            .club-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
            .club-logo-choice { min-height: 104px; padding: 8px 5px; }
            .club-logo-choice img { width: 52px; height: 52px; }
        }

        :root[data-theme="light"] {
        body { background: radial-gradient(ellipse at 55% -20%, #ebe9fa 0, transparent 48%), var(--page); color: var(--text); }
        .topbar { border-bottom-color: rgba(112,120,148,.16); background: rgba(255,255,255,.84); }
        .brand-icon { filter: none; }
        .brand, .intro h1, .panel-heading h2, .preview-top h2, .template-card, .template-card-title { color: #292c40; }
        .editor, .preview-panel { border-color: #dfe3ec; background: rgba(255,255,255,.92); box-shadow: 0 18px 45px rgba(55,65,95,.1); }
        .template-card { border-color: #e0e3ed; background: linear-gradient(145deg, #fff, #f4f5fb); box-shadow: 0 14px 36px rgba(55,65,95,.1); }
        .field label, .field-label, .section-label strong { color: #4b5268; }
        .field input:not([type="color"]):not([type="range"]):not([type="file"]),
        .field textarea, .match-row input[type="text"], .club-search,
        .canvas-inline-editor, .field input[type="file"].file-input {
            border-color: #d9deea;
            background: #fff;
            color: #292c40;
            box-shadow: inset 0 1px 2px rgba(35,45,70,.04);
        }
        .field input:not([type="color"]):not([type="range"]):not([type="file"])::placeholder,
        .field textarea::placeholder, .club-search input::placeholder { color: #8a91a4; }
        .color-fields .field { border-color: #e0e3ed; background: linear-gradient(145deg, #fff, #f5f6fb); }
        .match-row { border-color: #dfe3ec; background: #fff; box-shadow: 0 5px 14px rgba(55,65,95,.06); }
        .logo-upload, .remove-row, .btn, .league-tab, .club-logo-choice, .template {
            border-color: #d9deea;
            background: linear-gradient(145deg, #fff, #f4f5fa);
            color: #454b61;
        }
        .btn-add { color: #6651be; }
        .club-picker-dialog { border-color: #dfe3ec; background: rgba(255,255,255,.97); color: #292c40; }
        .club-picker-header h2 { color: #292c40; }
        .club-picker-header p, .club-picker-note { color: #777f96; }
        .expanded-preview { background: #f4f6fb; color: #292c40; }
        .canvas-wrap { background-color: #edf0f6; }
        .theme-picker-trigger { border-color: rgba(112,120,148,.18); background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(245,246,251,.86)); color: #34394e; }
        .theme-picker-options { border-color: rgba(112,120,148,.2); background: rgba(255,255,255,.94); }
        }

        :root {
            color-scheme: light;
            --page: #f5f6fc;
            --panel: #ffffff;
            --panel-2: #f8f9fe;
            --line: #e5e7f0;
            --text: #25283b;
            --muted: #777f96;
            --blue: #7658e8;
            --cyan: #54bce8;
        }
        body {
            background:
                radial-gradient(ellipse at 12% 0%, rgba(211,220,255,.72), transparent 36%),
                radial-gradient(ellipse at 94% 15%, rgba(240,218,250,.58), transparent 32%),
                #f6f7fc;
            color: var(--text);
        }
        .topbar {
            border-bottom-color: rgba(224,226,239,.8);
            background: rgba(255,255,255,.76);
            box-shadow: 0 4px 24px rgba(69,74,118,.04);
            backdrop-filter: blur(18px) saturate(150%);
            -webkit-backdrop-filter: blur(18px) saturate(150%);
        }
        .top-note, .intro p, .template-card-description, .section-label span,
        .preview-size, .hint, .hint-inline, .field label span { color: #777f96; }
        .intro h1, .panel-heading h2, .preview-top h2 { color: #292c40; }
        .template-card {
            border-color: rgba(226,228,240,.95);
            background: rgba(255,255,255,.9);
            color: #292c40;
            box-shadow: 0 12px 34px rgba(71,76,126,.09);
        }
        .template-card:hover, .template-card:focus-visible {
            border-color: #c2b6fa;
            background: rgba(255,255,255,.96);
            box-shadow: 0 18px 42px rgba(92,76,172,.15);
        }
        .template-card-action { color: #7458db; }
        .editor, .preview-panel {
            border-color: rgba(229,230,241,.94);
            background: rgba(255,255,255,.88);
            box-shadow: 0 16px 48px rgba(64,70,119,.09);
            backdrop-filter: blur(18px) saturate(140%);
            -webkit-backdrop-filter: blur(18px) saturate(140%);
        }
        .step { color: #8b8fa5; }
        .field label, .field-label { color: #626981; }
        .field input:not([type="color"]):not([type="range"]):not([type="file"]),
        .field textarea, .match-row input[type="text"], .club-search input, .canvas-inline-editor {
            border: 1px solid #e1e3ed;
            border-radius: 11px;
            background: rgba(250,250,254,.94);
            color: #292c40;
            box-shadow: inset 0 1px 2px rgba(57,62,100,.035);
            transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
        }
        .field input:not([type="color"]):not([type="range"]):not([type="file"])::placeholder,
        .field textarea::placeholder, .club-search input::placeholder { color: #a0a5b6; }
        .field input:not([type="color"]):not([type="range"]):not([type="file"]):focus,
        .field textarea:focus, .match-row input[type="text"]:focus,
        .club-search:focus-within, .canvas-inline-editor:focus {
            border-color: #9b87ef;
            background: #fff;
            box-shadow: 0 0 0 4px rgba(128,101,226,.12);
        }
        .field input[type="color"] {
            display: block; width: 100%; max-width: 112px; min-height: 32px; padding: 0; border: 1px solid #dfe3ed;
            border-radius: 10px; background: linear-gradient(135deg, #ffffff, #f7f5ff);
            cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 14px rgba(91,90,125,.08);
        }
        .color-fields .field {
            padding: 8px 10px 7px; border: 1px solid #e7e9f3; border-radius: 12px;
            background: linear-gradient(180deg, rgba(250,251,255,.96), rgba(246,244,255,.82));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
        }
        .field input[type="range"].range-input {
            accent-color: #8065e2;
            background: linear-gradient(90deg, rgba(128,101,226,.18), rgba(122,136,175,.12));
        }
        .field input[type="file"].file-input {
            border: 1px solid #e1e3ed;
            border-radius: 11px;
            background: #fafafe;
            color: #626981;
        }
        .field input[type="file"]::file-selector-button {
            border: 1px solid #e3defb;
            border-radius: 8px;
            background: #f0edff;
            color: #5f4ac5;
        }
        .field input[type="file"]::file-selector-button:hover {
            background: #e5dfff;
            box-shadow: 0 4px 12px rgba(92,76,172,.12);
        }
        .brand-logo-upload { background: #f5f3ff; }
        .section-label strong { color: #373b50; }
        .match-row {
            border-color: #e7e8f0;
            background: rgba(249,250,254,.92);
        }
        .match-row:hover {
            border-color: #d8d0f7;
            background-color: rgba(242,239,255,.88);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 5px 16px rgba(78,68,137,.06);
        }
        .match-row input[type="text"] { background: #fff; }
        .logo-upload {
            border: 1px dashed #cbc5eb;
            background: #f1effa;
            color: #6c5db2;
        }
        .logo-upload:hover, .logo-upload:focus-visible {
            border-color: #9f8ce8;
            background-color: #eae5ff;
            box-shadow: 0 5px 14px rgba(95,77,171,.12), inset 0 1px 0 rgba(255,255,255,.9);
        }
        .remove-row { color: #9298aa; }
        .remove-row:hover { color: #cf5670; background: rgba(242,117,145,.11); }
        .btn {
            border-color: #e3e4ed;
            background: rgba(255,255,255,.82);
            color: #464b62;
            box-shadow: 0 3px 9px rgba(69,74,118,.05);
        }
        button:hover {
            border-color: #c9c0f3;
            background-color: rgba(239,236,255,.92);
            color: #51429c;
            box-shadow: 0 9px 22px rgba(92,76,172,.12), inset 0 1px 0 rgba(255,255,255,.95);
        }
        .btn-add {
            border-color: #d6d0f1;
            color: #6655bb;
            background: rgba(246,244,255,.75);
        }
        .btn-export {
            border-color: transparent;
            background: linear-gradient(120deg, #7860e8, #62b8e8);
            color: #fff;
            box-shadow: 0 8px 20px rgba(112,93,211,.2);
        }
        .btn-export:hover {
            border-color: rgba(255,255,255,.65);
            background: linear-gradient(120deg, #6e54df, #4ea8dc);
            color: #fff;
        }
        .preview-expand {
            border-color: rgba(255,255,255,.65);
            background: rgba(255,255,255,.86);
            color: #393b50;
            box-shadow: 0 6px 20px rgba(26,32,53,.18);
            backdrop-filter: blur(14px) saturate(145%);
            -webkit-backdrop-filter: blur(14px) saturate(145%);
        }
        .canvas-wrap {
            background-color: #f1f2f8;
            background-image: linear-gradient(45deg,#e8e9f1 25%,transparent 25%),linear-gradient(-45deg,#e8e9f1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e8e9f1 75%),linear-gradient(-45deg,transparent 75%,#e8e9f1 75%);
            box-shadow: inset 0 0 0 1px rgba(70,76,118,.06);
        }
        #poster { box-shadow: 0 18px 44px rgba(44,48,77,.2); }
        .club-picker-dialog {
            border-color: rgba(221,222,238,.9);
            background: rgba(255,255,255,.94);
            color: #292c40;
            box-shadow: 0 30px 90px rgba(48,48,89,.25), inset 0 1px 0 rgba(255,255,255,.95);
        }
        .club-picker-header h2 { color: #292c40; }
        .club-picker-header p, .club-picker-note { color: #777f96; }
        .league-tabs { border-bottom-color: #e8e8f0; }
        .league-tab {
            border-color: #e6e5ef;
            background: rgba(248,248,253,.9);
            color: #666d83;
        }
        .league-tab.is-active {
            border-color: #c9bff3;
            background: #eeeaff;
            color: #5c49b4;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
        }
        .club-search {
            border-color: #e1e3ed;
            background: rgba(250,250,254,.96);
            color: #858ba0;
        }
        .device-logo-button { background: #f0edff; color: #5f4ac5; }
        .club-logo-choice {
            border-color: #e8e8f0;
            background: rgba(250,250,254,.9);
            color: #454a60;
        }
        .club-logo-choice:hover, .club-logo-choice:focus-visible {
            border-color: #c9bff3;
            background-color: #f1eeff;
        }
        .expanded-preview { background: #25283b; }
        .expanded-preview-header { border-bottom-color: rgba(255,255,255,.1); background: #303349; }
        .canvas-inline-editor { background: #fff; color: #292c40; }
        .toast { color: #398263; }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
        }
        @media (max-width: 520px) {
            .topbar { min-height: 70px; padding-inline: 17px; }
            .brand-icon { width: 52px; height: 52px; }
        }

        /* Liquid-glass surfaces for interactive controls and preview panels. */
        .editor, .preview-panel, .template-card {
            background: rgba(255,255,255,.62);
            border-color: rgba(255,255,255,.78);
            box-shadow: 0 18px 48px rgba(77,78,125,.11), inset 0 1px 0 rgba(255,255,255,.9);
            backdrop-filter: blur(24px) saturate(165%);
            -webkit-backdrop-filter: blur(24px) saturate(165%);
        }
        .template-card {
            background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(244,243,255,.56));
        }
        .template-card:hover, .template-card:focus-visible {
            background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(242,239,255,.76));
            border-color: rgba(164,145,235,.58);
            box-shadow: 0 22px 52px rgba(92,76,172,.16), inset 0 1px 0 #fff;
        }
        .field input:not([type="color"]):not([type="range"]):not([type="file"]),
        .field textarea, .match-row input[type="text"], .club-search, .canvas-inline-editor,
        .field input[type="file"].file-input {
            border-color: rgba(255,255,255,.92);
            background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(246,247,255,.65));
            box-shadow: 0 5px 16px rgba(75,78,119,.06), inset 0 1px 0 rgba(255,255,255,.96);
            backdrop-filter: blur(16px) saturate(150%);
            -webkit-backdrop-filter: blur(16px) saturate(150%);
        }
        .field input:not([type="color"]):not([type="range"]):not([type="file"]):focus,
        .field textarea:focus, .match-row input[type="text"]:focus,
        .club-search:focus-within, .canvas-inline-editor:focus {
            border-color: rgba(137,112,226,.62);
            background: rgba(255,255,255,.96);
            box-shadow: 0 0 0 4px rgba(128,101,226,.13), 0 8px 20px rgba(82,70,139,.08), inset 0 1px 0 #fff;
        }
        .field input[type="file"]::file-selector-button {
            background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(235,230,255,.82));
            box-shadow: 0 3px 9px rgba(83,73,135,.1), inset 0 1px 0 #fff;
        }
        .field input[type="color"] {
            border-color: rgba(255,255,255,.94);
            background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(238,237,250,.72));
            box-shadow: 0 6px 16px rgba(75,78,119,.1), inset 0 1px 0 rgba(255,255,255,.96);
        }
        .color-fields .field {
            border-color: rgba(255,255,255,.86);
            background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(240,239,251,.54));
            box-shadow: 0 7px 18px rgba(75,78,119,.055), inset 0 1px 0 rgba(255,255,255,.95);
            backdrop-filter: blur(18px) saturate(150%);
            -webkit-backdrop-filter: blur(18px) saturate(150%);
        }
        .field input[type="range"].range-input {
            border: 1px solid rgba(255,255,255,.86);
            box-shadow: 0 4px 12px rgba(75,78,119,.06), inset 0 1px 0 rgba(255,255,255,.95);
        }
        .match-row {
            border-color: rgba(255,255,255,.86);
            background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(245,246,253,.6));
            box-shadow: 0 6px 16px rgba(75,78,119,.055), inset 0 1px 0 rgba(255,255,255,.92);
            backdrop-filter: blur(16px) saturate(145%);
            -webkit-backdrop-filter: blur(16px) saturate(145%);
        }
        .match-row:hover {
            border-color: rgba(159,141,228,.54);
            background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(241,238,255,.78));
            box-shadow: 0 10px 22px rgba(78,68,137,.09), inset 0 1px 0 #fff;
        }
        .logo-upload, .remove-row, .btn, .league-tab, .club-logo-choice, .template {
            border-color: rgba(255,255,255,.82);
            background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(237,239,250,.62));
            box-shadow: 0 5px 14px rgba(75,78,119,.08), inset 0 1px 0 rgba(255,255,255,.94);
            backdrop-filter: blur(16px) saturate(155%);
            -webkit-backdrop-filter: blur(16px) saturate(155%);
        }
        .btn {
            border-radius: 13px;
            transition: transform .2s cubic-bezier(.2,.75,.25,1), border-color .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
        }
        .btn:hover, .logo-upload:hover, .logo-upload:focus-within,
        .league-tab:hover, .club-logo-choice:hover, .club-logo-choice:focus-visible, .template:hover {
            border-color: rgba(145,123,222,.55);
            background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(237,233,255,.8));
            box-shadow: 0 10px 24px rgba(85,73,143,.13), inset 0 1px 0 #fff;
        }
        .btn-add {
            border-style: solid;
            color: #6553bd;
            background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(239,235,255,.62));
        }
        .btn-export {
            border-color: rgba(255,255,255,.58);
            background: linear-gradient(125deg, rgba(121,96,232,.94), rgba(93,182,231,.9));
            box-shadow: 0 9px 24px rgba(112,93,211,.22), inset 0 1px 0 rgba(255,255,255,.38);
            color: #fff;
        }
        .btn-export:hover {
            background: linear-gradient(125deg, #7055df, #4fa8dc);
            border-color: rgba(255,255,255,.9);
            color: #fff;
            box-shadow: 0 12px 28px rgba(101,81,196,.27), inset 0 1px 0 rgba(255,255,255,.48);
        }
        .league-tab {
            border-color: rgba(255,255,255,.72);
            background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
            color: #555b72;
        }
        .league-tab.is-active {
            border-color: rgba(139,118,220,.54);
            background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(229,223,255,.72));
            color: #5948ad;
            box-shadow: 0 5px 14px rgba(95,77,171,.12), inset 0 1px 0 #fff;
        }
        .club-logo-choice {
            border-color: rgba(255,255,255,.78);
            background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(240,241,250,.58));
            color: #454a60;
        }
        .club-picker-dialog {
            background: rgba(248,248,255,.82);
            border-color: rgba(255,255,255,.9);
            box-shadow: 0 30px 90px rgba(48,48,89,.2), inset 0 1px 0 rgba(255,255,255,.96);
        }
        .club-picker-dialog::backdrop { background: rgba(34,36,62,.28); backdrop-filter: blur(12px); }
        .club-picker-header { background: linear-gradient(145deg, rgba(255,255,255,.52), rgba(245,244,253,.28)); }
        .expanded-preview-header {
            background: rgba(255,255,255,.12);
            backdrop-filter: blur(24px) saturate(155%);
            -webkit-backdrop-filter: blur(24px) saturate(155%);
        }
        .canvas-wrap {
            border: 1px solid rgba(255,255,255,.74);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 12px 28px rgba(75,78,119,.08);
        }
        @media (prefers-reduced-transparency: reduce) {
            .editor, .preview-panel, .template-card, .color-fields .field, .match-row,
            .logo-upload, .btn, .league-tab, .club-logo-choice, .field input,
            .field textarea, .club-search, .field input[type="file"].file-input {
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                background-color: rgba(255,255,255,.96);
            }
        }
        *, *::before, *::after {
            transition-property: color, background-color, background-image, border-color, box-shadow, opacity, transform, filter, backdrop-filter;
            transition-duration: .18s;
            transition-timing-function: ease;
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                transition-duration: .01ms !important;
                animation-duration: .01ms !important;
            }
        }

        :root[data-theme="dark"] {
                color-scheme: dark;
                --page: #0b1220;
                --panel: #111b2b;
                --panel-2: #172337;
                --line: #29374d;
                --text: #f5f7fb;
                --muted: #a2b0c4;
            body {
                background:
                    radial-gradient(ellipse at 12% 0%, rgba(35,55,91,.72), transparent 36%),
                    radial-gradient(ellipse at 94% 15%, rgba(73,48,91,.4), transparent 32%),
                    #0b1220;
                color: #f5f7fb;
            }
            .topbar {
                border-bottom-color: rgba(255,255,255,.09);
                background: rgba(9,16,28,.72);
                box-shadow: 0 4px 24px rgba(0,0,0,.12);
            }
            .brand, .intro h1, .panel-heading h2, .preview-top h2,
            .template-card, .template-card-title { color: #f5f7fb; }
            .brand-icon { filter: none; }
            .top-note, .intro p, .template-card-description, .section-label span,
            .preview-size, .hint, .hint-inline, .field label span { color: #a2b0c4; }
            .editor, .preview-panel {
                border-color: rgba(180,205,245,.17);
                background: rgba(17,27,43,.66);
                box-shadow: 0 18px 48px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12);
            }
            .template-card {
                border-color: rgba(180,205,245,.18);
                background: linear-gradient(145deg, rgba(27,41,63,.78), rgba(17,27,43,.62));
                box-shadow: 0 16px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.1);
            }
            .template-card:hover, .template-card:focus-visible {
                border-color: rgba(143,179,255,.58);
                background: linear-gradient(145deg, rgba(38,57,86,.9), rgba(23,35,55,.82));
                box-shadow: 0 22px 52px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.16);
            }
            .template-card-action { color: #b8a8ff; }
            .field label, .field-label, .section-label strong { color: #d7dfed; }
            .field input:not([type="color"]):not([type="range"]):not([type="file"]),
            .field textarea, .match-row input[type="text"], .club-search,
            .canvas-inline-editor, .field input[type="file"].file-input {
                border-color: rgba(180,205,245,.2);
                background: linear-gradient(145deg, rgba(19,31,49,.82), rgba(13,23,38,.72));
                color: #f5f7fb;
                box-shadow: 0 5px 16px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.08);
            }
            .field input:not([type="color"]):not([type="range"]):not([type="file"])::placeholder,
            .field textarea::placeholder, .club-search input::placeholder { color: #8f9db2; }
            .field input:not([type="color"]):not([type="range"]):not([type="file"]):focus,
            .field textarea:focus, .match-row input[type="text"]:focus,
            .club-search:focus-within, .canvas-inline-editor:focus {
                border-color: rgba(155,135,239,.72);
                background: rgba(20,31,51,.96);
                color: #fff;
                box-shadow: 0 0 0 4px rgba(128,101,226,.2), 0 8px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.1);
            }
            .field input[type="color"] {
                border-color: rgba(180,205,245,.3);
                background: linear-gradient(145deg, rgba(35,49,72,.92), rgba(19,31,49,.82));
                box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12);
            }
            .color-fields .field {
                border-color: rgba(180,205,245,.16);
                background: linear-gradient(145deg, rgba(27,41,63,.72), rgba(17,27,43,.58));
                box-shadow: 0 7px 18px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.1);
            }
            .field input[type="range"].range-input {
                border-color: rgba(180,205,245,.2);
                background: linear-gradient(90deg, rgba(128,101,226,.22), rgba(49,65,91,.42));
                color-scheme: dark;
            }
            .field input[type="file"]::file-selector-button {
                border-color: rgba(180,165,255,.28);
                background: linear-gradient(145deg, rgba(67,58,107,.88), rgba(39,48,74,.84));
                color: #e8e3ff;
                box-shadow: 0 3px 9px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.12);
            }
            .field input[type="file"]::file-selector-button:hover { background: #51467e; }
            .brand-logo-upload { background: #26233b; }
            .match-row {
                border-color: rgba(180,205,245,.17);
                background: linear-gradient(145deg, rgba(27,41,63,.72), rgba(15,26,42,.66));
                box-shadow: 0 6px 16px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.1);
            }
            .match-row:hover {
                border-color: rgba(159,141,228,.48);
                background: linear-gradient(145deg, rgba(38,53,79,.9), rgba(24,35,55,.82));
                box-shadow: 0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
            }
            .logo-upload, .remove-row, .btn, .league-tab, .club-logo-choice, .template {
                border-color: rgba(180,205,245,.2);
                background: linear-gradient(145deg, rgba(35,49,72,.8), rgba(20,32,50,.72));
                box-shadow: 0 5px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.1);
                color: #e8eef9;
            }
            .btn:hover, .logo-upload:hover, .logo-upload:focus-within,
            .league-tab:hover, .club-logo-choice:hover, .club-logo-choice:focus-visible, .template:hover,
            button:hover {
                border-color: rgba(157,190,255,.58);
                background: linear-gradient(145deg, rgba(54,73,105,.92), rgba(31,46,70,.86));
                color: #fff;
                box-shadow: 0 10px 24px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.15);
            }
            .btn-add {
                border-color: rgba(180,165,255,.32);
                color: #d3c9ff;
                background: linear-gradient(145deg, rgba(67,58,107,.66), rgba(35,43,68,.72));
            }
            .btn-export {
                border-color: rgba(255,255,255,.38);
                background: linear-gradient(125deg, rgba(121,96,232,.96), rgba(63,157,205,.94));
                color: #fff;
            }
            .btn-export:hover {
                background: linear-gradient(125deg, #7055df, #3995c9);
                color: #fff;
            }
            .league-tab { color: #c2cee0; }
            .league-tab.is-active {
                border-color: rgba(143,179,255,.52);
                background: linear-gradient(145deg, rgba(95,116,163,.72), rgba(71,79,126,.66));
                color: #fff;
                box-shadow: 0 5px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.16);
            }
            .club-picker-dialog {
                border-color: rgba(180,205,245,.2);
                background: rgba(14,23,38,.9);
                color: #f5f7fb;
                box-shadow: 0 30px 100px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
            }
            .club-picker-header { background: linear-gradient(145deg, rgba(35,49,72,.58), rgba(17,27,43,.34)); }
            .club-picker-header h2 { color: #f5f7fb; }
            .club-picker-header p, .club-picker-note { color: #a2b0c4; }
            .league-tabs { border-bottom-color: rgba(255,255,255,.1); }
            .club-search { color: #a2b0c4; }
            .device-logo-button { background: linear-gradient(145deg, rgba(67,82,128,.72), rgba(38,51,79,.8)); color: #e8e3ff; }
            .club-logo-choice { color: #e7edf8; }
            .club-picker-dialog::backdrop { background: rgba(3,8,16,.7); }
            .expanded-preview { background: #0b1220; color: #f5f7fb; }
            .expanded-preview-header {
                border-bottom-color: rgba(255,255,255,.1);
                background: rgba(17,27,43,.66);
            }
            .expanded-preview-header span { color: #a2b0c4; }
            .canvas-inline-editor { background: rgba(20,31,51,.96); color: #f5f7fb; }
            .canvas-wrap {
                border-color: rgba(180,205,245,.2);
                background-color: #0a111d;
                background-image: linear-gradient(45deg,#121d2d 25%,transparent 25%),linear-gradient(-45deg,#121d2d 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#121d2d 75%),linear-gradient(-45deg,transparent 75%,#121d2d 75%);
                box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.2);
            }
            .toast { color: #78cba5; }
            @media (prefers-reduced-transparency: reduce) {
                .editor, .preview-panel, .template-card, .color-fields .field, .match-row,
                .logo-upload, .btn, .league-tab, .club-logo-choice, .field input,
                .field textarea, .club-search, .field input[type="file"].file-input {
                    background-color: rgba(17,27,43,.98);
                }
            }
        }

            .app-shell {
                display: block;
            }
            .app-content { min-width: 0; margin-left: 140px; }
            .app-sidebar {
                position: fixed;
                z-index: 20;
                top: 100px;
                left: max(28px, calc((100vw - 1440px) / 2 + 28px));
                width: 118px;
                height: min(620px, max(0px, calc(100vh - 118px)));
                overflow-y: auto;
                overscroll-behavior: contain;
                padding: 12px 9px;
                border: 1px solid rgba(255,255,255,.78);
                border-radius: 22px;
                background: #f8f8fd;
                box-shadow: 0 16px 38px rgba(77,78,125,.1), inset 0 1px 0 rgba(255,255,255,.9);
            }
            .app-navigation { display: grid; gap: 9px; }
            .app-nav-item {
                display: grid;
                min-height: 78px;
                justify-items: center;
                align-content: center;
                gap: 5px;
                padding: 8px 4px;
                border: 1px solid transparent;
                border-radius: 15px;
                background: transparent;
                color: #746a94;
                font-size: 11px;
                font-weight: 700;
                line-height: 1.2;
                cursor: pointer;
                text-decoration: none;
            }
            .app-nav-item:hover {
                transform: translateY(-1px);
                border-color: rgba(255,255,255,.88);
                background: rgba(255,255,255,.56);
                color: #6048bd;
                box-shadow: 0 7px 16px rgba(83,73,135,.08), inset 0 1px 0 #fff;
            }
            .app-nav-item:focus-visible { outline: 2px solid #8b76dc; outline-offset: 3px; }
            .app-nav-item.is-active {
                border-color: rgba(255,255,255,.92);
                background: #e9e5ff;
                color: #6349c5;
                box-shadow: 0 7px 18px rgba(95,77,171,.12), inset 0 1px 0 #fff;
            }
            .app-nav-icon {
                display: block;
                width: 24px;
                height: 24px;
                object-fit: contain;
            }
            .home-view .intro { margin-top: clamp(42px, 10vh, 120px); margin-bottom: 34px; }
            .home-eyebrow {
                display: inline-block;
                margin-bottom: 8px;
                color: #765bd7;
                font-size: 11px;
                font-weight: 850;
                letter-spacing: .14em;
            }
            .home-view .intro h1, .live-heading h1 {
                max-width: 760px;
                margin: 0 auto 9px;
                color: #292c40;
                font-size: clamp(28px, 4vw, 44px);
                letter-spacing: -.05em;
                line-height: 1.08;
            }
            .home-view .intro p, .live-heading p { color: #777f96; }
            .home-shortcuts {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 16px;
                max-width: 840px;
                margin: 0 auto;
            }
            .home-shortcut {
                display: grid;
                grid-template-columns: 44px minmax(0, 1fr) 20px;
                min-height: 94px;
                align-items: center;
                gap: 13px;
                padding: 16px;
                border: 1px solid rgba(255,255,255,.88);
                border-radius: 18px;
                background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(243,241,253,.62));
                color: #373b50;
                text-align: left;
                cursor: pointer;
                box-shadow: 0 12px 28px rgba(77,78,125,.08), inset 0 1px 0 rgba(255,255,255,.96);
                backdrop-filter: blur(18px) saturate(150%);
                -webkit-backdrop-filter: blur(18px) saturate(150%);
            }
            .home-shortcut:hover {
                transform: translateY(-3px);
                border-color: rgba(164,145,235,.6);
                box-shadow: 0 18px 36px rgba(92,76,172,.14), inset 0 1px 0 #fff;
            }
            .home-shortcut-icon {
                display: grid;
                width: 42px;
                height: 42px;
                place-items: center;
                border-radius: 13px;
                background: rgba(128,101,226,.12);
                color: #7559d5;
                font-size: 22px;
            }
            .home-shortcut-icon img { width: 22px; height: 22px; object-fit: contain; }
            .home-shortcut > span:nth-child(2) { display: grid; gap: 4px; }
            .home-shortcut strong { font-size: 14px; }
            .home-shortcut small { color: #777f96; font-size: 11px; }
            .home-shortcut-arrow { color: #765bd7; font-size: 20px; }
            .templates-view .intro { margin-top: 0; }
            .live-view { max-width: 1120px; margin: 0 auto; }
            .live-matches-view { max-width: 1120px; margin: 0 auto; }
            .live-match-detail-view { max-width: 1000px; margin: 0 auto; }
            .club-profile-view { max-width: 1120px; margin: 0 auto; }
            .club-search-panel, .club-profile-panel {
                padding: clamp(15px, 3vw, 22px);
                border: 1px solid rgba(255,255,255,.84);
                border-radius: 18px;
                background: linear-gradient(150deg, rgba(255,255,255,.82), rgba(245,246,251,.7));
                box-shadow: 0 12px 30px rgba(72,76,119,.08), inset 0 1px 0 rgba(255,255,255,.92);
            }
            .club-search-panel { margin: 0 0 24px; }
            .club-search-copy h2, .club-profile-panel-heading h2 { margin: 0; color: #34394e; font-size: 16px; }
            .club-search-copy p, .club-profile-panel-heading p { margin: 5px 0 12px; color: #858a9c; font-size: 11px; line-height: 1.5; }
            .club-search-field { display: block; }
            .club-search-field input {
                width: 100%;
                min-height: 46px;
                padding: 0 14px;
                border: 1px solid rgba(125,132,160,.24);
                border-radius: 12px;
                outline: none;
                background: rgba(255,255,255,.8);
                color: #34394e;
                font: inherit;
                font-size: 13px;
                box-shadow: inset 0 1px 3px rgba(45,52,75,.04);
            }
            .club-search-field input:focus { border-color: #8b76dc; box-shadow: 0 0 0 3px rgba(139,118,220,.14); }
            .club-search-status { min-height: 16px; margin: 9px 1px 0; color: #858a9c; font-size: 10px; }
            .club-search-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 10px; }
            .club-search-result {
                display: flex;
                min-width: 0;
                min-height: 58px;
                align-items: center;
                gap: 10px;
                padding: 8px 11px;
                border: 1px solid rgba(125,132,160,.14);
                border-radius: 12px;
                background: rgba(255,255,255,.65);
                color: #34394e;
                text-decoration: none;
                transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
            }
            .club-search-result:hover, .club-search-result:focus-visible { transform: translateY(-1px); border-color: rgba(139,118,220,.5); box-shadow: 0 7px 16px rgba(72,76,119,.1); outline: none; }
            .club-logo-link, .club-logo-visual {
                position: relative;
                display: inline-grid;
                flex: 0 0 auto;
                place-items: center;
                overflow: hidden;
                isolation: isolate;
                border: 1px solid rgba(255,255,255,.58);
                border-radius: 17px;
                background: linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,.08));
                box-shadow: 0 5px 15px rgba(49,60,98,.12), inset 0 1px 0 rgba(255,255,255,.72);
                perspective: 600px;
                transform-style: preserve-3d;
            }
            .club-logo-link { color: inherit; cursor: pointer; text-decoration: none; }
            .club-logo-link::after, .club-logo-visual::after {
                position: absolute;
                z-index: 2;
                inset: -65% -45%;
                background: linear-gradient(115deg, transparent 43%, rgba(255,255,255,.08) 47%, rgba(255,255,255,.9) 51%, rgba(255,255,255,.18) 56%, transparent 61%);
                content: "";
                opacity: 0;
                pointer-events: none;
                transform: translate(-38%, -38%);
                transition: opacity .18s ease, transform .72s cubic-bezier(.2,.7,.2,1);
            }
            .club-logo-link img, .club-logo-visual img {
                position: relative;
                z-index: 1;
                display: block;
                transform: translateZ(0);
                transition: transform .42s cubic-bezier(.2,.7,.2,1), filter .42s ease;
            }
            .club-logo-link:hover, .club-logo-link:focus-visible, .club-logo-visual:hover {
                border-color: rgba(255,255,255,.94);
                background: linear-gradient(145deg, rgba(255,255,255,.64), rgba(198,214,255,.2));
                box-shadow: 0 10px 24px rgba(57,70,117,.2), inset 0 1px 0 #fff;
                transform: translateY(-1px) rotateX(4deg) rotateY(-5deg);
            }
            .club-logo-link:hover::after, .club-logo-link:focus-visible::after, .club-logo-visual:hover::after {
                opacity: 1;
                transform: translate(38%, 38%);
            }
            .club-logo-link:hover img, .club-logo-link:focus-visible img, .club-logo-visual:hover img {
                filter: drop-shadow(0 5px 7px rgba(31,45,79,.34));
                transform: perspective(500px) rotateX(9deg) rotateY(-11deg) translateZ(8px) scale(1.1);
            }
            .club-logo-link:focus-visible { outline: 2px solid #8065e2; outline-offset: 3px; }
            .club-search-logo { width: 34px; height: 34px; flex: 0 0 auto; object-fit: contain; }
            .club-search-result-copy { display: grid; min-width: 0; gap: 3px; }
            .club-search-result-copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
            .club-search-result-copy small { color: #858a9c; font-size: 9px; }
            .club-search-arrow { margin-left: auto; color: #7964ce; font-size: 17px; }
            .club-profile-header {
                display: flex;
                align-items: center;
                gap: 18px;
                margin-bottom: 16px;
                padding: clamp(20px, 4vw, 32px);
                border: 1px solid rgba(255,255,255,.84);
                border-radius: 20px;
                background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(240,241,250,.7));
                box-shadow: 0 14px 36px rgba(72,76,119,.1), inset 0 1px 0 #fff;
            }
            .club-profile-logo { width: clamp(56px, 10vw, 86px); height: clamp(56px, 10vw, 86px); flex: 0 0 auto; object-fit: contain; }
            .club-profile-title-copy { min-width: 0; }
            .club-profile-title-copy h1 { margin: 4px 0; color: #34394e; font-size: clamp(24px, 4vw, 36px); overflow-wrap: anywhere; }
            .club-profile-title-copy p { margin: 0; color: #858a9c; font-size: 11px; }
            .club-profile-content { display: grid; gap: 13px; }
            .club-profile-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
            .club-profile-panel { min-width: 0; }
            .club-profile-panel-heading { margin-bottom: 12px; }
            .club-standing-position { display: flex; align-items: baseline; gap: 10px; }
            .club-standing-position strong { color: #6651be; font-size: 32px; font-weight: 900; }
            .club-standing-position span, .club-standing-record { color: #73798c; font-size: 11px; }
            .club-standing-record { margin: 5px 0 0; line-height: 1.5; }
            .club-roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 7px; }
            .club-roster-player { display: flex; min-width: 0; min-height: 54px; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid rgba(125,132,160,.1); border-radius: 10px; background: rgba(255,255,255,.44); }
            .club-roster-number { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: rgba(113,91,204,.1); color: #6651be; font-size: 11px; font-weight: 850; }
            .club-roster-info { display: grid; min-width: 0; gap: 4px; }
            .club-roster-info strong { overflow: hidden; color: #41465b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
            .club-roster-info small { color: #858a9c; font-size: 9px; }
            .club-player-table-wrap { overflow-x: auto; }
            .club-player-table { width: 100%; border-collapse: collapse; color: #62677b; font-size: 11px; }
            .club-player-table th, .club-player-table td { padding: 9px 8px; border-bottom: 1px solid rgba(125,132,160,.13); text-align: center; white-space: nowrap; }
            .club-player-table thead th { color: #858a9c; font-size: 9px; font-weight: 750; }
            .club-player-table tbody th { color: #41465b; text-align: left; }
            .club-player-points { color: #6651be; font-weight: 900; }
            .club-match-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
            .club-match-card {
                min-width: 0;
                padding: 12px 14px;
                border: 1px solid rgba(255,255,255,.62);
                border-radius: 20px;
                background: linear-gradient(135deg, rgba(255,255,255,.38), rgba(255,255,255,.16));
                box-shadow: 0 10px 26px rgba(48,59,95,.1), inset 0 1px 0 rgba(255,255,255,.62);
                backdrop-filter: blur(20px) saturate(185%);
                -webkit-backdrop-filter: blur(20px) saturate(185%);
                transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
            }
            .club-match-card.is-win {
                border-color: rgba(0,255,128,.72);
                background: linear-gradient(115deg, rgba(0,230,118,.82), rgba(105,255,0,.68));
                color: #07351d;
                box-shadow: 0 8px 22px rgba(0,210,95,.2), inset 0 1px 0 rgba(255,255,255,.58);
                backdrop-filter: blur(18px) saturate(185%);
                -webkit-backdrop-filter: blur(18px) saturate(185%);
            }
            .club-match-card.is-loss {
                border-color: rgba(255,92,110,.78);
                background: linear-gradient(115deg, rgba(255,23,68,.82), rgba(255,82,82,.68));
                color: #4b0813;
                box-shadow: 0 8px 22px rgba(255,25,60,.2), inset 0 1px 0 rgba(255,255,255,.58);
                backdrop-filter: blur(18px) saturate(185%);
                -webkit-backdrop-filter: blur(18px) saturate(185%);
            }
            .club-match-card.is-draw {
                border-color: rgba(77,198,255,.76);
                background: linear-gradient(115deg, rgba(0,176,255,.8), rgba(72,225,255,.66));
                color: #07314a;
                box-shadow: 0 8px 22px rgba(0,160,235,.18), inset 0 1px 0 rgba(255,255,255,.58);
                backdrop-filter: blur(18px) saturate(185%);
                -webkit-backdrop-filter: blur(18px) saturate(185%);
            }
            .club-match-card.is-live {
                border-color: rgba(225,61,83,.35);
                background: linear-gradient(135deg, rgba(255,240,242,.88), rgba(255,255,255,.68));
                box-shadow: 0 8px 20px rgba(225,61,83,.1), inset 0 1px 0 rgba(255,255,255,.8);
            }
            .club-match-card:hover, .club-match-card:focus-visible {
                transform: translateY(-2px);
                border-color: rgba(255,255,255,.92);
                box-shadow: 0 16px 34px rgba(48,59,95,.18), inset 0 1px 0 rgba(255,255,255,.78);
                outline: 2px solid rgba(128,101,226,.58);
                outline-offset: 2px;
            }
            .club-live-match-panel .club-match-link { min-height: 58px; }
            .club-live-match-panel .club-match-info small { color: #d34759; font-weight: 800; }
            .club-live-match-panel .club-match-score { color: #d92f45; }
            .club-match-link { display: flex; min-width: 0; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
            .club-match-link:hover .club-match-info strong, .club-match-link:focus-visible .club-match-info strong { color: #6651be; }
            .club-match-opponent-logo { width: 30px; height: 30px; flex: 0 0 auto; object-fit: contain; }
            .club-match-info { display: grid; min-width: 0; gap: 4px; }
            .club-match-info strong { overflow: hidden; color: #41465b; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
            .club-match-info small { color: #858a9c; font-size: 9px; }
            .club-match-score { margin-left: auto; color: #34394e; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
            .club-profile-warning { margin: 5px 0; color: #ae6c1a; font-size: 10px; line-height: 1.5; }
            .back-to-matches { min-height: 38px; margin: 0 0 18px; padding-inline: 13px; font-size: 11px; }
            .live-match-detail-header {
                margin: 0 0 18px;
                padding: clamp(18px, 4vw, 32px);
                border: 1px solid rgba(255,255,255,.84);
                border-radius: 22px;
                background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(240,241,250,.7));
                box-shadow: 0 14px 36px rgba(72,76,119,.1), inset 0 1px 0 #fff;
                backdrop-filter: blur(18px) saturate(145%);
                -webkit-backdrop-filter: blur(18px) saturate(145%);
            }
            .live-match-detail-league { display: flex; align-items: center; gap: 10px; color: #70768b; font-size: 13px; font-weight: 800; }
            .live-match-detail-header .live-match-detail-league { color: #35445c; }
            .live-match-detail-header .live-match-detail-meta { color: #4e5d74; }
            .live-match-detail-header .live-match-phase {
                border-color: rgba(64,78,105,.2);
                background: rgba(255,255,255,.76);
                color: #35445c;
                box-shadow: 0 2px 8px rgba(31,44,68,.1);
            }
            .live-match-detail-header .live-match-phase.is-upcoming { color: #285b91; }
            .live-match-detail-scoreboard {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
                align-items: center;
                gap: clamp(10px, 4vw, 30px);
                margin: 24px 0 16px;
            }
            .live-match-detail-center { display: grid; justify-items: center; gap: 6px; min-width: 100px; }
            .live-match-detail-team { display: grid; justify-items: center; gap: 10px; min-width: 0; color: #17243a; text-align: center; overflow-wrap: anywhere; }
            .live-match-detail-team-logo {
                width: clamp(46px, 8vw, 76px);
                height: clamp(46px, 8vw, 76px);
                object-fit: contain;
                filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 3px 6px rgba(0,0,0,.3));
            }
            .live-match-detail-score { color: #17243a; font-size: clamp(28px, 6vw, 48px); font-variant-numeric: tabular-nums; font-weight: 900; white-space: nowrap; }
            .live-match-detail-score.is-fixture { color: #4e5d74; }
            .live-match-detail-meta { margin: 0; color: #4e5d74; font-size: 12px; text-align: center; }
            .match-clock-panel {
                display: grid;
                justify-items: center;
                gap: 1px;
                width: fit-content;
                min-width: 100px;
                padding: 3px 8px;
                border: 0;
                border-radius: 9px;
                background: transparent;
                color: #16834e;
            }
            .match-clock-panel.is-live { color: #b4233c; }
            .match-clock-panel.is-countdown { color: #087443; }
            .match-clock-label { font-size: 10px; font-weight: 750; }
            .match-clock-value { font-size: clamp(18px, 2.5vw, 24px); font-variant-numeric: tabular-nums; font-weight: 900; letter-spacing: .02em; white-space: nowrap; }
            .match-clock-value.is-days { font-size: clamp(14px, 2.2vw, 19px); letter-spacing: 0; }
            .live-match-detail-content {
                padding: clamp(14px, 3vw, 22px);
                border: 1px solid rgba(255,255,255,.84);
                border-radius: 20px;
                background: linear-gradient(150deg, rgba(255,255,255,.82), rgba(245,246,251,.7));
                box-shadow: 0 12px 30px rgba(72,76,119,.08);
            }
            .live-match-detail-content .match-detail-tab { min-height: 42px; font-size: 12px; }
            .live-match-detail-content .match-statistics-heading { font-size: 12px; }
            .live-match-detail-content .match-stat-value { font-size: 13px; }
            .live-match-detail-content .match-stat-label { font-size: 11px; }
            .live-match-detail-content .match-stat-row { margin-bottom: 14px; }
            .live-match-detail-content .match-stat-bar { height: 6px; }
            .live-match-card {
                display: block;
                color: inherit;
                text-decoration: none;
                transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
            }
            .live-match-card:hover, .live-match-card:focus-visible {
                transform: translateY(-3px);
                border-color: rgba(139,118,220,.62);
                box-shadow: 0 18px 38px rgba(72,76,119,.16), inset 0 1px 0 #fff;
                outline: 2px solid rgba(128,101,226,.58);
                outline-offset: 2px;
            }
            .live-match-card-action { display: block; padding: 0 15px 14px; color: #6855bd; font-size: 11px; font-weight: 800; text-align: right; }
            .live-heading {
                display: flex;
                align-items: end;
                justify-content: space-between;
                gap: 18px;
                margin: 4px 0 24px;
            }
            .live-heading h1 { margin: 0 0 8px; font-size: clamp(28px, 3.4vw, 38px); }
            .live-heading p { margin: 0; }
            .live-match-toolbar { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; }
            .live-match-refresh { min-height: 38px; padding-inline: 13px; font-size: 11px; }
            .club-search-toggle {
                min-height: 38px;
                padding-inline: 13px;
                border-color: rgba(255,255,255,.68);
                background: rgba(255,255,255,.8);
                color: #424a60;
                font-size: 11px;
                box-shadow: 0 6px 16px rgba(10,24,38,.12);
            }
            .club-search-toggle > span { font-size: 17px; line-height: 1; }
            .live-match-refresh:disabled { cursor: wait; opacity: .65; }
            .live-status {
                display: inline-flex;
                flex: 0 0 auto;
                align-items: center;
                gap: 8px;
                padding: 9px 12px;
                border: 1px solid rgba(255,255,255,.86);
                border-radius: 999px;
                background: rgba(255,255,255,.66);
                color: #667089;
                font-size: 11px;
                box-shadow: 0 5px 14px rgba(75,78,119,.06), inset 0 1px 0 #fff;
            }
            .live-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #34b77a; box-shadow: 0 0 0 4px rgba(52,183,122,.12); }
            .live-status.is-loading .live-status-dot { background: #e7a340; box-shadow: 0 0 0 4px rgba(231,163,64,.13); }
            .live-status.is-error .live-status-dot { background: #dd536b; box-shadow: 0 0 0 4px rgba(221,83,107,.13); }
            .live-league-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
            .live-league-tab {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 7px;
                min-height: 40px;
                padding: 0 15px;
                border: 1px solid rgba(255,255,255,.82);
                border-radius: 999px;
                background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(237,239,250,.62));
                color: #646a81;
                font-size: 12px;
                font-weight: 750;
                cursor: pointer;
                box-shadow: 0 5px 14px rgba(75,78,119,.07), inset 0 1px 0 rgba(255,255,255,.94);
                backdrop-filter: blur(16px) saturate(155%);
                -webkit-backdrop-filter: blur(16px) saturate(155%);
            }
            .live-league-tab img { display: block; width: 23px; height: 23px; flex: 0 0 auto; padding: 2px; border-radius: 50%; background: rgba(255,255,255,.94); object-fit: contain; }
            .live-league-tab span { min-width: 0; }
            .live-league-tab.is-active {
                border-color: rgba(139,118,220,.58);
                background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(229,223,255,.72));
                color: #5948ad;
                box-shadow: 0 6px 16px rgba(95,77,171,.12), inset 0 1px 0 #fff;
            }
            .live-match-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
            .live-match-state-filters {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin: 0 0 18px;
            }
            .live-match-state-filter {
                display: inline-flex;
                min-height: 36px;
                align-items: center;
                justify-content: center;
                gap: 7px;
                padding: 0 13px;
                border: 1px solid rgba(128,137,165,.2);
                border-radius: 999px;
                background: rgba(255,255,255,.68);
                color: #656d82;
                font-size: 11px;
                font-weight: 750;
                cursor: pointer;
            }
            .live-match-state-filter:hover { border-color: rgba(139,118,220,.42); color: #5948ad; }
            .live-match-state-filter.is-active {
                border-color: rgba(42,174,116,.34);
                background: #e9f8f0;
                color: #19794f;
                box-shadow: 0 5px 14px rgba(34,145,96,.09);
            }
            .live-state-dot { width: 8px; height: 8px; border-radius: 50%; background: #28b477; box-shadow: 0 0 0 3px rgba(40,180,119,.14); }
            .live-match-filter {
                display: inline-flex;
                min-height: 39px;
                align-items: center;
                justify-content: center;
                gap: 7px;
                padding: 0 12px;
                border: 1px solid rgba(255,255,255,.86);
                border-radius: 12px;
                background: rgba(255,255,255,.64);
                color: #696d81;
                font-size: 11px;
                font-weight: 750;
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(75,78,119,.06), inset 0 1px 0 #fff;
            }
            .live-match-filter img, .live-match-league-logo {
                display: block;
                width: 23px;
                height: 23px;
                flex: 0 0 auto;
                padding: 2px;
                border-radius: 50%;
                background: rgba(255,255,255,.96);
                object-fit: contain;
            }
            .live-match-filter.is-active {
                border-color: rgba(139,118,220,.58);
                background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(229,223,255,.78));
                color: #5948ad;
                box-shadow: 0 6px 16px rgba(95,77,171,.12), inset 0 1px 0 #fff;
            }
            .live-match-league-group { margin: 0 0 24px; }
            .live-match-section { margin: 0 0 30px; }
            .live-match-section-heading { margin: 0 0 14px; color: #34364b; font-size: 20px; font-weight: 900; letter-spacing: -.025em; }
            .live-match-section.is-upcoming .live-match-section-heading { color: #5948ad; }
            .live-match-section.is-completed .live-match-section-heading { color: #21835c; }
            .live-match-group-heading {
                display: flex;
                align-items: center;
                gap: 9px;
                margin: 0 0 10px;
                color: #34364b;
                font-size: 15px;
                font-weight: 850;
            }
            .live-match-group-heading .live-match-league-logo { width: 27px; height: 27px; }
            .live-match-count {
                display: grid;
                min-width: 23px;
                height: 23px;
                place-items: center;
                margin-left: auto;
                border-radius: 999px;
                background: rgba(40,177,119,.12);
                color: #21835c;
                font-size: 11px;
            }
            .live-match-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 12px; }
            .live-match-card {
                container-type: inline-size;
                min-width: 0;
                align-self: start;
                overflow: hidden;
                border: 1px solid rgba(255,255,255,.9);
                border-radius: 18px;
                background: linear-gradient(150deg, rgba(255,255,255,.9), rgba(247,248,253,.74));
                box-shadow: 0 13px 34px rgba(72,76,119,.08), inset 0 1px 0 #fff;
                backdrop-filter: blur(18px) saturate(145%);
                -webkit-backdrop-filter: blur(18px) saturate(145%);
            }
            .live-match-card-header {
                display: flex;
                min-height: 46px;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                padding: 9px 15px;
                border-bottom: 1px solid rgba(115,122,149,.1);
            }
            .live-match-league { display: flex; min-width: 0; align-items: center; gap: 8px; color: #72778b; font-size: 11px; font-weight: 750; }
            .live-match-league-logo { width: 22px; height: 22px; }
            .live-match-phase {
                flex: 0 0 auto;
                padding: 5px 9px;
                border: 1px solid rgba(224,79,114,.13);
                border-radius: 999px;
                background: rgba(224,79,114,.09);
                color: #d34769;
                font-size: 10px;
                font-variant-numeric: tabular-nums;
                font-weight: 850;
            }
            .live-match-phase.is-upcoming {
                border-color: rgba(70,126,198,.18);
                background: rgba(70,126,198,.09);
                color: #416fa8;
            }
            .live-match-scoreboard {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
                align-items: center;
                gap: 12px;
                padding: 20px 16px 17px;
            }
            .live-match-team { display: flex; min-width: 0; align-items: center; gap: 10px; color: #36394d; font-size: 13px; font-weight: 750; }
            .live-match-team.is-away { flex-direction: row-reverse; text-align: right; }
            .live-match-team-logo {
                width: 34px;
                height: 34px;
                flex: 0 0 auto;
                object-fit: contain;
                filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 3px 5px rgba(0,0,0,.28));
            }
            .live-match-team-name { display: -webkit-box; min-width: 0; overflow: hidden; line-height: 1.2; overflow-wrap: anywhere; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
            .live-match-score { color: #282c41; font-size: clamp(20px, 2.4vw, 30px); font-variant-numeric: tabular-nums; font-weight: 900; letter-spacing: -.06em; white-space: nowrap; }
            .live-match-score.is-fixture { color: #9297a7; font-size: 13px; letter-spacing: .04em; }
            @container (max-width: 300px) {
                .live-match-card-header { min-height: 38px; gap: 6px; padding: 6px 9px; }
                .live-match-league { gap: 5px; font-size: 9px; }
                .live-match-league-logo { width: 18px; height: 18px; }
                .live-match-phase { padding: 3px 6px; font-size: 9px; }
                .live-match-scoreboard { gap: 5px; padding: 12px 9px 10px; }
                .live-match-team { gap: 5px; font-size: 10px; }
                .live-match-team-logo { width: 24px; height: 24px; }
                .live-match-score { font-size: 21px; }
                .live-match-score.is-fixture { font-size: 11px; }
                .live-match-card-action { padding: 0 9px 8px; font-size: 10px; }
            }
            .live-match-details-toggle {
                display: block;
                width: calc(100% - 28px);
                min-height: 36px;
                margin: 0 14px 13px;
                border: 1px solid rgba(127,109,204,.18);
                border-radius: 11px;
                background: rgba(128,101,226,.07);
                color: #6855bd;
                font-size: 11px;
                font-weight: 800;
                cursor: pointer;
            }
            .live-match-details-toggle:hover { background: rgba(128,101,226,.13); }
            .live-match-card-body { padding: 0 14px 14px; }
            .live-match-card-body:empty { display: none; }
            .match-detail-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; padding: 4px; border-radius: 11px; background: rgba(100,105,132,.08); }
            .match-detail-tab { flex: 1; min-height: 33px; border: 0; border-radius: 8px; background: transparent; color: #73798e; font-size: 11px; font-weight: 800; cursor: pointer; }
            .match-detail-tab[aria-pressed="true"] { background: #fff; color: #5c49b2; box-shadow: 0 2px 8px rgba(55,59,93,.09); }
            .match-detail-content { min-height: 80px; }
            .match-statistics-heading, .match-stat-row {
                display: grid;
                grid-template-columns: minmax(0, 1fr) minmax(110px, 1.4fr) minmax(0, 1fr);
                align-items: center;
                gap: 8px;
            }
            .match-stat-secondary-grid {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0 18px;
            }
            .match-stat-secondary-grid .match-stat-row { align-content: start; }
            .match-statistics-heading { margin: 0 0 9px; color: #9297a7; font-size: 9px; font-weight: 800; }
            .match-statistics-heading span:first-child, .match-statistics-heading span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            .match-statistics-heading span:last-child { text-align: right; }
            .match-statistics-heading span:nth-child(2) { text-align: center; }
            .match-events { margin: 0 0 12px; padding: 8px; border: 1px solid rgba(116,123,151,.13); border-radius: 11px; background: rgba(255,255,255,.54); }
            .match-events-heading { margin: 0 0 6px; color: #454a60; font-size: 11px; font-weight: 850; }
            .match-events-list { position: relative; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
            .match-events-list::before { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(116,123,151,.16); content: ""; }
            .match-event { display: grid; width: calc(50% - 10px); grid-template-columns: 34px 18px minmax(0, 1fr); align-items: center; gap: 4px; min-height: 32px; padding: 4px 6px; border-radius: 7px; background: rgba(105,111,138,.06); }
            .match-event.is-away { align-self: flex-end; grid-template-columns: minmax(0, 1fr) 18px 34px; }
            .match-event.is-away .match-event-minute { grid-column: 3; grid-row: 1; text-align: right; }
            .match-event.is-away .match-event-marker { grid-column: 2; grid-row: 1; }
            .match-event.is-away .match-event-copy { grid-column: 1; grid-row: 1; justify-content: flex-end; text-align: right; }
            .match-event.is-neutral { align-self: center; width: 100%; }
            .match-event-minute { color: #5e6480; font-size: 10px; font-variant-numeric: tabular-nums; font-weight: 850; white-space: nowrap; }
            .match-event-marker { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 5px; background: rgba(105,111,138,.1); font-size: 11px; }
            .match-event-copy { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            .match-event-detail { color: #757b8f; font-size: 9px; }
            .match-events-empty { margin: 0; color: #858a9c; font-size: 9px; }
            .match-events-empty { margin: 0; color: #858a9c; font-size: 10px; }
            .match-stat-row { margin: 0 0 9px; }
            .match-stat-value { color: #43475b; font-size: 10px; font-variant-numeric: tabular-nums; font-weight: 800; }
            .match-stat-row > .match-stat-value:last-of-type { text-align: right; }
            .match-stat-label { color: #7c8193; font-size: 9px; text-align: center; }
            .match-stat-bar { display: flex; grid-column: 1 / -1; height: 4px; overflow: hidden; gap: 3px; border-radius: 9px; background: rgba(105,111,138,.08); }
            .match-stat-bar-home, .match-stat-bar-away { height: 100%; border-radius: inherit; }
            .match-stat-bar-home { background: var(--match-home-kit-color, #8065e2); }
            .match-stat-bar-away { margin-left: auto; background: var(--match-away-kit-color, #df496e); }
            .match-lineups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; container-type: inline-size; }
            .match-lineup-export { display: flex; grid-column: 1 / -1; flex-wrap: wrap; align-items: center; gap: 8px; }
            .match-lineup-export .btn { min-height: 36px; padding-inline: 12px; font-size: 11px; }
            .match-lineup-export-status { color: #73798c; font-size: 10px; }
            .match-lineup-team { min-width: 0; padding: 12px; border: 1px solid rgba(116,123,151,.12); border-radius: 13px; background: rgba(255,255,255,.68); }
            .match-lineup-heading { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; color: #373b50; font-size: 11px; font-weight: 850; }
            .match-lineup-heading .match-team-logo { width: 23px; height: 23px; }
            .match-lineup-formation { margin-left: auto; color: #85899a; font-size: 9px; }
            .match-lineup-source { color: #85899a; font-size: 9px; font-weight: 650; }
            .match-lineup-pitch {
                display: flex;
                grid-column: 1 / -1;
                width: min(100%, 420px);
                height: min(630px, 150cqw);
                flex-direction: column;
                justify-content: stretch;
                overflow: hidden;
                margin-inline: auto;
                padding: 3%;
                border: 1px solid rgba(255,255,255,.34);
                border-radius: 10px;
                background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url("../images/stadium.png") center / 100% 100% no-repeat;
                box-shadow: inset 0 0 24px rgba(5,35,22,.16);
            }
            .match-pitch-half { display: flex; min-height: 0; flex: 1 1 50%; flex-direction: column; justify-content: space-between; gap: 3px; }
            .match-pitch-half.is-home .match-pitch-team-label { order: -1; }
            .match-pitch-half.is-away .match-pitch-team-label { order: 1; margin-top: auto; }
            .match-pitch-team-label { display: flex; min-height: 20px; align-items: center; justify-content: center; gap: 4px; padding: 2px 7px; border: 1px solid rgba(255,255,255,.32); border-radius: 6px; background: rgba(14,24,37,.8); color: #fff; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.75); }
            .match-pitch-team-label strong { max-width: 65%; overflow: hidden; font-size: clamp(9px, 2.8cqw, 11px); text-overflow: ellipsis; white-space: nowrap; }
            .match-pitch-team-logo { width: 16px; height: 16px; object-fit: contain; }
            .match-pitch-formation { color: rgba(255,255,255,.9); font-size: clamp(8px, 2.3cqw, 9px); font-weight: 750; white-space: nowrap; }
            .match-pitch-line { display: flex; min-width: 0; min-height: 0; flex: 1 1 0; justify-content: space-evenly; align-items: center; gap: 3px; }
            .match-pitch-player {
                position: relative;
                display: grid;
                min-width: 0;
                flex: 1 1 0;
                justify-items: center;
                gap: 2px;
                color: #fff;
                text-align: center;
                text-shadow: 0 1px 3px rgba(0,0,0,.95);
            }
            .match-pitch-shirt {
                display: grid;
                width: clamp(23px, 7cqw, 29px);
                height: clamp(23px, 7cqw, 29px);
                place-items: center;
                border: 2px solid #fff;
                border-radius: 10px 10px 13px 13px;
                background: var(--match-kit-color, linear-gradient(145deg, #4932bd, #7659e4));
                box-shadow: 0 3px 9px rgba(0,0,0,.28);
                color: var(--match-kit-text-color, #fff);
                font-size: 12px;
                font-weight: 950;
                text-shadow: none;
            }
            .match-pitch-player-name {
                display: -webkit-box;
                max-width: 100%;
                overflow: hidden;
                font-size: clamp(9px, 2.8cqw, 11px);
                font-weight: 850;
                line-height: 1.15;
                overflow-wrap: anywhere;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            .match-lineup-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
            .match-lineup-player { display: grid; grid-template-columns: 29px minmax(0, 1fr); gap: 7px; align-items: baseline; color: #62677b; font-size: 10px; }
            .match-lineup-position { color: #8b7bd0; font-size: 9px; font-variant-numeric: tabular-nums; font-weight: 800; }
            .match-lineup-name { overflow-wrap: anywhere; }
            .match-lineup-substitutes-heading { margin: 12px 0 6px; color: #8a8f9f; font-size: 9px; font-weight: 850; text-transform: uppercase; }
            .match-lineup-list.is-substitutes { max-height: 140px; overflow: auto; }
            .match-detail-note { grid-column: 1 / -1; margin: 0 0 10px; color: #8b829e; font-size: 10px; line-height: 1.45; }
            .match-preview-section { display: grid; gap: 10px; }
            .match-form-team { min-width: 0; padding: 11px; border: 1px solid rgba(116,123,151,.12); border-radius: 13px; background: rgba(255,255,255,.62); }
            .match-form-team .match-lineup-heading { margin-bottom: 9px; }
            .match-form-list, .match-h2h-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
            .match-form-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-height: 30px; padding: 4px 7px; border-radius: 8px; background: rgba(105,111,138,.06); color: #646a7f; font-size: 10px; }
            .match-form-result { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 6px; font-size: 9px; font-weight: 900; }
            .match-form-item.is-win .match-form-result { background: rgba(45,175,112,.13); color: #21835c; }
            .match-form-item.is-draw .match-form-result { background: rgba(132,142,165,.15); color: #6d7488; }
            .match-form-item.is-loss .match-form-result { background: rgba(224,79,114,.12); color: #c84863; }
            .match-form-opponent { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            .match-form-score { color: #41465b; font-weight: 850; font-variant-numeric: tabular-nums; }
            .match-form-date, .match-h2h-date { color: #9297a7; font-size: 9px; white-space: nowrap; }
            .match-series-summary { margin: 0; color: #555b70; font-size: 12px; font-weight: 800; text-align: center; }
            .match-h2h-item { display: grid; grid-template-columns: 82px minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 8px; min-height: 38px; padding: 6px 8px; border: 1px solid rgba(116,123,151,.12); border-radius: 9px; color: #656b80; font-size: 10px; }
            .match-h2h-home { text-align: right; }
            .match-h2h-away { text-align: left; }
            .match-h2h-score { color: #353a50; font-variant-numeric: tabular-nums; white-space: nowrap; }
            .match-detail-loading, .match-detail-empty, .live-match-empty { color: #80869a; text-align: center; }
            .match-detail-loading, .match-detail-empty { margin: 15px 5px; font-size: 11px; }
            .match-detail-empty.is-error { color: #c84863; }
            .live-match-empty {
                display: grid;
                min-height: 245px;
                align-content: center;
                justify-items: center;
                gap: 9px;
                padding: 28px;
                border: 1px dashed rgba(135,141,165,.28);
                border-radius: 20px;
                background: rgba(255,255,255,.42);
                font-size: 12px;
            }
            .live-match-empty strong { color: #44495e; font-size: 15px; }
            .live-match-empty-icon { color: #9a8be1; font-size: 34px; }
            .standings-card-heading {
                display: flex;
                justify-content: flex-end;
                margin: 0 0 12px;
            }
            .standings-accessible-title { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }
            .standings-actions { display: flex; flex: 0 0 auto; gap: 8px; }
            .standings-refresh, .standings-download, .standings-logo-upload { min-height: 37px; padding-inline: 12px; font-size: 11px; }
            .standings-top-six-control {
                display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line);
                border-radius: 10px; color: var(--muted); font-size: 11px; font-weight: 750; white-space: nowrap;
                cursor: pointer;
            }
            .standings-top-six-control input { accent-color: #6756bd; }
            .standings-logo-shape-control {
                display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line);
                border-radius: 10px; color: var(--muted); font-size: 11px; font-weight: 750; white-space: nowrap;
                cursor: pointer;
            }
            .standings-logo-shape-control input { accent-color: #6756bd; }
            .standings-logo-shape-control.is-disabled { opacity: .5; cursor: not-allowed; }
            .standings-logo-upload { border-color: rgba(35,171,103,.28); background: rgba(35,171,103,.08); color: #238956; }
            .standings-download {
                border-color: rgba(139,118,220,.4);
                background: linear-gradient(125deg, rgba(121,96,232,.94), rgba(93,182,231,.9));
                color: #fff;
                box-shadow: 0 7px 18px rgba(112,93,211,.18), inset 0 1px 0 rgba(255,255,255,.3);
            }
            .standings-poster {
                display: grid;
                grid-template-columns: 118px minmax(0, 1fr);
                overflow: hidden;
                border: 1px solid rgba(35,171,103,.19);
                border-radius: 20px;
                background: #fff;
                box-shadow: 0 20px 48px rgba(40,84,66,.13), 0 3px 10px rgba(40,84,66,.06);
            }
            .standings-brand-rail {
                position: relative;
                display: flex;
                min-width: 0;
                flex-direction: column;
                align-items: center;
                overflow: hidden;
                padding: 22px 10px;
                background:
                    radial-gradient(ellipse at 0 100%, var(--league-rail-glow, rgba(8,175,111,.92)), transparent 48%),
                    linear-gradient(155deg, var(--league-rail-start, #caff27) 0%, var(--league-rail-middle, #8cf21e) 45%, var(--league-rail-end, #19d16d) 100%);
                color: var(--league-rail-text, #12251a);
            }
            .standings-brand-rail::before, .standings-brand-rail::after {
                position: absolute;
                right: -35px;
                bottom: -15px;
                width: 170px;
                height: 170px;
                border: 1px solid rgba(255,255,255,.22);
                content: "";
                transform: rotate(38deg);
            }
            .standings-brand-rail::after { right: -64px; bottom: 25px; width: 185px; height: 185px; opacity: .55; }
            .standings-brand-logo {
                position: relative;
                z-index: 1;
                width: 64px;
                height: 64px;
                flex: 0 0 auto;
                padding: 0;
                border-radius: 0;
                background: none;
                object-fit: contain;
                box-shadow: none;
            }
            .standings-brand-logo.is-custom {
                width: 56px;
                height: 56px;
                padding: 2px;
                border: 2px solid rgba(255,255,255,.92);
                border-radius: 13px;
                background: #fff;
                object-fit: cover;
                box-shadow: 0 5px 14px rgba(19,44,31,.35), 0 0 0 1px rgba(17,38,27,.22);
            }
            .standings-brand-logo.is-custom.is-circle { border-radius: 50%; }
            .standings-league-logo {
                position: relative;
                z-index: 1;
                width: 52px;
                height: 52px;
                flex: 0 0 auto;
                margin-top: 10px;
                padding: 6px;
                border: 1px solid rgba(18,37,26,.12);
                border-radius: 13px;
                background: rgba(255,255,255,.96);
                object-fit: contain;
                box-shadow: 0 5px 14px rgba(15,35,28,.16);
            }
            .standings-rail-title {
                position: relative;
                z-index: 1;
                margin: 14px 0 12px;
                font-size: 21px;
                font-weight: 900;
                letter-spacing: -.035em;
                line-height: 1;
                text-align: center;
                writing-mode: vertical-rl;
                transform: rotate(180deg);
            }
            .standings-rail-season {
                position: relative;
                z-index: 1;
                margin-top: auto;
                font-size: 18px;
                font-weight: 800;
                letter-spacing: .08em;
                writing-mode: vertical-rl;
                transform: rotate(180deg);
            }
            .standings-rail-round {
                position: relative;
                z-index: 1;
                margin-top: 10px;
                font-size: 15px;
                font-weight: 850;
                letter-spacing: .08em;
                writing-mode: vertical-rl;
                transform: rotate(180deg);
            }
            .standings-poster-main { min-width: 0; padding: 22px 20px 10px; background: #fff; }
            .standings-table-wrap { overflow-x: auto; }
            .standings-table { width: 100%; border-collapse: collapse; color: #282b31; font-size: 11px; white-space: nowrap; }
            .standings-table th, .standings-table td { height: 39px; padding: 0 5px; border-bottom: 1px solid #edf0ed; text-align: center; }
            .standings-table th { height: 31px; color: #6e756f; font-size: 9px; font-weight: 750; }
            .standings-table tbody tr:first-child { background: #f1f0e9; }
            .standings-table tbody tr:nth-child(odd):not(:first-child) { background: #fbfcfa; }
            .standings-table tbody tr:hover { background: #f4faef; }
            .standings-table tbody tr.is-live-team > td:not(.standings-team) { color: #d92f45; }
            .standings-table th:first-child, .standings-rank { width: 34px; color: #717872; }
            .standings-table th:nth-child(2), .standings-table td:nth-child(2) { text-align: left; }
            .standings-team { min-width: 145px; padding-left: 3px !important; font-weight: 650; }
            .standings-team img { width: 19px; height: 19px; margin-right: 6px; vertical-align: middle; object-fit: contain; }
            .standings-points { color: #202820; font-weight: 850; }
            .positive-difference { color: #23845d; }
            .standings-placeholder { height: 120px !important; color: #7d849a; text-align: center !important; }
            .standings-footnote { margin: 0; padding: 12px 3px 8px; color: #858b83; font-size: 10px; }
            @media (max-width: 980px) {
                .app-sidebar { left: 18px; }
            }
            @media (max-width: 760px) {
                .topbar { gap: 8px; padding-inline: 12px; }
                .top-note { display: none; }
                .theme-picker-trigger { min-width: 38px; min-height: 38px; justify-content: center; gap: 0; padding-inline: 6px; }
                .theme-picker-current-label, .theme-picker-chevron { display: none; }
                .theme-picker-options { display: flex; width: max-content; gap: 5px; padding: 6px; }
                .theme-picker-options[hidden] { display: none; }
                .theme-picker-option { width: 40px; min-height: 40px; justify-content: center; padding: 3px; }
                .theme-picker-option-copy, .theme-picker-check { display: none; }
                .theme-picker-option-icon { width: 30px; height: 30px; }
                .app-content { margin-left: 0; }
                .app-sidebar {
                    position: sticky;
                    top: 0;
                    left: auto;
                    width: 100%;
                    height: auto;
                    max-height: none;
                    overflow: visible;
                    margin-bottom: 12px;
                    padding: 8px 5px;
                    border-radius: 17px;
                }
                .app-navigation { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
                .app-nav-item { min-width: 0; min-height: 60px; gap: 4px; padding: 6px 2px; font-size: 9px; }
                .app-nav-icon { width: 22px; height: 22px; }
                .workspace { grid-template-columns: minmax(0, 1fr); }
                .home-shortcuts { grid-template-columns: 1fr; }
                .home-view .intro { margin-top: 32px; }
                .live-heading { align-items: start; flex-direction: column; margin-bottom: 18px; }
                .live-status { align-self: flex-start; }
                .live-match-toolbar { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
                .live-match-toolbar .live-status { flex: 0 1 100%; min-width: 0; max-width: 100%; white-space: normal; }
                .club-profile-overview { grid-template-columns: minmax(0, 1fr); }
                .club-match-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
                .live-league-tab { min-height: 36px; gap: 5px; padding-inline: 9px; font-size: 10px; }
                .live-league-tab img { width: 20px; height: 20px; }
                .live-match-filters { gap: 6px; }
                .live-match-filter { min-height: 35px; padding-inline: 9px; font-size: 10px; }
                .live-match-filter img { width: 20px; height: 20px; }
                .live-match-grid { grid-template-columns: minmax(0, 1fr); }
                .match-lineups { grid-template-columns: minmax(0, 1fr); }
                .live-match-scoreboard { gap: 7px; padding: 16px 11px 14px; }
                .live-match-team { gap: 6px; font-size: 11px; }
                .live-match-team-logo { width: 27px; height: 27px; }
                .live-match-card-header { padding-inline: 11px; }
                .live-match-card-body { padding-inline: 10px; }
                .match-detail-tab { flex: 1 1 42%; min-width: 0; padding-inline: 4px; font-size: 10px; }
                .match-h2h-item { grid-template-columns: 58px minmax(0,1fr) auto minmax(0,1fr); gap: 5px; font-size: 9px; }
                .match-form-item { grid-template-columns: 24px minmax(0,1fr) auto auto; gap: 5px; }
                .standings-card-heading { justify-content: stretch; }
                .standings-actions { width: 100%; flex-wrap: wrap; }
                .standings-actions .btn { flex: 1; }
                .standings-top-six-control, .standings-logo-shape-control { flex: 1 1 auto; justify-content: center; min-height: 37px; }
                .standings-poster { grid-template-columns: 78px minmax(0, 1fr); border-radius: 16px; }
                .standings-brand-rail { padding: 16px 6px; }
                .standings-brand-logo { width: 58px; height: 58px; }
                .standings-league-logo { width: 43px; height: 43px; margin-top: 8px; padding: 5px; border-radius: 11px; }
                .standings-rail-title { margin: 17px 0 10px; font-size: 18px; }
                .standings-rail-season { font-size: 16px; }
                .standings-rail-round { margin-top: 8px; font-size: 13px; }
                .standings-poster-main { padding: 16px 10px 8px; }
                .standings-table { font-size: 11px; }
                .standings-table th, .standings-table td { height: 37px; padding-inline: 5px; }
                .standings-team { min-width: 132px; }
                .standings-team img { width: 18px; height: 18px; margin-right: 5px; }
            }
            @media (max-width: 520px) {
                .app-sidebar { padding-inline: 4px; }
                .club-match-list { grid-template-columns: minmax(0, 1fr); }
                .app-nav-item { min-height: 56px; font-size: 8px; }
                .app-nav-icon { width: 20px; height: 20px; }
                .home-view .intro h1 { font-size: 30px; }
                .live-heading h1 { font-size: 29px; }
                .standings-poster { grid-template-columns: 59px minmax(0, 1fr); }
                .standings-brand-rail { padding: 13px 4px; }
                .standings-brand-logo { width: 46px; height: 46px; }
                .standings-league-logo { width: 36px; height: 36px; margin-top: 6px; padding: 4px; border-radius: 9px; }
                .standings-rail-title { margin-top: 15px; font-size: 15px; }
                .standings-rail-season { font-size: 14px; }
                .standings-rail-round { margin-top: 6px; font-size: 11px; }
                .standings-poster-main { padding-inline: 6px; }
                .standings-table { font-size: 10px; }
                .standings-table th, .standings-table td { padding-inline: 3px; }
                .standings-team { min-width: 118px; }
                .standings-team img { width: 16px; height: 16px; margin-right: 4px; }
            }
            :root[data-theme="dark"] {
                .app-sidebar {
                    border-color: rgba(180,205,245,.17);
                    background: #111b2b;
                    box-shadow: 0 16px 38px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.1);
                }
                .app-nav-icon { filter: brightness(0) invert(1); }
                .app-nav-item { color: #a2b0c4; }
                .app-nav-item:hover {
                    border-color: rgba(180,205,245,.2);
                    background: #223149;
                    color: #ded6ff;
                    box-shadow: 0 7px 16px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.1);
                }
                .app-nav-item.is-active {
                    border-color: rgba(180,165,255,.3);
                    background: #302b52;
                    color: #ded6ff;
                    box-shadow: 0 7px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12);
                }
                .home-eyebrow { color: #b8a8ff; }
                .home-view .intro h1, .live-heading h1 { color: #f5f7fb; }
                .home-view .intro p, .live-heading p, .home-shortcut small { color: #a2b0c4; }
                .home-shortcut {
                    border-color: rgba(180,205,245,.18);
                    background: linear-gradient(145deg, rgba(27,41,63,.78), rgba(17,27,43,.62));
                    color: #f5f7fb;
                    box-shadow: 0 12px 28px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.1);
                }
                .home-shortcut:hover {
                    border-color: rgba(164,145,235,.48);
                    box-shadow: 0 18px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14);
                }
                .home-shortcut-icon { background: rgba(128,101,226,.24); color: #c7baff; }
                .home-shortcut-icon img { filter: brightness(0) invert(1); }
                .theme-picker-trigger { border-color: rgba(180,205,245,.18); background: linear-gradient(145deg, rgba(35,49,72,.88), rgba(20,32,50,.82)); color: #e8edf6; box-shadow: 0 6px 16px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08); }
                .theme-picker-current-icon, .theme-picker-option-icon { background: rgba(128,101,226,.22); color: #c7baff; }
                .theme-picker-chevron { border-color: #a2b0c4; }
                .theme-picker-options { border-color: rgba(180,205,245,.18); background: rgba(17,27,43,.94); box-shadow: 0 18px 44px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08); }
                .theme-picker-option { color: #e8edf6; }
                .theme-picker-option:hover, .theme-picker-option[aria-selected="true"] { border-color: rgba(164,145,235,.2); background: rgba(128,101,226,.16); }
                .theme-picker-option-copy small { color: #a2b0c4; }
                .theme-picker-check { border-color: #c7baff; }
                .live-status {
                    border-color: rgba(180,205,245,.2);
                    background: rgba(27,41,63,.72);
                    color: #b9c7dc;
                    box-shadow: 0 5px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.1);
                }
                .live-league-tab {
                    border-color: rgba(180,205,245,.2);
                    background: linear-gradient(145deg, rgba(35,49,72,.8), rgba(20,32,50,.72));
                    color: #c2cee0;
                }
                .live-league-tab.is-active {
                    border-color: rgba(143,179,255,.52);
                    background: linear-gradient(145deg, rgba(95,116,163,.72), rgba(71,79,126,.66));
                    color: #fff;
                }
                .live-match-filter {
                    border-color: rgba(180,205,245,.2);
                    background: linear-gradient(145deg, rgba(35,49,72,.8), rgba(20,32,50,.72));
                    color: #c2cee0;
                }
                .live-match-state-filter {
                    border-color: rgba(180,205,245,.18);
                    background: rgba(20,32,50,.72);
                    color: #c2cee0;
                }
                .live-match-state-filter.is-active {
                    border-color: rgba(52,194,133,.32);
                    background: rgba(28,104,73,.3);
                    color: #87e2b4;
                }
                .live-match-filter.is-active {
                    border-color: rgba(143,179,255,.52);
                    background: linear-gradient(145deg, rgba(95,116,163,.72), rgba(71,79,126,.66));
                    color: #fff;
                }
                .live-match-group-heading, .live-match-section-heading, .live-match-team, .live-match-score,
                .live-match-empty strong, .match-lineup-heading { color: #e8edf6; }
                .live-match-section.is-completed .live-match-section-heading { color: #87e2b4; }
                .live-match-section.is-upcoming .live-match-section-heading { color: #c7baff; }
                .live-match-card {
                    border-color: rgba(180,205,245,.18);
                    background: linear-gradient(150deg, rgba(27,41,63,.86), rgba(17,27,43,.76));
                    box-shadow: 0 14px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
                }
                .live-match-detail-header, .live-match-detail-content {
                    border-color: rgba(180,205,245,.18);
                    background: linear-gradient(150deg, rgba(27,41,63,.9), rgba(17,27,43,.82));
                    box-shadow: 0 14px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
                }
                .club-search-panel, .club-profile-panel, .club-profile-header {
                    border-color: rgba(180,205,245,.18);
                    background: linear-gradient(150deg, rgba(27,41,63,.9), rgba(17,27,43,.82));
                    box-shadow: 0 14px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
                }
                .club-search-copy h2, .club-profile-panel-heading h2, .club-profile-title-copy h1,
                .club-roster-info strong, .club-player-table tbody th, .club-match-info strong, .club-match-score { color: #e8edf6; }
                .club-search-copy p, .club-profile-panel-heading p, .club-search-status,
                .club-search-result-copy small, .club-profile-title-copy p, .club-standing-position span,
                .club-standing-record, .club-roster-info small, .club-player-table { color: #a2b0c4; }
                .club-search-field input {
                    border-color: rgba(180,205,245,.2);
                    background: rgba(5,11,20,.38);
                    color: #e8edf6;
                }
                .club-search-result, .club-roster-player, .club-match-card {
                    border-color: rgba(180,205,245,.13);
                    background: rgba(5,11,20,.25);
                    color: #e8edf6;
                }
                .club-match-card {
                    border-color: rgba(220,235,255,.32);
                    background: linear-gradient(135deg, rgba(40,59,86,.72), rgba(20,34,54,.54));
                    box-shadow: 0 12px 30px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.22);
                }
                .club-match-card.is-live {
                    border-color: rgba(255,113,137,.4);
                    background: linear-gradient(135deg, rgba(92,34,50,.48), rgba(5,11,20,.32));
                    box-shadow: 0 8px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
                }
                .club-match-card.is-win {
                    border-color: rgba(0,255,128,.78);
                    background: linear-gradient(115deg, rgba(0,230,118,.82), rgba(105,255,0,.68));
                    color: #07351d;
                }
                .club-match-card.is-loss {
                    border-color: rgba(255,92,110,.82);
                    background: linear-gradient(115deg, rgba(255,23,68,.82), rgba(255,82,82,.68));
                    color: #4b0813;
                }
                .club-match-card.is-draw {
                    border-color: rgba(77,198,255,.8);
                    background: linear-gradient(115deg, rgba(0,176,255,.8), rgba(72,225,255,.66));
                    color: #07314a;
                }
                .club-match-card.is-win .club-match-info strong, .club-match-card.is-win .club-match-score { color: #07351d; }
                .club-match-card.is-loss .club-match-info strong, .club-match-card.is-loss .club-match-score { color: #4b0813; }
                .club-match-card.is-draw .club-match-info strong, .club-match-card.is-draw .club-match-score { color: #07314a; }
                .club-live-match-panel .club-match-info small,
                .club-live-match-panel .club-match-score { color: #ff91a5; }
                .club-player-table th, .club-player-table td { border-bottom-color: rgba(180,205,245,.13); }
                .club-player-points { color: #c7baff; }
                .live-match-card-action { color: #d2c8ff; }
                .live-match-card-header { border-bottom-color: rgba(180,205,245,.12); }
                .live-match-league, .match-statistics-heading, .match-stat-label,
                .match-lineup-position, .match-lineup-formation, .match-lineup-substitutes-heading,
                .match-detail-loading, .match-detail-empty, .live-match-empty { color: #a2b0c4; }
                .live-match-phase {
                    border-color: rgba(224,79,114,.2);
                    background: rgba(224,79,114,.14);
                    color: #ff91ab;
                }
                .live-match-phase.is-upcoming {
                    border-color: rgba(115,168,232,.2);
                    background: rgba(75,123,183,.17);
                    color: #a7ccff;
                }
                .live-match-details-toggle {
                    border-color: rgba(180,165,255,.22);
                    background: rgba(128,101,226,.18);
                    color: #d2c8ff;
                }
                .live-match-details-toggle:hover { background: rgba(128,101,226,.26); }
                .match-detail-tabs { background: rgba(5,11,20,.38); }
                .match-detail-tab { color: #a2b0c4; }
                .match-detail-tab[aria-pressed="true"] {
                    background: rgba(72,88,119,.68);
                    color: #e7e1ff;
                    box-shadow: 0 2px 8px rgba(0,0,0,.2);
                }
                .match-stat-value { color: #e1e7f0; }
                .match-stat-bar { background: rgba(180,205,245,.13); }
                .match-events {
                    border-color: rgba(180,205,245,.13);
                    background: rgba(7,14,24,.35);
                }
                .match-events-heading { color: #e1e7f0; }
                .match-event { background: rgba(180,205,245,.06); }
                .match-event-minute { color: #c7baff; }
                .match-event-detail, .match-events-empty { color: #a2b0c4; }
                .match-lineup-team {
                    border-color: rgba(180,205,245,.15);
                    background: rgba(7,14,24,.35);
                }
                .match-form-team {
                    border-color: rgba(180,205,245,.15);
                    background: rgba(7,14,24,.35);
                }
                .match-form-item, .match-h2h-item {
                    border-color: rgba(180,205,245,.1);
                    background: rgba(180,205,245,.05);
                    color: #c0cadd;
                }
                .match-form-score, .match-h2h-score { color: #e1e7f0; }
                .match-series-summary { color: #d5dcef; }
                .match-detail-note, .match-lineup-source { color: #a2b0c4; }
                .match-lineup-player { color: #c0cadd; }
                .live-match-empty {
                    border-color: rgba(180,205,245,.2);
                    background: rgba(17,27,43,.52);
                }
                .standings-poster {
                    border-color: rgba(180,205,245,.18);
                    box-shadow: 0 16px 38px rgba(0,0,0,.24), 0 3px 10px rgba(0,0,0,.16);
                }
            }

            .section-banner {
                margin: 0 0 24px;
                padding: clamp(20px, 3vw, 30px);
                overflow: hidden;
                border: 1px solid rgba(255,255,255,.76);
                border-radius: 22px;
                background-color: #17243a;
                background-position: center;
                background-size: cover;
                box-shadow: 0 16px 38px rgba(44,54,91,.12), inset 0 1px 0 rgba(255,255,255,.48);
                text-align: left;
            }
            .section-banner--home {
                background-image: linear-gradient(90deg, rgba(250,249,255,.97) 0%, rgba(246,245,255,.92) 46%, rgba(240,240,250,.72) 100%), url("../images/section-home.svg");
            }
            .section-banner--templates {
                background-image: linear-gradient(90deg, rgba(250,249,255,.97) 0%, rgba(246,245,255,.92) 46%, rgba(242,240,253,.72) 100%), url("../images/section-posters.svg");
            }
            .section-banner--standings {
                background-image: linear-gradient(90deg, rgba(249,252,250,.97) 0%, rgba(241,249,246,.92) 46%, rgba(235,246,242,.72) 100%), url("../images/section-standings.svg");
            }
            .section-banner--matches {
                background-image: linear-gradient(90deg, rgba(249,252,250,.97) 0%, rgba(241,249,246,.92) 46%, rgba(235,246,242,.28) 100%), url("../images/section-fixtures.svg");
            }
            .section-banner .intro,
            .section-banner .live-heading { margin: 0 0 16px; }
            .section-banner--matches .live-heading { align-items: flex-start; }
            .section-banner .intro h1,
            .section-banner .live-heading h1 { margin-left: 0; text-align: left; }
            .section-banner .intro p,
            .section-banner .live-heading p { max-width: 780px; }
            .section-banner .home-eyebrow { color: #6652bd; }
            .section-banner .live-match-filters,
            .section-banner .live-league-tabs { margin-bottom: 0; }
            .section-banner .live-match-refresh {
                border-color: rgba(255,255,255,.68);
                background: rgba(255,255,255,.8);
                color: #424a60;
                box-shadow: 0 6px 16px rgba(10,24,38,.12);
            }
            .live-match-detail-header,
            .club-profile-header {
                position: relative;
                isolation: isolate;
                overflow: hidden;
                background: transparent;
            }
            .live-match-detail-header::before,
            .club-profile-header::before,
            .live-match-detail-header::after,
            .club-profile-header::after {
                position: absolute;
                z-index: -1;
                inset: 0;
                content: "";
                pointer-events: none;
            }
            .live-match-detail-header::before,
            .club-profile-header::before {
                inset: -8px;
                background: url("../images/section-matches.png") center / cover no-repeat;
                filter: blur(5px) saturate(135%);
            }
            .live-match-detail-header::after,
            .club-profile-header::after {
                background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.68));
                box-shadow: inset 0 1px 0 rgba(255,255,255,.68);
            }
            :root[data-theme="dark"] .section-banner,
            :root[data-theme="dark"] .live-match-detail-header,
            :root[data-theme="dark"] .club-profile-header {
                border-color: rgba(180,205,245,.2);
                background-image: linear-gradient(90deg, rgba(10,17,29,.96) 0%, rgba(10,20,32,.88) 48%, rgba(8,28,29,.38) 100%), var(--section-art);
                box-shadow: 0 16px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
            }
            :root[data-theme="dark"] .section-banner--home { --section-art: url("../images/section-home.svg"); }
            :root[data-theme="dark"] .section-banner--templates { --section-art: url("../images/section-posters.svg"); }
            :root[data-theme="dark"] .section-banner--standings { --section-art: url("../images/section-standings.svg"); }
            :root[data-theme="dark"] .section-banner--matches,
            :root[data-theme="dark"] .live-match-detail-header,
            :root[data-theme="dark"] .club-profile-header { --section-art: url("../images/section-matches.png"); }
            :root[data-theme="dark"] .section-banner--matches { --section-art: url("../images/section-fixtures.svg"); }
            :root[data-theme="dark"] .live-match-detail-header,
            :root[data-theme="dark"] .club-profile-header {
                background: transparent;
            }
            :root[data-theme="dark"] .live-match-detail-header::after,
            :root[data-theme="dark"] .club-profile-header::after {
                background: linear-gradient(135deg, rgba(13,25,45,.5), rgba(13,25,45,.28));
                box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
            }
            :root[data-theme="dark"] .live-match-detail-header .live-match-detail-league,
            :root[data-theme="dark"] .live-match-detail-header .live-match-detail-meta { color: #a2b0c4; }
            :root[data-theme="dark"] .live-match-detail-team,
            :root[data-theme="dark"] .live-match-detail-score { color: #e8edf6; }
            :root[data-theme="dark"] .live-match-detail-score.is-fixture { color: #a2b0c4; }
            :root[data-theme="dark"] .section-banner .home-eyebrow { color: #c7baff; }
            :root[data-theme="dark"] .section-banner .intro h1,
            :root[data-theme="dark"] .section-banner .live-heading h1 { color: #f5f7fb; }
            :root[data-theme="dark"] .section-banner .intro p,
            :root[data-theme="dark"] .section-banner .live-heading p { color: #c0cadd; }
            :root[data-theme="dark"] .section-banner .live-match-refresh {
                border-color: rgba(180,205,245,.22);
                background: rgba(27,41,63,.82);
                color: #e8eef9;
            }
            :root[data-theme="dark"] .section-banner .club-search-toggle {
                border-color: rgba(180,205,245,.22);
                background: rgba(27,41,63,.82);
                color: #e8eef9;
            }
            @media (max-width: 680px) {
                .section-banner { padding: 18px; border-radius: 18px; }
                .section-banner .live-heading { margin-bottom: 14px; }
                .section-banner .live-match-filters { gap: 6px; }
                .section-banner--matches .live-match-toolbar { justify-content: flex-end; }
                .match-stat-secondary-grid { grid-template-columns: 1fr; }
            }

        .red-star-password-dialog {
            position: relative;
            width: min(440px, calc(100vw - 32px));
            max-height: calc(100dvh - 32px);
            overflow: visible;
            border: 1px solid rgba(255,255,255,.32);
            border-radius: 28px;
            background:
                radial-gradient(ellipse at 12% 0%, rgba(255,255,255,.2), transparent 46%),
                linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.075) 48%, rgba(255,255,255,.11)),
                rgba(25,34,55,.68);
            color: #f7f8ff;
            box-shadow: 0 32px 100px rgba(0,0,0,.36), 0 8px 28px rgba(12,19,36,.2), inset 0 1px 0 rgba(255,255,255,.4);
            backdrop-filter: blur(42px) saturate(180%);
            -webkit-backdrop-filter: blur(42px) saturate(180%);
            animation: red-star-dialog-in .24s cubic-bezier(.2,.75,.25,1) both;
        }
        .red-star-password-dialog::backdrop {
            background: rgba(9,14,27,.24);
            backdrop-filter: blur(16px) saturate(125%);
            -webkit-backdrop-filter: blur(16px) saturate(125%);
        }
        .red-star-password-dialog .club-picker-header {
            padding: 26px 26px 13px;
            background: transparent;
        }
        .red-star-password-dialog .club-picker-header h2 {
            color: #fff;
            font-size: 21px;
            font-weight: 720;
            letter-spacing: -.035em;
        }
        .red-star-password-dialog .club-picker-header p {
            margin-top: 7px;
            color: rgba(239,243,255,.7);
            font-size: 13px;
        }
        .red-star-password-dialog .club-picker-close {
            width: 34px;
            min-height: 34px;
            border-color: rgba(255,255,255,.22);
            background: rgba(255,255,255,.12);
            color: rgba(255,255,255,.88);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }
        .red-star-password-dialog .club-picker-content {
            padding: 8px 26px 26px;
            overflow: visible;
        }
        .red-star-password-dialog .club-picker-tools {
            display: grid;
            gap: 12px;
            margin: 0;
        }
        .red-star-password-dialog .club-search {
            min-height: 52px;
            padding: 0 15px;
            border-color: rgba(255,255,255,.3);
            border-radius: 16px;
            background: rgba(12,19,36,.32);
            color: #fff;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 5px 18px rgba(7,11,22,.1);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }
        .red-star-password-dialog .club-search:focus-within {
            border-color: rgba(177,190,255,.88);
            box-shadow: 0 0 0 4px rgba(137,145,255,.2), inset 0 1px 0 rgba(255,255,255,.18);
        }
        .red-star-password-dialog .club-search input {
            height: 50px;
            color: #fff;
            font-size: 16px;
        }
        .red-star-password-dialog .club-search input::placeholder {
            color: rgba(239,243,255,.53);
        }
        .red-star-password-dialog .btn-export {
            min-height: 48px;
            border: 1px solid rgba(255,255,255,.38);
            border-radius: 15px;
            background: linear-gradient(120deg, rgba(135,113,255,.94), rgba(67,165,222,.94));
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            box-shadow: 0 8px 22px rgba(47,83,180,.27), inset 0 1px 0 rgba(255,255,255,.36);
        }
        .red-star-password-dialog .btn-export:hover {
            background: linear-gradient(120deg, #907cff, #56b5e8);
            box-shadow: 0 10px 26px rgba(47,83,180,.35), inset 0 1px 0 rgba(255,255,255,.42);
        }
        .red-star-password-dialog .club-picker-note {
            margin: 14px 0 0;
            color: rgba(239,243,255,.67);
            font-size: 12px;
            line-height: 1.5;
        }
        .red-star-password-dialog .club-picker-note a {
            color: #d1c8ff;
            font-weight: 700;
            text-decoration-color: rgba(209,200,255,.56);
            text-underline-offset: 3px;
        }
        .red-star-password-dialog .club-picker-note a:hover { color: #fff; }
        .red-star-password-dialog #red-star-password-error {
            margin: 0;
            color: #ffd2d6;
            text-align: left;
        }
        :root[data-theme="light"] .red-star-password-dialog {
            border-color: rgba(255,255,255,.76);
            background:
                radial-gradient(ellipse at 12% 0%, rgba(255,255,255,.62), transparent 48%),
                linear-gradient(145deg, rgba(255,255,255,.64), rgba(246,247,255,.38) 52%, rgba(255,255,255,.48)),
                rgba(237,240,252,.54);
            color: #292c40;
            box-shadow: 0 30px 90px rgba(48,48,89,.22), inset 0 1px 0 rgba(255,255,255,.96);
        }
        :root[data-theme="light"] .red-star-password-dialog .club-picker-header h2 { color: #292c40; }
        :root[data-theme="light"] .red-star-password-dialog .club-picker-header p,
        :root[data-theme="light"] .red-star-password-dialog .club-picker-note { color: #69718a; }
        :root[data-theme="light"] .red-star-password-dialog .club-picker-close {
            border-color: rgba(96,105,139,.17);
            background: rgba(255,255,255,.54);
            color: #515a72;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px rgba(47,52,83,.08);
        }
        :root[data-theme="light"] .red-star-password-dialog .club-search {
            border-color: rgba(111,120,157,.2);
            background: rgba(255,255,255,.28);
            color: #454b61;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 5px 18px rgba(47,52,83,.06);
        }
        #red-star-password-input {
            border: 0;
            border-radius: 11px;
            background: transparent;
            box-shadow: none;
        }
        :root[data-theme="light"] .red-star-password-dialog .club-search input { color: #292c40; }
        :root[data-theme="light"] .red-star-password-dialog .club-search input::placeholder { color: #858ca1; }
        :root[data-theme="light"] .red-star-password-dialog .btn-export {
            border-color: rgba(255,255,255,.62);
            background: linear-gradient(125deg, rgba(121,96,232,.96), rgba(72,166,218,.94));
            color: #fff;
        }
        :root[data-theme="light"] .red-star-password-dialog .club-picker-note a { color: #6756bd; }
        :root[data-theme="light"] .red-star-password-dialog #red-star-password-error { color: #b4233c; }
        @keyframes red-star-dialog-in {
            from { opacity: 0; transform: translateY(8px) scale(.97); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        @media (max-width: 520px) {
            .red-star-password-dialog { border-radius: 24px; }
            .red-star-password-dialog .club-picker-header { padding: 22px 20px 12px; }
            .red-star-password-dialog .club-picker-content { padding: 8px 20px 22px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .red-star-password-dialog { animation: none; }
            .club-logo-link, .club-logo-visual,
            .club-logo-link::after, .club-logo-visual::after,
            .club-logo-link img, .club-logo-visual img { transition: none; }
            .club-logo-link:hover, .club-logo-link:focus-visible, .club-logo-visual:hover,
            .club-logo-link:hover img, .club-logo-link:focus-visible img, .club-logo-visual:hover img {
                transform: none;
            }
        }
        #club-picker.club-picker-dialog {
            background: #101b2c;
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
        }
        #club-picker.club-picker-dialog::backdrop { backdrop-filter: none; }
        #club-picker .club-logo-choice {
            contain: layout paint;
            background: #17253a;
            box-shadow: none;
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
            transition: border-color .12s ease, background-color .12s ease;
        }
        #club-picker .club-logo-choice img { filter: none; }
        #club-picker .club-logo-choice:hover,
        #club-picker .club-logo-choice:focus-visible {
            transform: none;
            background: #243957;
            box-shadow: none;
        }
        :root[data-theme="light"] #club-picker.club-picker-dialog { background: #fff; }
        :root[data-theme="light"] #club-picker .club-logo-choice { background: #f8f9fd; }
        :root[data-theme="light"] #club-picker .club-logo-choice:hover,
        :root[data-theme="light"] #club-picker .club-logo-choice:focus-visible { background: #f1eeff; }