.mirror { position: fixed; z-index: 8; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 38%, var(--card) 0%, var(--tile) 70%, var(--bg) 100%); color: var(--ink); }
.mirror video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); opacity: 0; }
.mirror.live video { opacity: 1; }
.mirror-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 72% 58% at 50% 40%, transparent 62%, color-mix(in srgb, var(--bg) 78%, transparent) 100%); }
.mirror-oval { position: absolute; left: 50%; top: 38%; width: min(58vw, 280px); aspect-ratio: 3 / 4; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--card) 70%, transparent); pointer-events: none; }
.mirror-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 10px) 14px 0; }
.mirror-close { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.mirror-close svg { width: 20px; height: 20px; }
.mirror-line { min-height: 36px; display: flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--card); color: var(--ink-2); font-size: 14px; box-shadow: var(--shadow); }
.mirror-tray { position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; padding: 20px var(--pad) calc(env(safe-area-inset-bottom) + 18px); border-radius: 30px 30px 0 0; background: var(--card); box-shadow: var(--shadow); }
.mirror-ask { font: 450 22px/1.2 var(--display); }
.mirror-tray .chips.wrap { margin-top: 12px; }
.mirror-tray .btn { width: 100%; margin-top: 16px; }
.mirror-lead { margin-top: 8px; font-size: 15.5px; color: var(--ink-2); }
.mirror-label { margin-top: 20px; font-size: 12.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.mirror-picks { margin-top: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.mirror-pick .check { flex: none; width: 44px; height: 44px; }
.mirror-pick[aria-checked="true"] .check i { background: var(--good); box-shadow: none; }
.mirror-pick[aria-checked="true"] .check svg { opacity: 1; }
.mirror-pick .d + .d { margin-top: 0; }
.mirror-skips { margin-top: 4px; }
.mirror-gaps { margin-top: 16px; }
.mirror-gap { font-size: 15.5px; color: var(--ink-2); }
.mirror-gaps .link { margin-top: 6px; min-height: 44px; }
.mirror-entry { display: flex; justify-content: flex-start; margin-top: 8px; }
.mirror-open svg { width: 20px; height: 20px; }
.mirror-today .row.done .t { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-2); }
.mirror-today .list { margin-top: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .mirror video { transition: opacity 0.4s ease; }
}