:root{color-scheme:dark;--bg: #070b14;--panel: #101826;--border: rgba(148, 163, 184, .18);--text: #e2e8f0;--muted: #94a3b8;--accent: #14b8a6;--ok: #10b981;--bad: #f43f5e;font-family:Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(1200px 600px at 10% -10%,rgba(20,184,166,.18),transparent 55%),radial-gradient(900px 500px at 100% 0%,rgba(59,130,246,.14),transparent 50%),var(--bg);color:var(--text)}body{min-height:100dvh}#app{min-height:100dvh;display:flex;flex-direction:column;padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom));gap:12px;max-width:560px;margin:0 auto}.topbar{display:grid;gap:8px}.brand{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.brand h1{margin:0;font-size:1.15rem;letter-spacing:-.02em}.brand span{color:var(--muted);font-size:.75rem}label{font-size:.8rem;color:var(--muted)}select{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:12px;padding:14px 16px;font-size:1rem;font-weight:600}.viewer{position:relative;flex:1;min-height:320px;border-radius:20px;overflow:hidden;border:1px solid var(--border);background:#000}#reader{width:100%;height:100%;min-height:320px}#reader video{object-fit:cover!important}.banner{position:absolute;left:12px;right:12px;top:12px;z-index:5;border-radius:16px;padding:14px 16px;text-align:center;font-weight:800;letter-spacing:.01em;box-shadow:0 18px 40px #00000059;transform:translateY(-120%);opacity:0;transition:transform .25s ease,opacity .25s ease;pointer-events:none}.banner.visible{transform:translateY(0);opacity:1}.banner.granted{background:#10b981f2;color:#042f2e}.banner.denied{background:#f43f5ef2;color:#fff1f2}.banner .sub{display:block;margin-top:4px;font-weight:600;font-size:.9rem;opacity:.95}.status-line{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:.8rem}.api-hint{word-break:break-all;color:var(--muted);font-size:.7rem}.controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}button{border:0;border-radius:12px;padding:14px 12px;font-weight:700;font-size:.95rem;cursor:pointer}button.primary{background:var(--accent);color:#042f2e}button.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}button:disabled{opacity:.55;cursor:not-allowed}