:root{--bg:#0f1411;--card:#171e19;--line:#2a352d;--text:#e8efe9;--muted:#8fa294;--accent:#d9a441;--bad:#e06c5f}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:radial-gradient(ellipse at top,#1b261e 0%,var(--bg) 60%);color:var(--text);
font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:flex;align-items:center;justify-content:center;padding:16px}
.card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px 28px;box-shadow:0 20px 60px #0008}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.brand svg{width:40px;height:40px}
.brand h1{font-size:24px;margin:0;letter-spacing:.5px}.brand h1 span{color:var(--accent)}
.sub{color:var(--muted);font-size:14px;margin:-16px 0 22px}
label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px}
input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:#0f1411;color:var(--text);font-size:16px}
input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
button{width:100%;margin-top:22px;padding:12px;border:0;border-radius:10px;background:var(--accent);color:#1a1405;font-weight:700;font-size:16px;cursor:pointer}
.q{font-size:28px;font-weight:700;text-align:center;margin:8px 0 4px;letter-spacing:1px}
.err{background:#e06c5f1a;border:1px solid #e06c5f55;color:var(--bad);padding:10px 12px;border-radius:10px;font-size:14px;margin-bottom:8px}
.app{position:fixed;inset:0;display:flex;flex-direction:column;padding:0}
.bar{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--card);border-bottom:1px solid var(--line)}
.bar b span{color:var(--accent)}.bar form{margin:0}.bar button{margin:0;width:auto;padding:6px 14px;font-size:14px}
iframe{flex:1;border:0;width:100%;background:#000}