:root {
  --bg: #090c13;
  --surface-lowest: #06080e;
  --surface-low: #0d111a;
  --surface: #121724;
  --surface-high: #1a2030;
  --surface-highest: #232b3f;
  --text: #e2e8f4;
  --text-muted: #b6c0cf;
  --text-dim: #798394;
  --sky: #98cbff;
  --sky-deep: #3b82f6;
  --gold: #ffc72c;
  --line: rgba(255, 255, 255, .06);
  --ease: cubic-bezier(.2, .75, .25, 1);

  /* 统一玻璃材质与层次 Tokens - 借鉴日历.webp 半透明亚克力深色质感 */
  --glass-topbar: rgba(9, 14, 24, .62);
  --glass-panel: rgba(16, 22, 34, .68);
  --glass-cell: rgba(255, 255, 255, .032);
  --glass-cell-hover: rgba(255, 255, 255, .07);
  --glass-border: rgba(255, 255, 255, .08);
  --glass-border-light: rgba(255, 255, 255, .12);
  --glass-blur-panel: blur(24px) saturate(135%);
  --glass-blur-topbar: blur(20px) saturate(140%);
  --calendar-bg-image: url('assets/bg/bg-pc-champions.png');
  --site-bg-brightness: 0.5;
}
body[data-bg="parade"] {
  --calendar-bg-image: url('assets/bg/bg-pc-champions.png');
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #070b14; }
body { min-height: 100vh; margin: 0; background-color: transparent; color: var(--text); font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei UI', 'Microsoft YaHei', sans-serif; font-feature-settings: 'tnum' 1; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background-image: var(--calendar-bg-image); background-size: cover; background-position: center top; background-repeat: no-repeat; filter: brightness(var(--site-bg-brightness, 0.1)); pointer-events: none; }
button { font: inherit; }
.hidden { display: none !important; }

.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: flex-start; gap: 16px; height: 80px; padding: 0 20px; background: var(--glass-topbar); border-bottom: 1px solid var(--glass-border); backdrop-filter: var(--glass-blur-topbar); -webkit-backdrop-filter: var(--glass-blur-topbar); }
.brand, .month-nav, .month-label { display: flex; align-items: center; }
.brand { gap: 10px; min-width: 260px; }
.brand-mark { display: grid; width: 36px; height: 36px; place-items: center; color: var(--sky); background: linear-gradient(135deg, var(--sky-deep), var(--sky), var(--gold)); border-radius: 11px; box-shadow: 0 0 16px rgba(80, 151, 213, .35); }
.brand-title { font-family: 'Space Grotesk', 'PingFang SC', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -.03em; }
.brand-title strong { color: var(--gold); }
.brand-stars { display: inline-block; margin-left: 6px; color: var(--gold); font-size: 11px; letter-spacing: 2px; vertical-align: 1px; text-shadow: 0 0 10px rgba(255, 199, 44, .5); }
.brand-subtitle, .detail-kicker { margin-top: 2px; color: var(--text-dim); font: 700 10px/1.3 'Space Grotesk', sans-serif; letter-spacing: .08em; }
.month-nav { gap: 6px; padding: 4px; background: var(--surface-low); border: 1px solid rgba(255, 255, 255, .06); border-radius: 12px; }
.month-label { gap: 8px; padding: 0 14px; color: var(--gold); }
.month-label h1 { margin: 0; color: var(--text); font: 700 18px/28px 'Space Grotesk', 'PingFang SC', sans-serif; letter-spacing: -.02em; }
.detail-filter-hint { margin: 0; color: var(--text-dim); font: 600 10px/1.3 'Plus Jakarta Sans', 'PingFang SC', sans-serif; white-space: nowrap; }
.nav-btn { width: 28px; height: 28px; padding: 0 0 3px; color: var(--text-muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; font-size: 24px; line-height: 1; transition: background .18s var(--ease), color .18s var(--ease); }
.nav-btn:hover { color: var(--text); background: var(--surface-high); }

.workspace { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 6px var(--detail-width, 380px); align-items: stretch; gap: 14px; max-width: 1600px; margin: 0 auto; padding: 16px 20px 32px; background-color: transparent; background-image: none; border-radius: 0; border: none; box-shadow: none; }
body[data-bg="parade"] .workspace { background-position: center 46%; }
.workspace-splitter { display: flex; align-items: center; justify-content: center; width: 6px; cursor: col-resize; user-select: none; border-radius: 3px; outline: none; background: transparent; transition: background .15s ease; }
.workspace-splitter:hover, .workspace-splitter.is-dragging { background: rgba(255, 255, 255, .15); }
.workspace-splitter:focus-visible { background: rgba(152, 203, 255, .35); outline: 2px solid var(--sky); }
.splitter-handle { width: 2px; height: 36px; border-radius: 1px; background: rgba(255, 255, 255, .25); transition: background .15s ease, height .15s ease; }
.workspace-splitter:hover .splitter-handle, .workspace-splitter.is-dragging .splitter-handle { background: var(--sky); height: 48px; }
.app-footer { position: fixed; right: auto; bottom: 12px; left: 20px; z-index: 8; font-size: 10px; line-height: 1; }
.app-footer a { color: var(--text-dim); text-decoration: none; opacity: .78; transition: color .18s var(--ease), opacity .18s var(--ease); }
.app-footer a:hover, .app-footer a:focus-visible { color: var(--gold); opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.mobile-feedback-link { display: none; }

/* 日历面板为单层无框包裹，以内层 .cal-grid 的 3.5px 纯白线框为唯一边界 */
.calendar-panel { position: relative; padding: 0; border: none; background: transparent; box-shadow: none; overflow: hidden; }
.detail-panel { border: 3.5px solid #ffffff; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

.cal-grid { display: flex; flex-direction: column; gap: 0; border: 3.5px solid #ffffff; box-shadow: none; }
.weekdays { display: none; }

/* 动态自适应海报周容器与 3.5px 纯白粗相切线框 (Bold 3.5px White Wireframe Grid) */
.cal-week-row { display: flex; flex-direction: column; width: 100%; min-width: 0; gap: 0; }
.cal-week-row + .cal-week-row { border-top: 3.5px solid #ffffff; }

/* 每周顶部纯白星期留白通栏 (Weekday Whiteout Header) */
.cal-week-header { display: flex; width: 100%; min-width: 0; background: #ffffff; border-bottom: 3.5px solid #ffffff; }
.week-header-day { display: flex; align-items: center; justify-content: flex-start; padding: 4px 8px; flex: var(--day-weight, 1) 1 0%; max-width: 250px; min-width: 0; color: #070b14; font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', serif; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; overflow: hidden; white-space: nowrap; }
.week-header-day.is-weekend { color: #e11d48; }
.week-header-day + .week-header-day { border-left: 2px solid #ffffff; }

.cal-week-cells { display: flex; width: 100%; min-width: 0; }
.day-cell { position: relative; display: flex; flex: var(--day-weight, 1) 1 0%; max-width: 250px; min-width: 0; min-height: 140px; padding: 6px 8px 6px; overflow: hidden; flex-direction: column; justify-content: flex-start; gap: 3px; color: #ffffff; text-align: left; background: rgba(10, 61, 82, .18); backdrop-filter: brightness(1.08); -webkit-backdrop-filter: brightness(1.08); border: 0; border-radius: 0; border-right: 3.5px solid #ffffff; transition: opacity .18s var(--ease), background .18s var(--ease), color .18s var(--ease); }
.day-cell:last-child { border-right: none; }
.day-cell.has-matches { cursor: pointer; }
.day-cell.no-matches { background: rgba(4, 17, 29, .32); backdrop-filter: brightness(0.92); -webkit-backdrop-filter: brightness(0.92); }
.day-cell.other-month { opacity: 1; }
.day-cell.other-month .day-head,
.day-cell.other-month .cal-event-bars { opacity: .22; }
.day-cell.has-matches:hover:not(.is-active) { z-index: 1; background: rgba(14, 97, 113, .35); }

/* 重点日与激活选中日纯白纸面实体留白 (Whiteout Negative Space Block) */
.day-cell.is-active { background: #ffffff !important; color: #070b14 !important; box-shadow: 0 0 28px rgba(255, 255, 255, .4) !important; }
.day-cell.is-active .day-num { color: #070b14 !important; text-shadow: none !important; font-weight: 900; }
.day-cell.is-active .cal-event-bar { background: rgba(7, 11, 20, .06); border-color: transparent; }
.day-cell.is-active .cal-event-bar .cal-bar-teams { color: #070b14 !important; text-shadow: none !important; font-weight: 700; }
.day-cell.is-active .cal-event-bar:hover { background: #070b14 !important; }
.day-cell.is-active .cal-event-bar:hover .cal-bar-teams { color: #ffffff !important; }
.day-cell.is-active .cal-more-dots { color: #070b14 !important; text-shadow: none !important; }

/* 历史比赛日：底色保持通透，绝不加黑遮罩，只淡化文字与条目 */
.day-cell.all-matches-past:not(.is-active) { opacity: 1; }
.day-cell.all-matches-past:not(.is-active) .day-num { opacity: .42; }
.day-cell.all-matches-past:not(.is-active) .cal-event-bar { opacity: .45; }
.day-cell.all-matches-past:not(.is-active) .cal-more-dots { opacity: .35; }

.team-filter .day-cell:not(.team-match) { opacity: .16; filter: grayscale(.85); }
.team-filter .day-cell.team-match { background: rgba(37, 99, 235, .25); outline: 1px solid rgba(152, 203, 255, .85); box-shadow: 0 0 20px rgba(80, 151, 213, .45); }
.day-cell.today:not(.is-active) { outline: 2px solid var(--gold); }
.day-cell.today:not(.is-active) .day-num { color: var(--gold); text-shadow: none; }

.day-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; padding: 0 1px; }
.day-head-left { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.day-num { color: #ffffff; font-family: 'Barlow Condensed', 'DIN Condensed', 'Bebas Neue', Impact, sans-serif; font-size: 26px; font-weight: 900; line-height: 1; letter-spacing: -.02em; text-shadow: none; }
.day-head .day-weekday { display: none; }
.favorite-day-star { color: var(--gold); font-size: 13px; line-height: 1; text-shadow: none; }

.cal-event-bars { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin-top: 2px; }
.cal-event-bar { display: flex; align-items: center; height: 22px; padding: 0 5px; border-radius: 4px; background: transparent; border: 1px solid transparent; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease), color .15s var(--ease); }
.cal-event-bar::before { content: ''; display: inline-block; width: 4.5px; height: 4.5px; border-radius: 50%; background-color: var(--bar-color); flex: 0 0 4.5px; margin-right: 5px; transition: transform .15s var(--ease); }
.cal-event-bar:hover { background: #ffffff; border-color: #ffffff; box-shadow: 0 4px 14px rgba(255, 255, 255, .45); transform: translateX(2px); }
.cal-event-bar:hover .cal-bar-teams { color: #070b14; text-shadow: none; font-weight: 800; }
.cal-event-bar:hover::before { transform: scale(1.2); }
.cal-event-bar.has-fav::before { background-color: var(--gold); }
.cal-event-bar.has-fav .cal-bar-teams { color: #ffffff; text-shadow: none; font-weight: 800; }
.cal-event-bar.is-focus { background: rgba(255, 199, 44, .25); border-color: var(--gold); border-radius: 4px; }
.cal-bar-teams { flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffffff; font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', 'SimSun', serif; font-size: 11.5px; font-weight: 700; line-height: 1.25; letter-spacing: .02em; text-shadow: none; }
.cal-more-dots { display: flex; align-items: center; justify-content: center; height: 14px; margin-top: auto; color: #ffffff; font: 900 16px/1 'Space Grotesk', sans-serif; letter-spacing: 3px; opacity: .9; text-shadow: none; cursor: pointer; transition: color .15s var(--ease), opacity .15s var(--ease), transform .15s var(--ease); }
.day-cell:hover .cal-more-dots { color: var(--gold); opacity: 1; transform: scale(1.15); }
.cal-cell-dots { display: none; }
.cell-dot { width: 4.5px; height: 4.5px; border-radius: 50%; background-color: var(--dot-color); flex: none; box-shadow: 0 0 3px var(--dot-color); }
.cell-dot.is-past { opacity: .35; }
.cell-dot.is-focus { box-shadow: 0 0 0 1px #fff, 0 0 5px var(--gold); transform: scale(1.2); }
.cal-cell-empty { min-height: 16px; }
.detail-portraits { display: flex; align-items: center; }

.comp-logo, .match-comp-logo, .club-crest { position: relative; display: inline-flex; overflow: hidden; align-items: center; justify-content: center; flex: none; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.comp-logo { width: 14px; height: 14px; border-radius: 3px; }
.match-comp-logo { width: 30px; height: 30px; }
.match-comp-logo[data-comp="seriea"] { mix-blend-mode: multiply; }
.club-crest { width: 19px; height: 19px; }
.comp-logo img, .match-comp-logo img, .club-crest img { position: absolute; width: 100%; height: 100%; object-fit: contain; }
.comp-logo i, .match-comp-logo i, .club-crest i { color: var(--text-muted); font-size: 9px; font-style: normal; font-weight: 800; }
.club-crest i { max-width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; line-height: 1.1; }
.comp-logo img + i, .match-comp-logo img + i, .club-crest img + i { display: none; }
.team-art > .club-crest.crest-fallback { opacity: .82; }
.comp-logo[data-comp="laliga"] img, .match-comp-logo[data-comp="laliga"] img { width: 182%; height: auto; left: -40%; top: 0; }
.comp-logo[data-comp="seriea"] img, .match-comp-logo[data-comp="seriea"] img { width: 143%; height: auto; left: -22%; top: -5%; }
.comp-logo[data-comp="bundesliga"] img, .match-comp-logo[data-comp="bundesliga"] img { height: auto; top: 8%; clip-path: inset(0 0 17% 0); }
.comp-logo[data-comp="ligue1"] img, .match-comp-logo[data-comp="ligue1"] img { width: 297%; height: auto; left: -101%; top: -11%; }
.comp-logo[data-comp="primeiraliga"] img, .match-comp-logo[data-comp="primeiraliga"] img { width: 137%; height: auto; left: -45%; top: 0; clip-path: inset(0 0 45% 40%); }
.comp-logo[data-comp="ucl"] img, .match-comp-logo[data-comp="ucl"] img { width: 198%; height: auto; left: -48%; top: 0; filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(255, 255, 255, .4)); opacity: .95; }

.portrait { position: relative; display: inline-flex; min-width: 0; align-items: center; justify-content: center; overflow: visible; flex: none; color: var(--text); background: transparent; border: 0; box-shadow: none; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.portrait i { font-style: normal; white-space: nowrap; }
.portrait-photo i { display: none; }
.chip-portrait { width: 30px; height: 36px; margin-left: -8px; }
.chip-portrait img { filter: drop-shadow(0 0 1px rgba(10, 14, 24, .95)) drop-shadow(0 2px 3px rgba(0, 0, 0, .8)); }
.fixture-chip .chip-portrait:first-child { margin-left: 0; }
.chip-portrait.portrait-headshot img { transform: scale(.62); transform-origin: center bottom; -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%); mask-image: linear-gradient(to bottom, #000 68%, transparent 100%); }
.portrait-cutout { overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.portrait-cutout img { top: auto; right: auto; bottom: 0; left: 50%; width: 100%; height: var(--cutout-h, 100%); max-width: 100%; object-fit: contain; object-position: center bottom; transform: translateX(var(--cutout-x, -50%)); transform-origin: center bottom; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.chip-portrait.portrait-cutout img { height: var(--cutout-chip-h, 27px); }
.detail-portraits.single-row .detail-portrait.portrait-cutout img { height: var(--cutout-single-h, 74px); }
.portrait-row .detail-portrait.portrait-cutout img { height: var(--cutout-multi-h, 52px); }
[data-player="correa"] { --cutout-x: -50%; --cutout-chip-h: 25px; --cutout-single-h: 84px; --cutout-multi-h: 54px; }
[data-player="guido"] { --cutout-x: -50%; --cutout-chip-h: 30px; --cutout-single-h: 99px; --cutout-multi-h: 65px; }
[data-player="joselopez"] { --cutout-x: -50%; --cutout-chip-h: 25px; --cutout-single-h: 83px; --cutout-multi-h: 54px; }
[data-player="musso"] { --cutout-x: -50%; --cutout-chip-h: 26px; --cutout-single-h: 88px; --cutout-multi-h: 57px; }
.detail-portraits.single-row .detail-portrait.portrait-headshot { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .22) 0%, rgba(20, 25, 38, .95) 80%); border: 2px solid rgba(255, 255, 255, .35); box-shadow: 0 6px 18px rgba(0, 0, 0, .75), inset 0 1px 2px rgba(255, 255, 255, .4); overflow: hidden; margin-bottom: 24px; }
.detail-portraits.single-row .detail-portrait.portrait-headshot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; transform: scale(1.15); }
.portrait-row.row-1 .detail-portrait.portrait-headshot, .portrait-row.row-2 .detail-portrait.portrait-headshot, .portrait-row .detail-portrait.portrait-headshot { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .22) 0%, rgba(20, 25, 38, .95) 80%); border: 1.5px solid rgba(255, 255, 255, .35); box-shadow: 0 4px 14px rgba(0, 0, 0, .75), inset 0 1px 1px rgba(255, 255, 255, .4); overflow: hidden; margin-bottom: 24px; }
.portrait-row .detail-portrait.portrait-headshot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; transform: scale(1.15); }
.portrait-fallback { width: auto; min-width: 24px; padding: 0 2px; font-size: 9px; line-height: 1.1; }
.chip-portrait.portrait-fallback { height: auto; }

.detail-panel { position: sticky; top: 96px; display: flex; height: auto; min-height: calc(100vh - 112px); max-height: calc(100vh - 112px); padding: 16px; flex-direction: column; overflow: hidden; }
.detail-panel::before { position: absolute; top: -100px; right: -80px; width: 260px; height: 260px; content: ''; background: rgba(80, 151, 213, .12); border-radius: 50%; filter: blur(65px); pointer-events: none; }
.detail-empty { position: relative; display: flex; min-height: 0; padding: 40px; flex: 1 1 auto; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.empty-mark { display: grid; width: 48px; height: 48px; margin-bottom: 16px; place-items: center; color: var(--gold); background: rgba(255, 199, 44, .1); border: 1px solid rgba(255, 199, 44, .25); border-radius: 14px; font-size: 22px; }
.detail-empty h2, .detail-head h2 { margin: 0; font-family: 'Space Grotesk', 'PingFang SC', sans-serif; letter-spacing: -.03em; }
.detail-empty h2 { font-size: 22px; }
.detail-empty p { max-width: 290px; margin: 10px 0 0; color: var(--text-dim); font-size: 13px; line-height: 1.7; }
.detail-content { position: relative; display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; }
.detail-head { position: sticky; top: 0; z-index: 4; display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; background: transparent; border-bottom: none; backdrop-filter: none; -webkit-backdrop-filter: none; flex: 0 0 auto; }
.detail-head-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; }
.calendar-drawer-close { display: none; }
.calendar-drawer-backdrop { display: none; }
body.drawer-locked { overflow: hidden !important; touch-action: none; }
.detail-head-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; }
.detail-kicker-row { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.detail-head-meta:has(#detailFilterNotice:not(.hidden)) .detail-filter-hint { display: none !important; }
.detail-filter-hint { margin: 0; color: var(--text-dim); font: 600 11px/1.3 'Plus Jakarta Sans', 'PingFang SC', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-stat-summary { color: rgba(255, 255, 255, .85); font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .85); flex: 0 0 auto; margin-left: auto; }
.detail-date { margin: 0; font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 800; color: #ffffff; letter-spacing: -.02em; text-shadow: 0 2px 8px rgba(0, 0, 0, .9); }
.match-count { display: none; }
.detail-note { display: none; }
.filter-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; padding: 8px 10px; color: var(--sky); background: rgba(80, 151, 213, .14); border: 1px solid rgba(152, 203, 255, .3); border-radius: 7px; font-size: 12px; flex: 0 0 auto; }
.filter-banner b { color: var(--text); }
.filter-banner button { padding: 0; color: var(--gold); background: transparent; border: 0; cursor: pointer; font-size: 11px; }
.detail-list { display: flex; min-height: 0; max-height: none; flex: 1 1 0%; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; padding-right: 3px; scrollbar-color: rgba(49, 53, 64, .76) transparent; scrollbar-width: thin; }
.detail-list::-webkit-scrollbar { width: 5px; }
.detail-list::-webkit-scrollbar-track { background: transparent; }
.detail-list::-webkit-scrollbar-thumb { background: rgba(49, 53, 64, .76); border: 1px solid rgba(138, 145, 155, .2); border-radius: 6px; }
.detail-list::-webkit-scrollbar-thumb:hover { background: rgba(80, 88, 104, .9); }
.match-card { position: relative; height: 168px; min-height: 168px; flex: 0 0 168px; overflow: hidden; background: radial-gradient(ellipse 115% 85% at 50% 115%, color-mix(in srgb, var(--comp) 36%, transparent) 0%, rgba(10, 16, 28, .62) 75%); border: none !important; border-radius: 0; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .25s var(--ease), opacity .25s var(--ease); }
.match-card:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0, 0, 0, .55), 0 0 30px color-mix(in srgb, var(--comp) 30%, transparent); border: none !important; }
.match-card::before { display: none; }
.match-center { display: flex; position: relative; z-index: 40; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; }
.match-comp-glass { display: flex; align-items: center; justify-content: center; width: auto; height: auto; margin-bottom: 2px; }
.match-comp-glass .comp-logo { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.match-comp-glass .comp-logo img { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .75)) drop-shadow(0 2px 4px rgba(0, 0, 0, .6)) drop-shadow(0 0 1px rgba(255, 255, 255, .28)); transition: transform .2s var(--ease), filter .2s var(--ease); }
.match-card:hover .match-comp-glass .comp-logo img { transform: translateY(-1px) scale(1.06); filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .85)) drop-shadow(0 3px 6px rgba(0, 0, 0, .7)) drop-shadow(0 0 10px var(--comp, rgba(255, 255, 255, .35))); }
.match-comp { color: var(--text-dim); font: 700 10.5px/1.2 'Space Grotesk', 'PingFang SC', sans-serif; letter-spacing: .02em; }
.match-center time { color: var(--gold); font: 800 26px/1 'Barlow Condensed', 'DIN Condensed', Impact, sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.match-body { display: grid; height: 100%; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); align-items: center; gap: 4px; padding: 12px 10px 9px; }
.match-team { position: relative; display: flex; min-width: 0; padding: 0; flex-direction: column; align-items: stretch; gap: 0; color: var(--text); background: transparent; border: 0; cursor: pointer; text-align: center; }
.match-team:hover .detail-portraits { transform: translateY(-3px); }
.match-team.away { text-align: center; }
.team-art { position: relative; z-index: 0; display: flex; height: 124px; align-items: flex-end; justify-content: center; isolation: isolate; }
.team-art > .club-crest { position: absolute; z-index: 1; left: 50%; bottom: 0; transform: translateX(-50%); width: 110px; height: 110px; opacity: .22; pointer-events: none; background: transparent; border: 0; border-radius: 0; box-shadow: none; transition: opacity .2s var(--ease); }
.match-team:hover .team-art > .club-crest { opacity: .38; }
.team-art > .club-crest img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; background: transparent; border: 0; box-shadow: none; }
.team-art > .club-crest[data-team="valencia"] img { transform: scale(1.28); transform-origin: center bottom; }
.team-art > .club-crest.crest-fallback { display: flex; align-items: center; justify-content: center; opacity: .22; }
.team-art > .club-crest.crest-fallback i { font-size: 14px; color: var(--text-dim); }
.detail-portraits { position: relative; z-index: 2; display: flex; width: 100%; height: 100%; align-items: flex-end; justify-content: center; margin-bottom: -16px; transition: transform .18s var(--ease); }
.detail-portraits.single-row { align-items: flex-end; justify-content: center; }
.detail-portraits.multi-row { flex-direction: column; align-items: center; justify-content: flex-end; }
.portrait-row { display: flex; align-items: flex-end; justify-content: center; position: relative; width: 100%; }
.portrait-row.row-1 { z-index: 21; }
.portrait-row.row-2 { z-index: 25; margin-top: -24px; }
.detail-portrait { position: relative; z-index: 2; width: 72px; height: 120px; margin-left: -20px; background: transparent; border: 0; box-shadow: none; }
.detail-portrait:first-child { margin-left: 0; }
.detail-portraits.single-row .detail-portrait:nth-child(2) { z-index: 3; transform: translateY(-4px); }
.detail-portraits.single-row .detail-portrait:nth-child(3) { z-index: 4; }
.portrait-row.row-1 .detail-portrait, .portrait-row.row-2 .detail-portrait { width: 52px; height: 78px; margin-left: -10px; }
.portrait-row.row-1 .detail-portrait:first-child, .portrait-row.row-2 .detail-portrait:first-child { margin-left: 0; }
.detail-portrait.portrait-fallback { width: auto; min-width: 0; height: 78px; margin: 0 4px; padding: 0; display: flex; align-items: flex-end; justify-content: center; background: transparent; border: 0; box-shadow: none; transform: none; }
.detail-portraits.single-row .detail-portrait.portrait-fallback { height: 120px; }
.detail-portrait.portrait-fallback i { display: inline-block; padding: 2px 6px; font-size: 10px; font-weight: 600; line-height: 1.2; color: var(--text-muted); background: rgba(28, 31, 42, .85); border: 1px solid rgba(255, 255, 255, .1); border-radius: 4px; white-space: nowrap; margin-bottom: 22px; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.portrait-row .detail-portrait.portrait-fallback { width: auto; min-width: 44px; height: auto; min-height: 24px; margin: 0 2px 20px; border-radius: 12px; padding: 2px 6px; background: rgba(20, 25, 38, .95); border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 4px 12px rgba(0, 0, 0, .75); display: flex; align-items: center; justify-content: center; overflow: visible; }
.portrait-row .detail-portrait.portrait-fallback i { margin-bottom: 0; padding: 0; background: transparent; border: 0; font-size: 9.5px; font-weight: 700; color: var(--text-muted); text-align: center; line-height: 1.1; white-space: nowrap; }
.team-copy { position: relative; z-index: 30; display: block; min-width: 0; padding: 0 4px; margin-top: -24px; text-shadow: 0 2px 8px rgba(0, 0, 0, .95); }
.match-team.has-multi-row .team-copy, .match-team:has(.multi-row) .team-copy { margin-top: -8px; }
.team-copy b, .team-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 8px rgba(0, 0, 0, .95); transition: color .2s var(--ease), text-shadow .2s var(--ease); }
.team-copy b { font-family: 'Plus Jakarta Sans', 'PingFang SC', 'Microsoft YaHei UI', sans-serif; font-size: 13.5px; font-weight: 800; letter-spacing: .035em; }
.team-copy small { margin-top: 1px; color: var(--text-dim); font-family: 'Barlow Condensed', 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.match-team:hover .team-copy b { color: #ffffff; text-shadow: 0 2px 10px rgba(0, 0, 0, 1), 0 0 12px rgba(255, 255, 255, .28); }
.match-team:hover .team-copy small { color: var(--text-muted); text-shadow: 0 2px 8px rgba(0, 0, 0, 1); }
.versus { color: var(--text-dim); font: 800 10px/1 'Barlow Condensed', 'Space Grotesk', sans-serif; letter-spacing: .08em; opacity: .8; text-align: center; }

button:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
@media (max-width: 1199px) { .workspace { grid-template-columns: 1fr; } .detail-panel { position: relative; top: auto; display: block; height: auto; min-height: 500px; } .detail-content { display: block; } .detail-list { max-height: 620px; flex: none; } }
@media (max-width: 700px) { .topbar { position: relative; height: 64px; gap: 4px; padding: 0 8px; justify-content: space-between; } .brand { min-width: 0; flex: 0 1 auto; gap: 5px; } .brand > div { min-width: 0; flex: 0 1 auto; overflow: hidden; } .brand-mark { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; } .brand-title { min-width: 0; overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; } .brand-stars { font-size: 9px; letter-spacing: 1px; margin-left: 2px; } .brand-subtitle, .topbar-filter-hint { display: none; } .month-nav { position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; gap: 1px; flex: 0 0 auto; } .month-label { gap: 0; padding: 0 2px; } .month-label > span { display: none; } .month-label h1 { font-size: 13px; white-space: nowrap; } .nav-btn { position: relative; width: 28px; height: 28px; font-size: 22px; } .nav-btn::after { content: ''; position: absolute; inset: -7px; } .topbar-right-tools { display: flex; align-items: center; gap: 5px; margin-left: auto; z-index: 3; flex: 0 0 auto; } .mobile-feedback-link { display: inline-flex; align-items: center; justify-content: center; height: 38px; min-height: 38px; padding: 0 10px; color: var(--text-muted); font-size: 11px; font-weight: 700; text-decoration: none; border-radius: 19px; background: rgba(14, 20, 32, .85); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 4px 12px rgba(0, 0, 0, .35); transition: color .18s var(--ease), background .18s var(--ease); } .mobile-feedback-link:hover, .mobile-feedback-link:active { color: var(--gold); background: rgba(255, 255, 255, .1); } .workspace { gap: 10px; padding: 10px; } .calendar-panel, .detail-panel { padding: 8px; } .weekdays, .cal-grid { gap: 3px; } .weekdays { font-size: 9px; } .day-cell { min-height: 60px; padding: 5px 3px; } .day-cell.has-matches:active { transform: scale(.98); } .day-num { font-size: 11px; } .detail-panel { min-height: 420px; } .detail-empty { min-height: 404px; padding: 24px; } .detail-list { max-height: 58vh; } .match-card { height: 160px; min-height: 160px; flex-basis: 160px; } .match-body { grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); padding-right: 6px; padding-left: 6px; } .team-art { height: 106px; } .team-art > .club-crest { width: 92px; height: 92px; } .detail-portraits { margin-bottom: -14px; } .detail-portrait { width: 56px; height: 98px; margin-left: -14px; } .detail-portraits.single-row .detail-portrait.portrait-cutout img { height: calc(var(--cutout-single-h, 74px) * .82); } .portrait-row .detail-portrait.portrait-cutout img { height: calc(var(--cutout-multi-h, 52px) * .85); } .detail-portraits.single-row .detail-portrait.portrait-headshot { width: 56px; height: 56px; margin-bottom: 16px; } .portrait-row .detail-portrait.portrait-headshot { width: 42px; height: 42px; margin-bottom: 8px; } .portrait-row.row-1 .detail-portrait, .portrait-row.row-2 .detail-portrait { width: 44px; height: 66px; margin-left: -8px; } .portrait-row .detail-portrait.portrait-fallback, .portrait-row.row-1 .detail-portrait.portrait-fallback, .portrait-row.row-2 .detail-portrait.portrait-fallback { width: auto; min-width: 36px; height: auto; border-radius: 10px; padding: 2px 4px; margin-bottom: 8px; } .portrait-row .detail-portrait.portrait-fallback i { font-size: 9px; } .portrait-row.row-2 { margin-top: -20px; } .team-copy { margin-top: -20px; } .match-team.has-multi-row .team-copy, .match-team:has(.multi-row) .team-copy { margin-top: -4px; } .match-center time { font-size: 22px; } .app-footer { display: none !important; } }
@media (max-width: 360px) { .topbar { gap: 4px; padding: 0 6px; } .brand-mark { width: 24px; height: 24px; } .brand-title { font-size: 10.5px; } .month-label { padding: 0 1px; } .month-label h1 { font-size: 11px; } .nav-btn { width: 26px; height: 26px; font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }

.detail-head-actions { display: flex; align-items: center; gap: 8px; }
.filter-banner { width: 100%; min-width: 0; }
.filter-banner > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-banner button { min-width: 44px; min-height: 32px; flex: 0 0 auto; }
.day-cell.has-matches { touch-action: manipulation; }

@media (max-width: 700px) {
  html, body { max-width: 100%; }
  .calendar-panel { width: 100%; }
  .filter-banner { margin-bottom: 8px; }
  .filter-banner button { min-height: 36px; }
  .detail-content { display: flex; min-height: 0; flex: 1 1 auto; }
}

.filter-team-identity { display: flex; min-width: 0; align-items: center; gap: 7px; }
.filter-team-identity #filterStatus { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-team-badge { display: inline-flex; width: 22px; height: 22px; flex: 0 0 22px; align-items: center; justify-content: center; }
.filter-team-badge .club-crest { width: 22px; height: 22px; padding: 2px; background: rgba(7, 10, 18, .42); border: 1px solid rgba(152, 203, 255, .32); border-radius: 6px; box-shadow: 0 0 8px rgba(80, 151, 213, .24); }
.filter-team-badge .club-crest i { font-size: 8px; }
.filter-match-preview { display: none; min-width: 0; margin: 0 0 12px; flex-direction: column; gap: 5px; }
.filter-preview-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-muted); font: 700 10px/1.2 'Space Grotesk', 'PingFang SC', sans-serif; }
.filter-preview-heading b { color: var(--gold); font-size: 10px; white-space: nowrap; }
.filter-preview-list { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.filter-preview-empty { margin: 0; padding: 8px 10px; color: var(--text-dim); background: rgba(20, 25, 38, .62); border: 1px solid rgba(255, 255, 255, .08); border-radius: 7px; font-size: 11px; line-height: 1.4; }
.calendar-match-slot { display: none; min-width: 0; margin: 5px 0 auto; }
.calendar-match-slot.is-visible { display: flex; flex-direction: column; gap: 3px; }
.calendar-match-card { position: relative; min-width: 0; overflow: hidden; background: linear-gradient(145deg, color-mix(in srgb, var(--comp) 26%, var(--surface-high)) 0%, rgba(10, 14, 24, .96) 100%); border: 1px solid color-mix(in srgb, var(--comp) 48%, transparent); box-shadow: 0 5px 12px rgba(0, 0, 0, .22); }
.calendar-match-card::before { position: absolute; top: 0; right: 0; left: 0; height: 2px; content: ''; background: var(--comp); }
.calendar-match-meta { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 4px; }
.calendar-match-date { color: var(--sky); font: 800 10px/1 'Space Grotesk', sans-serif; white-space: nowrap; }
.calendar-match-card time { color: var(--gold); font: 800 16px/1 'Barlow Condensed', 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calendar-match-teams { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); align-items: center; gap: 2px; }
.calendar-match-team { display: flex; min-width: 0; align-items: center; justify-content: flex-start; flex-direction: column; gap: 2px; overflow: hidden; text-align: center; }
.calendar-match-team .club-crest { width: 18px; height: 18px; padding: 1px; background: rgba(7, 10, 18, .34); border: 1px solid rgba(255, 255, 255, .16); border-radius: 5px; }
.calendar-match-team b { display: block; width: 100%; min-width: 0; overflow: hidden; color: var(--text-muted); font: 700 8px/1.1 'Plus Jakarta Sans', 'PingFang SC', sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.calendar-match-vs { color: var(--text-dim); font: 700 7px/1 'Space Grotesk', sans-serif; text-align: center; }
.calendar-match-team.is-focus-team .club-crest { border-color: rgba(255, 199, 44, .72); box-shadow: 0 0 8px rgba(255, 199, 44, .38); }
.calendar-match-team.is-focus-team b { color: var(--gold); }
.calendar-match-card-cell { display: none; width: 100%; min-height: 82px; padding: 5px 4px 4px; flex-direction: column; justify-content: center; gap: 3px; border: 0; border-radius: 6px; box-shadow: 0 7px 16px rgba(0, 0, 0, .34), 0 0 10px rgba(80, 151, 213, .12); }
.calendar-match-card-cell.is-visible { display: flex; }
.calendar-match-card-cell .calendar-match-meta { gap: 0; }
.calendar-match-card-cell time { font-size: 18px; line-height: .92; }
.calendar-match-card-cell .calendar-match-teams { grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); gap: 3px; }
.calendar-match-center { display: flex; min-width: 0; align-items: center; justify-content: center; flex-direction: column; gap: 1px; }
.calendar-match-center .comp-logo { width: 15px; height: 15px; }
.calendar-match-center .comp-logo i { font-size: 7px; }
.calendar-match-card-cell .calendar-match-team .club-crest { width: 20px; height: 20px; }
.calendar-match-card-cell .calendar-match-team b { font-size: 8px; line-height: 1.05; }
.calendar-match-card-cell .calendar-match-center .calendar-match-vs { font-size: 6.5px; }
.filter-match-card { display: flex; width: 100%; height: 84px; min-height: 84px; padding: 6px 5px 5px; flex-direction: column; justify-content: space-between; gap: 4px; border: none; border-radius: 8px; }
.filter-match-card .calendar-match-meta { position: relative; min-height: 17px; justify-content: center; gap: 4px; }
.filter-match-card .calendar-match-date { position: absolute; left: 0; }
.filter-match-card time { font-size: 17px; }
.filter-match-card .calendar-match-teams { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); }
.filter-match-card .calendar-match-team { gap: 3px; }
.filter-match-card .calendar-match-team .club-crest { width: 28px; height: 28px; padding: 2px; }
.filter-match-card .calendar-match-team b { font-size: 11px; font-weight: 800; }
.filter-match-card .calendar-match-center .comp-logo { width: 15px; height: 15px; }
.filter-match-card .calendar-match-vs { font-size: 7.5px; }
.team-filter .day-cell.team-match .chips { display: none; }
.team-filter .day-cell.team-match .day-head::after { display: none; }

@media (min-width: 1200px) {
  .calendar-match-card-cell { min-height: 84px; padding: 6px 5px 5px; box-shadow: 0 8px 18px rgba(0, 0, 0, .38), 0 0 12px rgba(80, 151, 213, .14); }
  .calendar-match-card-cell time { font-size: 20px; }
  .calendar-match-card-cell .calendar-match-teams { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); }
  .calendar-match-center .comp-logo { width: 17px; height: 17px; }
  .calendar-match-card-cell .calendar-match-team .club-crest { width: 21px; height: 21px; }
  .calendar-match-card-cell .calendar-match-team b { font-size: 8.5px; }
}

@media (max-width: 700px) {
  .filter-team-badge, .filter-team-badge .club-crest { width: 20px; height: 20px; flex-basis: 20px; }
  .filter-match-preview { display: flex; }
  .calendar-match-slot { display: none !important; }
  .filter-preview-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .filter-match-card { height: auto; min-height: 86px; padding: 8px 6px 7px; border: none !important; border-radius: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); background: linear-gradient(145deg, color-mix(in srgb, var(--comp) 28%, rgba(20, 27, 45, .88)) 0%, rgba(10, 14, 24, .94) 100%); }
  .filter-match-card::before { display: none !important; }
}

@media (max-width: 360px) {
  .filter-preview-list { grid-template-columns: 1fr; gap: 7px; }
  .filter-match-card { height: auto; min-height: 82px; padding: 7px 6px 6px; border-radius: 12px; }
  .filter-match-card time { font-size: 16px; }
  .filter-match-card .calendar-match-team .club-crest { width: 26px; height: 26px; }
  .filter-match-card .calendar-match-team b { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .fixture-chip { transition: none; }
}

.mobile-schedule-controls { display: none; }
.detail-filter-notice { display: inline-flex; min-width: 0; align-items: center; gap: 6px; color: var(--sky); font-size: 10px; white-space: nowrap; }
.detail-filter-notice b { color: var(--text); }
.detail-filter-notice button { min-width: 44px; min-height: 36px; padding: 0 8px; color: var(--gold); background: rgba(255, 199, 44, .08); border: 1px solid rgba(255, 199, 44, .2); border-radius: 6px; cursor: pointer; font-size: 10px; }
.match-card.is-focus-fixture { border: none !important; background: radial-gradient(ellipse 120% 95% at 50% 120%, color-mix(in srgb, var(--comp) 65%, var(--gold) 35%) 0%, rgba(20, 26, 44, .92) 80%) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 35px color-mix(in srgb, var(--gold) 28%, transparent), inset 0 0 40px rgba(255, 199, 44, .1) !important; }
.match-card.is-muted-fixture { opacity: .28; filter: grayscale(.8); transform: scale(.985); }
.calendar-match-card.is-past { opacity: .55; filter: grayscale(.55); }
.team-filter .day-cell.all-matches-past:not(.team-match):not(.is-active) { opacity: .2; }
.team-filter .day-cell.team-match.all-matches-past:not(.is-active) { border-color: rgba(152, 203, 255, .4); }
.day-cell.today:not(.is-active) { outline: 2px solid var(--gold); }
.day-cell.today .day-num { color: var(--gold); text-shadow: none; }
.team-filter .day-cell.team-match.today:not(.is-active) { border-color: rgba(152, 203, 255, .72); }
.match-team.is-filtered-team .team-copy b { color: var(--gold) !important; font-size: 14.5px; text-shadow: 0 0 12px rgba(255, 199, 44, .65); }
.match-team.is-filtered-team .team-art { filter: drop-shadow(0 0 14px rgba(255, 199, 44, .75)) drop-shadow(0 4px 10px rgba(0, 0, 0, .9)) !important; transform: scale(1.12); transition: transform .22s var(--ease), filter .22s var(--ease); }
.match-team.is-filtered-team::after { content: '★ 聚焦中'; position: absolute; top: 10px; right: 12px; z-index: 5; padding: 2px 7px; color: #000; background: linear-gradient(135deg, #ffd700, #ffae00); border-radius: 6px; font: 900 10px/1 'Space Grotesk', 'PingFang SC', sans-serif; letter-spacing: .02em; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); pointer-events: none; }

@media (max-width: 700px) {
  html { scroll-padding-top: 148px; }
  body::before { background-image: url('assets/bg/bg-mobile-original.jpg') !important; filter: brightness(0.8) !important; }
  .workspace { display: flex; flex-direction: column; gap: 10px; padding: 10px; min-height: calc(100vh - 64px); background-color: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; }
  .workspace-splitter { display: none !important; }
  .layout-switch-bar { display: none !important; }
  .calendar-head-tools { display: none !important; }
  .calendar-panel { border: none !important; border-radius: 0 !important; padding: 0 !important; overflow: visible; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .weekdays { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 4px; padding: 0 4px 6px; background: transparent !important; border-bottom: none !important; }
  .cal-grid { display: flex !important; flex-direction: column !important; gap: 5px !important; border: none !important; box-shadow: none !important; padding: 0 !important; background: transparent !important; }
  .cal-week-header { display: none !important; }
  .cal-week-row { display: flex !important; flex-direction: column !important; gap: 0; }
  .cal-week-row + .cal-week-row { border-top: none !important; }
  .cal-week-cells { display: flex !important; width: 100%; gap: 5px !important; }
  .cal-week-cells .day-cell { flex: 1 1 0% !important; max-width: none !important; min-height: 60px; height: 60px; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative; border: 1px solid transparent !important; border-radius: 12px !important; margin: 0 !important; background: rgba(255, 255, 255, .03); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); }
  .cal-week-cells .day-cell:last-child { border-right: 1px solid transparent !important; }
  .day-cell .day-head { position: absolute !important; inset: 0 !important; display: flex !important; width: 100% !important; height: 100% !important; justify-content: center !important; align-items: center !important; margin: 0 !important; pointer-events: none !important; }
  .day-cell .day-head-left { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; height: 100% !important; }
  .day-cell .day-num { font-size: 28px !important; font-weight: 900 !important; line-height: 1 !important; text-align: center !important; display: block !important; font-family: 'Barlow Condensed', 'DIN Condensed', Impact, sans-serif !important; }
  .day-cell .favorite-day-star { position: absolute; top: 3px; right: 4px; font-size: 9px; line-height: 1; }
  .day-cell.today .day-num { background: transparent !important; color: var(--gold) !important; }
  .day-cell.today:not(.is-active) { border-color: rgba(255, 199, 44, .45) !important; background: rgba(255, 199, 44, .08) !important; }
  .day-cell.is-active { background: #253858 !important; border: 1px solid rgba(152, 203, 255, .6) !important; outline: none !important; border-radius: 12px !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .4), 0 0 12px rgba(37, 99, 235, .35) !important; }
  .day-cell.is-active .day-num { color: #ffffff !important; }
  /* 暗淡掉所有已过去的日期格子（包括无比赛日） */
  .day-cell.is-past-date:not(.is-active) { opacity: .35 !important; filter: grayscale(.65); }
  .day-cell.other-month:not(.is-active) { opacity: .18 !important; }
  .day-cell.is-past-date.other-month:not(.is-active) { opacity: .12 !important; }
  .day-weekday { display: none !important; }
  .mobile-schedule-controls { position: static; z-index: auto; display: flex; min-width: 0; margin-bottom: 0; padding: 8px; flex-direction: column; gap: 7px; background: rgba(14, 20, 32, .78); border: 1px solid rgba(255, 255, 255, .08); border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(20px) saturate(135%); -webkit-backdrop-filter: blur(20px) saturate(135%); }
  .mobile-view-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 3px; background: rgba(255, 255, 255, .03); border-radius: 12px; border: 1px solid rgba(255, 255, 255, .05); }
  .mobile-view-switch button { min-width: 0; min-height: 40px; color: var(--text-muted); background: transparent; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 800; transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease); }
  .mobile-view-switch button[aria-pressed="true"] { color: var(--gold); background: rgba(255, 199, 44, .12); border-color: rgba(255, 199, 44, .28); }
  .mobile-view-switch button:focus-visible, .mobile-day-button:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
  .mobile-week-nav { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px; }
  .mobile-week-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: var(--text-muted); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; font-size: 20px; line-height: 1; cursor: pointer; transition: color .18s var(--ease), background .18s var(--ease); }
  .mobile-week-btn:active { background: rgba(37, 99, 235, .25); color: #ffffff; }
  .mobile-week-range { font-family: 'Space Grotesk', 'PingFang SC', sans-serif; font-size: 13.5px; font-weight: 800; color: #ffffff; letter-spacing: -.01em; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }

  /* 严格对标参考图：暗色亚克力胶囊周日期轨道 (Capsule Date Rail) */
  .mobile-day-rail { display: grid; min-width: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding: 4px 6px; background: rgba(14, 20, 32, .85); border: 1px solid rgba(255, 255, 255, .16); border-radius: 30px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .mobile-day-button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 64px; padding: 6px 1px 5px; margin: 0 1.5px; color: var(--text-muted); background: transparent; border: 1px solid transparent; border-radius: 22px; cursor: pointer; line-height: 1; transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); }
  .mobile-day-button:active { transform: scale(.96); background: rgba(255, 255, 255, .05); }
  .rail-weekday { color: rgba(255, 255, 255, .82); font-family: 'Space Grotesk', 'PingFang SC', sans-serif; font-size: 10px; font-weight: 700; white-space: nowrap; margin-bottom: 2px; }
  .mobile-day-button.is-weekend .rail-weekday { color: #ff5b5b; }
  .mobile-day-button.is-weekend:not(.is-selected) .rail-day { color: #ffffff; }
  .rail-day { position: relative; max-width: 100%; overflow: hidden; color: #ffffff; font-family: 'Barlow Condensed', 'DIN Condensed', Impact, sans-serif; font-size: 20px; font-weight: 900; text-overflow: clip; white-space: nowrap; line-height: 1; }

  /* 选中态：更圆润、更收窄的Squircle跑道胶囊 */
  /* 当天（未选中）：反色实体浅金底色 + 阴影（对标参考图反色卡片） */
  .mobile-day-button.is-today:not(.is-selected) { color: #0d131f !important; background: #ffd15c !important; border: 1.5px solid #ffe394 !important; border-radius: 20px; box-shadow: 0 4px 16px rgba(255, 199, 44, .45), 0 2px 6px rgba(0, 0, 0, .35) !important; }
  .mobile-day-button.is-today:not(.is-selected) .rail-weekday { color: #1a2233 !important; font-weight: 900; }
  .mobile-day-button.is-today:not(.is-selected) .rail-day { color: #0d131f !important; font-weight: 900; }
  .mobile-day-button.is-today:not(.is-selected) .rail-dot { box-shadow: 0 0 0 1px #0d131f; }

  /* 选中日期（非当天）：单纯框线（纯净轮廓线框，背景微透，无多余内阴影） */
  .mobile-day-button.is-selected:not(.is-today) { color: #ffffff !important; background: rgba(255, 255, 255, .05) !important; border: 1.5px solid rgba(152, 203, 255, .85) !important; border-radius: 22px; box-shadow: 0 0 12px rgba(80, 151, 213, .35) !important; }
  .mobile-day-button.is-selected:not(.is-today) .rail-weekday { color: #ffffff !important; font-weight: 800; }
  .mobile-day-button.is-selected:not(.is-today) .rail-day { color: #ffffff !important; font-weight: 900; }

  /* 选中日期（且为当天）：保留反色金底，叠加加粗框线与光晕 */
  .mobile-day-button.is-selected.is-today { color: #0d131f !important; background: #ffd15c !important; border: 2px solid #ffffff !important; border-radius: 20px; box-shadow: 0 4px 18px rgba(255, 199, 44, .6), 0 0 12px rgba(255, 255, 255, .5) !important; }
  .mobile-day-button.is-selected.is-today .rail-weekday { color: #1a2233 !important; font-weight: 900; }
  .mobile-day-button.is-selected.is-today .rail-day { color: #0d131f !important; font-weight: 900; }
  .mobile-day-button.is-selected.is-today .rail-dot { box-shadow: 0 0 0 1px #0d131f; }
  .mobile-day-button.has-filtered-fixture { border-bottom-color: transparent !important; border-bottom-width: 0 !important; }
  .mobile-day-button.has-favorite-fixture { border-top-color: transparent !important; }

  /* 比赛彩点：单日最多 4 点一排，超过 4 点自动居中换至第 2 排 */
  .rail-dots { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 2.5px; width: 25px; max-width: 25px; min-height: 10px; margin-top: 3px; }
  .rail-dot { width: 4px; height: 4px; border-radius: 50%; background-color: var(--dot-color); flex: none; box-shadow: none; }
  .rail-dot.is-past { opacity: .35; }
  .rail-dot.is-focus { transform: scale(1.2); outline: 1px solid #ffffff; }
  .mobile-day-button.is-selected .rail-dot { box-shadow: none; }
  body.mobile-calendar-view .mobile-day-rail, body.mobile-calendar-view .mobile-week-nav { display: none; }
  body.mobile-calendar-view .cal-event-bars { display: none !important; }
  body.mobile-calendar-view .cal-cell-dots { position: absolute !important; bottom: 5px !important; left: 50% !important; transform: translateX(-50%) !important; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 2px; width: 25px; max-width: 25px; min-height: 8px; margin: 0 !important; z-index: 2 !important; pointer-events: none; }
  body.mobile-calendar-view .cell-dot { width: 3.5px; height: 3.5px; border-radius: 50%; background-color: var(--dot-color); flex: none; box-shadow: none; }
  body.mobile-calendar-view .cell-dot.is-past { opacity: .35; }
  body.mobile-calendar-view .cell-dot.is-focus { transform: scale(1.2); outline: 1px solid #ffffff; }
  body.mobile-calendar-view .cal-more-dots { display: none; }
  body.mobile-calendar-view .cal-cell-empty { display: none !important; }
  body.mobile-schedule-view .month-nav { display: none; }
  body.mobile-schedule-view #app .calendar-panel { display: none; }
  body.mobile-calendar-view .calendar-drawer-backdrop { display: block; position: fixed; top: 104px; right: 0; bottom: 0; left: 0; z-index: 94; background: rgba(4, 7, 13, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s var(--ease), visibility .25s var(--ease); }
  body.mobile-calendar-view.calendar-drawer-open .calendar-drawer-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
  body.mobile-calendar-view #app .detail-panel { position: fixed !important; top: 104px !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: min(88vw, 420px) !important; max-width: 100% !important; height: calc(100dvh - 104px) !important; max-height: calc(100dvh - 104px) !important; margin: 0 !important; padding: 16px 14px max(14px, env(safe-area-inset-bottom)) !important; box-sizing: border-box !important; background: rgba(13, 18, 29, .95) !important; border: none !important; border-left: 1px solid rgba(255, 255, 255, .15) !important; border-radius: 20px 0 0 0 !important; box-shadow: -14px 0 45px rgba(0, 0, 0, .75) !important; backdrop-filter: blur(24px) saturate(140%) !important; -webkit-backdrop-filter: blur(24px) saturate(140%) !important; z-index: 95 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; transform: translateX(100%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: transform .28s cubic-bezier(.2, .75, .25, 1), opacity .22s var(--ease), visibility .22s var(--ease) !important; }
  body.mobile-calendar-view.calendar-drawer-open #app .detail-panel { transform: translateX(0) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
  body.mobile-calendar-view .calendar-drawer-close { display: grid !important; place-items: center; width: 36px; height: 36px; padding: 0; margin-left: auto; color: var(--text-muted); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); border-radius: 10px; font-size: 22px; line-height: 1; cursor: pointer; transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease); }
  body.mobile-calendar-view .calendar-drawer-close:hover, body.mobile-calendar-view .calendar-drawer-close:active { color: #ffffff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); }
  body.mobile-calendar-view .detail-head { position: static !important; padding: 0 0 12px !important; margin-bottom: 8px !important; border-bottom: 1px solid rgba(255, 255, 255, .1) !important; flex: 0 0 auto !important; }
  body.mobile-calendar-view .detail-list { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; overscroll-behavior: contain !important; padding-right: 4px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
  body.mobile-calendar-view .match-card { scroll-margin-top: 148px; border-radius: 18px !important; background: radial-gradient(ellipse 115% 90% at 50% 115%, color-mix(in srgb, var(--comp) 42%, transparent) 0%, rgba(12, 18, 30, .85) 75%) !important; border: 1px solid rgba(255, 255, 255, .2) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .15) !important; }
  body.mobile-calendar-view .match-card.is-muted-fixture { opacity: .38; }
  body.mobile-schedule-view #app .detail-panel { position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; display: flex; width: 100%; min-width: 0; height: auto; min-height: 0; margin: 0; padding: 0 !important; flex: 0 0 auto; flex-direction: column; overflow: visible; background: transparent !important; border: none !important; border-radius: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; transform: none; visibility: visible; pointer-events: auto; }
  .detail-panel::before { display: none; }
  body.mobile-schedule-view .detail-empty { min-height: 220px; }
  body.mobile-schedule-view .detail-content { min-height: 0; flex: 0 0 auto; }
  body.mobile-schedule-view .detail-head { position: static; }
  body.mobile-schedule-view .detail-kicker-row:has(#detailFilterNotice:not(.hidden)) .detail-filter-hint { display: none; }
  body.mobile-schedule-view .detail-list { min-height: 0; max-height: none; padding-right: 0; flex: 0 0 auto; overflow: visible; overscroll-behavior: auto; }
  body.mobile-schedule-view .match-card { scroll-margin-top: 148px; border-radius: 18px !important; background: radial-gradient(ellipse 115% 90% at 50% 115%, color-mix(in srgb, var(--comp) 42%, transparent) 0%, rgba(12, 18, 30, .85) 75%) !important; border: 1px solid rgba(255, 255, 255, .2) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .15) !important; }
  body.mobile-schedule-view .match-card.is-muted-fixture { opacity: .38; }
  .detail-filter-notice button { min-height: 44px; }
  .day-empty { margin: 10px 0 4px; padding: 20px 12px; color: var(--text-muted); text-align: center; background: rgba(35, 40, 54, .58); border: 1px dashed rgba(255, 255, 255, .12); border-radius: 8px; font-size: 13px; line-height: 1.6; }
}

@media (max-width: 360px) {
  .mobile-schedule-controls { padding: 6px; }
  .mobile-day-rail { padding: 3px; gap: 2px; border-radius: 24px; }
  .mobile-day-button { min-height: 56px; padding: 4px 1px 3px; border-radius: 15px; }
  .rail-weekday { font-size: 8.5px; }
  .rail-day { font-size: 16px; }
  .rail-dots { width: 23px; max-width: 23px; gap: 2px; }
  .rail-dot { width: 3.5px; height: 3.5px; }
  .mobile-week-range { font-size: 12px; }
  .mobile-week-btn { width: 28px; height: 28px; font-size: 17px; }
  .favorite-players-button { height: 34px; min-height: 34px; padding: 0 8px; gap: 4px; border-radius: 17px; }
  .favorite-players-label { font-size: 10px; }
  .favorite-players-star { font-size: 13px; }
  .favorite-players-count { min-width: 15px; height: 15px; padding: 0 2px; font-size: 8.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-view-switch button, .mobile-day-button { transition: none; }
}

.favorite-players-button { display: inline-flex; min-width: 0; min-height: 36px; padding: 0 12px 0 10px; align-items: center; justify-content: center; gap: 7px; color: var(--text-muted); background: rgba(23, 27, 38, .88); border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 700; line-height: 1; transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); }
.favorite-players-button:hover, .favorite-players-button[aria-expanded="true"] { color: var(--gold); background: rgba(255, 199, 44, .1); border-color: rgba(255, 199, 44, .42); box-shadow: 0 0 12px rgba(255, 199, 44, .12); }
.favorite-players-button:focus-visible, .favorite-dialog button:focus-visible, .favorite-player-option:focus-within { outline: 2px solid var(--sky); outline-offset: 2px; }
.favorite-players-star { color: var(--gold); font-size: 16px; line-height: 1; text-shadow: 0 0 8px rgba(255, 199, 44, .35); }
.favorite-players-label { display: inline-flex; align-items: center; line-height: 1; }
.favorite-players-count { display: inline-flex; min-width: 19px; height: 18px; padding: 0 4px; align-items: center; justify-content: center; color: var(--gold); background: rgba(255, 199, 44, .1); border: 1px solid rgba(255, 199, 44, .2); border-radius: 9px; font: 800 10px/18px 'Space Grotesk', sans-serif; text-align: center; vertical-align: middle; }
.favorite-day-star, .rail-favorite-star, .calendar-favorite-star, .favorite-fixture-star { color: var(--gold); text-shadow: 0 0 8px rgba(255, 199, 44, .42); }
.favorite-day-star { flex: none; font-size: 13px; line-height: 1; }
.day-cell.has-favorite-fixture .day-head::after { display: none; }
.calendar-favorite-star { position: absolute; z-index: 2; top: 4px; right: 5px; font-size: 10px; line-height: 1; }
.favorite-fixture-star { position: absolute; z-index: 3; top: 8px; right: 10px; font-size: 16px; line-height: 1; }
.mobile-day-button.has-favorite-fixture { border-top-color: transparent !important; }
.rail-favorite-star { display: inline-block; margin-left: 2px; font-size: 9px; line-height: 1; vertical-align: 1px; }

.favorite-dialog { width: min(560px, calc(100vw - 32px)); max-width: none; max-height: min(82dvh, 760px); padding: 0; overflow: hidden; color: var(--text); background: rgba(19, 23, 34, .98); border: 1px solid rgba(152, 203, 255, .22); border-radius: 16px; box-shadow: 0 24px 80px rgba(0, 0, 0, .56); }
.favorite-dialog::backdrop { background: rgba(4, 7, 13, .72); backdrop-filter: blur(4px); }
.favorite-dialog-shell { display: flex; max-height: min(82dvh, 760px); padding: 18px; flex-direction: column; background: linear-gradient(145deg, rgba(35, 40, 54, .97), rgba(13, 17, 27, .98)); }
.favorite-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; }
.favorite-dialog-kicker { margin: 0 0 3px; color: var(--sky); font: 700 10px/1.2 'Space Grotesk', 'PingFang SC', sans-serif; letter-spacing: .08em; }
.favorite-dialog-head h2 { margin: 0; color: var(--text); font-size: 21px; line-height: 1.2; }
.favorite-dialog-close { display: grid; width: 40px; height: 40px; padding: 0; place-items: center; color: var(--text-muted); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 9px; cursor: pointer; font-size: 24px; line-height: 1; }
.favorite-dialog-close:hover { color: var(--gold); border-color: rgba(255, 199, 44, .4); }
.favorite-dialog-help { margin: 10px 0 6px; color: var(--text-muted); font-size: 12px; line-height: 1.55; flex: 0 0 auto; }
.favorite-players-status { min-height: 34px; margin: 0 0 8px; padding: 8px 10px; color: var(--sky); background: rgba(80, 151, 213, .1); border: 1px solid rgba(152, 203, 255, .16); border-radius: 7px; font-size: 11px; line-height: 1.45; flex: 0 0 auto; }
.favorite-player-search { margin-bottom: 4px; flex: 0 0 auto; }
.favorite-player-search label { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 11px; font-weight: 700; }
.favorite-player-search-control { position: relative; min-width: 0; }
.favorite-player-search-control input { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 0 76px 0 12px; color: var(--text); background: rgba(7, 10, 18, .58); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; font: inherit; font-size: 13px; }
.favorite-player-search-control input::placeholder { color: var(--text-dim); }
.favorite-player-search-control input:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-color: rgba(152, 203, 255, .5); }
.favorite-player-search-clear { position: absolute; top: 0; right: 0; display: grid; min-width: 64px; min-height: 44px; padding: 0 10px; place-items: center; color: var(--sky); background: rgba(80, 151, 213, .12); border: 1px solid rgba(152, 203, 255, .2); border-radius: 0 7px 7px 0; cursor: pointer; font-size: 11px; font-weight: 700; }
.favorite-player-search-clear[hidden], .favorite-player-section[hidden], .favorite-player-search-empty[hidden] { display: none; }
.favorite-player-search-summary { min-height: 15px; margin: 0 0 6px; color: var(--text-dim); font-size: 10px; line-height: 1.4; flex: 0 0 auto; }
.favorite-player-browser { min-width: 0; min-height: 0; max-height: min(52dvh, 470px); padding: 2px; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(138, 145, 155, .45) transparent; scrollbar-width: thin; }
.favorite-player-section + .favorite-player-section { margin-top: 14px; }
.favorite-player-section-title { margin: 0 0 7px; color: var(--sky); font-size: 11px; line-height: 1.3; }
.favorite-player-grid { display: grid; min-width: 0; padding: 0; align-content: start; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.favorite-player-search-empty { margin: 0; padding: 16px 12px; color: var(--text-muted); background: rgba(7, 10, 18, .34); border: 1px dashed rgba(255, 255, 255, .13); border-radius: 8px; font-size: 12px; line-height: 1.55; text-align: center; }
.favorite-player-option { display: grid; min-width: 0; min-height: 60px; padding: 6px 8px; align-items: center; grid-template-columns: 18px 36px minmax(0, 1fr); gap: 7px; color: var(--text); background: rgba(7, 10, 18, .44); border: 1px solid rgba(255, 255, 255, .08); border-radius: 9px; cursor: pointer; }
.favorite-player-option:hover { background: rgba(80, 151, 213, .12); border-color: rgba(152, 203, 255, .28); }
.favorite-player-option input { width: 18px; height: 18px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.favorite-player-portrait { width: 36px; height: 42px; }
.favorite-player-portrait.portrait-fallback { width: 36px; height: 36px; padding: 2px; color: var(--text-muted); background: rgba(152, 203, 255, .1); border: 1px solid rgba(152, 203, 255, .2); border-radius: 50%; font-size: 8px; }
.favorite-player-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.favorite-player-copy b, .favorite-player-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.favorite-player-copy b { color: var(--text); font-size: 12px; line-height: 1.2; }
.favorite-player-copy small { color: var(--text-dim); font-size: 9px; line-height: 1.2; }
.favorite-dialog-foot { display: flex; min-height: 44px; margin-top: 10px; align-items: center; justify-content: space-between; gap: 10px; flex: 0 0 auto; }
.favorite-dialog-foot span { min-width: 0; overflow: hidden; color: var(--text-dim); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.favorite-dialog-foot button { min-width: 80px; min-height: 40px; padding: 0 14px; color: #171b26; background: var(--gold); border: 0; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 800; }
.favorite-dialog-foot button:hover { background: #ffda68; }

@media (max-width: 700px) {
  .favorite-players-button { width: auto; height: 38px; min-height: 38px; padding: 0 10px; flex: 0 0 auto; gap: 5px; border-radius: 19px; background: rgba(14, 20, 32, .85); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
  .favorite-players-label { display: inline-flex; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .9); }
  .favorite-players-star { font-size: 14px; }
  .favorite-players-count { min-width: 17px; height: 16px; padding: 0 3px; font-size: 9.5px; border-radius: 8px; }
  .favorite-dialog { position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: min(82dvh, 720px); margin: 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 16px 16px 0 0; }
  .favorite-dialog-shell { max-height: min(82dvh, 720px); padding: 14px 14px max(12px, env(safe-area-inset-bottom)); }
  .favorite-player-browser { max-height: min(45dvh, 390px); }
  .favorite-player-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .favorite-player-option { min-height: 58px; padding: 5px 6px; grid-template-columns: 18px 32px minmax(0, 1fr); gap: 5px; }
  .favorite-player-portrait { width: 32px; height: 38px; }
  .favorite-player-portrait.portrait-fallback { width: 32px; height: 32px; }
  .favorite-player-copy b { font-size: 11px; }
  .favorite-player-copy small { font-size: 8px; }
  .favorite-dialog-foot { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .favorite-players-button { transition: none; }
}
.topbar-right-tools { display: flex; align-items: center; gap: 8px; margin-left: 0; }

@media (max-width: 700px) {
  .topbar { position: sticky !important; top: 0 !important; z-index: 100 !important; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 56px 48px; height: 104px; gap: 0; padding: 0 8px; align-items: center; }
  body.mobile-schedule-view .topbar { grid-template-rows: 56px !important; height: 56px !important; }
  .brand { grid-column: 1; grid-row: 1; }
  .topbar-right-tools { grid-column: 2; grid-row: 1; }
  .month-nav { position: static; grid-column: 1 / -1; grid-row: 2; justify-self: center; transform: none; }
  .mobile-feedback-link { padding: 0; color: var(--text-muted); background: transparent; border: 0; box-shadow: none; border-radius: 0; }
  .mobile-feedback-link:hover, .mobile-feedback-link:active { background: transparent; }
  body.mobile-schedule-view .mobile-schedule-controls { position: sticky !important; top: 56px !important; z-index: 90 !important; background: rgba(14, 20, 32, .92) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .1) !important; }
  body.mobile-calendar-view .mobile-schedule-controls { position: static !important; top: auto !important; z-index: auto !important; }
  html:has(body.mobile-schedule-view) { scroll-padding-top: 195px !important; }
  html:has(body.mobile-calendar-view) { scroll-padding-top: 120px !important; }
  .cal-week-cells .day-cell, .cal-week-cells .day-cell:last-child { border-color: transparent !important; }
  .day-cell.today:not(.is-active), .day-cell.is-active { border-color: transparent !important; outline: none !important; }
  .team-filter .day-cell.team-match { outline: none !important; box-shadow: none !important; }
  .filter-match-card { min-height: 112px; padding: 8px 8px 9px; }
  .filter-match-card .calendar-match-meta { min-height: 20px; }
  .filter-match-card .calendar-match-date { position: static; font-size: 11px; }
  .filter-match-card .calendar-match-teams { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: center; }
  .filter-match-card .calendar-match-center { gap: 4px; }
  .filter-match-card .calendar-match-center .comp-logo { width: 25px; height: 25px; }
  .filter-match-card .calendar-match-center time { color: var(--gold); font: 900 22px/1 'Barlow Condensed', 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; }
  .filter-match-card .calendar-match-team .club-crest { width: 42px; height: 42px; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
  .filter-match-card .calendar-match-team b { margin-top: 2px; font-size: 10px; }
  .filter-match-card .calendar-match-vs { display: none; }
}