:root {
  --cinema-bg: #151515;
  --cinema-bg-soft: #202020;
  --cinema-panel: #202020;
  --cinema-panel-strong: #292929;
  --cinema-line: rgba(255, 255, 255, 0.16);
  --cinema-text: #f8f8f8;
  --cinema-muted: rgba(255, 255, 255, 0.72);
  --cinema-faint: rgba(255, 255, 255, 0.52);
  --cinema-red: #ff1238;
  --cinema-red-dark: #c90024;
  --cinema-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
  --cinema-radius: 18px;
  --cinema-shell: 1180px;
}

body[data-cinematic-ui] {
  --surface: var(--cinema-panel);
  --surface-soft: var(--cinema-panel-strong);
  --text: var(--cinema-text);
  --muted: var(--cinema-muted);
  --border: var(--cinema-line);
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.018) 1px, transparent 1px),
    var(--cinema-bg);
  background-size: 96px 96px;
  color: var(--cinema-text);
  min-height: 100vh;
  min-height: 100dvh;
}

body[data-cinematic-ui] .global-page-container { padding-top: 96px; padding-bottom: 48px; }
body[data-cinematic-ui] .page-shell { color: var(--cinema-text); }
body[data-cinematic-ui] .section-panel,
body[data-cinematic-ui] .page-header,
body[data-cinematic-ui] .workout-card,
body[data-cinematic-ui] .settings-card,
body[data-cinematic-ui] .account-card,
body[data-cinematic-ui] .oauth-card,
body[data-cinematic-ui] .email-card {
  border: 1px solid var(--cinema-line);
  border-radius: var(--cinema-radius);
  background: rgba(32,32,32,.96);
  color: var(--cinema-text);
  box-shadow: var(--cinema-shadow);
}

body[data-cinematic-ui] .site-header {
  border-color: var(--cinema-line);
  background: rgba(21,21,21,.96);
  color: var(--cinema-text);
}
body[data-cinematic-ui] .page-header p,
body[data-cinematic-ui] .oauth-card h3,
body[data-cinematic-ui] .oauth-card p,
body[data-cinematic-ui] .email-card h3,
body[data-cinematic-ui] .email-card p,
body[data-cinematic-ui] .email-card label {
  color: var(--cinema-text);
}
body[data-cinematic-ui] .oauth-card .muted,
body[data-cinematic-ui] .email-card .muted { color:var(--cinema-muted); }

/* Legacy user-facing cards that previously hard-coded a light surface. */
body[data-cinematic-ui] .owner-action-card,
body[data-cinematic-ui] .workout-visibility-control,
body[data-cinematic-ui] .verification-copy,
body[data-cinematic-ui] .device-card,
body[data-cinematic-ui] .value-card,
body[data-cinematic-ui] .media-card,
body[data-cinematic-ui] .card,
body[data-cinematic-ui] .guide-note,
body[data-cinematic-ui] .compat-image-card,
body[data-cinematic-ui] .compat-step-card,
body[data-cinematic-ui] .faq-item,
body[data-cinematic-ui] .policy-section,
body[data-cinematic-ui] .session-side-panel,
body[data-cinematic-ui] .session-list-card,
body[data-cinematic-ui] .comment-item {
  border-color:var(--cinema-line);
  background:var(--cinema-panel);
  color:var(--cinema-text);
}
body[data-cinematic-ui] .workout-visibility-control.is-private,
body[data-cinematic-ui] .comment-item.hidden-comment {
  border-color:rgba(255,18,56,.38);
  background:#281d20;
}
body[data-cinematic-ui] .verification-copy,
body[data-cinematic-ui] .value-card p,
body[data-cinematic-ui] .media-card p,
body[data-cinematic-ui] .guide-note p,
body[data-cinematic-ui] .compat-test-heading p,
body[data-cinematic-ui] .compat-walkthrough > p,
body[data-cinematic-ui] .compat-image-card figcaption,
body[data-cinematic-ui] .compat-step-card figcaption,
body[data-cinematic-ui] .faq-item p,
body[data-cinematic-ui] .faq-steps,
body[data-cinematic-ui] .policy-section p,
body[data-cinematic-ui] .policy-section li,
body[data-cinematic-ui] .visibility-current { color:var(--cinema-muted); }
body[data-cinematic-ui] .warning-text,
body[data-cinematic-ui] .error-text { color:#ff8da1; }

body[data-cinematic-ui] .accent-note {
  border-color:rgba(255,18,56,.42);
  background:#281d20;
  color:var(--cinema-text);
}
body[data-cinematic-ui] .compat-status {
  border-color:#365a80;
  background:#172536;
  color:#dbeafe;
}
body[data-cinematic-ui] .compat-status.success {
  border-color:#39764c;
  background:#15291c;
  color:#bdf4ca;
}
body[data-cinematic-ui] .compat-status.warning {
  border-color:#8d662b;
  background:#302513;
  color:#ffe2a8;
}
body[data-cinematic-ui] .compat-status.error {
  border-color:#8f3d4b;
  background:#30191d;
  color:#ffc0ca;
}

/* Nested status content follows its container's accessible foreground. */
body[data-cinematic-ui] .flash-item *,
body[data-cinematic-ui] .flash-list li *,
body[data-cinematic-ui] .compat-status *,
body[data-cinematic-ui] .compat-acknowledgment *,
body[data-cinematic-ui] .safety-warning *,
body[data-cinematic-ui] .adhoc-embed-warning * { color:inherit; }

/* Mobile's legacy stylesheet loads light cards; the cinematic layer wins. */
body.mobile-mode[data-cinematic-ui] .mobile-more-menu nav,
body.mobile-mode[data-cinematic-ui] .mobile-bottom-nav,
body.mobile-mode[data-cinematic-ui] .mobile-public-workout-card,
body.mobile-mode[data-cinematic-ui] .workout-item,
body.mobile-mode[data-cinematic-ui] .mobile-page-action,
body.mobile-mode[data-cinematic-ui] .mobile-availability-note {
  border-color:var(--cinema-line);
  background:var(--cinema-panel);
  color:var(--cinema-text);
}
body.mobile-mode[data-cinematic-ui] .mobile-bottom-nav { border-color:var(--cinema-line); }
body.mobile-mode[data-cinematic-ui] .mobile-more-menu nav a,
body.mobile-mode[data-cinematic-ui] .mobile-bottom-nav a { color:var(--cinema-text); }
body.mobile-mode[data-cinematic-ui] .mobile-more-menu nav a:hover { background:var(--cinema-panel-strong); color:var(--cinema-red); }

/* All standard dialogs use one complete dark-theme surface. */
body[data-cinematic-ui] .app-dialog-panel {
  border-color: var(--cinema-line);
  background: var(--cinema-panel);
  color: var(--cinema-text);
  box-shadow: var(--cinema-shadow);
}
body[data-cinematic-ui] .app-dialog-panel input,
body[data-cinematic-ui] .app-dialog-panel select,
body[data-cinematic-ui] .app-dialog-panel textarea {
  border-color: var(--cinema-line);
  background: #171717;
  color: var(--cinema-text);
}
body[data-cinematic-ui] .app-dialog-status { color: var(--cinema-muted); }
body[data-cinematic-ui] .app-dialog-status.is-warning { color: #ff8da1; }

body[data-cinematic-ui] h1,
body[data-cinematic-ui] h2,
body[data-cinematic-ui] h3,
body[data-cinematic-ui] h4,
body[data-cinematic-ui] strong,
body[data-cinematic-ui] dt,
body[data-cinematic-ui] label { color: var(--cinema-text); }
body[data-cinematic-ui] p,
body[data-cinematic-ui] dd,
body[data-cinematic-ui] li,
body[data-cinematic-ui] .muted { color: var(--cinema-muted); }
body[data-cinematic-ui] a { color: #fff; }
body[data-cinematic-ui] a:hover,
body[data-cinematic-ui] a:focus-visible { color: var(--cinema-red); }

body[data-cinematic-ui] input,
body[data-cinematic-ui] select,
body[data-cinematic-ui] textarea {
  border: 1px solid var(--cinema-line);
  background: #171717;
  color: var(--cinema-text);
}
body[data-cinematic-ui] input::placeholder,
body[data-cinematic-ui] textarea::placeholder { color: var(--cinema-faint); }
body[data-cinematic-ui] input:focus-visible,
body[data-cinematic-ui] select:focus-visible,
body[data-cinematic-ui] textarea:focus-visible,
body[data-cinematic-ui] button:focus-visible,
body[data-cinematic-ui] a:focus-visible { outline: 3px solid rgba(255,18,56,.5); outline-offset: 2px; }

body[data-cinematic-ui] .btn,
body[data-cinematic-ui] button:not(.panel-toggle):not(.favorite-toggle):not(.description-more) {
  border-color: var(--cinema-line);
  background: #2a2a2a;
  color: #fff;
}
body[data-cinematic-ui] .btn.primary,
body[data-cinematic-ui] button.primary {
  border-color: var(--cinema-red);
  background: var(--cinema-red);
  color: #fff;
  box-shadow: 0 12px 34px rgba(255,18,56,.22);
}
body[data-cinematic-ui] .btn.primary:hover,
body[data-cinematic-ui] button.primary:hover { background: #ff294a; color:#fff; }
body[data-cinematic-ui] button:not(.primary):not(.panel-toggle):not(.favorite-toggle):not(.description-more):hover {
  color: var(--cinema-red);
}

body[data-cinematic-ui] .filters-panel,
body[data-cinematic-ui] .mobile-filter-disclosure,
body[data-cinematic-ui] details { border-color: var(--cinema-line); background: rgba(255,255,255,.035); }
body[data-cinematic-ui] hr,
body[data-cinematic-ui] .entry-sep { border-color: var(--cinema-line); }
body[data-cinematic-ui] table { color: var(--cinema-text); }
body[data-cinematic-ui] th { background:#292929; color:#fff; }
body[data-cinematic-ui] td { border-color:var(--cinema-line); }

body[data-cinematic-ui] .workout-list-panel { background: rgba(22,22,22,.92); }
body[data-cinematic-ui] .workout-item {
  margin: 12px 0;
  padding: 14px;
  border: 1px solid var(--cinema-line);
  border-radius: 16px;
  background: #202020;
}
body[data-cinematic-ui] .workout-item.workout-owned { border-color: rgba(255,18,56,.5); background:#251d1f; }
body[data-cinematic-ui] .workout-item.workout-owned-private {
  border-color: rgba(245,158,11,.82);
  background: #302612;
  box-shadow: 0 0 0 1px rgba(245,158,11,.18), 0 12px 30px rgba(0,0,0,.24);
}
body[data-cinematic-ui] .workout-item.workout-owned-private .workout-meta-card {
  border-left: 4px solid #f59e0b;
  padding-left: 12px;
}
body[data-cinematic-ui] .workout-meta-card { border-color: transparent; background: transparent; }
body[data-cinematic-ui] .workout-title-row a { color:#fff; }
body[data-cinematic-ui] .workout-title-row a:hover { color:var(--cinema-red); }
body[data-cinematic-ui] .workout-badge { border-color:rgba(255,18,56,.32); background:rgba(255,18,56,.14); color:#ffbdc8; }
body[data-cinematic-ui] .workout-item.workout-owned-private .private-badge {
  border-color: #f59e0b;
  background: #f59e0b;
  color: #1c1405;
  font-weight: 800;
}
body[data-cinematic-ui] .workout-item.workout-owned-private .private-action {
  border-color: #f59e0b;
  background: #f59e0b;
  color: #1c1405;
  font-weight: 800;
}
body[data-cinematic-ui] .meta-chip { border-color:var(--cinema-line); background:#292929; color:var(--cinema-muted); }
body[data-cinematic-ui] .workout-description { color:var(--cinema-muted); }
body[data-cinematic-ui] .description-more { color:#fff; }
body[data-cinematic-ui] .description-more:hover,
body[data-cinematic-ui] .description-more:focus-visible { color:var(--cinema-red); }
body[data-cinematic-ui] .thumb { border-color:var(--cinema-line); }
body[data-cinematic-ui] .thumb-placeholder { background:#303030; }
body[data-cinematic-ui] .favorite-toggle,
body[data-cinematic-ui] .share-icon-link { border-color:var(--cinema-line); background:#2a2a2a; color:#fff; }

.workout-profile-band {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,42%);
  gap:16px;
  margin:12px 0 2px;
  padding:11px 12px;
  border:1px solid var(--cinema-line);
  border-radius:12px;
  background:#181818;
}
.workout-profile-metrics { display:flex; align-items:center; gap:12px 18px; flex-wrap:wrap; }
.workout-profile-metrics span { color:var(--cinema-faint); font-size:11px; line-height:1.2; }
.workout-profile-metrics strong { display:block; margin-bottom:2px; color:#fff; font-size:13px; }
.workout-profile-chart { min-width:0; }
.workout-profile-chart svg { display:block; width:100%; height:58px; overflow:visible; }
.workout-profile-legend { display:flex; justify-content:flex-end; gap:12px; color:var(--cinema-muted); font-size:10px; }
.profile-swatch { display:inline-block; width:14px; height:2px; margin:0 5px 3px 0; vertical-align:middle; }
.profile-swatch.primary { background:#58a6ff; }
.profile-swatch.secondary { background:#ff3859; }
.profile-swatch.terrain { background:#24c97a; }
.profile-grid { fill:none; stroke:rgba(255,255,255,.09); stroke-width:.35; vector-effect:non-scaling-stroke; }
.profile-line { fill:none; stroke-width:2; vector-effect:non-scaling-stroke; }
.profile-line.primary { stroke:#58a6ff; }
.profile-line.secondary { stroke:#ff3859; }
.profile-line.terrain { stroke:#24c97a; }

@media (max-width: 760px) {
  body[data-cinematic-ui] .global-page-container { padding-top:16px; }
  body.mobile-mode[data-cinematic-ui] .global-page-container {
    padding-top:calc(var(--mobile-header-height) + env(safe-area-inset-top) + 12px);
    padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 20px);
  }
  body[data-cinematic-ui] .section-panel { border-radius:14px; }
  body[data-cinematic-ui] .workout-item { padding:0; overflow:hidden; }
  body[data-cinematic-ui] .workout-meta-card { padding:12px; }
  .workout-profile-band { grid-template-columns:1fr; padding:8px; }
  .workout-profile-metrics .profile-primary-stat,
  .workout-profile-legend .profile-primary-stat,
  .workout-profile-chart .profile-line.primary { display:initial; }
  .workout-profile-metrics { gap:10px 14px; }
  .workout-profile-chart svg { height:38px; }
  .workout-profile-legend { justify-content:flex-start; }
  body[data-cinematic-ui] .button-row .btn,
  body[data-cinematic-ui] .favorite-toggle,
  body[data-cinematic-ui] .share-icon-link { min-height:44px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-cinematic-ui] *, body[data-cinematic-ui] *::before, body[data-cinematic-ui] *::after { scroll-behavior:auto !important; transition:none !important; }
}