@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Sora:wght@500;600;700;800&family=Source+Sans+3:wght@400;500;600;700;800;900&display=swap");

:root {
  color-scheme: dark;
  --bg: #070707;
  --side: #101010;
  --panel: #101012;
  --panel-soft: #19191d;
  --input: #242426;
  --line: #3b3b3f;
  --text: #f4f4f5;
  --muted: #b4b4b8;
  --orange: #f59e0b;
  --gold: #d8a83f;
  --gold-soft: rgba(216, 168, 63, .18);
  --blue: #2b9af3;
  --green: #2f8739;
  --red: #82313c;
  --navy: #132b51;
  --sage: #5e846f;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(216, 168, 63, .08), transparent 28%),
    radial-gradient(circle at 80% 18%, rgba(43, 154, 243, .05), transparent 30%),
    var(--bg);
  color: var(--text);
  font-family: "Inter", "Source Sans 3", "Source Sans Pro", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

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

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  background: linear-gradient(180deg, #111, #0b0b0c);
  border-right: 1px solid rgba(216, 168, 63, .22);
  padding: 18px 18px 28px;
}
.side-brand {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(216, 168, 63, .22);
}
.side-brand img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(216, 168, 63, .12);
}
.side-brand strong {
  line-height: 1.15;
  font-size: 16px;
}
.side-block { border-bottom: 1px solid rgba(216, 168, 63, .18); padding: 16px 0; }
.side-block:first-child { padding-top: 0; }
.side-title { margin: 0 0 12px; font-weight: 900; font-size: 14px; color: var(--gold); }
.side-button, .mini-button {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 38px;
  margin: 8px 0;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 5px;
  background: rgba(255, 255, 255, .045);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
}
.side-button:hover, .mini-button:hover { border-color: var(--gold); background: rgba(216, 168, 63, .08); }
.side-button.active { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(216, 168, 63, .35); }
.side-button.gold { background: #b98600; border-color: #d49a14; }
.side-button.blue { background: var(--navy); border-color: #1e4382; }
.side-button.red { background: var(--red); border-color: #a84552; }
.side-button.sage { background: var(--sage); border-color: #75a58b; }
.side-note { color: var(--orange); font-size: 12px; font-weight: 800; margin: 12px 0 0; }
.progress { height: 8px; background: #0e0e10; border-radius: 999px; overflow: hidden; }
.progress span { display: block; width: 62%; height: 100%; background: linear-gradient(90deg, #b98600, var(--orange)); }

.main {
  padding: 34px 38px 70px;
  min-width: 0;
}
.center-hero {
  text-align: center;
  max-width: 860px;
  margin: 40px auto 28px;
}
.brand-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 28px;
}
.brand-title img { width: 112px; height: 112px; border-radius: 50%; }
.brand-title h1 { font-size: clamp(30px, 4vw, 42px); line-height: 1.08; margin: 0; overflow-wrap: anywhere; }
.center-hero p { line-height: 1.65; margin: 18px auto; max-width: 760px; }
.lead-strong { font-weight: 800; }
.streamlit-home { margin-top: 28px; }
.streamlit-home .brand-title img { width: 126px; height: 126px; }
.home-news {
  max-width: 1180px;
  margin: 0 auto;
}

.divider { height: 1px; background: var(--line); margin: 28px 0; }
.panel {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  padding: 18px;
}
.panel.center { text-align: center; }
.panel-title { margin: 0 0 12px; font-size: 22px; }
.muted { color: var(--muted); }
.orange { color: var(--orange); }

.quick-search label, .field label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
}
.quick-search input, input, select, textarea {
  width: 100%;
  min-height: 38px;
  background: var(--input);
  border: 1px solid #313136;
  color: var(--text);
  border-radius: 5px;
  padding: 8px 10px;
}
.home-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 10px;
}
.streamlit-actions { margin-top: 18px; }
.streamlit-actions .big-button,
.streamlit-categories .big-button {
  min-height: 44px;
}
.home-utility > div {
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px;
  background: #111113;
}
.action-row, .category-grid, .two-col, .filters-grid {
  display: grid;
  gap: 14px;
}
.action-row { grid-template-columns: repeat(5, 1fr); }
.category-grid { grid-template-columns: repeat(2, 1fr); }
.two-col { grid-template-columns: 1fr 1fr; align-items: start; }
.filters-grid { grid-template-columns: 1.3fr repeat(4, 1fr); }

.big-button {
  min-height: 40px;
  border: 1px solid #5b5b60;
  border-radius: 5px;
  background: var(--panel-soft);
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
  text-align: center;
  padding: 10px 12px;
}
.big-button:hover { filter: brightness(1.14); border-color: var(--orange); }
.big-button.green { background: var(--green); border-color: var(--green); }
.big-button.blue { background: #1667b7; border-color: #247ed8; }
.big-button.gold { background: #b98600; border-color: #d49a14; }
.big-button.red { background: var(--red); border-color: #a84552; }
.big-button.navy { background: var(--navy); border-color: #1e4382; }
.big-button.sage { background: var(--sage); border-color: #75a58b; }
.big-button.block { width: 100%; display: block; }

.page-head { margin-bottom: 18px; }
.page-head h1 { font-size: 32px; margin: 0 0 10px; }
.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 18px 0;
}
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.segmented button {
  border: 0;
  color: var(--text);
  background: var(--panel-soft);
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 800;
}
.segmented button.active { background: #2f6fbb; }

.cards { display: grid; grid-template-columns: repeat(2, minmax(300px, 1fr)); gap: 14px; }
.match-card {
  border: 1px solid var(--line);
  background: #121214;
  border-radius: 8px;
  padding: 14px;
}
.match-topline { color: var(--muted); margin-bottom: 10px; font-size: 14px; }
.competition-pill {
  display: block;
  text-align: center;
  border: 1px solid #57575d;
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: 800;
  margin: 8px 0 14px;
}
.scoreboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  text-align: center;
}
.team-box button {
  display: block;
  width: 100%;
  min-height: 38px;
  margin-top: 8px;
  border: 1px solid #56565c;
  border-radius: 7px;
  background: #17171a;
  color: white;
  cursor: pointer;
}
.crest {
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: #222;
  border: 1px solid #4a4a50;
  color: white;
  font-weight: 900;
  margin: 0 auto;
  overflow: hidden;
}
.crest img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: white;
  padding: 5px;
}
.score {
  display: grid;
  justify-items: center;
  gap: 4px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}
.score-main { font-size: 30px; }
.score-detail {
  display: inline-block;
  max-width: 112px;
  border: 1px solid #4a4a50;
  border-radius: 999px;
  padding: 5px 10px;
  background: #202029;
  color: #f3d28b;
  font-size: 15px;
  line-height: 1.1;
  white-space: normal;
}
.scorers {
  margin: 12px 0;
  border: 1px solid #30303a;
  border-radius: 8px;
  background: #202029;
  padding: 9px;
  text-align: center;
  font-style: italic;
}
.badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; border-top: 1px solid var(--line); padding-top: 10px; }
.badge { border-radius: 999px; padding: 5px 10px; font-weight: 800; background: #2d55b8; font-size: 14px; }
.badge.format { background: #a36a2c; }
.add-cart { margin-top: 10px; width: 100%; background: var(--blue); border: 0; color: white; border-radius: 8px; min-height: 40px; cursor: pointer; font-weight: 800; }
.format-select { width: 100%; margin-top: 12px; background: #202029; border-color: #3a3a44; }
.fixed-format { display: block; margin-top: 12px; text-align: center; color: var(--muted); font-weight: 800; }

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
table { width: 100%; border-collapse: collapse; min-width: 1820px; font-size: 14px; line-height: 1.25; }
th, td { border-bottom: 1px solid #303036; padding: 6px 8px; text-align: left; white-space: nowrap; vertical-align: middle; }
th { background: #202024; position: sticky; top: 0; z-index: 1; }
tr:hover td { background: #17171b; }
.table-wrap input[type="checkbox"] { width: 24px; min-height: 24px; margin: 0 auto; }
.score-cell { font-weight: 800; color: #f4f4f5; min-width: 82px; text-align: center; }
.score-table-main { display: block; white-space: nowrap; }
.score-table-detail { display: block; color: var(--muted); font-size: 12px; line-height: 1.1; white-space: nowrap; }
.table-format { font-weight: 800; color: #f3d28b; white-space: nowrap; }
.table-format-select { min-width: 132px; margin-top: 0; }
.selection-action { margin: 8px 0 12px; width: auto; min-width: 260px; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.stat-tile, .stat-panel {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 8px;
  padding: 16px;
}
.stat-tile span { display: block; color: var(--muted); font-weight: 700; }
.stat-tile strong { display: block; margin-top: 8px; font-size: 32px; }
.stats-dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.stat-panel.wide { grid-column: 1 / -1; }
.stat-panel h2 { margin: 0 0 12px; }
.stat-bars { display: grid; gap: 10px; }
.stat-bar-label { display: flex; justify-content: space-between; gap: 14px; font-weight: 800; }
.stat-bar-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-bar-track { height: 10px; border-radius: 999px; overflow: hidden; background: #0f0f11; border: 1px solid #2c2c31; }
.stat-bar-track span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2b9af3, #f59e0b); }
.season-bars .stat-bar-track span { background: linear-gradient(90deg, #2f8739, #f59e0b); }

.cart-item, .blog-card, .nav-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px;
  background: var(--panel);
}
.cart-list, .blog-grid { display: grid; gap: 14px; }
.cart-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px 120px;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.cart-row:first-child { padding-top: 0; }
.cart-row-title { font-weight: 800; font-size: 18px; }
.cart-row small { color: var(--muted); display: block; margin-top: 8px; }
.archive-note { color: var(--orange); font-style: italic; }
.summary-box { margin-top: 26px; display: grid; gap: 14px; }
.info-strip { padding: 18px; border-radius: 8px; background: #14324b; color: #40a9ff; font-size: 18px; }
.success-strip { padding: 18px; border-radius: 8px; background: #143d22; color: #43e66f; font-size: 18px; }
.total-price { font-size: 34px; font-weight: 900; margin: 18px 0; }
.private-message {
  white-space: pre-wrap;
  background: #1d2028;
  border-radius: 8px;
  padding: 18px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  line-height: 1.65;
  max-height: 360px;
  overflow: auto;
}
.blog-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 20px;
  align-items: end;
  border: 1px solid #51401d;
  background: linear-gradient(135deg, #181511, #262018);
  border-radius: 8px;
  padding: 22px;
  margin-bottom: 18px;
}
.blog-featured h2 { font-size: 30px; margin: 8px 0; }
.blog-featured p { color: #e4e0d7; line-height: 1.55; }
.blog-grid { grid-template-columns: repeat(2, 1fr); }
.modern-blog .blog-card { min-height: 220px; display: grid; align-content: start; gap: 8px; }
.blog-card h2 { margin: 8px 0; }
.wanted-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.wanted-card { border-radius: 8px; padding: 22px; border: 1px solid var(--line); line-height: 1.65; }
.wanted-card.milan { background: linear-gradient(135deg, #2b1111, #111); border-color: #e32221; }
.wanted-card.france98 { background: linear-gradient(135deg, #0b2340, #111); border-color: #1a5fb4; }
.faq-list { display: grid; gap: 12px; }
.faq-item { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 14px 16px; }
.faq-item summary { cursor: pointer; font-size: 18px; font-weight: 900; }
.faq-item p { color: var(--muted); line-height: 1.55; }
.compact-cards { grid-template-columns: repeat(3, minmax(260px, 1fr)); }
.compact-cards .match-card { font-size: 14px; }
.compact-cards .scorers { display: none; }
.compact-results { min-width: 1120px; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-price { display: flex; justify-content: space-between; border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 8px 0; }
.notice { background: #113d24; border: 1px solid #246a3b; border-radius: 5px; padding: 12px; color: #b7f5c8; }
.breadcrumb { color: var(--muted); margin: 0 0 24px; }
.nav-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 28px 0; }
.edition-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 28px 0; }
.edition-head { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 18px; align-items: center; }
.edition-logo { justify-self: end; }
.edition-logo .crest { width: 112px; height: 96px; border-radius: 8px; }
.metric { margin: 20px 0; }
.metric strong { display: block; font-size: 42px; font-weight: 500; }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 40;
}
.modal.open { display: flex; }
.modal-card { max-width: 680px; background: #17171b; border: 1px solid var(--line); border-radius: 8px; padding: 22px; }
.modal-card p, .modal-card li { color: #d5d5d8; line-height: 1.55; }

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
  .main { padding: 24px 18px 60px; }
  .action-row, .category-grid, .two-col, .filters-grid, .cards, .blog-grid, .nav-grid, .edition-grid, .edition-head, .cart-row, .stats-grid, .stats-dashboard { grid-template-columns: 1fr; }
  .scoreboard { grid-template-columns: 1fr; }
}

.progress.large { height: 14px; background: #0b0b0d; border: 1px solid var(--line); }

.home-cta-grid, .pill-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 24px;
}
.pill-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pill-grid a {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--line);
  background: #15151a;
  border-radius: 8px;
  padding: 10px;
  font-weight: 800;
}
.pill-grid a:hover { border-color: var(--orange); color: var(--orange); }
.blog-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 18px;
  align-items: center;
  margin-top: 22px;
}
.home-blog-strip {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #111113;
  padding: 14px 18px;
  margin-top: 24px;
}
.home-blog-strip span {
  display: block;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 4px;
}
.home-blog-strip a {
  color: var(--text);
  border: 1px solid #5b5b60;
  border-radius: 5px;
  padding: 10px 14px;
  text-decoration: none;
  font-weight: 900;
  white-space: nowrap;
}
.home-blog-strip a:hover {
  color: var(--orange);
  border-color: var(--orange);
}

.premium-panel {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)),
    #101012;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 20px 60px rgba(0, 0, 0, .18);
}
.gold-text,
.archive-highlight,
.archive-section-label,
.archive-news-panel a,
.archive-blog-all {
  color: var(--gold);
}
.archive-hero {
  display: grid;
  grid-template-columns: minmax(150px, 245px) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  padding: 34px 40px;
  min-height: 285px;
}
.archive-hero-logo {
  display: grid;
  place-items: center;
}
.archive-hero-logo img {
  width: clamp(150px, 15vw, 215px);
  height: clamp(150px, 15vw, 215px);
  border-radius: 50%;
  filter: drop-shadow(0 0 26px rgba(216, 168, 63, .25));
}
.archive-hero-copy h1 {
  font-size: clamp(36px, 4.2vw, 48px);
  line-height: 1.05;
  margin: 0 0 18px;
}
.archive-hero-copy p {
  max-width: 760px;
  line-height: 1.48;
  margin: 12px 0;
  font-size: 18px;
}
.archive-highlight {
  font-weight: 900;
}
.archive-home-grid {
  display: grid;
  grid-template-columns: minmax(430px, .92fr) minmax(420px, 1.08fr);
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}
.archive-search-panel,
.archive-news-panel,
.archive-blog-card {
  padding: 26px;
}
.archive-search-panel h2,
.archive-news-panel h2,
.archive-blog-card h2 {
  margin: 0 0 12px;
  font-size: 28px;
}
.archive-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: 10px;
  margin: 18px 0 22px;
}
.archive-search-row input {
  min-height: 54px;
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18);
}
.archive-button {
  min-height: 46px;
  border-radius: 6px;
  border: 1px solid rgba(216, 168, 63, .56);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
}
.gold-button,
.outline-button:hover {
  background: linear-gradient(135deg, #8a610e, #4a3410);
}
.outline-button {
  background: rgba(216, 168, 63, .1);
  width: fit-content;
}
.archive-section-label {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 6px 0 14px;
  font-weight: 900;
}
.archive-section-label::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(216, 168, 63, .22);
}
.archive-category-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.archive-category-card {
  min-height: 98px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  padding: 16px;
  transition: transform .15s ease, border-color .15s ease;
}
.archive-category-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
}
.archive-category-card span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .22);
  font-size: 30px;
}
.archive-category-card strong {
  font-size: 20px;
  line-height: 1.12;
}
.archive-category-card small {
  display: block;
  color: rgba(255, 255, 255, .82);
  margin-top: 4px;
}
.gold-card { background: linear-gradient(135deg, rgba(185, 134, 0, .78), rgba(92, 63, 10, .7)); }
.blue-card { background: linear-gradient(135deg, rgba(24, 81, 150, .78), rgba(15, 36, 73, .7)); }
.red-card { background: linear-gradient(135deg, rgba(130, 49, 60, .82), rgba(61, 20, 27, .7)); }
.green-card { background: linear-gradient(135deg, rgba(64, 117, 76, .82), rgba(26, 61, 33, .72)); }
.archive-advanced-link {
  min-height: 48px;
  margin-top: 16px;
  border: 1px solid rgba(216, 168, 63, .55);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  color: var(--text);
  font-weight: 900;
}
.archive-side-stack {
  display: grid;
  gap: 16px;
}
.archive-news-panel p {
  line-height: 1.45;
  margin: 13px 0;
}
.archive-news-panel a,
.archive-blog-all {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.archive-blog-layout {
  display: grid;
  grid-template-columns: minmax(145px, 180px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.blog-archive-thumb {
  position: relative;
  min-height: 170px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(216, 168, 63, .22);
  background:
    linear-gradient(135deg, rgba(216, 168, 63, .20), rgba(0, 0, 0, .40)),
    repeating-linear-gradient(-12deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .08) 2px, transparent 2px, transparent 15px),
    #191510;
}
.blog-archive-thumb::before {
  content: "ARCHIVES FOOTBALL";
  position: absolute;
  left: 16px;
  bottom: 18px;
  transform: rotate(-7deg);
  color: rgba(255, 255, 255, .32);
  font-size: 23px;
  font-weight: 900;
  letter-spacing: 1px;
}
.vhs-shape {
  position: absolute;
  left: 26px;
  top: 26px;
  width: 112px;
  height: 68px;
  border-radius: 6px;
  background: linear-gradient(145deg, #34312c, #141414);
  border: 1px solid rgba(255, 255, 255, .18);
  transform: rotate(-12deg);
  box-shadow: 0 12px 22px rgba(0, 0, 0, .38);
}
.vhs-shape::after {
  content: "";
  position: absolute;
  inset: 16px 18px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .16);
}
.ball-shape {
  position: absolute;
  right: 30px;
  top: 34px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 32%, rgba(255, 255, 255, .78) 0 7px, transparent 8px),
    repeating-conic-gradient(from 18deg, #c8b783 0deg 22deg, #3b3325 22deg 36deg);
  opacity: .88;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}
.blog-meta {
  color: var(--muted);
  margin: 0 0 8px;
}
.blog-meta span {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(216, 168, 63, .18);
  color: var(--gold);
  margin-right: 10px;
  font-size: 12px;
  font-weight: 900;
}
.archive-blog-card h3 {
  font-size: 22px;
  line-height: 1.18;
  margin: 0 0 10px;
}
.archive-action-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0;
}
.archive-action-button {
  min-height: 58px;
  border: 1px solid rgba(216, 168, 63, .45);
  border-radius: 7px;
  background: rgba(255, 255, 255, .055);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
  font-size: 18px;
}
.archive-action-button.violet { border-color: rgba(169, 141, 255, .36); background: rgba(90, 72, 125, .16); }
.archive-action-button.navy { border-color: rgba(90, 150, 210, .34); background: rgba(30, 70, 112, .22); }
.archive-action-button.green { border-color: rgba(73, 155, 80, .72); background: linear-gradient(135deg, #3d9349, #23612d); }
.archive-action-button.blue { border-color: rgba(43, 154, 243, .82); background: linear-gradient(135deg, #2176bd, #155d9b); }
.archive-action-button:hover,
.archive-button:hover,
.archive-advanced-link:hover {
  filter: brightness(1.12);
}
.archive-bottom-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.mini-archive-link {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  color: var(--text);
  font-weight: 900;
}

/* Modern premium pass for the selected home direction. */
.main {
  padding: 26px 34px 56px;
}
.sidebar {
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .035);
}
.side-brand {
  grid-template-columns: 44px minmax(0, 1fr);
  padding-bottom: 18px;
}
.side-brand img {
  width: 44px;
  height: 44px;
}
.side-brand strong {
  font-family: "Sora", "Inter", sans-serif;
  font-size: 14px;
  letter-spacing: -.01em;
}
.side-block {
  padding: 14px 0;
}
.side-title {
  font-size: 12px;
  letter-spacing: .02em;
}
.side-button,
.mini-button {
  min-height: 34px;
  gap: 0;
  margin: 7px 0;
  border-radius: 7px;
  font-size: 14px;
  line-height: 1.25;
  background: rgba(255, 255, 255, .035);
}
.side-button.active {
  background: linear-gradient(135deg, rgba(216, 168, 63, .18), rgba(216, 168, 63, .04));
}
.side-button.gold,
.side-button.blue,
.side-button.red,
.side-button.sage {
  border-color: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.progress {
  height: 6px;
  background: rgba(255, 255, 255, .08);
}
.progress span {
  background: linear-gradient(90deg, #f5bf47, #e7a11d);
}
.premium-panel {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, .105);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .014)),
    linear-gradient(180deg, rgba(216, 168, 63, .035), transparent 38%),
    #0f0f11;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 22px 70px rgba(0, 0, 0, .22);
}
.premium-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .035), transparent 28%),
    radial-gradient(circle at 18% 0%, rgba(216, 168, 63, .10), transparent 36%);
  opacity: .75;
}
.premium-panel > * {
  position: relative;
  z-index: 1;
}
.archive-hero {
  grid-template-columns: minmax(150px, 235px) minmax(0, 1fr);
  min-height: 258px;
  padding: 28px 38px;
}
.archive-hero-logo img {
  width: clamp(150px, 14vw, 205px);
  height: clamp(150px, 14vw, 205px);
  filter: drop-shadow(0 0 36px rgba(216, 168, 63, .28));
}
.archive-hero-copy h1,
.archive-search-panel h2,
.archive-news-panel h2,
.archive-blog-card h2 {
  font-family: "Sora", "Inter", sans-serif;
  letter-spacing: -.03em;
}
.archive-hero-copy h1 {
  font-size: clamp(38px, 4.15vw, 52px);
}
.archive-hero-copy p {
  color: #f0eee7;
  font-size: 17px;
}
.archive-highlight {
  color: #f0bd42;
}
.archive-home-grid {
  gap: 18px;
}
.archive-search-panel,
.archive-news-panel,
.archive-blog-card {
  padding: 24px;
}
.archive-search-panel h2,
.archive-news-panel h2,
.archive-blog-card h2 {
  font-size: 24px;
}
.archive-search-row input {
  min-height: 50px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 7px rgba(0, 0, 0, .24);
}
.archive-search-row input:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(216, 168, 63, .36);
  border-color: rgba(216, 168, 63, .62);
}
.archive-button {
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
.gold-button {
  background: linear-gradient(135deg, #a87412, #5b3a0a);
}
.archive-category-card {
  min-height: 92px;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 16px 32px rgba(0, 0, 0, .16);
}
.archive-category-card span {
  width: 48px;
  height: 48px;
  font-size: 25px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.archive-category-card strong {
  font-family: "Sora", "Inter", sans-serif;
  font-size: 18px;
  letter-spacing: -.02em;
}
.archive-advanced-link {
  border-radius: 8px;
  background: rgba(216, 168, 63, .045);
}
.archive-news-panel p,
.archive-blog-card p {
  color: #dedbd2;
}
.blog-archive-thumb {
  border-radius: 10px;
  min-height: 160px;
  background:
    linear-gradient(135deg, rgba(216, 168, 63, .22), rgba(0, 0, 0, .45)),
    radial-gradient(circle at 70% 22%, rgba(255, 255, 255, .16), transparent 30%),
    repeating-linear-gradient(-12deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .06) 2px, transparent 2px, transparent 16px),
    #17130f;
}
.blog-archive-thumb::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px;
}
.archive-action-row {
  gap: 12px;
  margin: 24px 0;
}
.archive-action-button {
  min-height: 54px;
  border-radius: 9px;
  font-family: "Sora", "Inter", sans-serif;
  font-size: 16px;
  transition: transform .15s ease, filter .15s ease, border-color .15s ease;
}
.archive-action-button:hover,
.archive-button:hover,
.archive-advanced-link:hover,
.mini-archive-link:hover {
  transform: translateY(-1px);
}
.archive-bottom-row {
  gap: 12px;
}
.mini-archive-link {
  min-height: 52px;
  border-radius: 9px;
  color: #ece8df;
}

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 64px;
  padding: 34px 0 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 26px;
  color: var(--muted);
}
.site-footer h2 { color: var(--text); font-size: 18px; margin-top: 0; }
.site-footer a { color: #4aa8ff; }
.footer-socials { display: flex; gap: 14px; }

.cart-progress-card {
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #15151a, #101013);
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 22px;
}
.cart-progress-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-weight: 900; }
.cart-progress-card p { color: var(--orange); font-weight: 900; margin-bottom: 0; }

.blog-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.blog-tabs button {
  background: #15151a;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 800;
}
.blog-tabs button.active { background: var(--blue); border-color: var(--blue); }
.article-page { max-width: 900px; margin: 0 auto; }
.article-page h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.08; margin: 18px 0; }
.article-page p { font-size: 18px; line-height: 1.75; color: #eee9df; }
.article-lead { font-size: 22px !important; color: var(--text) !important; font-weight: 800; }
.article-cta { margin-top: 34px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: #141419; }

.match-table {
  min-width: 1680px;
  font-size: 13px;
  line-height: 1.18;
}
.match-table th,
.match-table td {
  padding: 5px 7px;
}
.match-table th:nth-child(4),
.match-table td:nth-child(4) {
  min-width: 170px;
}
.match-table th:nth-child(12),
.match-table td:nth-child(12) {
  width: 260px;
  max-width: 260px;
  white-space: normal;
}
.scorers-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}
.table-shell {
  display: grid;
  gap: 6px;
}
.table-scroll-top {
  overflow-x: auto;
  overflow-y: hidden;
  height: 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #111116;
}
.table-scroll-top div {
  height: 1px;
}
.table-action-sticky {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  margin-bottom: 8px;
  background: rgba(10, 10, 11, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(216, 168, 63, .16);
}
.table-action-sticky p {
  margin: 0;
}
.sort-button {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}
.sort-button.active {
  color: var(--gold);
}
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 18px 0 0;
}
.pagination button {
  min-width: 38px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #15151a;
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
}
.pagination button.active {
  border-color: var(--gold);
  color: var(--gold);
}
.pagination button:disabled {
  cursor: not-allowed;
  opacity: .45;
}
.channel-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, .04);
  font-weight: 850;
  white-space: nowrap;
}
.channel-badge img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.summary-box,
.summary-box *,
.cart-progress-card,
.cart-progress-card *,
.cart-list,
.cart-list * {
  text-align: left;
}

.seo-hero {
  border: 1px solid var(--line);
  background: radial-gradient(circle at top left, rgba(184, 119, 0, .18), rgba(17, 17, 19, .98) 46%);
  border-radius: 8px;
  padding: 34px;
  margin-bottom: 24px;
}
.seo-hero h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.08; margin: 12px 0; }
.seo-hero p { max-width: 860px; line-height: 1.7; font-size: 18px; }
.seo-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

@media (max-width: 980px) {
  .home-cta-grid, .pill-grid, .blog-teaser, .site-footer, .home-search-row,
  .archive-hero, .archive-home-grid, .archive-search-row, .archive-blog-layout,
  .archive-action-row, .archive-bottom-row {
    grid-template-columns: 1fr;
  }
  .brand-title img { width: 84px; height: 84px; }
  .streamlit-home .brand-title img { width: 92px; height: 92px; }
  .home-blog-strip {
    align-items: stretch;
    flex-direction: column;
  }
  .archive-hero {
    padding: 26px 18px;
    text-align: center;
  }
  .archive-category-cards {
    grid-template-columns: 1fr;
  }
  .archive-blog-layout {
    align-items: stretch;
  }
}