:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --ink: #eef6ff;
  --muted: #8da3bb;
  --navy-950: #06101f;
  --navy-900: #081426;
  --navy-850: #0c1b2f;
  --navy-800: #10233b;
  --navy-700: #17324f;
  --teal: #21c6ae;
  --teal-soft: #123e42;
  --gold: #f5c24b;
  --red: #ff6677;
  --line: rgba(160, 190, 220, 0.14);
  --panel-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--navy-950); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% -10%, rgba(27, 110, 132, 0.28), transparent 32rem),
    radial-gradient(circle at 85% 0%, rgba(31, 72, 126, 0.25), transparent 34rem),
    var(--navy-950);
}

button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  min-height: 76px;
  padding: 12px clamp(16px, 2vw, 32px);
  border-bottom: 1px solid var(--line);
  background: rgba(6, 16, 31, 0.94);
  backdrop-filter: blur(18px);
}

.brand-kicker, .eyebrow {
  display: block;
  color: var(--teal);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.brand-block h1 {
  margin: 2px 0 0;
  font-size: clamp(18px, 1.7vw, 26px);
  line-height: 1;
  letter-spacing: -0.035em;
}

.brand-block h1 span { color: #91a7bd; font-weight: 500; }

.source-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 270px;
  padding: 9px 12px;
  border: 1px solid rgba(33, 198, 174, 0.2);
  border-radius: 10px;
  background: rgba(18, 62, 66, 0.35);
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(33, 198, 174, 0.12);
}

.source-status span:last-child { display: flex; flex-direction: column; gap: 2px; }
.source-status strong { font-size: 11px; }
.source-status small { color: var(--muted); font-size: 9px; }

.top-actions { display: flex; align-items: center; gap: 7px; }
.refresh-action { display: inline-flex; align-items: center; gap: 5px; }
.refresh-label-short { display: none; }
.refresh-info-control .refresh-popover { right: 0; left: auto; width: min(310px, 80vw); }

.topbar.focus-topbar {
  position: static;
  grid-template-columns: auto 1fr;
  min-height: 44px;
  gap: 12px;
  padding: 5px 10px;
}
.focus-topbar .brand-kicker,
.focus-topbar .source-status,
.focus-topbar .brand-block h1 span { display: none; }
.focus-topbar .brand-block h1 { margin: 0; font-size: 15px; }
.focus-topbar .top-actions { justify-content: flex-end; }
.focus-topbar .ghost-button,
.focus-topbar .primary-button { min-height: 30px; padding-inline: 9px; font-size: 9px; }
.focus-topbar .refresh-label-long { display: none; }
.focus-topbar .refresh-label-short { display: inline; }

.ghost-button, .primary-button, .text-button, .icon-button {
  border: 0;
  cursor: pointer;
}

.ghost-button, .primary-button {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 750;
}

.ghost-button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
}

.ghost-button:hover { border-color: rgba(33, 198, 174, 0.45); background: rgba(33, 198, 174, 0.06); }
.primary-button { background: var(--teal); color: #031816; box-shadow: 0 7px 18px rgba(33, 198, 174, 0.18); }
.primary-button:hover { background: #38d9c0; }
.primary-button:disabled, button:disabled { cursor: not-allowed; opacity: 0.45; }
.count-pill { margin-left: 5px; padding: 1px 5px; border-radius: 10px; background: var(--navy-700); color: var(--teal); }

main { padding: 16px clamp(12px, 1.4vw, 24px) 28px; }

main.is-board-focus { padding: 7px 8px 8px; }

.entry-deck {
  display: grid;
  grid-template-columns: 255px minmax(390px, 1fr) 310px;
  gap: 10px;
  max-width: 1900px;
  margin: 0 auto 10px;
}

.is-board-focus .entry-deck { grid-template-columns: 180px minmax(350px, 1fr) 220px; gap: 7px; margin-bottom: 7px; }
.is-board-focus .on-clock-card { min-height: 68px; padding: 7px 10px; }
.is-board-focus .on-clock-card .eyebrow { font-size: 8px; }
.is-board-focus .pick-number { font-size: 28px; }
.is-board-focus .pick-meta strong { font-size: 11px; }
.is-board-focus .pick-meta span { font-size: 9px; }
.is-board-focus .entry-card { padding: 7px 10px; }
.is-board-focus .entry-heading { margin-bottom: 5px; }
.is-board-focus .entry-heading .eyebrow,
.is-board-focus .entry-help { display: none; }
.is-board-focus .entry-heading h2 { font-size: 11px; }
.is-board-focus .search-shell input { height: 36px; }
.is-board-focus .search-icon { top: 5px; }
.is-board-focus .enter-hint { top: 10px; }
.is-board-focus .quick-actions { min-height: 68px; }
.is-board-focus .action-tile { padding: 6px 9px; }
.is-board-focus .action-tile > span { font-size: 17px; }
.is-board-focus .action-tile small { display: none; }
.is-board-focus .action-tile strong { font-size: 9px; }

.on-clock-card, .entry-card, .quick-actions, .panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(16, 35, 59, 0.96), rgba(8, 20, 38, 0.98));
  box-shadow: var(--panel-shadow);
}

.on-clock-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 15px;
  min-height: 118px;
  padding: 16px;
  border-color: rgba(245, 194, 75, 0.36);
  background:
    linear-gradient(120deg, rgba(245, 194, 75, 0.12), transparent 56%),
    var(--navy-850);
}

.on-clock-card .eyebrow { grid-column: 1 / -1; color: var(--gold); }
.on-clock-card.complete .eyebrow { color: var(--teal); }
.pick-number { font-size: 39px; font-weight: 850; line-height: 1; color: var(--gold); letter-spacing: -0.06em; }
.complete .pick-number { color: var(--teal); }
.pick-meta { display: flex; flex-direction: column; gap: 4px; }
.pick-meta strong { font-size: 14px; }
.pick-meta span { color: var(--muted); font-size: 11px; }

.entry-card { position: relative; padding: 14px 17px; overflow: visible; z-index: 8; }
.entry-heading { display: flex; justify-content: space-between; gap: 12px; align-items: flex-end; margin-bottom: 9px; }
.entry-heading h2, .panel-heading h2, .modal-heading h2 {
  margin: 2px 0 0;
  font-size: 15px;
  letter-spacing: -0.02em;
}

.text-button { padding: 3px; color: var(--red); background: transparent; font-size: 10px; font-weight: 800; }
.search-shell { position: relative; }
.search-icon { position: absolute; left: 13px; top: 8px; z-index: 2; color: var(--gold); font-size: 25px; line-height: 1; transform: rotate(-20deg); }
.search-shell input {
  width: 100%;
  height: 44px;
  padding: 0 82px 0 43px;
  border: 1px solid rgba(245, 194, 75, 0.42);
  border-radius: 8px;
  color: var(--ink);
  background: #0a1829;
}
.search-shell input::placeholder { color: #71879d; }
.search-shell input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245, 194, 75, 0.1); }
.enter-hint { position: absolute; right: 10px; top: 13px; color: #7e8da0; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; }
.entry-help { margin: 7px 0 0; color: var(--muted); font-size: 9px; }

.suggestions {
  display: none;
  position: absolute;
  z-index: 60;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  max-height: 380px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid rgba(245, 194, 75, 0.3);
  border-radius: 9px;
  background: #081426;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}
.suggestions.open { display: block; }
.suggestion { display: block; width: 100%; padding: 8px; border: 0; border-radius: 6px; text-align: left; background: transparent; cursor: pointer; }
.suggestion:hover, .suggestion.selected { background: rgba(33, 198, 174, 0.1); }
.no-results { padding: 14px; color: var(--muted); font-size: 11px; }

.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 5px; }
.action-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 12px; border: 0; border-radius: 8px; text-align: left; background: transparent; cursor: pointer; }
.action-tile:hover:not(:disabled) { background: rgba(33, 198, 174, 0.07); }
.action-tile > span { color: var(--teal); font-size: 24px; line-height: 1; }
.action-tile strong { font-size: 11px; }
.action-tile small { color: var(--muted); font-size: 9px; }
.danger-tile > span { color: var(--red); }

.command-layout {
  display: grid;
  grid-template-columns: minmax(238px, 0.65fr) minmax(600px, 2.25fr) minmax(305px, 0.88fr);
  align-items: start;
  gap: 10px;
  max-width: 1900px;
  margin: 0 auto;
}
.left-rail { display: grid; gap: 10px; min-width: 0; }
.command-layout.board-focus {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1900px;
}
.command-layout.board-focus > .left-rail,
.command-layout.board-focus > .available-panel { display: none; }
.panel { min-width: 0; overflow: hidden; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; padding: 11px 13px; border-bottom: 1px solid var(--line); background: rgba(5, 14, 28, 0.42); }
.panel-count { padding: 4px 8px; border-radius: 20px; color: var(--teal); background: rgba(33, 198, 174, 0.1); font-size: 10px; font-weight: 800; }
.warning-count { color: var(--gold); background: rgba(245, 194, 75, 0.1); }
.compact-heading { min-height: 48px; }

.compact-list { max-height: 306px; overflow-y: auto; padding: 5px; }
.compact-player { display: grid; grid-template-columns: 29px 1fr; align-items: center; width: 100%; gap: 7px; padding: 7px 6px; border: 0; border-bottom: 1px solid rgba(160, 190, 220, 0.08); border-radius: 5px; text-align: left; background: transparent; cursor: pointer; }
.compact-player:hover { background: rgba(33, 198, 174, 0.06); }
.round-tag { color: var(--muted); font-size: 9px; font-weight: 800; }
.empty-state { padding: 22px 12px; color: var(--muted); font-size: 11px; text-align: center; }
.lineup-list { max-height: 430px; }
.lineup-slot { display: grid; grid-template-columns: 47px minmax(0, 1fr) 42px; align-items: center; width: 100%; min-height: 38px; gap: 5px; padding: 5px 6px; border: 0; border-bottom: 1px solid rgba(160, 190, 220, 0.08); border-radius: 5px; text-align: left; background: transparent; }
.lineup-slot.is-filled { cursor: pointer; }
.lineup-slot.is-filled:hover { background: rgba(33, 198, 174, 0.06); }
.lineup-slot.is-empty { opacity: 1; }
.lineup-label { color: var(--teal); font-size: 8px; font-weight: 900; letter-spacing: 0.03em; }
.empty-lineup-player { color: #5f7489; font-size: 9px; font-style: italic; }
.draft-location { color: var(--muted); font-size: 7px; font-weight: 800; text-align: right; }

.player-line { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.position-dot { flex: 0 0 auto; display: inline-grid; place-items: center; width: 27px; height: 22px; border-radius: 5px; color: #07111f; font-size: 8px; font-weight: 900; }
.player-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 2px; }
.player-copy strong { overflow: hidden; color: #e7f1fb; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.player-copy small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.player-badges { display: flex; gap: 3px; }
.micro-badge { padding: 2px 4px; border-radius: 4px; font-size: 7px; font-weight: 900; }
.micro-badge.rookie { background: rgba(33, 198, 174, 0.16); color: #6ce6d3; }
.micro-badge.injury { max-width: 66px; overflow: hidden; color: #ffd6dc; background: rgba(255, 102, 119, 0.18); text-overflow: ellipsis; }
.micro-badge.suspension { color: #221701; background: var(--gold); }

.position-qb { background: #f39b98; }
.position-rb { background: #62d2a6; }
.position-wr { background: #75b9ff; }
.position-te { background: #f0c86d; }
.position-k { background: #bb9cf6; }
.position-def { background: #b8c2cc; }
.position-qb-text { color: #ffaaa6 !important; }
.position-rb-text { color: #77e0ba !important; }
.position-wr-text { color: #80c0ff !important; }
.position-te-text { color: #f5d47d !important; }
.position-k-text { color: #c9aef9 !important; }
.position-def-text { color: #c9d0d8 !important; }

.inline-warning { padding: 7px 10px; color: var(--gold); background: rgba(245, 194, 75, 0.08); font-size: 9px; }
.roster-grid { display: grid; grid-template-columns: 1.25fr repeat(3, 0.75fr); min-height: 25px; align-items: center; padding: 0 12px; border-bottom: 1px solid rgba(160, 190, 220, 0.07); font-size: 9px; }
.roster-grid > :not(:first-child) { text-align: center; }
.roster-grid-header { min-height: 23px; color: var(--muted); background: rgba(5, 14, 28, 0.32); font-size: 8px; font-weight: 800; letter-spacing: 0.08em; }
.need-value.has-need { color: var(--gold); font-weight: 850; }

.score-panel { position: relative; overflow: visible; padding-bottom: 9px; }
.score-heading { align-items: center; }
.score-heading-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.score-heading-meta strong { color: var(--muted); font-size: 8px; font-weight: 750; }
.grade-status { padding: 3px 6px; border-radius: 10px; font-size: 7px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.grade-status.is-provisional { color: var(--gold); background: rgba(245, 194, 75, 0.12); }
.grade-status.is-final { color: var(--teal); background: rgba(33, 198, 174, 0.12); }
.score-body { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 12px; padding: 12px 14px 7px; }
.grade-ring { display: grid; place-items: center; align-content: center; width: 72px; height: 72px; border: 5px solid rgba(33, 198, 174, 0.22); border-top-color: var(--teal); border-radius: 50%; }
.grade-ring strong { color: var(--teal); font-size: 20px; line-height: 1; }
.grade-ring span { color: var(--muted); font-size: 9px; }
.score-components { display: grid; gap: 6px; }
.score-components div { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; }
.score-components span { display: flex; flex-direction: column; gap: 1px; }
.score-components .score-component-label { flex-direction: row; align-items: center; gap: 3px; }
.score-components small { color: #587087; font-size: 7px; }
.score-components strong { color: var(--ink); }
.score-panel > p { margin: 2px 14px; color: #70859a; font-size: 8px; line-height: 1.35; }
.info-control { position: relative; display: inline-flex !important; flex: 0 0 auto !important; flex-direction: row !important; vertical-align: middle; }
.info-button { display: inline-grid; width: 16px; height: 16px; place-items: center; padding: 0; border: 1px solid rgba(160, 190, 220, .42); border-radius: 50%; color: #b8ccdc; background: rgba(117, 185, 255, .08); font: 800 10px/1 Georgia, serif; cursor: pointer; }
.info-button:hover, .info-button:focus-visible, .info-button[aria-expanded="true"] { border-color: var(--teal); outline: none; color: #031816; background: var(--teal); }
.grade-popover { position: absolute; z-index: 30; top: calc(100% + 6px); left: -8px; width: min(260px, 72vw); padding: 10px; border: 1px solid rgba(117, 185, 255, .42); border-radius: 8px; color: #b9cad9; background: #10243a; box-shadow: 0 14px 34px rgba(0, 0, 0, .5); font-size: 9px; font-weight: 500; line-height: 1.45; text-align: left; }
.grade-popover[hidden] { display: none !important; }
.grade-popover strong, .grade-popover span { display: block; color: inherit; }
.grade-popover strong { margin-bottom: 4px; color: var(--teal); font-size: 10px; }
.score-components .info-control { margin-left: 3px; }
.score-components .grade-popover { left: -96px; }
.grade-details { margin: 8px 10px 1px; border: 1px solid var(--line); border-radius: 7px; background: rgba(5, 14, 28, .42); }
.grade-details > summary { padding: 8px 9px; color: var(--teal); font-size: 8px; font-weight: 850; cursor: pointer; }
.grade-details[open] { max-height: 380px; overflow-y: auto; }
.grade-detail-section { padding: 9px; border-top: 1px solid var(--line); }
.grade-detail-section h3 { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 5px; font-size: 9px; }
.grade-detail-section h3 strong { color: var(--teal); }
.grade-detail-section h4 { margin: 8px 0 3px; color: #9db2c5; font-size: 8px; }
.grade-detail-section code { display: block; color: #89a3b9; font-size: 7px; line-height: 1.4; white-space: normal; }
.grade-detail-section ul { display: grid; gap: 3px; margin: 6px 0; padding: 0; list-style: none; }
.grade-detail-section li { display: flex; justify-content: space-between; gap: 8px; color: #8ca3b7; font-size: 7px; line-height: 1.35; }
.grade-detail-section li span { min-width: 0; }
.grade-detail-section li strong { flex: 0 0 auto; color: var(--gold); }
.grade-detail-section .no-calculation-items { color: #647a8f; font-style: italic; }
.grade-detail-section p { margin: 5px 0 0; color: #71899d; font-size: 7px; line-height: 1.4; }
.final-calculation { border-bottom: 0; }

.board-panel { min-height: 650px; }
.board-heading { min-height: 59px; }
.board-tools { display: flex; align-items: center; gap: 12px; }
.follow-toggle { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; font-weight: 750; cursor: pointer; }
.follow-toggle input { width: 13px; height: 13px; margin: 0; accent-color: var(--teal); }
.legend { display: flex; gap: 10px; color: var(--muted); font-size: 8px; }
.legend span { display: flex; align-items: center; gap: 4px; }
.legend i { width: 8px; height: 8px; border-radius: 2px; }
.legend-current { background: var(--gold); }
.legend-me { background: var(--teal); }
.focus-button { display: inline-flex; min-height: 31px; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid rgba(33, 198, 174, 0.28); border-radius: 7px; color: #a9c3d6; background: rgba(33, 198, 174, 0.06); font-size: 8px; font-weight: 850; cursor: pointer; }
.focus-button span { color: var(--teal); font-size: 13px; }
.focus-button:hover, .focus-button.active { color: #041817; background: var(--teal); }
.focus-button.active span { color: #041817; }
.board-scroll { max-height: 735px; overflow: auto; scrollbar-color: #274462 #081426; }
.draft-board { display: grid; grid-template-columns: 52px repeat(var(--teams), minmax(132px, 1fr)); align-items: stretch; }
.round-header, .team-header { position: sticky; top: 0; z-index: 4; min-height: 42px; border-bottom: 1px solid #31506e; background: #0b1b2e; }
.round-header { left: 0; z-index: 6; display: grid; place-items: center; color: var(--muted); font-size: 8px; font-weight: 900; }
.team-header { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 8px; border-left: 1px solid var(--line); }
.team-header span { color: var(--muted); font-size: 7px; font-weight: 700; text-transform: uppercase; }
.team-header strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.team-header.is-user { color: var(--teal); box-shadow: inset 2px 0 0 var(--teal), inset -2px 0 0 var(--teal), inset 0 3px 0 var(--teal); background: #102f3a; }
.round-label { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; min-height: 51px; padding: 7px 8px; border-bottom: 1px solid var(--line); background: #091729; }
.round-label strong { font-size: 12px; }
.round-label span { color: var(--muted); }
.board-cell { display: flex; min-width: 0; min-height: 51px; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 7px; overflow: hidden; border: 0; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); text-align: left; background: rgba(255, 255, 255, 0.012); }
.board-cell.is-user { border-left-color: rgba(33, 198, 174, 0.7); background: linear-gradient(90deg, rgba(33, 198, 174, 0.12), rgba(33, 198, 174, 0.035)); box-shadow: inset -1px 0 0 rgba(33, 198, 174, 0.5); }
.board-cell.is-filled { cursor: pointer; }
.board-cell.is-filled:hover { background: rgba(33, 198, 174, 0.1); }
.board-cell.is-current { position: relative; z-index: 1; background: linear-gradient(135deg, rgba(245, 194, 75, 0.28), rgba(245, 194, 75, 0.1)); box-shadow: inset 0 0 0 2px var(--gold), 0 0 18px rgba(245, 194, 75, 0.18); }
.board-cell.is-current::after { content: "ON CLOCK"; position: absolute; top: 4px; right: 4px; color: var(--gold); font-size: 6px; font-weight: 900; letter-spacing: 0.08em; }
.board-cell.is-correction { background: rgba(255, 102, 119, 0.13); box-shadow: inset 0 0 0 2px var(--red); }
.cell-pick { color: #63798e; font-size: 7px; font-weight: 750; }
.board-cell strong { overflow: hidden; max-width: 100%; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.board-cell small { overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.empty-pick { color: #253a50; font-size: 12px; }

.command-layout.board-focus .board-panel { min-height: 0; }
.command-layout.board-focus .board-scroll {
  height: calc(100vh - 179px);
  min-height: 390px;
  max-height: calc(100vh - 179px);
}
.command-layout.board-focus .draft-board { grid-template-columns: 46px repeat(var(--teams), minmax(0, 1fr)); }
.command-layout.board-focus .draft-board.large-league { grid-template-columns: 46px repeat(var(--teams), minmax(102px, 1fr)); }
.command-layout.board-focus .round-header,
.command-layout.board-focus .team-header { min-height: 38px; }
.command-layout.board-focus .round-label,
.command-layout.board-focus .board-cell { min-height: 46px; }
.command-layout.board-focus .board-cell { padding: 5px 6px; }
.command-layout.board-focus .board-cell strong { font-size: 9px; }
.command-layout.board-focus .board-cell small { font-size: 7px; }
.is-board-focus .pick-log-panel,
.is-board-focus footer { display: none; }

.available-panel { min-height: 650px; }
.available-heading { align-items: flex-end; }
.available-controls { display: flex; align-items: center; gap: 7px; }
.ranking-sort button:disabled { opacity: .45; cursor: not-allowed; }
.ranking-source-status { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; padding: 7px 10px; border-bottom: 1px solid var(--line); color: var(--muted); background: rgba(117, 185, 255, .035); font-size: 7px; line-height: 1.35; }
.ranking-source-status span { min-width: 0; }
.ranking-source-status strong { color: #b8cbdb; }
.ranking-source-status em { grid-column: 1 / -1; color: var(--gold); font-style: normal; font-weight: 750; }
.ranking-source-status .text-button { padding: 0; font-size: 7px; white-space: nowrap; }
.platform-rank-label { flex: 0 0 auto; color: var(--gold); font-size: 7px; white-space: nowrap; }
.available-filter-toggle { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; font-weight: 750; cursor: pointer; white-space: nowrap; }
.available-filter-toggle input { width: 13px; height: 13px; margin: 0; accent-color: var(--teal); }
.available-filter-status { padding: 6px 10px; border-bottom: 1px solid var(--line); color: var(--gold); background: rgba(245, 194, 75, .055); font-size: 7px; font-weight: 750; }
.segmented-control { display: flex; padding: 2px; border-radius: 6px; background: #071426; }
.segmented-control button { padding: 6px 7px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; font-size: 8px; font-weight: 800; cursor: pointer; }
.segmented-control button.active { color: #041817; background: var(--teal); }
.conflict-key { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 7px; }
.conflict-key span { width: 7px; height: 7px; border-radius: 2px; background: var(--red); }
.available-list { max-height: 698px; overflow-y: auto; padding: 4px; }
.available-player { display: grid; grid-template-columns: 24px 1fr; align-items: center; width: 100%; gap: 5px; padding: 6px 4px; border: 0; border-bottom: 1px solid rgba(160, 190, 220, 0.07); border-radius: 5px; text-align: left; background: transparent; cursor: pointer; }
.available-player:hover { background: rgba(33, 198, 174, 0.07); }
.available-player.bye-conflict { background: linear-gradient(90deg, rgba(255, 102, 119, 0.18), transparent); box-shadow: inset 2px 0 0 var(--red); }
.available-rank { color: #647a8f; font-size: 8px; text-align: center; }
.position-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; max-height: 698px; overflow-y: auto; padding: 5px; }
.position-column { min-width: 0; padding: 4px; border-radius: 6px; background: rgba(3, 11, 22, 0.25); }
.position-column h3 { display: flex; align-items: center; gap: 6px; margin: 2px 2px 6px; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em; }
.position-column .position-dot { width: 25px; }

.pick-log-panel { max-width: 1900px; margin: 10px auto 0; }
.table-scroll { max-height: 335px; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 9px; }
thead { position: sticky; top: 0; z-index: 2; }
th { padding: 8px 9px; border-bottom: 1px solid #31506e; color: #9cb1c5; text-align: left; background: #0a192b; font-size: 7px; letter-spacing: 0.07em; text-transform: uppercase; }
td { padding: 7px 9px; border-bottom: 1px solid rgba(160, 190, 220, 0.07); color: #b7c7d7; white-space: nowrap; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: rgba(33, 198, 174, 0.045); }
.owner-me { color: var(--teal); font-weight: 850; }
.positive-gap { color: #74dfba; }
.negative-gap { color: #ff9ba6; }
.empty-table { padding: 28px; color: var(--muted); text-align: center; }
.bye-chip { display: inline-grid; min-width: 25px; place-items: center; padding: 2px 4px; border-radius: 4px; color: #07111f; font-size: 8px; font-weight: 900; }
.bye-5 { background: #f5ca6c; }.bye-6 { background: #9bc7e7; }.bye-7 { background: #a996e9; }.bye-8 { background: #75d6bd; }.bye-9 { background: #ef9892; }.bye-10 { background: #f3ad61; }.bye-11 { background: #c995ed; }.bye-13 { background: #e78db7; }.bye-14 { background: #a8b7c2; }.bye-none { background: #5d7184; color: #e9f2f9; }

footer { display: flex; justify-content: space-between; gap: 20px; max-width: 1900px; margin: 12px auto 0; color: #536b80; font-size: 8px; }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(2, 8, 17, 0.78); backdrop-filter: blur(6px); }
.modal { width: min(640px, 96vw); max-height: 90vh; overflow-y: auto; padding: 20px; border: 1px solid rgba(160, 190, 220, 0.22); border-radius: 14px; background: #0b1a2d; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55); }
.settings-modal { width: min(840px, 96vw); }
.refresh-modal { width: min(980px, 96vw); }
.ranking-import-modal { width: min(820px, 96vw); }
.ranking-import-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 14px 0; }
.ranking-import-meta > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding: 9px; border: 1px solid var(--line); border-radius: 7px; }
.ranking-import-meta span { color: var(--muted); font-size: 8px; }
.ranking-import-meta strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; }
.import-validation-errors, .import-validation-warnings { margin: 10px 0; padding: 10px; border-left: 3px solid var(--red); border-radius: 6px; color: #ffcbd1; background: rgba(255, 102, 119, .08); font-size: 9px; }
.import-validation-warnings { border-left-color: var(--gold); color: #f8db91; background: rgba(245, 194, 75, .07); }
.import-validation-errors ul, .import-validation-warnings ul { margin: 6px 0 0; padding-left: 16px; }
.ranking-preview-table { max-height: 260px; border: 1px solid var(--line); border-radius: 7px; }
.modal-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 17px; }
.modal-heading h2 { font-size: 21px; }
.icon-button { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 7px; color: var(--muted); background: rgba(255,255,255,.04); font-size: 21px; }
.modal-lead { color: #aabccd; font-size: 11px; line-height: 1.55; }
.settings-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.settings-grid label, .team-name-grid label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 700; }
input, select { border: 1px solid rgba(160, 190, 220, 0.2); border-radius: 7px; color: var(--ink); background: #071526; }
.settings-grid input, .settings-grid select, .team-name-grid input { height: 36px; padding: 0 9px; }
.settings-section-heading { display: flex; justify-content: space-between; margin: 22px 0 9px; padding-top: 17px; border-top: 1px solid var(--line); }
.settings-section-heading h3 { margin: 0; font-size: 13px; }
.settings-section-heading p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.roster-inputs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; }
.roster-inputs label { display: flex; min-width: 0; flex-direction: column; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 800; }
.roster-inputs input { width: 100%; height: 34px; padding: 0 7px; text-align: center; }
.team-name-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.inactive-team { opacity: 0.45; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--line); }
.diff-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 18px 0; }
.diff-grid div { display: flex; min-width: 0; min-height: 78px; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); text-align: center; }
.diff-grid strong { color: var(--teal); font-size: 21px; }
.diff-grid span { color: var(--muted); font-size: 8px; }
.refresh-safety { padding: 13px; border-left: 3px solid var(--teal); border-radius: 7px; background: rgba(33, 198, 174, 0.07); }
.refresh-safety strong { font-size: 11px; }
.refresh-safety p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.change-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 10px; }
.change-preview > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; padding: 9px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.018); }
.change-preview strong { margin-bottom: 2px; color: var(--teal); font-size: 9px; }
.change-preview span, .change-preview em { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.adp-change-details { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.018); }
.adp-change-details summary { cursor: pointer; padding: 10px; color: var(--teal); font-size: 9px; font-weight: 800; }
.adp-change-details > p { padding: 0 10px 10px; color: var(--muted); font-size: 8px; }
.adp-change-row { display: grid; gap: 3px; padding: 8px 10px; border-top: 1px solid var(--line); }
.adp-change-row strong { font-size: 9px; }
.adp-change-row span, .adp-change-row small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.source-results { margin-top: 13px; }
.league-dataset-results { margin-top: 13px; }
.league-dataset-results h3 { margin: 0 0 7px; font-size: 11px; }
.league-dataset-results > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.league-dataset-results strong { font-size: 9px; }
.league-dataset-results span { color: var(--muted); font-size: 8px; text-align: right; }
.source-results h3 { margin: 0 0 7px; font-size: 11px; }
.source-result { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 6px; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.source-result > span { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; font-size: 8px; font-weight: 900; }
.source-result.is-success > span { color: #031816; background: var(--teal); }
.source-result.is-failure > span { color: #2a080d; background: var(--red); }
.source-result.is-quarantined > span { color: #2a1702; background: var(--gold); }
.source-result.is-cached > span { color: #08111b; background: #8ea3b5; }
.source-result div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.source-result strong { font-size: 9px; }
.source-result small { color: var(--muted); font-size: 8px; }
.source-result em { color: #ff9ba6; font-size: 8px; line-height: 1.35; }
.manual-override-note { display: flex; flex-direction: column; gap: 4px; margin-top: 11px; padding: 10px; border-left: 3px solid var(--gold); border-radius: 7px; background: rgba(245, 194, 75, .06); }
.manual-override-note strong { color: var(--gold); font-size: 9px; }
.manual-override-note span { color: var(--muted); font-size: 8px; line-height: 1.5; }
.manual-override-note code { color: #dce9f6; }
.source-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; margin-top: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 9px; }
.source-detail span { color: var(--muted); }
.source-detail strong { text-align: right; }
.full-button { width: 100%; margin: 10px 0 14px; }
.archive-list { display: grid; gap: 6px; }
.archive-list > button { display: flex; justify-content: space-between; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 8px; text-align: left; background: rgba(255,255,255,.02); cursor: pointer; }
.archive-list > button:hover { border-color: rgba(33, 198, 174, 0.4); }
.archive-list > button span:first-child { display: flex; flex-direction: column; gap: 3px; }
.archive-list small { color: var(--muted); font-size: 8px; }
.archive-summary { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.archive-summary strong { color: var(--teal); font-size: 28px; }
.archive-summary span { color: var(--muted); font-size: 9px; }
.archive-detail-modal { width: min(1500px, 98vw); }
.archive-detail-modal .modal-heading small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.archive-view-tabs { width: max-content; margin: 0 0 10px; }
.archive-lineup { margin-bottom: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.018); }
.archive-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.archive-section-heading strong { color: var(--teal); font-size: 10px; }
.archive-lineup-slots { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: 5px; overflow-x: auto; }
.archive-lineup-slot { display: grid; min-width: 110px; gap: 3px; padding: 7px; border-radius: 6px; background: rgba(5,14,28,.52); }
.archive-lineup-slot > span, .archive-lineup-slot small { color: var(--muted); font-size: 7px; }
.archive-lineup-slot strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.archive-lineup-slot.is-empty strong { color: #536b80; font-weight: 650; }
.archive-board-scroll { max-height: 58vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.archive-draft-board { display: grid; grid-template-columns: 46px repeat(var(--teams), minmax(90px, 1fr)); }
.archive-board-cell { min-height: 46px; padding: 5px 6px; cursor: default !important; }
.archive-board-cell:hover { background: rgba(255,255,255,.012) !important; }
.archive-board-cell.is-user { background: linear-gradient(90deg, rgba(33, 198, 174, 0.12), rgba(33, 198, 174, 0.035)) !important; }
.archive-picks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; max-height: 52vh; overflow-y: auto; }
.archive-picks div { display: grid; grid-template-columns: 38px 1fr; padding: 8px; border-radius: 6px; background: rgba(255,255,255,.025); }
.archive-picks div > span { grid-row: 1 / 3; color: var(--muted); font-size: 9px; }
.archive-picks strong { font-size: 9px; }
.archive-picks small { color: var(--muted); font-size: 8px; }

#toast-root { position: fixed; z-index: 200; right: 20px; bottom: 20px; }
.toast { max-width: 380px; padding: 11px 14px; border: 1px solid rgba(33, 198, 174, .32); border-radius: 9px; color: #dffcf7; background: #113d3d; box-shadow: 0 15px 40px rgba(0,0,0,.4); font-size: 11px; }
.toast-error { border-color: rgba(255,102,119,.38); color: #ffe1e5; background: #47222b; }
.toast-info { border-color: rgba(117,185,255,.36); color: #e2f1ff; background: #173455; }

.fatal-error { max-width: 620px; margin: 16vh auto; padding: 30px; border: 1px solid var(--line); border-radius: 14px; background: var(--navy-850); }
.fatal-error h1 { font-size: 26px; }
.fatal-error p { color: var(--muted); line-height: 1.5; }

@media (max-width: 1450px) {
  .topbar { grid-template-columns: minmax(250px, 1fr) minmax(240px, auto) auto; gap: 12px; }
  .source-status { min-width: 240px; }
  .refresh-label-long { display: none; }
  .refresh-label-short { display: inline; }
  .command-layout { grid-template-columns: 230px minmax(610px, 1fr) 300px; }
  .entry-deck { grid-template-columns: 230px 1fr 285px; }
}

@media (max-width: 1160px) {
  .topbar { position: static; grid-template-columns: 1fr; gap: 10px; }
  .source-status { width: min(100%, 520px); }
  .top-actions { flex-wrap: wrap; }
  .entry-deck { grid-template-columns: 220px 1fr; }
  .quick-actions { grid-column: 1 / -1; min-height: 84px; }
  .command-layout { grid-template-columns: 230px minmax(660px, 1fr); }
  .available-panel { grid-column: 1 / -1; min-height: 0; }
  .available-list { max-height: 360px; }
  .position-columns { grid-template-columns: repeat(4, 1fr); max-height: 430px; }
}

@media (max-width: 760px) {
  main { padding: 10px; }
  .entry-deck, .command-layout { display: flex; flex-direction: column; }
  .on-clock-card, .entry-card, .quick-actions, .left-rail, .board-panel, .available-panel { width: 100%; }
  .left-rail { order: 2; }
  .board-panel { order: 1; }
  .available-panel { order: 3; }
  .settings-grid, .team-name-grid { grid-template-columns: 1fr 1fr; }
  .roster-inputs { grid-template-columns: repeat(4, 1fr); }
  .diff-grid { grid-template-columns: repeat(2, 1fr); }
  .archive-picks { grid-template-columns: 1fr; }
  footer { flex-direction: column; gap: 4px; }
}

@media print {
  body { color: #111; background: white; }
  .topbar, .entry-deck, .left-rail, .available-panel, footer { display: none; }
  main { padding: 0; }
  .command-layout { display: block; }
  .panel { border: 1px solid #bbb; box-shadow: none; background: white; }
  .board-scroll { max-height: none; overflow: visible; }
  .draft-board { min-width: 0 !important; }
  .team-header, .round-header, .round-label { position: static; color: #111; background: #eee; }
  .board-cell { color: #111; background: white; }
  .pick-log-panel { break-before: page; }
}