/* ============================================================
   xiaotoukui 登录体系独立页设计（login / register / forgot-password）
   2026-09-17 现代分屏式：左侧品牌视觉面板 + 右侧表单面板；<960px 单列。
   全部选择器 scope 在 .hc-auth 下（hc-bind-* 控件基类在 common.css，
   此处只做本页增强，不影响 bindphone Modal）；
   暗色模式靠既有 CSS 变量自动适配（品牌面板恒为深紫渐变不受影响）。
   ============================================================ */

/* ===== 布局骨架 ===== */
.hc-auth {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
}

/* ===== 左：品牌面板 ===== */
.hc-auth-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px 48px 32px;
    color: #fff;
    background:
        radial-gradient(900px 520px at 85% -10%, rgba(167, 108, 255, .55), transparent 60%),
        radial-gradient(700px 640px at -12% 108%, rgba(91, 33, 182, .65), transparent 62%),
        linear-gradient(158deg, #7C3AED 0%, #5B21B6 58%, #45187F 100%);
    isolation: isolate;
}
/* 细网格底纹（低调科技感） */
.hc-auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(720px 560px at 70% 24%, #000 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(720px 560px at 70% 24%, #000 30%, transparent 78%);
    pointer-events: none;
}
/* 底部渐隐收边 */
.hc-auth-brand::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 160px;
    background: linear-gradient(180deg, transparent, rgba(23, 8, 46, .5));
    pointer-events: none;
}
/* 流体底纹画布（HCFluidBg，2026-09-22）：z0 垫底，浮卡 z1/内容 z2 在上；
   底部渐隐 ::after 在画布之上继续收边。挂载后（hc-fluid-on）网格底纹
   由流体接管隐藏；未挂载时本样式不出现，渐变+网格即完整形态 */
.hc-auth-brand .hc-fluid-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.hc-auth-brand.hc-fluid-on::before { display: none; }
.hc-auth-brand-in { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; }

.hc-auth-brand-top { display: flex; align-items: center; gap: 12px; }
.hc-auth-brand-logo {
    width: 46px; height: 46px;
    border-radius: 13px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
}
.hc-auth-brand-logo img { width: 28px; height: 28px; object-fit: contain; }
.hc-auth-brand-name { font-size: 19px; font-weight: 700; letter-spacing: .4px; }

.hc-auth-brand-hero { margin: auto 0; padding: 48px 0; max-width: 480px; }
.hc-auth-brand-hero h2 {
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: .3px;
    margin: 0 0 14px;
}
.hc-auth-brand-hero > p {
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255,255,255,.82);
    margin: 0 0 30px;
}
.hc-auth-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hc-auth-feats li { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: rgba(255,255,255,.92); }
.hc-auth-feat-dot {
    flex: 0 0 34px; height: 34px;
    border-radius: 10px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.22);
    display: flex; align-items: center; justify-content: center;
    color: #C9B1FF;
}
.hc-auth-brand-foot { font-size: 12px; color: rgba(255,255,255,.55); }

/* 玻璃拟态浮动卡（桌面装饰，模拟商品卡；纯 CSS 无文案——避免多语言维护） */
.hc-auth-float {
    position: absolute;
    z-index: 1;
    width: 190px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 44px rgba(20, 6, 44, .35);
    animation: hcAuthFloat 7s ease-in-out infinite;
}
.hc-auth-float .hc-af-thumb {
    height: 74px;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.08));
    margin-bottom: 10px;
    display: flex; align-items: center; justify-content: center;
}
.hc-auth-float .hc-af-thumb::after {
    content: "";
    width: 30px; height: 30px;
    border-radius: 9px;
    background: rgba(255,255,255,.30);
}
.hc-auth-float .hc-af-line { height: 9px; border-radius: 5px; background: rgba(255,255,255,.26); margin-bottom: 8px; }
.hc-auth-float .hc-af-line.hc-af-line-sm { width: 56%; background: rgba(255,255,255,.16); }
.hc-auth-float .hc-af-price {
    display: inline-block;
    margin-top: 3px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: #5B21B6;
    font-size: 11.5px;
    font-weight: 700;
}
.hc-auth-float-a { top: 18%; right: 10%; transform: rotate(5deg); }
.hc-auth-float-b { top: 46%; right: 30%; transform: rotate(-4deg); animation-delay: 1.4s; }
.hc-auth-float-c { bottom: 12%; right: 8%; transform: rotate(3deg); animation-delay: 2.8s; }
@keyframes hcAuthFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -12px; }
}

/* ===== 右：表单面板 ===== */
.hc-auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    background: var(--hc-bg);
}
.hc-auth-box { width: 100%; max-width: 400px; }

/* 移动端品牌头的 logo 在表单区顶部再现（桌面隐藏） */
.hc-auth-mlogo { display: none; }

.hc-auth-title { font-size: 24px; font-weight: 700; color: var(--hc-text); margin: 0 0 6px; letter-spacing: .2px; }
.hc-auth-sub { font-size: 13.5px; color: var(--hc-text-muted); margin: 0 0 24px; line-height: 1.6; }

.hc-auth-error {
    background: var(--hc-danger-100);
    color: var(--hc-danger-700);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
    text-align: center;
}

/* ===== 通道面板叠放（grid 同格）：容器高度恒为两面板较高者，切换只切
   可见性（visibility 不占布局但保持占位）——修复通道切换时下方内容
   （分隔线/OAuth/注册引导/页脚）随高度差上下跳动 ===== */
.hc-auth .hc-login-panes { display: grid; }
.hc-auth .hc-login-pane { grid-area: 1 / 1; }
.hc-auth .hc-login-pane.hc-pane-off { visibility: hidden; pointer-events: none; }

/* ===== 通道 tab：分段控件（覆盖 common.css 下划线版） ===== */
.hc-auth .hc-login-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    padding: 4px;
    border: 1px solid var(--hc-line-2);
    border-radius: 12px;
    background: var(--hc-bg-3, var(--hc-bg));
}
.hc-auth .hc-login-tab {
    flex: 1;
    padding: 9px 4px;
    border: none;
    border-radius: 9px;
    margin-bottom: 0;
    background: transparent;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hc-text-muted);
    cursor: pointer;
    transition: color .15s, background .15s, box-shadow .15s;
}
.hc-auth .hc-login-tab:hover { color: var(--hc-text-secondary); }
.hc-auth .hc-login-tab.active {
    color: var(--hc-primary);
    background: var(--hc-surface);
    box-shadow: 0 2px 10px rgba(124, 58, 237, .16);
}

/* ===== 表单控件增强（基类 common.css，此处加高加圆角与 focus ring） ===== */
.hc-auth .hc-bind-row { margin-bottom: 14px; }
/* 忘记密码行：与输入框/按钮的呼吸感（覆盖 common.css 的 -4px 贴边）+ 扩大触达 */
.hc-auth .hc-login-forgot-row { margin: 2px 0 18px; }
.hc-auth .hc-bind-forgot-link { display: inline-block; padding: 5px 2px; }
.hc-auth .hc-bind-input,
.hc-auth .hc-bind-select {
    height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 14.5px;
}
.hc-auth .hc-bind-select { padding-right: 30px; }
.hc-auth .hc-bind-code-row { gap: 10px; margin-bottom: 18px; }
.hc-auth .hc-bind-code-input {
    height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 15px;
    letter-spacing: 5px;
}
.hc-auth .hc-bind-send-btn {
    height: 48px;
    flex-basis: 138px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}
.hc-auth .hc-bind-input:focus,
.hc-auth .hc-bind-select:focus,
.hc-auth .hc-bind-code-input:focus {
    outline: none;
    border-color: var(--hc-primary);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, .12);
}
.hc-auth .hc-bind-submit {
    height: 48px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 55%, #6D28D9 100%);
    box-shadow: 0 8px 20px rgba(124, 58, 237, .28);
}
.hc-auth .hc-bind-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(124, 58, 237, .38);
}

/* ===== OAuth：双列等宽 ===== */
.hc-auth-oauth { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hc-auth .hc-lg-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    margin-bottom: 0;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.hc-auth .hc-lg-google {
    background: var(--hc-surface);
    color: var(--hc-text-secondary);
    border-color: var(--hc-border);
}
.hc-auth .hc-lg-google:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(60,64,67,.16); }
.hc-auth .hc-lg-facebook { background: var(--hc-oauth-facebook); color: var(--hc-on-brand); }
.hc-auth .hc-lg-facebook:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(24,119,242,.35); }

/* Apple 登录（2026-10-05 iOS 上架合规）：黑底白字官方规范形态 */
.hc-auth .hc-lg-apple { background: #000; color: #fff; }
.hc-auth .hc-lg-apple:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.35); }

/* Turnstile 挂件行（2026-10-05）：挂件 iframe 自带 300x65，行内距对齐表单节奏 */
.hc-auth .hc-turnstile-row { margin: 4px 0 12px; }
.hc-auth .hc-turnstile-row .cf-turnstile { min-height: 65px; }

/* ===== 页脚行：返回首页 + 法务链接 ===== */
.hc-auth-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--hc-line-2);
    font-size: 12.5px;
    color: var(--hc-text-muted);
}
.hc-auth-foot a { color: var(--hc-text-muted); text-decoration: none; }
.hc-auth-foot a:hover { color: var(--hc-primary); }

/* ===== 入场动画（reduced-motion 关） ===== */
.hc-auth-box { animation: hcAuthUp .5s cubic-bezier(.22,.68,.36,1) both; }
.hc-auth-brand-in > * { animation: hcAuthUp .55s cubic-bezier(.22,.68,.36,1) both; }
.hc-auth-brand-in > *:nth-child(2) { animation-delay: .08s; }
.hc-auth-brand-in > *:nth-child(3) { animation-delay: .16s; }
@keyframes hcAuthUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* ===== 暗色对比度修补（暗色令牌下输入框/placeholder/tab 偏弱，仅本页 scope） ===== */
html[data-theme="dark"] .hc-auth .hc-bind-input,
html[data-theme="dark"] .hc-auth .hc-bind-select,
html[data-theme="dark"] .hc-auth .hc-bind-code-input {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .04);
}
html[data-theme="dark"] .hc-auth .hc-bind-input::placeholder,
html[data-theme="dark"] .hc-auth .hc-bind-code-input::placeholder {
    color: #948CB8;
    opacity: 1;
}
html[data-theme="dark"] .hc-auth .hc-login-tabs {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
}
html[data-theme="dark"] .hc-auth .hc-login-tab.active {
    background: rgba(255, 255, 255, .13);
    color: #C9B4FF;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}

/* ===== 响应式：<960px 单列，品牌面板收成紧凑头部 ===== */
@media (max-width: 959.98px) {
    .hc-auth { grid-template-columns: 1fr; }
    .hc-auth-brand { padding: 24px 22px 20px; }
    .hc-auth-brand::before { mask-image: none; -webkit-mask-image: none; }
    .hc-auth-brand-hero { margin: 0; padding: 14px 0 18px; max-width: none; }
    .hc-auth-brand-hero h2 { font-size: 21px; margin-bottom: 8px; }
    /* 副文案移动端省高：headline + 卖点行已足够传达 */
    .hc-auth-brand-hero > p { display: none; }
    .hc-auth-feats { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
    .hc-auth-feats li { font-size: 12px; white-space: nowrap; }
    /* 图标点移动端去掉，纯文字行最紧凑（表单首屏完整性优先） */
    .hc-auth-feat-dot { display: none; }
    .hc-auth-brand-foot { display: none; }
    .hc-auth-float { display: none; }
    .hc-auth-main { padding: 24px 20px 44px; }
    .hc-auth-box { max-width: 440px; }
}
/* 最窄档（手机竖屏）：卖点只留第一条（最核心），多条换行占高反而抵消头部紧凑化 */
@media (max-width: 519.98px) {
    .hc-auth-feats li:nth-child(n+2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hc-auth-box, .hc-auth-brand-in > *, .hc-auth-float { animation: none; }
}