:root {
  color-scheme: dark;
  --bg: #080b10; --bg-elevated: #0e131b; --surface: #141a24; --surface-2: #1a2230;
  --text: #f6f8fc; --muted: #8f9bad; --border: #293244; --accent: #dfff3f; --accent-ink: #101400;
  --green: #43e28b; --green-bg: rgba(67,226,139,.11); --yellow: #f4d34e; --yellow-bg: rgba(244,211,78,.12);
  --red: #ff6476; --red-bg: rgba(255,100,118,.11); --grey: #a8b2c2; --grey-bg: rgba(168,178,194,.09);
  --shadow: 0 18px 50px rgba(0,0,0,.28);
}
:root[data-theme="light"] {
  color-scheme: light; --bg: #f3f5f8; --bg-elevated: #fff; --surface: #fff; --surface-2: #edf1f6;
  --text: #121722; --muted: #687386; --border: #d8dee8; --accent: #bfe800; --accent-ink: #111500;
  --green-bg: rgba(19,155,89,.09); --yellow-bg: rgba(190,145,0,.10); --red-bg: rgba(219,52,73,.08); --grey-bg: rgba(80,95,117,.08);
  --shadow: 0 16px 42px rgba(30,42,60,.12);
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 50% -20%, #172133 0, var(--bg) 38%); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button { color: inherit; }
.app-shell { width: min(100%, 790px); margin: 0 auto; padding: 15px 14px 104px; }
.topbar, .section-heading, .filter-row, .settings-card, .settings-panel-heading, .tracker-toolbar, .tracker-topline, .tracker-meta, .league-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topbar { margin-bottom: 34px; }
.eyebrow, .section-kicker { margin: 0 0 7px; color: #abc2dc; font-size: .68rem; font-weight: 900; letter-spacing: .16em; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(2rem, 8vw, 2.55rem); letter-spacing: -.055em; }
h2 { margin-bottom: 0; font-size: 1.65rem; letter-spacing: -.04em; }
h3 { margin-bottom: 4px; }
.app-version { display: inline-flex; vertical-align: middle; margin-left: 7px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--accent); font-size: .62rem; font-weight: 900; letter-spacing: .08em; }
.icon-button, .dialog-close { width: 45px; height: 45px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); cursor: pointer; font-size: 1.25rem; }
.view { display: none; }
.view.active { display: block; }
.section-heading { align-items: end; margin-bottom: 18px; }
.secondary-button, .filter-button, .danger-button { min-height: 43px; border: 1px solid var(--border); border-radius: 14px; padding: 0 15px; background: var(--surface); font-weight: 800; cursor: pointer; }
.danger-button { color: var(--red); }
.danger-button:disabled { opacity: .4; cursor: default; }
.date-strip { display: flex; gap: 9px; overflow-x: auto; padding: 1px 1px 10px; margin-bottom: 9px; scrollbar-width: none; }
.date-strip::-webkit-scrollbar { display: none; }
.date-strip button { flex: 0 0 84px; min-height: 68px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); cursor: pointer; }
.date-strip button.active { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.date-strip strong, .date-strip small { display: block; }
.date-strip small { margin-top: 5px; color: inherit; opacity: .75; }
.filter-row { margin-bottom: 12px; }
.search-box { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 47px; padding: 0 14px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); }
.filter-button.active { color: var(--accent); border-color: var(--accent); }
.data-status { display: none; margin: 11px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--muted); }
.data-status.visible { display: flex; align-items: center; gap: 9px; }
.data-status.error { color: var(--red); }
.data-status button { margin-left: auto; border: 0; background: transparent; color: var(--accent); font-weight: 900; cursor: pointer; }
.spinner { width: 17px; height: 17px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.league-group { margin-bottom: 18px; }
.league-heading { padding: 0 5px 8px; color: #a8c1db; font-size: .73rem; font-weight: 900; letter-spacing: .04em; }
.league-heading b { color: inherit; font-size: .69rem; }
.fixture-card { display: grid; grid-template-columns: 66px minmax(0,1fr) 46px; align-items: center; gap: 10px; min-height: 76px; margin-bottom: 9px; padding: 12px; border: 1px solid var(--border); border-radius: 19px; background: var(--surface); }
.match-time { text-align: center; font-size: 1.05rem; font-weight: 950; }
.match-time.live { color: var(--red); font-size: 1.34rem; }
.match-time small, .tracker-clock small { display: block; margin-top: 4px; color: var(--muted); font-size: .59rem; font-weight: 900; letter-spacing: .08em; }
.match-line { display: grid; grid-template-columns: minmax(0,1fr) 62px minmax(0,1fr) auto; align-items: center; gap: 9px; min-width: 0; }
.match-line strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .93rem; }
.home-team { text-align: right; }
.away-team { text-align: left; }
.central-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; min-width: 62px; font-size: 1.18rem; font-weight: 950; white-space: nowrap; }
.central-score i { color: var(--muted); font-style: normal; }
.central-score.scheduled { display: flex; justify-content: center; color: var(--muted); font-size: .95rem; }
.add-button { width: 44px; height: 44px; border: 0; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font-size: 1.25rem; font-weight: 950; cursor: pointer; }
.add-button.selected { border: 1px solid var(--border); background: var(--surface-2); color: var(--green); }
.empty-state { padding: 42px 20px; border: 1px dashed var(--border); border-radius: 19px; text-align: center; color: var(--muted); }
.empty-state strong { display: block; margin-bottom: 6px; color: var(--text); }
.fixture-skeleton span { display: block; height: 76px; margin-bottom: 9px; border-radius: 19px; background: linear-gradient(90deg,var(--surface),var(--surface-2),var(--surface)); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.summary-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 16px; }
.summary-card { padding: 12px 8px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); text-align: center; }
.summary-card strong { display: block; font-size: 1.25rem; }
.summary-card span { color: var(--muted); font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.summary-card.green strong { color: var(--green); } .summary-card.yellow strong { color: var(--yellow); } .summary-card.red strong { color: var(--red); }
.segmented-control { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow-x: auto; }
.segmented-control button { border: 0; border-radius: 10px; padding: 8px 10px; background: transparent; color: var(--muted); font-size: .77rem; font-weight: 800; cursor: pointer; }
.segmented-control button.active { background: var(--surface-2); color: var(--text); }
.tracker-toolbar select { padding: 9px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); }
.day-heading { margin: 20px 5px 8px; color: var(--muted); font-size: .72rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.tracker-card { position: relative; overflow: hidden; margin-bottom: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 19px; }
.tracker-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: currentColor; }
.status-grey { color: var(--grey); background: var(--grey-bg); } .status-green { color: var(--green); background: var(--green-bg); } .status-yellow { color: var(--yellow); background: var(--yellow-bg); } .status-red { color: var(--red); background: var(--red-bg); }
.tracker-topline { display: grid; grid-template-columns: 67px minmax(0,1fr) 30px; }
.tracker-clock { text-align: center; font-size: 1.35rem; font-weight: 950; }
.tracker-match-line { color: var(--text); }
.remove-button { border: 0; background: transparent; color: var(--muted); font-size: 1.25rem; cursor: pointer; }
.tracker-meta { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); }
.condition-edit { border: 0; background: transparent; color: var(--text); font-size: .78rem; font-weight: 850; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.status-copy { font-size: .73rem; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; }
.settings-card, .settings-panel { margin-bottom: 11px; padding: 17px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.settings-card p, .settings-panel p { margin-bottom: 0; color: var(--muted); font-size: .87rem; line-height: 1.45; }
.status-pill { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: .7rem; font-weight: 900; }
.status-pill.muted { background: var(--grey-bg); color: var(--grey); }
.text-button { border: 0; background: transparent; color: var(--accent); font-weight: 850; cursor: pointer; }
.text-button:disabled { opacity: .4; }
.league-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.league-choice { display: flex; align-items: center; gap: 8px; min-height: 45px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 13px; font-size: .78rem; }
.settings-help { margin-top: 12px !important; }
.bottom-nav { position: fixed; left: 50%; bottom: max(10px,env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(calc(100% - 24px),720px); display: grid; grid-template-columns: repeat(4,1fr); z-index: 20; padding: 7px; border: 1px solid var(--border); border-radius: 22px; background: rgba(12,15,21,.9); backdrop-filter: blur(22px); box-shadow: var(--shadow); }
:root[data-theme="light"] .bottom-nav { background: rgba(255,255,255,.92); }
.bottom-nav button { position: relative; min-height: 58px; border: 0; border-radius: 16px; background: transparent; color: var(--muted); cursor: pointer; }
.bottom-nav button.active { background: var(--surface); color: var(--text); }
.bottom-nav span, .bottom-nav small { display: block; }
.bottom-nav small { font-size: .69rem; font-weight: 800; }
.bottom-nav b { position: absolute; top: 3px; right: 25%; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .64rem; }
dialog { width: min(calc(100% - 24px),560px); border: 0; padding: 0; background: transparent; color: var(--text); }
dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(5px); }
.dialog-card { padding: 20px; border: 1px solid var(--border); border-radius: 23px; background: var(--bg-elevated); box-shadow: var(--shadow); }
.dialog-card.compact { max-width: 420px; margin: auto; }
.dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.condition-group { margin-top: 16px; }
.condition-group h4 { margin-bottom: 8px; color: var(--muted); font-size: .73rem; letter-spacing: .09em; text-transform: uppercase; }
.condition-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.condition-row.goal-options { grid-template-columns: repeat(3,1fr); }
.condition-option { min-height: 45px; padding: 8px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); font-weight: 800; cursor: pointer; }
.condition-option.active { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
menu { display: flex; justify-content: flex-end; margin: 18px 0 0; padding: 0; }
@media (max-width: 560px) {
  .app-shell { padding-left: 10px; padding-right: 10px; }
  .fixture-card { grid-template-columns: 56px minmax(0,1fr) 43px; gap: 6px; padding: 11px 8px; }
  .match-line { grid-template-columns: minmax(0,1fr) 52px minmax(0,1fr) auto; gap: 5px; }
  .match-line strong { white-space: normal; font-size: .82rem; line-height: 1.15; }
  .central-score { min-width: 52px; font-size: 1.08rem; }
  .summary-grid { grid-template-columns: repeat(2,1fr); }
  .tracker-toolbar { align-items: stretch; flex-direction: column; }
  .tracker-topline { grid-template-columns: 54px minmax(0,1fr) 25px; gap: 4px; }
  .tracker-clock { font-size: 1.12rem; }
  .league-choice-grid { grid-template-columns: 1fr; }
  .condition-row, .condition-row.goal-options { grid-template-columns: repeat(3,1fr); }
}

/* Regional grouping — V2.1 */
.region-group { margin: 26px 0 34px; }
.region-group:first-child { margin-top: 6px; }
.region-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 15px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-2); }
.region-heading h3 { margin: 0; font-size: 1.05rem; letter-spacing: -.02em; }
.region-heading span { color: var(--muted); font-size: .69rem; font-weight: 900; }
.country-group { margin-bottom: 24px; }
.country-heading { margin: 0 5px 10px; color: var(--text); font-size: .82rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.country-group .league-group { margin-bottom: 17px; }
.country-group .league-heading { padding-left: 7px; }

#favouriteLeagueOptions { display: block; margin-top: 14px; }
.favourite-region { margin-bottom: 10px; overflow: hidden; border: 1px solid var(--border); border-radius: 15px; background: var(--bg-elevated); }
.favourite-region summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 950; }
.favourite-region summary::-webkit-details-marker { display: none; }
.favourite-region summary::after { content: "＋"; margin-left: auto; color: var(--accent); font-size: 1rem; }
.favourite-region[open] summary::after { content: "−"; }
.favourite-region summary b { color: var(--muted); font-size: .69rem; font-weight: 850; }
.favourite-region-content { padding: 0 12px 13px; border-top: 1px solid var(--border); }
.favourite-country { padding-top: 14px; }
.favourite-country h4 { margin: 0 0 8px 2px; color: #a8c1db; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.favourite-country .league-choice-grid { margin-top: 0; }

@media (max-width: 560px) {
  .region-heading { padding: 10px 11px; }
  .region-heading h3 { font-size: .98rem; }
  .country-heading { font-size: .76rem; }
  .favourite-region summary { padding: 11px 12px; }
  .favourite-region-content { padding-left: 9px; padding-right: 9px; }
}


/* Denser fixture presentation — V2.3 */
.mini-segmented { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); }
.mini-segmented button { min-height: 34px; padding: 0 9px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: .74rem; font-weight: 850; cursor: pointer; }
.mini-segmented button.active { background: var(--accent); color: var(--accent-ink); }

:root[data-density="compact"] .region-group { margin: 18px 0 24px; }
:root[data-density="compact"] .region-heading { margin-bottom: 8px; padding: 7px 10px; border-radius: 10px; }
:root[data-density="compact"] .region-heading h3 { font-size: .92rem; }
:root[data-density="compact"] .country-group { margin-bottom: 13px; }
:root[data-density="compact"] .country-heading { margin: 0 4px 5px; font-size: .69rem; }
:root[data-density="compact"] .country-group .league-group { margin-bottom: 9px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
:root[data-density="compact"] .league-heading { min-height: 34px; padding: 7px 10px; background: var(--surface-2); color: #b8cee5; }
:root[data-density="compact"] .fixture-card { grid-template-columns: 54px minmax(0,1fr) 39px; gap: 6px; min-height: 52px; margin: 0; padding: 7px 9px; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
:root[data-density="compact"] .league-heading + .fixture-card { border-top: 0; }
:root[data-density="compact"] .match-time { font-size: .92rem; }
:root[data-density="compact"] .match-time small { margin-top: 1px; font-size: .53rem; }
:root[data-density="compact"] .match-line { grid-template-columns: minmax(0,1fr) 54px minmax(0,1fr) auto; gap: 6px; }
:root[data-density="compact"] .match-line strong { font-size: .86rem; }
:root[data-density="compact"] .central-score { min-width: 54px; font-size: 1.02rem; }
:root[data-density="compact"] .add-button { width: 35px; height: 35px; border-radius: 11px; font-size: 1rem; }

@media (max-width: 560px) {
  .density-setting { align-items: flex-start; flex-direction: column; }
  .mini-segmented { width: 100%; }
  :root[data-density="compact"] .fixture-card { grid-template-columns: 47px minmax(0,1fr) 36px; padding: 7px 7px; }
  :root[data-density="compact"] .match-line { grid-template-columns: minmax(0,1fr) 48px minmax(0,1fr) auto; gap: 4px; }
  :root[data-density="compact"] .match-line strong { white-space: nowrap; font-size: .79rem; }
  :root[data-density="compact"] .central-score { min-width: 48px; font-size: .98rem; }
  :root[data-density="compact"] .add-button { width: 33px; height: 33px; }
}

/* MatchBuddy V2.4 — multi-list controls, cleaner light mode and in-play highlight */
:root { --bg-glow: #172133; --live-border: #f2c94c; }
:root[data-theme="light"] {
  --bg: #f7f5ef;
  --bg-glow: #fffdf8;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #eef1f4;
  --text: #101722;
  --muted: #667181;
  --border: #d7dce3;
  --accent: #cbea18;
  --accent-ink: #121700;
  --shadow: 0 14px 36px rgba(25,35,48,.10);
}
body { background: radial-gradient(circle at 50% -20%, var(--bg-glow) 0, var(--bg) 38%); }
:root[data-theme="light"] .region-heading { background: #1d2938; border-color: #1d2938; color: #fff; }
:root[data-theme="light"] .region-heading span { color: #d9e0e8; }
:root[data-theme="light"] .country-heading { color: #394657; }
:root[data-theme="light"] .league-heading { background: #eef1f4; color: #42536a; }
:root[data-theme="light"] .eyebrow,
:root[data-theme="light"] .section-kicker,
:root[data-theme="light"] .favourite-country h4 { color: #4e6279; }
:root[data-theme="light"] .fixture-card,
:root[data-theme="light"] .league-group,
:root[data-theme="light"] .settings-card,
:root[data-theme="light"] .settings-panel { box-shadow: 0 1px 2px rgba(23,31,42,.04); }

.list-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; gap: 8px; margin: 0 0 14px; }
.list-toolbar select,
.dialog-list-picker select { min-width: 0; min-height: 43px; padding: 0 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); color: var(--text); font-weight: 850; }
.list-toolbar .secondary-button,
.list-toolbar .danger-button { padding: 0 12px; }
.dialog-list-picker { margin-top: 14px; }
.dialog-list-picker label { display: block; margin-bottom: 7px; color: var(--muted); font-size: .73rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.dialog-list-picker > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.tracker-card.in-play { border-color: var(--live-border); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--live-border) 50%, transparent); }

@media (max-width: 620px) {
  .list-toolbar { grid-template-columns: minmax(0,1fr) repeat(3,auto); }
  .list-toolbar .secondary-button,
  .list-toolbar .danger-button { min-height: 39px; padding: 0 9px; font-size: .74rem; }
}
@media (max-width: 430px) {
  .list-toolbar { grid-template-columns: 1fr 1fr 1fr; }
  .list-toolbar select { grid-column: 1 / -1; }
}

/* MatchBuddy V2.6 — decisive lost states, match details and country favourites */
:root { --lost: #ff3f59; --lost-bg: rgba(104,9,25,.34); }
.status-lost { color: var(--lost); background: var(--lost-bg); }
.summary-card.lost strong { color: var(--lost); }
.summary-grid { grid-template-columns: repeat(5,1fr); }
.country-choice { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; margin: 0 0 9px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); color: var(--text); font-weight: 900; cursor: pointer; }
.country-choice small { color: var(--muted); font-size: .68rem; }
.country-choice input { width: 18px; height: 18px; accent-color: var(--accent); }
.fixture-card[role="button"], .tracker-card[role="button"] { cursor: pointer; }
.fixture-card[role="button"]:focus-visible, .tracker-card[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bottom-nav.details-hidden { display: none; }
.details-topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.details-topbar h2 { margin: 1px 0 0; }
.details-scoreboard { position: relative; padding: 20px 16px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); text-align: center; }
.details-scoreboard > p { margin: 0 0 12px; color: var(--muted); font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.details-clock { color: var(--accent); font-size: 1.3rem; font-weight: 950; }
.details-clock small { display: block; margin-top: 2px; color: var(--muted); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.details-scoreline { display: grid; grid-template-columns: minmax(0,1fr) 76px minmax(0,1fr); align-items: center; gap: 8px; margin: 16px 0 10px; }
.details-scoreline strong:first-child { text-align: right; }
.details-scoreline strong:last-child { text-align: left; }
.details-scoreline b { font-size: 1.65rem; }
.details-scoreboard > span { color: var(--muted); font-size: .75rem; }
.details-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 12px 3px 0; color: var(--muted); font-size: .75rem; }
.details-section { margin-top: 20px; }
.details-section h3 { margin: 0 0 10px; font-size: 1rem; }
.details-loading { margin-top: 16px; padding: 28px; border: 1px dashed var(--border); border-radius: 18px; color: var(--muted); text-align: center; }
.event-timeline { margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); list-style: none; }
.event-timeline li { display: grid; grid-template-columns: 46px 38px minmax(0,1fr); align-items: center; gap: 8px; padding: 11px 12px; border-top: 1px solid var(--border); }
.event-timeline li:first-child { border-top: 0; }
.event-timeline time { color: var(--accent); font-weight: 950; text-align: right; }
.event-icon { width: 30px; min-height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-2); font-size: .8rem; font-weight: 900; }
.event-timeline strong { display: block; font-size: .84rem; }
.event-timeline p { margin: 2px 0 0; color: var(--muted); font-size: .72rem; }
.stats-table { overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.stat-row { display: grid; grid-template-columns: 1fr 1.8fr 1fr; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--border); text-align: center; font-size: .78rem; }
.stat-row:first-child { border-top: 0; }
.stat-row span { color: var(--muted); }
.lineups-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.lineup-team { padding: 13px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); }
.lineup-team h4 { margin: 0 0 7px; font-size: .84rem; }
.lineup-team p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.empty-state.compact { padding: 20px; }
@media (max-width: 560px) {
  .summary-grid { grid-template-columns: repeat(2,1fr); }
  .details-scoreline { grid-template-columns: minmax(0,1fr) 62px minmax(0,1fr) auto; }
  .details-scoreline strong { font-size: .86rem; }
  .details-scoreline b { font-size: 1.35rem; }
  .lineups-grid { grid-template-columns: 1fr; }
}


/* MatchBuddy V2.7 — recent goal pulse and persistent red-card signals */
.match-line { position: relative; }
.match-signals { display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; margin-left: 7px; white-space: nowrap; }
.goal-pulse { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); font-size: .92rem; animation: goalPulse 1s ease-in-out infinite; transform-origin: center; }
@keyframes goalPulse { 0%,100% { transform: scale(.88); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 50% { transform: scale(1.12); box-shadow: 0 0 0 6px transparent; } }
.team-red-cards { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.team-red-cards.home { margin-right: 5px; }
.team-red-cards.away { margin-left: 5px; }
.team-red-cards i { display: block; width: 6px; height: 13px; border-radius: 1.5px; background: #f1263e; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 0 5px rgba(241,38,62,.16); }
@media (prefers-reduced-motion: reduce) { .goal-pulse { animation: none; } }
@media (max-width: 460px) { .match-signals { gap: 4px; margin-left: 4px; } .goal-pulse { height: 21px; width: 21px; font-size: .82rem; } .team-red-cards { gap: 2px; } .team-red-cards i { width: 5px; height: 11px; } }


/* V2.8 favourite-league filter notice */
.favourite-filter-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 12px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.86rem;
}
.favourite-filter-notice[hidden] { display: none; }
.favourite-filter-notice button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
@media (max-width: 430px) {
  .favourite-filter-notice { align-items: flex-start; }
}

/* MatchBuddy V2.9 — compact mobile tracker and swipeable list tabs */
#trackerView { padding-top: 0; }
.list-strip-row { margin: -4px 0 6px; }
.list-tabs { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding: 2px 1px 7px; scrollbar-width: none; scroll-snap-type: x proximity; }
.list-tabs::-webkit-scrollbar { display: none; }
.list-tab { flex: 0 0 auto; min-height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--muted); font-size: .76rem; font-weight: 900; white-space: nowrap; cursor: pointer; scroll-snap-align: center; }
.list-tab.active { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.new-list-tab { border-style: dashed; color: var(--accent); }
.tracker-compact-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 31px; margin-bottom: 5px; }
.summary-line { min-width: 0; overflow: hidden; color: var(--muted); font-size: .68rem; font-weight: 850; white-space: nowrap; text-overflow: ellipsis; }
.sum-green { color: var(--green); } .sum-yellow { color: var(--yellow); } .sum-red { color: var(--red); } .sum-lost { color: var(--lost); } .sum-grey { color: var(--grey); }
.list-actions { display: flex; flex: 0 0 auto; gap: 4px; }
.mini-action { min-width: 31px; height: 29px; padding: 0 7px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: .68rem; font-weight: 900; cursor: pointer; }
.mini-action.danger { color: var(--red); }
.mini-action:disabled { opacity: .35; }
#trackerView .tracker-toolbar { margin-bottom: 4px; gap: 6px; }
#trackerView .segmented-control { padding: 2px; border-radius: 10px; }
#trackerView .segmented-control button { padding: 5px 8px; font-size: .69rem; }
#trackerView .tracker-toolbar select { padding: 6px; font-size: .7rem; }
#trackerView .day-heading { margin: 7px 4px 3px; font-size: .61rem; }
#trackerView .tracker-card { margin-bottom: 3px; padding: 7px 8px; border-radius: 12px; }
#trackerView .tracker-card::before { width: 3px; }
#trackerView .tracker-topline { grid-template-columns: 45px minmax(0,1fr) 22px; gap: 3px; }
#trackerView .tracker-clock { font-size: .94rem; }
#trackerView .tracker-clock small { margin-top: 0; font-size: .48rem; }
#trackerView .tracker-match-line { grid-template-columns: minmax(0,1fr) 45px minmax(0,1fr) auto; gap: 3px; }
#trackerView .tracker-match-line strong { font-size: .75rem; }
#trackerView .tracker-match-line .central-score { min-width: 45px; font-size: .9rem; }
#trackerView .tracker-meta { margin-top: 4px; padding-top: 4px; }
#trackerView .condition-edit, #trackerView .status-copy { font-size: .6rem; }
#trackerView .remove-button { font-size: 1rem; }
#trackerView .match-signals { gap: 3px; margin-left: 2px; }
#trackerView .goal-pulse { width: 19px; font-size: .73rem; }
@media (max-width: 480px) {
  .app-shell { padding-top: 9px; }
  .topbar { margin-bottom: 18px; }
  #trackerView .tracker-toolbar { overflow: hidden; }
  #trackerView .segmented-control { min-width: 0; }
  #trackerView .segmented-control button { padding-inline: 6px; }
}
body.tracker-active .topbar { margin-bottom: 8px; }
body.tracker-active .topbar .eyebrow { display: none; }
body.tracker-active .topbar h1 { font-size: 1.18rem; letter-spacing: -.025em; }
body.tracker-active .topbar .icon-button { width: 34px; height: 34px; border-radius: 10px; font-size: .95rem; }
body.tracker-active .app-version { padding: 2px 5px; font-size: .52rem; }
@media (max-width: 480px) {
  body.tracker-active .app-shell { padding-top: 6px; }
}


/* MatchBuddy V2.11 — scroll restoration and aligned tracker conditions */
.tracker-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 10px; align-items: start; margin-bottom: 2px; }
.summary-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.summary-mini { min-height: 35px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.summary-mini strong { font-size: .92rem; line-height: 1; }
.summary-mini span { color: var(--muted); font-size: .54rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.summary-mini.green strong { color: var(--green); }
.summary-mini.yellow strong { color: var(--yellow); }
.summary-mini.red strong { color: var(--red); }
.summary-mini.grey strong { color: var(--grey); }
.tracker-compact-bar.actions-only { justify-content: flex-end; min-height: 29px; margin-top: 1px; }
#trackerView .tracker-meta { display: grid; grid-template-columns: minmax(0,1fr) minmax(118px,max-content) 90px; align-items: center; gap: 7px; }
#trackerView .tracker-league { min-width: 0; overflow: hidden; color: var(--muted); font-size: .57rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
#trackerView .tracker-condition { width: auto; min-width: 118px; max-width: 190px; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
#trackerView .tracker-status { width: 90px; min-width: 0; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.settings-test-actions { display: flex; align-items: center; gap: 8px; }
@media (max-width: 560px) {
  .tracker-head-grid { grid-template-columns: minmax(0, 1fr) 47%; gap: 7px; }
  .summary-mini-grid { gap: 4px; }
  .summary-mini { min-height: 31px; gap: 4px; padding: 4px 6px; border-radius: 9px; }
  .summary-mini strong { font-size: .82rem; }
  .summary-mini span { font-size: .46rem; }
  .list-tabs { padding-bottom: 4px; }
  #trackerView .tracker-league { font-size: .52rem; }
  #trackerView .tracker-meta { grid-template-columns: minmax(0,1fr) minmax(108px,max-content) 82px; gap: 5px; }
  #trackerView .tracker-condition { width:auto; min-width:108px; max-width:165px; }
  #trackerView .tracker-status { width: 82px; }
}
@media (max-width: 380px) {
  .tracker-head-grid { grid-template-columns: minmax(0,1fr) 45%; }
  .summary-mini span { display: none; }
  .summary-mini { justify-content: center; grid-template-columns: auto; text-align: center; }
}


/* MatchBuddy V2.15 — permanent outcomes, six-state summary and goal sounds */
.summary-mini-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.summary-mini.won strong { color: var(--green); }
.summary-mini.lost strong { color: var(--lost); }
.status-won { border-color: var(--green) !important; background: color-mix(in srgb, var(--green) 10%, var(--surface)) !important; }
.status-won .status-copy { color: var(--green); }
#goalSoundsToggle.active { border-color: var(--green); color: var(--green); }
@media (max-width: 560px) {
  .summary-mini-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .summary-mini { min-height: 28px; padding: 3px 5px; }
}


/* MatchBuddy V2.15 — prediction panel and reordered summary */
.prediction-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.prediction-values span { display: grid; gap: 2px; padding: 9px 6px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); text-align: center; color: var(--muted); font-size: .68rem; font-weight: 850; }
.prediction-values b { color: var(--text); font-size: 1rem; }
.prediction-bar { display: flex; height: 10px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.prediction-bar i { display: block; min-width: 0; }
.prediction-home { background: var(--green); }
.prediction-draw { background: var(--yellow); }
.prediction-away { background: var(--red); }
.prediction-note, .prediction-unavailable { margin: 9px 0 0; color: var(--muted); font-size: .72rem; }


/* MatchBuddy V2.15 — overall selected-list status */
.overall-list-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  margin: 3px 0 5px;
  padding: 5px 10px;
  border: 1px solid currentColor;
  border-radius: 10px;
  font-size: .75rem;
  font-weight: 950;
  letter-spacing: .06em;
  text-align: center;
}
.overall-list-status[hidden] { display: none; }
.overall-list-status.correct { color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--surface)); }
.overall-list-status.needed { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 10%, var(--surface)); }
.overall-list-status.lost { color: var(--lost); background: color-mix(in srgb, var(--lost) 10%, var(--surface)); }
@media (max-width: 560px) {
  .overall-list-status { min-height: 25px; margin-block: 2px 4px; padding: 3px 8px; font-size: .66rem; border-radius: 8px; }
}

/* MatchBuddy V2.15 — higher-contrast amber states in light mode */
:root[data-theme="light"] {
  --yellow: #8a5700;
  --yellow-bg: #fff0bf;
}
:root[data-theme="light"] .status-yellow {
  color: #7a4b00;
  background: #fff0bf;
  border-color: #c78500;
}
:root[data-theme="light"] .status-yellow.in-play {
  border-color: #b97800;
  box-shadow: inset 0 0 0 1px rgba(185,120,0,.35);
}
:root[data-theme="light"] .status-yellow .status-copy,
:root[data-theme="light"] .status-yellow .tracker-clock,
:root[data-theme="light"] .status-yellow .condition-edit {
  color: #714500;
}
:root[data-theme="light"] .summary-mini.yellow {
  border-color: #d3a12b;
  background: #fff7df;
}
:root[data-theme="light"] .summary-mini.yellow strong {
  color: #875400;
}
:root[data-theme="light"] .overall-list-status.needed {
  color: #754700;
  border-color: #c78500;
  background: #ffedb0;
  box-shadow: inset 0 0 0 1px rgba(199,133,0,.10);
}
:root[data-theme="light"] .prediction-draw {
  background: #c78500;
}

/* V3.0 paid-plan refresh controls */
.tracker-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  margin-block: 2px 4px;
}
.tracker-status-row .overall-list-status { margin: 0; }
.refresh-countdown {
  min-height: 27px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: .66rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.refresh-countdown:hover { color: var(--text); border-color: var(--accent); }
.refresh-countdown.updating { color: var(--accent); }
.refresh-setting { align-items: center; }
.select-setting { display: grid; gap: 4px; min-width: 190px; }
.select-setting > span { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.select-setting select { width: 100%; }
@media (max-width: 520px) {
  .tracker-status-row { grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
  .refresh-countdown { font-size: .59rem; padding-inline: 7px; }
  .refresh-setting { align-items: stretch; }
  .select-setting { min-width: 0; width: 100%; }
}

/* MatchBuddy V3.1 — compact tracker header and modern settings controls */
.list-strip-row {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
  margin: -4px 0 2px;
}
.list-strip-row .list-tabs { flex: 1 1 auto; min-width: 0; padding-bottom: 3px; }
.list-strip-row .list-actions { flex: 0 0 auto; }
.tracker-update-group {
  display: flex;
  align-items: stretch;
  min-width: 0;
  gap: 6px;
  flex: 1 1 300px;
}
.tracker-update-group .overall-list-status {
  flex: 1 1 auto;
  min-width: 145px;
  margin: 0;
  min-height: 29px;
  padding-block: 5px;
}
#trackerView .tracker-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 4px;
}
#trackerView .tracker-toolbar > #trackerFilters { flex: 0 0 auto; }
#trackerView .tracker-toolbar > #trackerSort { flex: 0 0 auto; }
.settings-jump-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 11px;
}
.refresh-button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 280px;
}
.refresh-button-group button {
  min-height: 38px;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: .74rem;
  font-weight: 850;
  cursor: pointer;
}
.refresh-button-group button small {
  display: block;
  margin-top: 1px;
  color: inherit;
  font-size: .48rem;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.refresh-button-group button:hover { border-color: var(--accent); color: var(--text); }
.refresh-button-group button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.favourite-settings-panel { padding: 0; overflow: hidden; scroll-margin-top: 14px; }
.favourite-settings-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px;
  cursor: pointer;
  list-style: none;
}
.favourite-settings-panel > summary::-webkit-details-marker { display: none; }
.favourite-settings-panel > summary strong { display: block; font-size: 1rem; }
.favourite-settings-panel > summary small { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; }
.summary-chevron { color: var(--accent); font-size: 1.2rem; transition: transform .2s ease; }
.favourite-settings-panel[open] .summary-chevron { transform: rotate(180deg); }
.favourite-settings-content { padding: 0 17px 17px; border-top: 1px solid var(--border); }
.favourite-settings-content .settings-panel-heading { padding-top: 13px; }
.favourite-settings-panel.jump-highlight { animation: settingsJump 1.25s ease; }
@keyframes settingsJump {
  0%,100% { box-shadow: none; }
  30% { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
}
@media (max-width: 760px) {
  #trackerView .tracker-toolbar { flex-wrap: wrap; }
  .tracker-update-group { order: 3; flex-basis: 100%; }
}
@media (max-width: 560px) {
  .tracker-head-grid { grid-template-columns: minmax(0,1fr) 47%; }
  .list-strip-row { align-items: flex-start; flex-wrap: wrap; }
  .list-strip-row .list-tabs { flex-basis: 100%; }
  .list-strip-row .list-actions { margin-top: -1px; }
  .refresh-setting { align-items: stretch; }
  .refresh-button-group { min-width: 0; justify-content: flex-start; }
  .refresh-button-group button { flex: 1 1 76px; }
}
@media (max-width: 430px) {
  .tracker-head-grid { grid-template-columns: minmax(0,1fr) 45%; }
  #trackerView .tracker-toolbar > #trackerFilters { width: auto; }
  .tracker-update-group .overall-list-status { min-width: 0; }
  .refresh-countdown { flex: 0 0 auto; }
}

/* MatchBuddy V3.3 — team-positioned red cards and cleanup choices */
.home-team, .away-team { display: inline-flex; align-items: center; min-width: 0; }
.home-team { justify-content: flex-end; }
.away-team { justify-content: flex-start; }
.cleanup-button-group { justify-content: flex-end; }


/* MatchBuddy V3.5 — clearer version badge, team-side cards and mirrored timeline */
.app-version,
body.tracker-active .app-version {
  margin-left: 8px;
  padding: 4px 8px;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  font-size: .66rem;
  line-height: 1;
  letter-spacing: .04em;
  box-shadow: 0 0 0 1px rgba(255,255,255,.025);
}

.match-line .home-team,
.match-line .away-team {
  overflow: visible;
  white-space: nowrap;
}
.match-line .team-red-cards { position: static; }
.match-line .team-red-cards.home { order: -1; }
.match-line .team-red-cards.away { order: 2; }

.event-timeline li {
  grid-template-columns: minmax(0,1fr) 38px 50px minmax(0,1fr);
  gap: 8px;
  min-height: 56px;
}
.event-timeline li time { grid-column: 3; text-align: center; }
.event-timeline li .event-icon { grid-column: 2; }
.event-timeline li .event-copy { grid-column: 1; text-align: right; min-width: 0; }
.event-timeline li.event-away .event-icon { grid-column: 3; }
.event-timeline li.event-away time { grid-column: 2; }
.event-timeline li.event-away .event-copy { grid-column: 4; text-align: left; }
.event-timeline li.event-neutral .event-icon { grid-column: 2; }
.event-timeline li.event-neutral time { grid-column: 3; }
.event-timeline li.event-neutral .event-copy { grid-column: 4; text-align: left; }
.event-timeline .event-copy p { overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .event-timeline li { grid-template-columns: minmax(0,1fr) 34px 42px minmax(0,1fr); padding-inline: 9px; gap: 6px; }
  .event-icon { width: 28px; min-height: 28px; }
}

/* MatchBuddy V3.6 — denser fixture header and combined country/league labels */
.brand-lockup h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.brand-tagline { margin-left: 3px; color: #abc2dc; font-size: .64rem; font-weight: 900; letter-spacing: .15em; white-space: nowrap; }
#scoresView .section-heading { margin-bottom: 10px; }
#scoresView .section-heading h2 { margin-bottom: 0; }
#scoresView .date-strip { padding-bottom: 7px; margin-bottom: 6px; }
#scoresView .filter-row { margin-bottom: 8px; }
#scoresView .region-group { margin-top: 12px; margin-bottom: 20px; }
#scoresView .region-heading { margin-bottom: 7px; }
#scoresView .league-group { margin-bottom: 8px; }
.league-heading span { display: flex; align-items: baseline; min-width: 0; gap: 5px; }
.league-heading span em { color: var(--text); font-style: normal; font-weight: 950; text-transform: uppercase; letter-spacing: .06em; }
.league-heading span i { color: var(--muted); font-style: normal; }
:root[data-theme="light"] .league-heading span em { color: #27364a; }
:root[data-density="compact"] #scoresView .region-group { margin: 10px 0 18px; }
:root[data-density="compact"] #scoresView .league-group { margin-bottom: 7px; }
:root[data-density="compact"] .league-heading { min-height: 31px; padding-top: 5px; padding-bottom: 5px; }

@media (max-width: 560px) {
  .brand-lockup h1 { gap: 6px; }
  .brand-tagline { flex-basis: auto; font-size: .56rem; letter-spacing: .11em; }
  #scoresView .section-heading { margin-bottom: 7px; }
  .league-heading span { gap: 4px; font-size: .68rem; }
}


/* MatchBuddy V3.7 — complete league catalogue and filters */
.league-catalogue-tools { display: grid; gap: 10px; margin: 12px 0 4px; }
.league-search { display: grid; gap: 6px; }
.league-search span { color: var(--muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.league-search input { width: 100%; min-height: 42px; padding: 0 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); font: inherit; font-size: .9rem; outline: none; }
.league-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.league-category-control { display: flex; flex-wrap: wrap; gap: 6px; }
.league-category-control button { min-height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .75rem; font-weight: 900; cursor: pointer; }
.league-category-control button.active { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.current-leagues-toggle { display: flex; align-items: center; gap: 9px; width: fit-content; color: var(--text); font-size: .82rem; font-weight: 800; }
.current-leagues-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
.league-choice span small { display: inline-block; margin-left: 6px; color: var(--muted); font-size: .65rem; font-weight: 800; }
@media (max-width: 560px) {
  .league-category-control { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .league-category-control button { padding: 0 7px; }
}

/* YorAkka V3.8 — CSV export and searchable time-zone picker */
.export-button { white-space: nowrap; }
.timezone-setting { align-items: center; }
.timezone-picker-button { max-width: 18rem; text-align: right; }
.timezone-dialog-card { width: min(92vw, 34rem); max-height: min(82vh, 44rem); display: flex; flex-direction: column; }
.timezone-search { display: grid; gap: .35rem; margin: .25rem 0 .75rem; }
.timezone-search span { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.timezone-search input { width: 100%; }
.timezone-options { display: grid; gap: .35rem; overflow-y: auto; padding-right: .2rem; }
.timezone-options button { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1px solid var(--line); background: var(--panel-soft); color: var(--text); border-radius: .8rem; padding: .72rem .8rem; text-align: left; }
.timezone-options button small { color: var(--muted); text-align: right; }
.timezone-options button.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
@media (max-width: 600px) {
  .filter-row { grid-template-columns: minmax(0,1fr) auto auto; }
  .timezone-setting { align-items: stretch; }
  .timezone-picker-button { max-width: none; text-align: left; }
  .timezone-options button { align-items: flex-start; flex-direction: column; gap: .15rem; }
  .timezone-options button small { text-align: left; }
}

/* YorAkka V3.11 — phone-first density, wrapped team names and updated brand line */
@media (max-width: 600px) {
  .app-shell { padding: 10px 10px 96px; }
  .topbar { margin-bottom: 14px; gap: 8px; }
  .topbar h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; font-size: 1.7rem; letter-spacing: -.045em; }
  .app-version { margin-left: 0; }
  .brand-tagline { flex-basis: auto; margin-left: 0; font-size: .53rem; letter-spacing: .105em; }
  .icon-button { width: 41px; height: 41px; border-radius: 13px; }

  /* Keep fixture rows compact while allowing long names to use two lines. */
  .fixture-card,
  :root[data-density="compact"] .fixture-card {
    grid-template-columns: 45px minmax(0,1fr) 40px;
    gap: 5px;
    min-height: 68px;
    padding: 7px 6px;
  }
  .match-line { grid-template-columns: minmax(0,1fr) 50px minmax(0,1fr) auto; gap: 5px; }
  .match-line strong {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.05;
    max-height: 2.1em;
    overflow-wrap: normal;
    word-break: normal;
    font-size: .84rem;
  }
  .central-score { min-width: 50px; font-size: 1rem; }
  .add-button { width: 38px; height: 38px; border-radius: 12px; }

  /* Deliberate phone layout for My Matches instead of wrapped desktop rows. */
  #trackerView .tracker-head-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 7px;
    margin-bottom: 7px;
  }
  #trackerView .list-strip-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 7px;
    margin: 0;
  }
  #trackerView .list-strip-row .list-tabs {
    min-width: 0;
    flex-basis: auto;
    padding: 0 0 2px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  #trackerView .list-strip-row .list-actions {
    margin: 0;
    display: flex;
    gap: 5px;
  }
  #trackerView .mini-action { min-width: 35px; min-height: 35px; padding: 0 8px; border-radius: 10px; }
  #trackerView .summary-mini-grid {
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 4px;
  }
  #trackerView .summary-mini { min-height: 34px; padding: 4px 3px; display: grid; justify-items: center; gap: 2px; }
  #trackerView .summary-mini strong { font-size: .78rem; }
  #trackerView .summary-mini span { display: block; font-size: .39rem; line-height: 1; text-align: center; }

  #trackerView .tracker-toolbar {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas:
      "filters sort"
      "update update";
    gap: 7px;
    margin-bottom: 7px;
  }
  #trackerView #trackerFilters { grid-area: filters; min-width: 0; }
  #trackerView #trackerSort { grid-area: sort; width: 76px; min-height: 38px; }
  #trackerView .tracker-update-group {
    grid-area: update;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: stretch;
    gap: 7px;
    flex-basis: auto;
    order: initial;
  }
  #trackerView .tracker-update-group .overall-list-status {
    min-width: 0;
    margin: 0;
    min-height: 36px;
  }
  #trackerView .refresh-countdown { min-height: 36px; white-space: nowrap; padding-inline: 10px; }
  #trackerView .day-heading { margin-top: 10px; }

  #trackerView .tracker-card { padding: 9px 8px; margin-bottom: 7px; border-radius: 15px; }
  #trackerView .tracker-topline { grid-template-columns: 52px minmax(0,1fr) 24px; gap: 4px; }
  #trackerView .tracker-clock { font-size: 1.08rem; }
  #trackerView .tracker-match-line .home-team,
  #trackerView .tracker-match-line .away-team {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.05;
    max-height: 2.1em;
    overflow-wrap: normal;
    word-break: normal;
    font-size: .82rem;
  }
  #trackerView .tracker-match-line { grid-template-columns: minmax(0,1fr) 48px minmax(0,1fr) auto; gap: 4px; }
  #trackerView .tracker-match-line .central-score { min-width: 48px; }
  #trackerView .tracker-meta { margin-top: 7px; padding-top: 6px; }
}

@media (max-width: 390px) {
  #trackerView .summary-mini span { display: none; }
  #trackerView .summary-mini { min-height: 30px; }
  #trackerView .tracker-update-group { grid-template-columns: minmax(0,1fr) auto; }
  .brand-tagline { flex-basis: 100%; }
}


/* YorAkka V3.11 — reliable two-line team-name wrapping on phone fixture rows */
.match-line .team-name { min-width: 0; }

@media (max-width: 600px) {
  .fixture-card .match-line {
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) auto;
    min-width: 0;
    gap: 4px;
  }

  .fixture-card .match-line .home-team,
  .fixture-card .match-line .away-team {
    display: flex;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: normal;
    align-items: center;
  }

  .fixture-card .match-line .home-team { justify-content: flex-end; }
  .fixture-card .match-line .away-team { justify-content: flex-start; }

  .fixture-card .match-line .team-name {
    display: -webkit-box;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.04;
    max-height: 2.08em;
    font-size: .84rem;
  }

  .fixture-card .home-team .team-name { text-align: right; }
  .fixture-card .away-team .team-name { text-align: left; }
  .fixture-card .central-score { min-width: 48px; width: 48px; }
  .fixture-card .add-button { position: relative; z-index: 2; }
}


/* YorAkka V3.11 — fixture-page-only mobile wrapping correction.
   The team containers and inner labels must both be allowed to shrink;
   otherwise an inline-flex team keeps its max-content width and can run
   beneath the protected add-button column. */
@media (max-width: 600px) {
  #fixturesView .fixture-card {
    grid-template-columns: 44px minmax(0, 1fr) 40px;
    column-gap: 5px;
    overflow: hidden;
  }

  #fixturesView .fixture-card .match-line {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr) auto;
    column-gap: 4px;
    overflow: hidden;
  }

  #fixturesView .fixture-card .home-team,
  #fixturesView .fixture-card .away-team {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    flex: 1 1 0;
  }

  #fixturesView .fixture-card .team-name {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex: 1 1 0;
    display: -webkit-box;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: normal;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.05;
    max-height: 2.1em;
  }

  #fixturesView .fixture-card .central-score {
    width: 46px;
    min-width: 46px;
  }

  #fixturesView .fixture-card .add-button {
    width: 38px;
    min-width: 38px;
    justify-self: end;
  }
}

/* YorAkka V3.12 — favourite-league CSV availability */
.export-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: saturate(0.35);
}

/* YorAkka V3.13 — user-selectable ordering */
.ordering-setting { align-items: flex-start; }
.ordering-controls { display: grid; gap: 14px; min-width: min(100%, 620px); }
.ordering-control { display: grid; gap: 7px; }
.ordering-control > span { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.order-button-group { display: flex; flex-wrap: wrap; gap: 7px; }
.order-button-group button { appearance: none; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 8px 11px; font: inherit; font-size: .82rem; font-weight: 750; cursor: pointer; }
.order-button-group button.active { background: var(--accent); border-color: var(--accent); color: #071018; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.reset-ordering { justify-self: start; }
@media (max-width: 700px) {
  .ordering-setting { display: block; }
  .ordering-setting > div:first-child { margin-bottom: 13px; }
  .order-button-group { gap: 6px; }
  .order-button-group button { padding: 8px 10px; font-size: .78rem; }
}

/* V3.14: user-selectable My Matches ordering */
.ordering-hint { display: block; margin-top: 7px; color: var(--muted); font-size: .76rem; }
.tracker-reorder { display: inline-flex; flex-direction: column; gap: 2px; margin-left: 3px; }
.tracker-reorder button { appearance: none; width: 24px; height: 21px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text); font: inherit; font-size: .72rem; line-height: 1; cursor: pointer; }
.tracker-reorder button:active { transform: scale(.95); }
@media (max-width: 680px) {
  .tracker-reorder { flex-direction: row; position: absolute; right: 31px; bottom: 5px; }
  .tracker-reorder button { width: 27px; height: 24px; }
  #trackerView .tracker-card:has(.tracker-reorder) .tracker-meta { padding-right: 62px; }
}

/* V3.15: live-data health and list sharing */
.update-readout { display:flex; align-items:center; gap:7px; min-width:0; }
.update-health { font-size:.64rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:280px; }
.update-health.healthy { color:var(--success, #58d68d); }
.update-health.warning { color:var(--warning, #f4c95d); }
.update-health.working { color:var(--accent); }
.share-dialog-card { width:min(92vw, 440px); }
.share-actions { display:grid; gap:9px; margin-top:12px; }
.share-feedback { min-height:1.2em; color:var(--accent); font-size:.82rem; }
@media (max-width: 640px) {
  .update-readout { width:100%; justify-content:space-between; }
  .update-health { max-width:52vw; font-size:.58rem; }
  #trackerView .list-actions .mini-action { padding-inline:7px; }
}


/* V3.16: alert modes, volume controls and explainable overall status */
.alert-controls { display:grid; gap:10px; width:min(100%, 560px); }
.volume-row { display:grid; gap:6px; }
.volume-row > span { color:var(--muted); font-size:.72rem; font-weight:800; }
.volume-button-group button:disabled { opacity:.42; cursor:not-allowed; }
.overall-list-status[role="button"] { cursor:pointer; user-select:none; }
.overall-list-status[role="button"]::after { content:"  ›"; font-size:1.05em; }
.overall-list-status[role="button"]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.goals-breakdown-card { width:min(92vw, 520px); }
.goals-breakdown-summary { margin:4px 0 12px; color:var(--muted); font-size:.82rem; }
.goals-breakdown-list { display:grid; gap:8px; max-height:min(55vh, 430px); overflow:auto; }
.goals-breakdown-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); }
.goals-breakdown-item > div { display:grid; min-width:0; gap:3px; }
.goals-breakdown-item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; }
.goals-breakdown-item small { color:var(--muted); font-size:.7rem; }
.goals-breakdown-item > span { flex:0 0 auto; font-size:.7rem; font-weight:900; text-align:right; }
.breakdown-green, .breakdown-won { color:var(--green); }
.breakdown-yellow { color:var(--yellow); }
.breakdown-red, .breakdown-lost { color:var(--lost); }
.breakdown-grey { color:var(--muted); }
@media (max-width:560px) {
  .alert-controls { width:100%; }
  .volume-button-group { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .volume-button-group button { padding-inline:4px; font-size:.68rem; }
  .goals-breakdown-item { align-items:flex-start; }
  .goals-breakdown-item strong { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
}


/* V3.17: selectable alert sound packs */
.sound-pack-button-group { align-items: stretch; }
.sound-pack-button-group button { min-width: 5.7rem; }
@media (max-width: 560px) {
  .sound-pack-button-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .sound-pack-button-group button { min-width: 0; }
}


/* V3.18: balanced goal-alert layout */
.alert-setting { align-items:start; }
.alert-intro { display:grid; gap:16px; min-width:0; }
.alert-mode-button-group { width:100%; justify-content:flex-start; }
.alert-controls { align-self:start; }
@media (min-width: 761px) {
  .alert-setting { grid-template-columns:minmax(280px, 1fr) minmax(320px, 1fr); }
  .alert-mode-button-group { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .alert-intro { gap:12px; }
  .alert-mode-button-group { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .alert-mode-button-group button { padding-inline:6px; }
}


/* V3.20: compact Fixtures banner, mobile alert layout, clearer sharing */
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
body.scores-active .topbar { display:none; }
.fixtures-brand-banner { position:relative; width:100%; overflow:hidden; border:1px solid var(--border); border-radius:18px; margin:0 0 12px; background:var(--surface); aspect-ratio:3/1; max-height:210px; }
.fixtures-brand-banner img { display:block; width:100%; height:100%; object-fit:cover; }
.banner-today-button { position:absolute; right:10px; bottom:10px; z-index:1; box-shadow:0 4px 18px rgba(0,0,0,.35); }
@media (max-width:760px) {
  .settings-card.alert-setting { display:block; }
  .alert-setting .alert-intro { display:flex; flex-direction:column; gap:12px; width:100%; }
  .alert-setting .alert-mode-button-group { order:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; gap:6px; }
  .alert-setting .alert-mode-button-group button { min-width:0; width:100%; padding:10px 4px; font-size:.72rem; }
  .alert-setting .alert-intro > div:last-child { order:1; }
  .alert-setting .alert-intro p { max-width:none; margin-bottom:0; }
  .alert-setting .alert-controls { width:100%; margin-top:16px; gap:16px; }
  .alert-setting .sound-pack-button-group { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .alert-setting .volume-button-group { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:7px; }
  .alert-setting .volume-button-group button { min-width:0; width:100%; padding:11px 4px; }
  .alert-setting .volume-button-group button:last-child { grid-column:span 2; }
  .alert-setting .settings-test-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:8px; }
  .alert-setting .settings-test-actions button { width:100%; min-width:0; }
  .fixtures-brand-banner { border-radius:13px; margin-bottom:9px; max-height:124px; }
  .banner-today-button { right:7px; bottom:7px; padding:7px 10px; font-size:.72rem; }
}

/* V3.22: double chance and correct-score selector */
.correct-score-picker {
  display: grid;
  grid-template-columns: minmax(78px, 1fr) auto minmax(78px, 1fr) minmax(100px, 1.15fr);
  align-items: end;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.correct-score-picker.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.correct-score-picker label { display: grid; gap: 5px; color: var(--muted); font-size: .75rem; font-weight: 800; }
.correct-score-picker select { width: 100%; min-height: 45px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-strong, var(--surface)); color: var(--text); padding: 8px; font: inherit; font-weight: 900; }
.correct-score-picker > strong { align-self: center; padding-top: 18px; font-size: 1.4rem; }
.correct-score-use { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.correct-score-shortcuts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.score-shortcut { min-width: 48px; min-height: 38px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-weight: 850; cursor: pointer; }
@media (max-width: 560px) {
  .correct-score-picker { grid-template-columns: 1fr auto 1fr; }
  .correct-score-use { grid-column: 1 / -1; width: 100%; }
  .condition-group h4 { margin-top: 2px; }
}

/* YorAkka V3.22 — scrollable list buttons and touch score wheels */
.dialog-list-picker > label { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.dialog-list-hint { color:var(--muted); font-size:.64rem; font-weight:750; letter-spacing:0; text-transform:none; }
.dialog-list-buttons { display:flex; flex-wrap:nowrap; gap:7px; overflow-x:auto; padding:2px 1px 7px; scrollbar-width:none; scroll-snap-type:x proximity; }
.dialog-list-buttons::-webkit-scrollbar { display:none; }
.dialog-list-button { flex:0 0 auto; min-height:42px; padding:0 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); font:inherit; font-weight:900; white-space:nowrap; cursor:pointer; scroll-snap-align:center; }
.dialog-list-button.active { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent); }
.dialog-list-button.new-list-tab { border-style:dashed; color:var(--accent); }

.correct-score-picker { grid-template-columns:minmax(86px,1fr) auto minmax(86px,1fr) minmax(100px,1.05fr); align-items:center; }
.score-wheel-wrap { display:grid; gap:5px; color:var(--muted); font-size:.75rem; font-weight:800; }
.score-wheel { position:relative; height:126px; overflow-y:auto; overscroll-behavior:contain; scroll-snap-type:y mandatory; padding:42px 0; border:1px solid var(--border); border-radius:13px; background:var(--surface-strong,var(--surface)); scrollbar-width:none; touch-action:pan-y; }
.score-wheel::-webkit-scrollbar { display:none; }
.score-wheel::before, .score-wheel::after { content:""; position:sticky; left:0; right:0; z-index:2; display:block; height:0; pointer-events:none; }
.score-wheel-item { display:flex; align-items:center; justify-content:center; width:100%; height:42px; margin:0; padding:0; border:0; background:transparent; color:var(--muted); font:inherit; font-size:1rem; font-weight:850; opacity:.52; cursor:pointer; scroll-snap-align:center; transition:font-size .12s ease,opacity .12s ease,color .12s ease,background .12s ease; }
.score-wheel-item.selected { color:var(--text); background:color-mix(in srgb,var(--accent) 12%,transparent); font-size:1.5rem; font-weight:950; opacity:1; }
.score-wheel-wrap { position:relative; }
.score-wheel-wrap::after { content:""; position:absolute; left:0; right:0; top:calc(50% + 5px); height:42px; transform:translateY(-50%); border-top:1px solid color-mix(in srgb,var(--accent) 55%,var(--border)); border-bottom:1px solid color-mix(in srgb,var(--accent) 55%,var(--border)); pointer-events:none; }
.correct-score-picker > strong { padding-top:18px; }
@media (max-width:560px) {
  .dialog-list-picker { margin-top:10px; }
  .dialog-list-hint { display:none; }
  .correct-score-picker { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:7px; padding:9px; }
  .score-wheel { height:114px; padding:38px 0; }
  .score-wheel-item { height:38px; }
  .score-wheel-wrap::after { height:38px; }
  .correct-score-use { grid-column:1 / -1; min-height:43px; }
}


/* YorAkka V3.23 — tracker condition width and balanced correct-score shortcuts */
.correct-score-shortcuts { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:7px; }
.score-shortcut { min-width:0; width:100%; padding-inline:5px; }
@media (max-width:560px) {
  .correct-score-shortcuts { grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; }
  .score-shortcut { min-height:36px; padding-inline:3px; font-size:.78rem; }
}
@media (max-width:390px) {
  .correct-score-shortcuts { grid-template-columns:repeat(5,minmax(0,1fr)); }
}

/* YorAkka V3.24 — compact mobile market picker */
.market-picker { display:none; }
@media (max-width:560px) {
  #conditionDialog .dialog-card { padding:16px; }
  .market-picker { display:flex; gap:7px; overflow-x:auto; margin-top:14px; padding:2px 1px 7px; scrollbar-width:none; scroll-snap-type:x proximity; }
  .market-picker::-webkit-scrollbar { display:none; }
  .market-tab { flex:0 0 auto; min-height:40px; padding:0 12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); font:inherit; font-size:.78rem; font-weight:900; white-space:nowrap; cursor:pointer; scroll-snap-align:center; }
  .market-tab.active { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .market-tab.just-track-tab { color:var(--accent); border-style:dashed; }
  .condition-groups > .condition-group[data-market] { display:none; margin-top:10px; }
  .condition-groups > .condition-group[data-market].market-active { display:block; }
  .condition-groups > .condition-group[data-market] h4 { display:none; }
  #conditionDialog menu { margin-top:12px; }
}
@media (max-width:560px) { .desktop-just-track { display:none !important; } }


/* YorAkka V3.26 — make every mobile market, including Correct score, clearly reachable */
.market-picker-hint { display:none; }
@media (max-width:560px) {
  .market-picker {
    width:100%;
    max-width:100%;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    touch-action:pan-x;
    scrollbar-width:thin;
    scrollbar-color:var(--accent) transparent;
  }
  .market-picker::-webkit-scrollbar { display:block; height:3px; }
  .market-picker::-webkit-scrollbar-thumb { background:var(--accent); border-radius:999px; }
  .market-picker::-webkit-scrollbar-track { background:transparent; }
  .market-picker-hint { display:block; margin:-3px 2px 5px; color:var(--muted); font-size:.63rem; font-weight:800; text-align:right; }
  .market-tab[data-market="score"] { border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); }
}

/* YorAkka V3.27 — two-step fixture picker and grouped correct-score choices */
.condition-step-heading { display:flex; align-items:center; gap:10px; margin-top:15px; }
.condition-step-heading > span { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-weight:950; }
.condition-step-heading > div { display:grid; gap:2px; }
.condition-step-heading strong { font-size:.94rem; }
.condition-step-heading small { color:var(--muted); font-size:.72rem; }
.condition-step-heading.compact { margin-top:0; }
.condition-type-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:11px; }
.condition-type-button { min-height:66px; display:grid; align-content:center; gap:3px; padding:10px 12px; text-align:left; border:1px solid var(--border); border-radius:13px; background:var(--surface); color:var(--text); font:inherit; cursor:pointer; }
.condition-type-button strong { font-size:.88rem; font-weight:950; }
.condition-type-button small { color:var(--muted); font-size:.69rem; line-height:1.25; }
.condition-type-button.has-current { border-color:color-mix(in srgb,var(--accent) 75%,var(--border)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent); }
.condition-type-button.just-track-choice { border-style:dashed; }
.condition-choice-head { display:flex; align-items:center; gap:10px; margin-top:14px; }
.condition-back-button { min-height:38px; padding:0 11px; border:1px solid var(--border); border-radius:11px; background:var(--surface); color:var(--text); font:inherit; font-size:.77rem; font-weight:900; cursor:pointer; }
.condition-choice-panel { margin-top:12px; }
.correct-score-shortcuts.grouped { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; align-items:start; }
.score-shortcut-column { min-width:0; padding:8px; border:1px solid var(--border); border-radius:12px; background:color-mix(in srgb,var(--surface) 88%,transparent); }
.score-shortcut-column h5 { margin:0 0 7px; text-align:center; color:var(--muted); font-size:.69rem; letter-spacing:.08em; font-weight:950; }
.score-shortcut-column-buttons { display:grid; grid-template-columns:1fr; gap:6px; }
.score-shortcut-column .score-shortcut { min-height:34px; }
@media (max-width:560px) {
  .condition-type-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .condition-type-button { min-height:61px; padding:8px 10px; }
  .correct-score-shortcuts.grouped { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .score-shortcut-column { padding:6px; }
  .score-shortcut-column .score-shortcut { min-height:34px; padding-inline:2px; font-size:.76rem; }
}
@media (max-width:360px) {
  .condition-type-grid { grid-template-columns:1fr 1fr; }
  .condition-type-button small { font-size:.64rem; }
  .score-shortcut-column { padding:5px; }
}


/* V3.29 historical results export */
.fixture-tools-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:-2px 0 10px; }
.fixture-status-filters { display:flex; align-items:center; gap:6px; min-width:0; flex-wrap:wrap; }
.fixture-status-filters .filter-button { min-height:38px; padding:0 12px; white-space:nowrap; }
.fixture-status-filters .filter-button.active { background:var(--accent); border-color:var(--accent); color:#071018; }
.results-export-button { min-height:38px; padding:0 13px; font-weight:850; white-space:nowrap; }
.results-export-dialog-card { width:min(92vw, 440px); }
.results-export-copy { margin:10px 0 15px; color:var(--muted); line-height:1.45; }
.results-date-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.results-date-grid label { display:grid; gap:6px; color:var(--muted); font-size:.72rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.results-date-grid input { width:100%; min-height:44px; padding:0 10px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); font:inherit; color-scheme:dark; }
body.light .results-date-grid input { color-scheme:light; }
.results-league-count { margin:12px 0; color:var(--muted); font-size:.82rem; font-weight:750; }
.results-download-button { width:100%; min-height:46px; }
.results-download-button:disabled { opacity:.55; cursor:not-allowed; }
.results-export-progress { margin-top:14px; }
.results-export-progress progress { width:100%; height:10px; accent-color:var(--accent); }
.results-export-progress p { margin:7px 0 0; min-height:1.3em; color:var(--muted); font-size:.78rem; line-height:1.35; }
@media (max-width: 560px) {
  .fixture-tools-row { align-items:stretch; flex-direction:column; }
  .fixture-status-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
  .fixture-status-filters .filter-button { min-width:0; padding:0 4px; font-size:.72rem; }
  .results-export-button { width:100%; }
  .results-date-grid { grid-template-columns:1fr; }
}

/* V3.31 team-list export */
.team-list-download-button { width: 100%; margin-top: 9px; }
.team-list-copy { margin-top: 8px; font-size: .76rem; }


/* YorAkka V4 — centred fixture scores */
/* Keep the fixture score on one fixed vertical centre line regardless of team-name length. */
#fixturesView .fixture-card .match-line {
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
  position: relative;
}
#fixturesView .fixture-card .central-score { width: 54px; min-width: 54px; justify-self: center; }
#fixturesView .fixture-card .match-signals { position: absolute; right: 0; }

@media (max-width: 600px) {
  #fixturesView .fixture-card .match-line { grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); }
  #fixturesView .fixture-card .central-score { width: 46px; min-width: 46px; }
}


/* YorAkka V4.04 — dedicated Tools exports */
.tools-card { max-width:680px; padding:18px; border:1px solid var(--border); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); }
.tools-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.tools-card-head h3 { margin:0 0 5px; }
.tools-card-head p { margin:0; color:var(--muted); line-height:1.45; }
.tools-wrench { display:grid; place-items:center; width:46px; min-width:46px; height:46px; border-radius:14px; background:var(--surface-2); font-size:1.45rem; }
.tools-date-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.tools-date-grid label { display:grid; gap:6px; color:var(--muted); font-size:.72rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.tools-date-grid input { width:100%; min-height:46px; padding:0 11px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); font:inherit; color-scheme:dark; }
:root[data-theme="light"] .tools-date-grid input { color-scheme:light; }
.tools-league-count { margin:13px 0; color:var(--muted); font-size:.84rem; font-weight:800; }
.tools-export-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tools-download-button { width:100%; min-height:48px; }
.tools-download-button:disabled { opacity:.55; cursor:not-allowed; }
.tools-export-note { margin:11px 0 0; color:var(--muted); font-size:.78rem; line-height:1.45; }
.tools-export-progress { margin-top:15px; }
.tools-export-progress progress { width:100%; height:10px; accent-color:var(--accent); }
.tools-export-progress p { margin:7px 0 0; min-height:1.3em; color:var(--muted); font-size:.78rem; line-height:1.35; }
@media (max-width:560px) {
  .tools-card { padding:15px; }
  .tools-date-grid, .tools-export-actions { grid-template-columns:1fr; }
  .bottom-nav button { min-width:0; }
  .bottom-nav small { font-size:.64rem; }
}


/* YorAkka V4.06 — stable live-update row and reversible ordering */
#trackerView .tracker-update-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "status countdown"
    "health health";
  align-items: stretch;
  gap: 6px 7px;
}
#trackerView .tracker-update-group .overall-list-status { grid-area: status; }
#trackerView .tracker-update-group .refresh-countdown { grid-area: countdown; }
#trackerView .tracker-update-group .update-readout {
  grid-area: health;
  width: 100%;
  min-height: 18px;
  justify-content: flex-start;
  padding: 0 3px;
}
#trackerView .tracker-update-group .update-health {
  max-width: none;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-choice-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.order-choice-row .order-button-group {
  flex: 1 1 auto;
  min-width: 0;
}
.order-direction-toggle {
  appearance: none;
  flex: 0 0 auto;
  min-width: 48px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: .78rem;
  font-weight: 850;
  cursor: pointer;
}
.order-direction-toggle:hover,
.order-direction-toggle.active {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 640px) {
  #trackerView .tracker-update-group {
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas:
      "status countdown"
      "health health";
  }
  #trackerView .tracker-update-group .update-health { font-size: .6rem; }
  .order-choice-row { align-items: flex-start; }
  .order-direction-toggle { min-width: 46px; }
}


/* YorAkka V4.07 — local export of games currently showing on Fixtures */
.fixture-tools-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fixture-tools-row .fixture-status-filters {
  flex: 1 1 auto;
  min-width: 0;
}
.fixture-csv-button {
  flex: 0 0 auto;
  min-height: 36px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .fixture-tools-row { align-items: flex-start; }
  .fixture-csv-button {
    padding-left: 10px;
    padding-right: 10px;
    font-size: .72rem;
  }
}


/* YorAkka V4.09 — shared-picks import */
.import-picks-card {
  width: min(680px, calc(100vw - 24px));
  max-height: min(82vh, 760px);
  overflow: auto;
}
.import-picks-summary {
  margin: 0 0 12px;
  color: var(--muted);
}
.import-picks-list {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
}
.import-pick-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  cursor: pointer;
}
.import-pick-row input {
  width: 19px;
  height: 19px;
}
.import-pick-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.import-pick-copy strong,
.import-pick-copy small,
.import-pick-copy b {
  overflow: hidden;
  text-overflow: ellipsis;
}
.import-pick-copy small {
  color: var(--muted);
}
.import-pick-copy b {
  color: var(--accent);
  font-size: .82rem;
}
.import-target-label,
.import-new-list-row label {
  display: block;
  margin: 9px 0 5px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 800;
}
.import-target-select,
.import-new-list-row input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
}
.import-actions {
  margin-top: 14px;
}


/* YorAkka V4.10 — attention, pinning, compact My Matches and local archive */
.tracker-filter-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.tracker-filter-row .segmented-control {
  flex: 1 1 auto;
  min-width: 0;
}
.tracker-compact-toggle {
  flex: 0 0 auto;
  min-height: 34px;
}
.tracker-compact-toggle.active {
  border-color: var(--accent);
  color: var(--accent);
}
.tracker-card-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
}
.pin-button,
.archive-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
}
.pin-button {
  width: 28px;
  min-height: 30px;
  padding: 0;
  opacity: .5;
  filter: grayscale(1);
}
.pin-button.active {
  opacity: 1;
  filter: none;
}
.archive-button {
  min-height: 28px;
  padding: 0 5px;
  font-size: .61rem;
  font-weight: 850;
  text-transform: uppercase;
}
.archive-button:hover,
.pin-button:hover {
  color: var(--accent);
}
.tracker-topline {
  grid-template-columns: 67px minmax(0,1fr) auto;
}
.tracker-list.compact-mode .tracker-card {
  margin-bottom: 6px;
  padding: 8px 10px;
  border-radius: 13px;
}
.tracker-list.compact-mode .tracker-topline {
  grid-template-columns: 52px minmax(0,1fr) auto;
  gap: 4px;
}
.tracker-list.compact-mode .tracker-clock {
  font-size: 1rem;
}
.tracker-list.compact-mode .tracker-clock small {
  font-size: .5rem;
}
.tracker-list.compact-mode .tracker-meta {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 5px 8px;
  margin-top: 6px;
  padding-top: 6px;
}
.tracker-list.compact-mode .tracker-league {
  display: none;
}
.tracker-list.compact-mode .tracker-condition,
.tracker-list.compact-mode .tracker-status {
  font-size: .68rem;
}
.tracker-list.compact-mode .day-heading {
  margin: 11px 4px 5px;
}
.archive-dialog-card {
  width: min(720px, calc(100vw - 24px));
  max-height: min(84vh, 780px);
  overflow: auto;
}
.archive-help {
  color: var(--muted);
}
.archive-list {
  display: grid;
  gap: 8px;
}
.archive-row {
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.archive-row-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.archive-row-top span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .7rem;
}
.archive-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 5px;
  color: var(--muted);
  font-size: .7rem;
}
.archive-actions {
  margin-top: 12px;
}
@media (max-width: 640px) {
  .tracker-filter-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
  }
  #trackerFilters {
    overflow-x: auto;
    scrollbar-width: none;
  }
  #trackerFilters::-webkit-scrollbar { display: none; }
  #trackerFilters button { flex: 0 0 auto; }
  .tracker-card-actions { gap: 1px; }
  .archive-button { font-size: .56rem; }
}


/* YorAkka V4.11 — redesigned My Matches compact row */
.tracker-card-compact {
  margin-bottom: 5px;
  padding: 7px 8px 7px 10px;
  border-radius: 12px;
}
.tracker-card-compact::before {
  width: 4px;
}
.compact-main-row {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  gap: 7px;
  align-items: center;
}
.compact-clock {
  color: var(--text);
  text-align: center;
  font-size: .82rem;
  font-weight: 950;
  white-space: nowrap;
}
.compact-match {
  min-width: 0;
}
.compact-teams {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 5px;
  color: var(--text);
  font-size: .82rem;
  line-height: 1.05;
}
.compact-teams > span:first-of-type {
  text-align: right;
}
.compact-teams > span:last-of-type {
  text-align: left;
}
.compact-teams > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact-score {
  min-width: 34px !important;
  overflow: visible !important;
  text-align: center !important;
  font-size: .96rem;
  font-weight: 950;
}
.compact-subrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 3px;
  min-width: 0;
}
.compact-condition {
  padding: 0;
  font-size: .64rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compact-status {
  flex: 0 0 auto;
  font-size: .64rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}
.compact-actions {
  display: flex;
  align-items: center;
  gap: 1px;
}
.compact-actions .pin-button {
  width: 24px;
  min-height: 26px;
  font-size: .78rem;
}
.compact-archive-button {
  width: 22px;
  min-height: 24px;
  padding: 0;
  font-size: .58rem;
}
.compact-remove-button {
  width: 22px;
  min-height: 26px;
  font-size: 1rem;
}
.tracker-card-compact .goal-signal,
.tracker-card-compact .tracker-league,
.tracker-card-compact .tracker-meta {
  display: none !important;
}
@media (max-width: 430px) {
  .compact-main-row {
    grid-template-columns: 42px minmax(0,1fr) auto;
    gap: 5px;
  }
  .compact-clock { font-size: .74rem; }
  .compact-teams { font-size: .76rem; gap: 4px; }
  .compact-score { min-width: 31px !important; font-size: .88rem; }
  .compact-condition,
  .compact-status { font-size: .59rem; }
}


/* YorAkka V4.12 — tighter mobile My Matches header */
@media (max-width: 640px) {
  #trackerView .summary-mini-grid {
    display: none !important;
  }

  #trackerView .tracker-head-grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  #trackerView .tracker-toolbar {
    margin-top: 5px;
    gap: 6px;
  }

  #trackerView .tracker-filter-row {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: 6px;
  }

  #trackerView .tracker-compact-toggle {
    min-height: 34px;
    padding: 0 10px;
    white-space: nowrap;
  }

  #trackerView #trackerFilters {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #trackerView #trackerFilters::-webkit-scrollbar {
    display: none;
  }

  #trackerView #trackerFilters button {
    flex: 0 0 auto;
  }

  #trackerView .tracker-update-group {
    gap: 4px 6px;
  }

  #trackerView .tracker-update-group .update-readout {
    min-height: 14px;
    padding-top: 0;
  }

  #trackerView .day-heading {
    margin-top: 12px;
  }
}


/* YorAkka Community V5.0 preview */
.bottom-nav { grid-template-columns: repeat(5,1fr); }
body.community-active .topbar { margin-bottom: 18px; }
.complete-list-action { border-color: rgba(223,255,63,.55); color: var(--accent); }
.community-masthead { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:14px; }
.community-masthead h2 { margin-bottom:8px; }
.community-masthead p:not(.section-kicker) { max-width:560px; margin:0; color:var(--muted); line-height:1.5; }
.community-preview-banner { display:flex; align-items:center; gap:10px; margin-bottom:12px; padding:10px 12px; border:1px solid rgba(223,255,63,.3); border-radius:13px; background:rgba(223,255,63,.06); color:var(--muted); font-size:.76rem; }
.community-preview-banner strong { color:var(--accent); text-transform:uppercase; letter-spacing:.08em; font-size:.68rem; }
.community-tabs, .stats-period-control { display:flex; gap:5px; padding:5px; margin-bottom:14px; overflow-x:auto; border:1px solid var(--border); border-radius:15px; background:var(--surface); }
.community-tabs button, .stats-period-control button { flex:1 0 auto; border:0; border-radius:10px; padding:9px 12px; background:transparent; color:var(--muted); font-size:.78rem; font-weight:900; cursor:pointer; }
.community-tabs button.active, .stats-period-control button.active { background:var(--surface-2); color:var(--text); box-shadow:inset 0 0 0 1px var(--border); }
.community-panel { display:none; }
.community-panel.active { display:block; }
.community-search { margin-bottom:12px; }
.creator-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:13px; align-items:center; margin-bottom:14px; padding:16px; border:1px solid var(--border); border-radius:20px; background:var(--surface); }
.featured-creator { border-color:rgba(223,255,63,.3); background:linear-gradient(135deg,rgba(223,255,63,.055),var(--surface) 45%); }
.creator-avatar { width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--border); border-radius:15px; background:var(--surface-2); color:var(--accent); font-size:.82rem; font-weight:950; letter-spacing:.04em; }
.creator-avatar.large { width:66px; height:66px; border-radius:20px; font-size:1.05rem; }
.creator-main { min-width:0; }
.creator-name-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.creator-name-row strong { display:block; font-size:1rem; }
.creator-name-row span:not(.verified-chip) { display:block; margin-top:2px; color:var(--muted); font-size:.71rem; }
.verified-chip, .locked-chip, .result-chip, .pro-badge { display:inline-flex; align-items:center; width:max-content; padding:6px 9px; border-radius:999px; font-size:.63rem; font-weight:950; white-space:nowrap; }
.verified-chip { background:var(--green-bg); color:var(--green); }
.locked-chip { background:var(--grey-bg); color:var(--grey); }
.pro-badge { background:rgba(223,255,63,.11); color:var(--accent); }
.creator-stat-row { display:flex; flex-wrap:wrap; gap:7px 14px; margin-top:10px; color:var(--muted); font-size:.69rem; }
.creator-stat-row b { color:var(--text); font-size:.8rem; }
.creator-main > p { margin:9px 0 0; color:var(--muted); font-size:.75rem; line-height:1.45; }
.creator-main > p b { color:var(--text); }
.creator-actions { display:flex; flex-direction:column; gap:7px; }
.follow-button, .primary-community-button { min-height:39px; border:0; border-radius:12px; padding:0 14px; background:var(--accent); color:var(--accent-ink); font-weight:950; cursor:pointer; }
.follow-button.following { border:1px solid var(--border); background:var(--surface-2); color:var(--text); }
.community-section-title { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:22px 3px 10px; }
.community-section-title h3 { margin:0; font-size:1.05rem; }
.community-section-title span { color:var(--muted); font-size:.68rem; font-weight:800; }
.community-list-card { margin-bottom:12px; padding:15px; border:1px solid var(--border); border-radius:20px; background:var(--surface); }
.list-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-bottom:12px; }
.list-card-head h3 { margin:2px 0 4px; }
.list-card-head p { margin:0; color:var(--muted); font-size:.7rem; }
.user-link { border:0; padding:0; background:transparent; color:var(--accent); font-size:.7rem; font-weight:950; cursor:pointer; }
.locked-picks { padding:22px 16px; border:1px dashed var(--border); border-radius:15px; background:var(--bg-elevated); text-align:center; }
.locked-picks .lock-icon { margin-bottom:7px; font-size:1.35rem; }
.locked-picks strong { display:block; }
.locked-picks p { max-width:500px; margin:7px auto 13px; color:var(--muted); font-size:.77rem; line-height:1.45; }
.pro-picks { display:none; }
.pro-preview-unlocked .locked-picks { display:none; }
.pro-preview-unlocked .pro-picks { display:block; }
.community-pick, .history-pick { display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:47px; padding:9px 7px; border-top:1px solid var(--border); }
.community-pick:first-child { border-top:0; }
.community-pick span { color:var(--muted); font-size:.72rem; font-weight:900; }
.community-pick b, .history-pick b { min-width:0; font-size:.78rem; }
.community-pick strong, .history-pick strong { text-align:right; font-size:.74rem; }
.copy-row, .list-card-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.list-card-footer > span { color:var(--muted); font-size:.68rem; }
.result-chip.perfect { background:var(--green-bg); color:var(--green); }
.result-chip.near-perfect { background:var(--yellow-bg); color:var(--yellow); }
.history-pick { grid-template-columns:28px minmax(0,1fr) auto; }
.history-pick > span { width:24px; height:24px; display:grid; place-items:center; border-radius:999px; font-weight:950; }
.history-pick.correct > span { background:var(--green-bg); color:var(--green); }
.history-pick.wrong > span { background:var(--red-bg); color:var(--red); }
.following-summary { display:flex; align-items:center; gap:16px; margin-bottom:12px; padding:14px 16px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.following-summary div { min-width:62px; text-align:center; }
.following-summary strong { display:block; color:var(--accent); font-size:1.35rem; }
.following-summary span { color:var(--muted); font-size:.65rem; font-weight:900; text-transform:uppercase; }
.following-summary p { margin:0; color:var(--muted); font-size:.78rem; }
.community-ranking-head { margin-bottom:10px; }
.community-ranking-head p:not(.section-kicker) { margin:4px 0 0; color:var(--muted); font-size:.78rem; }
.ranking-table { overflow:hidden; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.ranking-row { width:100%; display:grid; grid-template-columns:34px minmax(150px,1.3fr) minmax(95px,.8fr) minmax(90px,.75fr) minmax(70px,.6fr); align-items:center; gap:8px; min-height:56px; padding:8px 12px; border:0; border-top:1px solid var(--border); background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.ranking-header { min-height:40px; border-top:0; background:var(--surface-2); color:var(--muted); font-size:.61rem; font-weight:900; cursor:default; }
.rank-number { color:var(--accent); font-weight:950; }
.ranking-user { display:flex; align-items:center; gap:8px; min-width:0; }
.ranking-user i { width:28px; height:28px; display:grid; place-items:center; flex:0 0 auto; border-radius:9px; background:var(--surface-2); color:var(--accent); font-size:.55rem; font-style:normal; font-weight:950; }
.ranking-user b { overflow:hidden; text-overflow:ellipsis; }
.ranking-row > strong { font-size:.78rem; }
.ranking-row > span:last-child { color:var(--muted); font-size:.74rem; }
.ranking-note { margin:10px 4px 0; color:var(--muted); font-size:.69rem; line-height:1.45; }
.profile-hero { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; padding:16px; border:1px solid var(--border); border-radius:20px; background:var(--surface); }
.profile-identity h3 { margin:0 0 2px; font-size:1.2rem; }
.profile-identity p { margin:0 0 7px; color:var(--muted); font-size:.72rem; }
.profile-social { display:flex; gap:18px; margin:10px 4px 14px; color:var(--muted); font-size:.73rem; }
.profile-social strong { color:var(--text); }
.profile-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.profile-stat { min-width:0; padding:13px 10px; border:1px solid var(--border); border-radius:16px; background:var(--surface); text-align:center; }
.profile-stat.primary { border-color:rgba(223,255,63,.35); background:rgba(223,255,63,.055); }
.profile-stat span, .profile-stat small { display:block; color:var(--muted); font-size:.61rem; font-weight:850; }
.profile-stat strong { display:block; margin:5px 0 4px; font-size:1.25rem; }
.profile-stat.primary strong { color:var(--accent); }
.profile-history-summary { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:7px; padding-top:10px; border-top:1px solid var(--border); text-align:center; }
.profile-history-summary strong { font-size:.82rem; }
.profile-history-summary span { color:var(--muted); font-size:.61rem; }
.preview-tag { display:inline-flex; margin-left:5px; padding:3px 6px; border-radius:999px; background:var(--yellow-bg); color:var(--yellow); font-size:.55rem; vertical-align:middle; }
.community-publish-setting select { max-width:190px; padding:9px 10px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); color:var(--text); font-weight:800; }
.complete-list-explainer { color:var(--muted); font-size:.8rem; line-height:1.5; }
.publish-deadline-preview { display:flex; flex-direction:column; gap:3px; margin:13px 0; padding:12px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.publish-deadline-preview strong { color:var(--accent); }
.publish-deadline-preview span { color:var(--muted); font-size:.72rem; }
.complete-choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.complete-choice { min-height:120px; padding:14px; border:1px solid var(--border); border-radius:16px; background:var(--surface); color:var(--text); text-align:left; cursor:pointer; }
.complete-choice.publish { border-color:rgba(223,255,63,.4); }
.complete-choice:disabled { opacity:.4; cursor:not-allowed; }
.complete-choice > span, .complete-choice > strong, .complete-choice > small { display:block; }
.complete-choice > span { margin-bottom:8px; font-size:1.2rem; }
.complete-choice > small { margin-top:5px; color:var(--muted); line-height:1.35; }

@media (max-width: 700px) {
  .community-masthead { align-items:flex-start; flex-direction:column; }
  .community-signin { align-self:flex-end; margin-top:-48px; }
  .creator-card { grid-template-columns:auto minmax(0,1fr); }
  .creator-actions { grid-column:1 / -1; flex-direction:row; }
  .creator-actions > * { flex:1; }
  .compact-creator .follow-button { grid-column:1 / -1; }
  .profile-stat-grid { grid-template-columns:repeat(2,1fr); }
  .ranking-table { overflow-x:auto; }
  .ranking-row { min-width:610px; }
  .community-publish-setting { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 520px) {
  .bottom-nav { width:min(calc(100% - 12px),720px); padding:5px; border-radius:18px; }
  .bottom-nav button { min-height:54px; padding:0 2px; }
  .bottom-nav small { font-size:.57rem; }
  .community-preview-banner { align-items:flex-start; flex-direction:column; gap:4px; }
  .creator-stat-row { gap:5px 9px; }
  .verified-chip { display:none; }
  .community-pick { grid-template-columns:44px minmax(0,1fr); }
  .community-pick strong { grid-column:2; text-align:left; color:var(--accent); }
  .history-pick { grid-template-columns:28px minmax(0,1fr); }
  .history-pick strong { grid-column:2; text-align:left; color:var(--muted); }
  .list-card-footer, .copy-row { align-items:stretch; flex-direction:column; }
  .list-card-footer .secondary-button, .copy-row .primary-community-button { width:100%; }
  .profile-hero { grid-template-columns:auto minmax(0,1fr); }
  .profile-hero .follow-button { grid-column:1 / -1; }
  .complete-choice-grid { grid-template-columns:1fr; }
}