body{display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0;padding:20px}.bg-grid{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(59,130,246,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,.04) 1px,transparent 1px);background-size:48px 48px}body.light .bg-grid{background-image:linear-gradient(rgba(37,99,235,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.06) 1px,transparent 1px)}.bg-glow{position:fixed;pointer-events:none;border-radius:50%;filter:blur(80px)}.bg-glow-1{width:500px;height:500px;background:radial-gradient(circle,rgba(37,99,235,.1) 0%,transparent 70%);top:-100px;left:50%;transform:translate(-50%)}.bg-glow-2{width:300px;height:300px;background:radial-gradient(circle,rgba(99,102,241,.07) 0%,transparent 70%);bottom:0;right:10%}.card{position:relative;z-index:1;width:100%;max-width:400px;background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:40px 36px;box-shadow:0 30px 60px #0006,inset 0 1px #ffffff0a;animation:fadeUp .45s cubic-bezier(.16,1,.3,1) both;transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}body.light .card{box-shadow:0 30px 60px #0f172a14,inset 0 1px #ffffff0a;background:var(--surface-2);border-color:var(--border)}.card:before{content:"";position:absolute;top:0;left:10%;right:10%;height:2px;background:linear-gradient(90deg,transparent,var(--blue),var(--blue-light),transparent);border-radius:0 0 4px 4px}.header{text-align:center;margin-bottom:28px}.logo-wrap{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#2563eb26,#6366f126);border:1px solid rgba(59,130,246,.25);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px;box-shadow:0 0 24px #2563eb26}.header h1{color:#f1f5f9;font-size:18px;font-weight:800;margin-bottom:4px}body.light .header h1{color:#0f172a}body.light .header p{color:#64748b}.header p{color:var(--text-muted);font-size:12px}.divider{height:1px;margin:0 0 22px;background:linear-gradient(90deg,transparent,var(--border),transparent)}.screen{display:none}.screen.active{display:block}.field{margin-bottom:13px}.field label{display:block;font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:6px}.input-wrap{position:relative}.input-wrap input{width:100%;padding:12px 16px;background:#ffffff0a;border:1px solid rgba(255,255,255,.09);border-radius:12px;color:var(--text);font-size:13px;font-family:inherit;outline:none;transition:all .2s}body.light .input-wrap input{background:#0f172a0a;color:var(--text);border-color:#0f172a1f}body.light .input-wrap input::placeholder{color:#47556973}.input-wrap input:focus{border-color:#3b82f680;background:#3b82f60d;box-shadow:0 0 0 3px #3b82f61a}.input-wrap input::placeholder{color:#64748b73}.toggle-pw{position:absolute;left:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#64748b80;font-size:14px;padding:4px;transition:color .2s}body.light .toggle-pw{color:#0f172a8c}body.light .toggle-pw:hover{color:#334155}.toggle-pw:hover{color:#94a3b8}.error-box{display:none;background:#ef444414;border:1px solid rgba(239,68,68,.25);border-radius:10px;padding:9px 14px;color:#fca5a5;font-size:12px;text-align:center;margin-bottom:12px}body.light .error-box{background:#fecaca33;border-color:#f871714d;color:#991b1b}.error-box.visible{display:block;animation:shake .35s ease}.btn{width:100%;padding:12px;border:none;border-radius:12px;font-size:13.5px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s;margin-top:4px}.btn-primary{background:linear-gradient(135deg,var(--blue),#4f46e5);color:#fff;box-shadow:0 4px 16px #2563eb40}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #2563eb59}.btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none}.btn-success{background:linear-gradient(135deg,#059669,#10b981);color:#fff;box-shadow:0 4px 16px #05966933}.btn-success:hover{transform:translateY(-1px)}.btn-success:disabled{opacity:.55;cursor:not-allowed;transform:none}.sec-badge{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:16px;color:#64748b73;font-size:10.5px}.spinner{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-left:5px}.setup-notice{background:#f59e0b12;border:1px solid rgba(245,158,11,.18);border-radius:10px;padding:11px 14px;color:#fcd34d;font-size:11.5px;margin-bottom:18px;line-height:1.6}body.light .setup-notice{background:#facc151f;border-color:#f59e0b2e;color:#92400e}.setup-notice strong{display:block;margin-bottom:2px;font-size:12.5px}.loading-center{text-align:center;padding:18px 0;color:var(--text-muted);font-size:13px}.loading-spinner{width:22px;height:22px;border:2px solid rgba(59,130,246,.15);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 12px}.theme-btn{display:inline-flex;align-items:center;gap:8px;margin:0 auto 18px;padding:10px 14px;border-radius:999px;border:none;background:#ffffff1f;color:#e2e8f0;font-size:13px;font-weight:700;cursor:pointer;backdrop-filter:blur(12px);transition:transform .2s,background .2s}.theme-btn:hover{transform:translateY(-1px);background:#ffffff2e}body.light .theme-btn{background:#0f172a14;color:#0f172a}