/* Workout builder */
.workout-builder-view .form-card { margin: 0 var(--edge) 12px; }
.builder-save-row { padding: 8px var(--edge) calc(24px + env(safe-area-inset-bottom,0px)); }
.builder-save-row .button { width: 100%; min-height: 58px; font-size: 1rem; font-weight: 950; border-radius: 18px; }
.builder-remove-btn { color: var(--red, #ff6b6b); font-size: 1.3rem; line-height: 1; padding: 2px 10px; border: none; background: none; cursor: pointer; border-radius: 8px; touch-action: manipulation; }
.builder-remove-btn:active { opacity: .6; }
.excard-notes { padding: 0 14px 12px; font-size: .75rem; color: var(--muted); margin: 0; }
/* My Workouts accordion group */
.rg-custom { border-color: rgba(155,247,255,.4); background: linear-gradient(135deg,rgba(155,247,255,.08),rgba(5,5,6,0) 70%); }
.rg-custom .rg-label { color: #9bf7ff; }

/* Final interaction and layout refinements. */
:root { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
.time-display { cursor: pointer; font-variant-numeric: tabular-nums; }
@media (pointer:fine) { .number-wheel-sheet.time-picker.open { display:flex !important; } }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .48; }
.view.active > :first-child { animation: finalViewIn .3s cubic-bezier(.2,.85,.2,1) both; }
.card, .hero-card, .metric-card, .macro-card { transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
@media (hover:hover) { .card:hover, .metric-card:hover, .macro-card:hover { border-color: rgba(155,247,255,.26); } .button:hover, .quick-actions button:hover, .path-card:hover { transform: translateY(-1px); } }
.caption { letter-spacing: .01em; }
.topbar { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.bottom-nav { box-shadow: 0 12px 36px rgba(0,0,0,.45); }
.empty-state { border: 1px dashed var(--line); border-radius: 16px; }
.toast { border: 1px solid rgba(155,247,255,.28); box-shadow: 0 12px 36px rgba(0,0,0,.45); }
@keyframes finalViewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width:480px) { .topbar { padding-top: max(15px, env(safe-area-inset-top)); } .hero-card { border-radius: 20px; } .section-heading { gap: 10px; } .section-heading h2 { line-height: 1.15; } }
@media (prefers-reduced-motion:reduce) { .view.active > :first-child { animation: none; } .card, .hero-card, .metric-card, .macro-card { transition: none; } }

/* Daylight has a complete light surface, including components previously
   styled by the OLED layer. */
html[data-theme="light"], html[data-theme="light"] body { background:#edf4f9; color:#102039; }
[data-theme="light"] body { background:radial-gradient(ellipse 62% 52% at 10% -8%,rgba(58,205,255,.21),transparent 66%),radial-gradient(ellipse 48% 42% at 94% 13%,rgba(86,224,159,.15),transparent 66%),#edf4f9; }
[data-theme="light"] .hero-card { background:linear-gradient(130deg,rgba(76,210,255,.2),rgba(101,224,170,.13) 54%,rgba(255,255,255,.92)); border-color:rgba(30,109,158,.16); }
[data-theme="light"] .hero-card::after { background:linear-gradient(90deg,transparent,rgba(32,144,206,.36),transparent); }
[data-theme="light"] .metric-card,[data-theme="light"] .macro-card,[data-theme="light"] .card,[data-theme="light"] .workout-overview { background:rgba(255,255,255,.88); box-shadow:0 12px 34px rgba(33,76,109,.12); }
[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea,[data-theme="light"] .number-wheel-panel { background:#fff; color:#102039; border-color:rgba(15,56,86,.16); }
[data-theme="light"] .score-ring > div,[data-theme="light"] .wheel-window { background:#edf6fb; }
[data-theme="light"] .wheel-window::before { background:linear-gradient(#edf6fb,rgba(237,246,251,0)); } [data-theme="light"] .wheel-window::after { background:linear-gradient(rgba(237,246,251,0),#edf6fb); }
[data-theme="light"] .wheel-option { color:#71849a; } [data-theme="light"] .wheel-option.selected { color:#102039; }
[data-theme="light"] .bottom-nav { background:rgba(249,253,255,.92); border-color:rgba(15,56,86,.12); box-shadow:0 12px 36px rgba(33,76,109,.16); }
[data-theme="light"] .quick-actions button,[data-theme="light"] .habit,[data-theme="light"] .list-item,[data-theme="light"] .chip,[data-theme="light"] .preset-row button { background:rgba(255,255,255,.82); border-color:rgba(15,56,86,.14); color:#102039; }
[data-theme="light"] .progress,[data-theme="light"] .macro-bar { background:rgba(15,56,86,.12); }
[data-theme="light"] .toast,[data-theme="light"] dialog { background:#fff; color:#102039; border-color:rgba(15,56,86,.16); box-shadow:0 12px 36px rgba(33,76,109,.16); }
[data-theme="light"] .number-wheel-sheet { background:rgba(19,43,67,.3); } [data-theme="light"] .wheel-highlight { background:rgba(49,216,255,.2); border-color:rgba(35,136,188,.34); }
[data-theme="light"] .launch-screen { background:linear-gradient(160deg,#e4f5ff,#f8fcff); } [data-theme="light"] .launch-mark { background:linear-gradient(145deg,#fff,#dceefa); border-color:rgba(24,91,136,.2); box-shadow:0 22px 60px rgba(42,111,156,.18); }
[data-theme="light"] body::before { background:radial-gradient(circle at 28% 24%,rgba(60,170,255,.14),transparent 24%),radial-gradient(circle at 74% 68%,rgba(71,210,158,.1),transparent 20%); }

/* Animated backgrounds echo the layered, orbiting movement of the PIN gate. */
[data-background="orbits"] body { background:radial-gradient(circle at 50% 50%,rgba(49,216,255,.1),transparent 30%),var(--bg); }
[data-background="orbits"] body::before { inset:-26vmax; opacity:.86; filter:none; background:repeating-radial-gradient(ellipse at 50% 50%,transparent 0 8%,rgba(155,247,255,.16) 8.15% 8.35%,transparent 8.55% 15%),repeating-conic-gradient(from 30deg,transparent 0 11deg,rgba(138,255,191,.1) 12deg 13deg,transparent 14deg 30deg); animation:fitnessOrbit 24s linear infinite; }
[data-background="orbits"] body::after { content:""; position:fixed; inset:-14vmax; z-index:0; pointer-events:none; border:1px solid rgba(155,247,255,.15); border-radius:48%; box-shadow:0 0 0 11vmax rgba(138,255,191,.025),0 0 0 22vmax rgba(155,247,255,.02); animation:fitnessOrbitReverse 17s linear infinite; }
[data-background="particles"] body { background:radial-gradient(ellipse at 50% 0,rgba(49,216,255,.1),transparent 58%),var(--bg); }
[data-background="particles"] body::before { inset:-10vmax; opacity:.9; filter:none; background:radial-gradient(circle at 18% 26%,var(--cyan) 0 2px,transparent 3px),radial-gradient(circle at 72% 18%,var(--green) 0 2px,transparent 3px),radial-gradient(circle at 84% 64%,var(--cyan) 0 1px,transparent 2px),radial-gradient(circle at 35% 78%,var(--green) 0 1px,transparent 2px),radial-gradient(circle at 51% 43%,var(--cyan) 0 1px,transparent 2px); background-size:170px 170px,230px 230px,190px 190px,270px 270px,150px 150px; animation:fitnessParticles 18s ease-in-out infinite alternate; }
[data-background="particles"] body::after { content:""; position:fixed; inset:-12vmax; z-index:0; pointer-events:none; opacity:.38; background:radial-gradient(circle at 80% 30%,rgba(155,247,255,.7) 0 1px,transparent 2px),radial-gradient(circle at 25% 60%,rgba(138,255,191,.65) 0 1px,transparent 2px); background-size:115px 115px,165px 165px; animation:fitnessParticlesReverse 23s linear infinite; }
[data-background="waves"] body { background:linear-gradient(150deg,rgba(49,216,255,.12),transparent 38%),var(--bg); }
[data-background="waves"] body::before { inset:-18vmax; opacity:.72; filter:none; background:repeating-radial-gradient(ellipse at 12% 105%,transparent 0 7%,rgba(155,247,255,.13) 7.3% 7.55%,transparent 7.8% 14%),repeating-radial-gradient(ellipse at 100% -5%,transparent 0 8%,rgba(138,255,191,.1) 8.3% 8.5%,transparent 8.8% 16%); animation:fitnessWaves 20s ease-in-out infinite alternate; }
@keyframes fitnessOrbit { to { transform:rotate(360deg) scale(1.08); } } @keyframes fitnessOrbitReverse { to { transform:rotate(-360deg) scale(.92); } } @keyframes fitnessParticles { to { transform:translate3d(5%, -4%, 0) scale(1.08); } } @keyframes fitnessParticlesReverse { to { transform:translate3d(-6%, 5%, 0) rotate(14deg); } } @keyframes fitnessWaves { to { transform:translate3d(3%, -2%, 0) rotate(5deg) scale(1.06); } }
[data-motion="reduced"] body::before,[data-motion="reduced"] body::after { animation:none!important; }