body{background:#f5f7fa;min-height:100vh}
.auth-wrap{min-height:calc(100vh - 80px);display:flex;align-items:center;justify-content:center;padding:2rem 1rem}
.auth-card{background:#fff;border-radius:14px;border:1px solid var(--border);padding:2.5rem 2.75rem;width:100%;max-width:460px;box-shadow:0 4px 24px rgba(11,37,69,0.08)}
.auth-logo{display:flex;align-items:center;gap:0.6rem;margin-bottom:2rem;justify-content:center;text-decoration:none}
.auth-logo span{font-family:'Playfair Display',serif;font-size:1.15rem;color:var(--navy);font-weight:700}
.auth-tabs{display:flex;margin-bottom:2rem;border-bottom:2px solid var(--border)}
.auth-tab{flex:1;padding:0.7rem 0;text-align:center;font-weight:600;font-size:0.95rem;cursor:pointer;color:#999;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s;font-family:'Inter',sans-serif}
.auth-tab.active{color:var(--navy);border-bottom-color:var(--teal)}
.auth-panel{display:none}
.auth-panel.active{display:block}
.step{display:none}
.step.active{display:block}
.step-indicator{display:flex;align-items:center;gap:0.5rem;margin-bottom:1.75rem}
.step-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.78rem;font-weight:700;flex-shrink:0;transition:background .2s,color .2s}
.step-dot.done{background:var(--teal);color:#fff}
.step-dot.active{background:var(--navy);color:#fff}
.step-dot.pending{background:#e8edf2;color:#aaa}
.step-line{flex:1;height:2px;background:#e8edf2;border-radius:2px}
.step-line.done{background:var(--teal)}
.form-group{margin-bottom:1.2rem}
.form-group label{display:block;font-size:0.875rem;font-weight:600;color:var(--navy);margin-bottom:0.4rem}
.form-group input{width:100%;padding:0.7rem 0.9rem;border:1.5px solid var(--border);border-radius:6px;font-size:0.95rem;font-family:'Inter',sans-serif;outline:none;transition:border-color .15s;box-sizing:border-box}
.form-group input:focus{border-color:var(--teal)}
.form-group input.error{border-color:#d93025}
.field-error{font-size:0.8rem;color:#d93025;margin-top:0.3rem;display:none}
.field-error.show{display:block}
.btn-auth{width:100%;padding:0.875rem;background:var(--teal);color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s;position:relative}
.btn-auth:hover{background:var(--navy)}
.btn-auth:disabled{opacity:0.6;cursor:not-allowed}
.btn-auth .spinner{display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,0.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;position:absolute;right:1.1rem;top:50%;transform:translateY(-50%)}
.btn-auth.loading .spinner{display:block}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
.btn-secondary{width:100%;padding:0.8rem;background:#f0f4f8;color:var(--navy);border:none;border-radius:6px;font-size:0.95rem;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s;margin-top:0.75rem}
.btn-secondary:hover{background:#e2e8f0}
.auth-notice{background:#f0fafb;border:1px solid #b2e4e8;border-radius:8px;padding:0.9rem 1rem;margin-bottom:1.4rem;font-size:0.875rem;color:#0b5460;line-height:1.6}
.auth-notice strong{display:block;color:var(--navy);margin-bottom:0.1rem}
.auth-success{background:#f0fdf4;border:1px solid #86efac;border-radius:8px;padding:0.9rem 1rem;margin-bottom:1.4rem;font-size:0.875rem;color:#166534;line-height:1.6;display:none}
.auth-success.show{display:block}
.auth-error{background:#fff5f5;border:1px solid #feb2b2;border-radius:8px;padding:0.9rem 1rem;margin-bottom:1.4rem;font-size:0.875rem;color:#c53030;line-height:1.6;display:none}
.auth-error.show{display:block}
.form-footer{font-size:0.82rem;color:#888;text-align:center;margin-top:1rem;line-height:1.6}
.form-footer a{color:var(--teal);text-decoration:none;font-weight:500}
.form-forgot{float:right;font-size:0.82rem;color:var(--teal);text-decoration:none;margin-top:-0.85rem;margin-bottom:0.5rem;display:block;text-align:right}
.code-inputs{display:flex;gap:0.5rem;justify-content:center;margin-bottom:1.5rem}
.code-inputs input{width:48px;height:56px;text-align:center;font-size:1.4rem;font-weight:700;border:1.5px solid var(--border);border-radius:8px;font-family:'Inter',sans-serif;outline:none;transition:border-color .15s}
.code-inputs input:focus{border-color:var(--teal)}
.pw-strength{height:4px;border-radius:2px;background:#e8edf2;margin-top:0.4rem;overflow:hidden}
.pw-strength-bar{height:100%;width:0;border-radius:2px;transition:width .3s,background .3s}
.verify-icon{text-align:center;margin-bottom:1.5rem}
.verify-icon svg{color:var(--teal)}
.verify-title{font-family:'Playfair Display',serif;font-size:1.35rem;color:var(--navy);text-align:center;margin-bottom:0.5rem}
.verify-sub{font-size:0.9rem;color:#666;text-align:center;margin-bottom:1.75rem;line-height:1.6}
.verify-sub strong{color:var(--navy)}
.resend-row{text-align:center;font-size:0.82rem;color:#888;margin-top:1rem}
.resend-row a{color:var(--teal);text-decoration:none;font-weight:500;cursor:pointer}