/* Fontes hospedadas no projeto (OFL) para a fonte global; subconjunto latino, cobre o português. */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400 500; font-display: block; src: url('/fonts/roboto-500.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 600 900; font-display: block; src: url('/fonts/roboto-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400 500; font-display: block; src: url('/fonts/barlow-condensed-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600 900; font-display: block; src: url('/fonts/barlow-condensed-700.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400 500; font-display: block; src: url('/fonts/oswald-500.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600 900; font-display: block; src: url('/fonts/oswald-700.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 500; font-display: block; src: url('/fonts/montserrat-500.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600 900; font-display: block; src: url('/fonts/montserrat-700.woff2') format('woff2'); }
@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400 900; font-display: block; src: url('/fonts/bebas-neue-400.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  --bg: #08090d;
  --surface: #111217;
  --surface-2: #171920;
  --surface-3: #1d1f27;
  --line: rgba(255, 255, 255, .075);
  --line-strong: rgba(255, 255, 255, .12);
  --text: #f6f4ef;
  --muted: #858591;
  --muted-soft: #adacb4;
  --gold: #d8ad56;
  --gold-bright: #f2cb79;
  --purple: #8253cd;
  --green: #38d996;
  --red: #fa626e;
  --yellow: #f1bf52;
  --font: 'Segoe UI', Arial, sans-serif;
  --display: 'Arial Narrow', 'Roboto Condensed', Arial, sans-serif;
  font-family: var(--font);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Isolated browser-source layers prevent unrelated overlays from remounting. */
[data-isolated-output], .isolated-layer-slot { position: absolute; inset: 0; pointer-events: none; }
.isolated-layer-slot .broadcast-layer { position: absolute; inset: 0; }
.obs-render-mode [data-isolated-output], .obs-render-mode .isolated-layer-slot { contain: layout paint style; }
.obs-render-mode [data-overlay], .obs-render-mode [data-overlay] * { filter: none !important; backdrop-filter: none !important; }
.obs-render-mode [data-overlay] { backface-visibility: hidden; transform-style: flat; }
.obs-render-mode .scorebug,
.obs-render-mode .event-banner,
.obs-render-mode .sponsor-banner,
.obs-render-mode .sponsor-wide-bar,
.obs-render-mode .lineup-banner,
.obs-render-mode .photo-lineup { will-change: transform, opacity; }
.scorebug-status-group { display: flex; align-self: stretch; min-width: max-content; }
.scorebug-status-group .scorebug-clock { position: relative; }
.scorebug-period { min-width: 5.8cqw; padding: .35cqw .7cqw; display: grid; place-content: center; border-left: 1px solid rgba(255,255,255,.2); background: color-mix(in srgb, var(--overlay-primary) 82%, rgba(9,10,13,var(--period-surface,1))); color: var(--overlay-light); text-align: center; transform: scale(var(--period-scale,1)); transform-origin: left center; }
.scorebug-period span { font-size: calc(.82cqw * var(--period-font,1)); font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.scorebug-period small { margin-top: .08cqw; font-size: calc(.43cqw * var(--period-font,1)); font-weight: 700; letter-spacing: .12em; opacity: .72; white-space: nowrap; }
.scorebug-extra { position: absolute; top: -.52cqw; right: -.35cqw; z-index: 3; min-width: 1.45cqw; padding: .11cqw .25cqw; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; background: var(--overlay-accent); color: var(--overlay-dark); font-size: .62cqw; line-height: 1; text-align: center; transform: scale(var(--extra-scale,1)); }

/* Stage changes are a soft 60 fps fade, without the former transition stripe. */
.photo-lineup-stage-individual.is-stage-changing .lineup-spotlight::before { display: none !important; animation: none !important; }
.photo-lineup.is-stage-changing .photo-lineup-body > * { animation: lineup-soft-fade .85s cubic-bezier(.22,.61,.36,1) both; animation-delay: var(--photo-lineup-stage-offset, 0ms); }
@keyframes lineup-soft-fade { 0% { opacity: 0; transform: translateY(.3cqw); filter: blur(2px); } 100% { opacity: 1; transform: none; filter: none; } }
.starters-with-staff { height: 100%; display: grid; grid-template-rows: minmax(0,1fr) auto; gap: .55cqw; }
.starters-with-staff .photo-lineup-grid { min-height: 0; }
.lineup-staff-strip { display: flex; align-items: stretch; gap: .45cqw; min-height: 3.5cqw; }
.lineup-staff-strip > span { min-width: 7cqw; padding: .45cqw .7cqw; display: grid; align-content: center; border: 1px solid rgba(255,255,255,.16); background: rgba(7,8,12,.82); }
.lineup-staff-strip > span small { color: var(--overlay-accent); font-size: .48cqw; text-transform: uppercase; }
.lineup-staff-strip > span strong { margin-top: .12cqw; font-size: .68cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-coach-highlight { margin-left: auto; min-width: 17cqw; padding: .3cqw .8cqw .3cqw .35cqw; display: flex; align-items: center; gap: .75cqw; border: 2px solid var(--overlay-accent); background: linear-gradient(120deg, var(--overlay-primary), var(--overlay-dark)); box-shadow: 0 .7cqw 2cqw rgba(0,0,0,.35); }
.head-coach-highlight .coach-photo { width: 3.2cqw; height: 3.2cqw; }
.head-coach-highlight small { color: var(--overlay-accent); font-size: .58cqw; font-weight: 800; letter-spacing: .14em; }
.head-coach-highlight h3 { margin: .1cqw 0 0; font-size: 1cqw; }
.head-coach-highlight p { margin: 0; font-size: .52cqw; opacity: .7; }

.sponsor-wide-bar { position: absolute; left: var(--sponsor-bar-x,50%); top: var(--sponsor-bar-y,91%); width: min(78.125cqw, calc(100cqw - 5cqw)); height: 10.4167cqw; transform: translate(-50%,-50%) scale(var(--sponsor-bar-scale,1)); transform-origin: center; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: var(--sponsor-bar-radius,0); background: var(--sponsor-bar-background,#08090d); opacity: var(--sponsor-bar-opacity,1); will-change: transform, opacity; }
.sponsor-wide-bar img, .sponsor-wide-bar video { width: 100%; height: 100%; display: block; object-fit: cover; }
.sponsor-wide-bar .sponsor-fit-contain { object-fit: contain; }
.sponsor-wide-bar.is-entering.sponsor-animation-fade { animation: sponsor-bar-fade-in var(--sponsor-motion-duration, 680ms) ease both; animation-delay: var(--sponsor-motion-offset, 0ms); }
.sponsor-wide-bar.is-exiting.sponsor-animation-fade { animation: sponsor-bar-fade-out var(--sponsor-motion-duration, 680ms) ease both; animation-delay: var(--sponsor-motion-offset, 0ms); }
.sponsor-wide-bar.is-entering.sponsor-animation-slide { animation: sponsor-bar-slide-in var(--sponsor-motion-duration, 680ms) ease both; animation-delay: var(--sponsor-motion-offset, 0ms); }
.sponsor-wide-bar.is-exiting.sponsor-animation-slide { animation: sponsor-bar-slide-out var(--sponsor-motion-duration, 680ms) ease both; animation-delay: var(--sponsor-motion-offset, 0ms); }
.sponsor-wide-bar.is-entering.sponsor-animation-zoom { animation: sponsor-bar-zoom-in var(--sponsor-motion-duration, 680ms) ease both; animation-delay: var(--sponsor-motion-offset, 0ms); }
.sponsor-wide-bar.is-exiting.sponsor-animation-zoom { animation: sponsor-bar-zoom-out var(--sponsor-motion-duration, 680ms) ease both; animation-delay: var(--sponsor-motion-offset, 0ms); }
.sponsor-wide-bar.is-entering.sponsor-animation-flip { animation: sponsor-bar-flip-in var(--sponsor-motion-duration, 680ms) cubic-bezier(.16,1,.3,1) both; animation-delay: var(--sponsor-motion-offset, 0ms); backface-visibility: hidden; }
.sponsor-wide-bar.is-exiting.sponsor-animation-flip { animation: sponsor-bar-flip-out var(--sponsor-motion-duration, 680ms) cubic-bezier(.7,0,.84,0) both; animation-delay: var(--sponsor-motion-offset, 0ms); backface-visibility: hidden; }
.sponsor-wide-bar.is-entering.sponsor-animation-elastic { animation: sponsor-bar-elastic-in var(--sponsor-motion-duration, 680ms) cubic-bezier(.34,1.56,.64,1) both; animation-delay: var(--sponsor-motion-offset, 0ms); }
.sponsor-wide-bar.is-exiting.sponsor-animation-elastic { animation: sponsor-bar-elastic-out var(--sponsor-motion-duration, 680ms) cubic-bezier(.7,0,.84,0) both; animation-delay: var(--sponsor-motion-offset, 0ms); }
.overlay-output[data-output-layer="sponsor-bar"] .broadcast-layer { overflow: visible; }
.overlay-output[data-output-layer="sponsor-bar"] .sponsor-wide-bar { inset: 0; width: 100%; height: 100%; transform: scale(var(--sponsor-bar-scale,1)); border: 0; }
.sponsor-wide-placeholder { width: 100%; height: 100%; display: grid; place-content: center; text-align: center; background: linear-gradient(120deg, var(--overlay-primary), var(--overlay-dark)); }
.sponsor-wide-placeholder strong { font-size: 1.7cqw; }
.sponsor-wide-placeholder small { color: var(--overlay-accent); font-size: .72cqw; letter-spacing: .18em; }
.sponsor-wide-controls, .championship-theme { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.sponsor-wide-list { margin-top: 12px; display: grid; gap: 8px; }
.sponsor-wide-list label { padding: 10px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.sponsor-wide-list input { grid-column: 1 / -1; }
.wide-video-upload { margin-top: 12px; min-height: 44px; display: grid; place-content: center; }
.emergency-hide-all { position: fixed; right: 18px; bottom: 18px; z-index: 1000; min-height: 44px; padding: 0 18px; border: 1px solid #ff776f; border-radius: 7px; background: #42191a; color: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.4); font: 800 12px/1 var(--font); letter-spacing: .08em; cursor: pointer; }
.emergency-hide-all:hover { background: #682122; }
.module-content-tabs { margin-bottom: 14px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.module-content-tabs button { min-height: 42px; padding: 8px; border: 0; border-right: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font: 700 11px/1.2 var(--ui-font); cursor: pointer; }
.module-content-tabs button:last-child { border-right: 0; }
.module-content-tabs button.active { background: var(--gold); color: #111; }
.period-extra-controls, .theme-color-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.theme-color-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.theme-overrides { margin-top: 14px; display: grid; gap: 8px; }
.theme-overrides label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pregame-head, .report-toolbar { margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pregame-head h2 { margin: 4px 0 0; }
.pregame-grid, .report-team-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.pregame-team { padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.pregame-team header { display: flex; align-items: center; gap: 12px; }
.pregame-team h2, .pregame-team h3 { margin: 0; }
.pregame-team h3 { margin-top: 18px; padding-bottom: 7px; border-bottom: 1px solid var(--line); color: var(--gold); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.pregame-team table, .match-report-print table { width: 100%; border-collapse: collapse; }
.pregame-team th, .pregame-team td, .match-report-print th, .match-report-print td { padding: 7px 6px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12px; }
.pregame-coach { margin: 10px 0; padding: 12px; display: grid; border-left: 4px solid var(--gold); background: rgba(216,173,86,.08); }
.pregame-coach small { color: var(--gold); font-weight: 800; letter-spacing: .12em; }
.pregame-coach strong { margin-top: 4px; font-size: 18px; }
.pregame-team ul { padding: 0; list-style: none; }
.pregame-team li { padding: 6px 0; display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.report-document { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); }
.report-cover { position: relative; padding: 24px; border-bottom: 4px solid var(--gold); background: linear-gradient(135deg,#11141b,#1d202a); color: #fff; }
.report-brand { display: flex; align-items: center; gap: 11px; }
.report-brand > span { width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--gold); border-radius: 50%; color: var(--gold); font-weight: 900; }
.report-brand > div { display: grid; gap: 2px; }
.report-brand strong { font-size: 12px; letter-spacing: .12em; }
.report-brand small { color: rgba(255,255,255,.58); font-size: 11px; letter-spacing: .16em; }
.report-status { position: absolute; top: 24px; right: 24px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.22); border-radius: 4px; color: var(--gold); font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.report-score { margin: 24px 0 14px; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 20px; }
.report-score > div { min-width: 0; display: grid; }
.report-score > div:last-child { text-align: right; }
.report-score small { color: rgba(255,255,255,.5); font-size: 11px; letter-spacing: .13em; }
.report-score strong { overflow: hidden; font-size: 21px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.report-score > b { padding: 10px 18px; background: var(--gold); color: #111; font-size: 26px; }
.report-cover > p { margin: 0; color: rgba(255,255,255,.68); }
.report-cover > h1 { margin: 24px 0 8px; }
.report-facts { padding: 16px 20px; display: grid; grid-template-columns: 1.6fr repeat(4,1fr); gap: 8px; border-bottom: 1px solid var(--line); }
.report-facts > div { min-width: 0; display: grid; gap: 3px; }
.report-facts span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.report-facts strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.report-summary, .report-periods, .report-events { margin: 0; padding: 20px; border-bottom: 1px solid var(--line); }
.report-document h2 { margin: 0 0 12px; font-size: 15px; text-transform: uppercase; letter-spacing: .08em; }
.report-summary > div { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.report-summary article { padding: 11px; display: grid; border: 1px solid var(--line); border-radius: 5px; }
.report-summary article strong { color: var(--gold); font-size: 23px; }
.report-summary article span { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.report-team-grid { padding: 20px; border-bottom: 1px solid var(--line); }
.report-team { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.015); }
.report-team > header { display: flex; align-items: center; gap: 10px; }
.report-team-mark { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 50%; background: var(--team-report-color); color: #fff; font-weight: 900; }
.report-team-mark img { width: 82%; height: 82%; object-fit: contain; }
.report-team header small { color: var(--muted); font-size: 11px; letter-spacing: .12em; }
.report-team header h2 { margin: 2px 0; font-size: 17px; }
.report-team header p { margin: 0; color: var(--muted); font-size: 12px; }
.report-team h3 { margin: 16px 0 7px; padding-bottom: 5px; border-bottom: 1px solid var(--line); color: var(--gold); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.report-roster, .report-staff { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 12px; list-style: none; }
.report-roster li { min-width: 0; display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 6px; align-items: start; }
.report-roster li > b { color: var(--gold); }
.report-roster li > span { min-width: 0; display: grid; font-size: 12px; }
.report-roster li small { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.report-staff { grid-template-columns: 1fr; }
.report-staff li { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }
.report-staff span { color: var(--muted); }
.report-periods > div { display: flex; flex-wrap: wrap; gap: 8px; }
.report-periods > div > div { min-width: 90px; padding: 9px 12px; display: grid; border-left: 3px solid var(--gold); background: rgba(255,255,255,.04); }
.report-periods span { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.report-events { overflow-x: auto; }
.report-events table { min-width: 760px; }
.report-footer { padding: 13px 20px; display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; }
.pregame-print > .pregame-grid { padding: 20px; }
.portal-team-settings { margin: 16px 0; padding: 14px; display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 10px; align-items: end; border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 920px) { .module-content-tabs, .theme-color-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .pregame-grid, .report-team-grid { grid-template-columns: 1fr; } .report-facts { grid-template-columns: repeat(2,minmax(0,1fr)); } .report-summary > div { grid-template-columns: repeat(2,minmax(0,1fr)); } .portal-team-settings { grid-template-columns: 1fr 1fr; } .dashboard-grid { grid-template-columns: 1fr; } }
@page { size: A4 portrait; margin: 10mm; }
@media print {
  body.print-document { min-width: 0; background: #fff; color: #111; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-document .report-document { border: 0; border-radius: 0; background: #fff; color: #111; }
  .print-document .report-cover { background: #11141b !important; }
  .print-document .report-facts, .print-document .report-summary, .print-document .report-team-grid, .print-document .report-periods, .print-document .report-events { padding: 10px 0; }
  .print-document .report-team-grid, .print-document .pregame-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .print-document .report-team, .print-document .pregame-team { break-inside: avoid; border-color: #bbb; background: #fff; color: #111; box-shadow: none; }
  .print-document .report-summary article, .print-document .report-periods > div > div { border-color: #bbb; background: #f5f5f5; }
  .print-document th, .print-document td { border-color: #ccc; color: #111; }
  .print-document .report-events { overflow: visible; }
  .print-document .report-events table { min-width: 0; font-size: 8px; }
  .print-document .report-events th, .print-document .report-events td { padding: 4px 3px; font-size: 8px; }
  .print-document .report-footer { padding-inline: 0; }
}

*, *::before, *::after { box-sizing: border-box; }
body { min-width: 340px; min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
a { color: inherit; }
::selection { background: rgba(216, 173, 86, .28); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #31323a; border: 2px solid var(--bg); border-radius: 10px; }

.studio { min-height: 100vh; }
.topbar { height: 72px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(10, 11, 15, .94); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.brand-mark { width: 37px; height: 40px; object-fit: contain; color: var(--gold); }
.brand-copy { display: grid; gap: 2px; }
.brand-name { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: 1.7px; text-transform: uppercase; }
.brand-caption { font-size: 11px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; }
.top-actions, .status-row, .section-header, .field-row, .inline-actions, .team-title, .event-line, .event-side, .overlay-card-top { display: flex; align-items: center; }
.top-actions { gap: 20px; }
.active-match-switcher { display:flex; align-items:center; gap:8px; min-width:250px; color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.active-match-switcher select { min-width:190px; max-width:320px; height:38px; padding:0 30px 0 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); font:600 12px/1 var(--font-ui); text-transform:none; letter-spacing:0; }
.status-row { gap: 8px; color: var(--muted-soft); font-size: 12px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(56, 217, 150, .7); }
.sync-status[data-sync-status="syncing"] .live-dot, .sync-status[data-sync-status="connecting"] .live-dot { background: var(--yellow); box-shadow: 0 0 12px rgba(241, 191, 82, .7); animation: connection-pulse .8s ease-in-out infinite; }
.sync-status[data-sync-status="offline"] { color: #ff9aa4; }
.sync-status[data-sync-status="offline"] .live-dot { background: var(--red); box-shadow: 0 0 12px rgba(250, 98, 110, .7); }
.status-time { font-variant-numeric: tabular-nums; color: var(--text); }
.button { height: 38px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface-2); font-size: 12px; font-weight: 600; transition: border-color .18s, background .18s, transform .18s; }
.button { text-decoration: none; }
.button:hover { border-color: rgba(216, 173, 86, .6); background: #212027; }
.button:active, .goal-control:active, .event-action:active { transform: translateY(1px); }
.button.primary { border-color: var(--gold); background: var(--gold); color: #16120b; }
.button.primary:hover { background: var(--gold-bright); }
.button.subtle { border-color: transparent; background: transparent; color: var(--muted-soft); }
.button.subtle:hover { color: var(--text); background: var(--surface-2); }
.button.square { width: 34px; height: 34px; padding: 0; }
.button svg, .event-action svg, .tabs svg, .overlay-icon svg { width: 15px; height: 15px; }

.workspace { max-width: 1540px; margin: 0 auto; padding: 31px 32px 44px; }
.page-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 25px; }
.eyebrow { color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; }
.page-title { margin: 6px 0 0; font-family: var(--display); font-size: clamp(29px, 3.5vw, 38px); font-weight: 600; letter-spacing: .1px; }
.page-caption { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.match-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.room-badge { height: 30px; padding: 0 10px; display: inline-flex; align-items: center; border: 1px solid rgba(216,173,86,.32); border-radius: 20px; background: rgba(216,173,86,.08); color: var(--gold); font-size: 11px; letter-spacing: .4px; }
.button:disabled { opacity: .4; cursor: not-allowed; }
.sport-switcher { margin: 0 0 21px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sport-choice { min-height: 66px; padding: 11px 13px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); text-align: left; transition: border-color .2s, background .2s, transform .2s; }
.sport-choice:hover { border-color: rgba(216, 173, 86, .45); transform: translateY(-1px); }
.sport-choice.active { border-color: rgba(216, 173, 86, .7); background: linear-gradient(135deg, rgba(130, 83, 205, .17), rgba(216, 173, 86, .08)); }
.sport-choice-icon { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 8px; background: rgba(216, 173, 86, .1); color: var(--gold); font-size: 17px; }
.sport-choice-text { display: grid; gap: 3px; overflow: hidden; }
.sport-choice-text strong { font-size: 12px; }
.sport-choice-text small { color: var(--muted); font-size: 11px; letter-spacing: .8px; }
.match-dashboard { margin: 0 0 21px; padding: 16px; }
.match-dashboard-head { margin: 12px 0; display: flex; align-items: center; justify-content: center; gap: 18px; }
.match-dashboard-head > div { display: flex; align-items: center; gap: 8px; }
.match-dashboard-head > div strong { font-size: 13px; }
.match-dashboard-head > b { font-size: 22px; color: var(--gold); }
.workspace-grid { display: grid; grid-template-columns: minmax(310px, 368px) minmax(460px, 1fr); align-items: start; gap: 19px; }
.panel { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
.panel + .panel { margin-top: 18px; }
.panel-pad { padding: 19px; }
.section-header { justify-content: space-between; margin-bottom: 16px; }
.section-title { margin: 0; font-size: 13px; font-weight: 600; }
.section-kicker { font-size: 11px; color: var(--muted); letter-spacing: .6px; text-transform: uppercase; }
.divider { height: 1px; background: var(--line); }

.tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.tab { height: 51px; display: flex; justify-content: center; align-items: center; gap: 7px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 12px; transition: color .2s, border-color .2s; }
.tab:hover { color: var(--text); }
.tab.active { border-bottom-color: var(--gold); color: var(--gold); }
.control-body { padding: 19px; }
.field { display: grid; gap: 7px; margin-bottom: 14px; }
.field label, .tiny-label { color: var(--muted); font-size: 11px; letter-spacing: .65px; text-transform: uppercase; }
.field input, .field select, .field textarea, .field-row input, .drawer input, .drawer textarea, .drawer select { width: 100%; min-width: 0; height: 38px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 6px; outline: none; background: var(--surface-2); color: var(--text); font-size: 12px; transition: border-color .18s; }
.field textarea, .drawer textarea { height: auto; min-height: 176px; padding: 10px; resize: vertical; line-height: 1.7; }
.field input:focus, .field select:focus, .field textarea:focus, .drawer input:focus, .drawer textarea:focus { border-color: var(--gold); }
.field-row { gap: 8px; }
.field-row > .field { flex: 1; }

.appearance-body { padding: 15px; }
.appearance-intro { margin-bottom: 14px; padding: 12px; border: 1px solid rgba(216,173,86,.2); border-radius: 7px; background: linear-gradient(135deg, rgba(130,83,205,.12), rgba(216,173,86,.05)); }
.appearance-intro strong { font-size: 12px; }
.appearance-intro p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.appearance-presets { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.appearance-presets > span { color: var(--muted); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; }
.appearance-presets > div { display: flex; gap: 4px; }
.appearance-presets .button { height: 28px; padding: 0 8px; font-size: 11px; }
.overlay-style-board { margin-bottom: 14px; padding: 14px; display: grid; gap: 9px; border: 1px solid rgba(216,173,86,.24); border-radius: 7px; background: rgba(216,173,86,.035); }
.overlay-style-board > div:first-child { display: grid; gap: 3px; }
.overlay-style-board > div:first-child strong { font-size: 14px; }
.overlay-style-board > div:first-child small { color: var(--muted); font-size: 12px; }
.overlay-style-control { margin-bottom: 12px; padding: 10px 11px; display: grid; grid-template-columns: minmax(0,1fr) minmax(150px,210px); align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.overlay-style-control > div { display: grid; gap: 3px; }
.overlay-style-control strong { font-size: 13px; }
.overlay-style-control small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.overlay-style-control select { width: 100%; height: 38px; }
.parameter-grid { display: grid; gap: 10px; }
.parameter-card { padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); }
.parameter-card-head { margin-bottom: 11px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.parameter-card-head div { display: grid; gap: 3px; }
.parameter-card-head strong { font-size: 12px; }
.parameter-card-head small { color: var(--muted); font-size: 11px; }
.parameter-card-head > span { color: var(--gold); font-family: var(--display); font-size: 14px; }
.parameter-control { margin-top: 9px; display: grid; gap: 5px; }
.parameter-control > span, .parameter-select > span { display: flex; justify-content: space-between; color: var(--muted-soft); font-size: 11px; }
.parameter-control strong { color: var(--gold); font-weight: 600; }
.parameter-control input[type="range"] { width: 100%; height: 4px; accent-color: var(--gold); }
.parameter-select { margin-top: 10px; display: grid; grid-template-columns: 1fr 145px; align-items: center; gap: 8px; }
.parameter-select select, .goal-settings select { width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface-3); color: var(--text); font-size: 11px; }
.position-controls { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.position-controls > strong { display: block; color: var(--muted-soft); font-size: 11px; letter-spacing: .45px; text-transform: uppercase; }
.gc-position-presets { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.gc-position-presets > span { display: block; margin-bottom: 7px; color: var(--muted-soft); font-size: 11px; letter-spacing: .45px; text-transform: uppercase; }
.gc-position-presets > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.gc-position-presets .button { height: 29px; padding: 0 5px; font-size: 11px; }
.gc-position-presets .button.active { border-color: rgba(216,173,86,.62); background: rgba(216,173,86,.12); color: var(--gold); }
.goal-settings { margin-top: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 7px; background: #13141a; }
.goal-settings .section-header { align-items: flex-start; }
.goal-settings .field-row { align-items: flex-end; }
.goal-settings .field { margin-bottom: 8px; }
.sponsor-format-settings input[type="file"] { height: auto; min-height: 38px; padding: 7px; font-size: 11px; }
.sponsor-upload-preview { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.sponsor-upload-preview img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border: 1px solid var(--line-strong); border-radius: 6px; background: #090a0e; }
.sponsor-manager { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.sponsor-manager-head { margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sponsor-manager-head > div { display: grid; gap: 3px; }
.sponsor-manager-head strong { font-size: 11px; }
.sponsor-manager-head small { color: var(--muted); font-size: 8px; }
.sponsor-list { display: grid; gap: 7px; }
.sponsor-item { padding: 7px; display: grid; grid-template-columns: 30px minmax(0,1fr) 58px 28px; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.sponsor-item.active { border-color: rgba(216,173,86,.58); background: rgba(216,173,86,.06); }
.sponsor-select { width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 50%; background: #101116; color: var(--gold); font-family: var(--display); font-size: 11px; }
.sponsor-fields { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; }
.sponsor-fields input { height: 30px; }
.sponsor-upload-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.sponsor-upload-button { height: 30px; padding: 0 8px; display: inline-grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--muted-soft); font-size: 8px; cursor: pointer; white-space: nowrap; }
.sponsor-upload-button input { display: none; }
.lineup-media-upload { border-color: rgba(216,173,86,.52); color: var(--accent); }
.sponsor-media-remove { background: transparent; font: inherit; }
.sponsor-thumb { width: 58px; aspect-ratio: 16 / 9; object-fit: contain; border: 1px solid var(--line-strong); border-radius: 4px; background: #090a0e; }
.sponsor-logo-thumb { height: 42px; aspect-ratio: 1; padding: 4px; background: #fff; }
.sponsor-thumb-empty { display: grid; place-items: center; color: var(--muted); font-size: 8px; }
.sponsor-loop-control { margin-top: 10px; display: flex; align-items: center; gap: 9px; }
.sponsor-loop-control span { color: var(--muted); font-size: 11px; }
.scoreboard-style-grid { margin-bottom: 11px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.scoreboard-style-choice { min-height: 53px; padding: 7px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--muted-soft); text-align: left; }
.scoreboard-style-choice.active { border-color: rgba(216,173,86,.62); background: rgba(216,173,86,.09); color: var(--gold); }
.scoreboard-style-choice span { min-width: 0; display: grid; gap: 2px; }
.scoreboard-style-choice strong { font-size: 11px; }
.scoreboard-style-choice small { color: var(--muted); font-size: 8px; }
.style-swatch { width: 34px; height: 22px; flex: 0 0 auto; border-bottom: 2px solid var(--gold); border-radius: 3px; background: #17141c; box-shadow: 0 5px 11px rgba(0,0,0,.35); }
.style-swatch-glass { border: 1px solid rgba(216,173,86,.5); background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(130,83,205,.18)); }
.style-swatch-minimal { border: 0; border-left: 3px solid var(--gold); border-radius: 0; background: #111217; box-shadow: none; }
.style-swatch-contrast { border: 2px solid var(--gold); background: #050507; box-shadow: 0 0 9px rgba(216,173,86,.25); }
.style-swatch-neon { border: 1px solid var(--gold); background: #0b0b10; box-shadow: 0 0 10px rgba(216,173,86,.55), 0 0 18px rgba(130,83,205,.35); }
.style-swatch-ribbon { border: 0; border-radius: 0; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); background: #17141c; border-bottom: 2px solid var(--gold); }
.style-swatch-gradient { border: 0; border-radius: 9px; background: linear-gradient(115deg, #8253cd, #d8ad56); box-shadow: 0 5px 11px rgba(0,0,0,.35); }

.scoreboard-layout-control { margin: 5px 0 16px; }
.scoreboard-layout-control > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 11px; letter-spacing: .65px; text-transform: uppercase; }
.scoreboard-layout-control > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.layout-choice { min-height: 54px; padding: 8px 10px; display: grid; gap: 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--muted-soft); text-align: left; }
.layout-choice strong { font-size: 12px; }
.layout-choice small { color: var(--muted); font-size: 11px; }
.layout-choice.active { border-color: rgba(216, 173, 86, .62); background: rgba(216, 173, 86, .1); color: var(--gold); }
.scoreboard-control { margin: 19px 0; padding: 17px 0 15px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.teams-grid { display: grid; grid-template-columns: 1fr 28px 1fr; align-items: center; gap: 5px; text-align: center; }
.team-badge { width: 38px; height: 44px; margin: 0 auto 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--team-color, var(--purple)) 26%, #16151b); clip-path: polygon(50% 0%, 100% 14%, 100% 70%, 50% 100%, 0% 70%, 0% 14%); color: #fff; font-family: var(--display); font-size: 19px; font-weight: 700; }
.team-short-name { max-width: 145px; margin: 0 auto 13px; overflow: hidden; color: var(--muted-soft); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.score-controls { display: flex; align-items: center; justify-content: center; gap: 9px; }
.score-number { min-width: 36px; font-family: var(--display); font-size: 41px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.goal-control { width: 25px; height: 25px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface-2); font-size: 15px; }
.goal-control:hover { border-color: var(--gold); }
.score-x { margin-top: 31px; color: var(--muted); font-size: 13px; }
.clock-box { margin: 15px 0 12px; display: flex; align-items: center; justify-content: space-between; }
.clock-time { font-family: var(--display); font-size: 32px; font-weight: 600; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.clock-buttons { display: flex; gap: 7px; }
.period-buttons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.period-button { height: 31px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); color: var(--muted-soft); font-size: 11px; }
.period-button.active { border-color: rgba(216, 173, 86, .5); background: rgba(216, 173, 86, .12); color: var(--gold); }
.sport-metrics { margin: 0 0 16px; padding: 11px 0 13px; border-bottom: 1px solid var(--line); }
.metric-section + .metric-section { margin-top: 11px; }
.metric-title { margin-bottom: 7px; color: var(--muted); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; }
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.metric-cell { height: 36px; padding: 0 6px; display: flex; align-items: center; justify-content: space-between; gap: 4px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); }
.metric-team { color: var(--muted-soft); font-family: var(--display); font-size: 12px; font-weight: 600; }
.metric-cell strong { min-width: 12px; color: var(--text); font-family: var(--display); font-size: 17px; text-align: center; }
.metric-cell.metric-warning { border-color: rgba(250, 98, 110, .58); }
.metric-cell.metric-warning strong { color: var(--red); }
.metric-adjust { width: 20px; height: 22px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--muted-soft); }
.metric-adjust:hover { background: var(--surface-3); color: var(--gold); }
.metric-note { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.serve-controls, .shot-controls { margin-top: 10px; display: flex; align-items: center; gap: 7px; }
.serve-controls > span, .shot-controls > span { margin-right: auto; color: var(--muted-soft); font-size: 11px; }
.serve-button { height: 27px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); color: var(--muted-soft); font-size: 11px; }
.serve-button.active { border-color: rgba(216, 173, 86, .5); color: var(--gold); }
.shot-controls > strong { min-width: 28px; color: var(--gold); font-family: var(--display); font-size: 20px; text-align: center; }
.shot-controls .button.square { width: 29px; height: 28px; font-size: 11px; }
.quick-actions { margin-top: 22px; }
.action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.event-action { min-height: 39px; padding: 0 10px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--muted-soft); font-size: 12px; transition: color .18s, border-color .18s; }
.event-action:hover { border-color: var(--gold); color: var(--text); }
.event-action[data-action="goal-home"], .event-action[data-action="goal-away"] { color: var(--green); }
.event-action.scoring-action { color: var(--green); }
.basket-action-grid { grid-template-columns: repeat(3, 1fr); }
.basket-action-grid .event-action:nth-last-child(-n+2) { grid-column: span 1; }
.event-action[data-action="yellow"] svg { color: var(--yellow); }
.event-action[data-action="red"] svg { color: var(--red); }

.monitor-panel { padding: 18px; }
.monitor-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 7px; background: #102016; container-type: size; }
.pitch { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 12, 10, .13), rgba(5, 12, 10, .63)), repeating-linear-gradient(90deg, #315942 0%, #315942 12.5%, #3c6349 12.5%, #3c6349 25%); }
.pitch::before { position: absolute; inset: 9% 4%; border: 1px solid rgba(255, 255, 255, .36); content: ''; }
.pitch::after { position: absolute; top: 9%; bottom: 9%; left: 50%; width: 1px; background: rgba(255, 255, 255, .36); content: ''; }
.center-circle { position: absolute; top: 50%; left: 50%; width: 17%; aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, .37); border-radius: 50%; transform: translate(-50%, -50%); }
.penalty-box { position: absolute; top: 30%; width: 13%; height: 40%; border: 1px solid rgba(255, 255, 255, .37); }
.penalty-box.left { left: 4%; border-left: 0; }
.penalty-box.right { right: 4%; border-right: 0; }
.pitch.court-futsal { background: linear-gradient(0deg, rgba(7, 11, 20, .16), rgba(7, 11, 20, .54)), repeating-linear-gradient(90deg, #315074 0%, #315074 12.5%, #385b80 12.5%, #385b80 25%); }
.pitch.court-futsal .penalty-box { width: 15%; border-radius: 0 48% 48% 0; }
.pitch.court-futsal .penalty-box.right { border-radius: 48% 0 0 48%; }
.pitch.court-volleyball { background: linear-gradient(0deg, rgba(17, 17, 24, .15), rgba(17, 17, 24, .54)), linear-gradient(90deg, #a56745 4%, #be835c 4%, #be835c 48%, #ece9dc 49.6%, #ece9dc 50.4%, #bd825c 52%, #bd825c 96%, #a56745 96%); }
.pitch.court-volleyball::before { inset: 15% 12%; }
.pitch.court-volleyball::after { top: 9%; bottom: 9%; width: 4px; background: rgba(243, 243, 243, .76); }
.pitch.court-volleyball .center-circle { display: none; }
.pitch.court-volleyball .penalty-box { top: 15%; height: 70%; width: 20%; }
.pitch.court-volleyball .penalty-box.left { left: 30%; border: 0; border-left: 1px solid rgba(255, 255, 255, .42); }
.pitch.court-volleyball .penalty-box.right { right: 30%; border: 0; border-right: 1px solid rgba(255, 255, 255, .42); }
.pitch.court-basketball { background: linear-gradient(0deg, rgba(20, 14, 11, .14), rgba(20, 14, 11, .53)), repeating-linear-gradient(90deg, #b27d52 0%, #b27d52 8%, #b9865b 8%, #b9865b 16%); }
.pitch.court-basketball .center-circle { width: 15%; }
.pitch.court-basketball .penalty-box { width: 17%; border-radius: 0 45% 45% 0; }
.pitch.court-basketball .penalty-box.right { border-radius: 45% 0 0 45%; }
.monitor-label { position: absolute; right: 12px; bottom: 11px; padding: 5px 8px; border-radius: 4px; background: rgba(8, 9, 13, .72); color: rgba(255, 255, 255, .73); font-size: 11px; letter-spacing: .4px; }
.monitor-footer { margin-top: 11px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; }
.resolution-badge { color: var(--muted-soft); font-variant-numeric: tabular-nums; }

.broadcast-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; --overlay-primary: #8253cd; --overlay-accent: #d8ad56; --overlay-dark: #131119; --overlay-light: #f5f2ec; }
.broadcast-layer.theme-nocturno { --overlay-primary: #5974ef; --overlay-accent: #90a6ff; --overlay-dark: #0b1022; }
.broadcast-layer.theme-campo { --overlay-primary: #1f8154; --overlay-accent: #8cdda6; --overlay-dark: #0e1813; }
.broadcast-layer.theme-clean { --overlay-primary: #3e4550; --overlay-accent: #e9edf2; --overlay-dark: #f3f3f2; --overlay-light: #171a1f; }
.broadcast-layer.custom-theme { --overlay-primary: var(--custom-primary); --overlay-accent: var(--custom-accent); }
.scorebug { position: absolute; top: var(--scoreboard-y, 7%); left: var(--scoreboard-x, 4%); display: flex; align-items: stretch; height: 7.5%; min-height: 31px; max-width: 91.8%; border-bottom: var(--scoreboard-accent, 2px) solid var(--overlay-accent); border-radius: var(--scoreboard-radius, 4px); background: color-mix(in srgb, var(--overlay-dark) var(--scoreboard-surface, 100%), transparent); color: var(--overlay-light); font-family: var(--scoreboard-font, var(--overlay-font, var(--display))); font-size: var(--score-root-size, 2.05cqw); font-weight: 700; scale: var(--scoreboard-scale, 1); transform-origin: top left; }
.scorebug-competition { position: absolute; bottom: 100%; left: 0; z-index: 0; max-width: min(100%, 38cqw); padding: .35cqw .75cqw .28cqw; overflow: hidden; border-radius: var(--scoreboard-radius, 4px) var(--scoreboard-radius, 4px) 0 0; background: color-mix(in srgb, var(--overlay-primary) 88%, black); color: var(--overlay-light); font-family: var(--scoreboard-font, var(--overlay-font, var(--display))); font-size: max(7px, .78cqw); font-weight: 700; letter-spacing: .08em; line-height: 1.15; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.scorebug-shadow-none { box-shadow: none; }
.scorebug-shadow-soft { box-shadow: 0 9px 24px rgba(0, 0, 0, .24); }
.scorebug-shadow-strong { box-shadow: 0 13px 34px rgba(0, 0, 0, .48), 0 0 16px color-mix(in srgb, var(--overlay-accent) 16%, transparent); }
.scorebug-style-glass { border: 1px solid color-mix(in srgb, var(--overlay-accent) 42%, transparent); border-bottom-width: var(--scoreboard-accent, 2px); backdrop-filter: blur(12px) saturate(1.2); }
.scorebug-style-glass .scorebug-team { background: color-mix(in srgb, var(--overlay-primary) 22%, transparent); }
.scorebug-style-glass .scorebug-goals, .scorebug-style-glass .scorebug-divider { background: color-mix(in srgb, var(--overlay-primary) 62%, transparent); }
.scorebug-style-glass .scorebug-clock { background: rgba(244,241,234,.82); }
.scorebug-style-minimal { border-bottom-width: var(--scoreboard-accent, 2px); border-radius: var(--scoreboard-radius, 0); background: transparent; }
.scorebug-style-minimal .scorebug-team { background: color-mix(in srgb, var(--overlay-dark) var(--scoreboard-surface, 92%), transparent); }
.scorebug-style-minimal .scorebug-goals, .scorebug-style-minimal .scorebug-divider { background: var(--overlay-primary); }
.scorebug-style-contrast { border: max(1px, var(--scoreboard-accent, 2px)) solid var(--overlay-accent); background: #050507; }
.scorebug-style-contrast .scorebug-team { background: #09090d; }
.scorebug-style-contrast .scorebug-goals, .scorebug-style-contrast .scorebug-divider { background: var(--overlay-accent); color: #100d12; }
.scorebug-style-contrast .scorebug-clock { background: #fff; color: #050507; }
.scorebug-style-neon { border: 1px solid var(--overlay-accent); background: color-mix(in srgb, var(--overlay-dark) 88%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--overlay-accent) 55%, transparent), 0 0 18px color-mix(in srgb, var(--overlay-accent) 45%, transparent), 0 0 34px color-mix(in srgb, var(--overlay-primary) 30%, transparent); }
.scorebug-style-neon .scorebug-team { background: color-mix(in srgb, var(--overlay-primary) 26%, transparent); }
.scorebug-style-neon .scorebug-goals, .scorebug-style-neon .scorebug-divider { background: var(--overlay-dark); color: var(--overlay-accent); text-shadow: 0 0 10px color-mix(in srgb, var(--overlay-accent) 80%, transparent); }
.scorebug-style-neon .scorebug-clock { background: color-mix(in srgb, var(--overlay-dark) 92%, transparent); color: var(--overlay-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--overlay-accent) 40%, transparent); }
.scorebug-style-neon .scorebug-period { background: color-mix(in srgb, var(--overlay-primary) 55%, transparent); }
.scorebug-style-ribbon { border: 0; border-bottom-width: var(--scoreboard-accent, 3px); clip-path: polygon(1.4cqw 0, 100% 0, 100% 100%, 0 100%); background: color-mix(in srgb, var(--overlay-dark) var(--scoreboard-surface, 100%), transparent); }
.scorebug-style-ribbon .scorebug-team:first-child { padding-left: 1.8cqw; }
.scorebug-style-ribbon .scorebug-goals, .scorebug-style-ribbon .scorebug-divider { background: linear-gradient(180deg, var(--overlay-accent), color-mix(in srgb, var(--overlay-accent) 60%, black)); color: var(--overlay-dark); }
.scorebug-style-gradient { overflow: hidden; border: 0; border-radius: calc(var(--scoreboard-radius, 4px) + 8px); background: linear-gradient(115deg, var(--overlay-primary), color-mix(in srgb, var(--overlay-primary) 35%, var(--overlay-accent))); box-shadow: 0 14px 30px color-mix(in srgb, var(--overlay-primary) 45%, transparent); }
.scorebug-style-gradient .scorebug-team { background: rgba(255,255,255,.1); }
.scorebug-style-gradient .scorebug-goals, .scorebug-style-gradient .scorebug-divider { background: var(--overlay-dark); color: var(--overlay-light); }
.scorebug-team { min-width: 13.6cqw; padding: 0 .8cqw; display: flex; align-items: center; justify-content: center; gap: .7cqw; letter-spacing: .5px; }
.scorebug-layout-compact .scorebug-team { min-width: 7.3cqw; padding: 0 .65cqw; }
.scorebug-layout-compact .scorebug-team-name { letter-spacing: .09em; }
.scorebug-layout-expanded .scorebug-team { width: 20cqw; min-width: 20cqw; justify-content: flex-start; }
.scorebug-layout-expanded .scorebug-team-name { overflow: hidden; font-size: max(8px, 1.62cqw); text-overflow: ellipsis; white-space: nowrap; }
.scorebug-badge { width: 1.9cqw; height: 1.9cqw; min-width: 14px; min-height: 14px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: color-mix(in srgb, var(--team-color, var(--overlay-primary)) 32%, #14131a); }
.scorebug-badge img { width: 92%; height: 92%; object-fit: contain; }
.scorebug-badge-fallback { color: #fff; font-family: var(--scoreboard-font, var(--display)); font-size: clamp(7px, .82cqw, 12px); font-weight: 800; letter-spacing: .02em; }
.scorebug-layout-compact .scorebug-badge { width: 1.55cqw; height: 1.55cqw; }
.scorebug-layout-card { overflow: hidden; border-bottom-width: 0; border-radius: 999px; box-shadow: 0 10px 26px rgba(0,0,0,.32); }
.scorebug-layout-card .scorebug-team { width: 15.5cqw; min-width: 15.5cqw; padding: 0 1.1cqw 0 .5cqw; justify-content: flex-start; }
.scorebug-layout-card .scorebug-team:first-child { border-radius: 999px 0 0 999px; }
.scorebug-layout-card .scorebug-badge { width: 2.5cqw; height: 2.5cqw; min-width: 19px; min-height: 19px; border: 2px solid color-mix(in srgb, var(--team-color, var(--overlay-accent)) 75%, white); box-shadow: 0 0 0 3px rgba(0,0,0,.22); }
.scorebug-layout-card .scorebug-team-name { overflow: hidden; font-size: max(8px, 1.4cqw); text-overflow: ellipsis; white-space: nowrap; }
.scorebug-layout-card .scorebug-clock { border-radius: 0 999px 999px 0; }
.scorebug-layout-duel { overflow: hidden; border-bottom-width: 0; }
.scorebug-layout-duel .scorebug-team { position: relative; min-width: 9.8cqw; padding: 0 1.15cqw; background: color-mix(in srgb, var(--team-color, var(--overlay-primary)) 52%, #0c0b10); clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); }
.scorebug-layout-duel .scorebug-team:last-child { clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); margin-left: -1.7cqw; }
.scorebug-layout-duel .scorebug-badge { background: rgba(0,0,0,.35); }
.scorebug-layout-duel .scorebug-team-name { font-weight: 800; letter-spacing: .08em; }
.scorebug-layout-duel .scorebug-goals, .scorebug-layout-duel .scorebug-divider { background: var(--overlay-dark); }
.scorebug.is-morphing { will-change: transform, filter; }
.scorebug.is-morphing.morph-to-expanded { animation: score-layout-expand var(--scoreboard-morph-duration, 720ms) cubic-bezier(.16,1,.3,1) both; animation-delay: var(--scoreboard-morph-offset, 0ms); }
.scorebug.is-morphing.morph-to-compact { animation: score-layout-contract var(--scoreboard-morph-duration, 720ms) cubic-bezier(.16,1,.3,1) both; animation-delay: var(--scoreboard-morph-offset, 0ms); }
.scorebug.is-morphing .scorebug-team-name, .scorebug.is-morphing .scorebug-dot { animation: score-layout-content var(--scoreboard-morph-duration, 720ms) cubic-bezier(.16,1,.3,1) both; animation-delay: var(--scoreboard-morph-offset, 0ms); }
.scorebug-dot { width: .8cqw; min-width: 5px; height: .8cqw; min-height: 5px; border-radius: 50%; background: var(--dot-color); }
.scorebug-goals { min-width: 4.6cqw; display: grid; place-items: center; background: color-mix(in srgb, var(--overlay-primary) 80%, black); font-size: var(--score-goal-size, 2.8cqw); transition: background .22s, color .22s; }
.scorebug-divider { min-width: 1.3cqw; display: grid; place-items: center; background: color-mix(in srgb, var(--overlay-primary) 80%, black); font-size: clamp(9px, 1.5cqw, 15px); }
.scorebug-clock { min-width: 10.5cqw; padding: 0 .7cqw; display: grid; align-content: center; justify-items: center; background: #f3f0e9; color: #151319; line-height: 1.03; }
.scorebug-clock small { font-family: var(--font); font-size: max(6px, .73cqw); font-weight: 600; }
.scorebug-sets { min-width: 1.9cqw; height: 2cqw; margin-left: .3cqw; display: grid; place-items: center; border-radius: 3px; background: color-mix(in srgb, var(--overlay-accent) 86%, white); color: #171319; font-size: clamp(9px, 1.55cqw, 17px); }
.serve-indicator { margin-left: .1cqw; color: var(--overlay-accent); font-size: clamp(7px, .95cqw, 12px); animation: serve-pulse 1.35s ease-in-out infinite; }
.possession-arrow { color: var(--overlay-accent); font-size: clamp(8px, 1cqw, 12px); }
.scorebug-set-label { min-width: 8.9cqw; }
.scorebug-set-label span { font-size: clamp(9px, 1.45cqw, 17px); }
.scorebug-shot { min-width: 4.1cqw; display: grid; place-items: center; background: #24221d; color: var(--overlay-accent); font-size: clamp(11px, 2.15cqw, 24px); }
.scorebug-shot.shot-warning { background: #ad323f; color: white; animation: danger-pulse .55s ease-in-out infinite; }
.scorebug-fouls { min-width: 7cqw; padding: 0 .6cqw; display: grid; align-content: center; justify-items: center; background: #272329; color: #fff; line-height: 1.08; }
.scorebug-fouls span { font-family: var(--font); font-size: max(6px, .66cqw); }
.scorebug-fouls strong { color: var(--overlay-accent); font-size: clamp(9px, 1.4cqw, 17px); }
.scorebug-volleyball.scorebug-layout-expanded .scorebug-team { min-width: 21cqw; }
.scorebug-basketball.scorebug-layout-expanded .scorebug-team, .scorebug-futsal.scorebug-layout-expanded .scorebug-team { min-width: 19cqw; }
.score-pop { animation: score-number-pop .85s cubic-bezier(.2,.75,.2,1) both; animation-delay: var(--score-motion-offset, 0ms); }
.scorebug-goal-celebration { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; gap: 1.1cqw; overflow: hidden; background: linear-gradient(105deg, color-mix(in srgb, var(--goal-team-color, var(--overlay-primary)) 88%, black), var(--overlay-dark)); color: var(--overlay-accent); }
.scorebug-goal-celebration.is-entering { animation: goal-overlay-in .42s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--goal-entry-offset, 0ms); }
.scorebug-goal-celebration.is-exiting { animation: goal-overlay-out .45s cubic-bezier(.7,0,.84,0) both; animation-delay: var(--goal-exit-offset, 0ms); }
.scorebug-goal-celebration strong { display: flex; font-family: var(--scoreboard-font, var(--display)); font-size: var(--score-goal-size, 2.8cqw); letter-spacing: .12em; line-height: 1; }
.scorebug-goal-celebration strong span { display: inline-block; }
.scorebug-goal-celebration small { max-width: none; overflow: visible; color: var(--overlay-light); font-family: var(--scoreboard-font, var(--display)); font-size: var(--score-root-size, 2.05cqw); letter-spacing: .04em; text-overflow: clip; text-transform: uppercase; white-space: nowrap; }
.goal-team-only { width: 100%; padding: 0 1.2cqw; justify-content: center; overflow: visible; color: var(--overlay-light); font-size: min(var(--score-goal-size, 2.8cqw), 2.45cqw) !important; letter-spacing: .045em !important; text-align: center; text-overflow: clip; text-transform: uppercase; white-space: nowrap; }
.goal-team-only.goal-name-long { font-size: 1.9cqw !important; letter-spacing: .025em !important; }
.goal-team-only.goal-name-xlong { font-size: 1.5cqw !important; letter-spacing: .01em !important; }
.goal-phase-team .goal-team-only { animation: goal-team-arrive .5s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--goal-phase-offset, 0ms); }
.scorebug-card-notice { position: absolute; inset: 0; z-index: 9; padding: 0 1.05cqw; display: flex; align-items: center; gap: .85cqw; overflow: hidden; border-left: .45cqw solid var(--card-team-color); background: linear-gradient(105deg, color-mix(in srgb, var(--card-team-color) 34%, #121117), #0b0b0f); color: #fff; }
.scorebug-card-notice.is-entering { animation: card-notice-in .42s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--card-motion-offset, 0ms); }
.scorebug-card-notice.is-exiting { animation: card-notice-out .45s cubic-bezier(.7,0,.84,0) both; animation-delay: var(--card-motion-offset, 0ms); }
.scorebug-card-notice > i { width: 1.55cqw; height: 2.35cqw; min-width: 9px; border-radius: 2px; background: #f1c232; box-shadow: 0 0 14px rgba(241,194,50,.24); transform: rotate(-5deg); }
.scorebug-card-notice.card-red > i { background: #e34855; box-shadow: 0 0 14px rgba(227,72,85,.3); }
.scorebug-card-notice > div { min-width: 0; display: grid; gap: .08cqw; }
.scorebug-card-notice small { color: rgba(255,255,255,.66); font-family: var(--font); font-size: max(6px,.66cqw); font-weight: 700; letter-spacing: .09em; }
.scorebug-card-notice strong { max-width: 28cqw; overflow: hidden; font-size: max(10px,1.6cqw); letter-spacing: .035em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.scorebug-card-notice > span { margin-left: auto; color: var(--overlay-accent); font-size: max(9px,1.2cqw); }
.scorebug.is-recovering > :not(.scorebug-goal-celebration):not(.scorebug-card-notice) { animation: score-content-return .52s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--scoreboard-recovery-offset, 0ms); }
.scorebug.is-entering.scorebug-animation-assemble { animation: score-shell-assemble-in var(--scoreboard-motion-duration, 850ms) cubic-bezier(.16,1,.3,1) both; animation-delay: var(--scoreboard-motion-offset, 0ms); }
.scorebug.is-entering.scorebug-animation-assemble > :not(.scorebug-goal-celebration):not(.scorebug-card-notice) { animation: score-piece-in var(--scoreboard-motion-duration, 850ms) cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--piece-delay, 0ms) + var(--scoreboard-motion-offset, 0ms)); }
.scorebug.is-entering.scorebug-animation-assemble > :nth-child(1), .scorebug.is-exiting.scorebug-animation-assemble > :nth-child(1) { --piece-delay: 55ms; --piece-exit-delay: 180ms; }
.scorebug.is-entering.scorebug-animation-assemble > :nth-child(2), .scorebug.is-exiting.scorebug-animation-assemble > :nth-child(2) { --piece-delay: 110ms; --piece-exit-delay: 135ms; }
.scorebug.is-entering.scorebug-animation-assemble > :nth-child(3), .scorebug.is-exiting.scorebug-animation-assemble > :nth-child(3) { --piece-delay: 165ms; --piece-exit-delay: 90ms; }
.scorebug.is-entering.scorebug-animation-assemble > :nth-child(4), .scorebug.is-exiting.scorebug-animation-assemble > :nth-child(4) { --piece-delay: 220ms; --piece-exit-delay: 45ms; }
.scorebug.is-entering.scorebug-animation-assemble > :nth-child(5), .scorebug.is-exiting.scorebug-animation-assemble > :nth-child(5) { --piece-delay: 275ms; --piece-exit-delay: 0ms; }
.scorebug.is-exiting.scorebug-animation-assemble { animation: score-shell-assemble-out var(--scoreboard-motion-duration, 850ms) cubic-bezier(.7,0,.84,0) both; animation-delay: var(--scoreboard-motion-offset, 0ms); }
.scorebug.is-exiting.scorebug-animation-assemble > :not(.scorebug-goal-celebration):not(.scorebug-card-notice) { animation: score-piece-out var(--scoreboard-motion-duration, 850ms) cubic-bezier(.7,0,.84,0) both; animation-delay: calc(var(--piece-exit-delay, 0ms) + var(--scoreboard-motion-offset, 0ms)); }
.scorebug.is-entering.scorebug-animation-slide { animation: score-slide-in var(--scoreboard-motion-duration, 850ms) cubic-bezier(.16,1,.3,1) both; animation-delay: var(--scoreboard-motion-offset, 0ms); }
.scorebug.is-exiting.scorebug-animation-slide { animation: score-slide-out var(--scoreboard-motion-duration, 850ms) cubic-bezier(.7,0,.84,0) both; animation-delay: var(--scoreboard-motion-offset, 0ms); }
.scorebug.is-entering.scorebug-animation-zoom { animation: score-zoom-in var(--scoreboard-motion-duration, 850ms) cubic-bezier(.16,1,.3,1) both; animation-delay: var(--scoreboard-motion-offset, 0ms); }
.scorebug.is-exiting.scorebug-animation-zoom { animation: score-zoom-out var(--scoreboard-motion-duration, 850ms) cubic-bezier(.7,0,.84,0) both; animation-delay: var(--scoreboard-motion-offset, 0ms); }
.scorebug.is-entering.scorebug-animation-flip { animation: score-flip-in var(--scoreboard-motion-duration, 850ms) cubic-bezier(.16,1,.3,1) both; animation-delay: var(--scoreboard-motion-offset, 0ms); backface-visibility: hidden; }
.scorebug.is-exiting.scorebug-animation-flip { animation: score-flip-out var(--scoreboard-motion-duration, 850ms) cubic-bezier(.7,0,.84,0) both; animation-delay: var(--scoreboard-motion-offset, 0ms); backface-visibility: hidden; }
.scorebug.is-entering.scorebug-animation-elastic { animation: score-elastic-in var(--scoreboard-motion-duration, 850ms) cubic-bezier(.34,1.56,.64,1) both; animation-delay: var(--scoreboard-motion-offset, 0ms); }
.scorebug.is-exiting.scorebug-animation-elastic { animation: score-elastic-out var(--scoreboard-motion-duration, 850ms) cubic-bezier(.7,0,.84,0) both; animation-delay: var(--scoreboard-motion-offset, 0ms); }
.scorebug.is-entering.scorebug-animation-glitch { animation: score-glitch-in var(--scoreboard-motion-duration, 850ms) steps(7,end) both; animation-delay: var(--scoreboard-motion-offset, 0ms); }
.scorebug.is-exiting.scorebug-animation-glitch { animation: score-glitch-out var(--scoreboard-motion-duration, 850ms) steps(7,end) both; animation-delay: var(--scoreboard-motion-offset, 0ms); }
.event-banner { position: absolute; top: var(--event-y, 72%); left: var(--event-x, 4%); min-width: 39%; overflow: hidden; border-left: .6cqw solid var(--overlay-accent); border-radius: 3px; background: var(--overlay-dark); box-shadow: 0 12px 26px rgba(0, 0, 0, .34); color: var(--overlay-light); font-family: var(--event-font, var(--overlay-font)); scale: var(--event-scale, 1); transform-origin: top left; }
.event-banner.is-entering { animation: banner-arrive .58s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--event-motion-offset, 0ms); }
.event-banner.is-exiting { animation: banner-leave .5s cubic-bezier(.7,0,.84,0) both; animation-delay: var(--event-motion-offset, 0ms); }
.event-banner.event-position-center { translate: -50% 0; transform-origin: top center; }
.event-banner.event-position-right { translate: -100% 0; transform-origin: top right; }
.event-banner::after { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 24%, rgba(255,255,255,.14) 48%, transparent 68%); content: ''; pointer-events: none; opacity: 0; }
.event-banner.is-entering::after { opacity: 1; animation: banner-shimmer 1.2s ease-out both; animation-delay: calc(150ms + var(--event-motion-offset, 0ms)); }
.event-banner-head { padding: .7cqw 1.3cqw .25cqw; color: var(--overlay-accent); font-size: var(--event-head-size, 1.1cqw); font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.event-banner-name { padding: 0 1.3cqw .9cqw; font-family: var(--event-font, var(--overlay-font, var(--display))); font-size: var(--event-name-size, 2.75cqw); font-weight: 700; letter-spacing: .55px; text-transform: uppercase; }
.event-banner-note { padding: 0 1.3cqw .8cqw; color: color-mix(in srgb, var(--overlay-light) 65%, transparent); font-size: var(--event-note-size, 1cqw); }
.event-banner.event-style-minimal { min-width: 34%; border: 0; border-bottom: .22cqw solid var(--overlay-accent); border-radius: 0; background: rgba(7,9,12,.82); box-shadow: none; }
.event-style-minimal .event-banner-head { padding-bottom: .12cqw; font-size: calc(var(--event-head-size, 1.1cqw) * .82); }
.event-style-minimal .event-banner-name { padding-bottom: .62cqw; font-weight: 600; }
.event-banner.event-style-block { min-width: 31%; border: 1px solid rgba(255,255,255,.24); border-left: 1.1cqw solid var(--overlay-primary); border-radius: 0; background: #101319; box-shadow: .7cqw .7cqw 0 color-mix(in srgb, var(--overlay-accent) 72%, transparent); }
.event-style-block .event-banner-head { display: inline-block; margin: .55cqw 1.15cqw .2cqw; padding: .3cqw .55cqw; background: var(--overlay-accent); color: #0b0c0f; }
.goal-word { padding: .45cqw 1.25cqw .1cqw; display: flex; overflow: hidden; color: var(--overlay-accent); font-size: var(--goal-word-size, 3.24cqw); font-weight: 800; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
.goal-word span { display: inline-block; }
.goal-animation-typewriter span { opacity: 0; animation: goal-letter-write .32s cubic-bezier(.2,.75,.2,1) forwards; animation-delay: calc(var(--letter-index) * 90ms + 120ms + var(--goal-phase-offset, 0ms)); }
.goal-animation-bounce span { animation: goal-letter-bounce .65s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--letter-index) * 65ms + var(--goal-phase-offset, 0ms)); }
.goal-animation-sweep { position: relative; }
.goal-animation-sweep .goal-word-in-scoreboard { animation: goal-sweep-in .75s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--goal-phase-offset, 0ms); }
.goal-animation-sweep::after { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.75) 48%, transparent 75%); content: ''; animation: goal-light-sweep 1s ease-out both; animation-delay: calc(250ms + var(--goal-phase-offset, 0ms)); }
.sponsor-banner { position: absolute; top: var(--sponsor-y, 7%); left: var(--sponsor-x, 78%); overflow: hidden; color: #fff; font-family: var(--sponsor-font, var(--display)); scale: var(--sponsor-scale, 1); transform-origin: top left; text-align: center; }
.sponsor-banner.is-entering.sponsor-animation-slide { animation: sponsor-slide-in var(--sponsor-motion-duration, 680ms) cubic-bezier(.16,1,.3,1) both; animation-delay: var(--sponsor-motion-offset, 0ms); }
.sponsor-banner.is-exiting.sponsor-animation-slide { animation: sponsor-slide-out var(--sponsor-motion-duration, 680ms) cubic-bezier(.7,0,.84,0) both; animation-delay: var(--sponsor-motion-offset, 0ms); }
.sponsor-banner.is-entering.sponsor-animation-zoom { animation: sponsor-zoom-in var(--sponsor-motion-duration, 680ms) cubic-bezier(.16,1,.3,1) both; animation-delay: var(--sponsor-motion-offset, 0ms); }
.sponsor-banner.is-exiting.sponsor-animation-zoom { animation: sponsor-zoom-out var(--sponsor-motion-duration, 680ms) cubic-bezier(.7,0,.84,0) both; animation-delay: var(--sponsor-motion-offset, 0ms); }
.sponsor-banner.is-entering.sponsor-animation-flip { animation: sponsor-flip-in var(--sponsor-motion-duration, 680ms) cubic-bezier(.16,1,.3,1) both; animation-delay: var(--sponsor-motion-offset, 0ms); backface-visibility: hidden; }
.sponsor-banner.is-exiting.sponsor-animation-flip { animation: sponsor-flip-out var(--sponsor-motion-duration, 680ms) cubic-bezier(.7,0,.84,0) both; animation-delay: var(--sponsor-motion-offset, 0ms); backface-visibility: hidden; }
.sponsor-banner.is-entering.sponsor-animation-fade { animation: sponsor-fade-in var(--sponsor-motion-duration, 680ms) ease both; animation-delay: var(--sponsor-motion-offset, 0ms); }
.sponsor-banner.is-exiting.sponsor-animation-fade { animation: sponsor-fade-out var(--sponsor-motion-duration, 680ms) ease both; animation-delay: var(--sponsor-motion-offset, 0ms); }
.sponsor-banner-text { padding: .8cqw 1.25cqw; border-top: 2px solid var(--overlay-accent); background: rgba(14, 12, 18, .87); }
.sponsor-banner small { display: block; color: #c8c4c0; font-size: var(--sponsor-small-size, .8cqw); letter-spacing: 1px; }
.sponsor-banner strong { font-family: var(--sponsor-font, var(--display)); font-size: var(--sponsor-name-size, 1.8cqw); }
.sponsor-banner-graphic { width: 25cqw; aspect-ratio: 16 / 9; border: 2px solid color-mix(in srgb, var(--overlay-accent) 72%, transparent); border-radius: 5px; background: rgba(10, 9, 14, .94); box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.sponsor-banner-graphic img { width: 100%; height: 100%; display: block; object-fit: contain; }
.sponsor-banner-with-name { overflow: visible; }
.sponsor-banner-with-name > img, .sponsor-banner-with-name > .sponsor-banner-placeholder { overflow: hidden; border-radius: 3px 3px 0 0; }
.sponsor-banner-name { padding: .5cqw .8cqw .6cqw; border-top: 2px solid var(--overlay-accent); border-radius: 0 0 5px 5px; background: rgba(14,12,18,.94); box-shadow: 0 10px 20px rgba(0,0,0,.28); }
.sponsor-banner-name small { font-size: max(6px, calc(var(--sponsor-small-size, .8cqw) * .78)); }
.sponsor-banner-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sponsor-banner-placeholder { width: 100%; height: 100%; padding: 1.2cqw; display: grid; place-content: center; gap: .35cqw; background: radial-gradient(circle at 24% 18%, color-mix(in srgb, var(--overlay-primary) 58%, transparent), transparent 48%), linear-gradient(135deg, var(--overlay-dark), #09080d); }
.sponsor-banner-placeholder strong { max-width: 21cqw; overflow: hidden; color: var(--overlay-accent); font-size: var(--sponsor-name-size, 1.8cqw); text-overflow: ellipsis; white-space: nowrap; }
.sponsor-banner-placeholder span { color: rgba(255,255,255,.38); font-size: max(6px, .63cqw); letter-spacing: .18em; }
.sponsor-logo-name { min-width: 18cqw; min-height: 5.6cqw; padding: .55cqw 1.05cqw .55cqw .65cqw; display: flex; align-items: center; gap: .8cqw; border-left: .35cqw solid var(--overlay-accent); border-radius: 5px; background: rgba(14,12,18,.94); box-shadow: 0 12px 28px rgba(0,0,0,.35); text-align: left; }
.sponsor-logo-box { width: 4.35cqw; height: 4.35cqw; flex: 0 0 auto; display: grid; place-items: center; border-radius: 4px; background: rgba(255,255,255,.96); color: var(--overlay-primary); font-size: 1.4cqw; font-weight: 800; }
.sponsor-logo-box img { width: 90%; height: 90%; object-fit: contain; }
.sponsor-logo-name strong { display: block; max-width: 17cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sponsor-style-clean { border: 1px solid rgba(255,255,255,.22) !important; border-radius: 0 !important; background: rgba(9,11,15,.76) !important; box-shadow: none !important; }
.sponsor-style-clean .sponsor-logo-box { border-radius: 0; background: transparent; }
.sponsor-style-ribbon { border: 0 !important; border-left: .5cqw solid var(--overlay-accent) !important; border-radius: 0 !important; background: linear-gradient(90deg, var(--overlay-primary), #101218 68%) !important; box-shadow: .45cqw .45cqw 0 rgba(0,0,0,.28) !important; }
.sponsor-style-ribbon .sponsor-banner-name { border-radius: 0; background: var(--overlay-primary); }
.lineup-banner { position: absolute; top: var(--lineup-y, 18%); left: var(--lineup-x, 7%); width: 40%; max-height: 73%; overflow: hidden; border-top: 3px solid var(--overlay-accent); background: rgba(13, 11, 17, .91); color: #fff; font-family: var(--lineup-font, var(--display)); scale: var(--lineup-scale, 1); transform-origin: top left; }
.lineup-banner.is-entering { animation: lineup-arrive .6s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--lineup-motion-offset, 0ms); }
.lineup-banner.is-exiting { animation: lineup-leave .6s cubic-bezier(.7,0,.84,0) both; animation-delay: var(--lineup-motion-offset, 0ms); }
.lineup-banner.is-exiting .lineup-player { animation: player-leave .3s ease-in both; animation-delay: calc((10 - var(--player-index, 0)) * 22ms + var(--lineup-motion-offset, 0ms)); }
.lineup-banner-title { padding: 1.2cqw 1.4cqw .6cqw; color: var(--overlay-accent); font-family: var(--lineup-font, var(--display)); font-size: var(--lineup-title-size, 2.5cqw); letter-spacing: 1px; }
.lineup-player { padding: .36cqw 1.4cqw; display: flex; align-items: center; gap: 1cqw; font-size: var(--lineup-player-size, 1.2cqw); }
.lineup-banner.is-entering .lineup-player { animation: player-arrive .38s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--player-index, 0) * 48ms + 120ms + var(--lineup-motion-offset, 0ms)); }
.lineup-player span { min-width: 2cqw; color: var(--overlay-accent); font-weight: 700; }
.lineup-banner.lineup-style-clean { border: 1px solid rgba(255,255,255,.22); border-left: .28cqw solid var(--overlay-accent); border-top: 0; background: rgba(8,10,14,.78); }
.lineup-style-clean .lineup-banner-title { border-bottom: 1px solid rgba(255,255,255,.18); color: #fff; font-size: calc(var(--lineup-title-size, 2.5cqw) * .72); }
.lineup-style-clean .lineup-player { border-bottom: 1px solid rgba(255,255,255,.09); }
.lineup-banner.lineup-style-columns { width: 58%; display: flex; flex-wrap: wrap; border-top: 0; border-left: .45cqw solid var(--overlay-accent); background: #101319; }
.lineup-style-columns .lineup-banner-title { width: 100%; background: var(--overlay-primary); color: #fff; }
.lineup-style-columns .lineup-player { width: 50%; border-bottom: 1px solid rgba(255,255,255,.12); }
.photo-lineup { position: absolute; top: var(--photo-lineup-y, 12%); left: var(--photo-lineup-x, 7%); width: 86cqw; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-left: .42cqw solid var(--photo-team-color); border-radius: var(--photo-lineup-radius, 2px); background: color-mix(in srgb, #0b0d12 var(--photo-lineup-surface, 96%), transparent); box-shadow: 0 1.2cqw 2.4cqw rgba(0,0,0,.34); color: var(--overlay-light); font-family: var(--photo-lineup-font, var(--display)); scale: var(--photo-lineup-scale, 1); transform-origin: top left; }
.photo-lineup::before { position: absolute; inset: 0 0 auto; height: .22cqw; background: var(--overlay-accent); content: ''; pointer-events: none; }
.photo-lineup.is-entering { animation: photo-lineup-arrive .72s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--photo-lineup-motion-offset, 0ms); }
.photo-lineup.is-exiting { animation: photo-lineup-leave .72s cubic-bezier(.7,0,.84,0) both; animation-delay: var(--photo-lineup-motion-offset, 0ms); }
.photo-lineup-head { position: relative; min-height: 5cqw; padding: .62cqw 1.25cqw; display: grid; grid-template-columns: 3.7cqw minmax(0,1fr) auto; align-items: center; gap: 1cqw; border-bottom: 1px solid rgba(255,255,255,.18); background: color-mix(in srgb, var(--photo-team-color) 26%, #101217); }
.photo-lineup-team-mark { width: 3.35cqw; height: 3.35cqw; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.36); border-radius: 1px; background: #fff; color: var(--photo-team-color); font-size: 1.05cqw; font-weight: 800; }
.photo-lineup-team-mark img { width: 84%; height: 84%; object-fit: contain; }
.photo-lineup-head small { color: rgba(255,255,255,.7); font-size: .68cqw; font-weight: 700; letter-spacing: .16em; }
.photo-lineup-head h2 { margin: 0; overflow: hidden; font-family: var(--photo-lineup-font, var(--display)); font-size: calc(var(--photo-lineup-title-size, 2.2cqw) * 1.1); font-weight: 700; line-height: .95; letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; }
.photo-lineup-head > span { padding: .46cqw .72cqw; border-left: 2px solid var(--overlay-accent); background: rgba(0,0,0,.28); color: #fff; font-size: .68cqw; font-weight: 700; letter-spacing: .13em; }
.photo-lineup-body { position: relative; min-height: 27cqw; overflow: hidden; }
.photo-lineup.is-stage-changing .photo-lineup-body > * { animation: photo-lineup-stage-change .62s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--photo-lineup-stage-offset, 0ms); }
.photo-lineup-stage-individual.is-stage-changing .lineup-spotlight::before { position: absolute; inset: 0; z-index: 4; background: linear-gradient(110deg, transparent 0 42%, color-mix(in srgb, var(--photo-team-color) 82%, #fff) 48%, var(--overlay-accent) 50%, transparent 57%); content: ''; pointer-events: none; animation: player-transition-sweep .62s cubic-bezier(.45,0,.2,1) both; animation-delay: var(--photo-lineup-stage-offset, 0ms); }
.photo-lineup-stage-individual.is-stage-changing .lineup-spotlight-photo { animation: player-photo-reveal .62s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--photo-lineup-stage-offset, 0ms); }
.photo-lineup-stage-individual.is-stage-changing .lineup-spotlight-number { animation: player-number-reveal .54s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--photo-lineup-stage-offset, 0ms) + 70ms); }
.photo-lineup-stage-individual.is-stage-changing .lineup-spotlight-copy > * { animation: player-copy-reveal .48s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--photo-lineup-stage-offset, 0ms) + 120ms); }
.photo-lineup-stage-individual.is-player-previous .lineup-spotlight-photo { animation-name: player-photo-reveal-previous; }
.photo-lineup-stage-individual.is-player-previous .lineup-spotlight::before { transform: scaleX(-1); }
.photo-lineup-grid { position: relative; min-height: 27cqw; padding: .8cqw 1.15cqw; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); align-content: center; gap: .42cqw; background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.012)); }
.photo-player { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: .24cqw; background: linear-gradient(180deg, #191c24, #111319); box-shadow: 0 .38cqw .8cqw rgba(0,0,0,.22); }
.photo-lineup.is-entering .photo-player { animation: photo-player-arrive .48s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(170ms + var(--player-index, 0) * 48ms + var(--photo-lineup-motion-offset, 0ms)); }
.photo-lineup.is-exiting .photo-player { animation: photo-player-leave .3s ease-in both; animation-delay: calc((10 - var(--player-index, 0)) * 18ms + var(--photo-lineup-motion-offset, 0ms)); }
.photo-player:first-child:nth-last-child(5), .photo-player:nth-child(7):nth-last-child(5) { grid-column: 2; }
.photo-player-image { position: relative; height: 8.85cqw; overflow: hidden; display: grid; place-items: center; background: linear-gradient(145deg, color-mix(in srgb, var(--photo-team-color) 48%, #11151c), #0c0e13); }
.photo-player-image::after { position: absolute; inset: auto 0 0; height: 32%; background: linear-gradient(transparent, rgba(0,0,0,.66)); content: ''; }
.photo-player-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; }
.photo-player-fallback { color: color-mix(in srgb, var(--overlay-light) 86%, transparent); font-size: 3.1cqw; font-weight: 800; letter-spacing: -.05em; opacity: .72; }
.photo-player-image b { position: absolute; left: .48cqw; bottom: .42cqw; z-index: 1; min-width: 2.15cqw; padding: .28cqw .42cqw .22cqw; border-left: .18cqw solid var(--overlay-accent); background: var(--photo-team-color); color: #fff; font-size: calc(var(--photo-lineup-number-size, 1.75cqw) * .9); line-height: 1; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,.45); }
.photo-player-copy { min-height: 3.5cqw; padding: .48cqw .58cqw; display: grid; align-content: center; justify-items: start; gap: .28cqw; border-top: .18cqw solid var(--photo-team-color); }
.photo-player-copy strong { overflow: hidden; display: -webkit-box; font-size: calc(var(--photo-lineup-name-size, 1.08cqw) * 1.2); line-height: 1.02; text-transform: uppercase; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.photo-player-copy small { width: max-content; padding: .16cqw .34cqw .12cqw; background: var(--photo-team-color); color: #fff; font-size: .76cqw; font-weight: 800; letter-spacing: .1em; line-height: 1; }
.lineup-spotlight { position: relative; min-height: 27cqw; display: grid; grid-template-columns: 29cqw 10cqw minmax(0,1fr); align-items: stretch; background: linear-gradient(112deg, #11141a 0 46%, color-mix(in srgb, var(--photo-team-color) 28%, #11141a) 100%); }
.lineup-spotlight::after { position: absolute; top: 0; right: 0; width: 28%; height: .3cqw; background: var(--overlay-accent); content: ''; }
.lineup-spotlight-photo { overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--photo-team-color) 46%, #0c0e13); }
.lineup-spotlight-photo img { width: 100%; height: 27cqw; object-fit: cover; object-position: center top; }
.lineup-spotlight-number { display: grid; place-items: center; background: var(--photo-team-color); color: #fff; font-size: 8.2cqw; font-weight: 800; line-height: 1; }
.lineup-spotlight-copy { padding: 2.7cqw 2.5cqw; display: grid; align-content: center; justify-items: start; }
.lineup-spotlight-copy small { padding: .35cqw .62cqw .28cqw; border-left: .24cqw solid var(--overlay-accent); background: var(--photo-team-color); color: #fff; font-size: 1.2cqw; font-weight: 800; letter-spacing: .18em; line-height: 1; }
.lineup-spotlight-copy h3 { max-width: 42cqw; margin: .7cqw 0 .5cqw; font-size: 4.45cqw; line-height: .92; letter-spacing: -.015em; text-transform: uppercase; }
.lineup-spotlight-copy p { margin: 0; color: rgba(255,255,255,.7); font-size: 1.35cqw; font-weight: 600; }
.bench-list { min-height: 27cqw; padding: 1cqw 1.15cqw; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: center; gap: 1px; background: rgba(255,255,255,.04); }
.bench-player { min-width: 0; min-height: 4.6cqw; display: grid; grid-template-columns: 4.6cqw 3.3cqw minmax(0,1fr); align-items: center; border-bottom: 1px solid rgba(255,255,255,.14); background: #151820; }
.bench-player > div { width: 4.6cqw; height: 4.6cqw; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--photo-team-color) 42%, #0c0e13); }
.bench-player img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.bench-player > b { color: var(--overlay-accent); font-size: 1.55cqw; text-align: center; }
.bench-player > span { min-width: 0; display: grid; gap: .18cqw; }
.bench-player strong { overflow: hidden; font-size: 1.18cqw; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.bench-player small { width: max-content; padding: .12cqw .3cqw; background: var(--photo-team-color); color: #fff; font-size: .72cqw; font-weight: 800; letter-spacing: .1em; }
.lineup-empty-stage { min-height: 27cqw; display: grid; place-content: center; gap: .5cqw; text-align: center; }
.lineup-empty-stage strong { color: var(--overlay-accent); font-size: 2.2cqw; }
.lineup-empty-stage span { color: rgba(255,255,255,.58); font-size: 1cqw; }
.coach-card { min-height: 27cqw; display: grid; grid-template-columns: 34cqw minmax(0,1fr); background: #11141a; }
.coach-photo { overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--photo-team-color) 40%, #0c0e13); color: rgba(255,255,255,.72); font-size: 6cqw; font-weight: 800; }
.coach-photo img { width: 100%; height: 27cqw; object-fit: cover; object-position: center top; }
.coach-card > div:last-child { padding: 3.4cqw 3cqw; display: grid; align-content: center; justify-items: start; border-left: .45cqw solid var(--overlay-accent); }
.coach-card small { color: var(--overlay-accent); font-size: .85cqw; font-weight: 700; letter-spacing: .2em; }
.coach-card h3 { max-width: 42cqw; margin: .7cqw 0 .45cqw; font-size: 3.4cqw; line-height: 1; text-transform: uppercase; }
.coach-card p { margin: 0; color: rgba(255,255,255,.58); font-size: 1cqw; }
.tactical-board { min-height: 27cqw; display: grid; grid-template-columns: minmax(0,1fr) 17cqw; background: #11141a; }
.tactical-pitch { position: relative; min-height: 27cqw; overflow: hidden; border-right: 1px solid rgba(255,255,255,.18); background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 8%, transparent 8%, transparent 16%), color-mix(in srgb, var(--photo-team-color) 42%, #173426); }
.tactical-pitch::before { position: absolute; inset: 4%; border: 1px solid rgba(255,255,255,.48); content: ''; }
.pitch-half { position: absolute; top: 4%; bottom: 4%; left: 4%; width: 15%; border: 1px solid rgba(255,255,255,.48); border-left: 0; top: 24%; bottom: 24%; }
.pitch-circle { position: absolute; top: 50%; right: 4%; width: 14cqw; height: 14cqw; border: 1px solid rgba(255,255,255,.48); border-radius: 50%; transform: translate(50%,-50%); }
.tactical-player { position: absolute; top: var(--player-y); left: var(--player-x); width: 7.5cqw; display: grid; justify-items: center; transform: translate(-50%,-50%); }
.tactical-player b { width: 2.45cqw; height: 2.45cqw; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; background: var(--photo-team-color); color: #fff; box-shadow: 0 .25cqw .7cqw rgba(0,0,0,.38); font-size: 1cqw; }
.tactical-player span { max-width: 7.5cqw; margin-top: .18cqw; padding: .18cqw .38cqw; overflow: hidden; display: grid; justify-items: center; background: rgba(5,7,9,.88); color: #fff; text-transform: uppercase; }
.tactical-player span strong { max-width: 6.8cqw; overflow: hidden; font-size: .66cqw; text-overflow: ellipsis; white-space: nowrap; }
.tactical-player span small { color: var(--overlay-accent); font-size: .48cqw; font-weight: 800; letter-spacing: .12em; }
.tactical-board aside { padding: 2cqw 1.25cqw; display: grid; align-content: center; justify-items: start; }
.tactical-board aside small { color: var(--overlay-accent); font-size: .72cqw; font-weight: 700; letter-spacing: .18em; }
.tactical-board aside strong { margin: .3cqw 0 .55cqw; font-size: 3.2cqw; }
.tactical-board aside span { color: rgba(255,255,255,.58); font-size: .72cqw; letter-spacing: .08em; }
.photo-lineup-sponsors { position: relative; width: 100%; aspect-ratio: 7.5 / 1; overflow: hidden; border-top: 1px solid rgba(255,255,255,.18); background: #08090d; }
.photo-lineup-style-cards { border-left-width: .18cqw; border-radius: .65cqw; }
.photo-lineup-style-cards .photo-lineup-head { background: #11141a; }
.photo-lineup-style-cards .photo-player, .photo-lineup-style-cards .bench-player { margin: .16cqw; border: 1px solid rgba(255,255,255,.2); border-radius: .38cqw; }
.photo-lineup-style-glass { border: 1px solid rgba(255,255,255,.3); border-left: .22cqw solid var(--overlay-accent); background: color-mix(in srgb, #0b0d12 72%, transparent); box-shadow: 0 1.5cqw 3cqw rgba(0,0,0,.3); backdrop-filter: blur(1.1cqw); }
.photo-lineup-style-glass .photo-lineup-head, .photo-lineup-style-glass .photo-player, .photo-lineup-style-glass .bench-player { background: rgba(12,15,20,.68); }
.staff-overlay-grid { min-height: 27cqw; padding: 1cqw; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-content: center; gap: .7cqw; background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--photo-team-color) 24%, transparent), transparent 44%), #11141a; }
.staff-layout-single { grid-template-columns: minmax(0,1fr); padding-inline: 8cqw; }
.staff-layout-double { grid-template-columns: repeat(2,minmax(0,1fr)); padding-inline: 4cqw; }
.staff-overlay-card { min-width: 0; overflow: hidden; display: grid; grid-template-rows: 12cqw minmax(0,1fr); border: 1px solid rgba(255,255,255,.18); background: #171a22; }
.staff-overlay-card .coach-photo { height: 12cqw; font-size: 3.2cqw; }
.staff-overlay-card .coach-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.staff-overlay-card > div:last-child { min-width: 0; padding: .75cqw; border-top: .2cqw solid var(--overlay-accent); }
.staff-overlay-card small { width: max-content; padding: .2cqw .38cqw; background: var(--photo-team-color); color: #fff; font-size: .68cqw; font-weight: 800; letter-spacing: .1em; }
.staff-overlay-card h3 { margin: .35cqw 0 .12cqw; overflow: hidden; font-size: 1.45cqw; line-height: 1; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.staff-overlay-card p { margin: 0; color: rgba(255,255,255,.5); font-size: .58cqw; }
.staff-layout-single .staff-overlay-card { grid-template-columns: 25cqw minmax(0,1fr); grid-template-rows: 25cqw; }
.staff-layout-single .staff-overlay-card .coach-photo { height: 25cqw; font-size: 6cqw; }
.staff-layout-single .staff-overlay-card > div:last-child { padding: 2.5cqw; display: grid; align-content: center; justify-items: start; border-top: 0; border-left: .38cqw solid var(--overlay-accent); }
.staff-layout-single .staff-overlay-card small { font-size: .9cqw; }
.staff-layout-single .staff-overlay-card h3 { margin-block: .65cqw .4cqw; font-size: 3.25cqw; white-space: normal; }
.staff-layout-single .staff-overlay-card p { font-size: 1cqw; }
.staff-layout-double .staff-overlay-card { grid-template-rows: 16cqw minmax(0,1fr); }
.staff-layout-double .staff-overlay-card .coach-photo { height: 16cqw; }
.staff-layout-double .staff-overlay-card h3 { font-size: 1.85cqw; }
.photo-lineup-sponsor { position: absolute; inset: 0; display: block; overflow: hidden; }
.photo-lineup-sponsor img, .photo-lineup-sponsor video { width: 100%; height: 100%; display: block; object-fit: cover; }
.photo-lineup-sponsor-placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: #11141a; color: rgba(255,255,255,.42); font-size: .7cqw; font-weight: 800; letter-spacing: .16em; }
@keyframes slide-in { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scorebug-arrive { from { opacity: 0; transform: translate3d(-22px,-7px,0); filter: blur(4px); } to { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); } }
@keyframes score-shell-assemble-in { from { opacity: 0; clip-path: inset(0 50% 0 50%); filter: blur(5px); } to { opacity: 1; clip-path: inset(0 0 0 0); filter: blur(0); } }
@keyframes score-piece-in { from { opacity: 0; transform: translateY(-24px) rotateX(70deg) scale(.72); } to { opacity: 1; transform: translateY(0) rotateX(0) scale(1); } }
@keyframes score-shell-assemble-out { from { opacity: 1; clip-path: inset(0 0 0 0); filter: blur(0); } to { opacity: 0; clip-path: inset(0 50% 0 50%); filter: blur(5px); } }
@keyframes score-piece-out { from { opacity: 1; transform: translateY(0) rotateX(0) scale(1); } to { opacity: 0; transform: translateY(24px) rotateX(-70deg) scale(.68); } }
@keyframes score-layout-expand { 0% { transform: scaleX(.62); filter: saturate(.8); } 54% { transform: scaleX(1.035); filter: saturate(1.2); } 100% { transform: scaleX(1); filter: saturate(1); } }
@keyframes score-layout-contract { 0% { transform: scaleX(1.62); filter: saturate(.8); } 58% { transform: scaleX(.97); filter: saturate(1.15); } 100% { transform: scaleX(1); filter: saturate(1); } }
@keyframes score-layout-content { 0%,18% { opacity: 0; filter: blur(6px); } 100% { opacity: 1; filter: blur(0); } }
@keyframes score-slide-in { from { opacity: 0; transform: translateX(-120%) skewX(-8deg); filter: blur(5px); } to { opacity: 1; transform: translateX(0) skewX(0); filter: blur(0); } }
@keyframes score-slide-out { from { opacity: 1; transform: translateX(0) skewX(0); filter: blur(0); } to { opacity: 0; transform: translateX(-120%) skewX(8deg); filter: blur(5px); } }
@keyframes score-zoom-in { from { opacity: 0; transform: scale(.35); filter: blur(8px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes score-zoom-out { from { opacity: 1; transform: scale(1); filter: blur(0); } to { opacity: 0; transform: scale(.35); filter: blur(8px); } }
@keyframes score-flip-in { from { opacity: 0; transform: perspective(800px) rotateX(-90deg); transform-origin: top; } to { opacity: 1; transform: perspective(800px) rotateX(0); transform-origin: top; } }
@keyframes score-flip-out { from { opacity: 1; transform: perspective(800px) rotateX(0); transform-origin: top; } to { opacity: 0; transform: perspective(800px) rotateX(90deg); transform-origin: top; } }
@keyframes score-elastic-in { 0% { opacity: 0; transform: scale(.4) translateY(14px); } 55% { opacity: 1; transform: scale(1.08) translateY(-5px); } 78% { transform: scale(.96) translateY(2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes score-elastic-out { 0% { opacity: 1; transform: scale(1) translateY(0); } 30% { transform: scale(1.06) translateY(-4px); } 100% { opacity: 0; transform: scale(.4) translateY(14px); } }
@keyframes score-glitch-in { 0% { opacity: 0; transform: translateX(-16px) skewX(-9deg); } 25% { opacity: 1; transform: translateX(7px) skewX(7deg); } 45% { transform: translateX(-4px) skewX(-4deg); } 65% { transform: translateX(3px) skewX(3deg); } 85% { transform: translateX(-1px) skewX(-1deg); } 100% { opacity: 1; transform: translateX(0) skewX(0); } }
@keyframes score-glitch-out { 0% { opacity: 1; transform: translateX(0) skewX(0); } 25% { transform: translateX(-5px) skewX(5deg); } 55% { opacity: .65; transform: translateX(6px) skewX(-6deg); } 100% { opacity: 0; transform: translateX(18px) skewX(11deg); } }
@keyframes score-number-pop { 0% { transform: scale(.7); background: var(--overlay-accent); color: #171319; } 38% { transform: scale(1.16); background: var(--overlay-accent); color: #171319; } 100% { transform: scale(1); } }
@keyframes score-content-return { from { opacity: 0; transform: translateY(9px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes banner-arrive { 0% { opacity: 0; transform: translate3d(-48px,0,0) skewX(-5deg); } 100% { opacity: 1; transform: translate3d(0,0,0) skewX(0); } }
@keyframes banner-leave { from { opacity: 1; transform: translate3d(0,0,0); } to { opacity: 0; transform: translate3d(-54px,0,0); filter: blur(3px); } }
@keyframes banner-shimmer { from { transform: translateX(-140%); } to { transform: translateX(155%); } }
@keyframes lineup-arrive { from { opacity: 0; transform: translate3d(-30px,0,0); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); } }
@keyframes player-arrive { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes lineup-leave { from { opacity: 1; transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); } to { opacity: 0; transform: translate3d(-36px,0,0); clip-path: inset(0 100% 0 0); filter: blur(3px); } }
@keyframes player-leave { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-16px); } }
@keyframes photo-lineup-arrive { from { opacity: 0; transform: translateX(-2.4cqw); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: translateX(0); clip-path: inset(0); } }
@keyframes photo-lineup-leave { from { opacity: 1; transform: translateX(0); clip-path: inset(0); } to { opacity: 0; transform: translateX(-2.4cqw); clip-path: inset(0 100% 0 0); } }
@keyframes photo-player-arrive { from { opacity: 0; transform: translateY(.7cqw); } to { opacity: 1; transform: translateY(0); } }
@keyframes photo-player-leave { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(.8cqw); } }
@keyframes photo-lineup-stage-change { 0% { opacity: .08; transform: translateY(.65cqw) scale(.992); filter: blur(3px); } 55% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes player-transition-sweep { 0% { opacity: 0; transform: translateX(-115%) skewX(-8deg); } 22% { opacity: .95; } 72% { opacity: .7; } 100% { opacity: 0; transform: translateX(115%) skewX(-8deg); } }
@keyframes player-photo-reveal { from { opacity: .16; transform: translateX(2.2cqw) scale(1.055); filter: blur(5px) saturate(.7); } to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0) saturate(1); } }
@keyframes player-photo-reveal-previous { from { opacity: .16; transform: translateX(-2.2cqw) scale(1.055); filter: blur(5px) saturate(.7); } to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0) saturate(1); } }
@keyframes player-number-reveal { from { opacity: 0; transform: scaleX(.35); transform-origin: left; } to { opacity: 1; transform: scaleX(1); transform-origin: left; } }
@keyframes player-copy-reveal { from { opacity: 0; transform: translateX(1.3cqw); filter: blur(3px); } to { opacity: 1; transform: translateX(0); filter: blur(0); } }
@keyframes serve-pulse { 0%,100% { opacity: .45; transform: scale(.84); } 50% { opacity: 1; transform: scale(1.13); } }
@keyframes danger-pulse { 0%,100% { filter: brightness(.9); } 50% { filter: brightness(1.4); } }
@keyframes connection-pulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes goal-letter-write { from { opacity: 0; transform: translateY(.65em) scale(.55); filter: blur(5px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes goal-letter-bounce { 0% { opacity: 0; transform: scale(2.4) rotate(-8deg); } 55% { opacity: 1; transform: scale(.82) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes goal-sweep-in { from { opacity: 0; transform: translateX(-55px) skewX(-14deg); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: translateX(0) skewX(0); clip-path: inset(0 0 0 0); } }
@keyframes goal-light-sweep { from { transform: translateX(-140%); } to { transform: translateX(150%); } }
@keyframes goal-overlay-in { from { opacity: 0; clip-path: inset(0 50% 0 50%); filter: brightness(1.6) blur(4px); } to { opacity: 1; clip-path: inset(0 0 0 0); filter: brightness(1) blur(0); } }
@keyframes goal-overlay-out { from { opacity: 1; clip-path: inset(0 0 0 0); } to { opacity: 0; clip-path: inset(0 0 0 100%); filter: blur(4px); } }
@keyframes goal-team-arrive { from { opacity: 0; transform: translateY(.7em); filter: blur(5px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes card-notice-in { from { opacity: 0; transform: translateX(-22px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: translateX(0); clip-path: inset(0 0 0 0); } }
@keyframes card-notice-out { from { opacity: 1; transform: translateX(0); clip-path: inset(0 0 0 0); } to { opacity: 0; transform: translateX(22px); clip-path: inset(0 0 0 100%); } }
@keyframes sponsor-slide-in { from { opacity: 0; transform: translateX(70px) skewX(-6deg); filter: blur(5px); } to { opacity: 1; transform: translateX(0) skewX(0); filter: blur(0); } }
@keyframes sponsor-slide-out { from { opacity: 1; transform: translateX(0) skewX(0); filter: blur(0); } to { opacity: 0; transform: translateX(70px) skewX(6deg); filter: blur(5px); } }
@keyframes sponsor-zoom-in { from { opacity: 0; transform: scale(.45); filter: blur(8px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes sponsor-zoom-out { from { opacity: 1; transform: scale(1); filter: blur(0); } to { opacity: 0; transform: scale(.45); filter: blur(8px); } }
@keyframes sponsor-flip-in { from { opacity: 0; transform: perspective(800px) rotateY(-90deg); } to { opacity: 1; transform: perspective(800px) rotateY(0); } }
@keyframes sponsor-flip-out { from { opacity: 1; transform: perspective(800px) rotateY(0); } to { opacity: 0; transform: perspective(800px) rotateY(90deg); } }
@keyframes sponsor-fade-in { from { opacity: 0; filter: blur(7px); } to { opacity: 1; filter: blur(0); } }
@keyframes sponsor-fade-out { from { opacity: 1; filter: blur(0); } to { opacity: 0; filter: blur(7px); } }
@keyframes sponsor-bar-fade-in { from { opacity: 0; transform: translate(-50%, -50%) scale(calc(var(--sponsor-bar-scale,1) * .985)); } to { opacity: 1; transform: translate(-50%, -50%) scale(var(--sponsor-bar-scale,1)); } }
@keyframes sponsor-bar-fade-out { from { opacity: 1; transform: translate(-50%, -50%) scale(var(--sponsor-bar-scale,1)); } to { opacity: 0; transform: translate(-50%, -50%) scale(calc(var(--sponsor-bar-scale,1) * .985)); } }
@keyframes sponsor-bar-slide-in { from { opacity: 0; transform: translate(calc(-50% + 42px), -50%) scale(var(--sponsor-bar-scale,1)); } to { opacity: 1; transform: translate(-50%, -50%) scale(var(--sponsor-bar-scale,1)); } }
@keyframes sponsor-bar-slide-out { from { opacity: 1; transform: translate(-50%, -50%) scale(var(--sponsor-bar-scale,1)); } to { opacity: 0; transform: translate(calc(-50% - 42px), -50%) scale(var(--sponsor-bar-scale,1)); } }
@keyframes sponsor-bar-zoom-in { from { opacity: 0; transform: translate(-50%, -50%) scale(calc(var(--sponsor-bar-scale,1) * .965)); } to { opacity: 1; transform: translate(-50%, -50%) scale(var(--sponsor-bar-scale,1)); } }
@keyframes sponsor-bar-zoom-out { from { opacity: 1; transform: translate(-50%, -50%) scale(var(--sponsor-bar-scale,1)); } to { opacity: 0; transform: translate(-50%, -50%) scale(calc(var(--sponsor-bar-scale,1) * .965)); } }
@keyframes sponsor-bar-flip-in { from { opacity: 0; transform: translate(-50%, -50%) perspective(1000px) rotateX(-70deg) scale(var(--sponsor-bar-scale,1)); } to { opacity: 1; transform: translate(-50%, -50%) perspective(1000px) rotateX(0) scale(var(--sponsor-bar-scale,1)); } }
@keyframes sponsor-bar-flip-out { from { opacity: 1; transform: translate(-50%, -50%) perspective(1000px) rotateX(0) scale(var(--sponsor-bar-scale,1)); } to { opacity: 0; transform: translate(-50%, -50%) perspective(1000px) rotateX(70deg) scale(var(--sponsor-bar-scale,1)); } }
@keyframes sponsor-bar-elastic-in { 0% { opacity: 0; transform: translate(-50%, -50%) scale(calc(var(--sponsor-bar-scale,1) * .4)); } 55% { opacity: 1; transform: translate(-50%, -50%) scale(calc(var(--sponsor-bar-scale,1) * 1.06)); } 78% { transform: translate(-50%, -50%) scale(calc(var(--sponsor-bar-scale,1) * .97)); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(var(--sponsor-bar-scale,1)); } }
@keyframes sponsor-bar-elastic-out { from { opacity: 1; transform: translate(-50%, -50%) scale(var(--sponsor-bar-scale,1)); } to { opacity: 0; transform: translate(-50%, -50%) scale(calc(var(--sponsor-bar-scale,1) * .4)); } }
.overlay-output[data-output-layer="sponsor-bar"] .sponsor-wide-bar.is-entering { animation-name: sponsor-bar-output-fade-in; }
.overlay-output[data-output-layer="sponsor-bar"] .sponsor-wide-bar.is-exiting { animation-name: sponsor-bar-output-fade-out; }
@keyframes sponsor-bar-output-fade-in { from { opacity: 0; transform: scale(calc(var(--sponsor-bar-scale,1) * .985)); } to { opacity: 1; transform: scale(var(--sponsor-bar-scale,1)); } }
@keyframes sponsor-bar-output-fade-out { from { opacity: 1; transform: scale(var(--sponsor-bar-scale,1)); } to { opacity: 0; transform: scale(calc(var(--sponsor-bar-scale,1) * .985)); } }

/* OBS Browser Source performance path: compositor-only transforms and opacity. */
@keyframes obs-enter-left { from { opacity: 0; transform: translate3d(-42px,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes obs-exit-left { from { opacity: 1; transform: translate3d(0,0,0); } to { opacity: 0; transform: translate3d(-42px,0,0); } }
@keyframes obs-enter-right { from { opacity: 0; transform: translate3d(42px,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes obs-exit-right { from { opacity: 1; transform: translate3d(0,0,0); } to { opacity: 0; transform: translate3d(42px,0,0); } }
@keyframes obs-enter-scale { from { opacity: 0; transform: translate3d(0,8px,0) scale(.965); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes obs-exit-scale { from { opacity: 1; transform: translate3d(0,0,0) scale(1); } to { opacity: 0; transform: translate3d(0,8px,0) scale(.965); } }
@keyframes obs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes obs-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* Per-style easings (assemble/glitch/elastic/...) are tuned for a full-quality browser
   and include steps() and overshoot curves that read as dropped frames once the keyframe
   itself is swapped for the lighter obs-enter-*/obs-exit-* ones below. Forcing one smooth
   ease pair here, on the same rules that already win the animation-name cascade, keeps
   every entrance/exit style interpolating cleanly regardless of which one was picked. */
.obs-render-mode .scorebug.is-entering[class*="scorebug-animation-"] { animation-name: obs-enter-left; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.obs-render-mode .scorebug.is-exiting[class*="scorebug-animation-"] { animation-name: obs-exit-left; animation-timing-function: cubic-bezier(.7,0,.84,0); }
.obs-render-mode .scorebug.is-entering.scorebug-animation-assemble > :not(.scorebug-goal-celebration):not(.scorebug-card-notice) { animation-name: obs-enter-scale; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.obs-render-mode .scorebug.is-exiting.scorebug-animation-assemble > :not(.scorebug-goal-celebration):not(.scorebug-card-notice) { animation-name: obs-exit-scale; animation-timing-function: cubic-bezier(.7,0,.84,0); }
.obs-render-mode .scorebug.is-morphing { animation-name: obs-enter-scale; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.obs-render-mode .scorebug.is-morphing .scorebug-team-name,
.obs-render-mode .scorebug.is-morphing .scorebug-dot { animation-name: obs-fade; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.obs-render-mode .event-banner.is-entering { animation-name: obs-enter-left; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.obs-render-mode .event-banner.is-exiting { animation-name: obs-exit-left; animation-timing-function: cubic-bezier(.7,0,.84,0); }
.obs-render-mode .event-banner.is-entering::after { display: none; animation: none; }
.obs-render-mode .sponsor-banner.is-entering[class*="sponsor-animation-"] { animation-name: obs-enter-right; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.obs-render-mode .sponsor-banner.is-exiting[class*="sponsor-animation-"] { animation-name: obs-exit-right; animation-timing-function: cubic-bezier(.7,0,.84,0); }
.obs-render-mode .lineup-banner.is-entering,
.obs-render-mode .photo-lineup.is-entering { animation-name: obs-enter-left; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.obs-render-mode .lineup-banner.is-exiting,
.obs-render-mode .photo-lineup.is-exiting { animation-name: obs-exit-left; animation-timing-function: cubic-bezier(.7,0,.84,0); }
.obs-render-mode .photo-lineup.is-stage-changing .photo-lineup-body > *,
.obs-render-mode .photo-lineup-stage-individual.is-stage-changing .lineup-spotlight-photo,
.obs-render-mode .photo-lineup-stage-individual.is-stage-changing .lineup-spotlight-number,
.obs-render-mode .photo-lineup-stage-individual.is-stage-changing .lineup-spotlight-copy > * { animation-name: obs-enter-scale; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.obs-render-mode .photo-lineup-stage-individual.is-stage-changing .lineup-spotlight::before { display: none; animation: none; }
.obs-render-mode .scorebug-goal-celebration.is-entering,
.obs-render-mode .scorebug-card-notice.is-entering,
.obs-render-mode .goal-phase-team .goal-team-only { animation-name: obs-enter-scale; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.obs-render-mode .scorebug-goal-celebration.is-exiting,
.obs-render-mode .scorebug-card-notice.is-exiting { animation-name: obs-exit-scale; animation-timing-function: cubic-bezier(.7,0,.84,0); }
.obs-render-mode .scorebug.is-recovering > :not(.scorebug-goal-celebration):not(.scorebug-card-notice) { animation-name: obs-enter-scale; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.obs-render-mode .goal-animation-typewriter span,
.obs-render-mode .goal-animation-bounce span,
.obs-render-mode .goal-animation-sweep .goal-word-in-scoreboard { animation-name: obs-enter-scale; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.obs-render-mode .goal-animation-sweep::after { display: none; animation: none; }
.obs-render-mode .sponsor-wide-bar.is-entering { animation-name: obs-fade; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.obs-render-mode .sponsor-wide-bar.is-exiting { animation-name: obs-fade-out; animation-timing-function: cubic-bezier(.7,0,.84,0); }
.obs-render-mode .sponsor-wide-bar.is-entering.sponsor-animation-slide { animation-name: obs-enter-right; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.obs-render-mode .sponsor-wide-bar.is-exiting.sponsor-animation-slide { animation-name: obs-exit-right; animation-timing-function: cubic-bezier(.7,0,.84,0); }
.obs-render-mode .sponsor-wide-bar.is-entering.sponsor-animation-zoom { animation-name: obs-enter-scale; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.obs-render-mode .sponsor-wide-bar.is-exiting.sponsor-animation-zoom { animation-name: obs-exit-scale; animation-timing-function: cubic-bezier(.7,0,.84,0); }
.obs-render-mode .sponsor-wide-bar.is-entering.sponsor-animation-flip { animation-name: obs-enter-scale; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.obs-render-mode .sponsor-wide-bar.is-exiting.sponsor-animation-flip { animation-name: obs-exit-scale; animation-timing-function: cubic-bezier(.7,0,.84,0); }
.obs-render-mode .sponsor-wide-bar.is-entering.sponsor-animation-elastic { animation-name: obs-enter-scale; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.obs-render-mode .sponsor-wide-bar.is-exiting.sponsor-animation-elastic { animation-name: obs-exit-scale; animation-timing-function: cubic-bezier(.7,0,.84,0); }

/* Builder: every custom overlay is a self-contained OBS surface. */
.overlay-output[data-output-layer="custom"] .broadcast-layer { overflow: hidden; }
.custom-overlay-output { display: grid; place-items: center; }
.custom-overlay { width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; overflow: hidden; background: var(--custom-bg); color: var(--custom-text); will-change: transform, opacity; }
.custom-layout-media { grid-template-columns: 1fr; }
.custom-layout-media-text { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); }
.custom-layout-text { grid-template-columns: 1fr; }
.custom-overlay img, .custom-overlay video { width: 100%; height: 100%; min-width: 0; min-height: 0; display: block; object-fit: cover; }
.custom-overlay-placeholder { display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--custom-accent) 35%, var(--custom-bg)), var(--custom-bg)); color: color-mix(in srgb, var(--custom-text) 58%, transparent); font-weight: 800; letter-spacing: .18em; }
.custom-overlay-copy { min-width: 0; padding: 5%; display: grid; align-content: center; border-left: max(3px,.4cqw) solid var(--custom-accent); background: var(--custom-bg); }
.custom-layout-text .custom-overlay-copy { border-left: 0; border-top: max(3px,.4cqw) solid var(--custom-accent); text-align: center; }
.custom-overlay-copy strong { font-size: clamp(24px,4.2cqw,92px); line-height: .95; text-transform: uppercase; }
.custom-overlay-copy span { margin-top: 1.2cqw; font-size: clamp(15px,1.6cqw,34px); line-height: 1.25; opacity: .72; }
.custom-overlay.is-entering.custom-animation-fade { animation: obs-fade 650ms ease both; }
.custom-overlay.is-exiting.custom-animation-fade { animation: obs-fade-out 650ms ease both; }
.custom-overlay.is-entering.custom-animation-slide { animation: obs-enter-left 650ms cubic-bezier(.2,.8,.2,1) both; }
.custom-overlay.is-exiting.custom-animation-slide { animation: obs-exit-left 650ms cubic-bezier(.4,0,1,1) both; }
.custom-overlay.is-entering.custom-animation-zoom { animation: obs-enter-scale 650ms cubic-bezier(.2,.8,.2,1) both; }
.custom-overlay.is-exiting.custom-animation-zoom { animation: obs-exit-scale 650ms cubic-bezier(.4,0,1,1) both; }
.builder-panel { padding: 0; overflow: hidden; }
.overlay-builder { min-height: 650px; display: grid; grid-template-columns: 250px minmax(0,1fr); }
.overlay-builder-empty { min-height: 520px; padding: 48px; display: grid; place-content: center; justify-items: start; gap: 24px; }
.overlay-builder-empty span, .builder-toolbar > div > span { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.overlay-builder-empty h2, .builder-toolbar h2 { margin: 7px 0; }
.overlay-builder-empty p { max-width: 620px; color: var(--muted); line-height: 1.6; }
.builder-list { padding: 18px; border-right: 1px solid var(--line); background: var(--surface-2); }
.builder-list-item { width: 100%; margin-top: 8px; padding: 12px; display: grid; grid-template-columns: 8px 1fr; gap: 10px; align-items: center; border: 1px solid transparent; border-radius: 7px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.builder-list-item:hover, .builder-list-item.active { border-color: var(--line); background: var(--surface); }
.builder-list-item i { width: 8px; height: 8px; border-radius: 50%; background: #626774; }
.builder-list-item i.on { background: #35c77a; box-shadow: 0 0 0 4px rgba(53,199,122,.12); }
.builder-list-item span { min-width: 0; display: grid; }
.builder-list-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.builder-list-item small { color: var(--muted); }
.builder-editor { min-width: 0; padding: 22px; }
.builder-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.builder-workspace { margin-top: 18px; display: grid; grid-template-columns: minmax(300px,.8fr) minmax(420px,1.4fr); gap: 20px; }
.builder-fields { display: grid; align-content: start; gap: 12px; }
.builder-colors { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.builder-colors label { padding: 9px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 6px; }
.builder-colors input { width: 32px; height: 32px; padding: 0; border: 0; }
.builder-media-upload { justify-content: center; }
.builder-preview { min-width: 0; align-self: start; }
.builder-canvas { width: 100%; overflow: hidden; border: 1px solid rgba(255,255,255,.18); background: #050609; box-shadow: 0 22px 52px rgba(0,0,0,.3); container-type: inline-size; }
.builder-preview > div:last-child { margin-top: 10px; display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.sponsor-wide-list label { position: relative; }
.sponsor-wide-list label > button { grid-column: 2; grid-row: 1 / 3; align-self: center; }
@media (max-width: 1100px) { .overlay-builder { grid-template-columns: 1fr; } .builder-list { border-right: 0; border-bottom: 1px solid var(--line); } .builder-workspace { grid-template-columns: 1fr; } }

.overlay-library { margin-top: 19px; }
.library-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.overlay-card { min-height: 107px; padding: 12px; display: grid; align-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); text-align: left; transition: border-color .18s, background .18s; }
.overlay-card:hover, .overlay-card.active { border-color: rgba(216, 173, 86, .52); background: #1e1b20; }
.overlay-card-top { justify-content: space-between; }
.overlay-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: rgba(216, 173, 86, .11); color: var(--gold); }
.overlay-card strong { display: block; font-size: 12px; font-weight: 600; }
.overlay-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.toggle { width: 29px; height: 17px; padding: 2px; border: 0; border-radius: 20px; background: #42424b; }
.toggle::after { width: 13px; height: 13px; display: block; border-radius: 50%; background: #fff; content: ''; transition: transform .16s; }
.toggle.on { background: var(--green); }
.toggle.on::after { transform: translateX(12px); }

.themes-panel { padding: 18px; }
.theme-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.theme-choice { position: relative; min-height: 71px; padding: 10px; display: grid; align-content: space-between; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); text-align: left; }
.theme-choice:hover, .theme-choice.active { border-color: var(--gold); }
.theme-choice span { font-size: 11px; }
.swatches { display: flex; gap: 4px; }
.swatches i { width: 12px; height: 12px; display: block; border-radius: 50%; }
.color-field { display: flex; align-items: center; gap: 8px; }
.color-field input[type="color"] { width: 31px; height: 31px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 5px; background: transparent; }
.color-field span { color: var(--muted-soft); font-size: 11px; }
.custom-colors { margin-top: 13px; display: flex; gap: 19px; }
.typeface-title { margin: 16px 0 9px; color: var(--muted); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; }
.typeface-options { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; }
.typeface-choice { height: 35px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); color: var(--muted-soft); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.typeface-choice.active { border-color: rgba(216,173,86,.6); color: var(--gold); }

.events-panel { padding: 17px 18px; }
.event-list { display: grid; gap: 0; }
.event-line { min-height: 42px; justify-content: space-between; border-bottom: 1px solid var(--line); }
.event-line:last-child { border-bottom: 0; }
.event-side { gap: 9px; }
.event-minute { width: 32px; color: var(--gold); font-family: var(--display); font-size: 14px; }
.event-copy { font-size: 12px; }
.event-meta { color: var(--muted); font-size: 11px; }
.empty-events { padding: 12px 0; color: var(--muted); font-size: 12px; }

.roster-editor { margin-top: 9px; }
.lineup-output-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.lineup-output-choices .button { min-height: 42px; height: auto; padding: 8px 10px; line-height: 1.25; }
.photo-lineup-option { margin-top: 9px; padding: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.photo-lineup-option > div { display: grid; gap: 3px; }
.photo-lineup-option strong { font-size: 11px; }
.photo-lineup-option small { color: var(--muted); font-size: 11px; }
.photo-lineup-option .button.active { border-color: rgba(56,217,150,.45); color: var(--green); }
.lineup-director { margin-top: 10px; padding: 12px; border: 1px solid rgba(216,173,86,.25); border-radius: 7px; background: #15161c; }
.lineup-director-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lineup-director-head > div { display: grid; gap: 3px; }
.lineup-director-head strong { font-size: 12px; }
.lineup-director-head small { color: var(--muted); font-size: 11px; }
.lineup-stage-tabs { margin-top: 11px; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border: 1px solid var(--line); }
.lineup-stage-tabs button { min-width: 0; height: 34px; border-right: 1px solid var(--line); background: #111218; color: var(--muted-soft); font-size: 11px; }
.lineup-stage-tabs button:last-child { border-right: 0; }
.lineup-stage-tabs button.active { background: var(--gold); color: #171319; font-weight: 700; }
.lineup-director-status { margin-top: 9px; display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; }
.lineup-director-status strong { color: var(--text); font-weight: 500; }
.individual-nav { margin-top: 9px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7px; }
.individual-nav span { color: var(--muted-soft); font-size: 11px; text-align: center; }
.lineup-registration { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); }
.lineup-registration .section-header { margin-bottom: 10px; }
.lineup-staff-row { display: grid; grid-template-columns: .7fr 1fr 1fr; align-items: end; gap: 7px; }
.lineup-staff-row > label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.lineup-staff-row input, .lineup-staff-row select { width: 100%; height: 35px; }
.staff-manager { margin: 14px 0; padding: 13px; border: 1px solid rgba(216,173,86,.22); border-radius: 8px; background: linear-gradient(135deg, rgba(130,83,205,.07), rgba(216,173,86,.025)); }
.staff-manager-head { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.staff-manager-head > div { display: grid; gap: 3px; }
.staff-manager-head strong { font-size: 14px; }
.staff-manager-head small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.staff-manager-list { display: grid; gap: 8px; }
.staff-manager-row { padding: 9px; display: grid; grid-template-columns: 64px minmax(0,1fr) 34px; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 6px; background: #11131a; }
.staff-manager-photo { position: relative; width: 64px; height: 64px; overflow: hidden; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); background: color-mix(in srgb, var(--purple) 24%, #171922); color: var(--gold); font-size: 18px; font-weight: 800; }
.staff-manager-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.staff-manager-photo label { position: absolute; inset: auto 0 0; padding: 5px 3px; background: rgba(7,8,11,.86); color: #fff; font-size: 11px; text-align: center; cursor: pointer; }
.staff-manager-photo input { display: none; }
.staff-manager-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(150px,.65fr); gap: 8px; }
.staff-manager-fields label { display: grid; gap: 5px; }
.staff-manager-fields label > span { color: var(--muted); font-size: 12px; }
.staff-manager-fields input, .staff-manager-fields select { width: 100%; height: 38px; }
.lineup-upload { height: 35px; place-items: center; align-content: center; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface-3); color: var(--muted-soft) !important; cursor: pointer; text-align: center; }
.lineup-upload input { display: none; }
.lineup-athlete-manager { max-height: 340px; margin-top: 10px; overflow: auto; border-top: 1px solid var(--line); }
.lineup-athlete-row { min-height: 58px; display: grid; grid-template-columns: 54px minmax(0,1fr) 74px 52px; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.lineup-athlete-thumb { position: relative; width: 48px; height: 48px; overflow: hidden; display: grid; place-items: center; background: #0d0e13; color: var(--gold); font-family: var(--display); font-size: 16px; }
.lineup-athlete-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.lineup-athlete-thumb label { position: absolute; inset: auto 0 0; padding: 2px; background: rgba(0,0,0,.78); color: #fff; font-size: 7px; text-align: center; cursor: pointer; }
.lineup-athlete-thumb input { display: none; }
.lineup-athlete-row > div:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.lineup-athlete-row strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.lineup-athlete-row small { color: var(--muted); font-size: 8px; }
.lineup-athlete-row select, .lineup-position-input { width: 100%; height: 31px; padding: 0 7px; font-size: 11px; }
.lineup-position-input { text-align: center; text-transform: uppercase; }
.help-text { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.field-hint { margin-top: -2px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.team-match-picker { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.team-match-picker .section-header { margin-bottom: 9px; }
.team-catalog { padding: 13px; border: 1px solid rgba(216,173,86,.2); border-radius: 8px; background: linear-gradient(135deg, rgba(130,83,205,.09), rgba(216,173,86,.03)); }
.team-catalog-head { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.team-catalog-head > div { display: grid; gap: 3px; }
.team-catalog-head strong { font-size: 12px; }
.team-catalog-head small { color: var(--muted); font-size: 11px; }
.team-editor { padding: 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); }
.team-editor + .team-editor { margin-top: 12px; }
.team-title { justify-content: space-between; margin-bottom: 11px; }
.team-title strong { font-size: 12px; }
.team-editor .field { margin-bottom: 9px; }
.team-editor .field:last-child { margin-bottom: 0; }
.team-access-box { margin: 12px 0; padding: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid rgba(56,217,150,.2); border-radius: 6px; background: rgba(56,217,150,.045); }
.team-access-box > div { display: grid; gap: 3px; }
.team-access-box strong { font-size: 11px; }
.team-access-box small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.danger-button { width: 100%; border-color: rgba(250,98,110,.25); color: #f58b95; }
.access-list { display: grid; gap: 8px; margin-bottom: 12px; }
.access-row { padding: 11px; display: grid; gap: 9px; border: 1px solid var(--line); border-radius: 6px; background: #11131a; }
.access-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.access-row-head > div { display: grid; gap: 3px; min-width: 0; }
.access-row-compact { grid-template-columns: minmax(0,1fr) 34px; align-items: center; }
.access-row strong { font-size: 12px; }
.access-row small { color: var(--muted); font-size: 11px; }
.access-linked { color: var(--green) !important; }
.access-row .field { margin-bottom: 0; }
.access-row-save { width: 100%; }
.password-field { display: flex; gap: 6px; align-items: center; }
.password-field input { flex: 1; min-width: 0; }
.password-field .button.square { flex: none; }

.module-workspace { min-height: calc(100vh - 72px); display: grid; grid-template-columns: 216px minmax(0,1fr); }
.module-sidebar { position: sticky; top: 72px; height: calc(100vh - 72px); padding: 20px 12px; display: grid; align-content: start; gap: 5px; border-right: 1px solid var(--line); background: #0d0e13; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.module-sidebar::-webkit-scrollbar { width: 8px; }
.module-sidebar::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: var(--line-strong); background-clip: content-box; }
.module-sidebar::-webkit-scrollbar-thumb:hover { background: #4a4d5a; background-clip: content-box; }
.module-sidebar a { min-height: 46px; padding: 0 12px; display: flex; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 6px; color: var(--muted-soft); font-size: 13px; font-weight: 600; text-decoration: none; }
.module-sidebar a svg { width: 16px; height: 16px; color: var(--muted); }
.module-sidebar a:hover { background: var(--surface-2); color: var(--text); }
.module-sidebar a.active { border-color: rgba(216,173,86,.3); background: rgba(216,173,86,.09); color: var(--gold); }
.module-sidebar a.active svg { color: var(--gold); }
.module-sidebar-overview { margin-bottom: 8px; }
.module-sidebar-label { margin: 13px 12px 3px; color: #777985; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.module-sidebar-label-spaced { margin-top: 19px; }
.module-sidebar-home { margin-top: 14px; border-top: 1px solid var(--line) !important; border-radius: 0 !important; }
.dashboard-main { width: 100%; min-width: 0; }
.module-main { min-width: 0; padding: 30px clamp(20px,3vw,44px) 48px; }
.module-page-head { margin-bottom: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.module-page-head span, .module-hub-head > span { color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.module-page-head h1, .module-hub-head h1 { margin: 5px 0 0; font-family: var(--display); font-size: clamp(31px,4vw,46px); font-weight: 650; line-height: 1; }
.module-page-head p, .module-hub-head p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.module-grid { display: grid; grid-template-columns: minmax(360px,520px) minmax(480px,1fr); align-items: start; gap: 18px; }
.module-controls { padding: 18px; overflow: visible; }
.module-section > .events-panel { margin-top: 0; }
.module-monitor { position: sticky; top: 92px; padding: 17px; }
.module-monitor .section-header > div:first-child { display: flex; align-items: center; gap: 9px; }
.module-air-state { padding: 4px 7px; border-radius: 2px; background: rgba(250,98,110,.1); color: #ff9aa4; font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.module-air-state.on { background: rgba(56,217,150,.1); color: var(--green); }
.module-monitor-screen { aspect-ratio: 16 / 9; }
.module-empty-preview { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.52); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.module-hub { max-width: 1180px; margin: 0 auto; }
.module-hub-head { max-width: 650px; margin-bottom: 26px; }
.module-hub-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.module-hub-card { min-height: 126px; padding: 17px; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); text-decoration: none; transition: border-color .18s, transform .18s, background .18s; }
.module-hub-card:hover { border-color: rgba(216,173,86,.5); background: #171820; transform: translateY(-2px); }
.module-hub-card > span { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(216,173,86,.24); background: rgba(216,173,86,.07); color: var(--gold); }
.module-hub-card > span svg { width: 19px; height: 19px; }
.module-hub-card > div { min-width: 0; display: grid; gap: 5px; }
.module-hub-card strong { font-size: 13px; }
.module-hub-card small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.module-hub-card > b { color: var(--gold); font-size: 18px; font-weight: 400; }
.recommended-flow { margin-top: 18px; padding: 18px; border: 1px solid rgba(216,173,86,.22); background: rgba(216,173,86,.045); }
.recommended-flow > strong { color: var(--gold); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.recommended-flow > div { margin-top: 12px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--line); }
.recommended-flow span { padding: 13px; display: flex; align-items: center; gap: 9px; background: #111217; color: var(--muted-soft); font-size: 11px; }
.recommended-flow b { width: 23px; height: 23px; display: grid; place-items: center; background: var(--gold); color: #15120c; font-size: 11px; }

body.team-portal-output { min-width: 0; background: #090a0e; }
.team-portal-shell { min-height: 100vh; padding: clamp(18px, 4vw, 48px); background: radial-gradient(circle at 15% 0%, rgba(130,83,205,.22), transparent 35%), radial-gradient(circle at 90% 10%, rgba(216,173,86,.11), transparent 30%), #090a0e; }
.team-portal-card { width: min(980px, 100%); margin: 0 auto; padding: clamp(18px, 3vw, 34px); border: 1px solid var(--line-strong); border-radius: 14px; background: rgba(16,17,22,.97); box-shadow: 0 24px 70px rgba(0,0,0,.34); }
.team-portal-state { min-height: 380px; display: grid; place-content: center; text-align: center; }
.team-portal-state h1 { margin: 24px 0 8px; font-size: clamp(27px,5vw,44px); }
.team-portal-state p { margin: 0; color: var(--muted); }
.auth-card { min-height: 0; padding-block: clamp(40px, 8vw, 80px); }
.auth-form { width: min(320px, 86vw); margin: 22px auto 0; text-align: left; }
.auth-team-link { width: 100%; margin-top: 10px; }
.auth-error { margin: 4px 0 0; color: var(--red); font-size: 12px; text-align: left; }
.team-portal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.portal-brand { display: flex; align-items: center; gap: 10px; color: var(--gold); }
.portal-brand .brand-mark { width: 28px; height: 31px; }
.portal-brand strong { color: var(--text); font-size: 13px; }
.portal-status { padding: 6px 9px; border-radius: 20px; background: var(--surface-3); color: var(--muted-soft); font-size: 11px; }
.portal-status-saved { background: rgba(56,217,150,.1); color: var(--green); }
.portal-status-error { background: rgba(250,98,110,.1); color: var(--red); }
.notification-button { position: relative; }
.notification-button.has-unread { border-color: rgba(216,173,86,.48); color: var(--gold); }
.notification-button b { min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 10px; background: var(--gold); color: #0b0c10; font-size: 11px; }
.operations-layout { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(360px,1.2fr); gap: 18px; }
.operations-list, .operations-editor { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #101117; }
.operations-list { display: grid; align-content: start; gap: 8px; }
.operations-list-head { margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.operations-list-head > div { display: grid; gap: 3px; }
.operations-list-head strong { font-size: 13px; }
.operations-list-head small { color: var(--muted); font-size: 11px; }
.operations-item { width: 100%; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 6px; background: #14151c; color: var(--text); text-align: left; cursor: pointer; }
.operations-item:hover, .operations-item.active, .match-operation-card.active { border-color: rgba(216,173,86,.48); background: rgba(216,173,86,.07); }
.operations-item > span { min-width: 0; display: grid; gap: 4px; }
.operations-item strong { font-size: 12px; }
.operations-item small { color: var(--muted); font-size: 11px; }
.operations-item > b { color: var(--gold); font-size: 11px; text-transform: uppercase; }
.operations-editor .field { margin-bottom: 13px; }
.operations-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.button.danger { color: var(--red); }
.match-operation-card { padding: 11px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 7px; background: #14151c; }
.match-operation-card > button { min-width: 0; display: grid; gap: 4px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.match-operation-card > button span, .match-operation-card > button small { color: var(--muted); font-size: 11px; }
.match-operation-card > button strong { font-size: 12px; }
.match-operation-card > button strong b { padding: 0 5px; color: var(--gold); }
.dashboard-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.dashboard-section { min-width: 0; padding: 16px; display: grid; gap: 10px; align-content: start; border: 1px solid var(--line); border-radius: 8px; background: #111219; }
.dashboard-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(100px,1fr)); gap: 8px; }
.dashboard-stats article { padding: 10px; display: grid; border: 1px solid var(--line); border-radius: 5px; }
.dashboard-stats article strong { color: var(--gold); font-size: 20px; }
.dashboard-stats article span { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.dashboard-list { display: grid; gap: 6px; }
.dashboard-list > strong { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.dashboard-mini-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; color: var(--text); text-decoration: none; background: rgba(255,255,255,.015); }
.dashboard-mini-row small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.audit-grid { display: grid; gap: 24px; }
.notification-list { display: grid; gap: 8px; }
.notification-card { padding: 13px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--line); border-radius: 7px; background: #111219; }
.notification-card.unread { border-color: rgba(216,173,86,.45); box-shadow: inset 3px 0 var(--gold); }
.notification-card > div { display: grid; gap: 4px; }
.notification-card span { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.notification-card strong { font-size: 12px; }
.notification-card p { margin: 0; color: var(--muted-soft); font-size: 12px; }
.notification-card small, .notification-card > b { color: var(--muted); font-size: 11px; }
.audit-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 7px; }
.audit-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.audit-table th, .audit-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.audit-table th { color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.audit-table td:first-child { white-space: nowrap; color: var(--muted); }
.audit-table td:last-child { display: grid; gap: 3px; }
.audit-table td small { color: var(--muted); }
.delegation-completion { margin-top: 20px; padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid rgba(216,173,86,.3); border-radius: 8px; background: rgba(216,173,86,.06); }
.delegation-completion > div { display: grid; gap: 4px; }
.delegation-completion span { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.delegation-completion strong { font-size: 13px; }
.delegation-completion p { margin: 0; color: var(--muted); font-size: 12px; }
.delegation-completion.is-complete { border-color: rgba(56,217,150,.35); background: rgba(56,217,150,.07); }
.delegation-completion.is-complete span { color: var(--green); }
.delegation-completion.needs-review { border-color: rgba(250,174,70,.42); }
.team-portal-team { margin: 30px 0; display: flex; align-items: center; gap: 18px; }
.portal-team-logo { width: 82px; height: 82px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(216,173,86,.32); border-radius: 16px; background: rgba(216,173,86,.07); color: var(--gold); font-family: var(--display); font-size: 25px; font-weight: 700; }
.portal-team-logo img { width: 84%; height: 84%; object-fit: contain; }
.team-portal-team span { color: var(--gold); font-size: 11px; letter-spacing: .9px; text-transform: uppercase; }
.team-portal-team h1 { margin: 4px 0; font-family: var(--display); font-size: clamp(29px,5vw,47px); line-height: 1; }
.team-portal-team p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.portal-toolbar { margin-bottom: 12px; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); }
.portal-coach { margin-bottom: 22px; padding: 13px; display: grid; grid-template-columns: 88px minmax(0,1fr) 180px; align-items: center; gap: 12px; border: 1px solid rgba(216,173,86,.24); background: rgba(216,173,86,.04); }
.portal-coach > label { display: grid; gap: 6px; }
.portal-coach > label > span { color: var(--muted); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; }
.portal-coach input, .portal-coach select { width: 100%; height: 38px; }
.portal-toolbar > div { display: grid; gap: 3px; }
.portal-toolbar strong { font-size: 13px; }
.portal-toolbar small { color: var(--muted); font-size: 11px; }
.portal-athlete-list { display: grid; gap: 9px; }
.portal-athlete { padding: 11px; display: grid; grid-template-columns: 88px minmax(0,1fr) 34px; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.portal-athlete-photo { position: relative; width: 88px; height: 88px; overflow: hidden; display: grid; place-items: center; border-radius: 7px; background: #0a0b0f; color: var(--gold); font-family: var(--display); font-size: 30px; }
.portal-athlete-photo img { width: 100%; height: 100%; object-fit: cover; }
.portal-athlete-photo label { position: absolute; right: 0; bottom: 0; left: 0; padding: 6px 3px; background: rgba(5,6,9,.82); color: #fff; font-size: 8px; text-align: center; cursor: pointer; }
.portal-athlete-photo input { display: none; }
.portal-athlete-fields { min-width: 0; display: grid; gap: 9px; }
.portal-athlete-fields > label, .portal-athlete-fields > div > label { min-width: 0; display: grid; gap: 5px; }
.portal-athlete-fields > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.portal-athlete-fields span { color: var(--muted); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; }
.portal-athlete-fields input { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; outline: none; background: var(--surface-3); color: var(--text); font-size: 13px; }
.portal-athlete-fields input:focus { border-color: var(--gold); }
.portal-athlete-fields select { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; outline: none; background: var(--surface-3); color: var(--text); font-size: 12px; }
.portal-remove-athlete { color: var(--red); }
.portal-empty { padding: 44px 20px; border: 1px dashed var(--line-strong); border-radius: 9px; color: var(--muted); font-size: 12px; text-align: center; }
.portal-footer { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.portal-footer p { margin: 0; color: var(--muted); font-size: 11px; }
.portal-save { min-width: 230px; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 40; display: flex; justify-content: flex-end; background: rgba(0, 0, 0, .62); }
.drawer { width: min(430px, 100vw); height: 100vh; padding: 25px; overflow-y: auto; border-left: 1px solid var(--line-strong); background: #101116; }
.drawer h2 { margin: 0; font-family: var(--display); font-size: 25px; }
.drawer-head { margin-bottom: 21px; display: flex; align-items: center; justify-content: space-between; }
.drawer-section { margin-top: 22px; }
.drawer-section h3 { color: var(--gold); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.copy-row { margin-bottom: 10px; display: grid; grid-template-columns: 1fr 37px; gap: 6px; }
.copy-row input { height: 36px; font-size: 11px; }
.instruction { padding: 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--muted-soft); font-size: 12px; line-height: 1.7; }
.instruction strong { color: var(--text); }
.toast { position: fixed; right: 23px; top: 86px; z-index: 60; max-width: calc(100vw - 46px); padding: 11px 15px; border: 1px solid rgba(56, 217, 150, .32); border-radius: 7px; background: #131b17; color: #d8f7e9; font-size: 12px; animation: toast-in .2s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.shortcut-list { display: grid; gap: 8px; }
.shortcut-list div { display: flex; justify-content: space-between; color: var(--muted-soft); font-size: 12px; }
kbd { padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface-2); color: var(--text); font: 10px var(--font); }

body.overlay-output, body.overlay-output #app { width: 100vw; height: 100vh; min-width: 0; overflow: hidden; background: transparent !important; }
.overlay-output .broadcast-layer { width: 100vw; height: 100vh; container-type: size; }
.overlay-output .scorebug { font-size: var(--score-root-size, 2.05cqw); }
.overlay-output .scorebug-goals { font-size: var(--score-goal-size, 2.8cqw); }
.overlay-output .event-banner-name { font-size: var(--event-name-size, 2.75cqw); }
body.preview-output { min-width: 0; min-height: 100vh; display: grid; place-items: center; overflow: hidden; background: #050608; }
.preview-output #app { width: 100vw; height: 100vh; display: grid; place-items: center; }
.full-preview-stage { position: relative; width: min(100vw, 177.777vh); aspect-ratio: 16 / 9; max-height: 100vh; overflow: hidden; background: #131417; container-type: size; }
.full-preview-stage .monitor-label { bottom: 17px; right: 17px; padding: 7px 10px; font-size: 12px; }
.safe-guides { position: absolute; inset: 0; pointer-events: none; opacity: .34; }
.safe-guides i { position: absolute; border: 1px dashed rgba(255,255,255,.65); }
.safe-guides i:first-child { inset: 5%; }
.safe-guides i:last-child { inset: 10%; }
.preview-action { height: 29px; padding: 0 9px; font-size: 11px; }

@media (max-width: 1100px) {
  .workspace { padding-right: 22px; padding-left: 22px; }
  .topbar { padding: 0 22px; }
  .workspace-grid { grid-template-columns: minmax(290px, 335px) minmax(380px, 1fr); gap: 15px; }
  .library-grid { grid-template-columns: repeat(2, 1fr); }
  .module-grid { grid-template-columns: minmax(330px,440px) minmax(380px,1fr); }
  .module-hub-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 800px) {
  .topbar { height: 64px; padding: 0 15px; }
  .brand-name { font-size: 15px; }
  .brand-caption, .top-actions .status-row, .page-head .section-kicker { display: none; }
  .workspace { padding: 24px 14px 35px; }
  .page-head { align-items: flex-start; gap: 16px; }
  .match-tools { max-width: 190px; }
  .sport-switcher { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .workspace-grid { grid-template-columns: 1fr; }
  .preview-column { order: -1; }
  .monitor-panel { padding: 13px; }
  .themes-panel, .events-panel { padding: 15px; }
  .library-grid { grid-template-columns: repeat(3, 1fr); }
  .overlay-card { min-height: 94px; padding: 9px; }
  .overlay-card small { display: none; }
  .portal-athlete { grid-template-columns: 74px minmax(0,1fr) 32px; }
  .portal-athlete-photo { width: 74px; height: 74px; }
  .lineup-output-choices { grid-template-columns: 1fr; }
  .lineup-staff-row { grid-template-columns: 1fr; }
  .overlay-style-control { grid-template-columns: 1fr; }
  .staff-manager-fields { grid-template-columns: 1fr; }
  .portal-coach { grid-template-columns: 74px minmax(0,1fr); }
  .portal-coach > label:last-child { grid-column: 1 / -1; }
  .portal-athlete-fields > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .module-workspace { grid-template-columns: 1fr; }
  .module-sidebar { position: static; width: 100%; height: auto; padding: 9px 14px; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .module-sidebar a { min-width: max-content; min-height: 38px; }
  .module-sidebar-label { display: none; }
  .module-sidebar-overview { margin: 0 6px 0 0; }
  .module-sidebar-home { margin: 0 0 0 6px; border-top: 1px solid transparent !important; border-radius: 6px !important; }
  .module-main { padding: 24px 14px 38px; }
  .module-grid { grid-template-columns: 1fr; }
  .module-monitor { position: static; order: -1; }
}

@media (max-width: 490px) {
  .top-actions { gap: 8px; }
  .top-actions .button { padding: 0 10px; font-size: 11px; }
  .library-grid { grid-template-columns: repeat(2, 1fr); }
  .theme-list { grid-template-columns: repeat(2, 1fr); }
  .typeface-options { grid-template-columns: repeat(2, 1fr); }
  .page-title { font-size: 29px; }
  .page-head { display: grid; }
  .match-tools { max-width: none; justify-content: flex-start; }
  .monitor-label { font-size: 7px; }
  .field-row, .team-portal-head, .portal-footer { display: grid; }
  .team-portal-shell { padding: 10px; }
  .team-portal-card { padding: 16px; border-radius: 10px; }
  .team-portal-team { align-items: flex-start; }
  .portal-team-logo { width: 66px; height: 66px; border-radius: 12px; }
  .portal-toolbar { align-items: flex-end; }
  .portal-athlete { grid-template-columns: 1fr 32px; }
  .portal-athlete-photo { grid-column: 1 / -1; width: 100%; height: 170px; }
  .portal-coach { grid-template-columns: 1fr; }
  .portal-coach .portal-athlete-photo { width: 100%; }
  .portal-coach > label:last-child { grid-column: auto; }
  .portal-athlete-fields > div { grid-template-columns: 1fr; }
  .lineup-director-head { align-items: flex-start; flex-direction: column; }
  .lineup-director-head .button { width: 100%; }
  .lineup-stage-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lineup-stage-tabs button { border-bottom: 1px solid var(--line); }
  .individual-nav { grid-template-columns: 1fr 1fr; }
  .individual-nav span { grid-column: 1 / -1; grid-row: 1; }
  .lineup-athlete-row { grid-template-columns: 48px minmax(0,1fr) 70px; padding: 5px 0; }
  .lineup-position-input { grid-column: 2 / -1; }
  .portal-save { width: 100%; min-width: 0; }
  .sponsor-item { grid-template-columns: 30px minmax(0,1fr) 28px; }
  .sponsor-thumb { display: none; }
  .sponsor-fields { grid-template-columns: 1fr; }
  .sponsor-upload-actions { display: grid; grid-template-columns: repeat(2,1fr); }
  .module-studio .top-actions .room-badge { display: none; }
  .module-page-head { display: grid; align-items: start; }
  .module-page-head .button { justify-self: start; }
  .module-hub-grid, .recommended-flow > div { grid-template-columns: 1fr; }
  .module-monitor .section-header { align-items: flex-start; gap: 8px; }
  .module-monitor .inline-actions { flex-wrap: wrap; justify-content: flex-end; }
}

@media (max-width: 900px) {
  .operations-layout { grid-template-columns: 1fr; }
  .delegation-completion { align-items: stretch; flex-direction: column; }
  .delegation-completion .button { width: 100%; }
}

@media (max-width: 560px) {
  .match-operation-card { grid-template-columns: 1fr; }
  .notification-card { align-items: stretch; flex-direction: column; }
  .notification-card .button { width: 100%; }
  .audit-table { min-width: 680px; }
}

/* ===== Tela de aparência da barra horizontal ===== */
.appearance-choices { display: grid; gap: 8px; }
.appearance-choices-head { display: grid; gap: 2px; }
.appearance-choices-head strong { font-size: 12px; }
.appearance-choices-head small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.appearance-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 7px; }
.appearance-choice { min-height: 46px; padding: 7px 9px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--muted-soft); text-align: left; cursor: pointer; }
.appearance-choice:hover { border-color: var(--line-strong); }
.appearance-choice.active { border-color: rgba(216,173,86,.62); background: rgba(216,173,86,.09); color: var(--gold); }
.appearance-choice span { min-width: 0; display: grid; gap: 2px; }
.appearance-choice strong { font-size: 12px; }
.appearance-choice small { color: var(--muted); font-size: 11px; line-height: 1.3; }
.choice-swatch { width: 40px; height: 26px; flex: 0 0 auto; border-bottom: 2px solid var(--gold); border-radius: 3px; background: #17141c; box-shadow: 0 5px 11px rgba(0,0,0,.35); }
.choice-swatch-editorial { background: linear-gradient(90deg, #8253cd 0 12%, #1b1d26 12%); }
.choice-swatch-cards { border-radius: 7px; background: repeating-linear-gradient(90deg, #2a2d38 0 8px, #0f1116 8px 10px); }
.choice-swatch-glass { background: linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.06)); }
.choice-swatch-premier { background: linear-gradient(105deg, #8253cd 0 55%, #fff 55% 61%, #0b0d12 61%); }
.choice-swatch-champions { background: radial-gradient(circle at 50% 0, #2c418a, #060a1c 75%); }
.choice-swatch-diagonal { background: linear-gradient(115deg, #0b0d12 0 40%, #d8ad56 40% 46%, #8253cd 46%); }
.sponsor-bar-settings { display: grid; gap: 14px; }
.sponsor-bar-preview-card, .sponsor-bar-group { padding: 14px; display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.sponsor-bar-group > header, .sponsor-bar-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sponsor-bar-group > header { display: grid; gap: 2px; }
.sponsor-bar-group > header strong, .sponsor-bar-preview-head strong { font-size: 13px; }
.sponsor-bar-group > header small, .sponsor-bar-preview-head small { display: block; color: var(--muted); font-size: 11px; }
.sponsor-bar-status { padding: 4px 9px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted-soft); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.sponsor-bar-status.is-live { border-color: rgba(56,217,150,.5); color: var(--green); }
.sponsor-bar-preview { position: relative; width: 100%; aspect-ratio: 7.5 / 1; container-type: inline-size; overflow: hidden; border: 1px dashed var(--line-strong); border-radius: 6px; background: repeating-conic-gradient(#15171e 0 25%, #101218 0 50%) 0 0 / 16px 16px; }
.sponsor-bar-preview .sponsor-wide-bar { inset: 0; left: 0; top: 0; width: 100%; height: 100%; animation: none !important; transform: scale(var(--sponsor-bar-scale,1)); --sponsor-bar-border-width: 1px; }
.sponsor-bar-presets { display: grid; gap: 7px; }
.sponsor-bar-presets > span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sponsor-bar-presets > div { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
.sponsor-bar-preset { padding: 8px 10px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-3); color: var(--text); text-align: left; cursor: pointer; }
.sponsor-bar-preset:hover { border-color: rgba(216,173,86,.5); }
.sponsor-bar-preset strong { font-size: 12px; }
.sponsor-bar-preset small { color: var(--muted); font-size: 11px; }
.sponsor-wide-bar.sponsor-bar-border-none, .overlay-output[data-output-layer="sponsor-bar"] .sponsor-wide-bar.sponsor-bar-border-none { border: 0; }
.sponsor-wide-bar.sponsor-bar-border-accent, .overlay-output[data-output-layer="sponsor-bar"] .sponsor-wide-bar.sponsor-bar-border-accent { border: var(--sponsor-bar-border-width, 3px) solid var(--overlay-accent); }
.sponsor-wide-bar.sponsor-bar-shadow-soft { box-shadow: 0 .6cqw 1.6cqw rgba(0,0,0,.32); }
.sponsor-wide-bar.sponsor-bar-shadow-strong { box-shadow: 0 1cqw 2.6cqw rgba(0,0,0,.58); }

/* ===== Apresentação da equipe: estilos inspirados em transmissões profissionais ===== */
.photo-lineup-style-premier { border: 0; border-radius: 0; background: linear-gradient(165deg, color-mix(in srgb, var(--photo-team-color) 46%, #06070b) 0, #06070b 58%); box-shadow: 0 1.6cqw 3.4cqw rgba(0,0,0,.45); }
.photo-lineup-style-premier::before { height: .3cqw; background: linear-gradient(90deg, var(--overlay-accent) 0 34%, #fff 34% 36%, transparent 36%); }
.photo-lineup-style-premier .photo-lineup-head { min-height: 5.6cqw; padding-right: 0; border-bottom: 0; background: linear-gradient(104deg, var(--photo-team-color) 0 64%, transparent 64.2%); }
.photo-lineup-style-premier .photo-lineup-head h2 { font-style: italic; text-transform: uppercase; }
.photo-lineup-style-premier .photo-lineup-head > span { align-self: stretch; display: grid; place-items: center; padding: 0 2.2cqw 0 3cqw; border-left: 0; background: #fff; color: #0a0b10; clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); font-size: .8cqw; }
.photo-lineup-style-premier .photo-lineup-grid { padding: 1cqw 1.3cqw; gap: .5cqw; background: transparent; }
.photo-lineup-style-premier .photo-player { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.photo-lineup-style-premier .photo-player-image { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
.photo-lineup-style-premier .photo-player-image b { left: 0; bottom: .9cqw; min-width: 2.7cqw; border: 0; border-left: .22cqw solid var(--overlay-accent); background: #fff; color: #0a0b10; font-size: 1.5cqw; font-style: italic; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
.photo-lineup-style-premier .photo-player-copy { border-top: 0; border-bottom: .22cqw solid var(--photo-team-color); background: #fff; }
.photo-lineup-style-premier .photo-player-copy strong { color: #0a0b10; }
.photo-lineup-style-premier .photo-player-copy small { padding: 0; background: transparent; color: #3b3f4c; }
.photo-lineup-style-premier .lineup-spotlight { background: linear-gradient(105deg, var(--photo-team-color) 0 32%, #06070b 32.2%); }
.photo-lineup-style-premier .lineup-spotlight-number { background: #fff; color: #0a0b10; font-style: italic; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); }
.photo-lineup-style-premier .bench-player { background: rgba(255,255,255,.94); color: #0a0b10; }
.photo-lineup-style-premier .bench-player > b { color: #0a0b10; }
.photo-lineup-style-champions { border: 1px solid color-mix(in srgb, var(--overlay-accent) 60%, transparent); border-radius: .2cqw; background: radial-gradient(120% 90% at 50% 0, color-mix(in srgb, var(--photo-team-color) 34%, #0a1230) 0, #060a1c 70%); box-shadow: 0 1.6cqw 3.4cqw rgba(0,0,0,.5); }
.photo-lineup-style-champions::before { height: .14cqw; background: linear-gradient(90deg, transparent, var(--overlay-accent), transparent); }
.photo-lineup-style-champions .photo-lineup-head { background: transparent; border-bottom: 1px solid color-mix(in srgb, var(--overlay-accent) 40%, transparent); }
.photo-lineup-style-champions .photo-lineup-head h2 { letter-spacing: .12em; }
.photo-lineup-style-champions .photo-lineup-head > span { border: 1px solid var(--overlay-accent); background: transparent; color: var(--overlay-accent); letter-spacing: .24em; }
.photo-lineup-style-champions .photo-lineup-grid { background: transparent; }
.photo-lineup-style-champions .photo-player { border: 1px solid rgba(255,255,255,.14); border-top: .2cqw solid var(--overlay-accent); border-radius: 0; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015)); box-shadow: none; }
.photo-lineup-style-champions .photo-player-image { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--photo-team-color) 55%, #0a1230), #060a1c); }
.photo-lineup-style-champions .photo-player-image b { left: 50%; bottom: .4cqw; width: 2.2cqw; height: 2.2cqw; min-width: 0; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--overlay-accent); color: #0a1230; transform: translateX(-50%); }
.photo-lineup-style-champions .photo-player-copy { border-top: 0; justify-items: center; text-align: center; }
.photo-lineup-style-champions .photo-player-copy small { background: transparent; color: var(--overlay-accent); }
.photo-lineup-style-champions .lineup-spotlight { background: radial-gradient(90% 100% at 30% 50%, color-mix(in srgb, var(--photo-team-color) 40%, #0a1230), #060a1c); }
.photo-lineup-style-champions .lineup-spotlight-number { background: transparent; color: var(--overlay-accent); text-shadow: 0 0 2cqw color-mix(in srgb, var(--overlay-accent) 40%, transparent); }
.photo-lineup-style-diagonal { border: 0; border-radius: 0; background: linear-gradient(115deg, #0b0d12 0 56%, color-mix(in srgb, var(--photo-team-color) 42%, #0b0d12) 100%); }
.photo-lineup-style-diagonal .photo-lineup-head { border-bottom: 0; background: linear-gradient(100deg, var(--photo-team-color) 0 45%, var(--overlay-accent) 45% 46%, transparent 46%); }
.photo-lineup-style-diagonal .photo-lineup-grid { background: transparent; }
.photo-lineup-style-diagonal .photo-player { border: 0; border-radius: 0; background: #14171f; box-shadow: none; clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%); }
.photo-lineup-style-diagonal .photo-player-image::after { height: 45%; }
.photo-lineup-style-diagonal .photo-player-image b { top: .5cqw; right: 1cqw; bottom: auto; left: auto; border: 0; background: var(--overlay-accent); color: #0b0d12; font-size: 1.3cqw; font-style: italic; }
.photo-lineup-style-diagonal .photo-player-copy { padding-inline: 1cqw; border-top: .2cqw solid var(--overlay-accent); }
.photo-lineup-style-diagonal .lineup-spotlight-photo { clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
.photo-lineup-style-diagonal .lineup-spotlight-number { background: var(--overlay-accent); color: #0b0d12; font-style: italic; }

/* Esquema tático: campo com marcações e goleiro destacado */
.pitch-half::after { position: absolute; top: 28%; bottom: 28%; left: 0; width: 34%; border: 1px solid rgba(255,255,255,.48); border-left: 0; content: ''; }
.pitch-spot { position: absolute; top: 50%; left: 12%; width: .5cqw; height: .5cqw; border-radius: 50%; background: rgba(255,255,255,.55); transform: translate(-50%,-50%); }
.tactical-player:nth-child(4) b { border-color: #f2c94c; background: #f2c94c; color: #111; }
.tactical-player b { background-image: radial-gradient(circle at 32% 28%, rgba(255,255,255,.35), transparent 55%); }

/* ===== Animações selecionáveis da apresentação ===== */
@keyframes lineup-wipe-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes lineup-wipe-out { from { clip-path: inset(0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes lineup-rise-in { from { opacity: 0; transform: translateY(5cqw); } to { opacity: 1; transform: none; } }
@keyframes lineup-rise-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(5cqw); } }
@keyframes lineup-zoom-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes lineup-zoom-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.94); } }
@keyframes lineup-split-in { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0); } }
@keyframes lineup-split-out { from { clip-path: inset(0); } to { clip-path: inset(0 50% 0 50%); } }
@keyframes lineup-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lineup-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes lineup-card-cascade { from { opacity: 0; transform: translateY(1.4cqw) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes lineup-dot-pop { from { opacity: 0; scale: .2; } to { opacity: 1; scale: 1; } }
@keyframes lineup-stage-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes lineup-stage-rise { from { opacity: 0; transform: translateY(2cqw); } to { opacity: 1; transform: none; } }
@keyframes lineup-stage-zoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes lineup-stage-split { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0); } }
.photo-lineup.photo-lineup-anim-wipe.is-entering { animation-name: lineup-wipe-in; }
.photo-lineup.photo-lineup-anim-wipe.is-exiting { animation-name: lineup-wipe-out; }
.photo-lineup.photo-lineup-anim-rise.is-entering { animation-name: lineup-rise-in; }
.photo-lineup.photo-lineup-anim-rise.is-exiting { animation-name: lineup-rise-out; }
.photo-lineup.photo-lineup-anim-zoom.is-entering { animation-name: lineup-zoom-in; }
.photo-lineup.photo-lineup-anim-zoom.is-exiting { animation-name: lineup-zoom-out; }
.photo-lineup.photo-lineup-anim-split.is-entering { animation-name: lineup-split-in; }
.photo-lineup.photo-lineup-anim-split.is-exiting { animation-name: lineup-split-out; }
.photo-lineup.photo-lineup-anim-cascade.is-entering { animation-name: lineup-fade-in; }
.photo-lineup.photo-lineup-anim-cascade.is-exiting { animation-name: lineup-fade-out; }
.photo-lineup.photo-lineup-anim-wipe.is-stage-changing .photo-lineup-body > * { animation-name: lineup-stage-wipe; }
.photo-lineup.photo-lineup-anim-rise.is-stage-changing .photo-lineup-body > * { animation-name: lineup-stage-rise; }
.photo-lineup.photo-lineup-anim-zoom.is-stage-changing .photo-lineup-body > * { animation-name: lineup-stage-zoom; }
.photo-lineup.photo-lineup-anim-split.is-stage-changing .photo-lineup-body > * { animation-name: lineup-stage-split; }
.photo-lineup.photo-lineup-anim-cascade.is-stage-changing .photo-lineup-body > * { animation-name: lineup-fade-in; }
.photo-lineup.photo-lineup-anim-cascade.is-entering .photo-player { animation: lineup-card-cascade .55s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(260ms + var(--player-index, 0) * 90ms + var(--photo-lineup-motion-offset, 0ms)); }
.photo-lineup.photo-lineup-anim-cascade.is-stage-changing .photo-player, .photo-lineup.photo-lineup-anim-cascade.is-stage-changing .bench-player { animation: lineup-card-cascade .55s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--photo-lineup-stage-offset, 0ms) + 120ms + var(--player-index, 0) * 80ms); }
.photo-lineup.is-entering .tactical-player { animation: lineup-dot-pop .5s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(240ms + var(--player-index, 0) * 55ms + var(--photo-lineup-motion-offset, 0ms)); }
.photo-lineup-stage-formation.is-stage-changing .tactical-player { animation: lineup-dot-pop .5s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--photo-lineup-stage-offset, 0ms) + 120ms + var(--player-index, 0) * 45ms); }
.photo-lineup.is-entering .bench-player { animation: photo-player-arrive .48s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(170ms + var(--player-index, 0) * 40ms + var(--photo-lineup-motion-offset, 0ms)); }

/* Modo OBS: somente transform/opacity, sem clip-path animado */
@keyframes obs-enter-up { from { opacity: 0; transform: translate3d(0,24px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes obs-exit-down { from { opacity: 1; transform: translate3d(0,0,0); } to { opacity: 0; transform: translate3d(0,24px,0); } }
.obs-render-mode .photo-lineup[class*="photo-lineup-anim-"].is-entering { animation-name: obs-enter-left; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.obs-render-mode .photo-lineup[class*="photo-lineup-anim-"].is-exiting { animation-name: obs-exit-left; animation-timing-function: cubic-bezier(.7,0,.84,0); }
.obs-render-mode .photo-lineup.photo-lineup-anim-rise.is-entering { animation-name: obs-enter-up; }
.obs-render-mode .photo-lineup.photo-lineup-anim-rise.is-exiting { animation-name: obs-exit-down; }
.obs-render-mode .photo-lineup.photo-lineup-anim-zoom.is-entering, .obs-render-mode .photo-lineup.photo-lineup-anim-split.is-entering { animation-name: obs-enter-scale; }
.obs-render-mode .photo-lineup.photo-lineup-anim-zoom.is-exiting, .obs-render-mode .photo-lineup.photo-lineup-anim-split.is-exiting { animation-name: obs-exit-scale; }
.obs-render-mode .photo-lineup.photo-lineup-anim-cascade.is-entering { animation-name: obs-fade; }
.obs-render-mode .photo-lineup.photo-lineup-anim-cascade.is-exiting { animation-name: obs-fade-out; }
.obs-render-mode .photo-lineup[class*="photo-lineup-anim-"].is-stage-changing .photo-lineup-body > * { animation-name: obs-enter-scale; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.obs-render-mode .photo-lineup.photo-lineup-anim-rise.is-stage-changing .photo-lineup-body > * { animation-name: obs-enter-up; }
.obs-render-mode .photo-lineup.photo-lineup-anim-wipe.is-stage-changing .photo-lineup-body > * { animation-name: obs-enter-left; }
@media (max-width: 720px) { .sponsor-bar-presets > div { grid-template-columns: 1fr; } }
.module-section > .appearance-choices, .photo-lineup-settings .appearance-choices { margin-bottom: 14px; }

/* Versão do sistema e contexto plataforma / partida */
.app-version { margin: 18px 0 0; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-align: center; }
.module-sidebar-version { margin-top: 24px; text-align: left; padding-left: 12px; }
.module-sidebar-back { padding: 8px 12px; color: var(--muted-soft); font-size: 12px; font-weight: 700; text-decoration: none; }
.module-sidebar-back:hover { color: var(--gold); }
.module-sidebar-match { margin: 4px 0 10px; padding: 10px 12px; display: grid; gap: 3px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); }
.module-sidebar-match small { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.module-sidebar-match strong { font-size: 15px; }
.module-sidebar-match span { color: var(--muted); font-size: 12px; }

/* Delegações, portal da equipe e elenco por partida */
.portal-banner { margin: 12px 0; padding: 11px 14px; display: grid; gap: 2px; border: 1px solid var(--line); border-left-width: 4px; border-radius: 6px; background: var(--surface-2); }
.portal-banner strong { font-size: 13px; }
.portal-banner span { color: var(--muted-soft); font-size: 12px; }
.portal-banner-ok { border-left-color: var(--green); }
.portal-banner-soon { border-left-color: var(--yellow); }
.portal-banner-late { border-left-color: var(--red); }
.portal-checks { margin: 12px 0; padding: 12px 14px; display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.portal-checks small { display: block; color: var(--muted); font-size: 12px; }
.portal-checks ul, .delegation-issues { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 12px; }
.portal-check-error { color: var(--red); }
.portal-check-warn { color: var(--yellow); }
.portal-check-good { margin: 0; color: var(--green); font-size: 12px; }
.portal-kit, .portal-import, .match-squad { margin: 14px 0; padding: 14px; display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.portal-import summary { cursor: pointer; font-weight: 700; font-size: 13px; }
.portal-import textarea { width: 100%; min-height: 110px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font: 12px/1.4 ui-monospace, monospace; }
.portal-file-button { position: relative; cursor: pointer; }
.portal-file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.portal-sponsor-row { display: flex; gap: 8px; }
.portal-sponsor-row input { flex: 1; }
.kit-preview { padding: 8px 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-radius: 4px; background: #101218; border-left: 6px solid var(--kit-a); border-bottom: 3px solid var(--kit-b); color: #fff; }
.kit-shield { width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--kit-a); font-size: 12px; font-weight: 800; }
.kit-shield img { width: 100%; height: 100%; object-fit: contain; }
.kit-name { color: rgba(255,255,255,.7); font-size: 12px; }
.kit-score { padding: 2px 10px; background: var(--kit-b); color: #111; font-weight: 800; }
.kit-preview em { padding: 2px 8px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; font-size: 11px; font-style: normal; }
.delegation-list { margin-top: 14px; display: grid; gap: 12px; }
.delegation-row { padding: 14px; display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.delegation-row.is-late { border-color: rgba(250,98,110,.5); }
.delegation-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.delegation-row-head small { display: block; color: var(--muted); font-size: 12px; }
.delegation-deadline { padding: 4px 9px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 11px; font-weight: 700; }
.delegation-deadline-soon { color: var(--yellow); }
.delegation-deadline-late { color: var(--red); }
.delegation-progress { position: relative; height: 16px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.delegation-progress i { position: absolute; inset: 0 auto 0 0; background: var(--green); }
.delegation-progress span { position: relative; padding-left: 8px; font-size: 11px; font-weight: 800; line-height: 16px; }
.delegation-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.delegation-actions input { flex: 1; min-width: 160px; }
.delegation-history summary { cursor: pointer; font-size: 12px; font-weight: 700; }
.access-user-row { padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }
.match-squad-list { max-height: 320px; overflow: auto; display: grid; gap: 4px; }
.match-squad-row { padding: 6px 8px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); font-size: 12px; }
.match-squad-row label { display: flex; align-items: center; gap: 5px; color: var(--muted-soft); }
.studio .tactical-player { cursor: grab; touch-action: none; user-select: none; }
.tactical-board aside em { margin-top: .5cqw; color: rgba(255,255,255,.5); font-size: .6cqw; font-style: normal; letter-spacing: .08em; }
.photo-lineup-style-editorial::before, .photo-lineup-style-cards::before, .photo-lineup-style-glass::before { background: var(--photo-team-color2, var(--overlay-accent)); }
.photo-lineup-head > span { border-left-color: var(--photo-team-color2, var(--overlay-accent)); }

/* Tela de usuários e acessos */
.access-screen { display: grid; gap: 16px; }
.access-alerts { padding: 12px 14px; display: grid; gap: 8px; border: 1px solid rgba(241,191,82,.4); border-left: 4px solid var(--yellow); border-radius: 8px; background: rgba(241,191,82,.06); }
.access-alert-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12px; }
.access-alert-row > div { display: flex; gap: 6px; }
.access-toolbar { position: sticky; top: 0; z-index: 3; padding: 10px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; background: var(--bg); }
.access-toolbar input[type="search"] { flex: 1; min-width: 220px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--text); }
.access-chips { display: flex; gap: 6px; }
.access-chip { height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--muted-soft); font-size: 12px; font-weight: 700; cursor: pointer; }
.access-chip.active { border-color: rgba(216,173,86,.62); background: rgba(216,173,86,.1); color: var(--gold); }
.access-section { display: grid; gap: 10px; }
.access-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.access-card { padding: 14px; display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.access-card.is-empty { border-style: dashed; }
.access-card-head { display: flex; align-items: center; gap: 10px; }
.access-card-head strong { font-size: 14px; }
.access-card-head small { display: block; color: var(--muted); font-size: 12px; }
.access-avatar { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--avatar, var(--purple)); color: #fff; font-size: 12px; font-weight: 800; }
.access-you { padding: 1px 6px; border-radius: 999px; background: rgba(56,217,150,.15); color: var(--green); font-size: 11px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.access-meta { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.access-meta dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.access-meta dd { margin: 2px 0 0; font-size: 12px; }
.access-card-actions, .access-user-actions { display: flex; gap: 6px; }
.access-user { padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.access-user small { display: block; color: var(--muted); font-size: 11px; }
.access-reveal { padding: 8px 10px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(56,217,150,.4); border-radius: 6px; background: rgba(56,217,150,.07); }
.access-reveal > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.access-reveal small { color: var(--muted-soft); font-size: 11px; }
.access-reveal code { font-size: 14px; letter-spacing: .06em; user-select: all; }
.access-add summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--gold); }
.access-add[open] summary { margin-bottom: 8px; }
.pw-meter { margin-top: 6px; display: grid; grid-template-columns: repeat(4, 1fr) auto; align-items: center; gap: 4px; }
.pw-meter i { height: 4px; border-radius: 2px; background: var(--surface-3); }
.pw-meter span { padding-left: 6px; color: var(--muted); font-size: 11px; }
.pw-meter[data-level="1"] i:nth-child(-n+1) { background: var(--red); }
.pw-meter[data-level="2"] i:nth-child(-n+2) { background: var(--yellow); }
.pw-meter[data-level="3"] i:nth-child(-n+3) { background: #8fd66b; }
.pw-meter[data-level="4"] i { background: var(--green); }

/* Portal da equipe: campeonatos, inscrição e escalação por partida */
.portal-tabs { margin: 14px 0; display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.portal-tabs button { min-height: 42px; border: 0; border-right: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-weight: 700; cursor: pointer; }
.portal-tabs button:last-child { border-right: 0; }
.portal-tabs button.active { background: var(--gold); color: #111; }
.portal-champ-grid { margin-bottom: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.portal-champ-card { padding: 12px; display: grid; gap: 3px; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.portal-champ-card.active { border-color: rgba(216,173,86,.7); background: rgba(216,173,86,.09); }
.portal-champ-card small, .portal-champ-card span { color: var(--muted); font-size: 12px; }
.portal-registration, .portal-matches, .portal-squad { margin: 14px 0; padding: 14px; display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.portal-reg-list, .portal-squad-list { max-height: 340px; overflow: auto; display: grid; gap: 4px; }
.portal-reg-row, .portal-squad-row { padding: 6px 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.portal-reg-row label:first-child { display: flex; align-items: center; gap: 8px; flex: 1; }
.portal-reg-row small, .portal-squad-row small { margin-left: 8px; color: var(--muted); font-size: 11px; }
.portal-reg-number { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.portal-reg-number input { width: 64px; text-align: center; }
.portal-match { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.portal-match.active { border-color: rgba(216,173,86,.6); }
.portal-match small, .portal-match-status { display: block; color: var(--muted); font-size: 12px; }
.portal-match-actions { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.portal-roles { display: flex; gap: 4px; }
.portal-role { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted-soft); font-size: 12px; font-weight: 700; cursor: pointer; }
.portal-role.active { color: #111; }
.portal-role-starter { background: var(--green); border-color: var(--green); }
.portal-role-reserve { background: var(--yellow); border-color: var(--yellow); }
.portal-role-out { background: var(--muted-soft); border-color: var(--muted-soft); }
.portal-slots { display: grid; gap: 6px; }
.portal-slot { padding: 6px 10px; display: grid; grid-template-columns: 130px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-size: 12px; }
.portal-slot span { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.portal-slot > div { display: flex; gap: 4px; }
.portal-checks-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 12px; }

/* ===== Overlay de estatísticas ===== */
.stats-overlay { position: absolute; left: var(--stats-x, 30%); top: var(--stats-y, 56%); width: 40cqw; padding: 1.1cqw 1.4cqw 1.3cqw; border-left: .35cqw solid var(--overlay-accent, #d8ad56); color: var(--overlay-light, #fff); font-family: var(--stats-font, var(--display)); font-size: calc(1.15cqw * var(--stats-font-scale, 1)); scale: var(--stats-scale, 1); transform-origin: top left; }
.stats-view-timeline { width: 46cqw; }
.stats-view-player { width: 34cqw; }
.stats-style-broadcast { background: linear-gradient(135deg, rgba(10,12,18,.96), rgba(20,22,32,.92)); box-shadow: 0 1.2cqw 2.6cqw rgba(0,0,0,.45); }
.stats-style-glass { border: 1px solid rgba(255,255,255,.22); border-left: .35cqw solid var(--overlay-accent, #d8ad56); background: rgba(12,14,20,.62); backdrop-filter: blur(1cqw); }
.stats-style-minimal { border-left: 0; background: transparent; text-shadow: 0 .1cqw .6cqw rgba(0,0,0,.95); }
.stats-title { margin-bottom: .7em; color: var(--overlay-accent, #d8ad56); font-size: .72em; font-weight: 800; letter-spacing: .22em; }
.stats-head { margin-bottom: .8em; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8em; }
.stats-team { display: flex; align-items: center; gap: .6em; font-size: 1.1em; font-weight: 800; letter-spacing: .06em; }
.stats-team-away { justify-content: flex-end; }
.stats-overlay .team-badge { width: 2.2em; height: 2.6em; margin: 0; font-size: .7em; }
.stats-score { font-size: 1.9em; font-weight: 800; letter-spacing: .04em; }
.stats-rows { display: grid; gap: .75em; }
.stats-row { display: grid; grid-template-columns: 3.4em 1fr 3.4em; align-items: center; gap: .3em .6em; }
.stats-row b { font-size: 1.3em; font-weight: 800; }
.stats-row b:last-of-type { text-align: right; }
.stats-row span { text-align: center; font-size: .78em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .82; }
.stats-bar { grid-column: 1 / -1; height: .5em; display: flex; gap: .2em; }
.stats-bar i { display: block; height: 100%; }
.stats-bar-home { background: var(--stats-home, #8253cd); transform-origin: left center; }
.stats-bar-away { background: var(--stats-away, #4588b5); transform-origin: right center; }
.stats-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; }
.stats-column { display: grid; align-content: start; gap: .5em; }
.stats-event { display: grid; grid-template-columns: auto 3em 1fr; align-items: center; gap: .6em; padding: .45em .6em; background: rgba(255,255,255,.06); border-left: .25em solid var(--stats-home, #8253cd); }
.stats-column-away .stats-event { border-left-color: var(--stats-away, #4588b5); }
.stats-event span { color: var(--overlay-accent, #d8ad56); font-weight: 800; }
.stats-event strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; font-size: .95em; }
.stats-empty { padding: .6em; opacity: .5; font-size: .85em; }
.stats-icon { width: .9em; height: .9em; display: inline-block; border-radius: 50%; background: #fff; }
.stats-icon-yellow, .stats-icon-red { width: .65em; height: .95em; border-radius: .1em; background: #f2c94c; }
.stats-icon-red { background: #eb4d4b; }
.stats-icon-sub { width: auto; background: transparent; font-style: normal; font-weight: 800; }
.stats-player { display: grid; grid-template-columns: 8em 1fr; gap: 1.2em; align-items: stretch; }
.stats-player-photo { min-height: 9em; display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--stats-side, #8253cd) 55%, #10121a); font-size: 3em; font-weight: 800; }
.stats-player-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.stats-player-copy { display: grid; align-content: center; gap: .4em; }
.stats-player-copy small { color: var(--overlay-accent, #d8ad56); font-size: .8em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.stats-player-copy h3 { margin: 0; font-size: 2em; line-height: 1; text-transform: uppercase; }
.stats-player-copy p { margin: 0; font-size: .85em; opacity: .75; }
.stats-chips { display: flex; gap: .6em; }
.stats-chips span { min-width: 4em; padding: .4em .6em; display: grid; justify-items: center; background: rgba(255,255,255,.08); border-bottom: .2em solid var(--stats-side, #8253cd); font-size: 1.3em; font-weight: 800; }
.stats-chips small { color: inherit; font-size: .5em; letter-spacing: .1em; opacity: .7; }
.stats-overlay.is-entering .stats-bar i { animation: stats-bar-grow .9s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(.25s + var(--row, 0) * .09s); }
.stats-overlay.is-entering .stats-row, .stats-overlay.is-entering .stats-event { animation: lineup-card-cascade .5s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(.2s + var(--row, 0) * .07s); }
@keyframes stats-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.stats-overlay.is-entering.stats-anim-rise { animation: lineup-rise-in .6s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--stats-motion-offset, 0ms); }
.stats-overlay.is-exiting.stats-anim-rise { animation: lineup-rise-out .55s ease-in both; animation-delay: var(--stats-motion-offset, 0ms); }
.stats-overlay.is-entering.stats-anim-slide { animation: photo-lineup-arrive .65s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--stats-motion-offset, 0ms); }
.stats-overlay.is-exiting.stats-anim-slide { animation: photo-lineup-leave .55s ease-in both; animation-delay: var(--stats-motion-offset, 0ms); }
.stats-overlay.is-entering.stats-anim-zoom { animation: lineup-zoom-in .55s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--stats-motion-offset, 0ms); }
.stats-overlay.is-exiting.stats-anim-zoom { animation: lineup-zoom-out .5s ease-in both; animation-delay: var(--stats-motion-offset, 0ms); }
.stats-overlay.is-entering.stats-anim-wipe { animation: lineup-wipe-in .65s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--stats-motion-offset, 0ms); }
.stats-overlay.is-exiting.stats-anim-wipe { animation: lineup-wipe-out .55s ease-in both; animation-delay: var(--stats-motion-offset, 0ms); }
.stats-overlay.is-entering.stats-anim-fade { animation: lineup-fade-in .6s ease both; animation-delay: var(--stats-motion-offset, 0ms); }
.stats-overlay.is-exiting.stats-anim-fade { animation: lineup-fade-out .5s ease both; animation-delay: var(--stats-motion-offset, 0ms); }
.obs-render-mode .stats-overlay.is-entering { animation-name: obs-enter-up; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.obs-render-mode .stats-overlay.is-exiting { animation-name: obs-exit-down; animation-timing-function: cubic-bezier(.7,0,.84,0); }
.obs-render-mode .stats-overlay.is-entering.stats-anim-slide, .obs-render-mode .stats-overlay.is-entering.stats-anim-wipe { animation-name: obs-enter-left; }
.obs-render-mode .stats-overlay.is-exiting.stats-anim-slide, .obs-render-mode .stats-overlay.is-exiting.stats-anim-wipe { animation-name: obs-exit-left; }
.obs-render-mode .stats-overlay.is-entering.stats-anim-zoom { animation-name: obs-enter-scale; }
.obs-render-mode .stats-overlay.is-exiting.stats-anim-zoom { animation-name: obs-exit-scale; }
.obs-render-mode .stats-overlay.is-entering.stats-anim-fade { animation-name: obs-fade; }
.obs-render-mode .stats-overlay.is-exiting.stats-anim-fade { animation-name: obs-fade-out; }

/* ===== Módulo Estatísticas e seções de configuração ===== */
.stats-module { display: grid; gap: 14px; }
.stats-block { padding: 14px; display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.stats-input-head, .stats-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 130px; align-items: center; gap: 10px; font-size: 12px; }
.stats-input-head { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.stats-input-head b, .stats-input-row > b { text-align: center; }
.stats-input-row { padding: 4px 0; border-bottom: 1px solid var(--line); }
.stats-input-row.is-derived { color: var(--muted-soft); }
.stats-stepper { display: flex; align-items: center; justify-content: center; gap: 8px; }
.stats-stepper b { min-width: 28px; text-align: center; font-size: 15px; }
.settings-stack { display: grid; gap: 10px; }
.settings-section { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.settings-section > summary { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; cursor: pointer; }
.settings-section > summary::-webkit-details-marker { display: none; }
.settings-section > summary::after { content: '+'; color: var(--gold); font-size: 18px; font-weight: 700; }
.settings-section[open] > summary::after { content: '−'; }
.settings-section > summary span { display: grid; gap: 2px; }
.settings-section > summary strong { font-size: 13px; }
.settings-section > summary small { color: var(--muted); font-size: 12px; }
.settings-section-body { padding: 0 14px 14px; display: grid; gap: 12px; }
.settings-footer { margin-top: 4px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; border: 1px dashed var(--line-strong); border-radius: 8px; }
.settings-footer small { display: block; color: var(--muted); font-size: 12px; }
.stats-module, .stats-block { min-width: 0; max-width: 100%; }
.stats-block .access-chips { flex-wrap: wrap; }
.stats-block .access-chip { height: auto; min-height: 30px; padding: 5px 12px; white-space: nowrap; }
.stats-input-head, .stats-input-row { grid-template-columns: minmax(0, 1fr) 108px 108px; }

/* ===== Escalação · conceitos de layout (photoLineupLayout) =====
   Cada conceito tem composição, visual e coreografia próprios. As animações usam só transform/opacity,
   portanto valem igualmente na fonte do OBS (obs-render-mode). */
.photo-lineup[class*="photo-lineup-layout-"] { border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.photo-lineup[class*="photo-lineup-layout-"] .photo-lineup-body { min-height: 0; overflow: visible; }
.photo-lineup[class*="photo-lineup-layout-"] .photo-lineup-grid { min-height: 0; background: transparent; }
.photo-lineup[class*="photo-lineup-layout-"] .photo-player:first-child:nth-last-child(5), .photo-lineup[class*="photo-lineup-layout-"] .photo-player:nth-child(7):nth-last-child(5) { grid-column: auto; }

/* 1 · Túnel de entrada — colunas altas, nomes na vertical */
.photo-lineup-layout-tunnel { background: linear-gradient(180deg, rgba(4,5,9,.94), rgba(4,5,9,.82)); border-bottom: .45cqw solid var(--photo-team-color) !important; }
.photo-lineup-layout-tunnel::before { inset: 0 0 auto; height: .22cqw; background: linear-gradient(90deg, var(--photo-team-color) 0 22%, var(--overlay-accent) 22% 30%, transparent 30%); }
.photo-lineup-layout-tunnel .photo-lineup-head { min-height: 4.6cqw; padding: .9cqw 1.5cqw .3cqw; border: 0; background: transparent; }
.photo-lineup-layout-tunnel .photo-lineup-head h2 { font-size: 2.5cqw; font-style: italic; text-transform: uppercase; letter-spacing: .02em; }
.photo-lineup-layout-tunnel .photo-lineup-head > span { border: 0; background: var(--overlay-accent); color: #07080c; letter-spacing: .2em; transform: skewX(-12deg); }
.photo-lineup-layout-tunnel .photo-lineup-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 8cqw); justify-content: center; gap: .5cqw; padding: .7cqw 1.4cqw .3cqw; }
.photo-lineup-layout-tunnel .photo-player { position: relative; height: 23cqw; border: 0; border-bottom: .35cqw solid var(--photo-team-color); border-radius: 0; background: #05060a; }
.photo-lineup-layout-tunnel .photo-player-image { position: absolute; inset: 0; height: auto; }
.photo-lineup-layout-tunnel .photo-player-image::after { height: 68%; background: linear-gradient(transparent, rgba(3,4,7,.92)); }
.photo-lineup-layout-tunnel .photo-player-fallback { margin-top: -6cqw; font-size: 4.4cqw; }
.photo-lineup-layout-tunnel .photo-player-image b { inset: .35cqw 0 auto 0; min-width: 0; padding: 0; border: 0; background: transparent; color: transparent; font-size: 3.1cqw; font-style: italic; letter-spacing: -.04em; -webkit-text-stroke: .09cqw rgba(255,255,255,.9); text-shadow: none; }
.photo-lineup-layout-tunnel .photo-player-copy { position: absolute; inset: auto 0 0 0; min-height: 0; padding: .5cqw .3cqw .6cqw; border: 0; justify-items: center; gap: .4cqw; }
.photo-lineup-layout-tunnel .photo-player-copy strong { max-height: 11.5cqw; display: block; font-size: 1.22cqw; letter-spacing: .04em; white-space: nowrap; text-overflow: ellipsis; writing-mode: vertical-rl; transform: rotate(180deg); }
.photo-lineup-layout-tunnel .photo-player-copy small { padding: .14cqw .3cqw; background: var(--overlay-accent); color: #07080c; font-size: .6cqw; }
.photo-lineup-layout-tunnel .lineup-staff-strip { padding: 0 1.4cqw .8cqw; }
.photo-lineup-layout-tunnel .lineup-spotlight { background: linear-gradient(105deg, #05060a 0 55%, color-mix(in srgb, var(--photo-team-color) 40%, #05060a)); }
.photo-lineup-layout-tunnel .lineup-spotlight-number { background: transparent; color: transparent; -webkit-text-stroke: .14cqw var(--overlay-accent); font-style: italic; }
@keyframes tunnel-arrive { from { opacity: 0; transform: translateY(3cqw); } to { opacity: 1; transform: none; } }
@keyframes tunnel-leave { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(2cqw); } }
@keyframes tunnel-rise { from { opacity: 0; transform: translateY(105%) skewY(4deg); } to { opacity: 1; transform: none; } }
@keyframes tunnel-drop { to { opacity: 0; transform: translateY(70%); } }
section.photo-lineup.photo-lineup-layout-tunnel.is-entering { animation: tunnel-arrive .5s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--photo-lineup-motion-offset, 0ms); }
section.photo-lineup.photo-lineup-layout-tunnel.is-exiting { animation: tunnel-leave .5s cubic-bezier(.7,0,.84,0) both; animation-delay: calc(360ms + var(--photo-lineup-motion-offset, 0ms)); }
section.photo-lineup.photo-lineup-layout-tunnel.is-entering .photo-player { animation: tunnel-rise .7s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(220ms + var(--player-index, 0) * 60ms + var(--photo-lineup-motion-offset, 0ms)); }
section.photo-lineup.photo-lineup-layout-tunnel.is-exiting .photo-player { animation: tunnel-drop .36s cubic-bezier(.7,0,.84,0) both; animation-delay: calc(var(--player-index, 0) * 25ms + var(--photo-lineup-motion-offset, 0ms)); }

/* 2 · Carta de coleção — moldura de foil, viradas 3D */
.photo-lineup-layout-poster { border-radius: 1.2cqw !important; background: radial-gradient(90% 130% at 50% 0, color-mix(in srgb, var(--photo-team-color) 42%, #0b0f24), #050716 78%); box-shadow: 0 2cqw 4cqw rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.14) !important; }
.photo-lineup-layout-poster::before { display: none; }
.photo-lineup-layout-poster .photo-lineup-head { min-height: 5.4cqw; padding: .9cqw 1.6cqw; border: 0; background: transparent; }
.photo-lineup-layout-poster .photo-lineup-head h2 { background: linear-gradient(100deg, #fff 0, var(--overlay-accent) 60%, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 2.4cqw; letter-spacing: .06em; }
.photo-lineup-layout-poster .photo-lineup-head > span { border: .1cqw solid var(--overlay-accent); border-radius: 5cqw; background: transparent; color: var(--overlay-accent); letter-spacing: .22em; }
.photo-lineup-layout-poster .photo-lineup-team-mark { border-radius: 50%; border: .18cqw solid var(--overlay-accent); }
.photo-lineup-layout-poster .photo-lineup-grid { padding: .6cqw 1.6cqw 1.5cqw; gap: .8cqw; perspective: 110cqw; }
.photo-lineup-layout-poster .photo-player { position: relative; padding: .2cqw; border: 0; border-radius: .95cqw; background: linear-gradient(135deg, var(--overlay-accent), #fff 24%, var(--photo-team-color) 50%, var(--overlay-accent) 76%, #fff); box-shadow: 0 .6cqw 1.2cqw rgba(0,0,0,.4); }
.photo-lineup-layout-poster .photo-player-image { height: 9.2cqw; border-radius: .78cqw .78cqw 0 0; background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--photo-team-color) 60%, #0b0f24), #050716); }
.photo-lineup-layout-poster .photo-player-image b { inset: .45cqw auto auto .45cqw; width: 2cqw; height: 2cqw; min-width: 0; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--overlay-accent); color: #0b0f24; font-size: 1.05cqw; }
.photo-lineup-layout-poster .photo-player-copy { border: 0; border-radius: 0 0 .78cqw .78cqw; background: #0b0f24; justify-items: center; text-align: center; }
.photo-lineup-layout-poster .photo-player-copy strong { font-size: 1.02cqw; }
.photo-lineup-layout-poster .photo-player-copy small { background: transparent; color: var(--overlay-accent); }
.photo-lineup-layout-poster .photo-player::after { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.45) 50%, transparent 62%); content: ''; opacity: 0; pointer-events: none; }
.photo-lineup-layout-poster .lineup-spotlight { background: radial-gradient(90% 110% at 30% 50%, color-mix(in srgb, var(--photo-team-color) 46%, #0b0f24), #050716); }
.photo-lineup-layout-poster .lineup-spotlight-number { background: transparent; color: var(--overlay-accent); }
@keyframes poster-arrive { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes poster-deal { 0% { opacity: 0; transform: rotateY(-100deg) translateY(1.6cqw) scale(.9); } 65% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes poster-out { to { opacity: 0; transform: rotateY(90deg) scale(.9); } }
@keyframes poster-shine { 0% { opacity: 1; transform: translateX(-110%); } 100% { opacity: 0; transform: translateX(110%); } }
section.photo-lineup.photo-lineup-layout-poster.is-entering { animation: poster-arrive .5s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--photo-lineup-motion-offset, 0ms); }
section.photo-lineup.photo-lineup-layout-poster.is-exiting { animation: lineup-fade-out .45s ease-in both; animation-delay: calc(300ms + var(--photo-lineup-motion-offset, 0ms)); }
section.photo-lineup.photo-lineup-layout-poster.is-entering .photo-player { animation: poster-deal .75s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(200ms + var(--player-index, 0) * 85ms + var(--photo-lineup-motion-offset, 0ms)); }
section.photo-lineup.photo-lineup-layout-poster.is-entering .photo-player::after { animation: poster-shine .9s ease-out both; animation-delay: calc(700ms + var(--player-index, 0) * 85ms + var(--photo-lineup-motion-offset, 0ms)); }
section.photo-lineup.photo-lineup-layout-poster.is-exiting .photo-player { animation: poster-out .32s ease-in both; animation-delay: calc(var(--player-index, 0) * 30ms + var(--photo-lineup-motion-offset, 0ms)); }

/* 3 · Coluna lateral — lista compacta que deixa o jogo livre */
.photo-lineup-layout-sidebar { width: 26cqw; background: linear-gradient(180deg, rgba(8,10,16,.95), rgba(8,10,16,.88)); border-left: .5cqw solid var(--photo-team-color) !important; }
.photo-lineup-layout-sidebar::before { inset: 0 0 auto; height: .18cqw; background: var(--overlay-accent); }
.photo-lineup-layout-sidebar .photo-lineup-head { min-height: 4cqw; padding: .55cqw .9cqw; grid-template-columns: 2.9cqw minmax(0,1fr); gap: .7cqw; row-gap: .15cqw; border: 0; background: linear-gradient(100deg, color-mix(in srgb, var(--photo-team-color) 55%, #0a0c12), transparent); }
.photo-lineup-layout-sidebar .photo-lineup-team-mark { width: 2.9cqw; height: 2.9cqw; grid-row: span 2; }
.photo-lineup-layout-sidebar .photo-lineup-head h2 { font-size: 1.35cqw; }
.photo-lineup-layout-sidebar .photo-lineup-head > span { grid-column: 2; padding: 0; border: 0; background: transparent; color: var(--overlay-accent); font-size: .5cqw; letter-spacing: .2em; }
.photo-lineup-layout-sidebar .photo-lineup-grid { grid-template-columns: 1fr; align-content: start; gap: .16cqw; padding: .5cqw .55cqw .3cqw; }
.photo-lineup-layout-sidebar .photo-player { height: 3.2cqw; display: grid; grid-template-columns: 3.2cqw minmax(0,1fr); align-items: stretch; border: 0; border-radius: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--photo-team-color) 32%, #10131b), #10131b 70%); box-shadow: none; }
.photo-lineup-layout-sidebar .photo-player-image { height: 3.2cqw; }
.photo-lineup-layout-sidebar .photo-player-image::after { display: none; }
.photo-lineup-layout-sidebar .photo-player-fallback { font-size: 1.3cqw; }
.photo-lineup-layout-sidebar .photo-player-image b { inset: auto 0 0 auto; min-width: 1.15cqw; padding: .1cqw .2cqw; border: 0; background: var(--overlay-accent); color: #08090d; font-size: .7cqw; }
.photo-lineup-layout-sidebar .photo-player-copy { min-height: 0; padding: 0 .7cqw; grid-template-columns: minmax(0,1fr) auto; align-items: center; border: 0; }
.photo-lineup-layout-sidebar .photo-player-copy strong { display: block; font-size: .9cqw; white-space: nowrap; text-overflow: ellipsis; }
.photo-lineup-layout-sidebar .photo-player-copy small { padding: 0; background: transparent; color: var(--overlay-accent); font-size: .55cqw; }
.photo-lineup-layout-sidebar .starters-with-staff { height: auto; gap: 0; }
.photo-lineup-layout-sidebar .lineup-staff-strip > span { display: none; }
.photo-lineup-layout-sidebar .head-coach-highlight { width: 100%; min-width: 0; margin: 0 .55cqw .55cqw; padding: .25cqw .6cqw .25cqw .3cqw; gap: .6cqw; border-width: 0 0 0 .2cqw; }
.photo-lineup-layout-sidebar .head-coach-highlight .coach-photo { width: 2.6cqw; height: 2.6cqw; font-size: 1cqw; }
.photo-lineup-layout-sidebar .head-coach-highlight .coach-photo img { height: 100%; }
.photo-lineup-layout-sidebar .head-coach-highlight h3 { font-size: .9cqw; }
.photo-lineup-layout-sidebar .lineup-spotlight { min-height: 0; grid-template-columns: 1fr; }
.photo-lineup-layout-sidebar .lineup-spotlight-photo img, .photo-lineup-layout-sidebar .lineup-spotlight-photo { height: 19cqw; }
.photo-lineup-layout-sidebar .lineup-spotlight-photo img { object-fit: cover; }
.photo-lineup-layout-sidebar .lineup-spotlight-number { position: absolute; top: 15.6cqw; left: 0; padding: .3cqw 1cqw; font-size: 3cqw; }
.photo-lineup-layout-sidebar .lineup-spotlight-copy { padding: 1.2cqw 1cqw 1.4cqw; }
.photo-lineup-layout-sidebar .lineup-spotlight-copy small { font-size: .7cqw; }
.photo-lineup-layout-sidebar .lineup-spotlight-copy h3 { max-width: none; margin: .5cqw 0 .3cqw; font-size: 1.9cqw; }
.photo-lineup-layout-sidebar .lineup-spotlight-copy p { font-size: .8cqw; }
.photo-lineup-layout-sidebar .bench-list { min-height: 0; grid-template-columns: 1fr; padding: .5cqw .55cqw; }
.photo-lineup-layout-sidebar .bench-player { min-height: 3cqw; grid-template-columns: 3cqw 2cqw minmax(0,1fr); }
.photo-lineup-layout-sidebar .bench-player > div { width: 3cqw; height: 3cqw; }
.photo-lineup-layout-sidebar .bench-player > b { font-size: 1cqw; }
.photo-lineup-layout-sidebar .bench-player strong { font-size: .85cqw; }
.photo-lineup-layout-sidebar .bench-player small { font-size: .5cqw; }
.photo-lineup-layout-sidebar .tactical-board { min-height: 0; grid-template-columns: 1fr; }
.photo-lineup-layout-sidebar .tactical-pitch { min-height: 21cqw; border-right: 0; }
.photo-lineup-layout-sidebar .tactical-player { width: 4.6cqw; }
.photo-lineup-layout-sidebar .tactical-player b { width: 1.7cqw; height: 1.7cqw; font-size: .75cqw; }
.photo-lineup-layout-sidebar .tactical-player span { max-width: 4.6cqw; padding: .1cqw .2cqw; }
.photo-lineup-layout-sidebar .tactical-player span strong { max-width: 4.2cqw; font-size: .5cqw; }
.photo-lineup-layout-sidebar .tactical-player span small { display: none; }
.photo-lineup-layout-sidebar .tactical-board aside { padding: .8cqw 1cqw; grid-template-columns: auto 1fr; align-items: center; column-gap: .8cqw; }
.photo-lineup-layout-sidebar .tactical-board aside strong { margin: 0; font-size: 1.7cqw; }
.photo-lineup-layout-sidebar .tactical-board aside em, .photo-lineup-layout-sidebar .tactical-board aside span { grid-column: 1 / -1; font-size: .55cqw; }
.photo-lineup-layout-sidebar .lineup-empty-stage { min-height: 8cqw; }
@keyframes sidebar-arrive { from { opacity: 0; transform: translateX(-105%); } to { opacity: 1; transform: none; } }
@keyframes sidebar-leave { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-105%); } }
@keyframes sidebar-row { from { opacity: 0; transform: translateX(-2.4cqw); } to { opacity: 1; transform: none; } }
section.photo-lineup.photo-lineup-layout-sidebar.is-entering { animation: sidebar-arrive .6s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--photo-lineup-motion-offset, 0ms); }
section.photo-lineup.photo-lineup-layout-sidebar.is-exiting { animation: sidebar-leave .5s cubic-bezier(.7,0,.84,0) both; animation-delay: calc(180ms + var(--photo-lineup-motion-offset, 0ms)); }
section.photo-lineup.photo-lineup-layout-sidebar.is-entering .photo-player { animation: sidebar-row .5s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(260ms + var(--player-index, 0) * 45ms + var(--photo-lineup-motion-offset, 0ms)); }
section.photo-lineup.photo-lineup-layout-sidebar.is-exiting .photo-player { animation: sidebar-row .3s ease-in reverse both; animation-delay: calc(var(--player-index, 0) * 15ms + var(--photo-lineup-motion-offset, 0ms)); }

/* 4 · Telão de estádio — painel LED, duas colunas */
.photo-lineup-layout-stadium { --led: var(--overlay-accent); background: #040507; border: .3cqw solid #1b1e26 !important; border-radius: .7cqw !important; box-shadow: 0 0 0 .14cqw #000, 0 0 2.6cqw color-mix(in srgb, var(--led) 22%, transparent), 0 2cqw 4cqw rgba(0,0,0,.6) !important; }
.photo-lineup-layout-stadium::before { inset: 0; height: auto; z-index: 5; background: radial-gradient(circle, rgba(0,0,0,.6) .11cqw, transparent .13cqw) 0 0 / .46cqw .46cqw; opacity: .5; }
.photo-lineup-layout-stadium::after { position: absolute; inset: 0 0 auto; z-index: 6; height: .5cqw; background: linear-gradient(transparent, var(--led), transparent); content: ''; opacity: 0; pointer-events: none; }
.photo-lineup-layout-stadium .photo-lineup-head { min-height: 5cqw; border-bottom: .14cqw solid var(--led); background: #07080c; }
.photo-lineup-layout-stadium .photo-lineup-head h2 { color: var(--led); font-size: 2.3cqw; letter-spacing: .07em; text-shadow: 0 0 1cqw color-mix(in srgb, var(--led) 60%, transparent); }
.photo-lineup-layout-stadium .photo-lineup-head > span { border: .1cqw solid var(--led); background: transparent; color: var(--led); letter-spacing: .2em; }
.photo-lineup-layout-stadium .photo-lineup-grid { grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: repeat(6, auto); grid-auto-flow: column; gap: .2cqw 1.6cqw; padding: 1.1cqw 1.6cqw; }
.photo-lineup-layout-stadium .photo-player { height: 3.6cqw; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; overflow: visible; border: 0; border-bottom: .09cqw solid rgba(255,255,255,.1); border-radius: 0; background: transparent; box-shadow: none; }
.photo-lineup-layout-stadium .photo-player-image { width: auto; height: 3.3cqw; display: flex; align-items: center; gap: .8cqw; background: transparent; }
.photo-lineup-layout-stadium .photo-player-image::after { display: none; }
.photo-lineup-layout-stadium .photo-player-image img { width: 3.2cqw; height: 3.2cqw; flex: none; outline: .1cqw solid var(--led); filter: grayscale(1) contrast(1.15); }
.photo-lineup-layout-stadium .photo-player-fallback { width: 3.2cqw; height: 3.2cqw; display: grid; place-items: center; flex: none; outline: .1cqw solid var(--led); font-size: 1.3cqw; }
.photo-lineup-layout-stadium .photo-player-image b { position: static; order: -1; min-width: 3.4cqw; padding: 0; border: 0; background: transparent; color: var(--led); font-size: 2.4cqw; font-variant-numeric: tabular-nums; text-align: right; text-shadow: 0 0 .9cqw color-mix(in srgb, var(--led) 65%, transparent); }
.photo-lineup-layout-stadium .photo-player-copy { min-height: 0; padding: 0 0 0 1cqw; border: 0; gap: .12cqw; }
.photo-lineup-layout-stadium .photo-player-copy strong { display: block; font-size: 1.2cqw; letter-spacing: .05em; white-space: nowrap; text-overflow: ellipsis; }
.photo-lineup-layout-stadium .photo-player-copy small { padding: 0; background: transparent; color: var(--led); font-size: .66cqw; }
.photo-lineup-layout-stadium .lineup-staff-strip { padding: 0 1.6cqw 1cqw; }
.photo-lineup-layout-stadium .lineup-staff-strip > span, .photo-lineup-layout-stadium .head-coach-highlight { border-radius: 0; border-color: color-mix(in srgb, var(--led) 55%, transparent); background: #07080c; box-shadow: none; }
.photo-lineup-layout-stadium .lineup-spotlight { background: #040507; }
.photo-lineup-layout-stadium .lineup-spotlight-photo img { filter: grayscale(1) contrast(1.15); }
.photo-lineup-layout-stadium .lineup-spotlight-number { background: transparent; color: var(--led); text-shadow: 0 0 2cqw color-mix(in srgb, var(--led) 60%, transparent); }
.photo-lineup-layout-stadium .lineup-spotlight-copy h3 { text-shadow: 0 0 1cqw rgba(255,255,255,.25); }
.photo-lineup-layout-stadium .bench-player { border-bottom-color: rgba(255,255,255,.1); background: transparent; }
.photo-lineup-layout-stadium .bench-player > b { text-shadow: 0 0 .8cqw color-mix(in srgb, var(--led) 60%, transparent); }
.photo-lineup-layout-stadium .tactical-board, .photo-lineup-layout-stadium .tactical-pitch { background-color: #040a06; }
@keyframes stadium-boot { 0% { opacity: 0; } 12% { opacity: 1; } 20% { opacity: .15; } 34% { opacity: 1; } 44% { opacity: .5; } 60%, 100% { opacity: 1; } }
@keyframes stadium-off { 0% { opacity: 1; } 30% { opacity: .2; } 55% { opacity: .8; } 100% { opacity: 0; } }
@keyframes stadium-scan { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(46cqw); } }
@keyframes stadium-row { 0% { opacity: 0; } 25% { opacity: 1; } 40% { opacity: .2; } 60% { opacity: 1; } 75% { opacity: .55; } 100% { opacity: 1; } }
section.photo-lineup.photo-lineup-layout-stadium.is-entering { animation: stadium-boot .8s steps(14, end) both; animation-delay: var(--photo-lineup-motion-offset, 0ms); }
section.photo-lineup.photo-lineup-layout-stadium.is-exiting { animation: stadium-off .5s steps(10, end) both; animation-delay: calc(140ms + var(--photo-lineup-motion-offset, 0ms)); }
section.photo-lineup.photo-lineup-layout-stadium.is-entering::after { animation: stadium-scan .9s cubic-bezier(.45,0,.2,1) both; animation-delay: calc(120ms + var(--photo-lineup-motion-offset, 0ms)); }
section.photo-lineup.photo-lineup-layout-stadium.is-entering .photo-player { animation: stadium-row .6s linear both; animation-delay: calc(300ms + var(--player-index, 0) * 70ms + var(--photo-lineup-motion-offset, 0ms)); }
section.photo-lineup.photo-lineup-layout-stadium.is-exiting .photo-player { animation: stadium-off .3s steps(6, end) both; animation-delay: calc(var(--player-index, 0) * 20ms + var(--photo-lineup-motion-offset, 0ms)); }

/* 5 · Programa do jogo — papel claro, tipografia de jornal */
.photo-lineup-layout-matchday { --paper: #f3eee2; --ink: #14120d; background: var(--paper); color: var(--ink); font-family: Georgia, 'Times New Roman', serif; border-radius: .25cqw !important; box-shadow: 0 1.8cqw 3.4cqw rgba(0,0,0,.42) !important; transform-origin: top left; }
.photo-lineup-layout-matchday::before { inset: 0 0 auto; height: .8cqw; background: linear-gradient(var(--photo-team-color) 0 .45cqw, transparent .45cqw .6cqw, var(--photo-team-color) .6cqw .72cqw); }
.photo-lineup-layout-matchday .photo-lineup-head { min-height: 5.6cqw; padding: 1.3cqw 1.6cqw .5cqw; border: 0; border-bottom: .12cqw solid var(--ink); background: transparent; }
.photo-lineup-layout-matchday .photo-lineup-team-mark { border: .12cqw solid var(--ink); }
.photo-lineup-layout-matchday .photo-lineup-head h2 { color: var(--ink); font-size: 2.5cqw; font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; }
.photo-lineup-layout-matchday .photo-lineup-head > span { border: .13cqw solid var(--photo-team-color); background: transparent; color: var(--photo-team-color); font-family: var(--sans, system-ui, sans-serif); letter-spacing: .16em; rotate: -3deg; }
.photo-lineup-layout-matchday .photo-lineup-grid { gap: .9cqw; padding: 1.3cqw 1.6cqw 1.5cqw; }
.photo-lineup-layout-matchday .photo-player { position: relative; overflow: visible; padding: .4cqw .4cqw 0; border: 0; border-radius: .1cqw; background: #fff; box-shadow: 0 .3cqw .8cqw rgba(30,20,0,.3); rotate: -1deg; }
.photo-lineup-layout-matchday .photo-player:nth-child(even) { rotate: .9deg; }
.photo-lineup-layout-matchday .photo-player::before { position: absolute; top: -.4cqw; left: 50%; z-index: 2; width: 3cqw; height: .95cqw; background: rgba(233,208,128,.72); content: ''; transform: translateX(-50%) rotate(-3deg); }
.photo-lineup-layout-matchday .photo-player-image { height: 8.2cqw; background: color-mix(in srgb, var(--photo-team-color) 22%, #d9d2c0); }
.photo-lineup-layout-matchday .photo-player-image img { filter: grayscale(.4) contrast(1.05); }
.photo-lineup-layout-matchday .photo-player-image::after { display: none; }
.photo-lineup-layout-matchday .photo-player-fallback { color: var(--photo-team-color); }
.photo-lineup-layout-matchday .photo-player-image b { inset: auto auto .3cqw .3cqw; min-width: 1.9cqw; border: 0; background: var(--ink); color: var(--paper); font-size: 1.25cqw; text-shadow: none; }
.photo-lineup-layout-matchday .photo-player-copy { border: 0; background: #fff; }
.photo-lineup-layout-matchday .photo-player-copy strong { color: var(--ink); font-size: 1.02cqw; }
.photo-lineup-layout-matchday .photo-player-copy small { padding: 0; background: transparent; color: var(--photo-team-color); font-family: var(--sans, system-ui, sans-serif); font-size: .62cqw; }
.photo-lineup-layout-matchday .lineup-staff-strip { padding: 0 1.6cqw 1cqw; }
.photo-lineup-layout-matchday .lineup-staff-strip > span, .photo-lineup-layout-matchday .head-coach-highlight { border: .1cqw solid var(--ink); background: #fff; color: var(--ink); box-shadow: none; }
.photo-lineup-layout-matchday .lineup-staff-strip > span small, .photo-lineup-layout-matchday .head-coach-highlight small { color: var(--photo-team-color); }
.photo-lineup-layout-matchday .head-coach-highlight p { color: #5b564a; }
.photo-lineup-layout-matchday .lineup-spotlight { background: var(--paper); }
.photo-lineup-layout-matchday .lineup-spotlight::after { background: var(--photo-team-color); }
.photo-lineup-layout-matchday .lineup-spotlight-copy h3 { color: var(--ink); }
.photo-lineup-layout-matchday .lineup-spotlight-copy p { color: #5b564a; }
.photo-lineup-layout-matchday .bench-player { background: #fff; color: var(--ink); }
.photo-lineup-layout-matchday .bench-player > b { color: var(--photo-team-color); }
.photo-lineup-layout-matchday .bench-list { background: transparent; }
.photo-lineup-layout-matchday .tactical-board { background: var(--paper); }
.photo-lineup-layout-matchday .tactical-board aside strong { color: var(--ink); }
.photo-lineup-layout-matchday .tactical-board aside span { color: #5b564a; }
.photo-lineup-layout-matchday .lineup-empty-stage span { color: #5b564a; }
@keyframes matchday-unfold { 0% { opacity: 0; transform: perspective(90cqw) rotateX(-78deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: perspective(90cqw) rotateX(0); } }
@keyframes matchday-fold { to { opacity: 0; transform: perspective(90cqw) rotateX(-78deg); } }
@keyframes matchday-stamp { 0% { opacity: 0; transform: scale(1.4); } 55% { opacity: 1; transform: scale(.96); } 100% { opacity: 1; transform: scale(1); } }
section.photo-lineup.photo-lineup-layout-matchday.is-entering { animation: matchday-unfold .7s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--photo-lineup-motion-offset, 0ms); }
section.photo-lineup.photo-lineup-layout-matchday.is-exiting { animation: matchday-fold .5s cubic-bezier(.7,0,.84,0) both; animation-delay: calc(200ms + var(--photo-lineup-motion-offset, 0ms)); }
section.photo-lineup.photo-lineup-layout-matchday.is-entering .photo-player { animation: matchday-stamp .42s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(520ms + var(--player-index, 0) * 80ms + var(--photo-lineup-motion-offset, 0ms)); }
section.photo-lineup.photo-lineup-layout-matchday.is-exiting .photo-player { animation: lineup-fade-out .25s ease-in both; animation-delay: calc(var(--player-index, 0) * 15ms + var(--photo-lineup-motion-offset, 0ms)); }

/* Esquema tático · foto do atleta no lugar do número (--formation-photo = fator de tamanho) */
.tactical-player b.has-photo { width: calc(3.7cqw * var(--formation-photo, 1)); height: calc(3.7cqw * var(--formation-photo, 1)); overflow: hidden; padding: 0; }
.tactical-player b.has-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; }
.photo-lineup-layout-sidebar .tactical-player b.has-photo { width: calc(2.5cqw * var(--formation-photo, 1)); height: calc(2.5cqw * var(--formation-photo, 1)); }

/* Biblioteca de patrocínios (sem partida) e herança nas partidas */
.library-banner { margin-bottom: 14px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border: 1px solid var(--line); border-left: 3px solid var(--blue, #2f7df6); border-radius: 6px; background: var(--surface-2); }
.library-banner.is-inherited { border-left-color: var(--green, #38d996); }
.library-banner strong { font-size: 12px; }
.library-banner p { margin: 4px 0 0; max-width: 62ch; color: var(--muted); font-size: 12px; line-height: 1.45; }
.library-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.library-locked { min-width: 0; margin: 0; padding: 0; border: 0; opacity: .55; }
.library-locked::before { display: block; margin-bottom: 8px; color: var(--muted); content: 'Somente leitura: esta partida usa a biblioteca da plataforma.'; font-size: 12px; }

/* ===== Refinamento visual do painel (somente telas administrativas; overlays e OBS não usam estas regras) =====
   Tokens: --ui (texto), --heading (títulos e números, estilo painel esportivo), raios e sombras em camadas. */
:root {
  --ui: 'Roboto', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-ui: var(--ui);
  --heading: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', Arial, sans-serif;
  --bg: #090a0f;
  --surface: #12141b;
  --surface-2: #181b24;
  --surface-3: #202430;
  --line: rgba(255, 255, 255, .07);
  --line-strong: rgba(255, 255, 255, .13);
  --muted: #8c8f9d;
  --muted-soft: #b4b6c2;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 1px 0 rgba(255,255,255,.035) inset, 0 10px 28px rgba(0,0,0,.32);
  --ring: 0 0 0 2px rgba(9,10,15,1), 0 0 0 4px rgba(216,173,86,.7);
}
.studio, .team-portal-shell, .drawer-backdrop, .toast-stack { font-family: var(--ui); }
.studio button, .studio input, .studio select, .studio textarea, .team-portal-shell button, .team-portal-shell input, .team-portal-shell select, .team-portal-shell textarea, .drawer button, .drawer input, .drawer select, .drawer textarea { font-family: inherit; }
.studio .broadcast-layer, .drawer .broadcast-layer { font-family: 'Segoe UI', Arial, sans-serif; }
.studio, .drawer { scrollbar-width: thin; scrollbar-color: #3a3e4c transparent; }
::selection { background: rgba(216,173,86,.35); }
::placeholder { color: #6d707d; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 3px rgba(216,173,86,.22); border-color: var(--gold) !important; }

/* Barra superior */
.topbar { background: linear-gradient(180deg, rgba(13,14,20,.96), rgba(10,11,16,.92)); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(216,173,86,.14), 0 10px 30px rgba(0,0,0,.25); }
.brand-name { font-family: var(--heading); font-size: 21px; font-weight: 700; letter-spacing: .16em; }
.brand-caption { font-size: 10px; letter-spacing: .3em; }
.room-badge { height: 30px; font-size: 11px; font-weight: 700; letter-spacing: .06em; }

/* Botões e formulários */
.button { height: 36px; padding: 0 15px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; letter-spacing: .01em; transition: background .16s, border-color .16s, transform .12s, box-shadow .16s; }
.button:hover { box-shadow: 0 4px 14px rgba(0,0,0,.28); }
.button.primary { border-color: rgba(242,203,121,.5); background: linear-gradient(180deg, var(--gold-bright), var(--gold)); box-shadow: 0 6px 18px rgba(216,173,86,.22); }
.button.primary:hover { background: linear-gradient(180deg, #f8d88f, var(--gold-bright)); box-shadow: 0 8px 22px rgba(216,173,86,.32); }
.button.subtle:hover { box-shadow: none; }
.button.danger, .button.subtle.danger { color: #ff8b95; }
.field label, .tiny-label { font-size: 11px; font-weight: 500; letter-spacing: .07em; }
.field input, .field select, .field textarea, .field-row input, .drawer input, .drawer textarea, .drawer select { height: 40px; border-radius: var(--radius-sm); background: #0e1016; font-size: 13px; transition: border-color .16s, box-shadow .16s; }
.field textarea, .drawer textarea { height: auto; }
.help-text, .field-hint { font-size: 12px; line-height: 1.55; }
.help-text { color: var(--muted); }

/* Painéis e títulos */
.panel { border-radius: var(--radius); background: linear-gradient(180deg, #14161e, var(--surface)); box-shadow: var(--shadow-card); }
.section-title { font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.section-kicker { font-size: 11px; }
.tab { height: 46px; font-size: 12px; font-weight: 600; }
.module-main { background: radial-gradient(900px 320px at 8% -60px, rgba(216,173,86,.055), transparent 70%); }
.module-page-head { margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.module-page-head span, .module-hub-head > span { font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.module-page-head h1, .module-hub-head h1 { font-family: var(--heading); font-size: clamp(34px, 3.6vw, 46px); font-weight: 700; letter-spacing: .015em; text-transform: uppercase; }
.module-page-head p, .module-hub-head p { margin-top: 8px; font-size: 14px; color: var(--muted-soft); }
.page-title { font-family: var(--heading); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }

/* Menu lateral */
.module-sidebar { padding: 18px 12px 28px; gap: 2px; background: linear-gradient(180deg, #0e1017, #0b0c11); }
.module-sidebar a { min-height: 38px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; position: relative; transition: background .14s, color .14s; }
.module-sidebar a svg { width: 17px; height: 17px; flex: none; }
.module-sidebar a.active { background: linear-gradient(90deg, rgba(216,173,86,.16), rgba(216,173,86,.04)); box-shadow: inset 2px 0 0 var(--gold); font-weight: 700; }
.module-sidebar-overview { margin-bottom: 6px; min-height: 42px !important; }
.module-sidebar-label { margin: 16px 12px 4px; padding-top: 12px; border-top: 1px solid var(--line); color: #7c7f8d; font-size: 10px; letter-spacing: .18em; }
.module-sidebar-label-spaced { margin-top: 12px; }
.module-sidebar-back { min-height: 34px !important; color: var(--muted) !important; font-size: 12px !important; }
.module-sidebar-match { border-radius: var(--radius); background: linear-gradient(135deg, rgba(216,173,86,.1), rgba(255,255,255,.02)); border-color: rgba(216,173,86,.22); }
.module-sidebar-match small { font-size: 10px; }
.module-sidebar-match strong { font-family: var(--heading); font-size: 22px; letter-spacing: .04em; }
.module-sidebar-match span { font-size: 12px; }
.app-version, .module-sidebar-version { font-size: 11px; }

/* Central de módulos */
.module-hub-grid { gap: 14px; }
.module-hub-card { min-height: 92px; padding: 16px 18px; border-radius: var(--radius); background: linear-gradient(180deg, #151822, var(--surface)); box-shadow: var(--shadow-card); }
.module-hub-card:hover { border-color: rgba(216,173,86,.55); background: linear-gradient(180deg, #1a1d29, #14161e); }
.module-hub-card > span { width: 44px; height: 44px; border-radius: 11px; }
.module-hub-card strong { font-size: 15px; font-weight: 700; }
.module-hub-card small { font-size: 12px; line-height: 1.45; }
.module-hub-card > b { opacity: .45; transition: opacity .16s, transform .16s; }
.module-hub-card:hover > b { opacity: 1; transform: translateX(3px); }

/* Painel geral / operações */
.dashboard-grid { gap: 18px; }
.dashboard-section, .operations-list, .operations-editor { padding: 20px; border-radius: var(--radius); background: linear-gradient(180deg, #14161e, #101218); box-shadow: var(--shadow-card); }
.dashboard-stats { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.dashboard-stats article { position: relative; padding: 14px 14px 12px; border-radius: 10px; background: rgba(255,255,255,.025); overflow: hidden; }
.dashboard-stats article::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--gold); content: ''; opacity: .65; }
.dashboard-stats article strong { font-family: var(--heading); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: .01em; }
.dashboard-stats article span { margin-top: 6px; font-size: 11px; font-weight: 500; letter-spacing: .06em; }
.dashboard-stats article.stat-live::before { background: var(--red); opacity: 1; }
.dashboard-stats article.stat-live strong { color: #ff7a85; }
.dashboard-stats article.stat-live span::before { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px rgba(250,98,110,.8); content: ''; animation: connection-pulse 1.4s ease-in-out infinite; }
.dashboard-stats article.stat-scheduled::before { background: #5aa2ff; }
.dashboard-stats article.stat-scheduled strong { color: #8dbdff; }
.dashboard-stats article.stat-finished::before { background: var(--green); }
.dashboard-stats article.stat-finished strong { color: #6ee7b0; }
.dashboard-stats article.stat-cancelled::before { background: #6d707d; }
.dashboard-stats article.stat-cancelled strong { color: var(--muted-soft); }
.dashboard-list > strong { font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.dashboard-mini-row { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; transition: border-color .14s, background .14s; }
a.dashboard-mini-row:hover { border-color: rgba(216,173,86,.45); background: rgba(216,173,86,.06); }
.dashboard-mini-row small { font-size: 11px; }
.operations-item, .match-operation-card { border-radius: 10px; }
.operations-item strong, .match-operation-card > button strong { font-size: 14px; }
.operations-item small, .operations-list-head small, .match-operation-card > button span, .match-operation-card > button small { font-size: 11px; line-height: 1.45; }
.operations-item > b { font-size: 10px; letter-spacing: .08em; }
.operations-list-head strong { font-size: 15px; }
.overlay-card strong { font-size: 13px; }
.overlay-card small { font-size: 11px; }

/* Acesso (entrar no painel / portal da equipe) */
.auth-card { width: min(440px, 92vw); margin: clamp(32px, 9vh, 110px) auto 0; padding: 40px 36px 34px; border-radius: 16px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(216,173,86,.12); }
.auth-card .portal-brand { justify-content: center; margin-bottom: 6px; }
.auth-card h1 { font-family: var(--heading); font-size: 38px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.auth-card > p { font-size: 14px; }
.auth-form { width: 100%; margin-top: 24px; }
.auth-form .button.primary { width: 100%; height: 42px; }

@media (prefers-reduced-motion: reduce) { .studio *, .team-portal-shell * { transition: none !important; animation-duration: .01ms !important; } }
.auth-card .brand-mark { width: 46px; height: 50px; }
.auth-card .portal-brand { gap: 12px; }
.auth-card .portal-brand strong { font-family: var(--heading); font-size: 20px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.dashboard-stats { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.module-content-tabs { margin-bottom: 16px; padding: 4px; display: flex; gap: 4px; border: 1px solid var(--line); border-radius: 10px; background: #0d0f15; }
.module-content-tabs button { flex: 1; min-height: 38px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted-soft); font: 600 13px/1.1 var(--ui); cursor: pointer; transition: background .14s, color .14s; }
.module-content-tabs button:hover { color: var(--text); background: rgba(255,255,255,.04); }
.module-content-tabs button.active { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #16120b; box-shadow: 0 4px 14px rgba(216,173,86,.22); }
.event-timeline, .timeline-panel { margin-top: 14px; }
:root { --ui-font: var(--ui); }
.theme-overrides > strong { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-soft); }
.theme-overrides label { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255,255,255,.02); font-size: 13px; }
.theme-overrides input[type="color"], .studio input[type="color"] { width: 44px; height: 28px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 6px; background: #0e1016; cursor: pointer; }
@media (max-width: 980px) {
  .dashboard-grid, .operations-layout { grid-template-columns: minmax(0, 1fr); }
  .module-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-page-head { align-items: flex-start; flex-direction: column; gap: 12px; }
}
@media (max-width: 640px) {
  .module-hub-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-section, .operations-list, .operations-editor { padding: 16px; }
  .auth-card { padding: 30px 22px 26px; }
}

/* Menu do Super Administrador: grupos recolhíveis e busca */
.module-sidebar-search { width: 100%; height: 36px; margin: 0 0 10px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #0b0d12; color: var(--text); font: 500 12px var(--ui); }
.module-sidebar-group { margin: 0; padding: 0; display: grid; gap: 2px; }
.module-sidebar-group + .module-sidebar-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.module-sidebar-group > summary { padding: 8px 12px 6px; display: flex; align-items: center; justify-content: space-between; color: #8a8d9b; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; list-style: none; cursor: pointer; user-select: none; }
.module-sidebar-group > summary::-webkit-details-marker { display: none; }
.module-sidebar-group > summary::after { width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; content: ''; transform: rotate(45deg); transition: transform .16s; opacity: .7; }
.module-sidebar-group[open] > summary::after { transform: rotate(-135deg); }
.module-sidebar-group > summary small { margin-left: auto; margin-right: 10px; padding: 1px 6px; border-radius: 9px; background: rgba(255,255,255,.06); font-size: 10px; letter-spacing: 0; }
.module-sidebar-group > summary:hover { color: var(--text); }

/* Portal do time: menu lateral, início, calendário */
.team-portal-card.portal-app { width: min(1240px, 100%); }
.portal-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 24px; align-items: start; }
.portal-sidebar { position: sticky; top: 16px; padding: 10px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius); background: #0d0f15; }
.portal-sidebar button { min-height: 40px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted-soft); font: 500 13px var(--ui); text-align: left; cursor: pointer; transition: background .14s, color .14s; }
.portal-sidebar button:hover { background: var(--surface-2); color: var(--text); }
.portal-sidebar button.active { background: linear-gradient(90deg, rgba(216,173,86,.16), rgba(216,173,86,.04)); box-shadow: inset 2px 0 0 var(--gold); color: var(--gold); font-weight: 700; }
.portal-sidebar button b { min-width: 22px; padding: 1px 7px; border-radius: 10px; background: rgba(255,255,255,.07); color: var(--muted-soft); font-size: 11px; text-align: center; }
.portal-sidebar button b.is-alert { background: var(--red); color: #1a0b0d; }
.portal-content { min-width: 0; display: grid; gap: 14px; align-content: start; }
.portal-panel { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, #14161e, #101218); }
.portal-home-stats { margin: 4px 0 0; }
.portal-next-list { display: grid; gap: 8px; }
.portal-next-match { padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255,255,255,.02); }
.portal-next-match strong { display: block; font-size: 14px; }
.portal-next-match small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.portal-chip { padding: 4px 10px; border-radius: 12px; background: rgba(255,255,255,.07); color: var(--muted-soft); font-size: 11px; font-weight: 700; white-space: nowrap; }
.portal-chip.is-ok { background: rgba(56,217,150,.12); color: #6ee7b0; }
.portal-chip.is-warn { background: rgba(241,191,82,.12); color: var(--yellow); }
.portal-chip.is-live { background: rgba(250,98,110,.16); color: #ff8b95; }
.portal-chip.is-done { background: rgba(255,255,255,.05); color: var(--muted); }
.portal-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; }
.portal-month { margin-bottom: 12px; }
.portal-home-stats article.is-text strong { font-size: 20px; line-height: 1.15; }
@media (max-width: 860px) {
  .portal-layout { grid-template-columns: minmax(0, 1fr); }
  .portal-sidebar { position: static; display: flex; overflow-x: auto; }
  .portal-sidebar button { flex: none; }
  .portal-next-match { grid-template-columns: minmax(0, 1fr); }
}
.announce-team { padding: 6px 0; display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 13px; text-transform: none; letter-spacing: 0; cursor: pointer; }
.announce-teams { max-height: 180px; overflow: auto; margin-top: 4px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #0e1016; }
.portal-announcement header { margin-bottom: 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.portal-announcement header strong { font-size: 15px; }
.portal-announcement header small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.portal-announcement p { margin: 0; color: var(--muted-soft); font-size: 13px; line-height: 1.6; }
.portal-announcement.is-pinned { border-color: rgba(216,173,86,.4); }
.announce-audience { margin-bottom: 14px; display: grid; gap: 6px; }
.announce-team input[type="checkbox"] { width: 16px; height: 16px; flex: none; accent-color: var(--gold); }

/* Ao vivo agora */
.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; margin-bottom: 18px; }
.live-card { padding: 18px; display: grid; gap: 14px; border: 1px solid rgba(250,98,110,.35); border-radius: var(--radius); background: linear-gradient(180deg, #1a1218, #12141b); box-shadow: var(--shadow-card); }
.live-card header { display: flex; align-items: center; gap: 10px; }
.live-card header small { color: var(--muted-soft); font-size: 12px; }
.live-tag { padding: 3px 9px; border-radius: 4px; background: var(--red); color: #1a0b0d; font-size: 11px; font-weight: 800; letter-spacing: .12em; animation: connection-pulse 1.6s ease-in-out infinite; }
.live-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.live-score strong { font-size: 15px; }
.live-score strong:last-child { text-align: right; }
.live-score b { font-family: var(--heading); font-size: 42px; font-weight: 700; letter-spacing: .04em; }
.live-meta { display: flex; justify-content: space-between; color: var(--muted-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.live-onair { display: flex; flex-wrap: wrap; gap: 6px; }
.access-role-field { margin: 10px 0 6px; }

/* Classificação e súmulas */
.standings-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.standings-table th { padding: 8px 10px; border-bottom: 1px solid var(--line-strong); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.standings-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.standings-table tbody tr:first-child td { color: var(--gold-bright); }
.standings-table tbody tr:hover td { background: rgba(255,255,255,.025); }
.standings-select { max-width: 380px; }
@media print { .topbar, .module-sidebar, .module-page-head, .emergency-hide-all, .standings-summary .operations-actions { display: none !important; } .module-workspace { display: block; } body { background: #fff; color: #000; } }
@media print { .dashboard-section, .module-section { background: #fff !important; color: #000 !important; box-shadow: none !important; border-color: #ccc !important; } .standings-table th, .standings-table td, .section-title, .help-text { color: #000 !important; } }

/* ===== Builder de overlays: elementos livres sobre o canvas ===== */
.custom-overlay { position: relative; container-type: size; overflow: hidden; background: transparent; }
.cel { position: absolute; box-sizing: border-box; overflow: hidden; transform-origin: center; }
.cel-text { width: 100%; height: 100%; display: flex; overflow: hidden; white-space: pre-wrap; word-break: break-word; box-sizing: border-box; }
.cel-text > span { max-width: 100%; }
.cel-text.is-marquee { white-space: nowrap; overflow: hidden; }
.cel-text.is-marquee > span { display: inline-block; max-width: none; animation: cel-marquee var(--marquee-dur, 14s) linear infinite; }
.cel img, .cel video { width: 100%; height: 100%; display: block; }
.cel-empty { width: 100%; height: 100%; display: grid; place-items: center; background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 8px, rgba(255,255,255,.02) 8px 16px); color: rgba(255,255,255,.5); font: 700 12px var(--ui); letter-spacing: .12em; }
@keyframes cel-marquee { from { transform: translateX(100cqw); } to { transform: translateX(-100%); } }
@keyframes cel-in-fade { from { opacity: 0; } to { opacity: var(--cel-o, 1); } }
@keyframes cel-in-slide-left { from { opacity: 0; transform: translateX(-14cqw); } to { opacity: var(--cel-o, 1); transform: none; } }
@keyframes cel-in-slide-right { from { opacity: 0; transform: translateX(14cqw); } to { opacity: var(--cel-o, 1); transform: none; } }
@keyframes cel-in-slide-up { from { opacity: 0; transform: translateY(8cqw); } to { opacity: var(--cel-o, 1); transform: none; } }
@keyframes cel-in-slide-down { from { opacity: 0; transform: translateY(-8cqw); } to { opacity: var(--cel-o, 1); transform: none; } }
@keyframes cel-in-zoom { from { opacity: 0; transform: scale(.82); } to { opacity: var(--cel-o, 1); transform: none; } }
@keyframes cel-in-pop { 0% { opacity: 0; transform: scale(.5); } 60% { opacity: var(--cel-o, 1); transform: scale(1.08); } 100% { opacity: var(--cel-o, 1); transform: scale(1); } }
@keyframes cel-in-wipe { from { opacity: 0; transform: scaleX(0); transform-origin: left center; } to { opacity: var(--cel-o, 1); transform: scaleX(1); transform-origin: left center; } }
@keyframes cel-in-flip { from { opacity: 0; transform: perspective(60cqw) rotateX(-85deg); } to { opacity: var(--cel-o, 1); transform: perspective(60cqw) rotateX(0); } }
@keyframes cel-out-fade { from { opacity: var(--cel-o, 1); } to { opacity: 0; } }
@keyframes cel-out-slide-left { from { opacity: var(--cel-o, 1); transform: none; } to { opacity: 0; transform: translateX(-14cqw); } }
@keyframes cel-out-slide-right { from { opacity: var(--cel-o, 1); transform: none; } to { opacity: 0; transform: translateX(14cqw); } }
@keyframes cel-out-slide-up { from { opacity: var(--cel-o, 1); transform: none; } to { opacity: 0; transform: translateY(-8cqw); } }
@keyframes cel-out-slide-down { from { opacity: var(--cel-o, 1); transform: none; } to { opacity: 0; transform: translateY(8cqw); } }
@keyframes cel-out-zoom { from { opacity: var(--cel-o, 1); transform: none; } to { opacity: 0; transform: scale(.82); } }
@keyframes cel-out-pop { from { opacity: var(--cel-o, 1); transform: scale(1); } to { opacity: 0; transform: scale(.5); } }
@keyframes cel-out-wipe { from { opacity: var(--cel-o, 1); transform: scaleX(1); transform-origin: right center; } to { opacity: 0; transform: scaleX(0); transform-origin: right center; } }
@keyframes cel-out-flip { from { opacity: var(--cel-o, 1); transform: perspective(60cqw) rotateX(0); } to { opacity: 0; transform: perspective(60cqw) rotateX(85deg); } }
.custom-overlay.is-entering .cel, .custom-overlay.is-exiting .cel { animation-duration: var(--cel-dur, 600ms); animation-delay: var(--cel-delay, 0ms); animation-fill-mode: both; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
.custom-overlay.is-exiting .cel { animation-timing-function: cubic-bezier(.4,0,1,1); }
.custom-overlay.is-entering .cel-in-fade { animation-name: cel-in-fade; }
.custom-overlay.is-exiting .cel-out-fade { animation-name: cel-out-fade; }
.custom-overlay.is-entering .cel-in-slide-left { animation-name: cel-in-slide-left; }
.custom-overlay.is-exiting .cel-out-slide-left { animation-name: cel-out-slide-left; }
.custom-overlay.is-entering .cel-in-slide-right { animation-name: cel-in-slide-right; }
.custom-overlay.is-exiting .cel-out-slide-right { animation-name: cel-out-slide-right; }
.custom-overlay.is-entering .cel-in-slide-up { animation-name: cel-in-slide-up; }
.custom-overlay.is-exiting .cel-out-slide-up { animation-name: cel-out-slide-up; }
.custom-overlay.is-entering .cel-in-slide-down { animation-name: cel-in-slide-down; }
.custom-overlay.is-exiting .cel-out-slide-down { animation-name: cel-out-slide-down; }
.custom-overlay.is-entering .cel-in-zoom { animation-name: cel-in-zoom; }
.custom-overlay.is-exiting .cel-out-zoom { animation-name: cel-out-zoom; }
.custom-overlay.is-entering .cel-in-pop { animation-name: cel-in-pop; }
.custom-overlay.is-exiting .cel-out-pop { animation-name: cel-out-pop; }
.custom-overlay.is-entering .cel-in-wipe { animation-name: cel-in-wipe; }
.custom-overlay.is-exiting .cel-out-wipe { animation-name: cel-out-wipe; }
.custom-overlay.is-entering .cel-in-flip { animation-name: cel-in-flip; }
.custom-overlay.is-exiting .cel-out-flip { animation-name: cel-out-flip; }

/* Builder: editor (3 colunas) */
.overlay-builder { min-height: 720px; grid-template-columns: 236px minmax(0, 1fr) 320px; }
.builder-side, .builder-inspector { padding: 16px; background: var(--surface-2); overflow-y: auto; }
.builder-side { border-right: 1px solid var(--line); }
.builder-inspector { border-left: 1px solid var(--line); }
.builder-side-title { margin-top: 20px; }
.builder-templates { display: grid; gap: 8px; }
.builder-template { padding: 10px 12px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: border-color .14s, background .14s; }
.builder-template:hover { border-color: rgba(216,173,86,.5); background: #171a23; }
.builder-template strong { font-size: 13px; }
.builder-template small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.builder-import { margin-top: 12px; width: 100%; cursor: pointer; }
.builder-main { min-width: 0; padding: 16px 18px 24px; display: grid; align-content: start; gap: 12px; }
.builder-topbar { display: grid; grid-template-columns: minmax(160px, 1.2fr) minmax(170px, 1fr) minmax(150px, 1fr) 110px; gap: 10px; align-items: end; }
.builder-topbar .field { margin: 0; }
.builder-actionbar, .builder-addbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.builder-addbar { padding: 8px 10px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
.builder-addbar > span { margin-right: 4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.builder-addbar .button { height: 30px; padding: 0 10px; font-size: 12px; }
.builder-actionbar .button.active { border-color: var(--gold); color: var(--gold); }
.builder-stage { display: grid; gap: 8px; }
.builder-canvas { position: relative; width: 100%; max-height: 62vh; margin: 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,.2); background: repeating-conic-gradient(#1a1c24 0 25%, #14161c 0 50%) 0 0 / 22px 22px; box-shadow: 0 10px 30px rgba(0,0,0,.35); user-select: none; touch-action: none; }
.builder-canvas .custom-overlay-output { position: absolute; inset: 0; }
.builder-canvas .cel { cursor: move; }
.builder-canvas .cel.is-locked { cursor: default; }
.builder-canvas.has-grid::after { position: absolute; inset: 0; z-index: 400; background: linear-gradient(to right, transparent calc(33.333% - .5px), rgba(255,255,255,.22) 33.333%, transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), rgba(255,255,255,.22) 66.666%, transparent calc(66.666% + .5px)), linear-gradient(to bottom, transparent calc(33.333% - .5px), rgba(255,255,255,.22) 33.333%, transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), rgba(255,255,255,.22) 66.666%, transparent calc(66.666% + .5px)); content: ''; pointer-events: none; }
.builder-selection { position: absolute; z-index: 500; border: 1.5px solid #4da3ff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); pointer-events: none; }
.builder-selection.is-locked { border-style: dashed; border-color: #b4b6c2; }
.builder-selection i { position: absolute; width: 11px; height: 11px; border: 1.5px solid #4da3ff; border-radius: 3px; background: #fff; pointer-events: auto; }
.builder-selection .h-nw { left: -6px; top: -6px; cursor: nwse-resize; } .builder-selection .h-n { left: calc(50% - 6px); top: -6px; cursor: ns-resize; } .builder-selection .h-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.builder-selection .h-e { right: -6px; top: calc(50% - 6px); cursor: ew-resize; } .builder-selection .h-se { right: -6px; bottom: -6px; cursor: nwse-resize; } .builder-selection .h-s { left: calc(50% - 6px); bottom: -6px; cursor: ns-resize; }
.builder-selection .h-sw { left: -6px; bottom: -6px; cursor: nesw-resize; } .builder-selection .h-w { left: -6px; top: calc(50% - 6px); cursor: ew-resize; }
.builder-guide-v, .builder-guide-h { position: absolute; z-index: 450; background: #ff4fa3; pointer-events: none; }
.builder-guide-v { top: 0; bottom: 0; width: 1px; } .builder-guide-h { left: 0; right: 0; height: 1px; }
.builder-stage-foot { display: flex; justify-content: space-between; gap: 12px; color: var(--muted-soft); font-size: 12px; }
.builder-stage-foot small { color: var(--muted); font-size: 11px; }
.builder-panel-title { margin: 4px 0 8px; color: var(--muted-soft); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.builder-layers { max-height: 240px; margin-bottom: 14px; overflow-y: auto; display: grid; gap: 4px; }
.builder-layer { padding: 6px 8px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font-size: 12px; }
.builder-layer:hover { border-color: var(--line-strong); }
.builder-layer.active { border-color: #4da3ff; background: rgba(77,163,255,.1); }
.builder-layer.is-hidden { opacity: .5; }
.builder-layer strong { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.builder-layer-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: rgba(255,255,255,.07); color: var(--muted-soft); font-size: 11px; }
.builder-layer-actions { display: flex; gap: 2px; }
.builder-layer-actions button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted-soft); font-size: 12px; cursor: pointer; }
.builder-layer-actions button:hover:not(:disabled) { background: rgba(255,255,255,.1); color: var(--text); }
.builder-layer-actions button:disabled { opacity: .3; cursor: default; }
.builder-tabs { margin-bottom: 12px; padding: 3px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; border: 1px solid var(--line); border-radius: 8px; background: #0d0f15; }
.builder-tabs button { min-height: 32px; border: 0; border-radius: 6px; background: transparent; color: var(--muted-soft); font: 600 12px var(--ui); cursor: pointer; }
.builder-tabs button.active { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #16120b; }
.builder-props { display: grid; gap: 10px; }
.builder-props .field { margin: 0; }
.builder-props .field-row { gap: 8px; }
.builder-group { padding: 10px; display: grid; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.builder-group > strong { color: var(--muted-soft); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.builder-color-field { display: flex; align-items: center; gap: 6px; }
.builder-color-field label { flex: 1; padding: 6px 8px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #0e1016; font-size: 12px; }
.builder-color-field input[type="color"] { width: 30px; height: 26px; padding: 0; border: 0; background: none; }
.builder-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.builder-check input { accent-color: var(--gold); }
.builder-align > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.builder-align > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.builder-align .button { height: 30px; padding: 0 4px; font-size: 11px; }
.builder-el-actions { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px; }
.builder-el-actions .button { height: 30px; padding: 0 10px; font-size: 12px; }
.builder-inspector-empty p { color: var(--muted); font-size: 13px; line-height: 1.55; }
.builder-tokens-help { margin-top: 10px; display: grid; gap: 6px; }
.builder-tokens-help small { color: var(--muted); font-size: 11px; }
.builder-tokens-help > div { display: flex; flex-wrap: wrap; gap: 4px; }
.builder-tokens-help code { padding: 2px 7px; border-radius: 5px; background: rgba(255,255,255,.07); color: var(--gold-bright); font-size: 11px; }
.builder-token { padding: 3px 8px; border: 1px solid var(--line-strong); border-radius: 12px; background: transparent; color: var(--muted-soft); font: 500 11px var(--ui); cursor: pointer; }
.builder-token:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 1280px) { .overlay-builder { grid-template-columns: 200px minmax(0, 1fr); } .builder-inspector { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 860px) { .overlay-builder { grid-template-columns: minmax(0, 1fr); } .builder-side { border-right: 0; border-bottom: 1px solid var(--line); } .builder-topbar { grid-template-columns: 1fr 1fr; } }
.builder-canvas .broadcast-layer, .builder-canvas .custom-overlay, .builder-canvas .cel { pointer-events: auto; }
.builder-topbar { grid-template-columns: minmax(150px, 1.2fr) minmax(170px, 1fr) minmax(220px, 1.2fr) 96px; }
.builder-topbar .builder-color-field label { min-width: 0; }
.builder-topbar .field > label { white-space: nowrap; }

/* Campeonatos: regras, desempate e geração de partidas */
.tiebreak-list { display: grid; gap: 4px; margin: 6px 0 12px; }
.tiebreak-row { padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255,255,255,.02); font-size: 13px; opacity: .65; }
.tiebreak-row.is-on { opacity: 1; border-color: rgba(216,173,86,.3); }
.tiebreak-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tiebreak-row b { color: var(--gold); font-size: 12px; }
.tiebreak-row .button { height: 26px; padding: 0 8px; }
.copy-row { display: flex; gap: 6px; align-items: center; }
.copy-row input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #0e1016; color: var(--text); font-size: 12px; }
.operations-editor .settings-section { margin-bottom: 10px; }
.table-scroll { overflow-x: auto; }
.form-chips { display: inline-flex; gap: 3px; }
.form-chips i { width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 4px; font-size: 10px; font-style: normal; font-weight: 800; color: #0b0c10; }
.form-chips .form-w { background: #38d996; } .form-chips .form-d { background: #b4b6c2; } .form-chips .form-l { background: #fa626e; }
.table-team { display: inline-flex; align-items: center; gap: 8px; }
.table-logo { width: 22px; height: 22px; border-radius: 50%; object-fit: contain; background: #fff; flex: none; }
.table-logo.is-initials { display: inline-grid; place-items: center; background: var(--team-color, #8253cd); color: #fff; font-size: 8px; font-weight: 800; }
.standings-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.art-drawer .art-preview { width: 100%; max-height: 62vh; object-fit: contain; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #000; margin-bottom: 12px; }
.post-media-preview { max-width: 240px; max-height: 160px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); object-fit: cover; display: block; }

/* ===== Páginas públicas e widgets incorporáveis ===== */
body.public-page { background: radial-gradient(900px 400px at 10% -80px, rgba(216,173,86,.08), transparent 70%), var(--bg); }
.public-shell { width: min(1080px, 100%); margin: 0 auto; padding: 0 16px 32px; font-family: var(--ui); color: var(--text); }
.public-header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.public-header nav { margin-left: auto; display: flex; gap: 10px; }
.public-header nav a { color: var(--muted-soft); font-size: 14px; text-decoration: none; }
.public-brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.public-brand .brand-mark { width: 30px; height: 33px; }
.public-brand span { display: grid; line-height: 1.1; }
.public-brand strong { font-family: var(--heading); font-size: 20px; letter-spacing: .14em; text-transform: uppercase; }
.public-brand small { color: var(--muted); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; }
.public-hero { padding: 36px 4px 22px; display: flex; justify-content: space-between; gap: 18px; }
.public-hero h1 { margin: 6px 0 8px; font-family: var(--heading); font-size: clamp(34px, 7vw, 58px); font-weight: 700; line-height: 1; letter-spacing: .01em; text-transform: uppercase; }
.public-hero p { max-width: 62ch; margin: 0 0 12px; color: var(--muted-soft); font-size: 15px; line-height: 1.55; }
.public-kicker { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.public-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.public-chips a { text-decoration: none; }
.public-champion { margin-top: 14px; padding: 10px 14px; display: inline-block; border: 1px solid rgba(216,173,86,.4); border-radius: var(--radius-sm); background: rgba(216,173,86,.08); font-size: 15px; }
.public-search { margin-bottom: 18px; display: grid; gap: 10px; }
.public-search input { height: 46px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #0e1016; color: var(--text); font-size: 15px; }
.public-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.public-card { padding: 16px; display: grid; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, #151822, var(--surface)); color: var(--text); text-decoration: none; box-shadow: var(--shadow-card); transition: border-color .14s, transform .14s; }
.public-card:hover { border-color: rgba(216,173,86,.55); transform: translateY(-2px); }
.public-card small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.public-card strong { font-size: 18px; }
.public-card span { color: var(--muted-soft); font-size: 13px; }
.public-card b { width: max-content; }
.public-card.is-organizer { border-left: 3px solid var(--gold); }
.public-tabs { position: sticky; top: 0; z-index: 5; margin: 6px -16px 16px; padding: 8px 16px; display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--line); background: rgba(9,10,15,.92); backdrop-filter: blur(10px); }
.public-tabs a { flex: none; padding: 8px 14px; border-radius: 20px; color: var(--muted-soft); font-size: 14px; font-weight: 500; text-decoration: none; }
.public-tabs a.active { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #16120b; font-weight: 700; }
.public-content { display: grid; gap: 14px; }
.public-round { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #101218; }
.public-round h3 { margin: 0 0 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.public-filter select { height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #0e1016; color: var(--text); font-size: 14px; }
.public-match { padding: 10px 0; display: grid; grid-template-columns: 78px minmax(0, 1fr) 150px; align-items: center; gap: 12px; border-top: 1px solid var(--line); }
.public-round .public-match:first-of-type { border-top: 0; }
.public-match-when { display: grid; line-height: 1.25; }
.public-match-when b { font-size: 13px; text-transform: capitalize; }
.public-match-when small, .public-match-meta small { color: var(--muted); font-size: 12px; }
.public-match-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.public-match-teams .home { text-align: right; }
.public-score { min-width: 64px; text-align: center; font-family: var(--heading); font-size: 26px; letter-spacing: .04em; }
.public-match.is-live .public-score { color: #ff7a85; }
.public-match-meta { display: grid; justify-items: end; gap: 3px; }
.public-live { margin-bottom: 14px; padding: 12px 16px; border: 1px solid rgba(250,98,110,.4); border-radius: var(--radius); background: linear-gradient(180deg, #1a1218, #12141b); }
.public-live h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; color: #ff7a85; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.public-live h3 i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: connection-pulse 1.4s ease-in-out infinite; }
.public-line { padding: 8px 0; display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); font-size: 14px; }
.public-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.public-post { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #101218; }
.public-post img { width: 100%; height: 170px; object-fit: cover; display: block; }
.public-post > div { padding: 14px; display: grid; gap: 6px; }
.public-post small { color: var(--muted); font-size: 12px; }
.public-post h3 { margin: 0; font-size: 17px; }
.public-post p { margin: 0; color: var(--muted-soft); font-size: 14px; line-height: 1.55; }
.public-post a { color: var(--gold); font-size: 14px; }
.public-sponsors { margin-top: 26px; display: grid; gap: 8px; }
.public-sponsors small { color: var(--muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.public-sponsors > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.public-sponsors img { width: 100%; max-height: 90px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; padding: 6px; }
.public-footer { margin-top: 22px; padding-top: 14px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.public-footer a { color: var(--muted-soft); }
.embed-shell { padding: 12px; font-family: var(--ui); color: var(--text); }
.embed-shell h2 { margin: 0 0 10px; font-family: var(--heading); font-size: 24px; letter-spacing: .04em; text-transform: uppercase; }
.embed-credit { margin-top: 10px; display: inline-block; color: var(--muted); font-size: 12px; }
body.public-light { background: #fff; color: #14161c; }
body.public-light .embed-shell, body.public-light .embed-shell .standings-table td, body.public-light .embed-shell h2 { color: #14161c; }
body.public-light .standings-table th { color: #5b5f6e; border-color: #ddd; }
body.public-light .standings-table td { border-color: #eee; }
@media (max-width: 720px) {
  .public-match { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .public-match-when { grid-auto-flow: column; justify-content: start; gap: 8px; }
  .public-match-meta { justify-items: start; grid-auto-flow: column; justify-content: start; gap: 8px; }
}
@media (max-width: 640px) {
  .public-content .standings-table th:nth-child(n+5):nth-child(-n+9), .public-content .standings-table td:nth-child(n+5):nth-child(-n+9),
  .public-content .standings-table th:nth-child(11), .public-content .standings-table td:nth-child(11) { display: none; }
}
.public-followed { margin-bottom: 18px; }
.public-followed h3 { margin: 0 0 10px; color: var(--gold); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }

/* Estúdio de artes */
.arts-layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
.arts-controls { display: grid; gap: 18px; }
.arts-controls section { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 10px; background: rgba(255,255,255,.03); }
.arts-step { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.arts-step b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #d8ad56; color: #16120b; font-size: 12px; }
.art-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.art-type, .art-theme { text-align: left; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: inherit; cursor: pointer; font: inherit; }
.art-type strong { display: block; font-size: 13px; }
.art-type small { display: block; margin-top: 2px; font-size: 11px; opacity: .65; }
.art-type.active, .art-theme.active { border-color: #d8ad56; background: rgba(216,173,86,.14); }
.art-themes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.art-theme { display: grid; gap: 6px; font-size: 12px; text-align: center; }
.art-theme span { display: block; height: 34px; border-radius: 6px; }
.arts-stage { display: grid; gap: 12px; min-width: 0; }
.arts-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.arts-preview { display: grid; place-items: center; padding: 16px; border-radius: 12px; background: rgba(0,0,0,.35); min-height: 320px; }
.art-canvas { max-width: 100%; max-height: 78vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.art-placeholder { opacity: .7; padding: 40px; text-align: center; }
@media (max-width: 900px) { .arts-layout { grid-template-columns: 1fr; } }

/* Overlays de campeonato para OBS (/obs/<visão>) — fundo transparente, palco 1920×1080 */
html:has(body.obs-page), body.obs-page { background: transparent !important; overflow: hidden; margin: 0; }
body.obs-page #app { position: fixed; inset: 0; overflow: hidden; }
.obs-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; font-family: var(--o-font, Roboto, sans-serif); }
.obs-anchor { position: absolute; inset: 0; display: flex; padding: 56px; pointer-events: none; }
.obs-anchor.is-v-t { align-items: flex-start; } .obs-anchor.is-v-c { align-items: center; } .obs-anchor.is-v-b { align-items: flex-end; }
.obs-anchor.is-h-l { justify-content: flex-start; } .obs-anchor.is-h-c { justify-content: center; } .obs-anchor.is-h-r { justify-content: flex-end; }
.obs-panel { --o-text: #fff; --o-muted: rgba(255,255,255,.66); --o-line: rgba(255,255,255,.12); width: var(--o-width, 760px); max-width: 100%; box-sizing: border-box; color: var(--o-text); font-size: 28px; line-height: 1.15; border-radius: var(--o-radius, 10px); background: var(--o-bg, #0b0d13); overflow: hidden; transform: translate(var(--o-dx, 0), var(--o-dy, 0)) scale(var(--o-scale, 1)); transform-origin: center; text-transform: none; }
.obs-anchor.is-v-t .obs-panel { transform-origin: top; } .obs-anchor.is-v-b .obs-panel { transform-origin: bottom; }
.obs-anchor.is-h-l .obs-panel { transform-origin: left center; } .obs-anchor.is-h-r .obs-panel { transform-origin: right center; }
.obs-panel.obs-style-light { --o-text: #14161c; --o-muted: rgba(20,22,28,.6); --o-line: rgba(0,0,0,.1); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.obs-head { display: flex; align-items: center; gap: 18px; padding: 20px 28px; background: linear-gradient(90deg, var(--o-accent), transparent 140%); color: #111; position: relative; }
.obs-head small { display: block; font-size: 18px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.obs-head strong { display: block; font-size: 40px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.obs-body { padding: 8px 0; }
.obs-row { display: flex; align-items: center; gap: 16px; padding: calc(11px * var(--o-pad, 1)) 28px; border-bottom: 1px solid var(--o-line); }
.obs-row:last-child { border-bottom: 0; }
.obs-row.is-first { background: linear-gradient(90deg, rgba(255,255,255,.1), transparent); }
.obs-pos { width: 38px; text-align: center; font-size: 30px; font-weight: 800; color: var(--o-accent); }
.obs-name { flex: 1; min-width: 0; font-size: 30px; font-weight: 700; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obs-name small { display: block; font-size: 18px; font-weight: 500; color: var(--o-muted); text-transform: none; }
.obs-num { min-width: 52px; text-align: center; font-style: normal; font-size: 28px; font-weight: 600; color: var(--o-muted); }
.obs-num.is-points { color: var(--o-text); font-weight: 800; font-size: 32px; }
.obs-badge { flex: none; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #fff; font-size: 17px; font-weight: 800; overflow: hidden; }
.obs-badge img { width: 82%; height: 82%; object-fit: contain; }
.obs-match .obs-name { font-size: 28px; }
.obs-match .obs-name.is-home { text-align: right; }
.obs-score { min-width: 130px; text-align: center; font-size: 38px; font-weight: 800; color: var(--o-accent); }
.obs-score.is-live { animation: obs-pulse 1.4s ease-in-out infinite; }
.obs-when { min-width: 130px; text-align: center; } .obs-when strong { display: block; font-size: 32px; color: var(--o-accent); } .obs-when small { font-size: 16px; color: var(--o-muted); letter-spacing: .06em; }
.obs-card { display: inline-block; width: 14px; height: 20px; border-radius: 2px; margin-right: 8px; vertical-align: -3px; } .obs-card.is-yellow { background: #f1bf52; } .obs-card.is-red { background: #fa626e; }
.obs-empty { padding: 28px; text-align: center; color: var(--o-muted); font-size: 26px; }
.obs-dots { display: flex; justify-content: center; gap: 8px; } .obs-dots:not(:empty) { padding: 0 0 14px; }
.obs-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--o-line); } .obs-dots i.on { background: var(--o-accent); }
.obs-card-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 28px 40px; }
.obs-side { display: flex; align-items: center; gap: 22px; } .obs-side:last-child { flex-direction: row-reverse; text-align: right; }
.obs-side .obs-badge { width: 110px; height: 110px; font-size: 34px; } .obs-side strong { font-size: 40px; text-transform: uppercase; }
.obs-centre { text-align: center; } .obs-centre b { display: block; font-size: 84px; line-height: 1; color: var(--o-accent); } .obs-centre small { display: block; font-size: 20px; letter-spacing: .1em; color: var(--o-muted); text-transform: uppercase; }
.obs-champion { display: grid; justify-items: center; gap: 14px; padding: 28px; text-align: center; } .obs-champion .obs-badge { width: 150px; height: 150px; font-size: 44px; } .obs-champion strong { font-size: 54px; text-transform: uppercase; } .obs-champion small { color: var(--o-muted); font-size: 22px; letter-spacing: .1em; text-transform: uppercase; }
.obs-trophy { width: 90px; height: 90px; background: var(--o-accent); clip-path: polygon(10% 0, 90% 0, 85% 40%, 62% 62%, 62% 78%, 80% 86%, 80% 100%, 20% 100%, 20% 86%, 38% 78%, 38% 62%, 15% 40%); }
/* Faixa de placares */
.obs-view-ticker { width: 1920px; max-width: none; border-radius: 0; }
.obs-view-ticker .obs-body { padding: 0; overflow: hidden; }
.obs-track { display: flex; width: max-content; animation: obs-marquee var(--o-duration, 30s) linear infinite; }
.obs-track > div { display: flex; flex: none; }
.obs-chip { display: inline-flex; align-items: center; gap: 12px; padding: 18px 34px; border-right: 1px solid var(--o-line); white-space: nowrap; font-size: 26px; }
.obs-chip small { font-size: 15px; font-weight: 800; letter-spacing: .1em; color: var(--o-accent); } .obs-chip b { font-weight: 800; text-transform: uppercase; } .obs-chip strong { font-size: 32px; color: var(--o-accent); padding: 0 6px; }
.obs-chip .obs-badge { width: 38px; height: 38px; font-size: 13px; }
.obs-view-ticker .obs-dots { display: none; }
@keyframes obs-marquee { to { transform: translateX(calc(var(--o-track, 1920px) * -1)); } }
@keyframes obs-pulse { 50% { opacity: .55; } }
/* Estilos */
.obs-style-glass { background: var(--o-bg); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.obs-style-glass .obs-head { background: rgba(255,255,255,.1); color: var(--o-text); }
.obs-style-neon { border: 2px solid var(--o-accent); box-shadow: 0 0 22px var(--o-accent), inset 0 0 18px rgba(255,255,255,.05); }
.obs-style-neon .obs-head { background: transparent; color: var(--o-accent); border-bottom: 1px solid var(--o-accent); text-shadow: 0 0 14px var(--o-accent); }
.obs-style-neon .obs-pos, .obs-style-neon .obs-score, .obs-style-neon .obs-centre b { text-shadow: 0 0 14px var(--o-accent); }
.obs-style-light .obs-head { color: #fff; background: var(--o-accent); }
.obs-style-minimal { background: transparent; box-shadow: none; text-shadow: 0 2px 10px rgba(0,0,0,.85); }
.obs-style-minimal .obs-head { background: transparent; color: var(--o-text); border-bottom: 3px solid var(--o-accent); }
.obs-style-minimal .obs-row { border-bottom-color: rgba(255,255,255,.2); }
.obs-style-gradient { background: linear-gradient(160deg, var(--o-bg-solid, #0b0d13) 20%, var(--o-accent) 260%); }
.obs-style-gradient .obs-head { background: rgba(0,0,0,.28); color: var(--o-text); }
.obs-style-stripe { border-radius: 0; background: var(--o-bg); }
.obs-style-stripe .obs-head { clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%); background: var(--o-accent); padding-right: 70px; }
.obs-style-stripe .obs-row { margin: 4px 0; padding-top: 9px; padding-bottom: 9px; border: 0; background: rgba(255,255,255,.06); transform: skewX(-6deg); margin-left: 14px; margin-right: 14px; padding-left: 18px; padding-right: 18px; }
.obs-style-stripe .obs-row > * { transform: skewX(6deg); }
.obs-style-stripe.obs-view-ticker .obs-body, .obs-style-stripe .obs-card-match, .obs-style-stripe .obs-champion { transform: none; }
/* Módulo de configuração */
.obs-grid { display: grid; grid-template-columns: repeat(3, 34px); gap: 6px; margin: 2px 0 8px; }
.obs-grid button { height: 34px; border-radius: 6px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05); cursor: pointer; }
.obs-grid button.active { background: #d8ad56; border-color: #d8ad56; }
.obs-url-bar { display: flex; gap: 8px; flex-wrap: wrap; } .obs-url-bar input { flex: 1; min-width: 240px; }
.obs-warning { color: #fa626e; }
.obs-preview { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: repeating-conic-gradient(#2a2d36 0 25%, #1c1e26 0 50%) 0 0 / 28px 28px; border: 1px solid rgba(255,255,255,.12); }
.obs-preview-frame { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 0; background: transparent; }
.obs-anchor.is-wide { padding: 0 0 24px; }
.art-upload { display: flex; flex-wrap: wrap; gap: 8px; }
.art-upload .button.active { border-color: #d8ad56; color: #d8ad56; }
.arts-controls, .arts-controls section, .arts-stage { min-width: 0; }
.arts-controls .access-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.arts-controls .access-chip { white-space: nowrap; }
.obs-url-bar input { height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: #0e1016; color: inherit; font: inherit; font-size: 13px; }

.art-preset-list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.art-preset-list li { display: inline-flex; gap: 2px; }
.art-upload input[data-art-preset-name] { flex: 1 1 140px; min-width: 0; }

/* Preview fixo ao rolar a configuração (artes e overlays de OBS) */
@media (min-width: 901px) { .arts-layout > .arts-stage { position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow: auto; } }

/* Calendário e jogos */
.sch-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 18px; align-items: start; }
.sch-main { min-width: 0; display: grid; gap: 12px; }
.sch-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; }
.sch-toolbar .field { min-width: 220px; flex: 1 1 220px; }
.sch-counts, .sch-badges, .sch-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sch-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-items: end; }
.sch-date { display: grid; gap: 4px; font-size: 11px; color: var(--muted); }
.sch-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid transparent; }
.sch-scheduled { background: rgba(69,136,181,.18); color: #8cc4ee; border-color: rgba(69,136,181,.4); }
.sch-live { background: rgba(250,98,110,.2); color: #ff9aa2; border-color: rgba(250,98,110,.5); }
.sch-finished { background: rgba(56,217,150,.14); color: #6fe6b6; border-color: rgba(56,217,150,.35); }
.sch-postponed { background: rgba(216,173,86,.2); color: #f0cf85; border-color: rgba(216,173,86,.5); }
.sch-cancelled { background: rgba(160,160,170,.15); color: #b6b8c2; border-color: rgba(160,160,170,.35); }
.sch-moved { background: rgba(216,173,86,.14); color: #f0cf85; border-color: rgba(216,173,86,.4); }
.sch-clash { background: rgba(250,98,110,.14); color: #ffb3b9; border-color: rgba(250,98,110,.45); }
.sch-cal-head { display: flex; align-items: center; justify-content: center; gap: 12px; }
.sch-cal-head strong { min-width: 180px; text-align: center; font-size: 16px; }
.sch-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sch-weekday { text-align: center; padding: 6px 0; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.sch-day { min-height: 104px; padding: 6px; display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.02); min-width: 0; }
.sch-day.is-empty { border-color: transparent; background: none; }
.sch-day.is-today { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(216,173,86,.35); }
.sch-num { font-size: 11px; font-weight: 700; color: var(--muted); }
.sch-chip { display: block; width: 100%; padding: 3px 6px; border-radius: 5px; font-size: 11px; font-weight: 600; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid transparent; font-family: inherit; }
.sch-chip.active { outline: 2px solid var(--gold); outline-offset: 1px; }
.sch-more { padding: 2px 6px; border: 0; background: none; color: var(--gold); font-size: 11px; text-align: left; cursor: pointer; font-family: inherit; }
.sch-undated { display: grid; gap: 6px; padding: 10px; border: 1px dashed var(--line); border-radius: 8px; }
.sch-undated .sch-chip { width: auto; max-width: 100%; }
.sch-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); }
.sch-row.active { border-color: rgba(216,173,86,.55); background: rgba(216,173,86,.07); }
.sch-row-main { min-width: 0; display: grid; gap: 3px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; font-family: inherit; padding: 0; }
.sch-row-main strong { font-size: 14px; } .sch-row-main strong b { color: var(--gold); padding: 0 4px; }
.sch-row-main small { color: var(--muted); font-size: 11px; }
.sch-when { font-size: 12px; font-weight: 700; color: var(--gold); text-transform: capitalize; }
.sch-when s, .sch-facts s { margin-left: 8px; color: var(--muted); font-weight: 400; }
.sch-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(216,173,86,.45); border-radius: 8px; background: rgba(216,173,86,.07); }
.sch-bulk input[type="number"] { width: 70px; }
.sch-bulk input[data-schedule-bulk="reason"] { flex: 1 1 180px; min-width: 0; }
.sch-detail { position: sticky; top: 88px; display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.03); max-height: calc(100vh - 104px); overflow: auto; }
.sch-detail-head h3 { margin: 4px 0 8px; font-size: 18px; } .sch-detail-head h3 b { color: var(--gold); padding: 0 4px; } .sch-detail-head small { color: var(--muted); }
.sch-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; } .sch-facts dt { color: var(--muted); } .sch-facts dd { margin: 0; }
.sch-actions, .sch-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sch-form { display: grid; gap: 10px; padding: 12px; border: 1px solid rgba(216,173,86,.4); border-radius: 8px; } .sch-form h4 { margin: 0; }
.sch-history ul { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 4px; font-size: 12px; color: var(--muted); } .sch-history b { color: var(--text); }
@media (max-width: 1100px) { .sch-layout { grid-template-columns: 1fr; } .sch-detail { position: static; max-height: none; } }
@media (max-width: 700px) { .sch-day { min-height: 70px; padding: 3px; } .sch-chip { font-size: 10px; padding: 2px 3px; } .sch-row { grid-template-columns: auto minmax(0, 1fr); } .sch-row .sch-badges { grid-column: 2; } }

.sch-filters input, .sch-filters select, .sch-bulk input, .sch-form input { width: 100%; min-width: 0; height: 40px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); outline: none; background: #0e1016; color: var(--text); font-size: 13px; font-family: inherit; box-sizing: border-box; }
.sch-bulk input[type="number"] { width: 76px; }
.sch-filters input:focus, .sch-filters select:focus, .sch-bulk input:focus, .sch-form input:focus { border-color: var(--gold); }
/* overflow: clip mantém o corte das bordas sem criar contêiner de rolagem, que quebraria o position: sticky dos previews */
.panel.builder-panel { overflow: clip; }

/* Sorteio */
.draw-layout { display: grid; gap: 14px; }
.draw-card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); min-width: 0; }
.draw-card input, .draw-card select, .draw-picks-head input { width: 100%; min-width: 0; height: 40px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); outline: none; background: #0e1016; color: var(--text); font-size: 13px; font-family: inherit; box-sizing: border-box; }
.draw-card input[type="checkbox"] { width: auto; height: auto; }
.draw-picks-head { display: flex; flex-wrap: wrap; gap: 8px; } .draw-picks-head input { flex: 1 1 200px; }
.draw-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; max-height: 340px; overflow: auto; }
.draw-pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; }
.draw-pick.is-on { border-color: rgba(216,173,86,.5); background: rgba(216,173,86,.06); }
.draw-pick label { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.draw-card .draw-pot-select { width: 110px; height: 32px; font-size: 12px; }
.draw-avoid { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 8px; align-items: center; }
.draw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.draw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; }
.draw-chip button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; }
.draw-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.draw-group { display: grid; gap: 6px; align-content: start; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(0,0,0,.2); }
.draw-group h4, .draw-list h4, .draw-bracket h4 { margin: 0 0 4px; color: var(--gold); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; } .draw-group h4 small { color: var(--muted); }
.draw-team { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,.05); font-size: 13px; animation: draw-pop .35s ease; }
.draw-team span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draw-team.is-hidden { opacity: .5; animation: none; }
.draw-team b { color: var(--gold); min-width: 26px; }
.draw-hidden { letter-spacing: .3em; color: var(--muted); }
.draw-pot { padding: 1px 6px; border-radius: 4px; background: rgba(69,136,181,.25); color: #8cc4ee; font-size: 10px; font-style: normal; font-weight: 700; }
.draw-icon { width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 6px; background: none; color: var(--text); cursor: pointer; font-size: 13px; opacity: .55; } .draw-icon.on { opacity: 1; border-color: var(--gold); background: rgba(216,173,86,.15); } .draw-icon:disabled { opacity: .2; cursor: default; }
.draw-card select.draw-move { width: 104px; height: 28px; font-size: 11px; padding: 0 6px; }
.draw-order-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.draw-list, .draw-bracket { display: grid; gap: 6px; align-content: start; } .draw-order { display: inline-flex; gap: 4px; }
.draw-pair { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 8px; align-items: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; } .draw-pair b { color: var(--gold); } .draw-pair em { color: var(--muted); font-style: normal; }
.draw-ceremony, .draw-confirm { display: grid; gap: 10px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 9px; }
.draw-confirm { border-style: solid; border-color: rgba(216,173,86,.4); background: rgba(216,173,86,.05); } .draw-confirm code { padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,.08); }
.draw-warnings { margin: 0; padding-left: 18px; color: #f0cf85; font-size: 12px; }
.draw-result { margin: 0; padding: 12px; border-radius: 8px; background: rgba(0,0,0,.3); font-size: 12px; line-height: 1.6; white-space: pre-wrap; font-family: inherit; }
@keyframes draw-pop { from { opacity: 0; transform: scale(.94) translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .draw-avoid { grid-template-columns: 1fr; } .draw-pair { grid-template-columns: auto 1fr; } }

/* Vínculos, campeonato em andamento e páginas públicas de equipe */
.links-layout { display: grid; gap: 14px; }
.links-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.links-table th, .links-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.links-table thead th { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: bottom; }
.links-table tbody th { text-align: left; font-weight: 600; min-width: 170px; }
.links-table th small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; text-transform: none; letter-spacing: 0; }
.links-champ { display: block; max-width: 160px; margin: 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.links-warn { color: #f0cf85 !important; }
.links-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.links-cell input { width: 20px; height: 20px; accent-color: var(--gold); cursor: pointer; } .links-cell small { color: var(--muted); font-size: 10px; }
.catchup-text { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #0e1016; color: var(--text); font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; resize: vertical; }
.catchup-adj input { width: 64px; height: 34px; text-align: center; padding: 0 4px; border: 1px solid var(--line-strong); border-radius: 6px; background: #0e1016; color: var(--text); font-size: 13px; }
.catchup-players { display: grid; gap: 6px; }
.catchup-player { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(140px, 1.4fr) repeat(3, 84px) auto; gap: 6px; align-items: center; }
.catchup-player input, .catchup-player select { height: 36px; min-width: 0; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: #0e1016; color: var(--text); font-size: 13px; box-sizing: border-box; width: 100%; }
@media (max-width: 800px) { .catchup-player { grid-template-columns: 1fr 1fr; } }
.portal-champ-notice { display: grid; gap: 8px; } .portal-champ-notice.is-warning { border-color: rgba(216,173,86,.5); }
.public-team-link { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.35); } .public-team-link:hover { color: var(--gold); border-bottom-color: var(--gold); }
.public-team-crest { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--team-color, #8253cd); color: #fff; font-weight: 800; overflow: hidden; flex: none; } .public-team-crest img { width: 100%; height: 100%; object-fit: contain; background: #fff; } .public-team-crest.is-large { width: 92px; height: 92px; font-size: 26px; }
.public-team-card { display: grid; gap: 8px; justify-items: start; }
.public-team-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.public-team-hero { border-bottom: 3px solid var(--team-color, var(--gold)); }
.public-team-stats { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); } .public-form { margin: 10px 0 0; color: var(--muted); font-size: 13px; }