/* ============================================================
   account.css —— 账号 / 云同步弹窗 + 编辑资料弹层
   与壁纸站登录弹窗完全一致的深色主题（--auth-* 变量）。
   .auth-error 错误提示条同时被「编辑资料」弹层复用。
   ============================================================ */

/* ===== 账号 / 云同步弹窗（与壁纸站登录弹窗完全一致） ===== */
.auth-mask {
    display: none;
    position: fixed;
    z-index: 2500;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: transparent;
    overflow-y: auto;
}

/* 弹窗外壳 */
.auth-dialog {
    position: relative;
    width: 100%;
    max-width: 624px;
    background: var(--auth-bg);
    border: 1px solid var(--auth-line);
    border-radius: 18px;
    padding: 20px 46px 20px 20px;
    margin: auto;
    color: var(--auth-text);
    animation: auth-in 0.22s ease-out;
}
@keyframes auth-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.auth-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--auth-muted);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}
.auth-close:hover { background: var(--auth-card-2); color: var(--auth-text); }

/* 双栏舞台：左品牌 208px + 右表单，间距 44px 用于容纳 or 徽章 */
.auth-stage {
    display: flex;
    gap: 44px;
    position: relative;
}

/* 左侧品牌面板 */
.auth-brand {
    width: 208px;
    flex: none;
    border-radius: 14px;
    padding: 22px 20px 18px;
    background: linear-gradient(160deg, #c1c3c7a6, #c1c3c7a6);
    display: flex;
    flex-direction: column;
}
.auth-brand .plate {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.auth-brand .plate span {
    width: 65px;
    height: 65px;
    background: url("../../images/logo.png") center/contain no-repeat;
}
.auth-brand h4 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}
.auth-brand p {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
}

/* 第三方登录按钮（贴底） */
.brand-action {
    margin-top: auto;
    min-height: 38px;
    border-radius: 10px;
    background: #3b72f0;
    border: 1px solid #3b72f0;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    transition: 0.2s;
    cursor: pointer;
    padding: 0 10px;
}
.brand-action:hover { background: rgba(255, 255, 255, 0.26); }
.brand-action:disabled {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
}

/* or 徽章：压在两栏接缝上，与分段切换器同一水平线 */
.or-badge {
    position: absolute;
    z-index: 2;
    left: 208px;
    top: 16px;
    transform: translateX(9px);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--auth-bg);
    border: 3px solid var(--auth-bg);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--auth-text);
}

/* 右侧表单面板 */
.auth-form {
    flex: 1;
    min-width: 0;
    border-radius: 14px;
    background: var(--auth-card);
    padding: 18px 30px 18px 22px;
}

/* 分段切换器：登录 / 注册 */
.auth-seg {
    display: flex;
    gap: 3px;
    padding: 3px;
    margin-bottom: 12px;
    background: var(--auth-bg);
    border: 1px solid var(--auth-line);
    border-radius: 11px;
}
.auth-seg button {
    flex: 1;
    min-height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--auth-muted);
    font-size: 13px;
    cursor: pointer;
    transition: 0.2s;
}
.auth-seg button:hover { color: var(--auth-text); }
.auth-seg button.on {
    background: var(--auth-brand);
    color: #fff;
    font-weight: 600;
}

/* 输入组 */
.auth-fields { display: grid; gap: 8px; }
.auth-field { position: relative; }
.auth-field input {
    width: 100%;
    height: 44px;
    padding: 10px 16px;
    background: var(--auth-bg);
    border: 1px solid var(--auth-line);
    border-radius: 11px;
    color: var(--auth-text);
    font-size: 14px;
    transition: 0.2s;
}
.auth-field input::placeholder { color: var(--auth-muted); }
.auth-field input:hover { border-color: var(--auth-input-hover); }
.auth-field input:focus {
    outline: none;
    border-color: var(--auth-brand);
    background: var(--auth-card-2);
}
.auth-field.pwd input { padding-right: 42px; }

/* 密码可见性切换 */
.eye-btn {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    border-radius: 13px;
    border: none;
    background: transparent;
    color: var(--auth-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
.eye-btn:hover { background: var(--auth-card-2); color: var(--auth-brand); }
.eye-btn svg { width: 18px; height: 18px; }
.eye-btn .slash { display: block; }
.eye-btn.on .slash { display: none; }

/* 错误提示条（账号弹窗与编辑资料弹层共用） */
.auth-error {
    display: none;
    margin-top: 10px;
    padding: 8px 11px;
    background: var(--auth-danger-bg);
    border: 1px solid var(--auth-danger-border);
    border-radius: 9px;
    color: var(--auth-danger);
    font-size: 12px;
}
.auth-error.show { display: block; }

/* 圆形箭头提交按钮：压在表单右边缘 */
.arrow-btn {
    position: absolute;
    z-index: 2;
    right: -26px; top: 50%;
    transform: translateY(-50%);
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--auth-brand);
    border: 4px solid var(--auth-bg);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}
.arrow-btn:hover { background: var(--auth-brand-hover); }
.arrow-btn:disabled {
    background: var(--auth-card-2);
    color: var(--auth-muted);
    cursor: default;
}
.arrow-btn svg { width: 22px; height: 22px; }

/* 已登录态：外壳收窄到与“编辑资料”弹窗一致（440px），登录/注册表单态仍保持 624px */
.auth-mask.is-logged .auth-dialog {
    width: 440px;
    max-width: calc(100vw - 48px);
    padding: 26px;
}

/* 已登录面板 */
.auth-logged {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0;
}

.account-buttons {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    width: 100%;
}

.account-btn {
    flex: 1;
    height: 42px;
    border: 1px solid var(--auth-line);
    border-radius: 10px;
    background: var(--auth-card);
    font-size: 14px;
    color: var(--auth-text);
    cursor: pointer;
    transition: all 0.2s ease;
}
.account-btn:hover { background: var(--auth-card-2); }

.account-btn-primary {
    background: var(--auth-brand);
    border-color: var(--auth-brand);
    color: #fff;
}
.account-btn-primary:hover {
    background: var(--auth-brand-hover);
    border-color: var(--auth-brand-hover);
}

.account-avatar-circle {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: visible;
    border: 2px solid var(--auth-brand);
    box-shadow: 0 4px 14px rgba(91, 140, 255, 0.25);
    cursor: pointer;
}
.account-avatar-circle img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.account-avatar-edit {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--auth-brand);
    border: 2px solid var(--auth-bg, #14161c);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.account-avatar-circle:hover .account-avatar-edit { background: var(--auth-brand-hover); }

/* 编辑资料弹层 */
.profile-mask {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 2600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.profile-dialog {
    position: relative;
    width: 440px;
    max-width: calc(100vw - 32px);
    background: var(--auth-card, #1b1e26);
    border: 1px solid var(--auth-line, #2a2f3a);
    border-radius: 18px;
    padding: 26px 26px 22px;
    color: var(--auth-text, #eef1f7);
    animation: auth-in 0.25s ease;
}
.profile-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    color: var(--auth-muted, #8b919d);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.profile-close:hover { color: var(--auth-text, #eef1f7); }
.profile-title { margin: 0; font-size: 19px; font-weight: 700; }
.profile-sub { margin: 6px 0 18px; font-size: 13px; color: var(--auth-muted, #8b919d); }
.profile-avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.profile-pic {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--auth-brand, #5b8cff);
    flex-shrink: 0;
    display: inline-block;
}
.profile-pic img { width: 100%; height: 100%; object-fit: cover; }
/* 头像上传中：半透明遮罩 + 旋转圈 */
.profile-pic-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 12, 18, 0.55);
    border-radius: 50%;
}
/* hidden 属性需显式隐藏，否则上面的 display:flex 会覆盖 [hidden] 默认样式导致转圈常驻 */
.profile-pic-loading[hidden] { display: none; }
.profile-pic-loading::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: profile-spin 0.7s linear infinite;
}
@keyframes profile-spin { to { transform: rotate(360deg); } }
.profile-mini-btn {
    background: var(--auth-card-2, #232733);
    border: 1px solid var(--auth-line, #2a2f3a);
    color: var(--auth-text, #eef1f7);
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.profile-mini-btn:hover { background: var(--auth-card-2); }
.profile-mini-btn:disabled { opacity: 0.6; cursor: default; }
.profile-tip { margin: 8px 0 0; font-size: 12px; color: var(--auth-muted, #8b919d); }
.profile-rows { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.profile-row { display: flex; align-items: center; gap: 14px; }
.profile-row label { width: 60px; flex-shrink: 0; font-size: 14px; color: var(--auth-muted, #8b919d); }
.profile-row input {
    flex: 1;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--auth-line, #2a2f3a);
    background: var(--auth-bg, #14161c);
    color: var(--auth-text, #eef1f7);
    font-size: 14px;
    outline: none;
}
.profile-row input:focus { border-color: var(--auth-brand, #5b8cff); }
.profile-val { font-size: 14px; color: var(--auth-text, #eef1f7); }
.profile-tier {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    background: var(--auth-card-2, #232733);
    color: var(--auth-muted, #8b919d);
}
.profile-tier.on { background: linear-gradient(135deg, #f5b942, #e8930c); color: #fff; }
.profile-foot { display: flex; gap: 12px; margin-top: 4px; }
.profile-btn {
    flex: 1;
    height: 42px;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.profile-btn-ghost {
    background: var(--auth-card, #1b1e26);
    border: 1px solid var(--auth-line, #2a2f3a);
    color: var(--auth-text, #eef1f7);
}
.profile-btn-ghost:hover { background: var(--auth-card-2, #232733); }
.profile-btn-primary {
    background: var(--auth-brand, #5b8cff);
    border: 1px solid var(--auth-brand, #5b8cff);
    color: #fff;
}
.profile-btn-primary:hover { background: var(--auth-brand-hover, #4a7aef); }
.profile-btn:disabled { opacity: 0.6; cursor: default; }

.account-username {
    font-size: 17px;
    font-weight: 600;
    color: var(--auth-text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.account-vip {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    background: linear-gradient(135deg, #f5b942, #e8930c);
    border-radius: 6px;
    padding: 2px 7px;
    line-height: 1.4;
}

.account-phone {
    font-size: 13px;
    color: var(--auth-muted);
}

.account-sync-status {
    font-size: 13px;
    color: var(--auth-muted);
}
.account-sync-status.success { color: var(--auth-ok); }
.account-sync-status.error { color: var(--auth-danger); }

/* 窄屏改为单栏：品牌面板收成横条，浮层控件回归常规流 */
@media (max-width: 680px) {
    .auth-mask { padding: 16px; }
    .auth-dialog { max-width: 420px; padding: 20px; }
    .auth-stage { flex-direction: column; gap: 14px; }
    .auth-brand { width: auto; padding: 16px; }
    .auth-brand .plate { width: 44px; height: 44px; margin-bottom: 10px; }
    .auth-brand .plate span { width: 28px; height: 28px; }
    .auth-form { padding: 0; background: transparent; }
    .or-badge { display: none; }
    .arrow-btn {
        position: static;
        transform: none;
        width: 100%;
        height: 46px;
        border-radius: 11px;
        border: none;
        margin-top: 14px;
    }
}