.stx-wrapper{width:100%;max-width:1400px;margin:0 auto;padding:1rem}
@media (max-width:767px){.stx-wrapper{padding:0}}

.stx-breadcrumbs{display:flex;align-items:center;gap:6px;margin-bottom:1rem;font-size:.78rem;color:#6b7280;padding:0}
@media (max-width:767px){.stx-breadcrumbs{padding:10px 16px 0;margin-bottom:0}}
.stx-breadcrumbs a{color:#9ba1ac;text-decoration:none;transition:color .15s}
.stx-breadcrumbs a:hover{color:#59f6b1}
.stx-breadcrumbs .sep{color:#6b7280;font-size:.65rem}
.stx-breadcrumbs .current{color:#e5e7eb;font-weight:500}

.stx-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:.75rem;margin-bottom:1rem;border-bottom:1px solid hsla(0,0%,100%,.06)}
@media (max-width:767px){.stx-header{flex-direction:column;align-items:flex-start;padding:12px 16px 10px;margin-bottom:0;gap:8px}}
.stx-header__left{flex:1;display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}
@media (max-width:767px){.stx-header__left{flex-direction:column;gap:2px}}
.stx-header__title{font-size:1.1rem;font-weight:700;margin:0;color:#fff}
.stx-header__title i{color:#59f6b1;margin-right:8px;font-size:.95rem}
.stx-header__subtitle{font-size:.8rem;font-weight:400;color:#6b7280;margin:0}

/* Search */
.stx-search{position:relative;max-width:420px;width:100%;margin-bottom:1.25rem}
@media (max-width:767px){.stx-search{padding:0 16px;max-width:none;margin-bottom:.75rem}}
.stx-search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#6b7280;font-size:.85rem;pointer-events:none}
@media (max-width:767px){.stx-search i{left:30px}}
.stx-search input{width:100%;padding:10px 14px 10px 38px;background:#141a28;border:1px solid hsla(0,0%,100%,.06);border-radius:8px;color:#e5e7eb;font-size:.88rem;outline:none;transition:border-color .15s}
.stx-search input::-moz-placeholder{color:#6b7280}
.stx-search input::placeholder{color:#6b7280}
.stx-search input:focus{border-color:rgba(89,246,177,.25)}

/* League grid - single column until wide enough for two full tables */
.stx-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:2rem}
@media (min-width:1100px){.stx-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.stx-grid{gap:0;margin-bottom:1rem}}

.stx-card{background:#141a28;border:1px solid hsla(0,0%,100%,.06);border-radius:10px;overflow:hidden;transition:border-color .15s}
.stx-card:hover{border-color:hsla(0,0%,100%,.12)}
@media (max-width:600px){.stx-card{border-radius:0;border-left:none;border-right:none;margin-bottom:-1px}}
.stx-card.is-hidden{display:none}

.stx-card__header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#1c202c;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:background .1s}
.stx-card__header:hover{background:#232a3b}
.stx-card__league{display:flex;align-items:center;gap:10px}
.stx-card__league-name{font-size:.88rem;font-weight:600;color:#fff}
.stx-card__league-country{font-size:.72rem;color:#6b7280}
.stx-card__toggle{color:#6b7280;font-size:.65rem;transition:transform .2s}
.stx-card__toggle.is-expanded{transform:rotate(180deg)}
.stx-card__link{font-size:.75rem;color:#59f6b1;text-decoration:none;font-weight:500;white-space:nowrap;transition:opacity .15s}
.stx-card__link:hover{opacity:.8}

/* Collapse: use grid row trick for smooth height animation */
.stx-card__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;border-top:1px solid transparent}
.stx-card__body.is-open{grid-template-rows:1fr;border-top-color:hsla(0,0%,100%,.06)}
.stx-card__inner{overflow:hidden;min-height:0}

.stx-card__loading{display:flex;align-items:center;justify-content:center;padding:2rem;color:#6b7280;font-size:.82rem;gap:8px}
.stx-card__loading i{animation:stxSpin 1s linear infinite}
@keyframes stxSpin{to{transform:rotate(1turn)}}

.stx-card__error{padding:1.5rem;text-align:center;font-size:.82rem;color:#6b7280}

/* Standings table (div-based for responsiveness) */
.stx-table{width:100%}
.stx-table[role="table"]{display:block}

.stx-row{display:flex;align-items:center;padding:0 14px;min-height:36px;border-bottom:1px solid hsla(0,0%,100%,.03);transition:background .1s}
.stx-row:hover{background:hsla(0,0%,100%,.02)}
.stx-row:last-child{border-bottom:none}
.stx-row--header{background:#1c202c;border-bottom:1px solid hsla(0,0%,100%,.06);min-height:32px;position:sticky;top:0;z-index:1}
.stx-row--header:hover{background:#1c202c}
.stx-row--header .stx-cell{color:#6b7280;font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.stx-row--header .stx-cell:hover{color:#9ba1ac}

/* Zone highlighting */
.stx-row--promotion{border-left:3px solid #22c55e}
.stx-row--playoff{border-left:3px solid #eab308}
.stx-row--relegation{border-left:3px solid #ef4444}

/* Cells */
.stx-cell{font-size:.82rem;color:#e5e7eb;font-variant-numeric:tabular-nums;padding:6px 0;flex-shrink:0;text-align:center}

.stx-cell--pos{width:32px;font-weight:700;color:#6b7280;text-align:center}
.stx-cell--team{flex:1;min-width:0;text-align:left;display:flex;align-items:center;gap:8px;padding-right:8px}
.stx-cell--team img{width:20px;height:20px;object-fit:contain;flex-shrink:0}
.stx-cell--team-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;color:#e5e7eb}
.stx-cell--mp{width:34px}
.stx-cell--w{width:30px}
.stx-cell--d{width:30px}
.stx-cell--l{width:30px}
.stx-cell--gf{width:30px}
.stx-cell--ga{width:30px}
.stx-cell--gd{width:34px}
.stx-cell--pts{width:36px;font-weight:700;color:#fff}
.stx-cell--form{width:90px;display:flex;align-items:center;justify-content:center;gap:3px}

/* Form indicators */
.stx-form{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:3px;font-size:.6rem;font-weight:700;color:#fff;flex-shrink:0}
.stx-form--W{background:#22c55e}
.stx-form--D{background:#6b7280}
.stx-form--L{background:#ef4444}

/* Movement arrows */
.stx-move{font-size:.55rem;margin-left:2px}
.stx-move--up{color:#22c55e}
.stx-move--down{color:#ef4444}

/* Stage tabs */
.stx-stage-tabs{display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;border-bottom:1px solid hsla(0,0%,100%,.06);scrollbar-width:none;padding:0 14px}
.stx-stage-tabs::-webkit-scrollbar{display:none}
.stx-stage-tab{padding:9px 14px;background:none;border:none;border-bottom:2px solid transparent;color:#6b7280;font-size:.78rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
.stx-stage-tab:hover{color:#9ba1ac}
.stx-stage-tab.is-active{color:#59f6b1;border-bottom-color:#59f6b1}

/* Stage panels */
.stx-stage-panel{display:none}
.stx-stage-panel.is-active{display:block}

/* Group headers */
.stx-group-header{padding:10px 14px 6px;font-size:.78rem;font-weight:700;color:#9ba1ac;text-transform:uppercase;letter-spacing:.03em;background:#1c202c;border-bottom:1px solid hsla(0,0%,100%,.06);border-top:1px solid hsla(0,0%,100%,.04)}
.stx-group-header:first-child{border-top:none}

/* Show page specific */
.stx-show{max-width:860px;margin:0 auto}
.stx-show .stx-table{background:#141a28;border:1px solid hsla(0,0%,100%,.06);border-radius:10px;overflow:hidden}
@media (max-width:600px){.stx-show .stx-table{border-radius:0;border-left:none;border-right:none}}

.stx-show__title{font-size:1.25rem;font-weight:700;color:#fff;margin:0 0 .5rem}
@media (max-width:767px){.stx-show__title{font-size:1.05rem;padding:0 16px}}
.stx-show__meta{font-size:.82rem;color:#6b7280;margin:0 0 1.25rem}
@media (max-width:767px){.stx-show__meta{padding:0 16px}}

/* League navigation on show page */
.stx-nav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1.5rem}
@media (max-width:767px){.stx-nav{padding:0 16px;margin-bottom:1rem;gap:4px}}
.stx-nav a{display:inline-flex;align-items:center;padding:6px 12px;background:#141a28;border:1px solid hsla(0,0%,100%,.06);border-radius:6px;color:#9ba1ac;font-size:.75rem;font-weight:500;text-decoration:none;transition:all .15s;white-space:nowrap}
.stx-nav a:hover{border-color:rgba(89,246,177,.2);color:#59f6b1}
.stx-nav a.is-active{background:rgba(89,246,177,.1);border-color:rgba(89,246,177,.2);color:#59f6b1;font-weight:600}

/* FAQ section for SEO */
.stx-faq{margin-top:2rem;padding:1.25rem;background:#141a28;border:1px solid hsla(0,0%,100%,.06);border-radius:10px}
@media (max-width:767px){.stx-faq{margin-top:1rem;border-radius:0;border-left:none;border-right:none;padding:1rem 16px}}
.stx-faq__title{font-size:.95rem;font-weight:700;color:#fff;margin:0 0 1rem}
.stx-faq__item{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid hsla(0,0%,100%,.04)}
.stx-faq__item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.stx-faq__q{font-size:.85rem;font-weight:600;color:#e5e7eb;margin:0 0 .4rem}
.stx-faq__a{font-size:.8rem;color:#9ba1ac;margin:0;line-height:1.55}
.stx-faq__a a{color:#59f6b1;text-decoration:none}
.stx-faq__a a:hover{text-decoration:underline}

/* SEO content area */
.stx-seo{margin-top:2rem;padding:1.25rem;background:#141a28;border:1px solid hsla(0,0%,100%,.06);border-radius:10px}
@media (max-width:767px){.stx-seo{margin:1rem 16px;padding:1rem}}
.stx-seo h2{font-size:.95rem;font-weight:600;color:#fff;margin:0 0 .5rem}
.stx-seo p{font-size:.82rem;color:#9ba1ac;line-height:1.6;margin:0 0 .75rem}
.stx-seo a{color:#59f6b1;text-decoration:none}
.stx-seo a:hover{text-decoration:underline}

/* Section headers for grouped leagues on index */
.stx-section{margin-bottom:1.5rem}
@media (max-width:767px){.stx-section{margin-bottom:1rem}}
.stx-section__title{font-size:.82rem;font-weight:700;color:#9ba1ac;text-transform:uppercase;letter-spacing:.04em;margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:1px solid hsla(0,0%,100%,.04)}
@media (max-width:767px){.stx-section__title{padding:0 16px .5rem}}

/* Compact mode for 340px fixture widget */
.standings-compact .stx-table{font-size:.75rem}
.standings-compact .stx-row{padding:0 8px;min-height:28px}
.standings-compact .stx-cell--pos{width:24px;font-size:.72rem}
.standings-compact .stx-cell--team img{width:16px;height:16px}
.standings-compact .stx-cell--team-name{font-size:.72rem}
.standings-compact .stx-cell--mp,
.standings-compact .stx-cell--w,
.standings-compact .stx-cell--d,
.standings-compact .stx-cell--l,
.standings-compact .stx-cell--gf,
.standings-compact .stx-cell--ga,
.standings-compact .stx-cell--form{display:none}
.standings-compact .stx-cell--gd{width:30px;font-size:.72rem}
.standings-compact .stx-cell--pts{width:30px;font-size:.75rem}
.standings-compact .stx-row--header .stx-cell{font-size:.62rem}

/*
 * Responsive column visibility.
 * Inside the 2-col grid each card is ~50% of 1100-1400px = 550-700px.
 * We hide extended stats when the card itself can't fit them.
 * Use container query if supported, otherwise use viewport breakpoints
 * that match the actual card widths.
 */

/* When 2-col grid is active (>=1100px), each card is ~500-650px wide.
   Hide GF, GA, form, and W/D/L to keep team names readable. */
@media (min-width:1100px){
    .stx-grid .stx-cell--gf,
    .stx-grid .stx-cell--ga,
    .stx-grid .stx-cell--w,
    .stx-grid .stx-cell--d,
    .stx-grid .stx-cell--l,
    .stx-grid .stx-cell--form{display:none}
}

/* Single column, full-width: show everything above 768px */
@media (max-width:1099px) and (min-width:769px){
    .stx-cell--form{width:90px}
}

/* Tablet single col: hide GF/GA */
@media (max-width:768px){
    .stx-cell--gf,.stx-cell--ga{display:none}
    .stx-cell--form{width:72px}
    .stx-form{width:13px;height:13px;font-size:.55rem}
}

/* Mobile: minimal columns */
@media (max-width:520px){
    .stx-cell--w,.stx-cell--d,.stx-cell--l{display:none}
    .stx-cell--form{display:none}
    .stx-cell--gd{width:30px}
    .stx-row{padding:0 10px}
}

/* All leagues list on search */
.stx-all-leagues{display:none;margin-bottom:1.5rem}
.stx-all-leagues.is-visible{display:block}
.stx-all-leagues__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0}
@media (max-width:600px){.stx-all-leagues__grid{grid-template-columns:1fr}}
.stx-league-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid hsla(0,0%,100%,.03);cursor:pointer;transition:background .1s}
.stx-league-item:hover{background:#1e2435}
.stx-league-item.is-hidden{display:none}
.stx-league-item__name{font-size:.82rem;font-weight:500;color:#e5e7eb}
.stx-league-item__country{font-size:.72rem;color:#6b7280;margin-left:6px}
.stx-league-item i{color:#6b7280;font-size:.6rem;transition:color .15s}
.stx-league-item:hover i{color:#59f6b1}