/* Shared surface finish, scoped to supporting panels. */
body.app-v4 #train { --panel-accent: #d9ff43; --panel-glow: #d9ff4314; }
body.app-v4 #stats { --panel-accent: #53e2cf; --panel-glow: #53e2cf14; }
body.app-v4 #profile { --panel-accent: #b792ff; --panel-glow: #b792ff1c; }
body.app-v4 #ranking { --panel-accent: #f2b84b; --panel-glow: #f2b84b16; }
body.app-v4 :is(#train, #stats, #profile, #ranking) :is(.setup-card, .beats-panel, .profile-card, .profile-v148, .xp-panel, .section-copy-card),
body.app-v4 #stats .stats-grid > article,
body.app-v4 #stats .stats-placeholder-grid > article {
  min-width: 0;
  border: 1px solid #514a60 !important;
  border-top-color: var(--panel-accent) !important;
  border-radius: 24px !important;
  background: radial-gradient(ellipse at 100% 0, var(--panel-glow), transparent 60%), linear-gradient(145deg, #1b1820, #0e0d12) !important;
  box-shadow: inset 0 1px 0 #ffffff12, 0 12px 30px #00000024 !important;
}
body.app-v4 #train :is(.tool-card, .focus-chooser, .multiword-controls, .custom-focus, .youtube-box) {
  min-width: 0;
  border: 1px solid #47404f !important;
  border-radius: 18px !important;
  background: radial-gradient(ellipse at 100% 0, #b792ff12, transparent 65%), #141219 !important;
  box-shadow: inset 0 1px 0 #ffffff0a !important;
}
body.app-v4 :is(#train, #stats, #profile, #ranking) .section-copy-card > span {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid #ffffff26;
  border-radius: 999px;
  color: var(--panel-accent) !important;
  font-size: 11px !important;
  line-height: 1.4;
}
body.app-v4 :is(#train, #stats, #profile, #ranking) .section-copy-card > p {
  color: #d2cbd9 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}
body.app-v4 #stats .stats-grid > article { padding: 22px 16px !important; }
body.app-v4 #stats .stats-grid > article > strong { color: #f6f0ff !important; }
body.app-v4 #stats :is(.stats-grid, .stats-placeholder-grid) > article > small { color: #c8bfce !important; }
body.app-v4 #profile .profile-card :is(input:not([type=checkbox]), textarea, select) {
  background: #0e0d13 !important;
  border: 1px solid #53465f !important;
  border-radius: 12px !important;
  color: #f6f0ff !important;
  padding: 14px !important;
  font-size: 16px !important;
}
body.app-v4 :is(#train, #profile) :is(button, input, select, textarea):focus-visible {
  outline: 3px solid var(--panel-accent);
  outline-offset: 3px;
}
body.app-v4 #profile .profile-card label { color: #d4c8e2; line-height: 1.5; }
body.app-v4 #home .dash-hero h1,
body.landing-body .hero-copy h1 {
  font-size: clamp(34px, 4.8vw, 64px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.035em !important;
  overflow-wrap: normal;
}
body.app-v4 #home .dash-hero .lead,
body.landing-body .hero-copy .lead {
  max-width: 640px !important;
  color: #d5cedb !important;
  font-size: clamp(16px, 1.5vw, 19px) !important;
  line-height: 1.6 !important;
}
body.app-v4 #home .dash-hero > div { min-width: 0; }
body.app-v4 #home .dash-hero .eyebrow { line-height: 1.5; }
@media (max-width: 600px) {
  body.app-v4 :is(#train, #stats, #profile) :is(.setup-card, .beats-panel, .profile-card, .profile-v148, .xp-panel) { border-radius: 20px !important; }
  body.app-v4 #home .dash-hero h1,
  body.landing-body .hero-copy h1 { font-size: clamp(30px, 8vw, 44px) !important; }
}

body.app-v4 #profile :is(.profile-v148-stat, .profile-v148-level, .profile-v148-recent) { border: 1px solid #51405f !important; border-radius: 18px !important; background: linear-gradient(145deg, #231b2c, #131017) !important; }