/* =========================================================
   会员端（登录 / 注册 / 会员中心）样式
   设计语言：深色底 + 紫色主色 + 玻璃面板 + 胶囊按钮
   本节 :root 是整个会员端的令牌源，workspace.css 只在其上追加对话/生成专用令牌
   ========================================================= */

:root {
    /* 表单控件（select 下拉、滚动条、日期选择）跟随深色渲染 */
    color-scheme: dark;

    /* ---------- 品牌：紫色为主 ---------- */
    --brand: #8b3dff;
    --brand-dark: #6d3bff;
    --brand-light: #c9a7ff;
    --brand-soft: rgba(139, 61, 255, .16);
    --brand-line: rgba(139, 61, 255, .42);
    --brand-grad: linear-gradient(135deg, #6d3bff 0%, #8b3dff 46%, #a855f7 100%);
    --brand-glow: rgba(139, 61, 255, .34);

    /* ---------- 文字：三级灰阶，均在深底上满足 WCAG AA 4.5:1，勿再调暗 ---------- */
    --text-main: #f7f7fb;
    --text-strong: #ffffff;
    --text-sub: #a9a9bd;
    --text-muted: #777891;

    /* ---------- 背景与面板 ---------- */
    --bg: #080a0f;
    --bg-soft: #0d1118;
    --app-bg: linear-gradient(135deg, #080a0f 0%, #0c1017 62%, #10131a 100%);
    --panel: #11141b;
    --panel-soft: #151922;
    --panel-hover: #1d2330;
    --panel-glass: rgba(17, 20, 27, .86);

    /* ---------- 描边与分割线 ---------- */
    --border: #252b38;
    --line: rgba(255, 255, 255, .12);
    --line-soft: rgba(255, 255, 255, .08);
    --line-strong: rgba(255, 255, 255, .2);

    /* ---------- 语义色 ---------- */
    --danger: #ff4e63;
    --danger-soft: rgba(255, 78, 99, .14);
    --success: #3ee58b;
    --success-soft: rgba(62, 229, 139, .14);
    --warning: #ffd23f;

    /* ---------- 形状 ---------- */
    --radius-card: 14px;
    --radius-field: 11px;
    --radius-pill: 9999px;

    /* ---------- 阴影 ---------- */
    --shadow-card: 0 18px 48px rgba(0, 0, 0, .34);
    --shadow-sm: 0 10px 28px rgba(0, 0, 0, .2);
    --shadow-lg: 0 24px 76px rgba(0, 0, 0, .54);
    --focus-ring: 0 0 0 3px rgba(139, 61, 255, .18);

    /* ---------- 动效 ---------- */
    --ease-out: cubic-bezier(.22, .61, .36, 1);
    --dur-fast: 160ms;
    --dur-base: 260ms;
    --dur-slow: 420ms;
}

* {
    box-sizing: border-box;
}

/* 表单控件默认使用浏览器自带字体（中文会落到 Arial），统一回应用字体栈 */
.member-app button,
.member-app input,
.member-app select,
.member-app textarea {
    font-family: inherit;
}

html, body {
    margin: 0;
    padding: 0;
}

body.member-app {
    min-height: 100vh;
    background: var(--app-bg);
    background-attachment: fixed;
    color: var(--text-main);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* ---------- 背景光斑：紫色氛围 ---------- */
.aurora {
    position: fixed;
    border-radius: 50%;
    filter: blur(110px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}

.aurora-1 {
    width: 620px;
    height: 620px;
    top: -260px;
    left: -180px;
    background: radial-gradient(circle at 35% 35%, rgba(109, 59, 255, .85), rgba(109, 59, 255, 0) 70%);
}

.aurora-2 {
    width: 520px;
    height: 520px;
    right: -200px;
    bottom: -220px;
    background: radial-gradient(circle at 60% 40%, rgba(168, 85, 247, .7), rgba(168, 85, 247, 0) 70%);
}

/* ---------- 品牌 ---------- */
.brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 26px 0 0 32px;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--text-strong);
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--brand-grad);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 6px 16px var(--brand-glow);
}

/* ---------- 认证卡片 ---------- */
.auth-wrap {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 74px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px 56px;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    padding: 36px 34px 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--panel-glass);
    backdrop-filter: blur(24px) saturate(1.16);
    -webkit-backdrop-filter: blur(24px) saturate(1.16);
    box-shadow: var(--shadow-card);
}

.auth-title {
    margin: 0 0 6px;
    color: var(--text-strong);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.2px;
}

.auth-subtitle {
    margin: 0 0 24px;
    color: var(--text-sub);
    font-size: 13.5px;
}


/* ---------- 表单 ---------- */
.auth-form.hidden {
    display: none;
}

.field {
    position: relative;
    display: flex;
    align-items: center;
    height: 52px;
    padding: 0 16px;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    background: var(--bg-soft);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.field:focus-within {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}

.field.invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-soft);
}

.field-icon {
    flex: 0 0 auto;
    display: inline-flex;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    color: var(--text-muted);
}

.field-icon svg {
    width: 18px;
    height: 18px;
}

.field-prefix {
    flex: 0 0 auto;
    margin-right: 8px;
    padding-right: 10px;
    border-right: 1px solid var(--line-soft);
    color: var(--text-sub);
    font-size: 14.5px;
}

.field input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text-main);
    font-family: inherit;
    font-size: 15px;
}

.field input::placeholder {
    color: var(--text-muted);
}

/* 浏览器自动填充会强制白底黑字，这里强制回深色 */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-main);
    -webkit-box-shadow: 0 0 0 1000px var(--bg-soft) inset;
    transition: background-color 9999s ease-out;
}

.field-error {
    margin: -8px 0 12px;
    padding-left: 2px;
    color: var(--danger);
    font-size: 12.5px;
    min-height: 18px;
}

.field-error:empty {
    display: none;
}

/* 验证码按钮 */
.code-btn {
    flex: 0 0 auto;
    margin-left: 8px;
    padding: 0 0 0 12px;
    border: 0;
    border-left: 1px solid var(--line-soft);
    background: none;
    color: var(--brand-light);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
}

.code-btn:hover:not(:disabled) {
    color: var(--text-strong);
}

.code-btn:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
}

.pwd-strength {
    margin: -8px 0 12px;
    color: var(--text-muted);
    font-size: 12.5px;
    min-height: 18px;
}

.pwd-strength.level-1 {
    color: var(--danger);
}

.pwd-strength.level-2 {
    color: var(--warning);
}

.pwd-strength.level-3 {
    color: var(--success);
}

/* 主按钮：胶囊 + 紫色渐变光效 */
.btn-primary {
    width: 100%;
    height: 48px;
    margin-top: 6px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--brand-grad);
    color: #fff;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    box-shadow: 0 10px 26px var(--brand-glow);
    transition: filter var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}

.btn-primary:hover:not(:disabled) {
    filter: brightness(1.08);
    box-shadow: 0 14px 32px var(--brand-glow);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(1px);
}

.btn-primary:disabled {
    background: var(--panel-hover);
    color: var(--text-muted);
    box-shadow: none;
    cursor: not-allowed;
}

.btn-primary.danger {
    background: linear-gradient(135deg, #ff4e63, #ff7a6b);
    box-shadow: 0 10px 26px rgba(255, 78, 99, .3);
}

/* 协议与辅助链接 */
.agree {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 16px;
    color: var(--text-sub);
    font-size: 12.5px;
}

.agree input {
    margin: 3px 0 0;
    accent-color: var(--brand);
}

.agree a {
    color: var(--brand-light);
    text-decoration: none;
}

.auth-switch {
    margin: 20px 0 0;
    color: var(--text-sub);
    font-size: 13.5px;
    text-align: center;
}

.auth-switch a {
    color: var(--brand-light);
    font-weight: 500;
    text-decoration: none;
}

.auth-switch a:hover {
    color: var(--text-strong);
    text-decoration: underline;
}

.auth-hint {
    margin: 14px 0 0;
    color: var(--text-muted);
    font-size: 12.5px;
    text-align: center;
}

/* ---------- 页脚 ---------- */
.auth-footer {
    position: relative;
    z-index: 1;
    padding: 0 0 24px;
    color: var(--text-muted);
    font-size: 12.5px;
    text-align: center;
}

.auth-footer a {
    color: var(--text-sub);
    text-decoration: none;
}

.auth-footer a:hover {
    color: var(--brand-light);
}

/* ---------- 轻提示 ---------- */
.toast-box {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.toast {
    max-width: 88vw;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(21, 25, 34, .96);
    color: var(--text-main);
    font-size: 13.5px;
    box-shadow: var(--shadow-sm);
    animation: toast-in .18s ease;
}

.toast.success {
    border-color: rgba(62, 229, 139, .38);
    background: rgba(16, 51, 37, .96);
    color: #b8f7d4;
}

.toast.error {
    border-color: rgba(255, 78, 99, .42);
    background: rgba(58, 21, 28, .96);
    color: #ffc3cb;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- 会员中心面板 ---------- */
.panel {
    width: 100%;
    max-width: 520px;
    padding: 30px 28px 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--panel-glass);
    backdrop-filter: blur(24px) saturate(1.16);
    -webkit-backdrop-filter: blur(24px) saturate(1.16);
    box-shadow: var(--shadow-card);
}

.panel-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #6d3bff 0%, #8b3dff 55%, #c9a7ff 100%);
    color: #fff;
    font-weight: 600;
}

.avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.avatar-lg {
    width: 52px;
    height: 52px;
    font-size: 20px;
}

.panel-name {
    color: var(--text-strong);
    font-size: 18px;
    font-weight: 650;
}

.panel-sub {
    color: var(--text-sub);
    font-size: 13px;
}

.info-list {
    margin: 0 0 22px;
    padding: 0;
    border-top: 1px solid var(--line-soft);
    list-style: none;
}

.info-list li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 2px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 14px;
}

.info-list span:first-child {
    color: var(--text-sub);
}

.info-list span:last-child {
    color: var(--text-main);
    font-weight: 500;
    text-align: right;
    word-break: break-all;
}

.btn-ghost {
    width: 100%;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    background: var(--panel);
    color: var(--text-main);
    font-family: inherit;
    font-size: 14.5px;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
}

.btn-ghost:hover {
    border-color: var(--line-strong, rgba(255, 255, 255, .2));
    background: var(--panel-hover);
    color: var(--danger);
}

@media (max-width: 520px) {
    .brand {
        padding: 20px 0 0 20px;
    }

    .auth-card {
        padding: 28px 22px 24px;
        border-radius: 12px;
    }

    .auth-title {
        font-size: 23px;
    }
}