:root{--primary:#18a7a1;--primary-hover:#149690;--primary-dark:#1a8a7a;--primary-soft:#18a7a114;--primary-glow:#18a7a11f;--error:#dc3545;--error-soft:#dc354514;--error-border:#dc354538;--success:#198754;--success-soft:#19875414;--success-border:#19875433;--bg:#f4f6f8;--bg-secondary:#f8f9fa;--surface:#fff;--surface-raised:#fff;--surface-hover:#f8fafa;--border:#e2e6ea;--border-strong:#d5dade;--border-focus:#18a7a1a6;--text:#172126;--text-secondary:#46545b;--text-muted:#6b7780;--text-placeholder:#9aa4aa;--bg-hover:#f1f5f5;--shadow-card:0 18px 45px #17212614, 0 4px 12px #1721260a;--shadow-input:0 0 0 3px #18a7a11a;--radius-sm:.4rem;--radius-md:.55rem;--radius-lg:.7rem}*{box-sizing:border-box}html{background:var(--bg);min-height:100%}body{min-height:100vh;color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;background:linear-gradient(#f8fafb 0%,#f2f5f7 100%);margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5}.auth-page{background:radial-gradient(circle at 50% 0,#18a7a10b,#0000 42%),#f4f6f8;justify-content:center;align-items:center;min-height:100vh;padding:2.5rem 2rem;display:flex;position:relative;overflow:hidden}.auth-page .grid-layer{pointer-events:none;position:absolute;inset:0}.auth-page .grid-layer:before{content:"";opacity:.8;background-image:linear-gradient(#233d4c09 1px,#0000 1px),linear-gradient(90deg,#233d4c09 1px,#0000 1px);background-size:24px 24px;position:absolute;inset:0}.auth-page .grid-layer:after{content:"";opacity:.6;background-image:linear-gradient(#233d4c05 1px,#0000 1px),linear-gradient(90deg,#233d4c05 1px,#0000 1px);background-size:96px 96px;position:absolute;inset:0}.auth-card{z-index:1;border-radius:var(--radius-lg);border:1px solid var(--border);width:100%;max-width:820px;box-shadow:var(--shadow-card);background:#fff;grid-template-columns:1fr 1fr;display:grid;position:relative;overflow:hidden}.auth-card:before{content:"";background:linear-gradient(90deg, transparent 10%, var(--primary) 50%, transparent 90%);z-index:2;height:2.5px;position:absolute;top:0;left:0;right:0}.auth-brand{border-right:1px solid var(--border);background:linear-gradient(160deg,#f8fafc 0%,#f1f5f9 100%);flex-direction:column;justify-content:space-between;padding:3.5rem 2.5rem 3rem;display:flex}.auth-brand .brand-welcome h2{color:var(--text);letter-spacing:-.03em;margin:0 0 .5rem;font-size:2rem;font-weight:700;line-height:1.2}.auth-brand .brand-welcome .brand-subtitle{color:var(--text-muted);margin:0;font-size:1rem;line-height:1.5}.auth-brand .brand-platform{margin-top:2.5rem}.auth-brand .brand-platform .platform-logo{object-fit:contain;object-position:left;width:180px;max-width:100%;height:auto;margin-bottom:.75rem;display:block}.auth-brand .brand-platform .platform-name{color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;font-size:1rem;font-weight:600;display:block}.auth-brand .brand-platform .platform-name span{color:var(--primary)}.auth-brand .brand-platform .platform-tag{color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;margin-top:.1rem;font-size:.75rem;font-weight:600;display:block}.auth-form-panel{flex-direction:column;justify-content:center;padding:3.5rem 3rem 3rem 2.5rem;display:flex}.auth-form{flex-direction:column;gap:1.15rem;display:flex}.form-group{flex-direction:column;gap:.4rem;display:flex}.form-group label{color:var(--text);font-size:.875rem;font-weight:600}.optional-label{color:var(--text-muted);font-size:.75rem;font-weight:400}.auth-form input{border:1px solid var(--border-strong);border-radius:var(--radius-sm);width:100%;min-height:48px;color:var(--text);background:#fff;padding:.75rem 1rem;font-size:1rem;transition:border-color .2s,box-shadow .2s,background-color .2s}.auth-form input::placeholder{color:var(--text-placeholder)}.auth-form input:hover{border-color:#b9c2c7}.auth-form input:focus{border-color:var(--border-focus);background:#fff;outline:none;box-shadow:0 0 0 3px #18a7a11a}.password-wrapper{width:100%;position:relative}.password-wrapper input{padding-right:2.75rem}.password-toggle{cursor:pointer;color:var(--text-muted);background:0 0;border:none;justify-content:center;align-items:center;padding:.25rem;transition:color .2s,transform .15s;display:flex;position:absolute;top:50%;right:.75rem;transform:translateY(-50%)}.password-toggle:hover{color:var(--primary)}.password-toggle:active{transform:translateY(-50%)scale(.92)}.form-options{justify-content:flex-end;margin-top:-.15rem;display:flex}.form-options .forgot-link{color:var(--primary-dark);font-size:.85rem;font-weight:500;text-decoration:none;transition:color .2s}.form-options .forgot-link:hover{color:var(--primary);text-decoration:underline}.back-to-login{text-align:center;width:100%;margin-top:.5rem}.back-to-login .auth-switch{color:var(--text-muted);font-size:.875rem;text-decoration:none;transition:color .2s}.back-to-login .auth-switch:hover{color:var(--primary);text-decoration:underline}.auth-form>button[type=submit]{background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:#fff;border-radius:var(--radius-sm);cursor:pointer;border:none;width:100%;min-height:50px;margin-top:.35rem;padding:.75rem 1rem;font-size:1rem;font-weight:600;transition:background .2s,box-shadow .2s,transform .1s;box-shadow:0 5px 14px #18a7a129}.auth-form>button[type=submit]:hover{background:linear-gradient(135deg, var(--primary-hover), var(--primary));box-shadow:0 7px 18px #18a7a138}.auth-form>button[type=submit]:active{transform:translateY(1px);box-shadow:0 3px 10px #18a7a129}.auth-form>button[type=submit]:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}.auth-divider{align-items:center;gap:1rem;margin:.75rem 0 .5rem;display:flex}.auth-divider .line{background:var(--border);flex:1;height:1px}.auth-divider .or-text{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.8rem;font-weight:500}.auth-switch{text-align:center;color:var(--text-muted);margin-top:.25rem;font-size:.875rem}.auth-switch a{color:var(--primary-dark);font-weight:600;text-decoration:none;transition:color .2s}.auth-switch a:hover{color:var(--primary);text-decoration:underline}.auth-feedback{border-radius:var(--radius-md);text-align:center;border:1px solid #0000;margin-top:.75rem;padding:.75rem 1rem;font-size:.875rem;font-weight:500}.success{background:var(--success-soft);color:#146c43;border-color:var(--success-border)}.error{background:var(--error-soft);color:#b02a37;border-color:var(--error-border)}.spinner{border:2px solid #ffffff59;border-top-color:#fff;border-radius:50%;width:1.15rem;height:1.15rem;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}#verification-container{width:100%}.verification-info{text-align:center;margin:0 0 1.25rem}.verification-info p{color:var(--text-secondary);margin:0;font-size:.9rem;line-height:1.5}.verification-info .email-masked{color:var(--text);margin-left:.2rem;font-weight:600}.verification-info .expiry-timer{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);margin-top:.65rem;padding:.35rem .75rem;font-size:.8rem;display:inline-block}.verification-info .expiry-timer .time{color:var(--text);margin-left:.2rem;font-weight:600}.pin-container{justify-content:center;align-items:center;gap:.65rem;width:100%;margin:1.5rem 0;display:flex}.pin-input{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);width:48px;min-width:48px;height:54px;color:var(--text);text-align:center;flex:0 0 48px;padding:0;font-family:inherit;font-size:1.35rem;font-weight:600;line-height:1;transition:border-color .2s,box-shadow .2s,background-color .2s}.pin-input:hover{border-color:#b9c2c7}.pin-input:focus{border-color:var(--border-focus);background:#fff;outline:none;box-shadow:0 0 0 3px #18a7a11a}.pin-input:disabled{opacity:.6;cursor:not-allowed}.verification-attempts{text-align:center;color:var(--text-muted);margin:.5rem 0;font-size:.8rem;line-height:1.4}.verification-error{border:1px solid var(--error-border);border-radius:var(--radius-md);background:var(--error-soft);color:#b02a37;text-align:center;margin-top:.75rem;padding:.7rem .85rem;font-size:.82rem;line-height:1.4}.verification-actions{flex-direction:column;align-items:stretch;gap:.65rem;margin-top:1.25rem;display:flex}.verification-actions .auth-submit{border-radius:var(--radius-sm);background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:#fff;cursor:pointer;border:none;justify-content:center;align-items:center;width:100%;min-height:50px;padding:.75rem 1rem;font-family:inherit;font-size:1rem;font-weight:600;line-height:1.2;transition:background .2s,box-shadow .2s,transform .1s,opacity .2s;display:flex;box-shadow:0 5px 14px #18a7a129}.verification-actions .auth-submit:hover:not(:disabled){background:linear-gradient(135deg, var(--primary-hover), var(--primary));box-shadow:0 7px 18px #18a7a138}.verification-actions .auth-submit:active:not(:disabled){transform:translateY(1px)}.verification-actions .auth-submit:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}.verification-actions .auth-submit .button-text{justify-content:center;align-items:center;display:inline-flex}.verification-actions .resend-button{width:100%;min-height:38px;color:var(--primary-dark);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:.5rem .75rem;font-family:inherit;font-size:.85rem;font-weight:600;line-height:1.2;transition:color .2s,opacity .2s;display:flex}.verification-actions .resend-button:hover:not(:disabled){color:var(--primary);text-decoration:underline}.verification-actions .resend-button:disabled{opacity:.5;cursor:not-allowed}.verification-actions .back-link{text-align:center;margin-top:.1rem}.verification-actions .back-link a{color:var(--text-muted);cursor:pointer;font-size:.82rem;text-decoration:none;transition:color .2s}.verification-actions .back-link a:hover{color:var(--text);text-decoration:underline}.confirm-status-icon{text-align:center;margin-bottom:.5rem;font-size:2.5rem}.confirm-status-icon.success{color:var(--success)}.confirm-status-icon.error{color:var(--error)}.confirm-status-panel{text-align:center;padding:.5rem 0}.confirm-status-panel strong{margin-bottom:.25rem;font-size:1.1rem;display:block}.confirm-status-panel p{color:var(--text-muted);margin:0;font-size:.9rem}.confirm-status-actions{text-align:center;flex-direction:column;gap:.5rem;margin-top:1rem;display:flex}.confirm-status-actions a{color:var(--primary-dark);font-weight:500;text-decoration:none}.confirm-status-actions a:hover{color:var(--primary);text-decoration:underline}.confirm-status-support{text-align:center;color:var(--text-muted);margin-top:1rem;font-size:.85rem}.confirm-status-support a{color:var(--primary-dark);text-decoration:none}.confirm-status-support a:hover{color:var(--primary);text-decoration:underline}#retry-button{color:var(--primary-dark);cursor:pointer;background:0 0;border:none;padding:.25rem .5rem;font-family:inherit;font-size:.9rem;font-weight:500;display:inline-block}#retry-button:hover{color:var(--primary);text-decoration:underline}.hidden{display:none!important}::selection{color:var(--text);background:#18a7a12e}@media (width<=820px){.auth-card{grid-template-columns:1fr;max-width:660px}.auth-brand{border-right:none;border-bottom:1px solid var(--border);padding:2rem 2rem 1.5rem}.auth-brand .brand-welcome h2{font-size:1.65rem}.auth-brand .brand-platform .platform-logo{width:140px}.auth-form-panel{padding:2.25rem 2rem 2rem}}@media (width<=540px){.auth-page{padding:1rem}.auth-card{border-radius:var(--radius-md)}.auth-brand{padding:1.5rem 1.25rem 1rem}.auth-brand .brand-welcome h2{font-size:1.4rem}.auth-brand .brand-welcome .brand-subtitle{font-size:.9rem}.auth-brand .brand-platform .platform-logo{width:120px}.auth-form-panel{padding:1.5rem 1.25rem}.auth-form input{min-height:44px;font-size:.95rem}.auth-form>button[type=submit]{min-height:46px;font-size:.95rem}.pin-container{gap:.45rem}.pin-input{flex:0 0 42px;width:42px;min-width:42px;height:48px;font-size:1.2rem}.verification-info p{font-size:.85rem}.verification-actions .auth-submit{min-height:46px;font-size:.95rem}}@media (width<=380px){.auth-page{padding:.75rem}.auth-brand{padding:1.25rem 1rem .75rem}.auth-brand .brand-welcome h2{font-size:1.2rem}.auth-brand .brand-platform .platform-logo{width:100px}.auth-form-panel{padding:1.25rem 1rem}.pin-container{gap:.3rem}.pin-input{flex:0 0 36px;width:36px;min-width:36px;height:44px;font-size:1.05rem}.verification-actions .auth-submit{min-height:42px;font-size:.9rem}.verification-info p{font-size:.8rem}.auth-form input{min-height:40px;padding:.5rem .75rem;font-size:.9rem}.auth-form>button[type=submit]{min-height:42px;font-size:.9rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (width<=820px){.auth-brand{text-align:center;align-items:center}.auth-brand .brand-welcome{text-align:center;width:100%}.auth-brand .brand-platform{text-align:center;width:100%;margin-top:1.75rem}.auth-brand .brand-platform .platform-logo{margin-left:auto;margin-right:auto}}
