@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap");

:root { --bg:#10141c; --surface:#171d27; --surface-2:#1d2531; --line:#283241; --text:#f5f7fb; --muted:#8290a4; --orange:#ff681d; --orange-2:#ff8a4d; --cyan:#46c6f1; --green:#4bd69b; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; color:var(--text); background:#0b0f15; font-family:Inter,system-ui,sans-serif; }
button,input { font:inherit; }
button { border:0; cursor:pointer; }
.app-shell { width:min(100%,460px); min-height:100vh; min-height:100dvh; margin:auto; position:relative; overflow:hidden; display:flex; flex-direction:column; background:var(--bg); box-shadow:0 0 80px #0008; }
.topbar { height:70px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:#121720cc; backdrop-filter:blur(15px); }
.brand { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:linear-gradient(145deg,var(--orange-2),var(--orange)); box-shadow:0 6px 18px #ff681d33; font-size:18px; font-weight:800; }
.brand>span:last-child { display:flex; align-items:baseline; gap:4px; letter-spacing:.04em; }.brand strong{font-size:14px}.brand small{color:var(--orange);font-size:8px;font-weight:800;letter-spacing:.14em}
.topbar-meta { display:flex; align-items:center; gap:7px; color:#7e899a; font:700 8px/1 "Space Mono",monospace; letter-spacing:.14em; }.status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.welcome-view { flex:1; position:relative; padding:54px 25px 24px; text-align:center; }
.hero-glow { width:250px;height:250px;position:absolute;top:-80px;left:50%;transform:translateX(-50%);border-radius:50%;background:#ff681d10;filter:blur(3px);pointer-events:none; }
.store-icon { width:70px;height:70px;margin:0 auto 22px;padding:13px;position:relative;border:1px solid #ff7a352f;border-radius:22px;background:linear-gradient(145deg,#26212a,#161b24);box-shadow:0 18px 45px #0007,0 0 40px #ff681d10; }.store-icon svg{width:100%;height:100%}
.eyebrow,.form-heading p { margin:0 0 8px;color:var(--orange);font:700 9px/1 "Space Mono",monospace;letter-spacing:.22em; }
h1 { margin:0;font-size:33px;line-height:1.12;letter-spacing:-.04em; }.greeting{margin:11px 0 37px;color:var(--muted);font-size:12px}.greeting strong{color:#d8dfeb;font-weight:600}
.divider { display:flex;align-items:center;gap:12px;margin-bottom:17px; }.divider span{height:1px;flex:1;background:var(--line)}.divider b{color:#637086;font:700 8px/1 "Space Mono",monospace;letter-spacing:.13em;white-space:nowrap}
.actions { display:grid;gap:11px; }.action-card{width:100%;min-height:76px;padding:13px 15px;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;border:1px solid var(--line);border-radius:13px;color:var(--text);background:var(--surface);text-align:left;transition:.2s}.action-card:hover{border-color:#3c485b;background:var(--surface-2);transform:translateY(-1px)}.action-card.primary{border-color:#ff7c3c55;background:linear-gradient(110deg,#ff681d,#ff7d3b);box-shadow:0 10px 28px #ff681d24}.action-card.primary:hover{border-color:#ffb18a;background:linear-gradient(110deg,#f85c10,#ff8449)}
.action-icon { width:42px;height:42px;display:grid;place-items:center;border-radius:10px;color:var(--cyan);background:#273340;font-size:22px;font-weight:400}.primary .action-icon{color:white;background:#ffffff20}.link-icon{font-size:18px}.action-copy{min-width:0;display:grid;gap:5px}.action-copy strong{font-size:13px}.action-copy small{overflow:hidden;color:#8795a8;font-size:9px;white-space:nowrap;text-overflow:ellipsis}.primary small{color:#fffbd0}.chevron{color:#738096;font-size:25px;font-weight:300}.primary .chevron{color:white}
.text-action { padding:15px;color:var(--cyan);background:transparent;font-size:11px;font-weight:700;letter-spacing:.02em}.text-action span{margin-left:6px}.text-action:hover{color:#8de1fc}
.trust-note{margin:24px auto 0;display:flex;justify-content:center;align-items:center;gap:8px;color:#59667a}.trust-note span{width:17px;height:17px;display:grid;place-items:center;border:1px solid #354154;border-radius:50%;font-size:9px}.trust-note p{margin:0;font-size:8px}
.form-view { flex:1;padding:26px 25px 34px;animation:slideIn .25s ease both}.form-view[hidden],.welcome-view[hidden]{display:none}@keyframes slideIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.back-button{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;color:#aeb8c6;background:var(--surface);font-size:17px}.back-button:hover{color:white;border-color:#445168}.form-heading{margin:31px 0 29px;text-align:center}.form-heading>span{width:58px;height:58px;margin:0 auto 20px;display:grid;place-items:center;border-radius:18px;color:var(--orange);background:#ff681d15;font-size:26px}.form-heading h1{font-size:27px}.form-heading small{display:block;margin-top:9px;color:var(--muted);font-size:11px}
form{display:grid;gap:16px}label{display:grid;gap:7px;color:#a9b3c2;font-size:10px;font-weight:700;letter-spacing:.03em}input{width:100%;height:49px;padding:0 14px;border:1px solid var(--line);border-radius:10px;outline:0;color:white;background:var(--surface);font-size:12px;transition:.2s}input::placeholder{color:#59667a}input:focus{border-color:var(--orange);box-shadow:0 0 0 3px #ff681d17}.password-wrap{position:relative}.password-wrap input{padding-right:48px}.password-wrap button{width:45px;position:absolute;top:1px;right:1px;bottom:1px;color:#67758a;background:transparent}.submit-button{height:52px;margin-top:5px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-radius:10px;color:white;background:linear-gradient(110deg,var(--orange),#ff8043);font-size:12px;font-weight:800;box-shadow:0 10px 25px #ff681d22}.submit-button:hover{filter:brightness(1.07)}.demo-note{margin:18px 8px 0;color:#647187;font-size:8px;line-height:1.6;text-align:center}
footer { min-height:47px;padding:0 20px;display:flex;align-items:center;gap:7px;border-top:1px solid var(--line);color:#4e5b6e;font:700 7px/1 "Space Mono",monospace;letter-spacing:.12em}footer i{height:1px;flex:1;background:#252e3b}.shield{color:var(--green)}
.toast{position:fixed;z-index:10;left:50%;bottom:65px;width:min(calc(100% - 40px),400px);padding:13px 16px;border:1px solid #3c4c60;border-radius:10px;color:#d9e2ee;background:#202936f2;box-shadow:0 14px 35px #0007;font-size:11px;text-align:center;opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-height:720px){.welcome-view{padding-top:28px}.store-icon{margin-bottom:15px}.greeting{margin-bottom:22px}.trust-note{margin-top:12px}}
@media (min-width:461px){body{padding:20px}.app-shell{min-height:calc(100vh - 40px);min-height:calc(100dvh - 40px);border:1px solid #2a3340;border-radius:18px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}