/* ── Page shell ─────────────────────────────────────────────────── */
    :root {
        --ls-orange: var(--accent-orange, #e85d3b);
        --ls-green:  var(--accent-green,  #7cb342);
        --ls-nav-h:  48px;
        --ls-filter-h: 42px;
    }

    /* ── Layout shell: sits inside main-content (sidebar already offsets) ── */
    .ls-shell {
        display: flex;
        flex-direction: column;
        height: calc(100dvh - var(--ls-nav-h) - var(--ls-filter-h));
        overflow: hidden;
    }

    /* ── Sticky filter / search bar ─────────────────────────────────── */
    .ls-topbar {
        height: var(--ls-nav-h);
        background: rgba(8,14,20,.97);
        border-bottom: 1px solid rgba(255,255,255,.07);
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: 0 .75rem;
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 60;
    }

    .ls-filterbar {
        height: var(--ls-filter-h);
        background: rgba(255,255,255,.02);
        border-bottom: 1px solid rgba(255,255,255,.06);
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: 0 .75rem;
        flex-shrink: 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .ls-filterbar::-webkit-scrollbar { display: none; }

    /* ── View transition ─────────────────────────────────────────────── */
    .ls-views { position: relative; flex: 1; overflow: hidden; }
    .ls-view  { position: absolute; inset: 0; overflow-y: auto; transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s; }
    #ls-grid-view   { transform: translateX(0);    opacity: 1; }
    #ls-detail-view { transform: translateX(100%); opacity: 0; pointer-events: none; }
    .detail-open #ls-grid-view   { transform: translateX(-20%); opacity: 0; pointer-events: none; }
    .detail-open #ls-detail-view { transform: translateX(0);    opacity: 1; pointer-events: all; }

    /* ── Match cards ──────────────────────────────────────────────────── */
    .ls-match-card {
        background: rgba(0,0,0,.38);
        border: 1px solid rgba(255,255,255,.07);
        border-radius: 10px;
        padding: .85rem;
        cursor: pointer;
        transition: border-color .18s, background .18s, transform .15s;
        border-left: 3px solid var(--comp-c, #30363d);
        position: relative;
        overflow: hidden;
    }
    .ls-match-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--comp-rgb,48,54,61),.12) 0%, transparent 70%);
        pointer-events: none;
    }
    .ls-match-card:hover {
        border-color: rgba(var(--ls-orange-rgb, 232,93,59),.45);
        background: rgba(232,93,59,.05);
        transform: translateY(-1px);
    }
    .ls-score-bug {
        font-size: 1.5rem;
        font-weight: 900;
        letter-spacing: .1em;
        line-height: 1;
    }

    /* ── Detail panel ─────────────────────────────────────────────────── */
    .ls-score-hero {
        background: rgba(0,0,0,.45);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 14px;
        border-top: 3px solid var(--comp-c, #30363d);
        padding: 1rem;
        margin-bottom: .75rem;
        position: relative;
        overflow: hidden;
    }
    .ls-score-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 90% 60% at 50% -10%, rgba(var(--comp-rgb,48,54,61),.18) 0%, transparent 70%);
        pointer-events: none;
    }
    .ls-hero-score {
        font-size: clamp(2.2rem, 6vw, 3.2rem);
        font-weight: 900;
        letter-spacing: .12em;
        line-height: 1;
    }
    .ls-team-name-h { color: var(--ls-orange); font-weight: 800; }
    .ls-team-name-a { color: var(--ls-green);  font-weight: 800; }

    /* ── Dominance bar chart ─────────────────────────────────────────── */
    .ls-dom-wrap {
        background: rgba(0,0,0,.38);
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 12px;
        padding: .85rem;
        margin-bottom: .75rem;
    }
    .ls-dom-bars {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-top: .5rem;
    }
    .ls-dom-bar-row {
        display: flex;
        align-items: center;
        gap: 6px;
        height: 18px;
    }
    .ls-dom-bar-h, .ls-dom-bar-a {
        height: 100%;
        border-radius: 4px;
        transition: width .8s cubic-bezier(.4,0,.2,1);
        position: relative;
    }
    .ls-dom-bar-h {
        background: linear-gradient(90deg, var(--ls-orange), #f4926e);
        box-shadow: 0 0 8px rgba(232,93,59,.5);
        border-radius: 4px 0 0 4px;
        flex-shrink: 0;
    }
    .ls-dom-bar-a {
        background: linear-gradient(90deg, #4a9e25, var(--ls-green));
        box-shadow: 0 0 8px rgba(124,179,66,.5);
        border-radius: 0 4px 4px 0;
        flex-shrink: 0;
    }
    .ls-dom-arrow-h, .ls-dom-arrow-a {
        font-size: 1.4rem;
        line-height: 1;
        transition: transform .4s, opacity .4s;
    }
    .ls-dom-arrow-h { color: var(--ls-orange); }
    .ls-dom-arrow-a { color: var(--ls-green);  }
    .ls-dom-arrow-h.dominant { animation: ls-arrow-pulse-o 1.2s ease infinite; transform: scale(1.3); }
    .ls-dom-arrow-a.dominant { animation: ls-arrow-pulse-g 1.2s ease infinite; transform: scale(1.3); }
    @keyframes ls-arrow-pulse-o {
        0%,100% { filter: drop-shadow(0 0 4px rgba(232,93,59,.6)); }
        50%      { filter: drop-shadow(0 0 12px rgba(232,93,59,1));  }
    }
    @keyframes ls-arrow-pulse-g {
        0%,100% { filter: drop-shadow(0 0 4px rgba(124,179,66,.6)); }
        50%      { filter: drop-shadow(0 0 12px rgba(124,179,66,1));  }
    }
    .ls-dom-score {
        font-size: 1.6rem;
        font-weight: 900;
        min-width: 34px;
        text-align: center;
        line-height: 1;
    }
    .ls-dom-score-h { color: var(--ls-orange); }
    .ls-dom-score-a { color: var(--ls-green);  }
    .ls-dom-spacer  { flex: 1; }
    .ls-dom-desc    { font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; }

    /* ── Momentum column chart (split into per-period panels) ─────────── */
    .ls-mom-panels { display:flex; gap:8px; margin-top:.35rem; align-items:stretch; }
    .ls-mom-panel  { flex:1 1 0; min-width:0; display:flex; flex-direction:column; }
    .ls-mom-panel + .ls-mom-panel { border-left:1px solid rgba(255,255,255,.08); padding-left:8px; }
    .ls-mom-panel-hd {
        font-size:.5rem; letter-spacing:.05em; text-transform:uppercase;
        color:rgba(255,255,255,.4); margin-bottom:2px; text-align:center;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .ls-mom-panel-wrap { position:relative; width:100%; height:56px; }
    .ls-mom-panel-wrap canvas { display:block; width:100%; height:100%; image-rendering:crisp-edges; }
    .ls-mom-axis {
        display:flex; justify-content:space-between; margin-top:2px;
        font-size:.52rem; color:rgba(255,255,255,.25);
        pointer-events:none; user-select:none;
    }
    @media (max-width:576px) {
        .ls-mom-panels { flex-direction:column; gap:10px; }
        .ls-mom-panel + .ls-mom-panel {
            border-left:none; padding-left:0;
            border-top:1px solid rgba(255,255,255,.08); padding-top:8px;
        }
    }

    /* ── Floating mini scrubber overlay ─────────────────────────────── */
    #ls-scrubber-float {
        position: fixed;
        bottom: 72px;
        right: 14px;
        z-index: 200;
        background: rgba(8,14,20,.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 14px;
        padding: .5rem .65rem;
        min-width: 220px;
        max-width: 290px;
        box-shadow: 0 4px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(124,179,66,.15);
        transform: translateY(20px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease, transform .25s ease;
        will-change: opacity, transform;
    }
    #ls-scrubber-float.visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .ls-float-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: .3rem;
    }
    .ls-float-elapsed {
        font-size: .85rem;
        font-weight: 900;
        color: var(--accent-green);
    }
    @media (min-width: 768px) {
        #ls-scrubber-float { bottom: 20px; }
    }

    /* ── Rotary scrubber ─────────────────────────────────────────────── */
    .ls-rotary-wrap {
        display: flex;
        align-items: center;
        gap: .75rem;
        flex-wrap: wrap;
    }
    .ls-rotary {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: conic-gradient(var(--ls-green) var(--rot, 0deg), rgba(255,255,255,.08) 0deg);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
        touch-action: none;
        flex-shrink: 0;
        box-shadow: 0 0 0 2px rgba(255,255,255,.1), 0 0 14px rgba(124,179,66,.25);
        transition: box-shadow .2s;
    }
    .ls-rotary:active, .ls-rotary.dragging {
        box-shadow: 0 0 0 2px rgba(124,179,66,.5), 0 0 20px rgba(124,179,66,.5);
    }
    .ls-rotary-inner {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #0d1117;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .65rem;
        font-weight: 900;
        color: var(--ls-green);
        user-select: none;
        pointer-events: none;
    }
    .ls-rotary-notch {
        position: absolute;
        top: 4px;
        left: 50%;
        transform: translateX(-50%);
        width: 3px;
        height: 8px;
        background: var(--ls-green);
        border-radius: 2px;
        pointer-events: none;
        transform-origin: 50% calc(28px - 4px);
        transition: transform .1s;
    }

    /* xG area chart */

    .ls-xg-wrap {
        position: relative;
        width: 100%;
        height: 175px;
    }

    #ls-xg-chart {
        width: 100% !important;
        height: 100% !important;
    }

    /* ── Donut metrics ───────────────────────────────────────────────── */
    .ls-donut-wrap {
        position: relative;
        width: 100px;
        height: 100px;
        flex-shrink: 0;
    }
    .ls-donut-label {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }
    .ls-donut-val   { font-size: .9rem; font-weight: 900; line-height: 1; }
    .ls-donut-sub   { font-size: .52rem; color: rgba(255,255,255,.45); margin-top: 2px; text-transform: uppercase; letter-spacing: .05em; }

    /* ── Animated stat bars ──────────────────────────────────────────── */
    .ls-stat-section-lbl {
        font-size: .58rem;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: rgba(255,255,255,.35);
        padding: .4rem 0 .2rem;
        border-bottom: 1px solid rgba(255,255,255,.05);
        margin-bottom: .4rem;
    }
    .ls-stat-row { margin-bottom: .55rem; }
    .ls-stat-names {
        display: flex;
        justify-content: space-between;
        font-size: .8rem;
        margin-bottom: 3px;
    }
    .ls-stat-name-h { color: var(--ls-orange); font-weight: 700; }
    .ls-stat-name-a { color: var(--ls-green);  font-weight: 700; }
    .ls-stat-lbl    { font-size: .8rem; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .05em; text-align: center; }
    .ls-bar-track {
        height: 12px;
        border-radius: 999px;
        overflow: hidden;
        display: flex;
        gap: 1px;
    }
    .ls-bar-h {
        height: 100%;
        border-radius: 999px 0 0 999px;
        background: linear-gradient(90deg, #c04b24, var(--ls-orange));
        transition: width .7s cubic-bezier(.4,0,.2,1);
    }
    .ls-bar-a {
        height: 100%;
        border-radius: 0 999px 999px 0;
        background: linear-gradient(90deg, var(--ls-green), #5a8e2a);
        transition: width .7s cubic-bezier(.4,0,.2,1);
    }

    /* ── Key stats pills ─────────────────────────────────────────────── */
    .ls-kstat-pill {
        background: rgba(255,255,255,.03);
        border: 1px solid rgba(255,255,255,.07);
        border-radius: 10px;
        padding: .55rem .5rem;
        text-align: center;
        transition: border-color .18s;
    }
    .ls-kstat-pill:hover { border-color: rgba(232,93,59,.3); }
    .ls-kstat-h { color: var(--ls-orange); font-size: 1rem; font-weight: 900; }
    .ls-kstat-a { color: var(--ls-green);  font-size: 1rem; font-weight: 900; }
    .ls-kstat-lbl { font-size: .55rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .05em; }

    /* ── Player / scrubber card ──────────────────────────────────────── */
    .ls-player-card {
        background: rgba(0,0,0,.38);
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 12px;
        padding: .65rem .85rem;
        margin-bottom: .75rem;
    }
    .ls-player-sticky {
        position: sticky;
        bottom: 0;
        z-index: 20;
        padding: .5rem .75rem .65rem;
        background: rgba(8,14,20,.95);
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(255,255,255,.08);
        margin: 0 -.75rem;
    }
    #ls-timeline-slider {
        accent-color: var(--accent-green, #7cb342);
        width: 100%;
        cursor: pointer;
    }
    .ls-mom-markers { position: relative; height: 8px; }
    .ls-mom-mark {
        position: absolute;
        width: 2px;
        height: 8px;
        border-radius: 1px;
        transform: translateX(-50%);
    }

    /* ── Glow animations ─────────────────────────────────────────────── */
    @keyframes ls-glow-o {
        0%, 100% {
            filter: drop-shadow(0 0 0 rgba(232, 93, 59, 0));
        }
    
        50% {
            filter:
                drop-shadow(0 0 5px rgba(232, 93, 59, 0.65))
                drop-shadow(0 0 10px rgba(232, 93, 59, 0.4));
        }
    }
    
    @keyframes ls-glow-g {
        0%, 100% {
            filter: drop-shadow(0 0 0 rgba(124, 179, 66, 0));
        }
    
        50% {
            filter:
                drop-shadow(0 0 5px rgba(124, 179, 66, 0.65))
                drop-shadow(0 0 10px rgba(124, 179, 66, 0.4));
        }
    }
    
    /* Apply the animation to the canvas, not the square wrapper */
    .ls-glow-o canvas {
        animation: ls-glow-o 1.8s ease-in-out infinite;
    }
    
    .ls-glow-g canvas {
        animation: ls-glow-g 1.8s ease-in-out infinite;
    }

    /* ── Odds section ────────────────────────────────────────────────── */
    .ls-odds-pill {
        background: rgba(232,93,59,.1);
        border: 1px solid rgba(232,93,59,.25);
        border-radius: 8px;
        padding: .4rem .7rem;
        text-align: center;
    }
    .ls-odds-val { font-size: 1.4rem; font-weight: 900; color: var(--ls-orange); }
    .ls-odds-lbl { font-size: .58rem; color: rgba(255,255,255,.45); text-transform: uppercase; line-height: 1.15; }
    .ls-odds-group-lbl {
        font-size: .58rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: rgba(255,255,255,.5);
        margin-bottom: .35rem;
    }
    .ls-odds-pill.suspended { opacity: .4; }

    /* ── Timeline table ──────────────────────────────────────────────── */
    .ls-timeline-wrap {
        max-height: 260px;
        overflow: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,.1) transparent;
    }

    /* ── Momentum shifts list ────────────────────────────────────────── */
    .ls-shift-item {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .3rem 0;
        border-bottom: 1px solid rgba(255,255,255,.05);
        font-size: .7rem;
    }
    .ls-shift-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    /* ── Section card wrapper ────────────────────────────────────────── */
    .ls-card {
        background: rgba(0,0,0,.38);
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 12px;
        padding: .85rem;
        margin-bottom: .75rem;
    }
    .ls-card-lbl {
        font-size: .6rem;
        text-transform: uppercase;
        letter-spacing: .09em;
        color: rgba(255,255,255,.4);
        margin-bottom: .55rem;
    }

    /* ── Mobile ──────────────────────────────────────────────────────── */
    @media (max-width: 767px) {
        .ls-shell { height: calc(100dvh - var(--ls-nav-h) - var(--ls-filter-h) - 60px); }
        .ls-score-hero .row { text-align: center; }
        .ls-hero-score { font-size: 2.2rem; }
    }

    /* ── Large screen two-col detail ─────────────────────────────────── */
    @media (min-width: 1200px) {
        .ls-detail-inner { display: grid; grid-template-columns: 1fr 380px; gap: 1rem; align-items: start; }
        .ls-detail-right { position: sticky; top: .75rem; }
    }

    /* ── Stat bar velocity arrows ────────────────────────────────────── */
    .vel-up   { color: #4ade80; font-size: .58rem; }
    .vel-down { color: #f87171; font-size: .58rem; }

/* ── Standalone split pages ─────────────────────────────────────── */
.ls-match-link,
.ls-match-link:hover,
.ls-match-link:focus {
    color: inherit;
    text-decoration: none;
    display: block;
}

.ls-detail-page .ls-shell {
    height: calc(100dvh - var(--ls-nav-h));
    overflow-y: auto;
    overflow-x: hidden;
}


.ls-grid-page .ls-views {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.ls-grid-page #ls-grid-view {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.ls-detail-page #ls-scrubber-float {
    bottom: 20px;
}



/* ── League-first index browser ─────────────────────────────────── */
.ls-index-page .ls-topbar {
    position: sticky;
    top: 0;
    z-index: 80;
}

.ls-index-shell {
    height: calc(100dvh - var(--ls-nav-h));
    display: grid;
    grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
    overflow: hidden;
    background: rgba(255,255,255,.01);
}

.ls-league-sidebar {
    border-right: 1px solid rgba(255,255,255,.08);
    background: rgba(6,10,15,.55);
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ls-sidebar-head {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .7rem .75rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.ls-sidebar-title {
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.72);
}

.ls-sidebar-sub {
    font-size: .62rem;
    color: rgba(255,255,255,.38);
    margin-top: .1rem;
}

.ls-league-nav {
    overflow-y: auto;
    padding: .55rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.14) transparent;
}

.ls-league-divider {
    padding: .75rem .45rem .35rem;
    font-size: .56rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.35);
}

.ls-league-btn {
    width: 100%;
    min-height: 46px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: rgba(255,255,255,.8);
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .48rem .55rem;
    margin-bottom: .25rem;
    text-align: left;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
}

.ls-league-btn:hover {
    border-color: rgba(255,255,255,.1);
    background: rgba(255,255,255,.045);
}

.ls-league-btn.active {
    border-color: rgba(232,93,59,.45);
    background: rgba(232,93,59,.11);
    box-shadow: inset 3px 0 0 var(--ls-orange);
}

.ls-league-icon {
    width: 26px;
    min-width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ls-orange);
    background: rgba(255,255,255,.04);
    overflow: hidden;
}

.ls-league-logo {
    object-fit: contain;
    background: #fff;
    border-radius: 5px;
    padding: 2px;
}

.ls-league-swatch {
    display: inline-block;
    border-radius: 5px;
}

.ls-league-main {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .08rem;
}

.ls-league-name {
    font-size: .74rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ls-league-meta {
    font-size: .57rem;
    color: rgba(255,255,255,.38);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ls-league-count {
    min-width: 25px;
    padding: .12rem .32rem;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.66);
    font-size: .62rem;
    font-weight: 800;
    text-align: center;
}

.ls-fixture-browser {
    min-width: 0;
    overflow-y: auto;
    padding: .85rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.14) transparent;
}

.ls-browser-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .9rem;
    padding: .85rem;
    background: rgba(0,0,0,.32);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    margin-bottom: .75rem;
}

.ls-browser-kicker {
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.38);
    font-weight: 800;
    margin-bottom: .12rem;
}

.ls-browser-title {
    font-size: clamp(1.2rem, 2.2vw, 1.85rem);
    line-height: 1.05;
    letter-spacing: -.04em;
    margin: 0;
    font-weight: 950;
}

.ls-browser-meta {
    margin-top: .25rem;
    font-size: .7rem;
    color: rgba(255,255,255,.45);
}

.ls-status-pills {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    flex-wrap: wrap;
}

.ls-status-pills .btn {
    font-size: .7rem;
    white-space: nowrap;
}

.ls-active-summary {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.ls-active-summary span {
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 999px;
    padding: .28rem .55rem;
    color: rgba(255,255,255,.6);
    font-size: .66rem;
}

.ls-active-summary strong {
    color: #fff;
}

.ls-result-section {
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: .75rem;
}

.ls-result-head,
.ls-date-head {
    width: 100%;
    border: 0;
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.82);
    padding: .65rem .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,.065);
}

.ls-result-head:hover {
    background: rgba(255,255,255,.055);
}

.ls-result-head-meta,
.ls-date-head span:last-child {
    font-size: .62rem;
    color: rgba(255,255,255,.42);
    white-space: nowrap;
}

.ls-date-head span:first-child {
    font-size: .76rem;
    font-weight: 900;
}

.ls-result-body {
    display: flex;
    flex-direction: column;
}

.ls-result-section.collapsed .ls-result-body {
    display: none;
}

.ls-result-section.collapsed .ls-result-head .bi-chevron-down {
    transform: rotate(-90deg);
}

.ls-result-head .bi-chevron-down {
    transition: transform .16s ease;
}

.ls-fixture-row {
    color: inherit;
    text-decoration: none;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) minmax(125px, 180px) 72px;
    align-items: center;
    gap: .75rem;
    min-height: 56px;
    padding: .55rem .75rem;
    border-left: 3px solid var(--comp-c, #30363d);
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: background .15s ease, border-color .15s ease;
    position: relative;
}

.ls-fixture-row:last-child {
    border-bottom: 0;
}

.ls-fixture-row:hover,
.ls-fixture-row:focus {
    color: inherit;
    text-decoration: none;
    background: rgba(232,93,59,.06);
    border-left-color: var(--ls-orange);
}

.ls-fixture-row.is-live {
    background: linear-gradient(90deg, rgba(124,179,66,.08), transparent 42%);
}

.ls-fixture-time {
    display: flex;
    flex-direction: column;
    gap: .06rem;
    color: rgba(255,255,255,.7);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .02em;
}

.ls-fixture-time small {
    font-size: .54rem;
    color: rgba(255,255,255,.34);
    font-weight: 700;
    letter-spacing: 0;
}

.ls-fixture-teams {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
    align-items: center;
    gap: .5rem;
}

.ls-team-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .8rem;
    font-weight: 850;
}

.ls-home-name { color: var(--ls-orange); }
.ls-away-name { color: var(--ls-green); text-align: right; }

.ls-score-cell {
    text-align: center;
    font-size: 1.05rem;
    font-weight: 950;
    color: #fff;
    letter-spacing: .04em;
}

.ls-fixture-status {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .18rem;
}

.ls-fixture-status small {
    font-size: .55rem;
    color: rgba(255,255,255,.38);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.ls-fixture-action {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: rgba(255,255,255,.5);
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ls-fixture-row:hover .ls-fixture-action {
    color: var(--ls-orange);
}


.ls-fixture-row.no-stats {
    cursor: default;
    opacity: .78;
}

.ls-fixture-row.no-stats:hover,
.ls-fixture-row.no-stats:focus {
    background: transparent;
    border-left-color: var(--comp-c, #30363d);
}

.ls-fixture-row.no-stats .ls-fixture-action {
    color: rgba(255,255,255,.32);
}

.ls-fixture-row.no-stats:hover .ls-fixture-action {
    color: rgba(255,255,255,.32);
}

.ls-fixture-row.no-stats .ls-score-cell {
    color: rgba(255,255,255,.86);
}

.ls-fixture-debug {
    grid-column: 1 / -1;
    font-size: .55rem;
    color: rgba(255,255,255,.3);
    margin-top: -.25rem;
}

.ls-empty-panel {
    min-height: 220px;
    background: rgba(0,0,0,.22);
    border: 1px dashed rgba(255,255,255,.12);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.55);
    text-align: center;
    padding: 2rem;
}

.ls-empty-panel .bi {
    font-size: 2rem;
    opacity: .36;
    margin-bottom: .65rem;
}

@media (max-width: 991px) {
    .ls-index-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .ls-league-sidebar {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
        max-height: 184px;
    }

    .ls-sidebar-head {
        min-height: 44px;
        padding: .5rem .65rem;
    }

    .ls-league-nav {
        display: flex;
        gap: .4rem;
        overflow-x: auto;
        overflow-y: hidden;
        padding: .45rem .55rem .6rem;
    }

    .ls-league-divider {
        display: none;
    }

    .ls-league-btn {
        width: 220px;
        min-width: 220px;
        margin-bottom: 0;
    }

    .ls-fixture-browser {
        padding: .65rem;
    }
}

@media (max-width: 767px) {
    .ls-index-shell {
        height: calc(100dvh - var(--ls-nav-h) - 60px);
    }

    .ls-topbar {
        flex-wrap: wrap;
        height: auto;
        min-height: var(--ls-nav-h);
        padding-top: .45rem;
        padding-bottom: .45rem;
    }

    .ls-topbar .input-group {
        order: 3;
        max-width: none !important;
        flex-basis: 100%;
    }

    .ls-browser-toolbar {
        flex-direction: column;
        align-items: stretch;
        padding: .7rem;
    }

    .ls-status-pills {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: .15rem;
    }

    .ls-fixture-row {
        grid-template-columns: 58px minmax(0, 1fr) 38px;
        gap: .5rem;
        padding: .58rem .6rem;
    }

    .ls-fixture-teams {
        grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
        gap: .35rem;
    }

    .ls-score-cell {
        font-size: .88rem;
    }

    .ls-fixture-status {
        grid-column: 2 / -1;
        grid-row: 2;
        flex-direction: row;
        align-items: center;
    }

    .ls-fixture-action {
        grid-column: 3;
        grid-row: 1;
        font-size: 0;
    }

    .ls-fixture-action .bi {
        font-size: .8rem;
    }

    .ls-team-name {
        font-size: .72rem;
    }

    .ls-result-head,
    .ls-date-head {
        padding: .55rem .6rem;
    }
}

/* ── Calendar navigation for match-stats index ───────────────────── */
.ls-calendar-strip {
    display: flex;
    align-items: stretch;
    gap: .45rem;
    margin: 0 0 .75rem;
    padding: .45rem;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.14) transparent;
}

.ls-calendar-nav {
    display: flex;
    align-items: stretch;
    gap: .45rem;
    min-width: 0;
}

.ls-calendar-btn {
    min-width: 78px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.74);
    padding: .42rem .58rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .05rem;
    line-height: 1.05;
    text-align: left;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
    white-space: nowrap;
}

.ls-calendar-btn:hover {
    background: rgba(255,255,255,.055);
    border-color: rgba(255,255,255,.14);
    color: #fff;
}

.ls-calendar-btn.active {
    background: rgba(232,93,59,.14);
    border-color: rgba(232,93,59,.5);
    color: #fff;
    box-shadow: inset 0 -3px 0 var(--ls-orange);
}

.ls-calendar-btn span {
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .02em;
}

.ls-calendar-btn small {
    font-size: .55rem;
    color: rgba(255,255,255,.42);
    font-weight: 700;
}

.ls-calendar-btn.active small {
    color: rgba(255,255,255,.68);
}

@media (max-width: 767px) {
    .ls-calendar-strip {
        margin-bottom: .6rem;
        padding: .38rem;
    }

    .ls-calendar-btn {
        min-width: 72px;
        padding: .38rem .5rem;
    }
}


/* ── Week navigation refinements for DB-backed match-stats index ───── */
.ls-calendar-strip.has-week-nav {
    align-items: center;
    gap: .5rem;
}

.ls-week-btn {
    width: 34px;
    min-width: 34px;
    height: 48px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 11px;
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}

.ls-week-btn:hover {
    background: rgba(255,255,255,.065);
    border-color: rgba(255,255,255,.18);
    color: #fff;
}

.ls-week-meta {
    min-width: 128px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    background: rgba(0,0,0,.18);
    padding: .42rem .6rem;
    line-height: 1.05;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ls-week-meta span {
    font-size: .68rem;
    font-weight: 900;
    color: rgba(255,255,255,.86);
}

.ls-week-meta small {
    margin-top: .12rem;
    font-size: .55rem;
    color: rgba(255,255,255,.42);
    font-weight: 700;
}

.ls-calendar-nav {
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
}
.ls-calendar-nav::-webkit-scrollbar { display: none; }

.ls-fixture-row.action-preview {
    border-left-color: #3b82f6;
}

.ls-fixture-row.action-preview:hover {
    background: rgba(59,130,246,.08);
    border-color: rgba(59,130,246,.28);
}

.ls-fixture-action .is-preview {
    color: #93c5fd;
}

.ls-fixture-action .is-score-only {
    color: rgba(255,255,255,.42);
}

.ls-fixture-status small .ls-row-source {
    color: rgba(255,255,255,.32);
}

@media (max-width: 767px) {
    .ls-calendar-strip.has-week-nav {
        display: grid;
        grid-template-columns: 34px minmax(104px, 1fr) 34px;
        align-items: stretch;
    }

    .ls-calendar-nav {
        grid-column: 1 / -1;
        order: 4;
    }

    .ls-week-btn {
        height: 42px;
    }

    .ls-week-meta {
        min-width: 0;
        align-items: center;
        text-align: center;
    }
}