:root,
:root[data-bt-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-muted: #edf3f8;
  --text-primary: #10243b;
  --text-secondary: #52667a;
  --border: #cbd8e4;
  --border-subtle: #e2eaf1;
  --accent: #0878b7;
  --accent-strong: #005a91;
  --success: #0f8a67;
  --warning: #a76700;
  --danger: #b42335;
  --shadow-card: 0 12px 32px rgba(15, 39, 64, .10);
  --premium-gradient: linear-gradient(135deg, #0078b8, #00a59b);
}

:root[data-bt-theme="dark"] {
  color-scheme: dark;
  --bg: #06111c;
  --surface: #0d1c2b;
  --surface-elevated: #13263a;
  --surface-muted: #172b3f;
  --text-primary: #f3f8fc;
  --text-secondary: #a9bed0;
  --border: #2b4258;
  --border-subtle: #1e3449;
  --accent: #35b7e8;
  --accent-strong: #72d2f4;
  --success: #45d0a6;
  --warning: #ffc15a;
  --danger: #ff7383;
  --shadow-card: 0 16px 42px rgba(0, 0, 0, .34);
  --premium-gradient: linear-gradient(135deg, #0f8ecc, #00b59d);
}

:root.release-3-premium[data-bt-theme="light"] {
  color-scheme: light;
  --r3-bg: #f4f7fb;
  --r3-bg-soft: #edf3f8;
  --r3-surface: rgba(255, 255, 255, .97);
  --r3-surface-raised: #ffffff;
  --r3-surface-soft: rgba(228, 238, 247, .82);
  --r3-line: rgba(35, 72, 106, .17);
  --r3-line-strong: rgba(0, 142, 119, .34);
  --r3-text: #10243b;
  --r3-muted: #52667a;
  --r3-brand: #0c946d;
  --r3-brand-strong: #087354;
  --r3-cyan: #0878b7;
  --r3-blue: #176bc2;
  --r3-warn: #a76700;
  --r3-danger: #b42335;
  --r3-shadow: 0 22px 55px rgba(15, 39, 64, .14);
  --r3-shadow-soft: 0 12px 32px rgba(15, 39, 64, .10);
}

:root.release-3-premium[data-bt-theme="light"] body {
  background: radial-gradient(circle at 12% -10%, rgba(0, 165, 155, .12), transparent 34rem), radial-gradient(circle at 94% 2%, rgba(8, 120, 183, .11), transparent 31rem), linear-gradient(180deg, #f8fbfd, var(--bg));
}
:root.release-3-premium[data-bt-theme="light"] body::before { opacity: .15; background-image: linear-gradient(rgba(16,36,59,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(16,36,59,.035) 1px, transparent 1px); }
:root.release-3-premium[data-bt-theme="light"] :is(.public-view,.login) { color: var(--text-primary); background: transparent; }
:root.release-3-premium[data-bt-theme="light"] .public-nav { color: var(--text-primary); background: rgba(250,252,253,.9); border-color: var(--border); }
:root.release-3-premium[data-bt-theme="light"] :is(.public-hero h1,.public-section h2) { color: var(--text-primary); }
:root.release-3-premium[data-bt-theme="light"] :is(.public-hero p,.public-section-lead,.feature-card p) { color: var(--text-secondary); }
:root.release-3-premium[data-bt-theme="light"] :is(.hero-demo,.demo-focus-row,.demo-exercise,.library-card-image,.demo-loading,.login .card) { color: var(--text-primary); background: var(--surface); border-color: var(--border); }
:root.release-3-premium[data-bt-theme="light"] .public-cta { color: #fff; background: linear-gradient(135deg, #0878b7, #0c946d); }
:root.release-3-premium[data-bt-theme="light"] :is(.section-tabs,.top) { background: rgba(255,255,255,.9); color: var(--text-primary); border-color: var(--border); }
:root.release-3-premium[data-bt-theme="light"] :is(.card,.item,.progress-card,.weekly-plan-card,.modal-card) { color: var(--text-primary); background: var(--surface); border-color: var(--border); }

html { background: var(--bg); }
body, .public-site, #appView, .login { background: var(--bg); color: var(--text-primary); }
body { transition: background-color .18s ease, color .18s ease; }
.card, .item, .feature-card, .game-card, .public-preview, .public-cta, .login .card,
.progress-card, .weekly-plan-card, .permalink-exercise { background: var(--surface); color: var(--text-primary); border-color: var(--border); box-shadow: var(--shadow-card); }
.muted, .small.muted, .public-section-lead { color: var(--text-secondary) !important; }
.btn { border-color: var(--border); color: var(--text-primary); background: var(--surface-elevated); }
.btn.primary { color: #fff; background: var(--premium-gradient); border-color: transparent; }
.theme-toggle { min-width: 106px; }
.theme-toggle:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 65%, white); outline-offset: 2px; }

.public-hero { position: relative; isolation: isolate; overflow: hidden; }
.public-hero::after { content: ""; position: absolute; inset: 0 0 0 auto; width: min(49%, 690px); z-index: -1; background: linear-gradient(90deg, var(--bg), transparent 36%), url("assets/photos/billiards-rack.jpg") center/cover no-repeat; opacity: .34; }
:root[data-bt-theme="dark"] .public-hero::after { opacity: .28; }
.public-hero-copy { text-shadow: 0 1px 0 var(--bg); }
.public-nav .theme-toggle { margin-left: auto; }
.brand-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.brand-photo-grid figure { margin: 0; position: relative; min-height: 280px; overflow: hidden; border-radius: 20px; box-shadow: var(--shadow-card); }
.brand-photo-grid img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.brand-photo-grid figcaption { position: absolute; inset: auto 14px 14px; width: max-content; max-width: calc(100% - 28px); padding: 7px 11px; border-radius: 999px; color: #fff; background: rgba(3, 17, 29, .72); backdrop-filter: blur(8px); font-weight: 800; }

.overview-nav-card { cursor: pointer; text-align: left; appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.overview-nav-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.overview-link { color: var(--accent); font-weight: 800; }

.player-metrics-card { display: grid; gap: 10px; }
.metric-bar-head { display: flex; justify-content: space-between; gap: 16px; align-items: end; }
.focus-bar-head { margin-top: 8px; }
.rating-number, .focus-number { font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.rating-number { font-size: clamp(2rem, 5vw, 3.4rem); }
.focus-number { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.rating-number span, .focus-number span { font-size: .38em; color: var(--text-secondary); margin-left: 3px; }
.rating-track { height: 12px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.rating-fill { height: 100%; width: var(--rating-pct, 0%); background: var(--premium-gradient); border-radius: inherit; }
.rating-track-focus .rating-fill { background: linear-gradient(90deg, #8d63e8, #e46bad); }
.activity-pill { font-size: .74rem; border: 1px solid var(--border); border-radius: 999px; padding: 5px 9px; color: var(--text-secondary); }
.rating-delta { color: var(--text-secondary); font-size: .82rem; }
.rating-confidence { border-top: 1px solid var(--border-subtle); padding-top: 9px; }

.score-stage { container-type: inline-size; }
.score-node { box-shadow: 0 9px 24px color-mix(in srgb, var(--accent) 15%, transparent); }
.score-node strong, .score-hub strong { font-variant-numeric: tabular-nums; }
.score-node[data-skill="technique"] { --skill-color: #11a98c; }
.score-node[data-skill="technique"] .node-icon { filter: drop-shadow(0 3px 7px rgba(17, 169, 140, .4)); }

.chart-wrap { overflow-x: auto; overflow-y: hidden; }
.chart-wrap svg { min-width: 540px; width: 100%; height: 100%; }
.progress-card { overflow: hidden; }
.history-mobile-label { display: none; }

.r3-workout-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr); gap: 18px; align-items: start; max-height: calc(100dvh - 150px); overflow: hidden; }
.r3-workout-layout > .r3-training-diagram { min-width: 0; position: sticky; top: 84px; }
.r3-workout-layout > .bt-workout-controls { min-width: 0; max-height: calc(100dvh - 170px); overflow-y: auto; padding: 2px 4px 86px 0; }
.workout-body textarea { min-height: 82px; }
.workout-body .submit-result { position: sticky; bottom: 0; width: 100%; z-index: 3; box-shadow: 0 -12px 24px var(--surface); }
.bt-workout-notes { margin: 12px 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-muted); }
.bt-workout-notes summary { cursor: pointer; padding: 11px 13px; font-weight: 800; }
.bt-workout-notes .field { padding: 0 13px 13px; margin: 0; }
.result-keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.result-key { min-height: 52px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-elevated); color: var(--text); font-size: 1.2rem; font-weight: 900; cursor: pointer; }
.result-key:hover, .result-key:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.result-key-clear { grid-column: 1 / -1; min-height: 42px; font-size: .9rem; color: var(--text-secondary); }
.r3-training-diagram-viewport svg, .assignment-thumb svg, .permalink-diagram svg { aspect-ratio: 2 / 1; width: 100%; height: auto; }

.library-card .assignment-thumb, .student-library-card .assignment-thumb, .exercise-thumb { aspect-ratio: 2 / 1; overflow: hidden; background: var(--surface-muted); }
.library-card img, .student-library-card img { width: 100%; height: 100%; object-fit: cover; }
.r3-diagram-skeleton, .library-skeleton { background: linear-gradient(100deg, var(--surface-muted) 25%, var(--surface-elevated) 40%, var(--surface-muted) 55%); background-size: 220% 100%; animation: bt-skeleton 1.25s infinite linear; }
@keyframes bt-skeleton { to { background-position-x: -220%; } }

.ghost-undo:disabled { opacity: .45; cursor: not-allowed; }
.ghost-event-log { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 8px; }
.ghost-event-log span { font-size: .72rem; border: 1px solid var(--border); border-radius: 999px; padding: 3px 7px; color: var(--text-secondary); }

.bt-multi { display: grid; gap: 8px; }
.bt-multi-search { width: 100%; }
.bt-multi-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 220px; overflow: auto; border: 1px solid var(--border); border-radius: 12px; padding: 8px; background: var(--surface); }
.bt-multi-option { display: flex; align-items: center; gap: 8px; min-width: 0; border-radius: 8px; padding: 7px; }
.bt-multi-option:hover { background: var(--surface-muted); }
.bt-multi-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-multi-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bt-multi-chip { border: 1px solid var(--border); background: var(--surface-muted); border-radius: 999px; padding: 4px 8px; font-size: .78rem; }
.bt-multi + select { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }

.builder-shell, .diagram-builder, .builder-modal { max-width: 100vw; overflow-x: clip; }
.builder-toolbar, .diagram-builder-toolbar { position: sticky; top: 0; z-index: 12; background: var(--surface); }
.builder-save, [data-builder-save] { position: sticky; bottom: 12px; z-index: 15; }

.permalink-share { margin-left: auto; }
.permalink-exercise h1 { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .public-hero::after { width: 100%; opacity: .16; }
  .r3-workout-layout { grid-template-columns: 1fr; max-height: none; overflow: visible; }
  .r3-workout-layout > .r3-training-diagram { position: static; }
  .r3-workout-layout > .bt-workout-controls { max-height: none; overflow: visible; padding-bottom: 86px; }
  .score-stage { min-height: 660px; }
  .bt-multi-options { grid-template-columns: 1fr; }
  .overview-nav-card { min-height: 126px; }
}

@media (max-width: 520px) {
  .brand-photo-grid { grid-template-columns: 1fr; }
  .brand-photo-grid figure { min-height: 210px; }
  .header-actions, .nav { gap: 6px; }
  .theme-toggle { min-width: 44px; padding-inline: 10px; }
  .theme-toggle span { display: none; }
  .score-stage { min-height: 580px; transform: scale(.92); transform-origin: top center; margin-bottom: -46px; }
  .score-node { width: 112px; height: 112px; }
  .score-hub { width: 190px; height: 190px; }
  .score-hub strong { font-size: 52px; }
  .metric-bar-head { align-items: center; }
  .history-table thead { display: none; }
  .history-table, .history-table tbody, .history-table tr, .history-table td { display: block; width: 100%; }
  .history-table tr { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; padding: 8px; background: var(--surface); }
  .history-table td { border: 0; display: grid; grid-template-columns: 42% 1fr; gap: 8px; padding: 5px; }
  .history-table td::before { content: attr(data-label); color: var(--text-secondary); font-size: .75rem; font-weight: 700; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }