.auth-shell{--font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Monaco,Consolas,monospace;--radius:20px;--radius-lg:28px;--radius-full:999px;--bg-1:#f0f2f7;--bg-2:#e4e8f1;--card:rgba(255,255,255,0.72);--card-border:rgba(255,255,255,0.6);--card-shadow:0 30px 80px -20px rgba(0,0,0,0.12),0 0 1px rgba(0,0,0,0.05);--input-bg:rgba(0,0,0,0.04);--input-border:rgba(0,0,0,0.08);--input-focus-border:rgba(99,102,241,0.5);--input-focus-ring:rgba(99,102,241,0.15);--text-1:#0f172a;--text-2:#475569;--text-3:#94a3b8;--accent:#6366f1;--accent-2:#8b5cf6;--accent-glow:rgba(99,102,241,0.3);--pill-bg:rgba(99,102,241,0.08);--pill-text:#6366f1;--divider:rgba(0,0,0,0.06);--btn-ghost-bg:rgba(0,0,0,0.04);--btn-ghost-hover:rgba(0,0,0,0.08);--success-bg:rgba(34,197,94,0.1);--success-text:#15803d;--success-border:rgba(34,197,94,0.2);--warning-bg:rgba(245,158,11,0.1);--warning-text:#a16207;--warning-border:rgba(245,158,11,0.2);--danger-bg:rgba(239,68,68,0.1);--danger-text:#b91c1c;--danger-border:rgba(239,68,68,0.2);--info-bg:rgba(59,130,246,0.08);--info-text:#2563eb;--info-border:rgba(59,130,246,0.15);--orb1:rgba(99,102,241,0.15);--orb2:rgba(139,92,246,0.12);--orb3:rgba(236,72,153,0.08);--cell-bg:rgba(0,0,0,0.03);--cell-filled:rgba(99,102,241,0.06);font-family:var(--font);color:var(--text-1);background:var(--bg-1);min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px;overflow-x:hidden;position:relative}[data-theme=dark] .auth-shell,html[data-theme=dark] .auth-shell{--bg-1:#06080d;--bg-2:#0c1019;--card:rgba(15,20,30,0.65);--card-border:rgba(255,255,255,0.06);--card-shadow:0 30px 80px -20px rgba(0,0,0,0.5),0 0 1px rgba(255,255,255,0.05),inset 0 1px 0 rgba(255,255,255,0.04);--input-bg:rgba(255,255,255,0.04);--input-border:rgba(255,255,255,0.08);--input-focus-border:rgba(129,140,248,0.5);--input-focus-ring:rgba(129,140,248,0.15);--text-1:#f1f5f9;--text-2:#94a3b8;--text-3:#64748b;--accent:#818cf8;--accent-2:#a78bfa;--accent-glow:rgba(129,140,248,0.25);--pill-bg:rgba(129,140,248,0.1);--pill-text:#a5b4fc;--divider:rgba(255,255,255,0.06);--btn-ghost-bg:rgba(255,255,255,0.04);--btn-ghost-hover:rgba(255,255,255,0.08);--success-bg:rgba(34,197,94,0.12);--success-text:#86efac;--success-border:rgba(34,197,94,0.15);--warning-bg:rgba(245,158,11,0.12);--warning-text:#fcd34d;--warning-border:rgba(245,158,11,0.15);--danger-bg:rgba(239,68,68,0.12);--danger-text:#fca5a5;--danger-border:rgba(239,68,68,0.15);--info-bg:rgba(96,165,250,0.1);--info-text:#93c5fd;--info-border:rgba(96,165,250,0.12);--orb1:rgba(99,102,241,0.12);--orb2:rgba(139,92,246,0.1);--orb3:rgba(236,72,153,0.06);--cell-bg:rgba(255,255,255,0.04);--cell-filled:rgba(129,140,248,0.08)}.auth-shell:after,.auth-shell:before{content:"";position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;animation:auth-float 20s ease-in-out infinite}.auth-shell:before{width:600px;height:600px;top:-20%;left:-10%;background:var(--orb1)}.auth-shell:after{width:500px;height:500px;bottom:-15%;right:-8%;background:var(--orb2);animation-delay:-10s;animation-direction:reverse}.auth-shell .orb-3{position:fixed;width:400px;height:400px;top:50%;left:60%;background:var(--orb3);border-radius:50%;filter:blur(80px);pointer-events:none;animation:auth-float 25s ease-in-out infinite;animation-delay:-5s}@keyframes auth-float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-40px) scale(1.05)}66%{transform:translate(-20px,20px) scale(.95)}}.auth-shell .wrapper{position:relative;z-index:1;width:min(100%,420px);display:flex;flex-direction:column;align-items:center;gap:24px;animation:auth-cardIn .6s cubic-bezier(.16,1,.3,1) both}.auth-shell .wrapper.compact{gap:20px}@keyframes auth-cardIn{0%{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.auth-shell .card{width:100%;background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius-lg);backdrop-filter:saturate(150%) blur(40px);-webkit-backdrop-filter:saturate(150%) blur(40px);box-shadow:var(--card-shadow);padding:32px}.auth-shell .brand{width:100%;display:flex;align-items:center;justify-content:space-between}.auth-shell .logo{display:flex;align-items:center;gap:14px}.auth-shell .logo-icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;display:grid;place-items:center;font-size:18px;font-weight:700;letter-spacing:-.01em;box-shadow:0 8px 24px var(--accent-glow)}.auth-shell .logo-text{font-size:22px;font-weight:700;letter-spacing:-.015em}.auth-shell .controls{display:flex;gap:6px}.auth-shell .ctrl-btn{height:34px;border-radius:var(--radius-full);border:1px solid var(--divider);background:var(--btn-ghost-bg);color:var(--text-2);padding:0 12px;font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;justify-content:center}.auth-shell .ctrl-btn:hover{background:var(--btn-ghost-hover);border-color:var(--input-border)}.auth-shell .card-icon{width:56px;height:56px;border-radius:16px;background:var(--pill-bg);display:grid;place-items:center;margin:0 auto 16px}.auth-shell .card-icon svg{width:28px;height:28px;color:var(--accent)}.auth-shell .header{margin-bottom:28px;text-align:center}.auth-shell .header h1{font-size:26px;font-weight:600;letter-spacing:-.015em;line-height:1.1;margin-bottom:8px}.auth-shell .header p{color:var(--text-2);font-size:15px;font-weight:400;line-height:1.5;letter-spacing:-.01em}.auth-shell .flash-list{display:grid;gap:8px;margin-bottom:20px}.auth-shell .flash{padding:12px 14px;border-radius:14px;font-size:13px;line-height:1.45;border:1px solid transparent}.auth-shell .flash-error{background:var(--danger-bg);color:var(--danger-text);border-color:var(--danger-border)}.auth-shell .flash-warning{background:var(--warning-bg);color:var(--warning-text);border-color:var(--warning-border)}.auth-shell .flash-success{background:var(--success-bg);color:var(--success-text);border-color:var(--success-border)}.auth-shell .form{display:grid;gap:18px}.auth-shell .field{display:grid;gap:6px}.auth-shell .field label{font-size:13px;font-weight:500;color:var(--text-2);letter-spacing:-.005em}.auth-shell .input-box{position:relative;display:flex;align-items:center}.auth-shell .input-icon{position:absolute;left:16px;color:var(--text-3);width:18px;height:18px;pointer-events:none;transition:color .2s}.auth-shell .input-box input{width:100%;height:52px;padding:0 16px 0 44px;border-radius:16px;border:1.5px solid var(--input-border);background:var(--input-bg);color:var(--text-1);font-family:var(--font);font-size:15px;transition:all .2s;-webkit-appearance:none}.auth-shell .input-box input::-moz-placeholder{color:var(--text-3)}.auth-shell .input-box input::placeholder{color:var(--text-3)}.auth-shell .input-box input:focus{outline:none;border-color:var(--input-focus-border);box-shadow:0 0 0 4px var(--input-focus-ring);background:var(--input-bg)}.auth-shell .input-box:focus-within .input-icon{color:var(--accent)}.auth-shell .info-note{padding:10px 14px;border-radius:14px;background:var(--info-bg);color:var(--info-text);border:1px solid var(--info-border);font-size:12px;line-height:1.5}.auth-shell .btn-primary{height:52px;border:none;border-radius:16px;background:linear-gradient(135deg,var(--accent) 0,var(--accent-2) 100%);color:#fff;font-family:var(--font);font-size:16px;font-weight:600;letter-spacing:-.01em;cursor:pointer;box-shadow:0 12px 30px -8px var(--accent-glow);transition:all .2s;position:relative;overflow:hidden}.auth-shell .btn-primary.full{width:100%}.auth-shell .btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 40px -8px var(--accent-glow)}.auth-shell .btn-primary:active{transform:translateY(0)}.auth-shell .btn-primary:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.15),transparent 50%);pointer-events:none}.auth-shell .btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.auth-shell .btn-ghost{height:44px;border-radius:14px;border:1px solid var(--divider);background:var(--btn-ghost-bg);color:var(--text-1);font-family:var(--font);font-size:15px;font-weight:500;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;transition:all .2s;white-space:nowrap}.auth-shell .btn-ghost.full{width:100%}.auth-shell .btn-ghost:hover{background:var(--btn-ghost-hover);border-color:var(--input-border)}.auth-shell .foot{margin-top:24px;padding-top:20px;border-top:1px solid var(--divider);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.auth-shell .foot-text{color:var(--text-3);font-size:13px}.auth-shell .timer-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-radius:16px;border:1px solid var(--divider);background:var(--btn-ghost-bg);margin-bottom:24px}.auth-shell .timer-label{color:var(--text-3);font-size:13px;font-weight:400;letter-spacing:-.005em}.auth-shell .timer-value{font-family:var(--mono);font-size:24px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.auth-shell .otp-wrap{margin-bottom:24px}.auth-shell .otp-cells{display:flex;gap:8px;justify-content:center}.auth-shell .otp-cell{width:0;flex:1;aspect-ratio:1/1.15;max-width:58px;border-radius:16px;border:1.5px solid var(--input-border);background:var(--cell-bg);color:var(--text-1);font-family:var(--mono);font-size:28px;font-weight:700;text-align:center;caret-color:var(--accent);transition:all .2s cubic-bezier(.16,1,.3,1);-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}.auth-shell .otp-cell::-moz-placeholder{color:transparent}.auth-shell .otp-cell::placeholder{color:transparent}.auth-shell .otp-cell:focus{border-color:var(--input-focus-border);box-shadow:0 0 0 4px var(--input-focus-ring);background:var(--cell-filled);transform:translateY(-2px)}.auth-shell .otp-cell.filled{border-color:var(--accent);background:var(--cell-filled)}.auth-shell .otp-cell.shake{animation:auth-shake .4s ease}.auth-shell .otp-cell.success{border-color:#22c55e;background:rgba(34,197,94,.1);animation:auth-pop .3s cubic-bezier(.16,1,.3,1)}@keyframes auth-shake{0%,to{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}@keyframes auth-pop{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}.auth-shell .otp-hint{text-align:center;color:var(--text-3);font-size:12px;margin-top:12px;line-height:1.5}.auth-shell .actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:20px;padding-top:20px;border-top:1px solid var(--divider)}.auth-shell .back-link{color:var(--text-3);font-size:13px;text-decoration:none;transition:color .2s}.auth-shell .back-link:hover{color:var(--text-2)}@media (max-width:480px){.auth-shell{padding:env(safe-area-inset-top,10px) 10px env(safe-area-inset-bottom,10px)}.auth-shell:before{width:300px;height:300px;top:-10%;left:-15%;filter:blur(60px)}.auth-shell:after{width:250px;height:250px;bottom:-10%;right:-10%;filter:blur(60px)}.auth-shell .orb-3{width:200px;height:200px;filter:blur(60px)}.auth-shell .wrapper{width:100%;gap:16px}.auth-shell .card{padding:18px;border-radius:20px}.auth-shell .logo-icon{width:40px;height:40px;border-radius:12px;font-size:15px}.auth-shell .logo{gap:10px}.auth-shell .logo-text{font-size:18px}.auth-shell .ctrl-btn{height:30px;padding:0 10px;font-size:10px}.auth-shell .controls{gap:4px}.auth-shell .card-icon{width:48px;height:48px;border-radius:14px;margin-bottom:12px}.auth-shell .card-icon svg{width:24px;height:24px}.auth-shell .header{margin-bottom:20px}.auth-shell .header h1{font-size:22px;margin-bottom:4px}.auth-shell .header p{font-size:12px}.auth-shell .form{gap:14px}.auth-shell .field{gap:4px}.auth-shell .field label{font-size:12px}.auth-shell .input-icon{width:16px;height:16px;left:13px}.auth-shell .input-box input{padding:0 14px 0 38px}.auth-shell .btn-primary,.auth-shell .input-box input{height:44px;font-size:14px;border-radius:12px}.auth-shell .flash{padding:10px 12px;font-size:12px;border-radius:10px}.auth-shell .flash-list{gap:6px;margin-bottom:14px}.auth-shell .info-note{padding:8px 12px;font-size:11px;border-radius:10px}.auth-shell .foot{margin-top:16px;padding-top:14px;flex-direction:column;align-items:stretch;gap:8px}.auth-shell .foot-text{font-size:12px;text-align:center}.auth-shell .btn-ghost{width:100%;height:38px;font-size:13px;border-radius:12px}.auth-shell .timer-bar{padding:10px 14px;border-radius:12px;margin-bottom:18px}.auth-shell .timer-label{font-size:12px}.auth-shell .timer-value{font-size:20px}.auth-shell .otp-wrap{margin-bottom:18px}.auth-shell .otp-cell{font-size:22px;border-radius:12px;max-width:46px}.auth-shell .otp-cells{gap:6px}.auth-shell .otp-hint{font-size:11px;margin-top:10px}.auth-shell .actions{margin-top:16px;padding-top:14px;flex-direction:column-reverse;align-items:stretch;gap:8px}.auth-shell .back-link{text-align:center;font-size:12px}}@media (max-width:360px){.auth-shell .card{padding:14px}.auth-shell .header h1{font-size:20px}.auth-shell .input-box input{height:42px;font-size:13px}.auth-shell .otp-cell{font-size:20px;border-radius:10px;max-width:42px}.auth-shell .btn-primary{height:42px;font-size:13px}}