body{display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0;padding:24px}.card{position:relative;z-index:1;width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-2xl);padding:44px 40px 40px;box-shadow:var(--shadow-xl);animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both;transition:background var(--transition-all),border-color var(--transition-all),box-shadow var(--transition-all)}.card:before{content:"";position:absolute;top:0;left:10%;right:10%;height:3px;background:linear-gradient(90deg,transparent,var(--primary-500),var(--primary-400),transparent);border-radius:0 0 3px 3px}.header{text-align:center;margin-bottom:28px}.header h1{font-size:1.125rem;font-weight:800;letter-spacing:-.02em;color:var(--text-primary)}.header p{color:var(--text-tertiary);font-size:.8125rem;margin-top:4px}.divider{height:1px;margin:0 0 24px;background:linear-gradient(90deg,transparent,var(--border),transparent)}.screen{display:none}.screen.active{display:block;animation:fadeUp .35s cubic-bezier(.16,1,.3,1) both}.field{margin-bottom:16px}.field label{display:block;font-size:.75rem;font-weight:600;color:var(--text-secondary);margin-bottom:6px}.input-wrap{position:relative}.input-wrap input{width:100%;padding:11px 16px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:.875rem;font-family:inherit;outline:none;transition:border-color var(--transition-all),box-shadow var(--transition-all),background var(--transition-all)}.input-wrap input::placeholder{color:var(--text-tertiary);opacity:.6}.input-wrap input:focus{border-color:var(--primary-500);background:var(--surface);box-shadow:0 0 0 3px #3b82f61a}html.dark .input-wrap input:focus{box-shadow:0 0 0 3px #3b82f626}.input-wrap input:user-invalid{border-color:var(--danger-500)}.toggle-pw{position:absolute;left:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-tertiary);padding:6px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:color var(--transition-all);font-size:.875rem}.toggle-pw:hover{color:var(--text-secondary)}.error-box{display:none;background:var(--danger-50);border:1px solid var(--danger-100);border-radius:var(--radius-md);padding:10px 14px;color:var(--danger-600);font-size:.8125rem;text-align:center;margin-bottom:16px;animation:slideDown .25s ease}html.dark .error-box{background:#ef444414;border-color:#ef444426}.error-box.visible{display:block}.btn{width:100%;padding:11px 20px;border:none;border-radius:var(--radius-md);font-size:.875rem;font-weight:700;font-family:inherit;cursor:pointer;transition:transform var(--transition-transform),box-shadow var(--transition-all),opacity var(--transition-all);display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;position:relative}.btn:active{transform:scale(.98)}.btn-primary{background:linear-gradient(135deg,var(--primary-600),var(--accent));color:#fff;box-shadow:0 4px 16px #2563eb33}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 24px #2563eb4d}.btn-success{background:linear-gradient(135deg,var(--success-600),#059669);color:#fff;box-shadow:0 4px 16px #05966926}.btn-success:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 24px #05966940}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.theme-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto 24px;padding:8px 18px;border-radius:var(--radius-full);border:1px solid var(--border);background:var(--surface-secondary);color:var(--text-secondary);font-size:.8125rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background var(--transition-all),border-color var(--transition-all),color var(--transition-all),transform var(--transition-transform);width:auto}.theme-btn:hover{background:var(--surface-hover);border-color:var(--border-hover);transform:translateY(-1px)}.theme-btn svg{width:16px;height:16px}.loading-center{text-align:center;padding:28px 0;color:var(--text-tertiary);font-size:.8125rem}.loading-spinner{width:22px;height:22px;border:2.5px solid var(--border);border-top-color:var(--primary-500);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 14px}.setup-notice{background:var(--warning-50);border:1px solid rgba(245,158,11,.15);border-radius:var(--radius-md);padding:14px 16px;color:var(--warning-600);font-size:.8125rem;margin-bottom:20px;line-height:1.6}html.dark .setup-notice{background:#d977060f;border-color:#d977061f}.setup-notice strong{display:block;margin-bottom:4px;font-size:.875rem;color:var(--warning-500)}.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px}