@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #171944;
  --ink-2: #1a3560;
  --paper: #f4f4ef;
  --card: #fffefa;
  --muted: #71808d;
  --line: #dde3df;
  --coral: #dd2338;
  --coral-soft: #ffe2e5;
  --mint: #0c8da3;
  --mint-soft: #dff2f5;
  --amber: #f2d200;
  --shadow: 0 18px 44px rgba(16, 34, 51, .08);
  --radius: 18px;
  font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid #4fae99; outline-offset: 3px; }

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { min-height: 76px; padding: 0 4.25vw; display: flex; align-items: center; gap: 25px; color: #f9fbf8; background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.09); }
.brand { display: inline-flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; min-width: 210px; }
.brand strong { display: block; font-size: 15px; letter-spacing: -.02em; }
.brand small { display: block; color: #a5b6bf; font-size: 10px; margin-top: 2px; letter-spacing: .02em; }
.crest-mark { position: relative; display: grid; place-items: center; width: 42px; height: 46px; overflow: hidden; border-radius: 7px; background: #10123a; filter: drop-shadow(0 6px 8px rgba(0,0,0,.15)); }
.crest-mark img { position: absolute; top: 0; left: 50%; width: 70px; max-width: none; transform: translateX(-50%); }
.event-status { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: #bbcec8; font-size: 11px; white-space: nowrap; }
.status-dot, .live-dot, .pulse { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--mint); }
.status-dot { box-shadow: 0 0 0 4px rgba(142,212,190,.13); }
.role-nav { display: flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.04); }
.nav-tab { border: 0; border-radius: 7px; padding: 9px 13px; background: transparent; color: #9eafb7; font-size: 11px; font-weight: 700; transition: .18s ease; }
.nav-tab:hover, .nav-tab.is-active { color: var(--ink); background: var(--mint); }
.account-chip { display: inline-flex; align-items: center; gap: 8px; border: 0; color: #f9fbf8; padding: 4px 0 4px 8px; background: transparent; }
.account-text { text-align: left; display: grid; gap: 1px; }
.account-text strong { font-size: 11px; }
.account-text small { color: #9eafb7; font-size: 9px; }
.chevron { color: #9eafb7; font-size: 16px; margin-left: 3px; }

.page-wrap { width: min(1380px, 91.5vw); margin: 0 auto; padding: 39px 0 48px; flex: 1; }
.view.is-hidden { display: none; }
.eyebrow-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.eyebrow { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .16em; color: #8a9899; font-weight: 500; }
.last-sync, .connection-badge { display: inline-flex; align-items: center; gap: 8px; color: #7c8a90; font-size: 10px; }
.last-sync .pulse { width: 5px; height: 5px; background: var(--coral); box-shadow: 0 0 0 4px rgba(239,108,80,.12); }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin: 20px 0 27px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 9px; font-size: clamp(33px, 4.6vw, 58px); letter-spacing: -.065em; line-height: .98; font-weight: 800; }
h1 em { font-family: Georgia, 'Times New Roman', serif; color: var(--coral); font-weight: 400; letter-spacing: -.08em; }
.lede { max-width: 540px; color: #6d7b84; font-size: 13px; line-height: 1.65; margin-bottom: 0; }
.filter-pills { display: inline-flex; gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #edf0eb; }
.filter-pill { padding: 8px 12px; border: 0; border-radius: 7px; color: #7a8789; background: transparent; font-size: 10px; font-weight: 700; }
.filter-pill.is-selected { color: var(--ink); background: var(--card); box-shadow: 0 2px 7px rgba(16,34,51,.06); }
.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; margin-bottom: 23px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); box-shadow: var(--shadow); }
.stat-block { min-height: 113px; padding: 18px 21px; background: var(--card); }
.stat-block span, .stat-block small { display: block; color: #869397; font-size: 10px; }
.stat-block strong { display: block; margin: 10px 0 4px; font-size: 31px; letter-spacing: -.07em; line-height: 1; }
.stat-block small { color: #a1aba9; font-size: 9px; }
.stat-accent { background: var(--coral-soft); }
.stat-accent strong { color: var(--coral); }
.content-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.card-span-2 { grid-column: span 2; }
.live-card, .panel-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: 0 10px 28px rgba(16,34,51,.04); }
.live-card { padding: 22px 25px 0; background: var(--ink); color: #eff4f1; }
.card-topline, .card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.live-label { display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Mono', monospace; color: var(--mint); font-size: 9px; letter-spacing: .12em; }
.live-dot { width: 6px; height: 6px; background: var(--coral); box-shadow: 0 0 0 4px rgba(239,108,80,.13); }
.category-label { font-size: 10px; color: #94a7ae; }
.match-headline { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; padding: 44px 0 27px; }
.team-kicker { color: #869ba5; font-family: 'DM Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: .13em; }
.match-headline h2 { margin: 8px 0 3px; font-size: 22px; letter-spacing: -.06em; }
.team-meta { color: #82959e; font-size: 10px; }
.align-right { text-align: right; }
.headline-score { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-items: center; gap: 11px; color: var(--mint); }
.headline-score strong { font-size: clamp(43px, 5vw, 66px); letter-spacing: -.1em; line-height: .8; }
.headline-score span { color: #54707e; font-size: 30px; }
.headline-score small { grid-column: 1 / -1; color: #8d9ea5; font-size: 9px; margin-top: 12px; }
.set-track { display: flex; align-items: center; gap: 6px; padding: 13px 0 15px; border-top: 1px solid rgba(255,255,255,.1); }
.set-track span { width: 35px; height: 4px; border-radius: 9px; background: #3d5360; }
.set-track .set-won { background: var(--mint); }
.set-track small { color: #82959e; font-size: 9px; margin-left: 6px; }
.live-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0 -25px; padding: 15px 25px; background: #172f42; }
.mini-ranking { display: grid; gap: 3px; }
.mini-label { color: #82959e; font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.mini-ranking strong { color: var(--mint); font-size: 13px; }
.mini-ranking small { color: #a2b1b3; font-size: 9px; }
.text-button { padding: 0; border: 0; color: var(--coral); background: transparent; font-size: 10px; font-weight: 800; }
.text-button:hover { color: #ff8a70; }
.text-button span { margin-left: 4px; }
.panel-card { padding: 20px; }
.card-heading { align-items: center; margin-bottom: 17px; }
.card-heading h3 { margin: 5px 0 0; font-size: 16px; letter-spacing: -.045em; }
.icon-button { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--paper); font-size: 14px; }
.icon-button:hover { border-color: var(--coral); color: var(--coral); }
.fixture-list { display: grid; gap: 0; }
.fixture { display: grid; grid-template-columns: 39px 1fr 24px; align-items: center; gap: 9px; min-height: 54px; border-top: 1px solid #edf0eb; }
.fixture-time { color: var(--coral); font-family: 'DM Mono', monospace; font-size: 10px; }
.fixture strong { display: block; color: var(--ink); font-size: 10px; }
.fixture strong i { color: #abb5b3; font-style: normal; margin: 0 4px; }
.fixture small { display: block; color: #96a19f; font-size: 8px; margin-top: 3px; }
.sport-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--ink); font-size: 10px; font-weight: 800; }
.sport-mark.football { background: var(--amber); }.sport-mark.basketball { background: var(--coral-soft); color: var(--coral); }.sport-mark.volleyball { background: var(--mint-soft); color: #29806e; }
.outline-button, .primary-button { min-height: 35px; border-radius: 9px; padding: 8px 12px; font-size: 10px; font-weight: 800; transition: .18s ease; }
.outline-button { border: 1px solid var(--line); color: #627277; background: transparent; }.outline-button:hover { border-color: var(--coral); color: var(--coral); }
.primary-button { border: 1px solid var(--coral); color: white; background: var(--coral); box-shadow: 0 9px 18px rgba(239,108,80,.2); }.primary-button:hover { background: #d9573b; transform: translateY(-1px); }
.full-button { width: 100%; margin-top: 15px; }
.trend-chip { padding: 5px 8px; border-radius: 5px; color: #24745f; background: var(--mint-soft); font-family: 'DM Mono', monospace; font-size: 8px; }
.ranking-list { display: grid; gap: 12px; margin-bottom: 3px; }
.ranking-row { display: grid; grid-template-columns: 19px 28px 1fr auto; align-items: center; gap: 8px; }
.ranking-position { color: #acb5b3; font-family: 'DM Mono', monospace; font-size: 9px; }
.ranking-row:first-child .ranking-position { color: var(--coral); }.ranking-avatar { width: 28px; height: 28px; }
.ranking-name strong { display: block; font-size: 10px; }.ranking-name small { color: #a2adab; font-size: 8px; }.ranking-points { color: var(--ink); font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; }
.support-card { background: #f4faf5; }.support-card p { margin: 0 0 17px; color: #82908c; font-size: 10px; line-height: 1.5; }.shield-mini { display: grid; place-items: center; width: 30px; height: 33px; overflow: hidden; border-radius: 6px; color: transparent; background-color: #10123a; background-image: url('escudo-sophianum.png'); background-repeat: no-repeat; background-position: center top; background-size: 68px auto; font-size: 0; }
.reaction-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.reaction-button { display: grid; gap: 5px; place-items: center; min-height: 82px; padding: 7px 3px 6px; border: 1px solid #d7e8df; border-radius: 9px; background: #fff; transition: .18s ease; }.reaction-button:hover, .reaction-button.is-picked { border-color: var(--coral); background: #fff6f2; transform: translateY(-2px); }.reaction-mark { position: relative; display: grid; place-items: center; width: 48px; height: 48px; overflow: visible; border-radius: 8px; background: transparent; }.reaction-mark img { display: block; width: 48px; height: 48px; object-fit: contain; }.reaction-mark i { position: absolute; right: -5px; bottom: -4px; font-size: 13px; font-style: normal; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }.reaction-button b { color: #6f807c; font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 500; }.support-note { display: flex; align-items: center; gap: 8px; margin-top: 15px; color: #7d8d87; font-size: 9px; line-height: 1.45; }
.avatar { display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--ink); background: var(--amber); font-weight: 800; }.avatar-small { width: 27px; height: 27px; font-size: 9px; }.avatar-tiny { width: 21px; height: 21px; font-size: 7px; }
.spotlight-card { display: grid; grid-template-columns: 118px 1fr; align-items: stretch; padding: 0; background: #f7e8cf; }.spotlight-art { position: relative; display: grid; place-items: center; overflow: hidden; min-height: 160px; background: var(--coral); }.spotlight-art::before, .spotlight-art::after { position: absolute; width: 135px; height: 135px; border: 1px solid rgba(255,255,255,.33); border-radius: 50%; content: ''; }.spotlight-art::before { transform: translate(-22px, 21px); }.spotlight-art::after { transform: translate(22px, -21px); }.spotlight-crest { position: relative; z-index: 2; display: block; width: 62px; height: 73px; overflow: hidden; border-radius: 6px; background: #10123a; box-shadow: 0 7px 14px rgba(0,0,0,.17); }.spotlight-crest img { position: absolute; top: 0; left: 50%; width: 105px; max-width: none; transform: translateX(-50%); }.spotlight-spark { position: absolute; color: #ffe884; font-size: 19px; }.spark-one { top: 24px; right: 15px; }.spark-two { bottom: 19px; left: 15px; }.spotlight-copy { display: grid; align-content: center; gap: 3px; padding: 19px; }.spotlight-copy h3 { margin: 4px 0 3px; color: var(--ink); font-size: 15px; line-height: 1.1; }.spotlight-copy p { margin: 0 0 10px; color: #8c7967; font-size: 9px; line-height: 1.5; }

.tennis-card { padding-bottom: 15px; }
.tennis-heading { align-items: flex-start; margin-bottom: 13px; }
.tennis-heading h3 { margin-bottom: 4px; }
.tennis-lede { margin: 0; color: #9aa5a2; font-size: 9px; line-height: 1.45; }
.tennis-court { position: relative; min-height: 302px; overflow: hidden; border: 7px solid #efd171; border-radius: 14px; background: linear-gradient(135deg, rgba(255,255,255,.045), transparent 42%), #147d8f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), inset 0 0 42px rgba(8,51,69,.2), 0 8px 18px rgba(17,69,78,.08); }
.court-boundary { position: absolute; inset: 17px 20px; border: 2px solid rgba(255,255,255,.82); border-radius: 2px; }
.court-net { position: absolute; top: 8px; bottom: 8px; left: 50%; z-index: 4; width: 6px; transform: translateX(-50%); border: 1px solid rgba(13,63,74,.34); border-radius: 3px; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.98) 0 5px, rgba(194,225,226,.72) 5px 8px); box-shadow: 0 0 7px rgba(0,0,0,.14); }
.court-net i { position: absolute; top: 50%; left: 50%; padding: 4px 5px; transform: translate(-50%, -50%) rotate(-90deg); border-radius: 4px; color: #456865; background: #fff; font-family: 'DM Mono', monospace; font-size: 7px; font-style: normal; font-weight: 500; letter-spacing: .08em; box-shadow: 0 2px 7px rgba(0,0,0,.12); }
.court-service { position: absolute; top: 17px; bottom: 17px; z-index: 0; width: 2px; border-left: 2px solid rgba(255,255,255,.58); }
.court-service-left { left: 34%; }.court-service-right { right: 34%; }
.court-center { position: absolute; top: 25%; bottom: 25%; z-index: 0; width: 1px; border-left: 1px solid rgba(255,255,255,.6); }
.court-center-left { left: 17.5%; }.court-center-right { right: 17.5%; }
.court-team { position: absolute; top: 17px; bottom: 17px; z-index: 2; display: grid; width: calc(50% - 22px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.5vw, 18px); padding: 13px 10px; }
.court-team-blue { left: 20px; }.court-team-coral { right: 20px; }
.rotation-column { display: grid; min-width: 0; grid-template-rows: repeat(3, minmax(0, 1fr)); place-items: center; gap: 8px; }
.tennis-player { position: relative; z-index: 2; display: grid; width: clamp(76px, 7vw, 88px); min-width: 0; justify-items: center; gap: 2px; padding: 10px 5px 5px; border: 1px solid rgba(255,255,255,.72); border-bottom: 3px solid var(--mint); border-radius: 8px; background: rgba(255,254,250,.97); box-shadow: 0 4px 9px rgba(6,42,53,.14); text-align: center; transition: transform .16s ease, box-shadow .16s ease; }
.tennis-player:hover { z-index: 3; transform: translateY(-2px); box-shadow: 0 7px 15px rgba(6,42,53,.2); }
.tennis-player.team-coral { border-bottom-color: var(--coral); }
.tennis-player::before { display: none; }
.tennis-points { position: absolute; top: -9px; left: 50%; min-width: 38px; padding: 2px 6px; transform: translateX(-50%); border: 1px solid #f2cbd0; border-radius: 999px; color: #be2d42; background: #fff; box-shadow: 0 3px 8px rgba(27,49,59,.12); font-family: 'DM Mono', monospace; font-size: 8px; font-weight: 800; line-height: 1.25; white-space: nowrap; }
.tennis-player.team-blue .tennis-points { border-color: #bee2e6; color: #087c90; }
.tennis-player strong { overflow: hidden; width: 100%; color: var(--ink); font-size: 8px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }.tennis-player small { color: #879794; font-family: 'DM Mono', monospace; font-size: 6.5px; line-height: 1.1; white-space: nowrap; }
.tennis-footer { display: flex; align-items: center; gap: 15px; padding: 11px 2px 0; color: #71827e; font-size: 8px; }.tennis-footer span { display: inline-flex; align-items: center; gap: 5px; }.tennis-footer small { margin-left: auto; color: #9aa5a2; font-family: 'DM Mono', monospace; font-size: 8px; }.tennis-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }.team-blue-dot { background: var(--mint); }.team-coral-dot { background: var(--coral); }

/* Control view */
.match-picker { display: flex; align-items: center; gap: 16px; margin: 17px 0 18px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 13px; background: #fffefa; box-shadow: 0 7px 19px rgba(16,34,51,.035); }
.picker-copy { display: grid; gap: 3px; min-width: 245px; }
.picker-copy strong { color: var(--ink); font-size: 11px; }
.picker-copy small { color: #99a5a2; font-size: 8px; }
.match-selector { flex: 1; min-height: 38px; min-width: 0; padding: 0 11px; border: 1px solid #cfdcd5; border-radius: 9px; color: var(--ink); background: #f7faf5; font-size: 10px; font-weight: 700; }
.match-selector:focus { border-color: var(--mint); outline: 3px solid rgba(12,141,163,.14); }
.assignment-chip { flex: 0 0 auto; padding: 7px 9px; border-radius: 7px; color: #2d806d; background: var(--mint-soft); font-family: 'DM Mono', monospace; font-size: 8px; white-space: nowrap; }
.control-title-row { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin: 21px 0 25px; }.control-title-row h1 { margin-bottom: 6px; font-size: clamp(30px, 4vw, 50px); }.versus { color: #a1adae; font-family: Georgia, serif; font-size: .56em; font-style: italic; letter-spacing: 0; margin: 0 7px; }.control-actions { display: flex; align-items: center; gap: 10px; }.undo-top { color: #a34845; border-color: #f0c9c6; background: #fff8f6; }.undo-top:hover { color: #fff; border-color: var(--coral); background: var(--coral); }.mic-button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 10px 14px; border: 0; border-radius: 10px; color: white; background: var(--coral); box-shadow: 0 9px 19px rgba(221,35,56,.23); font-size: 10px; font-weight: 800; }.mic-button:hover, .mic-button.is-listening { background: var(--ink); }.mic-glyph { display: grid; place-items: center; width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 50%; color: #ffd8cf; font-size: 0; }.mic-button.is-listening .mic-glyph { animation: listening 1.2s infinite; }.mic-label { white-space: nowrap; }
@keyframes listening { 50% { box-shadow: 0 0 0 7px rgba(255,255,255,.15); } }
.operator-scoreboard { margin-bottom: 18px; padding: 22px 28px; border-radius: var(--radius); color: #eff4f1; background: var(--ink); box-shadow: var(--shadow); }.operator-score-head { display: flex; align-items: center; gap: 19px; }.set-indicator { color: #8ea1a9; font-family: 'DM Mono', monospace; font-size: 9px; }.operator-clock { margin-left: auto; color: #8ea1a9; font-family: 'DM Mono', monospace; font-size: 10px; }.operator-score-values { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; max-width: 610px; margin: 26px auto 18px; }.operator-score-values div:not(.score-divider) { display: grid; gap: 3px; }.operator-score-values span { color: #8da2aa; font-size: 11px; }.operator-score-values strong { color: var(--mint); font-size: clamp(56px, 9vw, 88px); line-height: .85; letter-spacing: -.11em; }.operator-score-values small { color: #718994; font-size: 9px; }.score-divider { color: #577080; font-size: 40px; }.operator-hint { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); color: #8ea1a9; text-align: center; font-size: 9px; }.operator-hint span { color: var(--mint); font-weight: 800; }
.operator-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(290px, .7fr); gap: 18px; }.roster-board { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: 0 10px 28px rgba(16,34,51,.04); }.board-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 19px; }.board-heading h2 { margin: 5px 0 0; font-size: 19px; letter-spacing: -.055em; }.queue-badge { padding: 7px 10px; border-radius: 7px; color: #6d7e7b; background: #eef2ed; font-family: 'DM Mono', monospace; font-size: 8px; }.queue-badge.has-pending { color: #97513e; background: var(--coral-soft); }.roster-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.team-roster { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fbfcf8; }.team-roster-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 14px; color: white; background: var(--ink-2); }.team-roster:first-child .team-roster-head { background: #1b5060; }.team-roster-head strong { font-size: 12px; }.team-roster-head small { color: #a7bec1; font-size: 8px; }.team-point-button { min-height: 28px; border: 1px solid rgba(255,255,255,.25); border-radius: 7px; padding: 5px 7px; color: var(--mint); background: rgba(255,255,255,.06); font-size: 8px; font-weight: 800; }.team-point-button:hover { color: var(--ink); background: var(--mint); }.player-row { display: grid; grid-template-columns: 25px 1fr auto 33px; align-items: center; gap: 7px; min-height: 54px; padding: 6px 12px; border-bottom: 1px solid #edf0eb; }.player-row:last-child { border-bottom: 0; }.player-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: var(--ink); background: var(--amber); font-size: 8px; font-weight: 800; }.player-row:nth-child(even) .player-avatar { background: var(--mint); }.player-name strong { display: block; color: var(--ink); font-size: 10px; }.player-name small { display: block; color: #99a5a2; font-size: 8px; margin-top: 2px; }.player-points { color: #7e908b; font-family: 'DM Mono', monospace; font-size: 10px; }.player-add { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid #c9dfd5; border-radius: 8px; color: #297966; background: var(--mint-soft); font-size: 19px; line-height: 1; }.player-add:hover { color: white; border-color: var(--coral); background: var(--coral); transform: scale(1.05); }.voice-pending { display: grid; gap: 8px; margin-top: 16px; }.pending-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid #f0d4c9; border-radius: 10px; background: #fff7f4; }.pending-copy { min-width: 0; }.pending-copy strong { display: block; color: var(--ink); font-size: 10px; }.pending-copy small { display: block; overflow: hidden; color: #9b817a; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.pending-actions { display: flex; gap: 5px; }.pending-actions button { min-height: 28px; padding: 5px 8px; border-radius: 7px; font-size: 8px; font-weight: 800; }.pending-confirm { border: 0; color: white; background: var(--coral); }.pending-cancel { border: 1px solid #ead0c7; color: #9b817a; background: transparent; }.empty-pending { color: #9ba7a3; font-size: 9px; }
.operator-side { display: grid; align-content: start; gap: 18px; }.side-feed { padding-bottom: 14px; }.event-feed { display: grid; gap: 0; }.event-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 8px; min-height: 49px; border-top: 1px solid #edf0eb; }.event-time { color: #a1aba8; font-family: 'DM Mono', monospace; font-size: 8px; }.event-copy strong { display: block; color: var(--ink); font-size: 9px; }.event-copy small { display: block; color: #9aa5a2; font-size: 8px; margin-top: 2px; }.event-score { color: #2b806d; font-family: 'DM Mono', monospace; font-size: 10px; }.close-card { display: grid; grid-template-columns: 39px 1fr; gap: 10px; background: var(--mint-soft); border-color: #c9e9dd; }.close-card h3 { margin: 5px 0 4px; font-size: 14px; }.close-card p { margin: 0; color: #6d8a81; font-size: 9px; line-height: 1.45; }.close-card .full-button { grid-column: 1 / -1; margin-top: 5px; }.close-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #267a66; background: white; font-size: 17px; font-weight: 800; }.toast { position: fixed; right: 24px; bottom: 24px; z-index: 10; max-width: 300px; padding: 12px 15px; border-radius: 9px; color: white; background: var(--ink); box-shadow: var(--shadow); font-size: 10px; opacity: 0; pointer-events: none; transform: translateY(9px); transition: .22s ease; }.toast.is-visible { opacity: 1; transform: translateY(0); }

/* Admin view */
.admin-hero { align-items: center; }.admin-hero h1 { max-width: 760px; }.admin-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }.admin-stat { padding: 17px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }.admin-stat span, .admin-stat small { display: block; color: #899692; font-size: 9px; }.admin-stat strong { display: block; margin: 10px 0 4px; font-size: 29px; letter-spacing: -.08em; }.admin-stat small { color: #9ba7a3; font-size: 8px; }.accent-admin { border-color: #c8e9de; background: var(--mint-soft); }.accent-admin strong { color: #2d886f; }.admin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.admin-menu-card { min-height: 173px; padding: 21px; border: 1px solid var(--line); border-radius: 15px; background: var(--card); }.admin-card-icon { display: grid; place-items: center; width: 31px; height: 31px; margin-bottom: 16px; border-radius: 9px; color: var(--coral); background: var(--coral-soft); font-size: 16px; }.admin-menu-card:nth-child(2n) .admin-card-icon { color: #2a806e; background: var(--mint-soft); }.admin-menu-card h3 { margin: 0 0 7px; font-size: 14px; letter-spacing: -.04em; }.admin-menu-card p { min-height: 35px; margin-bottom: 17px; color: #899592; font-size: 9px; line-height: 1.5; }.admin-footer-note { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 15px 17px; border: 1px solid #d8e0db; border-radius: 13px; background: #eaf0ea; }.admin-footer-note .shield-mini { flex: 0 0 auto; width: 26px; height: 29px; font-size: 12px; }.admin-footer-note strong { display: block; font-size: 10px; }.admin-footer-note p { margin: 3px 0 0; color: #7d8c86; font-size: 9px; }.admin-footer-note .text-button { margin-left: auto; white-space: nowrap; }

.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(1380px, 91.5vw); margin: 0 auto; padding: 17px 0 22px; border-top: 1px solid var(--line); color: #98a4a0; font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .03em; }.site-footer span:first-child { color: #71827e; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 1050px) {
  .topbar { flex-wrap: wrap; gap: 13px; padding-top: 13px; padding-bottom: 13px; }.brand { min-width: 180px; }.event-status { order: 3; margin-left: 0; }.role-nav { margin-left: auto; }.account-chip { order: 2; }.content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.card-span-2 { grid-column: span 2; }.operator-layout { grid-template-columns: 1fr; }.operator-side { grid-template-columns: 1fr 1fr; align-items: start; }.admin-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .topbar { padding: 13px 4.25vw 11px; }.brand { min-width: 0; }.brand small { font-size: 8px; }.event-status { display: none; }.role-nav { width: 100%; order: 3; }.nav-tab { flex: 1; padding: 9px 4px; font-size: 9px; }.account-chip { margin-left: auto; }.account-text { display: none; }.page-wrap { padding-top: 28px; }.hero-row, .control-title-row, .admin-hero { display: block; }.hero-row .filter-pills { margin-top: 20px; }.stats-strip { grid-template-columns: repeat(2, 1fr); }.stat-block { min-height: 101px; padding: 15px; }.stat-block strong { margin-top: 8px; font-size: 27px; }.content-grid { grid-template-columns: 1fr; }.card-span-2 { grid-column: span 1; }.live-card { padding-left: 17px; padding-right: 17px; }.match-headline { gap: 9px; padding: 34px 0 23px; }.match-headline h2 { font-size: 16px; }.team-meta { font-size: 8px; }.headline-score { gap: 5px; }.headline-score strong { font-size: 45px; }.headline-score span { font-size: 21px; }.live-card-footer { margin: 0 -17px; padding-left: 17px; padding-right: 17px; }.spotlight-card { grid-template-columns: 94px 1fr; }.spotlight-art { min-height: 142px; }.reaction-button { min-height: 57px; }.tennis-heading { display: flex; }.tennis-court { min-height: 275px; border-width: 6px; }.court-boundary { inset: 14px 13px; }.tennis-player { min-width: 74px; padding: 5px 3px 4px; }.tennis-player-one, .tennis-player-two, .tennis-player-three { left: 38%; }.tennis-player-seven, .tennis-player-eight, .tennis-player-nine { left: 7%; }.tennis-player-four, .tennis-player-five, .tennis-player-six { right: 38%; }.tennis-player-ten, .tennis-player-eleven, .tennis-player-twelve { right: 7%; }.tennis-player strong { font-size: 7.5px; }.tennis-player small { font-size: 6.3px; }.tennis-points { font-size: 8.5px; }.tennis-footer { flex-wrap: wrap; gap: 7px 12px; }.tennis-footer small { width: 100%; margin-left: 0; }.match-picker { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 15px; }.picker-copy { grid-column: 1 / -1; min-width: 0; }.match-selector { width: 100%; }.control-actions { margin-top: 18px; }.control-actions .outline-button { display: none; }.control-actions .mic-button { width: 100%; justify-content: center; }.operator-scoreboard { padding: 18px 16px; }.operator-score-values { gap: 10px; }.operator-score-values strong { font-size: 60px; }.operator-layout { gap: 13px; }.roster-board { padding: 15px; }.roster-columns { gap: 8px; }.team-roster-head { display: block; padding: 11px; }.team-roster-head small { display: block; margin: 3px 0 7px; }.team-point-button { width: 100%; }.player-row { grid-template-columns: 22px 1fr auto 30px; gap: 5px; padding: 6px 8px; }.player-name strong { font-size: 9px; }.player-points { font-size: 9px; }.operator-side { grid-template-columns: 1fr; }.admin-stat-grid { grid-template-columns: repeat(2, 1fr); }.admin-grid { grid-template-columns: 1fr; }.admin-footer-note { align-items: flex-start; flex-wrap: wrap; }.admin-footer-note .text-button { margin-left: 38px; }.site-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.site-footer span:last-child { grid-column: span 2; }.filter-pills { width: 100%; }.filter-pill { flex: 1; }
}

@media (max-width: 680px) {
  .tennis-court { min-height: 294px; }
  .court-team { top: 14px; bottom: 14px; width: calc(50% - 7px); gap: 2px; padding: 12px 2px; }
  .court-team-blue { left: 6px; }.court-team-coral { right: 6px; }
  .rotation-column { gap: 5px; }
  .tennis-player { width: 66px; min-width: 0; padding: 9px 3px 4px; }
  .tennis-player-one, .tennis-player-two, .tennis-player-three { left: 39%; }
  .tennis-player-seven, .tennis-player-eight, .tennis-player-nine { left: 14%; }
  .tennis-player-four, .tennis-player-five, .tennis-player-six { left: 61%; right: auto; }
  .tennis-player-ten, .tennis-player-eleven, .tennis-player-twelve { left: 86%; right: auto; }
  .tennis-points { min-width: 32px; padding: 2px 4px; font-size: 7.5px; }
  .tennis-player strong { font-size: 7.5px; }
  .tennis-player small { font-size: 5.8px; }
  .court-side-label { top: 20px; font-size: 6px; }
}

/* Sophianum modern refresh: editorial hero + live dashboard rhythm */
body {
  background-color: #f5f7f3;
  background-image: linear-gradient(rgba(23,25,68,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(23,25,68,.028) 1px, transparent 1px), radial-gradient(circle at 84% 9%, rgba(12,141,163,.08), transparent 25rem);
  background-size: 28px 28px, 28px 28px, auto;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 72px;
  border-bottom: 1px solid rgba(255,255,255,.13);
  background: rgba(23,25,68,.94);
  box-shadow: 0 12px 30px rgba(16,34,51,.14);
  backdrop-filter: blur(15px);
}
.brand { min-width: 225px; }.crest-mark { width: 45px; height: 48px; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 8px 16px rgba(0,0,0,.22); }.brand strong { font-size: 16px; letter-spacing: -.035em; }.brand small { color: #bed0ce; }
.event-status { padding: 7px 10px; border: 1px solid rgba(142,212,190,.16); border-radius: 999px; color: #d6e6df; background: rgba(12,141,163,.11); font-size: 10px; }
.role-nav { padding: 5px; border-color: rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.07); }.nav-tab { min-height: 31px; border-radius: 8px; padding: 8px 14px; }.nav-tab:hover, .nav-tab.is-active { color: var(--ink); background: #23a8bb; box-shadow: 0 5px 12px rgba(12,141,163,.24); }
.account-chip { border-left: 1px solid rgba(255,255,255,.12); padding-left: 13px; }.account-chip .avatar-small { box-shadow: 0 0 0 4px rgba(242,210,0,.11); }
.page-wrap { padding-top: 33px; }.view#view-familias > .eyebrow-row { margin-bottom: 13px; padding: 0 4px; }.view#view-familias > .eyebrow-row .eyebrow { color: #71858a; }.last-sync { padding: 6px 9px; border: 1px solid #dbe5df; border-radius: 999px; background: rgba(255,255,255,.58); }
.hero-row { position: relative; isolation: isolate; overflow: hidden; min-height: 190px; margin: 0 0 19px; padding: 30px 34px; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; color: #f6fbfa; background: linear-gradient(116deg, #171944 0%, #202557 55%, #153e5b 100%); box-shadow: 0 22px 45px rgba(16,34,51,.16); }
.hero-row::before { position: absolute; right: -70px; bottom: -118px; z-index: -1; width: 355px; height: 355px; border: 1px solid rgba(142,212,190,.2); border-radius: 50%; box-shadow: 0 0 0 32px rgba(142,212,190,.035), 0 0 0 64px rgba(142,212,190,.026); content: ''; }
.hero-row::after { position: absolute; top: 0; right: 23%; width: 16%; height: 3px; border-radius: 0 0 3px 3px; background: var(--amber); content: ''; }
.hero-row h1 { position: relative; z-index: 1; margin-bottom: 11px; color: #f9fcfa; font-size: clamp(35px, 4.8vw, 61px); }.hero-row h1 em { color: #ff8570; }.hero-row .lede { position: relative; z-index: 1; max-width: 580px; color: #b8c8c9; }.hero-row .filter-pills { position: relative; z-index: 1; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08); }.hero-row .filter-pill { color: #bfd0cf; }.hero-row .filter-pill.is-selected { color: var(--ink); background: #f8fbf6; box-shadow: 0 5px 12px rgba(0,0,0,.16); }
.stats-strip { gap: 12px; overflow: visible; margin-bottom: 25px; border: 0; background: transparent; box-shadow: none; }.stat-block { position: relative; min-height: 116px; overflow: hidden; padding: 19px 21px; border: 1px solid #dce5df; border-radius: 18px; background: rgba(255,255,255,.84); box-shadow: 0 13px 27px rgba(16,34,51,.06); }.stat-block::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: #d7e8df; content: ''; }.stat-block:nth-child(2)::after { background: var(--mint); }.stat-block:nth-child(3)::after { background: var(--amber); }.stat-block span { color: #7f908d; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }.stat-block strong { margin: 13px 0 5px; color: var(--ink); font-size: 36px; letter-spacing: -.09em; }.stat-block small { color: #8c9a96; font-size: 9px; }.stat-accent { border-color: #f3c3c9; background: linear-gradient(135deg, #ffe5e7, #fff5ee); }.stat-accent::after { background: var(--coral); }.stat-accent strong { color: var(--coral); }
.content-grid { gap: 20px; }.live-card, .panel-card { border-color: #dbe4df; border-radius: 22px; box-shadow: 0 15px 33px rgba(16,34,51,.055); }.live-card { box-shadow: 0 19px 38px rgba(23,25,68,.16); }.panel-card { background: rgba(255,255,255,.9); }

@media (max-width: 680px) {
  .topbar { position: relative; }.page-wrap { padding-top: 25px; }.hero-row { min-height: 245px; padding: 24px 21px; border-radius: 20px; }.hero-row::after { right: 18%; width: 32%; }.hero-row h1 { font-size: clamp(34px, 12vw, 48px); }.hero-row .filter-pills { width: 100%; }.stats-strip { gap: 9px; }.stat-block { min-height: 104px; padding: 15px; border-radius: 15px; }.stat-block strong { font-size: 30px; }
}