*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;background:#525659;color:#fff}.app{display:flex;flex-direction:column;height:100%}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:#1f2937;border-bottom:1px solid #111827;flex:0 0 auto}.toolbar .title{font-size:14px;font-weight:700;color:#e5e7eb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer;background:#06b6d4;color:#fff}.btn:disabled{opacity:.6;cursor:default}.preview{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch}.preview iframe{display:block;width:100%;border:none;background:transparent}.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;color:#e5e7eb}.spinner{width:28px;height:28px;border:3px solid rgba(255,255,255,.25);border-top-color:#06b6d4;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.muted{color:#9ca3af;font-size:13px;max-width:420px;line-height:1.5}.mediabar{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:8px 12px;background:#111827;border-bottom:1px solid #0b0f19;overflow:hidden}.mediabar-label{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#9ca3af}.mediabar-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.mediatile{flex:0 0 auto;width:56px;height:56px;border-radius:8px;border:1px solid #374151;background:#1f2937;padding:0;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center}.mediatile:hover{border-color:#06b6d4}.mediatile img{width:100%;height:100%;object-fit:cover;display:block}.mediaicon{font-size:22px;line-height:1}.mediaicon.video{color:#f87171}.mediaicon.audio{color:#34d399}.mediamodal{position:fixed;inset:0;z-index:1000;background:#000000e0;display:flex;align-items:center;justify-content:center;padding:24px}.mediamodal-close{position:absolute;top:14px;right:18px;width:40px;height:40px;border-radius:50%;border:none;background:#ffffff1f;color:#fff;font-size:18px;cursor:pointer}.mediamodal-content{max-width:92vw;max-height:88vh;display:flex;align-items:center;justify-content:center}.mediamodal-content img,.mediamodal-content video{max-width:92vw;max-height:88vh;border-radius:8px;background:#000}.mediamodal-content audio{width:min(80vw,480px)}