/*
 * Screen-only arena theme. The image can be replaced at public/app-bg.png.
 * Printed documents are deliberately outside these selectors.
 */
body {
  --surface: rgba(12, 23, 38, .83);
  --surface-deep: rgba(7, 16, 29, .9);
  --surface-soft: rgba(23, 39, 57, .78);
  --line: rgba(202, 226, 246, .16);
  --muted: #bdcad9;
  --text-strong: #f4f8ff;
  --arena-image: url('/app-bg.png');
  color: var(--text-strong);
  background: #071321;
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif;
}
body.dark {
  --surface: rgba(7, 16, 28, .91);
  --surface-deep: rgba(4, 11, 21, .96);
  --surface-soft: rgba(16, 31, 49, .88);
  --line: rgba(202, 226, 246, .15);
  --muted: #bdcad9;
  color: var(--text-strong);
  background: #030b15;
}

#app .app-shell {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 65% 42% at 72% 3%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%),
    radial-gradient(ellipse 48% 38% at 94% 84%, rgba(74, 139, 182, .13), transparent 75%),
    #071321;
}
#app .app-shell::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(110deg, rgba(3, 10, 20, .56), rgba(7, 19, 34, .43) 52%, rgba(3, 10, 20, .55)), var(--arena-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
body.dark #app .app-shell::before {
  background-image: linear-gradient(110deg, rgba(1, 6, 13, .71), rgba(4, 14, 27, .59) 52%, rgba(1, 6, 13, .7)), var(--arena-image);
}
#app .main { color: var(--text-strong); }
#app .content { position: relative; }
#app .content h1 { color: var(--text-strong); font-size: clamp(25px, 2.8vw, 40px); font-weight: 800; letter-spacing: -.04em; }
#app .page-head { padding-top: 5px; }
#app .page-head:has([data-add-player]) { align-items: flex-start; flex-direction: column; gap: 16px; }
#app .page-head:has([data-add-player]) .header-actions { justify-content: flex-start; flex-wrap: wrap; width: 100%; }
#app .page-head:has([data-add-player]) .header-actions button { white-space: nowrap; }
@media (min-width: 1200px) {
  #app .page-head:has([data-add-player]) .header-actions {
    display: grid;
    grid-template-columns: repeat(10, max-content);
    align-items: stretch;
  }
}
#app .page-head p, #app .muted { color: var(--muted); }
#app .eyebrow, #app .nav-label { color: color-mix(in srgb, var(--accent) 46%, #d7ebff); }
#app a, #app .event-open { color: color-mix(in srgb, var(--accent) 46%, #d7ebff); }

/* Navigation remains in its familiar position; only its surface changes. */
#app .sidebar {
  background: transparent;
  border-right: 1px solid rgba(202, 226, 246, .12);
  box-shadow: 14px 0 44px rgba(0, 0, 0, .2);
  backdrop-filter: blur(16px);
}
#app .team-switch { background: rgba(255, 255, 255, .035); border-color: var(--line); box-shadow: inset 0 1px rgba(255, 255, 255, .04); }
#app .team-switch select, #app .team-switch label { color: #edf4fb; }
#app .team-switch option { color: #142439; }
#app select#team-switch option {color: white;}
#app .nav button { color: #b8c7d9; }
#app .nav button { background: transparent; border-color: transparent; }
#app .nav button:hover { color: #fff; background: rgba(255, 255, 255, .07); }
#app .nav button.active {
  color: color-mix(in srgb, var(--accent) 42%, white);
  background: color-mix(in srgb, var(--accent) 17%, rgba(15, 31, 47, .78));
  box-shadow: inset 2px 0 color-mix(in srgb, var(--accent) 60%, white), inset 0 1px rgba(255, 255, 255, .06);
}
#app .topbar {
  background: transparent;
  border-color: var(--line);
  box-shadow: 0 9px 24px rgba(0, 0, 0, .12);
  backdrop-filter: blur(13px);
}
#app .breadcrumbs, #app .breadcrumbs strong, #app .topbar button { color: #d7e4f0; }
#app .topbar .user-name { color: var(--text-strong); }
#app .topbar button { background: transparent; border-color: transparent; }
#app .avatar, #app .stat-icon {
  color: color-mix(in srgb, var(--accent) 48%, white);
  background: color-mix(in srgb, var(--accent) 13%, rgba(19, 41, 58, .9));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}

/* Translucent panels use a solid-enough base to stay legible over a future photo. */
#app .card, #app .unit, #app .lineup-empty-details, #app .import-player,
#app .calendar-grid, #app .lineup-player-picker {
  color: var(--text-strong);
  background: linear-gradient(145deg, var(--surface), var(--surface-deep));
  border: 1px solid var(--line);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .26), inset 0 1px rgba(255, 255, 255, .055);
}
#app .card { border-radius: 14px; }
#app .all-teams-main {
  background: transparent;
  border: 0;
  box-shadow: none;
}
#app .card-title { border-color: var(--line); }
#app .dashboard-summary-item { color: var(--text-strong); }
#app .dashboard-summary-item:hover, #app .dashboard-summary-item:focus-visible,
#app .stat-link:hover, #app .stat-link:focus-visible,
#app .event-row:hover, #app .event-row:focus-visible,
#app .attendance-overview-row:hover { background: rgba(255, 255, 255, .06); }
#app .dashboard-summary-value, #app .stat-value { color: var(--text-strong); font-weight: 800; }
#app .dashboard-summary-label, #app .stat-label { color: var(--muted); }
#app .next-game {
  color: #fff;
  background:
    radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--accent) 23%, transparent), transparent 44%),
    linear-gradient(120deg, rgba(18, 42, 64, .92), rgba(7, 20, 36, .88));
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
  box-shadow: 0 22px 55px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .09);
}
#app .next-game .muted { color: #d0dfed; }
#app .next-game .eyebrow { color: color-mix(in srgb, var(--accent) 44%, white); }
#app .stat-icon { box-shadow: inset 0 1px rgba(255, 255, 255, .07); }
#app .date-box, #app .badge-number, #app .lineup-unit-group,
#app .game-plan-objective, #app .lineup-even-unit {
  color: var(--text-strong);
  background: rgba(7, 17, 30, .53);
  border-color: var(--line);
}
#app .date-box span, #app .slot-label, #app .lineup-unit-group-title h3,
#app .lineup-special-group-title h3 { color: var(--muted); }

/* Controls keep their current behavior and use the active team's accent. */
#app button, #modal button {
  color: var(--text-strong);
  background: var(--surface-soft);
  border: 1px solid var(--line);
}
#app button:hover, #modal button:hover { background: rgba(53, 75, 99, .86); }
/* The import opponent picker is an editable select, so its menu needs the
   same compact controls as the neighboring selects and an opaque backdrop. */
#modal .schedule-opponent-input input { height: 39px; font-size: 12px; font-weight: 650; }
#modal button.schedule-opponent-open {
  color: var(--text-strong);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  top: 0;
  right: 0;
  bottom: 0;
  width: 24px;
  font-size: 0;
}
#modal button.schedule-opponent-open:hover,
#modal button.schedule-opponent-open:focus-visible { background: transparent; }
#modal button.schedule-opponent-open::after {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-9px) rotate(45deg);
}
#modal .schedule-opponent-options {
  background: #102136;
  border-color: rgba(202, 226, 246, .22);
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .5);
}
#modal .schedule-opponent-options button {
  color: var(--text-strong);
  background: transparent;
  border: 0;
  border-radius: 2px;
  box-shadow: none;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}
#modal .schedule-opponent-options button:hover,
#modal .schedule-opponent-options button:focus-visible { background: color-mix(in srgb, var(--accent) 19%, #102136); }
#app .attendance-actions button.selected.going,
#app .attendance-actions button.selected.going:hover {
  color: #052b23;
  background: #38c99e;
  border-color: #6be1bd;
  box-shadow: 0 0 0 1px rgba(107, 225, 189, .28), 0 0 14px rgba(56, 201, 158, .24);
}
#app .attendance-actions button.selected.not_going,
#app .attendance-actions button.selected.not_going:hover {
  color: #3d1014;
  background: #f4a9aa;
  border-color: #ffc6c7;
  box-shadow: 0 0 0 1px rgba(255, 198, 199, .24), 0 0 14px rgba(244, 169, 170, .2);
}
#app .attendance-actions button.selected.maybe,
#app .attendance-actions button.selected.maybe:hover {
  color: #392707;
  background: #e7c77c;
  border-color: #f7dda3;
  box-shadow: 0 0 0 1px rgba(247, 221, 163, .22), 0 0 14px rgba(231, 199, 124, .2);
}
#app .lineup-stats-table button.stats-sort-button,
#app .lineup-stats-table button.stats-sort-button:hover { background: transparent; border: 0; box-shadow: none; }
#app .lineup-stats-table button.stats-sort-button.active,
#app .lineup-stats-table button.stats-sort-button:hover { color: color-mix(in srgb, var(--accent) 40%, white); }
#app button.roster-trading-card, #app button.roster-trading-card:hover { background: transparent; border: 0; }
#app button.primary, #modal button.primary {
  color: #08192a;
  font-weight: 800;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 50%, #fff),
    color-mix(in srgb, var(--accent) 24%, #fff));
  border-color: color-mix(in srgb, var(--accent) 45%, #fff);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 20%, transparent), inset 0 1px rgba(255, 255, 255, .32);
}
#app button.primary:hover, #modal button.primary:hover { filter: brightness(1.06); }
#app .dashboard-summary-item, #app .calendar-date, #app .event-row,
#app .attendance-overview-row, #app .lineup-clear-button {
  background: transparent;
  border-color: transparent;
}
#app button.ghost, #modal button.ghost { background: rgba(255, 255, 255, .035); }
#app button.danger, #modal button.danger { background: rgba(156, 47, 52, .16); color: #ffb5b3; border-color: rgba(241, 118, 112, .31); }
#app button:focus-visible, #modal button:focus-visible,
#app a:focus-visible, #app :is(input,select,textarea):focus-visible, #modal :is(input,select,textarea):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, #fff);
  outline-offset: 2px;
}
#app :is(input,select,textarea), #modal :is(input,select,textarea) {
  color: var(--text-strong);
  background: rgba(4, 13, 25, .72);
  border: 1px solid rgba(202, 226, 246, .22);
}
#app :is(input,select,textarea)::placeholder, #modal :is(input,select,textarea)::placeholder { color: #aebed0; }
#app input[type=file]::file-selector-button, #modal input[type=file]::file-selector-button {
  margin-right: 10px;
  padding: 8px 11px;
  color: var(--text-strong);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  cursor: pointer;
}
#app select option, #modal select option { color: #eaf2fb; background: #102136; }
#app label, #modal label, #app legend, #modal legend { color: #cedaea; }
#app .section-tabs { border-color: var(--line); }
#app .section-tabs button { color: #cfdaea; background: transparent; border-color: transparent; }
#app .section-tabs button:hover { background: rgba(255, 255, 255, .06); }
#app .section-tabs button.active, #app .calendar-view-switch button.active {
  color: color-mix(in srgb, var(--accent) 44%, white);
  background: color-mix(in srgb, var(--accent) 14%, rgba(13, 29, 45, .8));
  border-color: color-mix(in srgb, var(--accent) 23%, var(--line));
}
#app .calendar-view-switch { background: var(--surface-deep); border-color: var(--line); }

/* Data remains scannable, with quieter rows and stronger headings. */
#app :is(.roster-table,.attendance-table,.game-plan-table,.game-plan-ai-table) th {
  color: #c6d6e7;
  background: rgba(5, 14, 26, .92);
  border-color: var(--line);
}
#app :is(.roster-table,.attendance-table,.game-plan-table,.game-plan-ai-table) td {
  color: var(--text-strong);
  border-color: var(--line);
}
#app .event-row, #app .attendance-overview-row, #app .directory-item,
#app .settings-staff-row, #app .archived-player-row { border-color: var(--line); }
#app .event-copy .muted, #app .event-row .muted { color: var(--muted); }
#app .pill {
  color: #d6e7f6;
  background: rgba(178, 209, 234, .1);
  border: 1px solid rgba(178, 209, 234, .17);
}
#app .pill.game, #app .pill.going { color: #8ce9cf; background: rgba(39, 175, 139, .14); border-color: rgba(73, 207, 164, .28); }
#app .pill.practice, #app .pill.maybe { color: #f5d18c; background: rgba(217, 157, 47, .14); border-color: rgba(227, 173, 68, .28); }
#app .pill.not_going { color: #ffb3b4; background: rgba(218, 86, 95, .15); border-color: rgba(218, 86, 95, .28); }
#app .attention, #app .info, #app .lineup-status-notice {
  color: #f2dfba;
  background: rgba(102, 69, 21, .36);
  border-color: rgba(225, 176, 83, .3);
}
#app .info, #app .lineup-status-notice { color: #d5eaf7; background: rgba(21, 68, 92, .39); border-color: rgba(107, 184, 215, .28); }
#app .lineup-status-notice strong, #app .lineup-status-notice p { color: inherit; }

/* Calendar and lineup editors retain their existing grids and controls. */
#app .calendar-grid { overflow: hidden; }
#app .calendar-day { border-color: var(--line); }
#app .calendar-day.outside { color: #b9c7d6; background: rgba(3, 11, 21, .3); }
#app .calendar-day[data-calendar-cell]:hover, #app .calendar-day.outside[data-calendar-cell]:hover { background: rgba(255, 255, 255, .07); }
#app .calendar-event, #app .calendar-event.game, #app .calendar-event.practice {
  color: #eef6fd;
  background: color-mix(in srgb, var(--event-color, var(--accent)) 24%, #13273b);
}
#app .calendar-event.game {
    color: #8ce9cf;
    background: rgba(39, 175, 139, .14);
    border-color: rgba(73, 207, 164, .28);
}

#app .calendar-event.practice {
    color: #f5d18c;
    background: rgba(217, 157, 47, .14);
    border-color: rgba(227, 173, 68, .28);
}
#app .calendar-event.event-canceled { color: #bec8d3; background: rgba(98, 108, 121, .24); }
#app .lineup-unit-group { background: rgba(4, 13, 24, .55); }
#app .lineup-unit-group > .lineup-even-unit { background: transparent; box-shadow: none; }
#app .lineup-special-unit { background: linear-gradient(145deg, var(--surface), var(--surface-deep)); }
#app .lineup-special-body .rink, #app .login-art .rink { background: #f9fcff; color: #172537; }
#app .lineup-special-body .rink-player span { color: #334b62; }
#app .lineup-picker-hint, #app .game-plan-status { color: var(--muted); }
#app .lineup-picker-list button:hover, #app .lineup-picker-list button.selected { color: #e9fff7; background: color-mix(in srgb, var(--accent) 25%, #173248); }
#app .game-plan-objective h3, #app .game-plan-objective label { color: var(--text-strong); }

/* Dialogs are square by existing product choice; their finish matches the panels. */
#modal {
  color: var(--text-strong);
  background: linear-gradient(155deg, rgba(20, 38, 56, .97), rgba(6, 16, 30, .98));
  border: 1px solid rgba(202, 226, 246, .22);
  box-shadow: 0 30px 100px rgba(0, 0, 0, .64), inset 0 1px rgba(255, 255, 255, .07);
}
#modal:has(.player-card) {
  background: transparent;
  border: none;
  box-shadow: none;
  overscroll-behavior: contain;
}
@media screen {
  #app [hidden], #modal [hidden] { display: none !important; }
  body.rsvp-open { overflow: hidden; }
  .event-rsvp-panel { overscroll-behavior: contain; }
  #app :is(button,a,[tabindex]):focus-visible, #modal :is(button,a,[tabindex]):focus-visible { outline: 2px solid #a5c9ff; outline-offset: 3px; }
  #modal .schedule-opponent-options [role="option"][aria-selected="true"] { background: color-mix(in srgb, var(--accent) 32%, #172537); color: white; }
  #modal .import-player:focus { outline: 2px solid #a5c9ff; outline-offset: 3px; }
  html:has(#modal[open] .player-card),
  body:has(#modal[open] .player-card) {
    overflow: hidden;
  }
}
#modal::backdrop { background: rgba(1, 7, 16, .75); backdrop-filter: blur(8px); }
#modal h2, #modal h3 { color: var(--text-strong); }
#modal .muted { color: var(--muted); }
#modal .calendar-subscribe-guides { display: grid; gap: 10px; margin-top: 16px; }
#modal .calendar-subscribe-guides section { padding: 13px 15px; border: 1px solid var(--line); background: var(--surface-soft); }
#modal .calendar-subscribe-guides h3 { margin-bottom: 5px; }
#modal .calendar-subscribe-guides p { margin-bottom: 8px; color: var(--muted); font-size: 12px; }
#modal .calendar-subscribe-guides a { display: inline-block; margin: 4px 12px 0 0; font-size: 12px; }
#modal .calendar-local-notice { color: #603c09; }
#modal .form-actions, #modal .settings-inline-form { border-color: var(--line); }
#modal .player-card-back { background: #122438; box-shadow: none; }
#modal .player-card-details, #modal .player-card-actions { color: var(--text-strong); background: #122438; }
#modal .player-card-actions:has(#invite-family) { background: transparent; }
#modal .player-card-details p, #modal .player-card-details strong { color: var(--text-strong); }
#modal .pd-frost-back {
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  color: #f3f8ff;
  background: #071727;
}
#modal .pd-frost-back::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: url('/player-card-back-frost.png') center / 100% 100% no-repeat;
  pointer-events: none;
}
#modal .pd-frost-back .player-card-back-photo {
  position: absolute;
  z-index: 1;
  top: 10%;
  left: 6.5%;
  width: 32.5%;
  height: 28.5%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--player-team-color) 25%, #071727);
}
#modal .pd-frost-back .player-card-back-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
#modal .pd-frost-back .player-card-back-photo span {
  color: #fff;
  font-size: 32px;
  font-weight: 900;
}
#modal .pd-frost-back .player-card-back-header {
  position: absolute;
  z-index: 3;
  top: 5.5%;
  right: 5%;
  left: 44%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  height: 9%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  color: #f3f8ff;
}
#modal .pd-frost-back .player-card-back-header > span {
  color: #b5d8f8;
  font-size: 9px;
  letter-spacing: 1px;
}
#modal .pd-frost-back .player-card-back-header h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 0;
  color: #fff;
  line-height: 1;
}
#modal .pd-frost-back .player-card-back-number {
  flex: 0 0 auto;
  font-size: clamp(29px, 9.2cqw, 43px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -2px;
  white-space: nowrap;
}
#modal .pd-frost-back .player-card-back-names {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-transform: uppercase;
  font-style: italic;
}
#modal .pd-frost-back .player-card-back-first-name {
  font-size: clamp(10px, 2.9cqw, 13px);
  font-weight: 550;
}
#modal .pd-frost-back .player-card-back-last-name {
  font-size: clamp(12px, 4.1cqw, 19px);
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
}
#modal .pd-frost-back .player-card-back-facts {
  position: absolute;
  z-index: 3;
  top: 22%;
  left: 44%;
  right: 6%;
  margin: 0;
  color: #f3f8ff;
  font-size: clamp(10px, 2.9cqw, 13px);
  line-height: 1.35;
}
#modal .pd-frost-back .player-card-back-facts > div {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 10px;
}
#modal .pd-frost-back .player-card-back-facts dt {
  flex-shrink: 0;
  padding-right: 6px;
  border-right: 2px solid #f4c859;
}
#modal .pd-frost-back .player-card-back-facts dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
#modal .pd-frost-back .player-card-back-facts .player-card-back-extra {
  color: #c6d7e9;
  font-size: 9px;
  margin: 0;
}
#modal .pd-frost-back .player-card-back-contact-title {
  position: absolute;
  z-index: 3;
  top: 41.7%;
  left: 8.5%;
  height: 3.5%;
  display: flex;
  align-items: center;
  color: #071321;
  font-size: clamp(15px, 4.8cqw, 22px);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}
#modal .pd-frost-back .player-card-back-footer {
  position: absolute;
  z-index: 3;
  top: 93.5%;
  left: 11%;
  right: 17%;
  height: 3.3%;
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: #fff;
  line-height: 1;
}
#modal .pd-frost-back .player-card-back-footer > span:first-child {
  font-size: clamp(12px, 4cqw, 18px);
  font-weight: 850;
  font-style: italic;
}
#modal .pd-frost-back .player-card-back-footer > span:last-child {
  overflow-wrap: anywhere;
  font-size: clamp(8px, 2.4cqw, 11px);
  letter-spacing: 1px;
}
#modal .pd-frost-back .player-card-contact-section > span {
  display: none;
}
#modal .pd-frost-back .player-card-details {
  position: absolute;
  z-index: 3;
  top: 46%;
  right: 7%;
  bottom: 12.8%;
  left: 7%;
  display: block;
  padding: 0 6px 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: #77a6d0 #091827;
  color: #f3f8ff;
  background: transparent;
}
#modal .pd-frost-back .player-card-details section,
#modal .pd-frost-back .player-card-details section:nth-child(even):not(.player-card-wide) {
  padding: 9px 3px;
  border-color: #8ebbd747;
}
#modal .pd-frost-back .player-card-details section > span { color: #92cfff; }
#modal .pd-frost-back .player-card-details p,
#modal .pd-frost-back .player-card-relationship strong { color: #f3f8ff; }
#modal .pd-frost-back .player-card-relationship small { color: #c6d7e9; }
#modal .pd-frost-back .player-card-contact-link { color: #91dbff; }
#modal .pd-frost-back .player-card-relationship button {
  color: #f3f8ff;
  background: #0d2942;
  border-color: #79a9cb;
}
#modal .player-card-stats { color: var(--text-strong); background: #1a344b; border-color: var(--line); }
#modal .game-plan-ai-table th { color: #c6d6e7; background: #102136; }
#modal .game-plan-ai-table td { border-color: var(--line); }
#modal .game-plan-ai-note td { color: #f2d39b; background: rgba(93, 60, 13, .34); }
#modal .schedule-ai-files li, #modal .game-plan-ai-table-wrap { border-color: var(--line); }

#app .print-preview-viewport {
  background: rgba(5, 14, 27, .69);
  border-color: var(--line);
  box-shadow: inset 0 2px 24px rgba(0, 0, 0, .26);
}
#app .print-center-actions > span { color: var(--muted); }
#activity, #toast { color: var(--text-strong); background: #152a3e; border: 1px solid var(--line); box-shadow: 0 16px 38px rgba(0, 0, 0, .35); }

#app .login { color: var(--text-strong); background: #071321; }
#app .login-form { background: linear-gradient(140deg, rgba(18, 36, 54, .95), #071321); }
#app .login-form p, #app .login-foot { color: var(--muted); }

/* All-teams pack motion stays inside each card's fixed frame. */
#app .team-collectible,
#app .team-collectible:hover {
  background: transparent;
  border: none;
}
#app .team-collectible:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--team-color) 55%, white);
  outline-offset: 3px;
}
#app .team-pack,
#app .team-pack-backs,
#app .team-pack-halo,
#app .team-pack-category,
#app .team-card-name {
  transition-duration: .6s;
  transition-timing-function: cubic-bezier(.2, .7, .2, 1);
}
#app .team-pack { transition-property: transform, filter; }
#app .team-pack-backs { transition-property: opacity, transform; }
#app .team-pack-halo { transition-property: opacity; }
#app .team-pack-category, #app .team-card-name { transition-property: opacity, transform; }
#app .team-collectible:is(:hover, :focus-visible) .team-pack,
#app .team-collectible:is(:hover, :focus-visible) .team-pack-backs,
#app .team-collectible:is(:hover, :focus-visible) .team-pack-halo,
#app .team-collectible:is(:hover, :focus-visible) .team-pack-category,
#app .team-collectible:is(:hover, :focus-visible) .team-card-name { transition-duration: .3s; }
#app .team-collectible:is(:hover, :focus-visible) .team-pack {
  transform: translate(-50%, -53%) rotate(0) scale(1.2);
  filter: drop-shadow(0 18px 20px #020b18cc);
}
#app .team-collectible:is(:hover, :focus-visible) .team-pack-backs { opacity: 0; transform: translateY(10px) scale(.94); }
#app .team-collectible:is(:hover, :focus-visible) .team-pack-halo { opacity: .9; }
#app .team-collectible:is(:hover, :focus-visible) .team-pack-category { opacity: 0; transform: translateY(-14px); }
#app .team-collectible:is(:hover, :focus-visible) .team-card-name { transform: translateY(-8px); }

@media (prefers-reduced-motion: reduce) {
  #app .team-pack, #app .team-pack-backs, #app .team-pack-halo,
  #app .team-pack-category, #app .team-card-name { transition: none; }
  #app .team-collectible:is(:hover, :focus-visible) .team-pack { transform: translate(-50%, -49%) rotate(0); }
  #app .team-collectible:is(:hover, :focus-visible) .team-pack-backs { transform: none; }
  #app .team-collectible:is(:hover, :focus-visible) .team-pack-category { transform: none; }
  #app .team-collectible:is(:hover, :focus-visible) .team-card-name { transform: none; }
}

@media (max-width: 760px) {
  #app .content { padding: 23px 16px; }
  #app .content h1 { font-size: 25px; }
  #app .topbar { background: rgba(4, 13, 26, .92); }
  #app .sidebar { background: rgba(3, 11, 22, .98); }
  #app .page-head .header-actions { max-width: 100%; }
  #app .page-head .header-actions button.primary { width: 100%; }
}
/* Screen guidance only; printed documents keep their existing styling. */
@media screen {
  .stats-help { position: relative; margin-left: auto; font-size: 12px; }
  .stats-help summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: #dbe7f6; padding: 6px; border-radius: 5px; }
  .stats-help summary::-webkit-details-marker { display: none; }
  .stats-help summary > span:first-child { font-size: 20px; line-height: 1; }
  .stats-help-copy { position: absolute; z-index: 6; right: 0; top: calc(100% + 8px); width: min(440px, calc(100vw - 56px)); padding: 16px; background: #101d2c; border: 1px solid #647991; box-shadow: 0 12px 32px #0008; color: #e8eff9; }
  .stats-help-copy p { margin-top: 10px; font-size: 13px; line-height: 1.55; }
  .print-readiness { margin: 0 0 16px; border: 1px solid var(--line); background: #0c1825db; color: #e8eff9; padding: 12px 16px; }
  .print-readiness summary { display: flex; gap: 10px; align-items: center; cursor: pointer; flex-wrap: wrap; }
  .print-readiness summary span { margin-left: auto; font-size: 12px; color: #adc0d8; }
  .print-readiness summary .icon { color: #54d6b5; }
  .print-readiness.needs-review summary .icon { color: #e5b73b; }
  .print-readiness > div { margin-top: 14px; font-size: 13px; }
  .print-readiness > div > button { margin-top: 12px; }
  .stats-help summary:focus-visible, .print-readiness summary:focus-visible { outline: 2px solid #a5c9ff; outline-offset: 4px; }
}
.production .login #demo,
.production .login .login-foot,
.production .login .divider {
  display: none;
}