/* ===== 登录/注册页 - 主题统一风格 ===== */

.gateway-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:linear-gradient(135deg,#EAF4FC 0%,#E8F2FB 48%,#E6F0F9 100%)!important;font-family:'Inter',sans-serif}
.gateway-card{width:100%;max-width:420px;background:var(--card-bg);border:1px solid var(--glass-border);border-radius:24px;box-shadow:0 12px 48px -8px rgba(0,0,0,0.08);padding:2.5rem}
body.dark .gateway-card{box-shadow:0 12px 48px -8px rgba(0,0,0,0.3)}

.form-header{text-align:center;margin-bottom:2rem}
.form-header h2{font-size:1.75rem;font-weight:700;color:var(--accent);margin-bottom:.25rem;letter-spacing:-.02em}
.form-header p{color:var(--text-muted);font-size:.9rem}

.halo-form .form-item{margin-bottom:1.25rem}
.halo-form .form-item label{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem;display:block}
.halo-form .form-item .form-label-group{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.halo-form .form-item .form-label-group label{margin-bottom:0}
.halo-form .form-item .form-label-group a{font-size:.7rem;color:var(--text-muted);text-decoration:none}
.halo-form .form-item .form-label-group a:hover{color:var(--accent)}
.halo-form .form-input{display:flex;align-items:center;gap:.5rem;border:1px solid var(--glass-border);border-radius:12px;background:transparent;padding:.6rem .8rem;transition:border-color .2s,box-shadow .2s}
.halo-form .form-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
.halo-form .form-input input{font-size:.92rem;color:var(--text-primary);background:none;border:none;outline:none;width:100%;caret-color:var(--accent)}
.halo-form .form-input input::placeholder{color:var(--text-muted);opacity:.6}
.halo-form .form-input .toggle-password-button{color:var(--text-muted);cursor:pointer;display:flex;align-items:center}
.halo-form .form-input .toggle-password-button:hover{color:var(--accent)}
.halo-form .form-item-group{display:flex;gap:1rem;margin-bottom:1.25rem}
.halo-form .form-item-group .form-item{margin-bottom:0;flex:1}
.halo-form .form-item-compact{display:flex;align-items:center;gap:.5rem;margin-bottom:1.25rem}
.halo-form .form-item-compact label{font-size:.85rem;color:var(--text-secondary)}
.halo-form input[type="checkbox"]{appearance:none;width:1em;height:1em;border:1px solid var(--glass-border);border-radius:4px;cursor:pointer;flex-shrink:0}
.halo-form input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent);background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");background-position:center;background-repeat:no-repeat;background-size:100%}
.halo-form .form-item-extra-link{font-size:.7rem;color:var(--text-muted);text-decoration:none;transition:color .2s}
.halo-form .form-item-extra-link:hover{color:var(--accent)}

.halo-form button[type="submit"]{width:100%;background:var(--accent);color:#fff;font-weight:600;padding:.85rem;border-radius:14px;border:none;cursor:pointer;font-size:.95rem;transition:all .25s;margin-top:1rem;display:flex;align-items:center;justify-content:center;line-height:1.2;min-height:44px}
.halo-form button[type="submit"]:hover{transform:translateY(-1px);box-shadow:0 8px 25px rgba(0,0,0,.12)}
.halo-form button[disabled]{cursor:not-allowed;opacity:.5}

.gateway-switch{text-align:center;margin-top:1.5rem;font-size:.82rem;color:var(--text-muted)}
.gateway-switch a,.gateway-switch button{color:var(--accent);font-weight:600;background:none;border:none;cursor:pointer;text-decoration:none;font-size:inherit;font-family:inherit}
.gateway-switch a:hover,.gateway-switch button:hover{text-decoration:underline}
.gateway-view-panel{display:none}
.gateway-view-panel.active{display:block}

.back-to-login{display:inline-flex;align-items:center;gap:.4rem;color:var(--text-muted);background:none;border:none;cursor:pointer;padding:0;margin-bottom:1.5rem;font-family:inherit;font-size:.8rem;transition:color .2s}
.back-to-login:hover{color:var(--accent)}
.back-to-login svg{width:1rem;height:1rem}

/* 社交登录 */
.social-divider{position:relative;margin:1.5rem 0;text-align:center}
.social-divider .divider-line{position:absolute;inset:0;display:flex;align-items:center}
.social-divider .divider-line::before{content:'';width:100%;border-top:1px solid var(--glass-border)}
.social-divider .divider-text{position:relative;display:flex;justify-content:center;font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--text-muted)}
.social-divider .divider-text span{background:var(--card-bg);padding:0 .8rem}
.social-buttons{display:flex;flex-direction:column;gap:.6rem;margin-top:.5rem}
.social-btn{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.7rem 1rem;border:1px solid var(--glass-border);border-radius:12px;background:transparent;cursor:pointer;transition:all .2s;text-decoration:none;color:var(--text-secondary);font-size:.82rem}
.social-btn:hover{background:var(--accent-light);border-color:transparent}
.social-btn img,.social-btn svg{width:1.1rem;height:1.1rem;flex-shrink:0}
.social-btn-form{display:contents}

/* 提示 Toast */
.sepo-toast{position:fixed;top:1.5rem;right:1.5rem;z-index:9999;display:flex;align-items:center;gap:.6rem;padding:.8rem 1.2rem;background:var(--card-bg);border:1px solid var(--glass-border);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.1);font-size:.88rem;opacity:0;visibility:hidden;transform:translateY(-.5rem);transition:all .3s ease;pointer-events:none}

/* 退出登录用户卡片 */
.logout-user-card{display:flex;align-items:center;gap:16px;padding:20px;background:var(--accent-light);border-radius:28px;margin-bottom:24px;justify-content:center}
.logout-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover}
.logout-avatar-placeholder svg{width:56px;height:56px;color:var(--text-muted)}
.logout-user-info{display:flex;flex-direction:column;gap:4px}
.logout-display-name{font-weight:600;font-size:1rem}
.logout-username{font-size:.8rem;color:var(--text-secondary)}
.sepo-toast.show{opacity:1;visibility:visible;transform:translateY(0)}
.sepo-toast.error{border-color:rgba(239,68,68,.3)}
.sepo-toast.success{border-color:rgba(34,197,94,.3)}
.sepo-toast .sepo-toast-icon{flex-shrink:0;width:1.2rem;height:1.2rem;display:flex;align-items:center;justify-content:center}
.sepo-toast .sepo-toast-icon svg{width:100%;height:100%}

/* 找回密码提示 */
.forgot-tip{margin-top:1.5rem;padding:1rem;border-radius:12px;background:var(--accent-light);border:1px solid transparent;font-size:.75rem;color:var(--text-muted);line-height:1.6}

/* 验证码按钮 */
.form-input-group{display:flex;align-items:flex-end;gap:.8rem}
.form-input-group .form-input{flex:1}
#emailCodeSendButton{flex-shrink:0;padding:.5rem .8rem;border:1px solid var(--glass-border);border-radius:10px;background:transparent;color:var(--text-muted);font-size:.72rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
#emailCodeSendButton:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* 移动端 */
@media(max-width:768px){.gateway-page{padding:1rem}.gateway-card{padding:1.5rem}}
@media(max-width:480px){.gateway-card{border-radius:16px;padding:1.2rem}.form-header h2{font-size:1.4rem}}

/* ===== 折叠侧边栏（登录/注册/密码重置页通用） ===== */
.desktop-actions{display:none!important}
.sidebar{position:fixed!important;left:0!important;top:0!important;bottom:0!important;width:52px!important;overflow:hidden;transition:width .3s ease;border-radius:0!important;z-index:1000!important}
.sidebar .sidebar-inner{padding:24px 4px;align-items:center}
.sidebar .sidebar-logo img{width:40px;height:40px;border-radius:12px;margin-bottom:12px}
.sidebar .sidebar-logo .site-name{display:none}
.sidebar .sidebar-nav{margin-top:48px}
.sidebar .sidebar-footer{padding:8px 4px;display:flex;flex-direction:column;align-items:center}
.sidebar .nav-item{padding:10px 4px;min-width:0;width:100%;justify-content:center}
.sidebar .contact-card{padding:0;margin:0;border:none;background:transparent;display:flex;flex-direction:column;align-items:center}
.sidebar .contact-item{padding:4px 0;gap:0;justify-content:center;width:100%}
.sidebar .contact-item svg{width:18px;height:18px;margin:0 auto}
.sidebar:hover{width:260px!important;border-radius:0 32px 32px 0!important}
.sidebar:hover .sidebar-inner{padding:24px 12px;align-items:stretch}
.sidebar:hover .sidebar-logo img{width:68px;height:68px;border-radius:20px;margin-bottom:12px}
.sidebar:not(:hover) .sidebar-logo-expanded{display:none}
.sidebar:not(:hover) .sidebar-logo-collapsed{display:block}
.sidebar:hover .sidebar-logo-expanded{display:block}
.sidebar:hover .sidebar-logo-collapsed{display:none}
.sidebar:hover .sidebar-logo .site-name{display:block}
.sidebar:hover .nav-item{padding:10px 20px;min-width:165px;width:auto;gap:10px;justify-content:center}
.sidebar:hover .nav-item > span{flex:1;text-align:left;margin-left:4px}
.sidebar:hover .contact-item{gap:6px;padding:6px 8px;justify-content:center;width:auto}
.sidebar:hover .contact-item > span{flex:1;text-align:left;margin-left:4px}
.sidebar:hover .about-btn{width:100%;display:flex;justify-content:center}
.sidebar:hover .about-btn .nav-item{padding:10px 20px;gap:10px;background:var(--accent-light);color:var(--accent);border:1px solid rgba(59,130,246,0.2);font-weight:600}
.sidebar:hover .about-btn .nav-item > span{flex:1;text-align:left;margin-left:4px}
.sidebar:hover .sidebar-footer{padding:16px 12px}
.sidebar:hover .contact-card{background:var(--contact-card-bg);backdrop-filter:blur(8px);border-radius:28px;padding:12px 4px;margin-bottom:12px;border:1px solid var(--glass-border)}
.nav-item span,.contact-item span,.about-btn .nav-item span{display:none}
.sidebar:hover .nav-item span,.sidebar:hover .contact-item span,.sidebar:hover .about-btn .nav-item span{display:inline}

/* 折叠状态：隐藏有子菜单的箭头、二维码和底部区域 */
.sidebar:not(:hover) .nav-item-wrapper.has-sub > .nav-item::after { display: none !important; }
.sidebar:not(:hover) .nav-item-wrapper.has-sub > .nav-item { padding-right: 4px !important; }
.sidebar:not(:hover) .qr-row { display: none !important; }
.sidebar:not(:hover) .contact-row { display: none !important; }
.sidebar:not(:hover) .sidebar-footer { display: none !important; }
.sidebar:hover .sidebar-footer { display: flex !important; }
@media(max-width:1000px){body{padding-top:56px!important}}

/* 网关页面使用独立布局：手机端恢复为顶部“菜单”按钮展开的导航面板。 */
@media(max-width:1000px){
  body{padding-top:64px!important}
  .sidebar{display:none!important;left:auto!important;right:10px!important;top:72px!important;bottom:auto!important;width:66.666vw!important;max-width:calc(100vw - 20px)!important;max-height:calc(100vh - 84px)!important;transform:none!important;border-radius:22px!important;overflow:auto!important;box-shadow:0 18px 45px rgba(15,23,42,.16)!important}
  .sidebar.open{display:flex!important}
  .sidebar.open .sidebar-inner{padding:16px 14px 18px!important;overflow-y:auto!important}
  .sidebar.open .sidebar-logo{display:none!important}
  .sidebar.open .sidebar-nav{margin-top:8px!important;transform:none!important;gap:8px!important}
  .sidebar.open .nav-item-wrapper{display:block!important}
  .sidebar.open .nav-item{width:100%!important;min-width:0!important;padding:11px 16px!important;font-size:.92rem!important;transform:none!important}
  .sidebar.open .nav-item > span{display:inline!important}
  .sidebar.open .nav-item-wrapper.has-sub > .nav-item::after{display:block!important}
  .sidebar.open .nav-item-wrapper.has-sub.open > .nav-item::after{transform:translateY(-35%) rotate(135deg)!important}
  .sidebar.open .nav-item-wrapper.has-sub > .sub-nav{display:none!important}
  .sidebar.open .nav-item-wrapper.has-sub.open > .sub-nav{display:flex!important;position:static!important;flex-direction:column!important;gap:3px!important;margin:4px 8px 0 18px!important;padding:4px 0 4px 10px!important;border-left:2px solid var(--accent-light)!important}
  .sidebar.open .sub-nav .sub-item{display:flex!important;align-items:center!important;gap:10px!important;padding:9px 12px!important;color:var(--text-secondary)!important;font-size:.86rem!important;text-decoration:none!important;border-radius:10px!important}
  .sidebar.open .sidebar-footer{display:none!important}
  body.dark .sidebar{box-shadow:0 18px 45px rgba(0,0,0,.35)!important}
}

/* 深色模式：登录、注册与找回密码保持清晰的表单层级。 */
body.dark .gateway-page{background:radial-gradient(circle at 72% 18%,rgba(59,130,246,.1),transparent 32%),radial-gradient(circle at 22% 82%,rgba(14,165,233,.07),transparent 30%),#0b1120!important}
body.dark .gateway-card{background:#111c2d;border-color:rgba(148,163,184,.18);box-shadow:0 20px 56px rgba(0,0,0,.34)}
body.dark .form-header p{color:#94a3b8}
body.dark .halo-form .form-input{background:#0d1728;border-color:rgba(148,163,184,.22)}
body.dark .halo-form .form-input:hover{border-color:rgba(96,165,250,.42)}
body.dark .halo-form .form-input input{color:#e2e8f0}
body.dark .halo-form .form-input input::placeholder{color:#718096;opacity:1}
body.dark .halo-form .form-input input:-webkit-autofill{-webkit-text-fill-color:#e2e8f0;-webkit-box-shadow:0 0 0 1000px #0d1728 inset;caret-color:#60a5fa}
body.dark .social-btn{background:rgba(15,23,42,.5);border-color:rgba(148,163,184,.2);color:#cbd5e1}
body.dark .social-btn:hover{background:rgba(96,165,250,.14);border-color:rgba(96,165,250,.32)}
body.dark .social-divider .divider-text span{background:#111c2d}
body.dark .forgot-tip{background:rgba(96,165,250,.1);border-color:rgba(96,165,250,.16);color:#a8b7ca}
body.dark #emailCodeSendButton{border-color:rgba(148,163,184,.24);color:#a8b7ca}
body.dark .sepo-toast{background:#162236;border-color:rgba(148,163,184,.2);box-shadow:0 12px 36px rgba(0,0,0,.38)}
body.dark .sidebar .qr-row{background:rgba(15,23,42,.52)}
body.dark .sidebar:hover .contact-card{background:rgba(15,23,42,.42);border-color:rgba(148,163,184,.14)}

/* 密码重置流程复用网关布局，并保留 Halo 原生表单与验证码逻辑。 */
.password-reset-view .alert{margin:.65rem 0 0;padding:.7rem .8rem;border-radius:10px;background:rgba(59,130,246,.08);color:var(--text-secondary);font-size:.78rem;line-height:1.55}
.password-reset-view .alert-error{background:rgba(239,68,68,.08);color:#dc2626}
.password-reset-back{text-align:center;margin-top:1.4rem;font-size:.82rem}
.password-reset-back a{color:var(--accent);font-weight:600;text-decoration:none}
.password-reset-back a:hover{text-decoration:underline}
body.dark .password-reset-view .alert{background:rgba(96,165,250,.1);color:#a8b7ca}
body.dark .password-reset-view .alert-error{background:rgba(248,113,113,.12);color:#fca5a5}