.fixed-materials { display: grid; gap: 20px; padding: 24px; box-sizing: border-box; }
.fixed-materials h2, .fixed-materials h3 { margin: 0; }
.fixed-materials .fixed-toolbar, .fixed-materials .fixed-groups { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fixed-materials .fixed-toolbar h2 { margin-right: auto; }
.fixed-materials .fixed-metadata { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fixed-materials label { display: grid; gap: 8px; }
.fixed-materials input { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--line, #343d32); border-radius: 12px; color: inherit; background: transparent; }
.fixed-materials button[aria-pressed="true"] { background: var(--lime, #b5eb6b); color: #15200e; }
.fixed-materials .fixed-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 12px; align-items: start; }
.fixed-materials .fixed-shot { padding: 16px; border: 1px solid var(--line, #343d32); border-radius: 14px; display: grid; gap: 10px; align-content: start; }
.fixed-materials .fixed-shot[data-selected="true"] { border-color: var(--lime, #b5eb6b); }
.fixed-materials .fixed-action { margin: 0; opacity: .8; line-height: 1.6; }
.fixed-materials video { display: block; width: 100%; max-height: 520px; background: #090d0c; border-radius: 14px; }
.fixed-materials [hidden] { display: none !important; }
.fixed-materials .fixed-status { min-height: 1.5em; margin: 0; }
.fixed-materials .fixed-pending { display: grid; gap: 10px; }
.fixed-materials output { font-variant-numeric: tabular-nums; font-size: 24px; }
[data-active-panel="fixed"] .content-area > .topbar,
[data-active-panel="fixed"] #topic-episodes,
[data-active-panel="fixed"] #upload-progress-panel { display: none !important; }
.fixed-materials .fixed-capture { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 20px; align-items: start; padding: 16px; border: 1px solid var(--line, #343d32); border-radius: 18px; }
.fixed-materials .fixed-monitor { position: relative; aspect-ratio: 16 / 9; min-height: 240px; overflow: hidden; border-radius: 14px; background: #1b2424; }
.fixed-materials .fixed-monitor video { width: 100%; height: 100%; max-height: none; object-fit: contain; position: absolute; inset: 0; }
.fixed-materials .fixed-monitor-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 32px; color: #cbd4d0; font-size: 22px; text-align: center; }
.fixed-materials .fixed-phase { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 24px; background: #101813e6; color: #ebf0eb; font-size: 15px; }
.fixed-materials .fixed-phase::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #89958c; }
.fixed-materials[data-capture-phase="preview"] .fixed-phase::before { background: #b5eb6b; }
.fixed-materials[data-capture-phase="recording"] .fixed-phase::before { background: #ff5757; }
.fixed-materials[data-capture-phase="recording"] .fixed-monitor { outline: 2px solid #ff5757; }
.fixed-materials[data-capture-phase="error"] .fixed-phase { color: #ffc7ba; }
.fixed-materials .fixed-countdown { position: absolute; inset: 0; display: grid; place-items: center; background: #0005; color: white; font-size: clamp(72px, 10vw, 140px); font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px #000; }
.fixed-materials .fixed-capture-controls { display: grid; gap: 10px; }
.fixed-materials .fixed-capture-controls h3 { line-height: 1.5; }
.fixed-materials .fixed-remaining { font-size: 52px; line-height: 1.1; font-weight: 750; color: var(--lime, #b5eb6b); }
.fixed-materials .fixed-elapsed, .fixed-materials .fixed-preparation { font-size: 14px; opacity: .8; }
.fixed-materials .fixed-elapsed output { font-size: 18px; }
@media (max-width: 1050px) { .fixed-materials .fixed-capture { grid-template-columns: 1fr; } .fixed-materials .fixed-capture-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; } .fixed-materials .fixed-capture-controls h3 { grid-column: 1 / -1; } }
@media (max-width: 700px) { .fixed-materials .fixed-metadata { grid-template-columns: 1fr; } }