body.media-mode .main>.heading,body.media-mode .main>.workgrid,body.media-mode .main>.bottom,body.media-mode .main>.footnote{display:none}
.media-workspace{margin-bottom:20px}.media-workspace>.inner{padding-top:12px}.media-help{font-size:11px;color:var(--muted);margin:0 0 10px}.media-workspace-grid{display:grid;grid-template-columns:minmax(300px,.78fr) minmax(0,1.42fr);gap:16px;align-items:stretch;min-height:calc(100vh - 250px)}.media-library-pane,.media-view-pane{min-width:0;border:1px solid var(--line);border-radius:12px;background:#0d1512;overflow:hidden}.media-library-pane{display:flex;flex-direction:column;max-height:calc(100vh - 250px)}.media-library-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border-bottom:1px solid var(--line);flex-wrap:wrap}.media-tabs{display:flex;gap:4px;padding:3px;background:#080e0c;border-radius:9px}.media-tabs button{padding:7px 10px;border-radius:7px;background:transparent;color:var(--muted);font-size:11px}.media-tabs button.active{background:#29392f;color:#eaf7e9}.media-search-label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:10px}.media-search-label input{width:150px;max-width:35vw;padding:7px 9px;border-radius:7px;background:#080e0c;border:1px solid #35483c;color:var(--text);font-size:11px}.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;padding:10px;overflow:auto;align-content:start;min-height:0}.media-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#101816}.media-card.selected{border-color:var(--lime);box-shadow:0 0 0 1px #b5e36b33}.media-thumb{width:100%;height:100px;display:grid;place-items:center;overflow:hidden;background:#0b1412;position:relative}.media-thumb img{width:100%;height:100%;object-fit:cover}.media-video-badge{background:#16231f;color:var(--lime);padding:8px 12px;border-radius:20px;font-size:11px}.media-copy{padding:8px 9px 3px}.media-copy strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}.media-copy small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.media-card-actions{display:flex;gap:5px;padding:7px}.media-card-actions button{padding:7px 8px;border-radius:7px;background:#26372d;color:#eef4e8;font-size:10px}.media-card-actions .primary{background:var(--lime);color:#142016;font-weight:700}.media-card-actions .remove{margin-left:auto;background:transparent;color:#ffc6b8}.media-empty{grid-column:1/-1;padding:30px;text-align:center;border:1px dashed #35433c;border-radius:12px;color:var(--muted);font-size:12px}.media-view-pane{display:flex;flex-direction:column;padding:12px;gap:10px;background:#0b100e}.media-output-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.media-output-toolbar strong{font-size:12px}.media-output-toolbar label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:10px}.media-output-toolbar select,.media-controls select{background:#0b1412;border:1px solid #35483c;border-radius:7px;padding:7px;color:var(--text);font-size:10px}.media-preview{width:100%;flex:1;min-height:280px;aspect-ratio:16/9;display:grid;place-items:center;border:1px solid #26342d;border-radius:9px;background:#030605;overflow:hidden}.media-preview img,.media-preview video{display:block;width:100%;height:100%;object-fit:contain}.media-preview-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;color:#89948c;text-align:center;padding:20px}.media-preview-placeholder strong{color:#dbe6dd;font-size:14px}.media-preview-placeholder span{font-size:11px}.media-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;padding:10px;border:1px solid var(--line);border-radius:9px;background:#101816}.media-controls[hidden]{display:none}.media-controls strong{margin-right:auto;font-size:11px}.media-controls button{font-size:10px}.media-controls label{display:flex;gap:7px;align-items:center;font-size:10px;color:var(--muted)}#mediaVolume{width:82px}.media-controls .danger{color:#ffc6b8}#mediaPlane{display:none;position:fixed;inset:0;background:#000;z-index:1;align-items:center;justify-content:center;overflow:hidden}#mediaPlane.active{display:flex}#mediaPlane img,#mediaPlane video{width:100%;height:100%;object-fit:contain;background:#000}#mediaPlane video{outline:0}body.output-mode .output-view{position:relative;z-index:2;background:transparent}body.output-mode .output-view:has(#outputText:not(:empty)){pointer-events:none}body.output-mode #outputFullscreen{pointer-events:auto}body.output-mode.output-media #mediaPlane{z-index:2}body.output-mode.output-media .output-view{display:none!important}body.gfx-output #mediaPlane{z-index:0}body.gfx-output canvas{position:fixed;inset:0;z-index:2;width:100vw;height:100vh;object-fit:contain;pointer-events:none}body.gfx-output #mediaPlane.active{display:flex}body.output-mode.output-media .output-view{background:transparent}
@media(max-width:900px){.media-workspace-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);min-height:calc(100vh - 260px)}.media-library-pane{max-height:calc(100vh - 260px)}.media-grid{grid-template-columns:repeat(auto-fill,minmax(125px,1fr))}.media-controls label{font-size:9px}}
@media(max-width:680px){.media-workspace-grid{display:flex;flex-direction:column;min-height:0}.media-library-pane{max-height:44vh;min-height:210px}.media-view-pane{min-height:45vh}.media-preview{min-height:220px}.media-library-toolbar{align-items:flex-start}.media-search-label{width:100%}.media-search-label input{flex:1;max-width:none}.media-card-actions{flex-wrap:wrap}.media-card-actions .remove{margin-left:0}.media-controls strong{width:100%}.media-output-toolbar{align-items:flex-start;flex-direction:column}}
 .media-document-badge{background:#25352b;border:1px solid #4a614d;color:#d7f5aa;padding:8px 12px;border-radius:20px;font-size:11px;font-weight:800;letter-spacing:.7px}.document-nav{display:flex;align-items:center;gap:7px}.document-nav[hidden]{display:none}.document-nav span{font-size:10px;color:var(--muted);white-space:nowrap}.document-nav button:disabled{opacity:.45;cursor:not-allowed}
/* Projector media fit: keep slide content intact and fill mismatched aspect ratios softly. */
#mediaPlane{isolation:isolate;background:#000}
#mediaPlane #mediaBackdrop{position:absolute;inset:-2%;z-index:-1;background-position:center;background-size:cover;filter:blur(28px) brightness(.48);transform:scale(1.04)}
#mediaPlane.media-cover #mediaBackdrop{display:none}
#mediaPlane img,#mediaPlane video{position:relative;z-index:1}
/* Strict contain sizing prevents SVG/PPT slides and images from extending beyond the projector viewport. */
#mediaPlane img,#mediaPlane video{width:auto;height:auto;max-width:100vw;max-height:100vh;object-fit:contain;background:transparent}
#mediaPlane.media-cover img,#mediaPlane.media-cover video{width:100vw;height:100vh;max-width:none;max-height:none;object-fit:cover}
.media-preview img,.media-preview video{max-width:100%;max-height:100%;object-fit:contain}
/* Center the contained slide inside the true viewport, including PPT SVGs with unusual intrinsic sizing. */
#mediaPlane.active{display:block}
#mediaPlane img,#mediaPlane video{position:absolute;inset:0;margin:auto;object-position:center center}
#mediaPlane.media-cover img,#mediaPlane.media-cover video{margin:0}
.media-add-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
#operatorPreviewPanel>.media-controls{margin:10px 0 0;justify-content:center}
#operatorPreviewPanel>.media-controls>strong{flex-basis:100%;text-align:center;margin:0}
#operatorPreviewPanel>.media-controls .document-nav{order:1}
#operatorPreviewPanel>.media-controls #mediaProject{order:2}
#operatorPreviewPanel>.media-controls #mediaPlay,#operatorPreviewPanel>.media-controls #mediaPause{order:3}
#operatorPreviewPanel>.media-controls label{font-size:10px}
.media-color-source{display:flex;align-items:end;gap:10px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--line);background:#111a16}.media-color-source>div{flex:1 1 220px;min-width:180px}.media-color-source strong,.media-color-source small{display:block}.media-color-source strong{font-size:11px}.media-color-source small{margin-top:4px;color:var(--muted);font-size:10px;line-height:1.4}.media-color-source label{display:grid;gap:5px;color:var(--muted);font-size:10px}.media-color-source label input[type=color]{width:58px;height:34px;padding:2px;background:#09110d;border:1px solid #35483c;border-radius:7px}.media-color-source .media-color-text{min-width:min(220px,100%);flex:1 1 170px}.media-color-source .media-color-text input{padding:8px;background:#080e0c;border:1px solid #35483c;border-radius:7px;color:var(--text);font-size:11px}
.media-solid-preview{width:100%;height:100%;min-height:260px;display:grid;place-items:center;padding:24px;color:white;text-align:center;font-size:clamp(18px,3vw,42px);font-weight:700;text-shadow:0 2px 5px #000,0 0 12px #000;overflow-wrap:anywhere}
.media-output-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.media-output-toolbar>.media-destinations{flex:1 1 320px}

.media-thumb .media-document-badge{position:absolute;z-index:1;top:7px;left:7px;box-shadow:0 2px 8px #0008}
/* Keep complete cards inside the scrolling library, even with many pictures. */
.media-grid{grid-auto-rows:max-content;align-items:start}
.media-card{display:flex;flex-direction:column;height:auto;min-height:max-content}
.media-thumb,.media-copy,.media-card-actions{flex-shrink:0}
.media-card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.media-card-actions button{min-width:0;min-height:34px;white-space:normal}
.media-card-actions .remove{grid-column:1/-1;margin-left:0;border:1px solid #63443d;background:#251b18}
