.app-shell { width: min(1600px, 100%); margin: 0 auto; padding: clamp(12px, 2.2vw, 30px); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.topbar-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-mark {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #53c4ff, #8b74ff);
  color: #04101e;
  font-size: 18px;
  font-weight: 900;
}
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.topbar h1 { margin: 0; font-size: clamp(22px, 2.7vw, 29px); line-height: 1.2; }
.account-status { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.date-button:hover, .today-button:hover, .signal-tab:hover, .team-tab:hover { filter: brightness(1.12); }
.status-pill { color: var(--muted); font-size: 12px; white-space: nowrap; }
.layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: start; gap: clamp(12px, 1.6vw, 22px); transition: grid-template-columns .22s ease; }
.games-panel { position: sticky; top: 16px; min-width: 0; max-height: calc(100vh - 32px); overflow: hidden; transition: transform .22s ease, opacity .18s ease, visibility .22s; }
.panel-title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 14px; border-bottom: 1px solid var(--line); }
.panel-title strong { font-size: 15px; }
.panel-title span { margin-left: 8px; color: var(--muted); font-size: 12px; }
.schedule-controls { display: flex; align-items: center; gap: 4px; min-width: 0; }
.schedule-controls #selected-date { margin: 0; color: #bfd3eb; font-size: 11px; white-space: nowrap; }
.schedule-controls select { max-width: 74px; padding: 5px 4px; border: 1px solid #304864; border-radius: 7px; background: #0c1b2e; color: var(--text); font-size: 11px; }
.date-button, .today-button { min-width: 27px; height: 28px; border: 1px solid #345071; border-radius: 7px; background: #10243c; color: #c7d8eb; cursor: pointer; }
.today-button { padding: 0 7px; font-size: 11px; }
.games-list { max-height: calc(100vh - 120px); padding: 7px; overflow: auto; overscroll-behavior: contain; }
.game-row { display: block; width: 100%; padding: 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.game-row:hover, .game-row.active { border-color: #3a6490; background: #172f4c; }
.game-row-top, .game-row-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.game-row-top { color: var(--muted); font-size: 12px; }
.game-row-bottom { margin-top: 6px; }
.matchup { min-width: 0; overflow-wrap: anywhere; font-weight: 800; }
.matchup small { color: var(--muted); font-weight: 500; }
.tag { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; background: #183b53; color: #83d9ff; font-size: 11px; }
.tag.live { background: #4a2330; color: #ff9bad; }
.tag.done { background: #243446; color: #b6c1d1; }
.watching { width: 100%; min-width: 0; margin: 0 auto; }
.empty-state { display: grid; min-height: 320px; padding: 28px; place-content: center; text-align: center; }
.empty-state h2 { margin: 10px 0 4px; }
.empty-state p { margin: 0 auto; color: var(--muted); }
/* 登录层：居中卡片 + 品牌标记 */
.auth-gate {
  display: grid;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 24px 18px;
  place-items: center;
  background:
    radial-gradient(circle at 50% 8%, rgba(73, 181, 255, .14), transparent 46%),
    radial-gradient(circle at 82% 82%, rgba(124, 92, 255, .12), transparent 48%);
}
.auth-gate[hidden] { display: none !important; }
.gate-card {
  width: min(400px, 100%);
  padding: clamp(24px, 4vw, 34px);
  border: 1px solid #1e3450;
  border-radius: 20px;
  background: linear-gradient(168deg, #102338, #0a1727);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .45);
  text-align: center;
}
.gate-brand { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 18px; }
.gate-mark {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #53c4ff, #8b74ff);
  color: #04101e;
  font-size: 15px;
  font-weight: 900;
}
.gate-wordmark { color: #cfe2f5; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.gate-card h2 { margin: 0 0 8px; font-size: 21px; }
.gate-sub { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.client-login-form { display: grid; gap: 13px; margin: 22px 0 0; text-align: left; }
.gate-field { display: grid; gap: 6px; }
.gate-field > span { color: #b9cde2; font-size: 12px; font-weight: 700; }
.gate-field input {
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid #2b4462;
  border-radius: 11px;
  background: #061320;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gate-field input::placeholder { color: #5d7896; }
.gate-field input:focus { outline: 0; border-color: #49b5ff; box-shadow: 0 0 0 3px rgba(73, 181, 255, .16); }
.gate-submit { min-height: 46px; margin-top: 4px; font-size: 15px; border-radius: 11px; }
.login-error { min-height: 18px; margin: 10px 0 0 !important; color: #ff9bad !important; font-size: 12px; text-align: center; }
.login-help { margin: 2px 0 0 !important; color: #7189a4; font-size: 12px; }

.video-card { position: relative; width: 100%; min-width: 0; margin: 0; padding: 0; overflow: hidden; }
.video-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 11px 15px; border-bottom: 1px solid var(--line); }
.video-heading { flex: 1 1 auto; min-width: 0; }
.video-heading strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-heading span { display: block; overflow: hidden; margin-top: 1px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.video-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.video-actions .btn { padding: 8px 10px; font-size: 12px; }
.video-frame-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 180px; border-bottom: 1px solid var(--line); background: #02070d; }
.video-frame-wrap iframe, .video-frame-wrap video { display: block; width: 100%; height: 100%; border: 0; background: #02070d; }
.video-frame-wrap video { object-fit: contain; }
.video-frame-wrap [hidden] { display: none !important; }
.frame-note { position: absolute; inset: auto 12px 10px; padding: 7px 9px; border-radius: 7px; background: rgba(2, 7, 13, .76); color: #a3b3c5; font-size: 12px; pointer-events: none; }
.frame-note:empty { display: none; }
.source-picker-panel { display: grid; gap: 0; border-bottom: 1px solid var(--line); background: rgba(7, 17, 31, .66); }
.source-picker-panel[hidden] { display: none; }
.signal-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; padding: 10px 14px; }
.signal-tab { min-width: 0; padding: 7px 10px; border: 1px solid #345071; border-radius: 9px; background: #10243c; color: #bfd3eb; cursor: pointer; }
.signal-tab.active { border-color: transparent; background: linear-gradient(135deg, #218fc9, #5d57bd); color: #fff; }
.signal-label { margin-right: 2px; color: var(--muted); font-size: 11px; }
.signal-hint { color: var(--muted); font-size: 11px; }
.mini-toggle { cursor: pointer; }
.player-resize { display: none; }

.score-card { margin-top: 14px; padding: 14px clamp(12px, 2vw, 22px); }
.score-meta { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 5px 12px; color: var(--muted); font-size: 12px; }
.score-caption { margin-right: auto; color: var(--text); font-size: 14px; }
.score-main { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(8px, 2vw, 22px); margin: 10px 0 4px; }
.team-block { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: clamp(7px, 1vw, 14px); font-size: clamp(15px, 2vw, 20px); font-weight: 800; }
.team-block.home { justify-content: flex-start; }
.team-block span { min-width: 0; overflow-wrap: anywhere; }
.team-block b { flex: 0 0 auto; font-size: clamp(28px, 4vw, 40px); line-height: 1; }
.score-divider { color: var(--muted); font-size: 11px; }
.period-line { color: #a9c1df; text-align: center; font-size: 12px; }
.period-scores { margin-top: 12px; overflow-x: auto; border: 1px solid rgba(48, 76, 108, .7); border-radius: 9px; background: rgba(8, 20, 35, .64); color: #bfd3eb; font-size: 11px; }
.period-scores[hidden] { display: none; }
.period-score-head, .period-score-row { display: grid; grid-template-columns: minmax(96px, 1.4fr) repeat(var(--period-count), minmax(54px, 1fr)) minmax(54px, .8fr); align-items: center; min-width: 360px; }
.period-score-head { color: var(--muted); border-bottom: 1px solid rgba(48, 76, 108, .7); }
.period-score-head span, .period-score-row > * { padding: 7px 9px; text-align: center; white-space: nowrap; }
.period-score-head span:first-child, .period-score-row strong { text-align: left; }
.period-score-row + .period-score-row { border-top: 1px solid rgba(48, 76, 108, .42); }
.period-score-row strong { overflow: hidden; text-overflow: ellipsis; }
.period-score-row b { color: #fff; }

.data-grid { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; margin: 14px auto 0; }
.stats-card { min-width: 0; padding: clamp(12px, 1.8vw, 18px); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.card-head strong { font-size: 15px; }
.card-head span, .players-heading span { color: var(--muted); font-size: 11px; }
.team-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 11px 0; }
.team-tab { min-width: 92px; padding: 8px 14px; border: 1px solid #345071; border-radius: 10px; background: #10243c; color: #bfd3eb; cursor: pointer; font-weight: 700; }
.team-tab.active { border-color: transparent; background: linear-gradient(135deg, #218fc9, #5d57bd); color: #fff; }
.players-heading { margin: 14px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.players { min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; }
.player-row { display: grid; grid-template-columns: 180px 62px 58px 62px 58px 70px 70px 70px 58px 58px 58px 58px 58px; align-items: center; gap: 7px; min-width: 1020px; padding: 9px 2px; border-bottom: 1px solid rgba(48, 76, 108, .5); font-size: 12px; }
.player-row > span:not(:first-child) { text-align: center; }
.player-row.head { color: var(--muted); font-size: 11px; }
.player-row.head .player-cell { background: #10233a; }
.player-cell { position: sticky; left: 0; z-index: 1; display: flex; min-width: 0; align-items: center; gap: 8px; padding: 0 6px; background: #0c1b2e; text-align: left !important; }
.jersey { flex: 0 0 27px; color: var(--muted); text-align: right; }
.player-name { min-width: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.player-row.total { border-top: 2px solid #365274; border-bottom-color: #365274; background: #142943; font-weight: 800; }
.player-row.total .player-cell { background: #142943; }
.total-label { width: 100%; text-align: center; }
.empty { padding: 22px 10px; color: var(--muted); text-align: center; }
footer { padding: 13px 2px 0; color: #607896; font-size: 11px; }

.layout.schedule-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.layout.schedule-collapsed .games-panel { visibility: hidden; transform: translateX(-105%); opacity: 0; pointer-events: none; }
.schedule-toggle { position: relative; z-index: 1250; }

/* The floating player is independent from document flow and can be resized. */
.video-card.mini-player { position: fixed; z-index: 1300; display: flex; width: min(360px, calc(100vw - 24px)); min-width: 240px; height: 245px; min-height: 160px; margin: 0; resize: none; flex-direction: column; border-radius: 14px; box-shadow: 0 16px 54px rgba(0, 0, 0, .58); }
.video-card.mini-player .video-head { flex: 0 0 auto; cursor: move; touch-action: none; user-select: none; }
.video-card.mini-player .video-actions .source-trigger, .video-card.mini-player .source-picker-panel { display: none !important; }
.video-card.mini-player .video-frame-wrap { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; border-bottom: 0; }
.video-card.mini-player .player-resize { position: absolute; right: 2px; bottom: 2px; z-index: 5; display: grid; width: 36px; height: 36px; padding: 0; place-items: center; border: 0; border-radius: 9px; background: rgba(5, 13, 23, .72); cursor: nwse-resize; touch-action: none; }
.player-resize span { width: 15px; height: 15px; transform: translate(-2px, -2px); border-right: 3px solid rgba(235, 245, 255, .9); border-bottom: 3px solid rgba(235, 245, 255, .9); border-radius: 0 0 3px; }
.player-resize:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

@media (max-width: 1100px) {
  .layout { grid-template-columns: minmax(240px, 290px) minmax(0, 1fr); }
}
@media (max-width: 840px) {
  .layout { display: block; }
  .watching { max-width: none; }
  .games-panel { position: fixed; z-index: 1200; top: 82px; bottom: 12px; left: 10px; width: min(370px, calc(100vw - 20px)); max-height: none; box-shadow: 0 20px 70px rgba(0, 0, 0, .58); }
  .games-list { max-height: calc(100% - 70px); }
  .layout.schedule-collapsed .games-panel { visibility: hidden; transform: translateX(calc(-100% - 24px)); }
  .layout.schedule-collapsed { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .app-shell { padding: 12px; }
  .topbar { align-items: stretch; flex-direction: column; gap: 8px; margin-bottom: 13px; }
  .topbar h1 { font-size: 25px; }
  .top-actions { justify-content: flex-start; gap: 6px; }
  .top-actions .btn { padding: 8px 9px; font-size: 11px; }
  .status-pill { width: auto; margin-left: auto; text-align: right; font-size: 10px; }
  .video-head { gap: 7px; padding: 9px; }
  .video-actions { gap: 5px; }
  .video-actions .btn { padding: 7px 8px; font-size: 11px; }
  .video-frame-wrap { min-height: 190px; }
  .signal-tabs { gap: 6px; padding: 8px 9px; }
  .signal-tab { padding: 7px 8px; font-size: 12px; }
  .score-card { margin-top: 10px; padding: 12px 10px; }
  .score-meta { gap: 4px 8px; font-size: 10px; }
  .score-caption { font-size: 13px; }
  .score-main { gap: 5px; }
  .team-block { gap: 6px; font-size: 14px; }
  .team-block b { font-size: 27px; }
  .player-row { min-width: 1020px; }
  .video-card.mini-player { right: 10px; bottom: 10px; width: min(340px, calc(100vw - 20px)); min-width: 240px; height: 220px; }
}
@media (max-width: 360px) {
  .app-shell { padding: 9px; }
  .top-actions .btn { padding: 7px; font-size: 10px; }
  .video-actions .btn { padding: 6px; font-size: 10px; }
  .team-block { font-size: 13px; }
  .team-block b { font-size: 24px; }
  .score-divider { font-size: 9px; }
}