:root {
  --bg: #0a0f16;
  --panel: #111923;
  --panel-2: #172230;
  --line: #303b4a;
  --text: #f2f4f5;
  --muted: #929daa;
  --cyan: #5bd8e8;
  --cyan-dark: #173944;
  --orange: #ff9a58;
  --red: #ff746f;
  --blue: #5bd8e8;
}

body {
  background-color: var(--bg);
  background-image: radial-gradient(ellipse at 18% 0%, rgba(40, 91, 107, .13), transparent 38%),
    linear-gradient(115deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: auto, 7px 7px;
}

.site-shell { width: min(1220px, calc(100% - 56px)); }
.topbar { height: 82px; border-bottom-color: #27313e; }
.brand { gap: 12px; }
.brand-mark {
  position: relative;
  width: 38px;
  height: 38px;
  clip-path: polygon(0 0, 76% 0, 100% 22%, 100% 100%, 16% 100%, 0 82%);
  transform: none;
  background: var(--cyan);
  color: #0a1119;
  font-size: 25px;
  line-height: 1;
}
.brand-mark::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 4px;
  height: 12px;
  background: var(--orange);
  transform: skew(-19deg);
}
.brand-copy { letter-spacing: .08em; }
.brand-copy strong { font-size: 20px; letter-spacing: .13em; }
.brand-copy small { color: #a2b0be; font-size: 8px; letter-spacing: .34em; }
.top-nav { gap: 28px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.top-nav a { position: relative; padding: 9px 0; }
.top-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--cyan); transition: right .18s ease; }
.top-nav a:hover::after { right: 0; }
.season-pill { border-radius: 3px; border-color: #354253; color: #c4ccd3; font-size: 9px; letter-spacing: .15em; }
.live-dot { background: var(--orange); box-shadow: none; }

.hero {
  min-height: 448px;
  grid-template-columns: .92fr 1.08fr;
  gap: 28px;
  padding: 48px 0 43px;
}
.hero .eyebrow { color: #aeb9c4; font-size: 9px; letter-spacing: .18em; }
.hero .eyebrow span { color: var(--orange); }
.hero h1 {
  font-size: clamp(58px, 6.7vw, 84px);
  line-height: .91;
  letter-spacing: -.005em;
  margin-bottom: 19px;
}
.hero h1 em { color: var(--cyan); }
.hero-text { max-width: 445px; color: #aeb8c2; font-size: 13px; line-height: 1.8; }
.button { border-radius: 4px; }
.button-primary { background: var(--cyan); box-shadow: none; }
.button-primary:hover { background: #8be5ee; }
.hero-cta { min-height: 44px; padding: 11px 15px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

.hero-art { height: 326px; transform: none; overflow: visible; }
.hero-art::before {
  content: "";
  position: absolute;
  inset: 18px 7px 9px 7px;
  border: 1px solid #364352;
  background: repeating-linear-gradient(135deg, transparent 0 13px, rgba(255,255,255,.018) 13px 14px);
  clip-path: polygon(0 0, 96% 0, 100% 9%, 100% 100%, 5% 100%, 0 91%);
}
.hero-grid, .orbit, .hero-ball, .hero-tag, .hero-stat { display: none; }
.hero-art::after { content: none; }
.arena-frame {
  position: absolute;
  inset: 0 12px 0 12px;
  padding: 14px 17px 12px;
  border: 1px solid #536171;
  background: #101823;
  clip-path: polygon(0 0, 97% 0, 100% 8%, 100% 100%, 3% 100%, 0 92%);
  box-shadow: 0 17px 38px rgba(0,0,0,.22);
}
.arena-topline, .arena-bottomline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #8693a1;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .17em;
}
.arena-topline { height: 20px; padding: 0 7px; border-bottom: 1px solid #303b49; }
.arena-topline span:first-child { display: flex; align-items: center; gap: 8px; color: #d1d8de; }
.arena-topline i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.arena-display { position: relative; height: 247px; overflow: hidden; }
.arena-pitch { position: absolute; width: 95%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.arena-side { position: absolute; z-index: 1; top: 18px; display: flex; flex-direction: column; gap: 0; line-height: 1; }
.arena-side span { font-size: 7px; font-weight: 700; letter-spacing: .15em; writing-mode: vertical-rl; }
.arena-side b { font: 800 29px/.9 var(--display); }
.arena-side-blue { left: 8px; color: var(--cyan); align-items: flex-start; }
.arena-side-blue span { order: 2; margin-top: 5px; }
.arena-side-orange { right: 7px; color: var(--orange); align-items: flex-end; }
.arena-side-orange span { order: 2; margin-top: 5px; }
.kickoff-stamp {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 13px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 7px 9px 6px;
  border-right: 2px solid var(--orange);
  background: rgba(9,15,22,.9);
  line-height: 1.1;
}
.kickoff-stamp small, .kickoff-stamp span { color: #8794a2; font-size: 7px; font-weight: 700; letter-spacing: .16em; }
.kickoff-stamp strong { margin: 3px 0; font: 700 25px/.85 var(--display); color: #f2f4f5; }
.kickoff-stamp strong i { color: var(--orange); font-style: normal; font-size: 14px; padding: 0 2px; }
.arena-bottomline { height: 23px; padding: 0 8px; border-top: 1px solid #303b49; font-size: 7px; }
.arena-bottomline span:last-child { display: flex; gap: 6px; align-items: center; color: #bdc6ce; }
.side-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-left: 6px; }
.blue-dot { background: var(--cyan); }
.orange-dot { background: var(--orange); }

.quick-steps {
  gap: 24px;
  padding: 18px 10px;
  margin-bottom: 66px;
  border: 0;
  border-top: 1px solid #2c3745;
  border-bottom: 1px solid #2c3745;
  background: transparent;
  border-radius: 0;
}
.quick-steps>div:not(.step-line) { gap: 13px; }
.step-number { color: var(--orange); font-size: 22px; }
.quick-steps strong { font-size: 11px; letter-spacing: .01em; }
.quick-steps small { color: #8d9aa7; font-size: 9px; }
.step-line { background: #384454; }

.section-heading h2 { font-size: 44px; letter-spacing: .005em; }
.section-heading .eyebrow { color: #a3afbb; }
.section-heading .eyebrow span { color: var(--orange); }
.saved-indicator { color: #9aa7b3; font-size: 10px; }
.saved-check { color: var(--cyan); background: #17343b; }
.workspace-grid { gap: 13px; }
.panel {
  background: #101822;
  border-color: #34404f;
  border-radius: 5px;
  box-shadow: 0 12px 27px rgba(0,0,0,.12);
}
.roster-panel, .settings-panel { padding: 21px; }
.panel-heading h3, .schedule-heading h3 { font-size: 27px; }
.panel-kicker { color: #92a0ad; }
.button-quiet, .button-outline { border-radius: 3px; }
.add-player-form { background: #0b1119; border-radius: 4px; border-color: #2c3847; }
.field input, .field select, .roster-row input, .bulk-import textarea { border-radius: 3px; background-color: #0c131c; border-color: #364353; }
.field>span { color: #9ba7b2; }
.bulk-import summary { color: #dce1e5; }
.bulk-import p { color: #9ba6b1; }
.roster-row { background: #121c28; border-color: #2c3948; border-radius: 4px; }
.tracker-link { color: var(--cyan); border-color: #31525a; border-radius: 3px; }
.empty-state { padding: 32px 10px; }
.empty-icon { border-radius: 4px; border-color: #496674; }
.roster-footer>span { color: #8d99a5; }
.settings-icon { display: flex; width: 32px; height: 32px; flex-direction: column; justify-content: center; gap: 4px; padding: 0 8px; border-radius: 3px; background: #1a2836; }
.settings-icon span { position: relative; width: 100%; height: 1px; background: #a6b1bb; }
.settings-icon span::after { content: ""; position: absolute; top: -2px; left: 30%; width: 5px; height: 5px; border: 1px solid var(--cyan); border-radius: 50%; background: #1a2836; }
.settings-icon span:nth-child(2)::after { left: 65%; }
.mode-switch { gap: 6px; }
.mode-option { border-radius: 3px; border-color: #354150; background: #0b121a; }
.mode-option.is-selected { border-color: #32808c; background: #122a34; box-shadow: inset 3px 0 var(--cyan); }
.mode-symbol { border-radius: 3px; }
.mode-symbol svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mode-option strong { font-size: 10px; }
.mode-option small { font-size: 8px; }
.mode-help { color: #929eaa; }
.format-card { background: #111f2a; border: 1px solid #354450; border-radius: 4px; }
.format-icon { font: 800 15px var(--display); color: #0a151c; background: var(--orange); border-radius: 2px; }
.format-label { color: #d4dbe0; font-size: 8px; }
.format-card p { color: #a0abb5; }
.tracker-note-icon { color: var(--cyan); }
.tracker-note p { color: #9ba6b0; }
.generate-button { text-transform: uppercase; letter-spacing: .04em; border-radius: 3px; }

.results-section { padding-top: 67px; }
.results-heading h2 { font-size: 47px; }
.section-subtitle { color: #9da9b4; }
.result-actions .button { border-radius: 3px; }
.balance-summary { border-radius: 4px; background: #11232d; border-color: #34515b; }
.balance-icon { background: #1a3a43; }
.teams-grid { gap: 11px; }
.team-card { border-color: #344150; border-radius: 4px; background: #101923; }
.team-banner { padding: 15px 16px; background: #151f2b; }
.team-name { font-size: 27px; letter-spacing: .01em; }
.team-players { padding: 5px 16px 8px; }
.team-player { padding: 10px 0; }
.team-player-name { font-size: 12px; }
.player-seed { border-radius: 2px; background: #263342; color: #c3cbd1; }
.random-rank-label { color: #7e8a97; font-style: normal; }
.team-total { background: #0c131c; }
.substitutes-wrap { border-radius: 4px; }
.schedule-heading { border-bottom-color: #34404d; }
.schedule-heading h3 { font-size: 28px; }
.schedule-heading p:last-child { color: #99a4ae; }
.schedule-badge { border-radius: 3px; }
.round-divider { color: var(--orange); }
.match-card { border-radius: 4px; background: #111b26; }
.score-fields input { border-radius: 3px; }
.standings-card { border-radius: 4px; }
.standings-heading { font-size: 24px; }
.tracker-disclaimer { border-radius: 4px; background: #101822; border-color: #34404d; }
.tracker-mark { border-radius: 2px; background: var(--cyan); }
.tracker-disclaimer p { color: #9aa6b1; }
.footer { min-height: 75px; border-top-color: #2b3643; color: #7e8a96; }
.footer-brand { opacity: 1; }

@media (max-width: 850px) {
  .site-shell { width: min(100% - 36px, 720px); }
  .hero { grid-template-columns: 1fr; gap: 22px; padding: 38px 0 31px; }
  .hero-art { width: min(100%, 580px); margin: 0 auto; }
  .workspace-grid { grid-template-columns: 1fr; }
  .settings-panel { position: static; }
  .quick-steps { gap: 15px; }
}
@media (max-width: 600px) {
  .site-shell { width: calc(100% - 28px); }
  .topbar { height: 66px; }
  .top-nav { gap: 13px; font-size: 9px; }
  .season-pill { font-size: 7px; padding: 7px; letter-spacing: .08em; }
  .hero { padding: 35px 0 27px; }
  .hero h1 { font-size: clamp(48px, 13vw, 66px); }
  .hero-art { height: 245px; margin-top: 5px; }
  .arena-frame { inset: 0 5px; padding: 10px 11px 9px; }
  .arena-display { height: 178px; }
  .arena-pitch { width: 114%; }
  .arena-side { top: 13px; }
  .arena-side b { font-size: 23px; }
  .arena-side span { font-size: 6px; }
  .kickoff-stamp { right: 9px; bottom: 7px; padding: 6px; }
  .kickoff-stamp strong { font-size: 20px; }
  .quick-steps { gap: 9px; padding: 13px 5px; margin-bottom: 44px; }
  .quick-steps>div:not(.step-line) { gap: 10px; }
  .quick-steps p { align-items: baseline; gap: 9px; }
  .quick-steps small { font-size: 9px; }
  .section-heading h2 { font-size: 38px; }
  .roster-panel, .settings-panel { padding: 15px; }
  .results-section { padding-top: 48px; }
  .results-heading h2 { font-size: 40px; }
  .team-name { font-size: 25px; }
  .footer { gap: 11px; }
}

@media(prefers-reduced-motion:reduce) {
  .top-nav a::after { transition: none; }
}

.rank-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; min-width: 0; }
.rank-editor select, .rank-editor input { width: 100%; min-width: 0; height: 34px; padding: 6px 8px; color: #eaf0f6; background: #0c131c; border: 1px solid #364353; border-radius: 3px; font-size: 11px; }
.rank-editor select:focus, .rank-editor input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(63,225,220,.08); }
.rank-editor input::placeholder { color: #758398; }
.rank-editor [hidden] { display: none !important; }
.roster-row .rank-editor { width: 100%; }
.roster-row .rank-editor select, .roster-row .rank-editor input { height: 31px; font-size: 10px; padding: 5px 6px; }
.add-player-form .rank-entry { gap: 4px; }
.account-pill { cursor: pointer; font-family: inherit; }
.save-account-button { width: 100%; margin-top: 9px; color: #d3dde6; }
.save-account-button:disabled, .saved-tournament-actions button:disabled { opacity: .55; cursor: wait; }
.account-dialog {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100% - 30px));
  max-height: min(84vh, 760px);
  overflow: auto;
  padding: 30px;
  border: 1px solid #3a4756;
  border-radius: 7px;
  color: var(--text);
  background: #101822;
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
}
.account-dialog::backdrop { background: rgba(1,5,10,.78); backdrop-filter: blur(5px); }
.account-dialog h2 { margin: 4px 0 9px; font: 700 34px/1 var(--display); }
.account-status { margin: 0 0 20px; color: #aab6c1; font-size: 13px; line-height: 1.65; }
.account-auth-link { display: flex; width: 100%; justify-content: center; text-decoration: none; }
.account-close { position: absolute; top: 10px; right: 13px; width: 34px; height: 34px; border: 0; background: transparent; color: #aab6c1; font-size: 27px; cursor: pointer; }
.account-note { margin: 12px 0 0; color: #8593a0; font-size: 10px; line-height: 1.6; }
.account-signout { display: inline-block; margin-top: 14px; color: var(--cyan); }
.account-email { margin: -12px 0 16px; color: #8493a0; font-size: 11px; }
.account-admin-link { margin: 0 0 12px; }
.account-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; border: 1px solid #303b49; background: #0b121a; }
.account-tab { min-height: 36px; border: 0; color: #9aa7b3; background: transparent; font: 600 11px var(--body); cursor: pointer; }
.account-tab.is-active { color: #0a1119; background: var(--cyan); }
.account-form { display: grid; gap: 12px; margin-top: 15px; }
.account-form .field { display: grid; gap: 6px; }
.account-form .field input { width: 100%; min-height: 40px; padding: 9px 10px; color: var(--text); background: #0b121a; border: 1px solid #364353; border-radius: 3px; font: 12px var(--body); }
.account-form .field input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(63,225,220,.08); }
.account-form h3 { margin: 0 0 2px; font: 600 21px/1.1 var(--display); }
.account-form [type="submit"] { min-height: 42px; margin-top: 3px; cursor: pointer; }
.account-form [type="submit"]:disabled { opacity: .6; cursor: wait; }
.account-saved-section { margin-top: 24px; padding-top: 19px; border-top: 1px solid #303b49; }
.account-saved-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.account-saved-heading h3 { margin: 0; font: 600 22px/1.1 var(--display); }
.account-message { min-height: 17px; margin: 9px 0; color: #91a0ad; font-size: 11px; }
.saved-tournaments { display: grid; gap: 8px; }
.saved-tournament-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; border: 1px solid #303b49; background: #0b121a; }
.saved-tournament-copy { display: grid; gap: 5px; min-width: 0; }
.saved-tournament-copy strong { overflow-wrap: anywhere; color: #edf2f5; font-size: 12px; }
.saved-tournament-copy span, .saved-empty { color: #8e9ba7; font-size: 10px; }
.saved-tournament-actions { display: flex; flex-shrink: 0; align-items: center; gap: 7px; }
.saved-tournament-actions .button { padding: 8px 10px; font-size: 10px; }
.saved-delete { padding: 8px 4px; border: 0; color: #ff8c7d; background: none; font: inherit; font-size: 10px; cursor: pointer; }
.saved-empty { margin: 10px 0 3px; }
@media (max-width: 600px) {
  .roster-toolbar, .roster-row { grid-template-columns: minmax(75px, .9fr) minmax(105px, 1.25fr) 54px 22px; gap: 5px; }
  .rank-editor select, .roster-row .rank-editor select { font-size: 9px; padding: 5px 4px; }
  .rank-editor input, .roster-row .rank-editor input { font-size: 9px; padding: 5px 4px; }
  .account-dialog { padding: 25px 18px 20px; }
  .account-dialog h2 { font-size: 30px; }
  .saved-tournament-card { align-items: flex-start; flex-direction: column; }
  .saved-tournament-actions { width: 100%; }
}