/* ============================================================
   settings.css —— 设置面板（右侧滑出抽屉）
   深色主题 + 主题蓝强调色，与扩展安装引导弹窗 / 账号弹窗一致。
   ============================================================ */

/* 深色主题变量（默认）：与 .ext-dialog / .auth-mask 同一套配色 */
.settings-mask {
    --st-bg: rgba(24, 28, 40, 0.94);
    --st-nav-bg: rgba(0, 0, 0, 0.2);
    --st-card: rgba(255, 255, 255, 0.025);
    --st-card-2: rgba(255, 255, 255, 0.055);
    --st-line: rgba(255, 255, 255, 0.08);
    --st-text: #eef1f7;
    --st-muted: #98a2b8;
    --st-brand: #5b8cff;
    --st-brand-hover: #4472e8;
    --st-brand-text: #9dbbff;
    --st-brand-bg: rgba(91, 140, 255, 0.12);
    --st-brand-border: rgba(91, 140, 255, 0.45);
    --st-shadow: rgba(0, 0, 0, 0.5);
    --st-danger: #ff5f6d;
    /* 危险色/品牌色半透明（color-mix 的兼容替代，Chrome 111 前不支持 color-mix） */
    --st-danger-border: rgba(255, 95, 109, 0.4);
    --st-danger-bg-8: rgba(255, 95, 109, 0.08);
    --st-danger-bg-16: rgba(255, 95, 109, 0.16);
    --st-brand-shadow-18: rgba(91, 140, 255, 0.18);

    position: fixed;
    inset: 0;
    z-index: 2400;
    /* 不使用遮罩：背景保持透明、不模糊，抽屉直接滑出覆盖在页面上；
       仍保留该层以接收“点击抽屉外部关闭”的点击事件 */
    background: transparent;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.28s ease;
}
.settings-mask.open {
    visibility: visible;
    opacity: 1;
}

/* 浅色主题变量覆盖：data-theme 由 js/settings/controls.js 按当前生效浅/深模式设置 */
.settings-mask[data-theme="light"] {
    --st-bg: #f4f6fb;
    --st-nav-bg: rgba(15, 35, 80, 0.035);
    --st-card: #ffffff;
    --st-card-2: #f0f3fa;
    --st-line: #e4e8f2;
    --st-text: #1f2637;
    --st-muted: #7a849a;
    --st-brand: #3b72f0;
    --st-brand-hover: #2f60cf;
    --st-brand-text: #3b72f0;
    --st-brand-bg: rgba(59, 114, 240, 0.1);
    --st-brand-border: rgba(59, 114, 240, 0.35);
    --st-shadow: rgba(31, 45, 90, 0.22);
    --st-danger: #e5484d;
    --st-danger-border: rgba(229, 72, 77, 0.4);
    --st-danger-bg-8: rgba(229, 72, 77, 0.08);
    --st-danger-bg-16: rgba(229, 72, 77, 0.16);
    --st-brand-shadow-18: rgba(59, 114, 240, 0.18);
}

.settings-drawer {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 540px;
    max-width: 92vw;
    display: flex;
    background: var(--st-bg);
    border-left: 1px solid var(--st-line);
    box-shadow: -24px 0 64px var(--st-shadow);
    color: var(--st-text);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.settings-mask.open .settings-drawer {
    transform: translateX(0);
}

/* 侧边栏靠右时，设置抽屉改从左侧滑出（body.sb-right 由 cbl.js 同步） */
body.sb-right .settings-drawer {
    right: auto;
    left: 0;
    border-left: none;
    border-right: 1px solid var(--st-line);
    box-shadow: 24px 0 64px var(--st-shadow);
    transform: translateX(-100%);
}
body.sb-right .settings-mask.open .settings-drawer {
    transform: translateX(0);
}

/* ===== 左侧分类导航 ===== */
.settings-nav {
    width: 158px;
    flex: 0 0 158px;
    padding: 56px 12px 20px;
    background: var(--st-nav-bg);
    border-right: 1px solid var(--st-line);
    overflow-y: auto;
}
.settings-nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    margin-bottom: 4px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--st-muted);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.settings-nav-item svg { flex: 0 0 auto; }
.settings-nav-item:hover { background: var(--st-card-2); color: var(--st-text); }
.settings-nav-item.active {
    background: var(--st-brand-bg);
    border-color: var(--st-brand-border);
    color: var(--st-brand-text);
    font-weight: 600;
}

/* ===== 右侧内容区 ===== */
.settings-content {
    flex: 1;
    position: relative;
    overflow-y: auto;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
}
.settings-pane { display: none; }
.settings-pane.active { display: block; flex: 1; min-height: 0; animation: settings-fade 0.2s ease; }
@keyframes settings-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.settings-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    color: var(--st-muted);
    font-size: 15px;
}

/* ===== 个人信息页 ===== */
/* 个人信息页横向加宽：抵消内容区两侧 36px 内边距的一部分 */
.settings-pane[data-pane="profile"] {
    margin: 0 -16px;
}
/* 未登录态：复用 .profile-card 卡片，内容居中 */
#profileLoggedOut {
    animation: settings-fade 0.25s ease;
}
.profile-guest {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 38px 30px 30px;
}
/* 退出登录卡与上方信息卡的间距 */
#profileLogoutWrap { margin-top: 20px !important; gap: 0 !important; }
#profileLogoutWrap .backup-group {
    border: 1px solid var(--st-line);
    border-radius: 18px;
    box-shadow: 0 12px 32px var(--st-shadow);
}

/* 未登录：带渐变光环的 Logo */
.profile-logo {
    position: relative;
    width: 88px;
    height: 88px;
    margin: 0 0 18px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from 200deg, var(--st-brand), #8fb6ff, var(--st-brand));
    box-shadow: 0 10px 28px var(--st-brand-shadow-18);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 外环缓慢呼吸旋转 */
.profile-logo-ring {
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1.5px dashed var(--st-brand-border);
    opacity: 0.7;
    animation: profile-ring-spin 14s linear infinite;
    pointer-events: none;
}
@keyframes profile-ring-spin {
    to { transform: rotate(360deg); }
}
.profile-logo::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--st-card-2);
}
.profile-logo img {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 50%;
}

.profile-guest-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--st-text);
}

.profile-tip {
    max-width: 280px;
    margin: 0 0 22px;
    text-align: center;
    color: var(--st-muted);
    font-size: 13px;
    line-height: 1.7;
}

/* 特性列表 */
.profile-perks {
    width: 100%;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.profile-perks li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: 1px solid var(--st-line);
    border-radius: 12px;
    background: var(--st-card-2);
    color: var(--st-text);
    font-size: 13px;
}
.profile-perks li svg {
    flex: 0 0 auto;
    color: var(--st-brand-text);
}
.profile-perks li span { line-height: 1.4; }

.profile-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    border: none;
    border-radius: 23px;
    background: linear-gradient(135deg, var(--st-brand), var(--st-brand-hover));
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    box-shadow: 0 8px 22px var(--st-brand-shadow-18);
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.profile-login-btn svg {
    transition: transform 0.15s ease;
}
.profile-login-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.profile-login-btn:hover svg { transform: translateX(3px); }
.profile-login-btn:active { transform: translateY(0); box-shadow: 0 4px 14px var(--st-brand-shadow-18); }

.profile-guest-foot {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--st-muted);
    opacity: 0.8;
    text-align: center;
}

/* ===== 个人信息页 · 已登录（信息卡 + 行内操作） ===== */
.profile-card {
    border: 1px solid var(--st-line);
    border-radius: 18px;
    background: var(--st-card);
    box-shadow: 0 12px 32px var(--st-shadow);
    padding: 20px 22px 4px;
    overflow: hidden;
}

/* 卡片头部：头像在左，「•••」更多按钮在右，下方分隔线 */
.profile-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--st-line);
}
.profile-card-avatar {
    position: relative;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg, var(--st-brand), #8fb6ff);
    cursor: pointer;
    transition: transform 0.15s ease;
}
.profile-card-avatar:hover { transform: scale(1.05); }
.profile-card-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--st-card);
    background: var(--st-card-2);
}
.profile-card-more {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--st-card-2);
    color: var(--st-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.profile-card-more:hover { background: var(--st-brand-bg); color: var(--st-brand-text); }

/* 信息行：标签 + 值（自适应宽度）+ 右侧操作；行间整宽分隔线 */
.profile-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 54px;
    margin: 0 -22px;
    padding: 7px 22px;
}
.profile-line + .profile-line { border-top: 1px solid var(--st-line); }
.profile-line-label {
    flex: 0 0 auto;
    width: 48px;
    font-size: 14.5px;
    color: var(--st-muted);
}
.profile-line-value {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14.5px;
    color: var(--st-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-user-vip {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 6px;
    background: linear-gradient(135deg, #ffc24d, #ff9a1a);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 9px rgba(255, 154, 26, 0.35);
}
.profile-line-pwd {
    letter-spacing: 3px;
    color: var(--st-text);
}
.profile-line-action {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--st-brand-text);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.profile-line-action:hover { background: var(--st-brand-bg); }
.profile-line-action-muted { color: var(--st-muted); }
.profile-line-action-muted:hover { background: var(--st-card-2); }

/* 昵称行内编辑输入框 */
.profile-name-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--st-brand-border);
    background: var(--st-card-2);
    color: var(--st-text);
    font-size: 14.5px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.profile-name-input:focus {
    border-color: var(--st-brand);
    box-shadow: 0 0 0 3px var(--st-brand-bg);
}

/* 退出登录：复用备份卡外观，文字使用危险色 */
.profile-logout-btn {
    color: var(--st-danger) !important;
    font-weight: 600;
}
.profile-logout-btn:hover { background: var(--st-danger-bg-8); }

/* ===== 通用：区块标题 / 分割线 ===== */
.settings-section-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--st-text);
}
.settings-section-sub {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--st-muted);
}
.settings-divider {
    height: 1px;
    margin: 28px 0;
    background: var(--st-line);
}
.settings-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    border: 1px solid var(--st-brand);
    border-radius: 11px;
    background: var(--st-brand-bg);
    color: var(--st-brand-text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, transform 0.1s ease;
}
.settings-action-btn:hover { background: var(--st-brand); color: #fff; }
.settings-action-btn:active { transform: scale(0.985); }

/* ===== 主题模式选择：三卡片（浅色 / 深色 / 自动） ===== */
.theme-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.theme-opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 8px 14px;
    border: 1px solid var(--st-line);
    border-radius: 14px;
    background: var(--st-card);
    color: var(--st-text);
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.theme-opt:hover { background: var(--st-card-2); border-color: var(--st-line); }
.theme-opt-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--st-muted);
    transition: color 0.16s ease;
}
.theme-opt-name { font-size: 14px; font-weight: 600; }
.theme-opt-desc { font-size: 11.5px; color: var(--st-muted); text-align: center; line-height: 1.4; }
.theme-opt.active {
    background: var(--st-brand-bg);
    border-color: var(--st-brand-border);
    box-shadow: 0 4px 16px rgba(91, 140, 255, 0.18); /* color-mix 降级（旧浏览器） */
    box-shadow: 0 4px 16px color-mix(in srgb, var(--st-brand) 18%, transparent);
}
.theme-opt.active .theme-opt-icon { color: var(--st-brand-text); }
.theme-opt.active .theme-opt-name { color: var(--st-brand-text); }
.theme-opt.active::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--st-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}
.theme-current {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--st-muted);
    text-align: center;
}

/* ===== 默认搜索引擎：可选卡片网格 ===== */
.se-engine-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px;
}
.se-engine-opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px 8px;
    border: 1px solid var(--st-line);
    border-radius: 12px;
    background: var(--st-card);
    color: var(--st-text);
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.se-engine-opt:hover { background: var(--st-card-2); }
.se-engine-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}
.se-engine-icon svg, .se-engine-icon .icon { width: 21px; height: 21px; }
.se-engine-name { font-size: 12.5px; font-weight: 600; }
.se-engine-opt.active {
    background: var(--st-brand-bg);
    border-color: var(--st-brand-border);
    box-shadow: 0 4px 16px rgba(91, 140, 255, 0.18); /* color-mix 降级（旧浏览器） */
    box-shadow: 0 4px 16px color-mix(in srgb, var(--st-brand) 18%, transparent);
}
.se-engine-opt.active .se-engine-name { color: var(--st-brand-text); }
.se-engine-opt.active::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--st-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;
}

/* ===== 搜索框设置面板：整体紧凑化（不影响其他面板） ===== */
.settings-pane[data-pane="search"] .settings-section-title {
    margin-bottom: 3px;
    font-size: 14.5px;
}
.settings-pane[data-pane="search"] .settings-section-sub {
    margin-bottom: 12px;
    font-size: 12px;
}
.settings-pane[data-pane="search"] .settings-divider {
    margin: 18px 0;
}
.settings-pane[data-pane="search"] .wp-slider-row {
    gap: 12px;
    margin-bottom: 10px;
}
.settings-pane[data-pane="search"] .wp-slider-label {
    flex-basis: 88px;
    font-size: 13px;
}
.settings-pane[data-pane="search"] .ow-card-list {
    gap: 8px;
}
.settings-pane[data-pane="search"] .ow-card {
    padding: 11px 16px;
    border-radius: 12px;
}
.settings-pane[data-pane="search"] .ow-card-label {
    font-size: 13.5px;
}
.settings-pane[data-pane="search"] .settings-action-btn {
    height: 38px;
    border-radius: 10px;
    font-size: 13.5px;
}

/* ===== 当前壁纸：预览卡片 + 操作按钮 ===== */
.wallpaper-preview-card {
    position: relative;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: var(--st-card-2);
    border: 1px solid var(--st-line);
    margin-bottom: 22px;
}
.wallpaper-preview-img {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 预览比例 */
    background: linear-gradient(135deg, #4a90f5, #f5a34a, #f55d4a, #9c4af5);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.wallpaper-preview-mask {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.wallpaper-preview-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 0 16px;
}
.wp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wp-btn-primary {
    background: #4a90f5;
    color: #fff;
}
.wp-btn-primary:hover { background: #3a7de0; }
.wp-btn-outline {
    background: rgba(74, 144, 245, 0.12);
    color: #4a90f5;
    border: 1px solid #4a90f5;
}
.wp-btn-outline:hover { background: rgba(74, 144, 245, 0.22); }

/* ===== 滑块行（遮罩浓度、模糊度） ===== */
.wp-slider-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}
.wp-slider-label {
    flex: 0 0 80px;
    font-size: 14px;
    color: var(--st-text);
}
.wp-slider-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}
.wp-slider {
    flex: 1 1 0;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--st-line);
    outline: none;
    cursor: pointer;
}
.wp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #4a90f5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: transform 0.12s ease;
}
.wp-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.wp-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #4a90f5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}
.wp-slider-value {
    flex: 0 0 auto;
    min-width: 46px;
    text-align: right;
    white-space: nowrap;
    font-size: 13px;
    color: var(--st-muted);
    font-variant-numeric: tabular-nums;
}

/* ===== 下拉选择行（自动壁纸） ===== */
.wp-select-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.wp-select-label {
    flex: 0 0 80px;
    font-size: 14px;
    color: var(--st-text);
}
.wp-select-wrap { flex: 1; }
.wp-select {
    width: 100%;
    max-width: 220px;
    height: 36px;
    padding: 0 36px 0 14px;
    border-radius: 8px;
    border: 1px solid var(--st-line);
    background: var(--st-card) no-repeat right 10px center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a849a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: 16px 16px;
    color: var(--st-text);
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.wp-select:hover { border-color: var(--st-brand-border); }
.wp-select:focus { outline: none; border-color: var(--st-brand); }

/* ===== 开关行（桌面显示壁纸切换按钮） ===== */
.wp-switch-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.wp-switch-label {
    flex: 1;
    font-size: 14px;
    color: var(--st-text);
}
.wp-switch-wrap { flex: 0 0 auto; }
.wp-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.wp-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.wp-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(150, 160, 180, 0.35);
    border-radius: 24px;
    transition: background 0.2s ease;
}
.wp-switch-slider::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}
.wp-switch input:checked + .wp-switch-slider { background: #4a90f5; }
.wp-switch input:checked + .wp-switch-slider::before { transform: translateX(20px); }

/* ===== 打开方式：卡片式开关行 ===== */
.ow-card-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
}
.ow-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    background: var(--st-card-2);
    border: 1px solid var(--st-line);
    border-radius: 14px;
}
.ow-card-label {
    font-size: 15px;
    color: var(--st-text);
}

/* ===== 时间日期设置：卡片内含开关 / 分隔线 / 选项 chips / 大小 / 颜色 ===== */
.clock-card-list {
    gap: 0;
    padding: 16px 18px 18px;
    background: var(--st-card-2);
    border: 1px solid var(--st-line);
    border-radius: 14px;
}
.clock-card-list + .clock-card-list { margin-top: 12px; }
.clock-card {
    padding: 2px 2px 14px;
    background: none;
    border: none;
    border-radius: 0;
}
.clock-card .ow-card-label { font-size: 14.5px; }
.clock-card-line {
    height: 1px;
    background: var(--st-line);
    margin: 0 0 14px;
}
/* 选项按钮组：3 列，可多选切换 */
.clock-chips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.clock-chips + .clock-chips { margin-top: 10px; }
.clock-chip {
    height: 44px;
    border: 1px solid var(--st-line);
    border-radius: 10px;
    background: var(--st-card);
    color: var(--st-muted);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.clock-chip:hover {
    background: var(--st-card-2);
    border-color: var(--st-brand-border);
    color: var(--st-text);
}
.clock-chip:active { transform: scale(0.97); }
.clock-chip.active {
    background: var(--st-brand-bg);
    border-color: var(--st-brand-border);
    color: var(--st-brand-text);
    font-weight: 600;
}
.clock-chip:focus-visible { outline: 2px solid var(--st-brand); outline-offset: 2px; }

/* 大小滑块 / 颜色行：两行标签同宽对齐 */
.clock-slider-row { margin: 0; padding: 2px 0 14px; }
.clock-color-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.clock-slider-row .wp-slider-label { flex: 0 0 80px; font-size: 14px; }
.clock-color-row .wp-slider-label { flex: 0 0 auto; font-size: 14px; }
/* 字号数值：品牌色胶囊 */
#clockSizeValue {
    flex: 0 0 52px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--st-brand-text);
    background: var(--st-brand-bg);
    border-radius: 8px;
    padding: 3px 0;
}
.clock-color-swatches {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
}
.clock-color {
    position: relative;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    border: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: transform 0.12s ease;
}
.clock-color:hover { transform: scale(1.1); }
.clock-color:active { transform: scale(0.94); }
.clock-color.active { transform: scale(1.05); }
.clock-color:focus-visible { outline: 2px solid var(--st-brand); outline-offset: 3px; }
/* 选中态：品牌蓝外圈 */
.clock-color.active::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--st-brand);
}
/* 白色选中：保留白色块，叠深色对勾（不再用蓝底覆盖，避免看不出选的是白色）*/
.clock-color[data-clock-color="#ffffff"].active::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat;
}
/* 自定义颜色：方形描边方块，内嵌取色器 */
.clock-color-custom {
    width: 30px;
    height: 30px;
    padding: 4px;
    border-radius: 10px;
    background: var(--st-card);
    box-shadow: inset 0 0 0 1px var(--st-line);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.clock-color-custom:hover { transform: scale(1.08); box-shadow: inset 0 0 0 1px var(--st-brand-border); }
.clock-color-custom:active { transform: scale(0.94); }
.clock-color-custom.active::after { border-radius: 10px; }
.clock-color-custom input[type="color"] {
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: none;
    cursor: pointer;
}
.clock-color-custom input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.clock-color-custom input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
.clock-color-custom input[type="color"]::-moz-color-swatch { border: none; border-radius: 6px; }

/* ===== 布局：组件/极简 模式选择 ===== */
.layout-card {
    margin-top: 4px;
    padding: 26px 24px;
    background: var(--st-card-2);
    border: 1px solid var(--st-line);
    border-radius: 16px;
}
.layout-tip {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--st-text);
}
.layout-modes {
    display: flex;
    gap: 18px;
}
.layout-mode {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}
.layout-mock {
    width: 100%;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px;
    box-sizing: border-box;
    background: rgba(148, 158, 184, 0.12);
    border: 2px solid transparent;
    border-radius: 16px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.layout-mode.active .layout-mock {
    background: var(--st-brand-bg);
    border-color: var(--st-brand);
}
.mock-time {
    font-size: 26px;
    font-weight: 600;
    color: var(--st-text);
    opacity: 0.55;
    line-height: 1;
}
.mock-bar {
    width: 70%;
    height: 10px;
    border-radius: 6px;
    background: rgba(148, 158, 184, 0.35);
}
.mock-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    width: 78%;
}
.mock-grid i {
    height: 14px;
    border-radius: 4px;
    background: rgba(148, 158, 184, 0.3);
}
.layout-mode-name {
    font-size: 15px;
    color: var(--st-text);
}
.layout-mode.active .layout-mode-name {
    color: var(--st-brand-text);
    font-weight: 600;
}
.layout-divider {
    height: 1px;
    background: var(--st-line);
    margin: 22px 0 18px;
}

/* ============================================================
   侧边栏设置 —— 位置选择 + 卡片式开关 / 滑块
   ============================================================ */
.sb-pos-list {
    display: flex;
    gap: 18px;
}
.sb-pos-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}
/* 位置预览卡片：模拟屏幕里贴左 / 贴右的导航条 */
.sb-pos-mock {
    position: relative;
    width: 100%;
    height: 118px;
    background: rgba(148, 158, 184, 0.12);
    border: 2px solid transparent;
    border-radius: 14px;
    transition: border-color 0.15s ease, background 0.15s ease;
    overflow: hidden;
}
.sb-pos-rail {
    position: absolute;
    top: 8px;
    bottom: 8px;
    width: 12px;
    border-radius: 6px;
    background: rgba(148, 158, 184, 0.45);
}
/* 导航条上的几个条目 */
.sb-pos-rail::before,
.sb-pos-rail::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
}
.sb-pos-rail::before { top: 16px; width: 8px; height: 8px; }
.sb-pos-rail::after { top: 34px; box-shadow: 0 14px 0 rgba(255,255,255,0.85), 0 28px 0 rgba(255,255,255,0.85); }
.sb-pos-mock-left .sb-pos-rail { left: 8px; }
.sb-pos-mock-right .sb-pos-rail { right: 8px; }
.sb-pos-btn.active .sb-pos-mock {
    background: var(--st-brand-bg);
    border-color: var(--st-brand);
}
.sb-pos-name {
    font-size: 15px;
    color: var(--st-text);
}
.sb-pos-btn.active .sb-pos-name {
    color: var(--st-brand-text);
    font-weight: 600;
}

.sb-card-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sb-card {
    padding: 16px 20px;
    background: var(--st-card-2);
    border: 1px solid var(--st-line);
    border-radius: 14px;
    margin: 0;
}
.sb-card .wp-slider-label { flex: 0 0 56px; font-size: 14px; }

/* ===== 图标设置：样式 / 大小 / 圆角 / 透明度 / 间距 / 名称 / 宽度 ===== */
.icon-card-list {
    gap: 0;
    padding: 18px 18px 16px;
    background: var(--st-card-2);
    border: 1px solid var(--st-line);
    border-radius: 14px;
}
.icon-card-list + .icon-block-head,
.icon-card-list + .icon-block-title { margin-top: 4px; }

/* 图标样式二选一 */
.icon-style-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}
.icon-style-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 8px 12px;
    border: 1px solid var(--st-line);
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.icon-style-opt:hover { border-color: var(--st-brand-border); }
.icon-style-opt.active {
    border-color: var(--st-brand);
    background: var(--st-brand-bg);
}
.icon-style-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
}
.icon-style-shape {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(145deg, #9aa0ab, #7c828d);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}
.icon-style-default { border-radius: 14px; }
.icon-style-circle { border-radius: 50%; }
.icon-style-name {
    font-size: 14px;
    color: var(--st-text);
}
.icon-style-opt.active .icon-style-name { color: var(--st-brand-text); font-weight: 600; }

/* 卡片内滑块行距收紧 */
.icon-slider-row { margin: 0; padding: 2px 0 14px; }
.icon-slider-row:last-child { padding-bottom: 2px; }
/* 同步开启时 Y 间距滑块跟随 X，禁用并弱化 */
.wp-slider:disabled { opacity: 0.4; cursor: not-allowed; }
.icon-card-list .clock-card-line { margin-bottom: 14px; }

/* 区块标题行（标题 + 右侧开关） */
.icon-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 26px 0 10px;
}
.icon-block-head .settings-section-title { margin: 0; }
.icon-block-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--st-muted);
}
.icon-block-title { margin: 26px 0 10px; }

/* 名称 / 宽度卡片内联行 */
.icon-inner-card {
    padding: 12px 4px;
    background: none;
    border: none;
    border-radius: 0;
}
.icon-inner-card .ow-card-label { font-size: 14px; }

/* 名称颜色行 */
.icon-color-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 0 2px;
}
.icon-color-swatches {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 14px;
}
/* 选中态：保留色块本身颜色，叠白色对勾（带暗投影保证在绿/青等中亮色上清晰）*/
.icon-color-swatches .clock-color.active::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}
/* 白色块选中：对勾改用深色，避免白底白勾看不见；不再用蓝底覆盖 */
.icon-color-swatches .clock-color[data-icon-color="#ffffff"].active::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    filter: none;
}
/* 自定义取色器：虚线圆角方框内嵌取色片，与实心圆形预设明确区分 */
.icon-color-swatches .clock-color-custom {
    width: 32px;
    height: 32px;
    padding: 5px;
    border-radius: 11px;
    background: var(--st-card);
    box-shadow: inset 0 0 0 1.5px dashed var(--st-muted);
}
.icon-color-swatches .clock-color-custom:hover {
    transform: scale(1.06);
    box-shadow: inset 0 0 0 1.5px dashed var(--st-brand-border);
}
.icon-color-swatches .clock-color-custom.active::after { border-radius: 11px; }
.icon-color-swatches .clock-color-custom input[type="color"] { border-radius: 6px; }

/* 最大宽度：每行图标数四选一 */
.icon-cols-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.icon-cols-opt {
    padding: 10px 4px;
    font-size: 13px;
    color: var(--st-text);
    border: 1px solid var(--st-line);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.icon-cols-opt:hover { border-color: var(--st-brand-border); }
.icon-cols-opt.active {
    border-color: var(--st-brand);
    background: var(--st-brand-bg);
    color: var(--st-brand-text);
    font-weight: 600;
}

/* 重置按钮 */
.icon-reset-btn {
    margin-top: 20px;
    border-color: var(--st-danger-border);
    background: var(--st-danger-bg-8);
    color: var(--st-danger);
}
.icon-reset-btn:hover {
    background: var(--st-danger);
    border-color: var(--st-danger);
    color: #fff;
}

@media (max-width: 520px) {
    .theme-options { grid-template-columns: 1fr; }
    .wp-select { max-width: 100%; }
    .layout-modes { flex-direction: column; }
    .sb-pos-list { flex-direction: column; }
    .icon-color-swatches { gap: 10px; }
}

/* ============================================================
   壁纸库弹窗 —— 设置面板"更换壁纸"触发的子弹窗
   - 固定定位居中显示，从屏幕左侧 transform 滑入
   - 主题令牌复用 settings.css / auth-*，浅/深随 settings-mask 的 data-theme 联动
   - z-index 2500 > settings-mask(2400)，形成嵌套模态层
   ============================================================ */
.wp-library-mask {
    /* 浅/深主题下使用与 settings 抽屉一致的配色（这里与 settings 共享 --st-* 变量） */
    --wl-bg: var(--st-bg, #15192a);
    --wl-card: var(--st-card, rgba(255, 255, 255, 0.04));
    --wl-card-2: var(--st-card-2, rgba(255, 255, 255, 0.08));
    --wl-line: var(--st-line, rgba(255, 255, 255, 0.08));
    --wl-text: var(--st-text, #eef1f7);
    --wl-muted: var(--st-muted, #98a2b8);
    --wl-brand: var(--st-brand, #5b8cff);
    --wl-brand-hover: var(--st-brand-hover, #4472e8);
    --wl-brand-text: var(--st-brand-text, #9dbbff);
    --wl-brand-bg: var(--st-brand-bg, rgba(91, 140, 255, 0.12));
    --wl-brand-border: var(--st-brand-border, rgba(91, 140, 255, 0.45));
    --wl-shadow: var(--st-shadow, rgba(0, 0, 0, 0.5));

    position: fixed;
    inset: 0;
    z-index: 2500;
    background: transparent;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.24s ease, opacity 0.24s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 让弹窗避开右侧设置抽屉（.settings-drawer 宽 540px），
       在抽屉左侧的剩余空间里居中，避免与抽屉重叠 */
    padding-right: 540px;
}
.wp-library-mask.open {
    visibility: visible;
    opacity: 1;
}
.wp-library {
    position: relative;
    width: 1100px;
    max-width: calc(100vw - 80px);
    /* 高度按每页 20 张（5 列 × 4 行）完整显示校准：
       banner(~34) + toolbar(~53) + 网格(4行卡片+间距 ≈488) + 分页条(~47) + 底部参数(~38) */
    height: 680px;
    max-height: calc(100vh - 80px);
    flex: 0 0 auto;
    display: flex;
    background: var(--wl-bg);
    border: 1px solid var(--wl-line);
    border-radius: 18px;
    box-shadow: 0 20px 60px var(--wl-shadow);
    color: var(--wl-text);
    overflow: hidden;
    /* 从左侧滑入：起始位置在视口左外侧 80% 处 */
    transform: translateX(-80%);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.24s ease;
}
.wp-library-mask.open .wp-library {
    transform: translateX(0);
    opacity: 1;
}

/* 浅色主题覆写：与 settings 抽屉的 [data-theme="light"] 保持一致 */
.wp-library-mask[data-theme="light"] {
    --wl-bg: #f4f6fb;
    --wl-card: #ffffff;
    --wl-card-2: #f0f3fa;
    --wl-line: #e4e8f2;
    --wl-text: #1f2637;
    --wl-muted: #7a849a;
    --wl-brand: #3b72f0;
    --wl-brand-hover: #2f60cf;
    --wl-brand-text: #3b72f0;
    --wl-brand-bg: rgba(59, 114, 240, 0.1);
    --wl-brand-border: rgba(59, 114, 240, 0.35);
    --wl-shadow: rgba(31, 45, 90, 0.22);
    --wl-brand-ring-20: rgba(59, 114, 240, 0.2);
    --wl-brand-ring-30: rgba(59, 114, 240, 0.3);
}

/* ===== 左侧分类导航 ===== */
.wp-library-nav {
    width: 152px;
    flex: 0 0 152px;
    padding: 14px 12px;
    border-right: 1px solid var(--wl-line);
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.18);
}
.wp-library-nav-title {
    margin: 6px 8px 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--wl-text);
    letter-spacing: 0.4px;
}
.wp-lib-cat {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    margin-bottom: 2px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--wl-muted);
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wp-lib-cat svg { flex: 0 0 auto; }
.wp-lib-cat:hover { background: var(--wl-card-2); color: var(--wl-text); }
.wp-lib-cat.active {
    background: var(--wl-brand-bg);
    border-color: var(--wl-brand-border);
    color: var(--wl-brand-text);
    font-weight: 600;
}

/* ===== 右侧主体 ===== */
.wp-library-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.wp-library-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 12.5px;
    color: var(--wl-muted);
    background: var(--wl-card);
    border-bottom: 1px solid var(--wl-line);
    line-height: 1.5;
}
.wp-library-banner-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wl-brand);
    flex: 0 0 auto;
    box-shadow: 0 0 0 3px var(--wl-brand-ring-20, rgba(91, 140, 255, 0.2));
}
.wp-library-link {
    color: var(--wl-brand-text);
    text-decoration: none;
}
.wp-library-link:hover { text-decoration: underline; }

/* 工具行 */
.wp-library-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--wl-line);
    background: var(--wl-card);
}
.wp-library-toolbtns {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.wp-library-loadmore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--wl-line);
    background: var(--wl-card-2);
    color: var(--wl-text);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.wp-library-loadmore:hover { background: var(--wl-brand-bg); border-color: var(--wl-brand-border); color: var(--wl-brand-text); }
.wp-library-loadmore:disabled { opacity: 0.6; cursor: default; }
/* 上传按钮：品牌色主按钮（仅官方/动态壁纸分类显示） */
.wp-library-upload {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--wl-brand-border);
    background: var(--wl-brand-bg);
    color: var(--wl-brand-text);
    font-size: 13px;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.wp-library-upload:hover { filter: brightness(1.06); }
.wp-library-upload[hidden] { display: none; }
.wp-library-upload:disabled { opacity: 0.65; cursor: default; filter: none; }
.wp-library-count {
    font-size: 12.5px;
    color: var(--wl-muted);
    font-variant-numeric: tabular-nums;
}

/* ===== 壁纸网格 ===== */
.wp-library-grid {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    align-content: start;
}
.wp-lib-cell {
    position: relative;
    height: 0;
    /* 用 padding-bottom 百分比锁定 16:10 比例（相对宽度），
       避免依赖 aspect-ratio 在 grid auto 行高下失效导致卡片高度塌陷、互相重叠 */
    padding-bottom: 62.5%;
    border-radius: 8px;
    overflow: hidden;
    background: var(--wl-card-2);
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.wp-lib-cell:hover {
    border-color: var(--wl-brand-border);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
}
.wp-lib-cell img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.32s ease;
}
.wp-lib-cell:hover img { transform: scale(1.04); }
/* 纯色色卡：与官方壁纸卡片一致的样式（整块纯色填满卡片，无文字标签） */
.wp-lib-cell.wp-lib-solid-cell { background: var(--wl-card-2); }
.wp-lib-solid-swatch {
    position: absolute;
    inset: 0;
    display: block;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.wp-lib-cell.is-loading { cursor: wait; }
.wp-lib-cell.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    animation: wp-lib-shimmer 1.2s linear infinite;
}
@keyframes wp-lib-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.wp-lib-cell.is-current {
    border-color: var(--wl-brand);
    box-shadow: 0 0 0 2px var(--wl-brand-ring-30, rgba(91, 140, 255, 0.3));
}
.wp-lib-cell.is-current::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--wl-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;
}
.wp-lib-empty {
    grid-column: 1 / -1;
    padding: 40px 0;
    text-align: center;
    color: var(--wl-muted);
    font-size: 13.5px;
}
/* 官方壁纸上下滑动模式：网格底部加载状态行（跨整行） */
.wp-lib-scroll-status {
    grid-column: 1 / -1;
    padding: 14px 0 18px;
    text-align: center;
    color: var(--wl-muted);
    font-size: 12.5px;
    line-height: 1.6;
}

/* ===== 分组筛选条（「全部」+ 各分组，下划线标签样式） ===== */
.wp-lib-groups[hidden] { display: none; }   /* flex 会覆盖 [hidden] 默认 display:none */
.wp-lib-groups {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 18px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    border-bottom: 1px solid var(--wl-line);
}
.wp-lib-groups::-webkit-scrollbar { display: none; }
.wp-lib-group {
    position: relative;
    flex: 0 0 auto;
    padding: 8px 14px 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--wl-muted);
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.18s ease;
}
.wp-lib-group:hover { color: var(--wl-text); }
.wp-lib-group.active {
    color: var(--wl-brand-text);
    font-weight: 600;
}
/* 选中项底部的滑动下划线 */
.wp-lib-group.active::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--wl-brand);
}

/* ===== 上传分组选择弹窗（官方/动态/用户投稿上传时弹出） ===== */
.wp-up-mask[hidden] { display: none; }   /* flex 会覆盖 [hidden] 默认 display:none */
.wp-up-mask {
    position: fixed;
    inset: 0;
    z-index: 9000;   /* 高于壁纸库弹窗(2500)，与浏览历史弹窗同级 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 与壁纸库弹窗一致，避开右侧设置抽屉（宽 540px） */
    padding: 24px 564px 24px 24px;
    background: rgba(0, 0, 0, 0.42);
    animation: auth-in 0.18s ease;
}
.wp-up-dialog {
    width: 380px;
    max-width: 100%;
    padding: 22px 24px 20px;
    border-radius: 16px;
    background: var(--wl-card);
    border: 1px solid var(--wl-line);
    color: var(--wl-text);
    box-shadow: 0 16px 48px var(--wl-shadow);
    animation: auth-in 0.2s ease;
}
.wp-up-title {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--wl-text);
}
.wp-up-select,
.wp-up-input {
    width: 100%;
    box-sizing: border-box;
    height: 36px;
    padding: 0 12px;
    font-size: 13.5px;
    color: var(--wl-text);
    background: var(--wl-card-2);
    border: 1px solid var(--wl-line);
    border-radius: 9px;
    outline: none;
    transition: border-color 0.15s ease;
}
.wp-up-select { margin-bottom: 10px; cursor: pointer; }
.wp-up-input::placeholder { color: var(--wl-muted); }
.wp-up-select:focus,
.wp-up-input:focus { border-color: var(--wl-brand-border); }
.wp-up-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}
.wp-up-btn {
    min-width: 76px;
    height: 34px;
    padding: 0 16px;
    font-size: 13.5px;
    color: var(--wl-muted);
    background: var(--wl-card-2);
    border: 1px solid var(--wl-line);
    border-radius: 9px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.wp-up-btn:hover { color: var(--wl-text); border-color: var(--wl-brand-border); }
.wp-up-btn-primary {
    color: var(--wl-brand-text);
    background: var(--wl-brand-bg);
    border-color: var(--wl-brand-border);
}
.wp-up-btn-primary:hover { color: #fff; background: var(--wl-brand); }

/* 动态壁纸卡片：封面就是后端 thumb_url（640 webp），走通用 .wp-lib-cell img 铺满规则；
   悬停时才插入 <video>（class=wp-lib-video-preview）盖在封面上播放，移开即销毁节点。 */
.wp-lib-cell video.wp-lib-video-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: transparent;
    transition: transform 0.32s ease;
}
.wp-lib-cell:hover video.wp-lib-video-preview { transform: scale(1.04); }
/* 新上传视频的服务端封面尚未生成（无 thumb_url 或暂时 404）：隐藏裂图 img，卡片用渐变占位，角标仍提示为视频 */
.wp-lib-cell.wp-lib-video-cell img.is-missing { display: none; }
.wp-lib-cell.wp-lib-video-cell.is-missing-cover {
    background:
        radial-gradient(120% 100% at 15% 0%, rgba(124, 108, 240, 0.32), transparent 55%),
        radial-gradient(120% 100% at 90% 100%, rgba(56, 189, 248, 0.22), transparent 55%),
        #15141f;
}
/* 动态角标：右下角小圆点 + 播放三角，提示该卡片为视频 */
.wp-lib-video-badge {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    pointer-events: none;
}
.wp-lib-video-badge::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.92);
}
.wp-lib-cell.is-current .wp-lib-video-badge { display: none; }

/* 本地壁纸删除角标：右上角圆形按钮，排在"已应用"对勾图标左侧（前面）；
   默认半透明，悬停卡片时淡入，自带柔和阴影与轻微缩放反馈 */
.wp-lib-local-del {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    color: #d33f49;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(211, 63, 73, 0.12);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.82);
    transform-origin: center;
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    z-index: 3;
}
.wp-lib-local-del svg {
    width: 9px;
    height: 9px;
    transition: transform 0.18s ease;
}
.wp-lib-cell:hover .wp-lib-local-del,
.wp-lib-local-del:focus-visible {
    opacity: 1;
    transform: scale(1);
}
.wp-lib-local-del:focus-visible { outline: none; }
.wp-lib-local-del:hover {
    background: #d33f49;
    color: #fff;
    transform: scale(1.12);
    box-shadow: 0 2px 8px rgba(211, 63, 73, 0.45), 0 0 0 1px rgba(211, 63, 73, 0.25);
}
.wp-lib-local-del:hover svg { transform: scale(0.92); }
.wp-lib-local-del:active { transform: scale(0.94); }

/* 右上角操作按钮组：默认贴到最右侧(right:6px)，单个按钮也能补位到最右；
   仅当前卡片(.is-current)显示"已应用"对勾时，才让位到对勾左侧(right:28px) */
.wp-lib-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    z-index: 3;
}
.wp-lib-cell.is-current .wp-lib-actions { right: 28px; }

/* 收藏心形按钮：圆形按钮，默认半透明悬停淡入；
   已收藏时常驻显示红心（白底盘 + 红色实心心形） */
.wp-lib-fav-btn {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    color: #d33f49;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.82);
    transform-origin: center;
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    z-index: 3;
}
.wp-lib-fav-btn svg { transition: transform 0.18s ease; }
.wp-lib-cell:hover .wp-lib-fav-btn,
.wp-lib-fav-btn:focus-visible { opacity: 1; transform: scale(1); }
.wp-lib-fav-btn:focus-visible { outline: none; }
.wp-lib-fav-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 2px 8px rgba(211, 63, 73, 0.4);
}
.wp-lib-fav-btn:active { transform: scale(0.94); }
/* 已收藏：常驻显示，心形填充实心红 */
.wp-lib-fav-btn.is-faved {
    opacity: 1;
    transform: scale(1);
}
.wp-lib-fav-btn.is-faved svg { fill: currentColor; }

/* ===== 分页条 ===== */
.wp-library-pager {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-top: 1px solid var(--wl-line);
    background: var(--wl-card);
}
.wp-library-pager[hidden] { display: none; }
.wp-lib-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--wl-line);
    background: var(--wl-card-2);
    color: var(--wl-text);
    font-size: 12.5px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.wp-lib-pager-btn:hover:not(:disabled) {
    background: var(--wl-brand-bg);
    border-color: var(--wl-brand-border);
    color: var(--wl-brand-text);
}
.wp-lib-pager-btn:disabled { opacity: 0.45; cursor: default; }
.wp-lib-pager-pages {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 4px;
}
.wp-lib-pager-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 4px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--wl-muted);
    font-size: 12.5px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.wp-lib-pager-page:hover { background: var(--wl-card-2); color: var(--wl-text); }
.wp-lib-pager-page.is-active {
    background: var(--wl-brand);
    border-color: var(--wl-brand);
    color: #fff;
    font-weight: 600;
}
.wp-lib-pager-ellipsis {
    min-width: 20px;
    text-align: center;
    color: var(--wl-muted);
    font-size: 12.5px;
    pointer-events: none;
}

/* ===== 底部参数设置 ===== */
.wp-library-foot {
    border-top: 1px solid var(--wl-line);
    background: var(--wl-card);
    flex: 0 0 auto;
}
.wp-library-foot-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 38px;
    padding: 0 16px;
    border: none;
    background: transparent;
    color: var(--wl-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}
.wp-library-foot-toggle:hover { background: var(--wl-card-2); }
.wp-library-foot-chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
}
.wp-library-foot.open .wp-library-foot-chevron { transform: rotate(180deg); }
.wp-library-foot-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.22s ease, padding 0.22s ease;
    padding: 0 16px;
}
.wp-library-foot.open .wp-library-foot-body {
    max-height: 140px;
    padding: 4px 16px 14px;
}
.wp-lib-foot-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}
.wp-lib-foot-label {
    flex: 0 0 70px;
    font-size: 13px;
    color: var(--wl-muted);
}
.wp-lib-foot-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--wl-line);
    outline: none;
    cursor: pointer;
}
.wp-lib-foot-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--wl-brand);
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    cursor: pointer;
}
.wp-lib-foot-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--wl-brand);
    cursor: pointer;
}
.wp-lib-foot-value {
    flex: 0 0 46px;
    text-align: right;
    font-size: 12.5px;
    color: var(--wl-muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
    .wp-library-mask { padding-right: 0; }
    .wp-library { width: calc(100vw - 32px); height: calc(100vh - 32px); }
    .wp-library-nav { width: 132px; flex-basis: 132px; }
    .wp-library-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .wp-library-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== 备份与恢复 ===== */
/* 灰色大卡内嵌白色圆角分组卡，分组内为蓝色文字大按钮（设计图样式） */
.backup-wrap {
    --bk-inner: rgba(255, 255, 255, 0.09);
    --bk-action: #9dbbff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 18px;
}
.settings-mask[data-theme="light"] .backup-wrap {
    --bk-inner: #ffffff;
    --bk-action: #3d8bfd;
}
/* 备份恢复独立面板内：顶部无需外边距（内容区已有 padding） */
.settings-pane[data-pane="backup"] > .backup-wrap { margin-top: 0; }
/* 白色分组卡：扁平无阴影，蓝字直接排在卡内留白中 */
.backup-group {
    border-radius: 16px;
    background: var(--bk-inner);
    overflow: hidden;
}
.backup-action {
    display: block;
    width: 100%;
    padding: 15px 22px;
    border: 0;
    background: transparent;
    color: var(--bk-action);
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}
/* 同组第二项收紧上间距，形成图中的两行节奏 */
.backup-action + .backup-action { padding-top: 2px; }
.backup-action:hover { background: var(--st-brand-bg); }
.backup-action:active { background: var(--st-brand-bg); }
.backup-action:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.backup-action:disabled:hover { background: transparent; }

/* 删除本地数据：红色危险操作 */
.backup-action-danger { color: var(--st-danger); }
.backup-action-danger:hover { background: var(--st-danger-bg-8); }
.backup-action-danger:active { background: var(--st-danger-bg-16); }

/* 上次备份时间 */
.backup-last {
    padding: 2px 8px;
    font-size: 14.5px;
    color: var(--st-muted);
    font-variant-numeric: tabular-nums;
}

/* ===== 历史备份节点弹窗（云端 / 本机） ===== */
.bkhist-mask {
    position: fixed;
    inset: 0;
    /* 高于设置层(.settings-mask 2400)，但低于二次确认框(.confirm-mask 9999)，
       否则点恢复/删除弹出的确认框会被本弹窗盖住 */
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.4);
    animation: auth-in 0.18s ease;
}
.bkhist-mask.show { display: flex; }
.bkhist-dialog {
    position: relative;
    width: 560px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    border-radius: 18px;
    padding: 30px 34px 30px;
    background: var(--auth-card);
    border: 1px solid var(--auth-line);
    color: var(--auth-text);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
    animation: auth-in 0.2s ease;
}
.bkhist-close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--auth-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.bkhist-close:hover { background: var(--auth-card-2); color: var(--auth-text); }
.bkhist-title {
    margin: 0;
    text-align: center;
    font-size: 19px;
    font-weight: 700;
    color: var(--auth-text);
}
.bkhist-sub {
    margin: 12px 0 22px;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--auth-muted);
}
.bkhist-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 22px;
}
.bkhist-tab {
    min-width: 116px;
    height: 34px;
    padding: 0 18px;
    border: 0;
    border-radius: 17px;
    background: var(--auth-card-2);
    color: var(--auth-muted);
    font-size: 13.5px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.bkhist-tab.active {
    background: var(--st-brand, #3d8bfd);
    color: #fff;
}
.bkhist-pane { display: none; }
.bkhist-pane.active { display: block; }
.bkhist-pane-head {
    font-size: 15px;
    font-weight: 700;
    color: var(--auth-text);
    margin-bottom: 6px;
}
.bkhist-pane-tip {
    font-size: 12.5px;
    color: var(--auth-muted);
    margin-bottom: 14px;
}
.bkhist-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bkhist-empty {
    padding: 26px 16px;
    text-align: center;
    font-size: 13.5px;
    color: var(--auth-muted);
}
.bkhist-row {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 12px;
    background: var(--auth-card-2);
    padding-right: 8px;
}
.bkhist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 48px;
    padding: 10px 16px;
    border: 0;
    background: transparent;
    color: var(--auth-text);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    border-radius: 12px;
}
.bkhist-item:hover { background: var(--st-brand-bg); }
.bkhist-item-time { flex: 1 1 auto; }
.bkhist-item-meta {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--auth-muted);
}
.bkhist-del {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--auth-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bkhist-del:hover { background: var(--st-danger-bg-8); color: var(--auth-danger); }
.bkhist-restore {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 12px;
    margin-right: 2px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--st-brand, #3d8bfd);
    font-size: 12.5px;
    cursor: pointer;
}
.bkhist-restore:hover { background: var(--st-brand-bg); }

/* ===== 关于我们 ===== */
.about-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* 分组卡片：浅色主题为白底浅阴影，深色为半透明白 */
.about-group {
    border: 1px solid var(--st-line);
    border-radius: 16px;
    background: var(--st-card);
    box-shadow: 0 10px 28px var(--st-shadow);
    overflow: hidden;
}
/* 行：左标题 + 右值/箭头，按钮行可点 */
.about-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 58px;
    padding: 12px 22px;
    border: 0;
    background: transparent;
    text-align: left;
}
.about-row-btn { cursor: pointer; transition: background 0.15s ease; }
.about-row-btn:hover { background: var(--st-brand-bg); }
.about-row-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--st-text);
}
.about-row-meta {
    font-size: 15px;
    color: var(--st-brand-text);
    font-variant-numeric: tabular-nums;
}
.about-row-arrow {
    flex: 0 0 auto;
    color: var(--st-muted);
}
.about-row-btn:hover .about-row-arrow { color: var(--st-brand-text); }

/* 微信赞赏码卡片 */
.about-reward {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 22px 20px;
}
.about-reward-img {
    width: 180px;
    height: 180px;
    object-fit: contain;
    border-radius: 12px;
}
.about-reward-text {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 14px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--st-text);
}
.about-reward-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #07c160;
}
.about-reward-tip {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--st-muted);
    text-align: center;
}

/* 底部链接组：弱化字号 + 行内分隔虚线 */
.about-row-sub { min-height: 52px; }
.about-row-sub + .about-row-sub { border-top: 1px dashed var(--st-line); }
.about-row-sub .about-row-label {
    font-size: 14.5px;
    font-weight: 400;
    color: var(--st-muted);
}
.about-row-sub-label { color: var(--st-muted); }