.app-shell { max-width: 1200px; }
.settings-panel { max-width: 720px; background: #f7fafc; border: 1px solid var(--ojt-border); border-radius: .75rem; }
.privacy-note { background: #eaf6ef; border: 1px solid #b9dfc8; border-radius: .5rem; }
.video-preview { display: block; width: 100%; max-height: 65vh; background: #111827; border-radius: .75rem; object-fit: contain; }
.recording-dot { display: inline-block; width: .8rem; height: .8rem; margin-right: .55rem; background: #dc3545; border: 2px solid #8f1420; border-radius: 50%; }
.timer { font-size: 1.5rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.countdown-display { color: var(--ojt-accent); font-size: clamp(4rem, 14vw, 8rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.recording-details dd { margin-bottom: .5rem; }
.supporting-content { max-width: none; }
.supporting-section { position: relative; z-index: 0; max-width: 960px; padding: 4.5rem 0; margin: 0 auto; }
.supporting-section::before { position: absolute; z-index: -1; inset: 0 auto 0 50%; width: 100vw; background: var(--ojt-page); content: ""; transform: translateX(-50%); }
.supporting-section:nth-child(odd)::before { background: #fff; border-top: 1px solid var(--ojt-border); border-bottom: 1px solid var(--ojt-border); }
@media (max-width: 767.98px) { .supporting-section { padding: 3.5rem 0; } .video-preview { max-height: 55vh; } }
@media (prefers-reduced-motion: reduce) { .countdown-display, .recording-dot { animation: none; } }