*{box-sizing:border-box}
:root{--ink:#101a35;--muted:#6c7897;--blue:#365bea;--blue2:#2f4fd0;--line:#e4e9f3;--green:#16b970;--success:#eafaf1;--danger:#fff0f0}
html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink)}
body{min-height:100vh;background:radial-gradient(circle at 50% 0%,rgba(80,114,255,.12),transparent 32%),linear-gradient(180deg,#fbfdff 0%,#f4f8ff 100%)}
.hidden-app{display:none}
.access-gate{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 15%,rgba(72,104,246,.18),transparent 34%),linear-gradient(180deg,#f8fbff,#eef4ff)}
.access-card{width:min(420px,100%);background:#fff;border:1px solid var(--line);border-radius:24px;padding:36px;box-shadow:0 24px 70px rgba(43,64,120,.18);text-align:center}
.lock-badge{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;background:#eef2ff;font-size:30px}
.access-card h2{margin:0 0 9px;font-size:28px}.access-card p{margin:0 0 24px;color:var(--muted)}
#accessForm{display:flex;flex-direction:column;gap:12px}
#accessInput{height:52px;border:1px solid #ccd5e7;border-radius:12px;padding:0 15px;font-size:16px;outline:none}
#accessInput:focus{border-color:#7690f7;box-shadow:0 0 0 4px rgba(54,91,234,.09)}
#accessBtn{height:52px;border:0;border-radius:12px;color:#fff;font-weight:800;font-size:16px;cursor:pointer;background:linear-gradient(90deg,#4167ef,#2f4ed0)}
.access-error{min-height:20px;margin-top:12px;color:#a72c2c;font-size:14px}
.page-shell{width:min(980px,calc(100% - 32px));margin:0 auto;padding:44px 0 28px}
.hero{text-align:center;margin-bottom:30px}.hero h1{margin:0;font-size:58px;letter-spacing:.5px;line-height:1;font-weight:900}.hero h1 span{color:var(--blue)}
.tagline{margin:18px 0 15px;font-size:18px;letter-spacing:4px;color:#66708d}.tagline b{color:var(--blue)}
.online-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 22px;border-radius:999px;border:1px solid #9ee5c4;background:#eafff4;color:#14915a;font-weight:700}
.online-dot{width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(22,185,112,.12)}
.app-card,.how-card{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:20px;box-shadow:0 16px 45px rgba(43,64,120,.12)}
.app-card{padding:30px 34px}.form-heading{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.icon-badge{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#4169f3,#294bd4);color:#fff;font-size:28px}
.form-copy{min-width:0;flex:1}.form-copy h2{margin:0 0 7px;font-size:28px}.form-copy p{margin:0;color:var(--muted);font-size:16px}
.counter-pill{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:#eef2ff;color:var(--blue);font-size:16px}
#commands{width:100%;min-height:170px;resize:vertical;border:1px solid #ccd5e7;border-radius:14px;padding:18px 20px;font:16px/1.6 Inter,Segoe UI,Arial,sans-serif;outline:none}
#commands:focus{border-color:#7690f7;box-shadow:0 0 0 4px rgba(54,91,234,.09)}
.get-code-btn{width:100%;height:62px;margin-top:20px;border:0;border-radius:13px;cursor:pointer;color:#fff;font-size:18px;font-weight:800;background:linear-gradient(90deg,#4167ef,#2f4ed0);display:flex;align-items:center;justify-content:center;gap:12px}
.get-code-btn:disabled{opacity:.62;cursor:wait}
.results{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.result{border:1px solid var(--line);border-radius:14px;padding:15px 17px;background:#f8faff;font-size:14px;line-height:1.45}
.result.loading{color:var(--muted)}.result.success{background:var(--success);border-color:#bcebd2}.result.error{background:var(--danger);border-color:#f1c6c6;color:#9c2626}
.result .email{font-weight:800;word-break:break-all}.result .code{display:block;margin-top:4px;font-size:28px;font-weight:900;letter-spacing:2px}.result .meta{margin-top:5px;color:var(--muted);font-size:12px}
.how-card{margin-top:28px;padding:24px 28px}.how-title{font-size:18px;font-weight:800;color:var(--blue);margin-bottom:22px}
.steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:14px;align-items:center}.step{display:flex;gap:12px;align-items:flex-start}
.step-num{width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:#e9efff;color:var(--blue);display:grid;place-items:center;font-weight:900;font-size:18px}
.step strong{display:block;margin:3px 0 5px;font-size:14px}.step p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}.arrow{color:#a3b0d7;font-size:22px}
footer{text-align:center;color:#5570d8;margin-top:34px;font-size:16px}footer small{display:block;color:#818aa2;margin-top:9px;font-size:12px}
@media(max-width:760px){.page-shell{width:min(100% - 20px,620px);padding-top:28px}.hero h1{font-size:42px}.tagline{font-size:14px;letter-spacing:2px}.app-card{padding:22px 18px}.form-heading{align-items:flex-start;flex-wrap:wrap}.icon-badge{width:52px;height:52px}.counter-pill{margin-left:auto}.steps{grid-template-columns:1fr}.arrow{display:none}}