:root{color-scheme:dark;--bg:#0c1421;--panel:#19283a;--text:#f3f6fb;--muted:#b5c3d3;--accent:#3b82f6}*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}#app{min-height:100%;height:100dvh;display:flex;flex-direction:column}#toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 18px;background:var(--panel);flex-wrap:wrap}.brand{display:flex;align-items:center;gap:10px}.brandmark{display:grid;place-items:center;background:#306ce8;border-radius:9px;width:43px;height:43px;font-weight:800}.brand strong,.brand small{display:block}.brand small{font-size:12px;color:var(--muted)}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.actions button,.actions select{border:1px solid #43546b;background:#24374d;color:white;border-radius:8px;padding:9px 12px;font:inherit;cursor:pointer}.actions .primary{background:#2563eb;border-color:#2563eb}.actions button:hover{filter:brightness(1.18)}.actions label{font-size:13px;color:var(--muted)}.loop{display:flex;align-items:center;gap:4px;padding:0 5px}#stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:12px;background:#101720;overflow:hidden}#page{max-width:100%;max-height:100%;object-fit:contain;background:white;box-shadow:0 8px 40px #0006}#native{width:100%;height:100%;border:0;background:white}#loading,#error,#empty{text-align:center;max-width:650px;padding:28px;color:var(--muted)}#error{color:#ffb9b9}#status{background:var(--panel);padding:9px 17px 12px}.meta{display:flex;gap:20px;justify-content:space-between;align-items:center;font-size:13px;color:#dae3ef}.meta span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}#progress{height:4px;margin-top:9px;border-radius:6px;background:#34445a;overflow:hidden}#progressbar{height:100%;width:0;background:#60a5fa;transition:width .12s linear}.hint{color:#92a4b9;text-align:center;font-size:11px;padding-top:7px}[hidden]{display:none!important}:fullscreen #app{height:100vh}@media(max-width:740px){#toolbar{gap:8px}.brand small,.actions button span,.hint{display:none}.actions{gap:5px}.actions button,.actions select{padding:8px}.meta{gap:7px;font-size:11px}#stage{padding:4px}}