:root{--bg: #0f1115;--panel: #1a1d24;--border: #2a2f3a;--text: #e6e8ee;--muted: #8b93a3;--accent: #4f8cff;--ok: #3ddc84;--warn: #ffb454;--err: #ff5c5c}*{box-sizing:border-box}html,body{margin:0;height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column}#app{display:flex;flex-direction:column;height:100vh}.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border)}.brand{font-weight:700;font-size:15px}.session{margin-left:auto;font-size:12px;color:var(--muted)}.badge{font-size:11px;padding:3px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted);background:var(--bg)}.badge.ok{color:var(--ok);border-color:var(--ok)}.badge.warn{color:var(--warn);border-color:var(--warn)}.badge.err{color:var(--err);border-color:var(--err)}#stage{flex:1;position:relative;min-height:0}.loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px}.loading h2{margin:12px 0 0;font-size:18px}.muted{color:var(--muted);font-size:13px;max-width:480px}.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.timings{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-top:12px}.timings b{color:var(--text)}.preview{position:absolute;top:0;right:0;bottom:0;left:0}.preview iframe{width:100%;height:100%;border:0;background:#fff}.error{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px}.error h2{color:var(--err);margin:0}.report-btn{position:absolute;bottom:20px;right:20px;z-index:20;display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:1px solid var(--accent);background:#0f1115d9;color:#fff;padding:10px 16px;border-radius:999px;font-size:13px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 16px #0006;transition:transform .15s,background .2s}.report-btn:hover{transform:translateY(-2px);background:#4f8cff4d}.report-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:15;cursor:crosshair;background:#0f111540;display:flex;align-items:center;justify-content:center}.report-overlay .crosshair{position:absolute;width:40px;height:40px;margin-left:-20px;margin-top:-20px;border:2px solid var(--accent);border-radius:50%;pointer-events:none;box-shadow:0 0 0 1px #ffffff4d}.report-overlay .overlay-hint{position:absolute;bottom:24px;background:#0f1115e6;border:1px solid var(--accent);color:#fff;padding:8px 16px;border-radius:999px;font-size:14px;pointer-events:none}.report-modal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;width:min(420px,90vw);background:var(--panel);border:1px solid var(--accent);border-radius:12px;padding:20px;box-shadow:0 20px 60px #0009;animation:pop .15s ease-out}@keyframes pop{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.report-modal h3{margin:0 0 8px;font-size:18px}.report-modal .coords{color:var(--muted);font-size:12px;margin:0 0 12px}.report-modal textarea{width:100%;box-sizing:border-box;resize:vertical;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px;font-family:inherit;font-size:14px;outline:none}.report-modal textarea:focus{border-color:var(--accent)}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}.modal-actions button{border:none;border-radius:8px;padding:9px 16px;font-size:14px;cursor:pointer}.modal-actions .ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}.modal-actions .primary{background:var(--accent);color:#fff}.hidden{display:none!important}