/* JourneyDeck 6 beta — cinematic road-journal visual system. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080611;
  --panel: rgba(18, 12, 34, .94);
  --panel-2: rgba(10, 9, 24, .98);
  --line: rgba(172, 105, 255, .18);
  --text: #fff8f1;
  --muted: #9c91ae;
  --soft: #d7cde3;
  --accent: #ff5b50;
  --accent-2: #9b51ff;
  --danger: #ff4f72;
  --warn: #ffad5c;
  --shadow: 0 28px 90px rgba(0, 0, 0, .42);
  --jd-coral: #ff5b50;
  --jd-pink: #ff3d75;
  --jd-violet: #9b51ff;
  --jd-cyan: #19c7ff;
  --jd-apricot: #ffad5c;
  --jd-night: #080611;
  --jd-ink: #0d0919;
  --jd-display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}

html,
body {
  background:
    radial-gradient(circle at 79% -8%, rgba(155, 81, 255, .24), transparent 34rem),
    radial-gradient(circle at 4% 25%, rgba(255, 61, 117, .14), transparent 30rem),
    linear-gradient(180deg, #080611, #0b0717 48%, #070610) !important;
  background-attachment: fixed !important;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}

::selection { background: rgba(255, 91, 80, .34); color: #fff; }

/* The beta launch screen belongs to the same visual world and fails open if
   startup scripting is delayed by a third-party map resource. */
.journeydeck-launch {
  background:
    radial-gradient(circle at 75% 12%, rgba(155,81,255,.28), transparent 34%),
    radial-gradient(circle at 18% 80%, rgba(255,61,117,.18), transparent 34%),
    #07050e !important;
  animation: beta-ignition-failsafe .45s 3s ease forwards;
}
.journeydeck-launch .jd-launch-kicker,
.journeydeck-launch .jd-loading-topline strong { color: var(--jd-coral) !important; }
.journeydeck-launch .jd-launch-title span { color: #fff8f1 !important; }
.journeydeck-launch .jd-launch-title strong { color: var(--jd-coral) !important; }
.journeydeck-launch .jd-launch-title { font-family: var(--jd-display) !important; }
.journeydeck-launch .jd-route-main { stroke: url(#journeyDeckRoute); filter: hue-rotate(265deg) saturate(1.8); }
.journeydeck-launch .jd-loading-track i { background: linear-gradient(90deg,var(--jd-violet),var(--jd-pink),var(--jd-apricot)) !important; }
@keyframes beta-ignition-failsafe { to { opacity:0; visibility:hidden; pointer-events:none; } }

.app-shell { width: min(1520px, calc(100% - 34px)); }

/* App shell and navigation */
.topbar {
  position: sticky;
  z-index: 900;
  top: 12px;
  margin-bottom: 24px;
  border: 1px solid rgba(155, 81, 255, .2);
  border-radius: 22px;
  padding: 11px 14px !important;
  background: rgba(9, 7, 20, .86) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(22px) saturate(1.3);
}

.topbar .brand-logo {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  padding: 7px;
  background: linear-gradient(145deg, var(--jd-apricot), var(--jd-pink) 55%, var(--jd-violet));
  box-shadow: 0 0 30px rgba(255, 61, 117, .24);
  filter: saturate(0) brightness(5);
}

.topbar .brand h1 {
  color: #fff8f1;
  font-family: var(--jd-display);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: .035em;
}

.topbar .brand h1 span { color: #fff8f1; font-weight: 400; }
.topbar .eyebrow { color: var(--jd-apricot); font-size: .58rem; letter-spacing: .13em; }
.beta-release-badge { display: inline-flex; margin-left: 7px; border: 1px solid rgba(255,91,80,.4); border-radius: 99px; padding: 2px 6px; background: rgba(255,91,80,.12); color: #ff7a65; letter-spacing: .08em; }

.topbar .main-nav {
  border-color: rgba(155,81,255,.16);
  border-radius: 15px;
  background: rgba(255,255,255,.025);
}

.topbar .nav-button { color: #9488a8; border-radius: 11px; }
.topbar .nav-button:hover { color: #fff; background: rgba(155,81,255,.09); }
.topbar .nav-button.active {
  color: #fff8f1;
  background: linear-gradient(135deg, rgba(255,91,80,.22), rgba(155,81,255,.24));
  box-shadow: inset 0 0 0 1px rgba(255,118,94,.2), 0 8px 20px rgba(0,0,0,.18);
}
.nav-button-live .nav-live-dot { background: var(--jd-coral); box-shadow: 0 0 0 4px rgba(255,91,80,.12), 0 0 16px var(--jd-coral); }

.topbar-right { background: transparent !important; border-color: transparent !important; }
.theme-switcher { display: none !important; }
.command-palette-trigger,
.header-sign-out,
.desktop-mobile-preview,
.desktop-wife-preview,
.return-wife-mode {
  border-color: rgba(155,81,255,.22) !important;
  background: rgba(255,255,255,.035) !important;
  color: var(--soft) !important;
}
.status-pill { border-color: rgba(255,91,80,.22); background: rgba(255,91,80,.07); color: #ffb5a9; }
.status-pill.ok .status-dot { background: var(--jd-coral); box-shadow: 0 0 14px rgba(255,91,80,.75); }

/* Shared type and surfaces */
.section-label { color: var(--jd-coral) !important; letter-spacing: .15em; }
.spotify-label { color: var(--jd-violet) !important; }
.page-heading h2,
.panel-heading h2,
.panel-heading h3,
.modal-card > h2,
.map-heading h3,
.soundtrack-header h3 {
  color: #fff8f1;
  font-family: var(--jd-display);
  font-weight: 400 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase;
}

.page-heading h2 { font-size: clamp(2.8rem, 6vw, 5.6rem); line-height: .88; }
.page-heading p { color: #a99db8; }

.panel,
.drive-card,
.stat-card,
.timeline-card,
.mobility-graph-summary article,
.data-health-overall,
.data-health-card,
.data-health-panel,
.data-health-actions {
  border-color: rgba(155,81,255,.17) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 38%),
    linear-gradient(160deg, rgba(22,14,40,.97), rgba(10,8,23,.98)) !important;
  box-shadow: 0 22px 64px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.03) !important;
}

.primary-button,
.refresh-button {
  border: 0 !important;
  background: linear-gradient(135deg, var(--jd-pink), var(--jd-coral) 55%, var(--jd-apricot)) !important;
  color: #150811 !important;
  box-shadow: 0 10px 26px rgba(255,61,117,.2);
}
.secondary-button,
.text-button {
  border-color: rgba(155,81,255,.26) !important;
  background: rgba(155,81,255,.08) !important;
  color: #cdb8f1 !important;
}

/* Overview — vehicle and soundtrack become the cinematic hero. */
.dashboard-customize-bar { margin: 4px 4px 16px; }
.dashboard-customize-bar .section-label::after { content: "  /  YOUR DAY IN MOTION"; color: var(--jd-violet); }
.dashboard-widget-grid { gap: 16px; }
.dashboard-widget { border-radius: 25px !important; }

.vehicle-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 570px !important;
  border-color: rgba(255,91,80,.2) !important;
  background:
    radial-gradient(circle at 72% 40%, rgba(255,61,117,.2), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(155,81,255,.22), transparent 35%),
    linear-gradient(150deg, #160b25 0%, #0c0818 55%, #080711 100%) !important;
}

.vehicle-panel::after {
  content: "OPEN\A ROADS";
  white-space: pre;
  position: absolute;
  z-index: -1;
  top: 80px;
  left: 27px;
  color: rgba(255, 91, 80, .1);
  font-family: var(--jd-display);
  font-size: clamp(5rem, 10vw, 10rem);
  line-height: .75;
  letter-spacing: -.02em;
}

.vehicle-panel .panel-heading { position: relative; z-index: 4; }
.vehicle-panel .panel-heading h2 { font-size: clamp(2.4rem,4vw,4.4rem); }
.vehicle-panel .mini-pill { border-color: rgba(255,91,80,.34); background: rgba(255,91,80,.1); color: #ff9d8d; }
.vehicle-dashboard-main { position: relative; z-index: 1; }
.vehicle-charge-summary { align-self: end; padding-bottom: 28px; }
.vehicle-model-label { color: var(--jd-apricot) !important; letter-spacing: .16em; }
.battery-number { color: #fff7ef; font-family: var(--jd-display); font-size: clamp(5.8rem, 10vw, 9.5rem); font-weight: 400; letter-spacing: -.035em; text-shadow: 0 0 36px rgba(255,91,80,.14); }
.battery-track { height: 11px; background: rgba(255,255,255,.055); }
.battery-fill { background: linear-gradient(90deg, var(--jd-pink), var(--jd-coral), var(--jd-apricot)); box-shadow: 0 0 22px rgba(255,91,80,.5); }
.vehicle-hero-visual { min-height: 360px; background: radial-gradient(ellipse at 50% 78%, rgba(255,61,117,.2), transparent 47%) !important; }
.vehicle-hero-visual::after {
  content: "";
  position: absolute;
  inset: 10% -15% 12% 28%;
  border: 5px solid transparent;
  border-top-color: var(--jd-coral);
  border-radius: 50%;
  transform: rotate(-18deg);
  filter: drop-shadow(0 0 9px var(--jd-pink));
  opacity: .8;
}
.vehicle-route-sweep { border-color: rgba(255,91,80,.65) !important; box-shadow: 0 0 22px rgba(255,61,117,.4) !important; }
.vehicle-car-photo { filter: drop-shadow(0 28px 28px rgba(0,0,0,.5)) saturate(.86) hue-rotate(330deg); }
.vehicle-location-panel { border-color: rgba(25,199,255,.2) !important; background: rgba(6,15,31,.74) !important; }
.vehicle-panel .metric-grid { position: relative; z-index: 3; border-color: rgba(155,81,255,.15) !important; background: rgba(6,5,16,.64); backdrop-filter: blur(12px); }
.vehicle-panel .metric { border-color: rgba(155,81,255,.14) !important; }

.spotify-panel {
  border-color: rgba(155,81,255,.22) !important;
  background:
    radial-gradient(circle at 90% 8%, rgba(155,81,255,.3), transparent 36%),
    radial-gradient(circle at 16% 80%, rgba(25,199,255,.12), transparent 32%),
    linear-gradient(155deg, #170d2e, #0b0819 64%) !important;
}
.spotify-panel h2 { font-size: clamp(2.4rem,4vw,4.4rem); }
.spotify-wave-icon,
.music-icon { border-color: rgba(155,81,255,.26); background: rgba(155,81,255,.12); color: #b377ff; }
.v3-featured-artwork,
.v3-featured-art .track-artwork { border-radius: 21px !important; box-shadow: 0 18px 48px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.08); }
.v3-featured-title { color: #fff8f1 !important; font-family: var(--jd-display); letter-spacing: .02em !important; text-transform: uppercase; }
.v3-waveform span { background: linear-gradient(to top, var(--jd-violet), var(--jd-pink), var(--jd-coral)) !important; box-shadow: 0 0 7px rgba(255,61,117,.36); }

.today-driving-widget { background: radial-gradient(circle at 95% 0%, rgba(255,91,80,.22), transparent 42%), linear-gradient(150deg,#211027,#0b0818 70%) !important; }
.today-driving-primary > strong { color: #fff8f1; font-family: var(--jd-display); font-size: clamp(3.6rem,6vw,6.2rem) !important; font-weight: 400; letter-spacing: -.02em; }
.drive-soundtrack-widget { background: radial-gradient(circle at 95% 0%, rgba(155,81,255,.28), transparent 44%), linear-gradient(150deg,#160d30,#090817 70%) !important; }
.quick-actions-widget { background: radial-gradient(circle at 95% 0%, rgba(25,199,255,.17), transparent 45%), linear-gradient(150deg,#0c1830,#090817 70%) !important; }
.dashboard-quick-actions button { border-color: rgba(155,81,255,.2) !important; background: rgba(255,255,255,.025) !important; }
.dashboard-quick-actions button:hover { border-color: rgba(255,91,80,.5) !important; background: rgba(255,91,80,.08) !important; }
.dashboard-quick-actions button > span { color: var(--jd-coral) !important; }
.dashboard-widget-symbol { border-color: rgba(255,91,80,.2) !important; background: rgba(255,91,80,.08) !important; color: var(--jd-coral) !important; }

.drives-panel { background: linear-gradient(155deg, rgba(18,11,34,.98), rgba(8,8,19,.98)) !important; }
.dashboard-drive-card,
.drive-card { border-color: rgba(155,81,255,.15) !important; background: rgba(255,255,255,.025) !important; }
.drive-card:hover { border-color: rgba(255,91,80,.45) !important; transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.32), 0 0 28px rgba(255,61,117,.08) !important; }
.drive-route::before { background: linear-gradient(var(--jd-coral),var(--jd-violet)) !important; }
.view-drive-button { color: var(--jd-coral) !important; }
.stat-card strong { color: #ff806c !important; font-family: var(--jd-display); font-weight: 400; letter-spacing: .05em; }

/* Secondary views keep their features but inherit the new shell. */
.drive-search-panel,
.favorite-routes-panel,
.journey-collections-panel,
.charging-panel,
.mobility-graph-panel,
.mobility-intelligence-panel,
.music-panel,
.timeline-panel,
.analytics-panel { border-radius: 25px !important; }

.drive-search-panel input,
.drive-search-panel select,
input,
select,
textarea {
  border-color: rgba(155,81,255,.22) !important;
  background-color: rgba(8,7,19,.78) !important;
  color: #fff8f1 !important;
}
.mobility-graph-canvas { border-color: rgba(155,81,255,.2) !important; background: radial-gradient(circle at 50% 48%,rgba(255,61,117,.14),transparent 42%),linear-gradient(rgba(155,81,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(155,81,255,.06) 1px,transparent 1px),rgba(7,6,17,.8) !important; background-size: auto,32px 32px,32px 32px,auto !important; }
.mobility-edge { stroke: var(--jd-coral); }
.mobility-node { color: var(--jd-violet) !important; }

/* Drive detail and replay — poster-like, route-first surface. */
.modal-backdrop { background: rgba(4,2,10,.84) !important; backdrop-filter: blur(14px); }
#driveModal .modal-card {
  border: 1px solid rgba(255,91,80,.2) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 85% 4%, rgba(155,81,255,.26), transparent 28rem),
    linear-gradient(155deg,#160c25,#080711 58%) !important;
  box-shadow: 0 40px 120px rgba(0,0,0,.62) !important;
}
#driveModal .modal-card > .section-label { color: var(--jd-apricot) !important; }
#driveModal .modal-card > h2 { max-width: 900px; margin-top: 10px; font-size: clamp(3rem,7vw,7.5rem) !important; line-height: .82 !important; color: #ff6457; }
.detail-metrics { border-color: rgba(155,81,255,.18) !important; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.025); }
.detail-metrics > div { border-color: rgba(155,81,255,.14) !important; }
.detail-metrics strong { color: #fff8f1; font-family: var(--jd-display); font-size: 1.6rem !important; font-weight: 400; }
.drive-map-section {
  border-color: rgba(25,199,255,.18) !important;
  border-radius: 23px !important;
  background: linear-gradient(145deg,rgba(7,16,34,.86),rgba(12,8,25,.9)) !important;
}
.drive-map { filter: saturate(.55) hue-rotate(225deg) contrast(1.12) brightness(.65); }
.maplibregl-canvas { background: #090714 !important; }
.map-legend { color: #a99db8; }
.legend-line { background: linear-gradient(90deg,var(--jd-pink),var(--jd-coral),var(--jd-apricot)) !important; box-shadow: 0 0 10px rgba(255,91,80,.55); }
.legend-start,.legend-end,.legend-song { border-color: #fff !important; background: var(--jd-coral) !important; color: #130912 !important; }

.replay-panel {
  border-color: rgba(155,81,255,.24) !important;
  border-radius: 23px !important;
  background:
    radial-gradient(circle at 20% 0%,rgba(155,81,255,.24),transparent 34%),
    linear-gradient(150deg,#190e31,#080713 70%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 18px 45px rgba(0,0,0,.3);
}
.replay-artwork { border-radius: 18px !important; box-shadow: 0 18px 40px rgba(0,0,0,.42); }
.replay-track-info strong { color: #fff8f1; font-family: var(--jd-display); font-size: 2rem !important; text-transform: uppercase; letter-spacing: .025em; }
.replay-telemetry-value { color: #ff806c !important; font-family: var(--jd-display); font-size: 2rem !important; font-weight: 400; }
.replay-controls { border-color: rgba(155,81,255,.15) !important; }
.replay-play-button { border: 0 !important; background: linear-gradient(135deg,var(--jd-pink),var(--jd-coral),var(--jd-apricot)) !important; color: #190910 !important; box-shadow: 0 10px 26px rgba(255,61,117,.24); }
.replay-scrubber { accent-color: var(--jd-coral); }
.spotify-play-button { border-color: rgba(155,81,255,.3) !important; background: rgba(155,81,255,.12) !important; color: #d8c1ff !important; }

/* Share-card studio */
.share-card-modal-card {
  border: 1px solid rgba(255,91,80,.2) !important;
  border-radius: 28px !important;
  background: radial-gradient(circle at 88% 6%,rgba(155,81,255,.28),transparent 33%),linear-gradient(150deg,#160c25,#080711 62%) !important;
}
.share-card-modal-card > h2 { color: #ff6457; font-size: clamp(2.7rem,5vw,5.4rem) !important; line-height: .9 !important; }
.share-card-preview { border-color: rgba(155,81,255,.22) !important; border-radius: 22px !important; background: #05040b !important; box-shadow: 0 22px 60px rgba(0,0,0,.4); }
.share-card-controls { border-color: rgba(155,81,255,.19) !important; border-radius: 20px !important; background: rgba(255,255,255,.025) !important; }
.share-card-privacy-lock { border-color: rgba(25,199,255,.2) !important; background: rgba(25,199,255,.06) !important; color: #aee9ff !important; }
.share-to-x-button { background: linear-gradient(135deg,var(--jd-violet),var(--jd-pink),var(--jd-coral)) !important; color: #fff !important; }

/* Mobile: compact cinematic shell with feature-complete bottom navigation. */
@media (max-width:1120px) {
  .topbar { position: relative; top: 0; }
  .main-nav.mobile-nav-portal,
  body > .main-nav {
    border-top: 1px solid rgba(155,81,255,.22) !important;
    background: rgba(8,6,17,.94) !important;
    box-shadow: 0 -18px 45px rgba(0,0,0,.45) !important;
    backdrop-filter: blur(20px) saturate(1.25);
  }
  .main-nav.mobile-nav-portal .nav-button.active,
  body > .main-nav .nav-button.active { color: var(--jd-coral) !important; background: rgba(255,91,80,.08) !important; }
}

@media (max-width:760px) {
  .app-shell { width: 100%; padding-inline: 10px; }
  .topbar { margin: 0 0 14px; border-radius: 0 0 19px 19px; border-top: 0; }
  .topbar .brand-logo { width: 39px; height: 39px; border-radius: 12px; }
  .topbar .brand h1 { font-size: 1.28rem; }
  .topbar .eyebrow { display: block; }
  .dashboard-customize-bar { align-items: flex-start; }
  .dashboard-customize-bar > div span:not(.section-label) { display: none; }
  .dashboard-widget-grid { gap: 12px; }
  .dashboard-widget { border-radius: 20px !important; }
  .vehicle-panel { min-height: 0 !important; padding: 19px !important; }
  .vehicle-panel::after { top: 82px; left: 16px; font-size: 5.6rem; opacity: .85; }
  .vehicle-panel .panel-heading h2 { font-size: 2.7rem; }
  .vehicle-dashboard-main { min-height: 300px !important; }
  .vehicle-hero-visual { min-height: 260px !important; }
  .vehicle-charge-summary { position: relative; z-index: 3; }
  .battery-number { font-size: 6.3rem; }
  .vehicle-panel .metric-grid { grid-template-columns: repeat(2,1fr) !important; }
  .spotify-panel h2 { font-size: 2.7rem; }
  .today-driving-primary > strong { font-size: 5rem !important; }
  #driveModal .modal-card,
  .share-card-modal-card { border-radius: 21px !important; }
  #driveModal .modal-card > h2 { font-size: 3.8rem !important; padding-right: 40px; }
  .replay-now-playing { align-items: center; }
  .replay-track-info strong { font-size: 1.55rem !important; }
  .share-card-modal-card > h2 { font-size: 3.2rem !important; }
}

@media (prefers-reduced-motion:no-preference) {
  .vehicle-route-sweep { animation: beta-route-pulse 4s ease-in-out infinite alternate; }
  @keyframes beta-route-pulse { from { opacity:.38; filter:brightness(.8); } to { opacity:.9; filter:brightness(1.35); } }
}

/* Final beta authority over legacy theme-qualified selectors. */
:root[data-theme="dark"] .topbar .nav-button.active {
  color:#fff8f1 !important;
  background:linear-gradient(135deg,rgba(255,91,80,.24),rgba(155,81,255,.28)) !important;
  box-shadow:inset 0 0 0 1px rgba(255,118,94,.22),0 8px 20px rgba(0,0,0,.2) !important;
}
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .drive-card,
:root[data-theme="dark"] .stat-card {
  border-color:rgba(155,81,255,.17) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.035),transparent 38%),linear-gradient(160deg,rgba(22,14,40,.97),rgba(10,8,23,.98)) !important;
}
:root[data-theme="dark"] .vehicle-panel {
  border-color:rgba(255,91,80,.24) !important;
  background:radial-gradient(circle at 72% 40%,rgba(255,61,117,.23),transparent 31%),radial-gradient(circle at 92% 8%,rgba(155,81,255,.27),transparent 36%),linear-gradient(150deg,#200d2e 0%,#10091e 55%,#080711 100%) !important;
}
:root[data-theme="dark"] .spotify-panel {
  border-color:rgba(155,81,255,.26) !important;
  background:radial-gradient(circle at 90% 8%,rgba(155,81,255,.36),transparent 38%),radial-gradient(circle at 16% 80%,rgba(25,199,255,.12),transparent 33%),linear-gradient(155deg,#1c0c39,#0b071a 64%) !important;
}
:root[data-theme="dark"] .today-driving-widget { background:radial-gradient(circle at 95% 0%,rgba(255,91,80,.25),transparent 42%),linear-gradient(150deg,#29102d,#0b0718 70%) !important; }
:root[data-theme="dark"] .drive-soundtrack-widget { background:radial-gradient(circle at 95% 0%,rgba(155,81,255,.32),transparent 44%),linear-gradient(150deg,#1d0c38,#090717 70%) !important; }
:root[data-theme="dark"] .quick-actions-widget { background:radial-gradient(circle at 95% 0%,rgba(25,199,255,.19),transparent 45%),linear-gradient(150deg,#0c1830,#090717 70%) !important; }
:root[data-theme="dark"] .secondary-button,
:root[data-theme="dark"] .text-button { border-color:rgba(155,81,255,.28) !important; background:rgba(155,81,255,.1) !important; color:#dbc6ff !important; }
:root[data-theme="dark"] #driveModal .modal-card { background:radial-gradient(circle at 85% 4%,rgba(155,81,255,.28),transparent 28rem),linear-gradient(155deg,#190b2c,#080611 58%) !important; }
:root[data-theme="dark"] .replay-panel { background:radial-gradient(circle at 20% 0%,rgba(155,81,255,.27),transparent 34%),linear-gradient(150deg,#1c0c39,#080613 70%) !important; }
:root[data-theme="dark"] .share-card-modal-card { background:radial-gradient(circle at 88% 6%,rgba(155,81,255,.32),transparent 33%),linear-gradient(150deg,#190b2c,#080611 62%) !important; }