/* ============================================
   座位助手 · Claude 风格主题
   暖米白纸面 / 墨黑文字 / 陶土橙点缀 / 发丝边框
   ============================================

   ········· 按钮/颜色规范（改 UI 前先看这里） ·········
   语义 → 视觉 → 承载类名
   ─────────────────────────────────────────────
   主操作(提交/保存/确认)  橙实心 var(--accent)，白字    → .btn-primary 与 .btn-success 同款
   破坏性(结束/删除)       白底红字，悬停填红            → .btn-danger / .btn-outline-danger
   取消/中性               暖灰底 var(--surface-soft)    → .btn-secondary
   次级/弱操作             白底发丝灰边                  → .btn-outline-secondary / .btn-info / .btn-warning
   选中态(分段切换)        白底墨黑加粗框墨字，悬停暖灰 → .btn-outline-secondary.active
   次级/弱操作(描边)       悬停统一暖灰（无反墨黑）
   链接式按钮              橙字                          → .btn-link
   ─────────────────────────────────────────────
   注意（历史遗留，勿新增依赖）：
   - .btn-success 被重载为"确认"= 橙色；.bg-success 徽章仍是绿（成功）——两者语义不同
   - .btn-warning / .btn-info 被重载为白底中性按钮，不再是黄/蓝警告色
   - 没有"墨黑实心"按钮；墨黑只出现在选中态的加粗描边与文字，悬停一律暖灰
   配色随 body[data-skin] 整层可换，禁止在组件里写死颜色，一律用上表 var。
   ============================================ */

:root {
    --paper: #F5F4EF;
    --surface: #FFFFFF;
    --ink: #141413;
    --ink-soft: #3D3C38;
    --muted: #76746B;
    --accent: #D97757;
    --accent-hover: #C25E3D;
    --line: #E7E5DC;
    --line-strong: #D8D5C9;
    --radius-card: 12px;
    --radius-ctl: 8px;
    --serif: "Songti SC", "Noto Serif SC", "STSong", Georgia, "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
        "Microsoft YaHei", "Segoe UI", sans-serif;
}

html {
    -webkit-tap-highlight-color: transparent;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--text-font);
    font-size: 15px;
    line-height: 1.65;
}

main {
    flex: 1;
    width: 100%;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* ---------- 导航栏 ---------- */
.navbar {
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    padding: 0.65rem 0;
}

.navbar-brand {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ink) !important;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.navbar-brand::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--accent);
    flex: none;
}

.navbar .nav-link {
    color: var(--ink-soft) !important;
    font-size: 0.92rem;
    border-radius: var(--radius-ctl);
    padding: 0.35rem 0.75rem !important;
    margin-left: 0.25rem;
    transition: background 0.15s;
}

.navbar .nav-link:hover {
    background: var(--soft-bg);
    color: var(--ink) !important;
}

.navbar-toggler {
    border-color: var(--line-strong);
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* ---------- 卡片 ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 2px rgba(20, 20, 19, 0.04);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--line);
    padding: 0.9rem 1.25rem;
}

.card-header h5 {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
    letter-spacing: 0.02em;
}

.card-header.bg-info {
    background: transparent !important;
    border-bottom: 1px solid var(--line);
}

.card-header.bg-info h5,
.card-header .text-white {
    color: var(--ink) !important;
}

.card-body {
    padding: 1.25rem;
}

/* ---------- 小节标题（眉题） ---------- */
.eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.35rem;
}

/* ---------- 表单 ---------- */
.form-label {
    font-weight: 600;
    color: var(--ink);
    font-size: 0.88rem;
    margin-bottom: 0.35rem;
}

.form-control, .form-select {
    border-radius: var(--radius-ctl);
    border: 1px solid var(--line-strong);
    padding: 0.55rem 0.85rem;
    background-color: var(--surface);
    color: var(--ink);
    font-size: 0.95rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    background-color: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.form-control::placeholder {
    color: var(--placeholder);
}

.form-text, .text-muted {
    color: var(--muted) !important;
}

.form-check-input {
    border-color: var(--line-strong);
}

.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--accent-ring);
    border-color: var(--accent);
}

/* ---------- 按钮 ---------- */
.btn {
    border-radius: var(--radius-ctl);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.5rem 1.05rem;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

/* 主按钮：陶土橙实心（与保存设置/确认等主要操作统一，不再白底描边） */
.btn-primary {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--on-accent);
}

.btn-primary:hover, .btn-primary:focus {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--on-accent);
}

/* 保存 / 确认：陶土橙 */
.btn-success {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--on-accent);
}

.btn-success:hover, .btn-success:focus {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--on-accent);
}

/* 次级按钮：白底发丝边框 */
.btn-info, .btn-warning {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--ink);
}

.btn-info:hover, .btn-warning:hover,
.btn-info:focus, .btn-warning:focus {
    background: var(--soft-bg);
    border-color: var(--muted);
    color: var(--ink);
}

.btn-outline-primary {
    border-color: var(--line-strong);
    color: var(--ink);
}

.btn-outline-primary:hover {
    background: var(--soft-bg);
    border-color: var(--muted);
    color: var(--ink);
}

.btn-danger {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--danger);
}

.btn-danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

/* 次级按钮（弹窗取消 / 关闭等中性操作）：暖灰底发丝边框 */
.btn-secondary {
    background: var(--surface-soft);
    border: 1px solid var(--line-strong);
    color: var(--ink-soft);
}

.btn-secondary:hover, .btn-secondary:focus {
    background: var(--surface-soft-hover);
    border-color: var(--muted);
    color: var(--ink);
}

/* 描边次级（分段切换 / 暂离等弱操作） */
.btn-outline-secondary {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--muted);
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    background: var(--soft-bg);
    border-color: var(--muted);
    color: var(--ink);
}

/* 分段切换选中态（自动预约/立即预约）：白底墨黑字 + 加粗描边
   （原墨黑实心填充太抢眼；用 inset 阴影加厚描边，不改变布局尺寸） */
.btn-outline-secondary.active {
    background: var(--surface);
    border-color: var(--ink);
    color: var(--ink);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--ink);
}

/* 悬停才反转为墨黑；聚焦不反转（点击后焦点停留，否则会一直墨黑） */
.btn-outline-secondary.active:hover {
    background: var(--soft-bg);
    border-color: var(--ink);
    color: var(--ink);
}

/* 描边确认（我已到馆等）：陶土橙描边 */
.btn-outline-success {
    background: var(--surface);
    border: 1px solid var(--accent-line);
    color: var(--accent-hover);
}

.btn-outline-success:hover, .btn-outline-success:focus {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* 描边危险（结束预约等） */
.btn-outline-danger {
    background: var(--surface);
    border: 1px solid var(--danger-line);
    color: var(--danger);
}

.btn-outline-danger:hover, .btn-outline-danger:focus {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.btn-link {
    color: var(--accent);
}

.btn-link:hover {
    color: var(--accent-hover);
}

/* ---------- 按下态（:active）----------
   Bootstrap 按钮 :active 走内部 --bs-btn-active-* 变量，若不复盖会闪回默认
   黄/蓝等语义色（如 btn-warning 点按瞬间变黄）。统一到本主题色板。 */
.btn-primary, .btn-success {
    --bs-btn-active-bg: var(--accent-hover);
    --bs-btn-active-border-color: var(--accent-hover);
    --bs-btn-active-color: var(--on-accent);
}

.btn-info, .btn-warning, .btn-secondary {
    --bs-btn-active-bg: var(--surface-soft-hover);
    --bs-btn-active-border-color: var(--muted);
    --bs-btn-active-color: var(--ink);
}

.btn-outline-secondary, .btn-outline-primary {
    --bs-btn-active-bg: var(--surface-soft-hover);
    --bs-btn-active-border-color: var(--muted);
    --bs-btn-active-color: var(--ink);
}

.btn-danger, .btn-outline-danger {
    --bs-btn-active-bg: var(--danger);
    --bs-btn-active-border-color: var(--danger);
    --bs-btn-active-color: #fff;
}

.btn-outline-success {
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
    --bs-btn-active-color: var(--on-accent);
}

/* 关闭按钮：去掉默认蓝 focus 环，中性化 */
.btn-close {
    opacity: 0.45;
    transition: opacity 0.15s;
}

.btn-close:hover {
    opacity: 0.8;
}

.btn-close:focus {
    box-shadow: 0 0 0 3px rgba(20, 20, 19, 0.08);
    opacity: 0.8;
}

.btn-sm {
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
    border-radius: 7px;
}

.btn-lg {
    padding: 0.7rem 1.2rem;
    font-size: 1rem;
}

.btn + .btn,
form + form {
    margin-left: 0.5rem;
}

/* ---------- 座位块 ---------- */
#seatChips {
    background: var(--tray-bg);
    border: 1px dashed var(--line-strong) !important;
    border-radius: var(--radius-ctl);
}

.seat-chip {
    background: var(--surface) !important;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    font-weight: 600;
    transition: border-color 0.15s, background 0.15s;
}

.seat-chip:hover {
    border-color: var(--accent);
    background: var(--accent-soft) !important;
}

/* ---------- 提示框 ---------- */
.alert {
    border: 1px solid var(--line);
    border-radius: var(--radius-ctl);
    font-size: 0.9rem;
    background: var(--surface);
    color: var(--ink);
}

.alert-info {
    background: var(--soft-bg);
    border-color: var(--line);
}

.alert-warning {
    background: var(--warn-bg);
    border-color: var(--warn-line);
    color: var(--warn-fg);
}

.alert-danger {
    background: var(--alert-danger-bg);
    border-color: var(--danger-line);
    color: var(--alert-danger-fg);
}

/* ---------- 徽标 ---------- */
.badge {
    font-weight: 600;
    border-radius: 6px;
    padding: 0.35em 0.6em;
}

.bg-success {
    background: var(--ok-bg) !important;
    color: var(--ok-fg) !important;
}

.bg-danger {
    background: var(--err-bg) !important;
    color: var(--err-fg) !important;
}

.bg-info {
    background: var(--info-bg) !important;
    color: var(--info-fg) !important;
}

/* 管理员：陶土橙底（原漏网的 Bootstrap 默认蓝） */
.bg-primary {
    background: var(--admin-bg) !important;
    color: var(--admin-fg) !important;
}

/* 中性态（已自动取消 / 已使用 / 普通用户）：暖灰（原默认灰蓝） */
.bg-secondary {
    background: var(--surface-soft) !important;
    color: var(--neutral-badge-fg) !important;
}

/* ---------- 表格 ---------- */
.table {
    font-size: 0.88rem;
    --bs-table-hover-bg: var(--row-hover);
    color: var(--ink);
}

.table th {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line-strong);
}

.table td {
    border-bottom: 1px solid var(--line);
}

/* ---------- 页脚 ---------- */
footer {
    background: transparent;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.82rem;
}

/* ---------- 登录 / 注册页 ---------- */
.auth-wrapper {
    min-height: calc(100vh - 220px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    width: 100%;
    max-width: 420px;
}

.auth-brand {
    text-align: center;
    margin-bottom: 1.6rem;
}

.auth-brand .eyebrow {
    margin-bottom: 0.5rem;
}

.auth-brand h2 {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.7rem;
    letter-spacing: 0.02em;
    margin-bottom: 0.3rem;
}

.auth-brand p {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
}

/* ---------- 模态框 ---------- */
.modal-content {
    border-radius: var(--radius-card);
    border: 1px solid var(--line);
    box-shadow: 0 12px 40px rgba(20, 20, 19, 0.12);
}

.modal-title {
    font-family: var(--heading-font);
    font-weight: 700;
}

.modal-body .alert {
    margin-bottom: 0;
    word-break: break-word;
}

/* ============================================
   手机端适配
   ============================================ */
@media (max-width: 767.98px) {
    .table-mobile {
        border: 0;
    }

    .table-mobile thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .table-mobile tr {
        border: 1px solid var(--line);
        border-radius: var(--radius-ctl);
        display: block;
        margin-bottom: .75em;
        padding: 0.35rem 0;
        background: var(--surface);
    }

    .table-mobile td {
        border-bottom: 1px solid var(--line);
        display: block;
        font-size: .85em;
        text-align: right;
        position: relative;
        padding-left: 50%;
    }

    .table-mobile td::before {
        content: attr(data-title);
        position: absolute;
        left: 0.75rem;
        font-weight: 600;
        text-align: left;
        color: var(--muted);
    }

    .table-mobile td:last-child {
        border-bottom: 0;
    }

    .btn-mobile-full {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .action-buttons {
        justify-content: flex-end;
    }

    .action-buttons .btn,
    .action-buttons form {
        margin-left: 0.25rem;
    }

    .form-control, .form-select {
        font-size: 16px; /* 防止 iOS 自动缩放 */
    }

    .modal-dialog {
        margin: 0.5rem;
    }

    main.container {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.me-1 {
    margin-right: 0.25rem !important;
}

.mb-1 {
    margin-bottom: 0.25rem !important;
}

.d-flex {
    display: flex !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.card-header .btn-danger {
    font-size: 0.75rem;
}

/* ---------- 设置分区 ---------- */
.section-title {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--ink);
}

.settings-divider {
    border-top: 1px solid var(--line);
    opacity: 1;
    margin: 1.25rem 0;
}

/* ============================================
   换肤系统：语义色板 token（经典=默认值）
   body[data-skin=...] 覆盖以下变量实现换肤
   ============================================ */
:root {
    --soft-bg: #F6F5F0;            /* 通用柔和底 / hover / alert-info */
    --surface-soft: #EFEDE6;       /* 次级按钮 / 中性徽章底 */
    --surface-soft-hover: #E7E4DB;
    --tray-bg: #FAF9F5;            /* 座位块托盘 */
    --accent-soft: #FDF3EE;        /* 座位 chip hover */
    --accent-line: #E8C4B4;        /* 陶土橙描边弱化（outline-success 边框） */
    --ok-bg: #E3EFE5;  --ok-fg: #2E6B40;      /* 成功徽章 */
    --err-bg: #F6E7E3;  --err-fg: #93392A;     /* 失败徽章 */
    --info-bg: #F0EBE2;  --info-fg: #7A5C33;   /* 信息徽章（迟到保护） */
    --admin-bg: #F6ECE2;  --admin-fg: #9A4E26; /* 管理员徽章 */
    --danger: #B3402E;  --danger-line: #EBCFC6;/* 危险动作/描边 */
    --neutral-badge-fg: #6B675C;               /* 中性徽章字 */
    --warn-bg: #FBF3EC;  --warn-line: #EDD9C8;  --warn-fg: #7A4A2B;
    --alert-danger-bg: #FAEFEC;  --alert-danger-fg: #8C3524;
    --placeholder: #A8A69C;
    --nav-bg: rgba(245, 244, 239, 0.85);
    --accent-ring: rgba(217, 119, 87, 0.15);
    --row-hover: rgba(20, 20, 19, 0.025);
    --text-font: var(--sans);   /* 正文字体（皮肤可切衬线/等宽） */
    --on-accent: #FFFFFF;     /* accent 底上的文字色 */
    --heading-font: var(--serif);
}

/* ============ 皮肤：Linear ============ */
body[data-skin="linear"] {
    --paper:#08090A; --surface:#16171C; --ink:#F7F8F8; --ink-soft:#C6CAD1; --muted:#9CA3AF;
    --accent:#5E6AD2; --accent-hover:#7782DD; --line:#24262B; --line-strong:#36383F;
    --soft-bg:#1E1F25; --surface-soft:#26272E; --surface-soft-hover:#2F313A;
    --tray-bg:#0C0D10; --accent-soft:#232740; --accent-line:#3A4170;
    --ok-bg:#12321F; --ok-fg:#7ED98C; --err-bg:#3A1F22; --err-fg:#FF8B8B;
    --info-bg:#1F2A44; --info-fg:#A8B6EE; --admin-bg:#3A2A1A; --admin-fg:#FFB37D;
    --danger:#FF6B6B; --danger-line:#552B2B; --warn-bg:#33260F; --warn-line:#57421B; --warn-fg:#E5C07B;
    --alert-danger-bg:#3D1D1A; --alert-danger-fg:#FF9D8F;
    --placeholder:#6B7078; --nav-bg:rgba(8,9,10,.85);
    --accent-ring:rgba(94,106,210,.35); --row-hover:rgba(255,255,255,.03);
    --radius-card:12px; --radius-ctl:6px; --heading-font:var(--sans);
}

/* ============ 皮肤：Notion ============ */
body[data-skin="notion"] {
    --paper:#F7F6F3; --surface:#FFFFFF; --ink:#37352F; --ink-soft:#5A5750; --muted:#787774;
    --accent:#37352F; --accent-hover:#1F1E1A; --line:#E9E9E7; --line-strong:#D3D1CB;
    --soft-bg:#F1F0EA; --surface-soft:#E9E8E2; --surface-soft-hover:#DFDDD5;
    --tray-bg:#F1F0EC; --accent-soft:#E4F4F1; --accent-line:#BFCDCA;
    --ok-bg:#E4F4F1; --ok-fg:#2F6B5C; --err-bg:#FBE9E6; --err-fg:#C0392B;
    --info-bg:#FFEDD5; --info-fg:#A0571A; --admin-bg:#FCEBD9; --admin-fg:#8A4A1F;
    --danger:#C0392B; --danger-line:#E5C4BE;
    --warn-bg:#FEF3C7; --warn-line:#E6D3A0; --warn-fg:#8A6A14;
    --alert-danger-bg:#FCEAE7; --alert-danger-fg:#B23A2C;
    --placeholder:#A6A49C; --nav-bg:rgba(247,246,243,.88);
    --accent-ring:rgba(55,53,47,.16); --row-hover:rgba(55,53,47,.03);
    --radius-card:8px; --radius-ctl:6px; --heading-font:var(--serif);
}

/* ============ 皮肤：Stripe Press ============ */
body[data-skin="stripe-press"] {
    --paper:#F1ECDE; --surface:#F7F2E6; --ink:#1A1A18; --ink-soft:#403E38; --muted:#736D5A;
    --accent:#1B4B5A; --accent-hover:#123845; --line:#C8BEA4; --line-strong:#B3A888;
    --soft-bg:#E8E1CE; --surface-soft:#E0D8C2; --surface-soft-hover:#D2C8AC;
    --tray-bg:#F4EFE2; --accent-soft:#DFE9E7; --accent-line:#9FB6AF;
    --ok-bg:#E3EDE9; --ok-fg:#23604F; --err-bg:#F3E2DC; --err-fg:#A63A2A;
    --info-bg:#EFE9D8; --info-fg:#6B5D33; --admin-bg:#E5E6D9; --admin-fg:#334B3A;
    --danger:#A63A2A; --danger-line:#DCC3B9;
    --warn-bg:#F2E8CE; --warn-line:#DCCAA2; --warn-fg:#7A5D1E;
    --alert-danger-bg:#F6E4DE; --alert-danger-fg:#9A3525;
    --placeholder:#9E9583; --nav-bg:rgba(241,236,222,.9);
    --accent-ring:rgba(27,75,90,.16); --row-hover:rgba(26,26,24,.04);
    --radius-card:2px; --radius-ctl:2px; --heading-font:var(--serif); --text-font:var(--serif);
}

/* ============ 皮肤：Vercel ============ */
body[data-skin="vercel"] {
    --paper:#000000; --surface:#0A0A0A; --ink:#EDEDED; --ink-soft:#B4B4B4; --muted:#888888;
    --accent:#FFFFFF; --accent-hover:#D6D6D6; --line:#1F1F1F; --line-strong:#343434;
    --soft-bg:#161616; --surface-soft:#1E1E1E; --surface-soft-hover:#2A2A2A;
    --tray-bg:#080808; --accent-soft:#2A2A2A; --accent-line:#4A4A4A;
    --ok-bg:#14331F; --ok-fg:#7CE0A3; --err-bg:#3B1E1E; --err-fg:#FF9E9E;
    --info-bg:#10253D; --info-fg:#7CC4FF; --admin-bg:#3A2413; --admin-fg:#FFB36B;
    --danger:#FF6B6B; --danger-line:#5C2A2A;
    --warn-bg:#3A2E12; --warn-line:#5C4A1D; --warn-fg:#E6C269;
    --alert-danger-bg:#3F1D1B; --alert-danger-fg:#FF9D94;
    --placeholder:#6B6B6B; --nav-bg:rgba(0,0,0,.75);
    --accent-ring:rgba(255,255,255,.18); --row-hover:rgba(255,255,255,.04);
    --radius-card:10px; --radius-ctl:6px; --heading-font:var(--sans); --on-accent:#0A0A0A;
}

/* ============ 皮肤：Raycast ============ */
body[data-skin="raycast"] {
    --paper:#0F0F11; --surface:#1B1B1F; --ink:#FFFFFF; --ink-soft:#C2C5CB; --muted:#B0B3B8;
    --accent:#FF6363; --accent-hover:#E85252; --line:#26262B; --line-strong:#3A3A40;
    --soft-bg:#222226; --surface-soft:#2A2A2F; --surface-soft-hover:#34343A;
    --tray-bg:#131315; --accent-soft:#3A2020; --accent-line:#66383B;
    --ok-bg:#173224; --ok-fg:#79D99A; --err-bg:#3D2020; --err-fg:#FF9C9C;
    --info-bg:#233147; --info-fg:#9CC0F5; --admin-bg:#3C2413; --admin-fg:#FFB877;
    --danger:#FF7474; --danger-line:#5F2E2E;
    --warn-bg:#3A2D11; --warn-line:#5F4A1B; --warn-fg:#EFCB6B;
    --alert-danger-bg:#411F1D; --alert-danger-fg:#FFA094;
    --placeholder:#6C6C6C; --nav-bg:rgba(15,15,17,.8);
    --accent-ring:rgba(255,99,99,.35); --row-hover:rgba(255,255,255,.04);
    --radius-card:14px; --radius-ctl:8px; --heading-font:var(--sans);
}

/* ============ 皮肤：Tufte ============ */
body[data-skin="tufte"] {
    --paper:#FBFAF6; --surface:#FFFFFB; --ink:#1B1B1A; --ink-soft:#3E3E3A; --muted:#5C5550;
    --accent:#A6300E; --accent-hover:#7F2307; --line:#D8D2C2; --line-strong:#C2BBAA;
    --soft-bg:#F2EFE6; --surface-soft:#EAE6D9; --surface-soft-hover:#DDD7C6;
    --tray-bg:#F6F4EC; --accent-soft:#F2E0D9; --accent-line:#C9A490;
    --ok-bg:#E3E6DA; --ok-fg:#3E5C3A; --err-bg:#F2DFD9; --err-fg:#A6300E;
    --info-bg:#E3E9EC; --info-fg:#3E4A5C; --admin-bg:#F0E2CE; --admin-fg:#8A4A1F;
    --danger:#A6300E; --danger-line:#DDBEB0;
    --warn-bg:#F4EDD8; --warn-line:#DBCFB0; --warn-fg:#6E5510;
    --alert-danger-bg:#F5E5DF; --alert-danger-fg:#9A2B0B;
    --placeholder:#A39C8F; --nav-bg:rgba(251,250,246,.9);
    --accent-ring:rgba(166,48,14,.12); --row-hover:rgba(27,27,26,.03);
    --radius-card:0px; --radius-ctl:0px; --heading-font:var(--serif); --text-font:var(--serif);
}

/* ============ 皮肤：无印 MUJI ============ */
body[data-skin="muji"] {
    --paper:#F4F2EC; --surface:#FCFBF7; --ink:#2A2A28; --ink-soft:#4F4F4A; --muted:#7C7B76;
    --accent:#C8161D; --accent-hover:#A31217; --line:#D9D6CD; --line-strong:#C4C1B6;
    --soft-bg:#ECEAE2; --surface-soft:#E4E2D8; --surface-soft-hover:#D7D4C8;
    --tray-bg:#EFEDE5; --accent-soft:#F6E3E1; --accent-line:#DBB6B2;
    --ok-bg:#E3E8DF; --ok-fg:#3E5C3A; --err-bg:#F3E0DE; --err-fg:#B03A2E;
    --info-bg:#E9E9E0; --info-fg:#5C6A52; --admin-bg:#F6E5E3; --admin-fg:#A31217;
    --danger:#B03A2E; --danger-line:#DDC3BC;
    --warn-bg:#F1EBDA; --warn-line:#DCD2B2; --warn-fg:#6E5510;
    --alert-danger-bg:#F6E7E3; --alert-danger-fg:#A03025;
    --placeholder:#B0ADA3; --nav-bg:rgba(244,242,236,.92);
    --accent-ring:rgba(200,22,29,.12); --row-hover:rgba(42,42,40,.03);
    --radius-card:0px; --radius-ctl:0px; --heading-font:var(--sans);
}

/* ============ 皮肤：Aesop ============ */
body[data-skin="aesop"] {
    --paper:#E8E4D9; --surface:#F0EDE4; --ink:#1B1B1B; --ink-soft:#4A463E; --muted:#7A8470;
    --accent:#7A4623; --accent-hover:#5E3318; --line:#CFC8B6; --line-strong:#B6AE9C;
    --soft-bg:#E3DED0; --surface-soft:#DAD4C3; --surface-soft-hover:#CCC5B1;
    --tray-bg:#EBE6DA; --accent-soft:#EADDCB; --accent-line:#C0A385;
    --ok-bg:#DDE4D5; --ok-fg:#46604A; --err-bg:#EFE0D7; --err-fg:#9A4526;
    --info-bg:#E7E0D0; --info-fg:#7A6B45; --admin-bg:#E3D6C5; --admin-fg:#6E4520;
    --danger:#9A4526; --danger-line:#D8C0B2;
    --warn-bg:#EFE5CE; --warn-line:#D6C6A6; --warn-fg:#6E581B;
    --alert-danger-bg:#F0E0D6; --alert-danger-fg:#8F3F20;
    --placeholder:#A69E8E; --nav-bg:rgba(232,228,217,.92);
    --accent-ring:rgba(122,70,35,.14); --row-hover:rgba(27,27,27,.04);
    --radius-card:0px; --radius-ctl:0px; --heading-font:var(--serif); --text-font:var(--serif);
}

/* ============ 皮肤：中古世纪 ============ */
body[data-skin="midcentury"] {
    --paper:#EBE3D2; --surface:#F6EFDF; --ink:#1A1A18; --ink-soft:#4E4940; --muted:#6E6758;
    --accent:#3D6E70; --accent-hover:#2E5557; --line:#D8CDB0; --line-strong:#BEB294;
    --soft-bg:#E6DDC6; --surface-soft:#DED3B6; --surface-soft-hover:#CFC2A0;
    --tray-bg:#EFE8D8; --accent-soft:#D8E4E2; --accent-line:#9FB8B2;
    --ok-bg:#DDE3C4; --ok-fg:#4A6B2E; --err-bg:#F1D9CC; --err-fg:#A03E1F;
    --info-bg:#E3E3C8; --info-fg:#6E7A3A; --admin-bg:#E4D5B4; --admin-fg:#8A5A1E;
    --danger:#A63C21; --danger-line:#DCC0AD;
    --warn-bg:#F0E3C2; --warn-line:#D5C496; --warn-fg:#7A5C14;
    --alert-danger-bg:#F3DFD3; --alert-danger-fg:#9C3A1F;
    --placeholder:#A89F8B; --nav-bg:rgba(235,227,210,.92);
    --accent-ring:rgba(61,110,112,.16); --row-hover:rgba(26,26,24,.04);
    --radius-card:0px; --radius-ctl:0px; --heading-font:var(--sans);
}

/* ============ 皮肤：Bloomberg ============ */
body[data-skin="bloomberg"] {
    --paper:#0A0E1A; --surface:#11172A; --ink:#E8ECF4; --ink-soft:#A9B2C6; --muted:#5E6680;
    --accent:#FFA02F; --accent-hover:#E88E1A; --line:#2A3050; --line-strong:#3A4260;
    --soft-bg:#161D33; --surface-soft:#1A2138; --surface-soft-hover:#242D49;
    --tray-bg:#070B15; --accent-soft:#3A2F14; --accent-line:#6E5A22;
    --ok-bg:#0F2B1E; --ok-fg:#00B96B; --err-bg:#331B1B; --err-fg:#F23645;
    --info-bg:#222A42; --info-fg:#A9B2C6; --admin-bg:#FFF0D9; --admin-fg:#B96A00;
    --danger:#F23645; --danger-line:#5A2A30;
    --warn-bg:#3A2F14; --warn-line:#5F4C1E; --warn-fg:#FFA02F;
    --alert-danger-bg:#3D2418; --alert-danger-fg:#F23645;
    --placeholder:#5E6680; --nav-bg:rgba(10,14,26,.9);
    --accent-ring:rgba(255,160,47,.3); --row-hover:rgba(255,255,255,.04);
    --radius-card:2px; --radius-ctl:2px; --heading-font:var(--sans); --on-accent:#0A0E1A;
}

/* ============ 主题：VSCode 深色+ ============ */
body[data-skin="dark-plus"] {
    --paper:#1E1E1E; --surface:#252526; --ink:#D4D4D4; --ink-soft:#BBBBBB; --muted:#858585;
    --accent:#569CD6; --accent-hover:#4EC4E6; --line:#2D2D30; --line-strong:#3F3F46;
    --soft-bg:#2A2D2E; --surface-soft:#2D2D30; --surface-soft-hover:#383B3D;
    --tray-bg:#1B1B1B; --accent-soft:#1F2D44; --accent-line:#2A4A63;
    --ok-bg:#1B3A24; --ok-fg:#7BD88F; --err-bg:#3A1D1D; --err-fg:#FF9D94;
    --info-bg:#243447; --info-fg:#79B8FF; --admin-bg:#3A2D14; --admin-fg:#FFCC66;
    --danger:#F48771; --danger-line:#5A2A2A; --warn-bg:#3A2F14; --warn-fg:#E5C07B;
    --alert-danger-bg:#3D1D1A; --alert-danger-fg:#FF8E80;
    --placeholder:#6B6B6B; --nav-bg:rgba(30,30,30,.82);
    --accent-ring:rgba(86,156,214,.35); --row-hover:rgba(255,255,255,.03);
    --heading-font: var(--sans);
}

/* ============ 主题：VSCode 现代深色 ============ */
body[data-skin="dark-modern"] {
    --paper:#1F1F1F; --surface:#181818; --ink:#CCCCCC; --ink-soft:#A0A0A0; --muted:#858585;
    --accent:#75BEFF; --accent-hover:#5BA8E6; --line:#2A2A2A; --line-strong:#3A3A3A;
    --soft-bg:#262626; --surface-soft:#2C2C2C; --surface-soft-hover:#383838;
    --tray-bg:#181818; --accent-soft:#1F3349; --accent-line:#2A4A6E;
    --ok-bg:#1A2F1F; --ok-fg:#7DDB9F; --err-bg:#3A1F1F; --err-fg:#FF9999;
    --info-bg:#1E2A3A; --info-fg:#85C8FF; --admin-bg:#2E2310; --admin-fg:#F2C77A;
    --danger:#F48771; --danger-line:#5A2E2E; --warn-bg:#33260F; --warn-fg:#EBC06A;
    --alert-danger-bg:#3A1D1A; --alert-danger-fg:#FF8E80;
    --placeholder:#6A6A6A; --nav-bg:rgba(31,31,31,.85);
    --accent-ring:rgba(117,190,255,.32); --row-hover:rgba(255,255,255,.03);
    --heading-font: var(--sans);
}

/* ============ 主题：Monokai ============ */
body[data-skin="monokai"] {
    --paper:#272822; --surface:#1E1F1C; --ink:#F8F8F2; --ink-soft:#CFCDC8; --muted:#75715E;
    --accent:#A6E22E; --accent-hover:#9CDD24; --line:#3E3D32; --line-strong:#5A5942;
    --soft-bg:#2F2E27; --surface-soft:#36352E; --surface-soft-hover:#42413A;
    --tray-bg:#22221D; --accent-soft:#2E442E; --accent-line:#3F5A2E;
    --ok-bg:#1F3F1A; --ok-fg:#A6E22E; --err-bg:#3F1F1F; --err-fg:#F92672;
    --info-bg:#2A2A4A; --info-fg:#66D9EF; --admin-bg:#3F2E1A; --admin-fg:#FD971F;
    --danger:#F92672; --danger-line:#5C2A3A; --warn-bg:#3F3A1F; --warn-fg:#E6DB74;
    --alert-danger-bg:#3F1F2A; --alert-danger-fg:#F66B8A;
    --placeholder:#75715E; --nav-bg:rgba(39,40,34,.85);
    --accent-ring:rgba(166,226,46,.35); --row-hover:rgba(255,255,255,.03);
    --heading-font: var(--sans);
}

/* ============ 主题：Solarized 深色 ============ */
body[data-skin="solarized-dark"] {
    --paper:#002B36; --surface:#073642; --ink:#93A1A1; --ink-soft:#7C9696; --muted:#586E75;
    --accent:#268BD2; --accent-hover:#1F7AB8; --line:#0A4453; --line-strong:#134858;
    --soft-bg:#063541; --surface-soft:#0C475A; --surface-soft-hover:#12546B;
    --tray-bg:#02212B; --accent-soft:#0F3D5A; --accent-line:#1B5F88;
    --ok-bg:#0A3024; --ok-fg:#859900; --err-bg:#3D1F1F; --err-fg:#DC322F;
    --info-bg:#0F2A3D; --info-fg:#268BD2; --admin-bg:#3A2A11; --admin-fg:#B58900;
    --danger:#DC322F; --danger-line:#5A2A2A; --warn-bg:#332A11; --warn-fg:#B58900;
    --alert-danger-bg:#3A1F1F; --alert-danger-fg:#DC322F;
    --placeholder:#586E75; --nav-bg:rgba(0,43,54,.88);
    --accent-ring:rgba(38,139,210,.35); --row-hover:rgba(147,161,161,.04);
    --heading-font: var(--serif);
}

/* ============ 主题：Dracula ============ */
body[data-skin="dracula"] {
    --paper:#282A36; --surface:#21222C; --ink:#F8F8F2; --ink-soft:#BBBBBB; --muted:#6272A4;
    --accent:#BD93F9; --accent-hover:#A77BF4; --line:#343746; --line-strong:#44475A;
    --soft-bg:#2E303E; --surface-soft:#34364A; --surface-soft-hover:#424453;
    --tray-bg:#1E1F29; --accent-soft:#3A2F50; --accent-line:#553A82;
    --ok-bg:#1F3D2A; --ok-fg:#50FA7B; --err-bg:#3F1F2F; --err-fg:#FF79C6;
    --info-bg:#243447; --info-fg:#8BE9FD; --admin-bg:#3A2A1F; --admin-fg:#FFB86C;
    --danger:#FF5555; --danger-line:#5C2A2A; --warn-bg:#3A2F1A; --warn-fg:#F1FA8C;
    --alert-danger-bg:#3A1F2A; --alert-danger-fg:#FF79C6;
    --placeholder:#6272A4; --nav-bg:rgba(40,42,54,.85);
    --accent-ring:rgba(189,147,249,.35); --row-hover:rgba(248,248,242,.04);
    --heading-font: var(--sans);
}

/* ============ 主题：Tokyo Night ============ */
body[data-skin="tokyo-night"] {
    --paper:#1A1B26; --surface:#16161E; --ink:#C0CAF5; --ink-soft:#9AA5CE; --muted:#565F89;
    --accent:#7AA2F7; --accent-hover:#92B1F8; --line:#24283B; --line-strong:#363D5C;
    --soft-bg:#1F2233; --surface-soft:#252836; --surface-soft-hover:#2F3349;
    --tray-bg:#13141F; --accent-soft:#1F2D4D; --accent-line:#2A4080;
    --ok-bg:#142E25; --ok-fg:#9ECE6A; --err-bg:#3A1F25; --err-fg:#F7768E;
    --info-bg:#1B2444; --info-fg:#7DCFFF; --admin-bg:#332211; --admin-fg:#E0AF68;
    --danger:#F7768E; --danger-line:#5C2A36; --warn-bg:#33271A; --warn-fg:#E0AF68;
    --alert-danger-bg:#3A1F25; --alert-danger-fg:#F7768E;
    --placeholder:#565F89; --nav-bg:rgba(26,27,38,.85);
    --accent-ring:rgba(122,162,247,.35); --row-hover:rgba(192,202,245,.04);
    --heading-font: var(--sans);
}

/* ============ 主题：Nord ============ */
body[data-skin="nord"] {
    --paper:#2E3440; --surface:#3B4252; --ink:#D8DEE9; --ink-soft:#ABB7C4; --muted:#7B88A1;
    --accent:#88C0D0; --accent-hover:#6FB3CC; --line:#434C5E; --line-strong:#4C566A;
    --soft-bg:#353B48; --surface-soft:#3D4453; --surface-soft-hover:#4A5266;
    --tray-bg:#272C36; --accent-soft:#1E3A4A; --accent-line:#2A5A75;
    --ok-bg:#1F3A2A; --ok-fg:#A3BE8C; --err-bg:#3F1F1F; --err-fg:#BF616A;
    --info-bg:#1F2D3D; --info-fg:#81A1C1; --admin-bg:#332E1A; --admin-fg:#EBCB8B;
    --danger:#BF616A; --danger-line:#5C2A2A; --warn-bg:#332A1A; --warn-fg:#EBCB8B;
    --alert-danger-bg:#3F1F1F; --alert-danger-fg:#BF616A;
    --placeholder:#7B88A1; --nav-bg:rgba(46,52,64,.85);
    --accent-ring:rgba(136,192,208,.32); --row-hover:rgba(216,222,233,.04);
    --heading-font: var(--sans);
}

/* ============ 主题：Catppuccin Mocha（暗） ============ */
body[data-skin="catppuccin-mocha"] {
    --paper:#1E1E2E; --surface:#181825; --ink:#CDD6F4; --ink-soft:#BAC2DE; --muted:#6C7086;
    --accent:#CBA6F7; --accent-hover:#B58FE9; --line:#313244; --line-strong:#45475A;
    --soft-bg:#24243A; --surface-soft:#2A2A45; --surface-soft-hover:#363653;
    --tray-bg:#181825; --accent-soft:#2A2440; --accent-line:#4A3D78;
    --ok-bg:#1F3D2A; --ok-fg:#A6E3A1; --err-bg:#3A1F2A; --err-fg:#F38BA8;
    --info-bg:#1F2440; --info-fg:#89B4FA; --admin-bg:#3A2A1F; --admin-fg:#FAB387;
    --danger:#F38BA8; --danger-line:#5C2A3A; --warn-bg:#33271A; --warn-fg:#F9E2AF;
    --alert-danger-bg:#3A1F2A; --alert-danger-fg:#F38BA8;
    --placeholder:#6C7086; --nav-bg:rgba(30,30,46,.85);
    --accent-ring:rgba(203,166,247,.32); --row-hover:rgba(205,214,244,.04);
    --heading-font: var(--sans);
}

/* ============ 主题：GitHub 暗 ============ */
body[data-skin="github-dark"] {
    --paper:#0D1117; --surface:#161B22; --ink:#E6EDF3; --ink-soft:#B1BAC4; --muted:#7D8590;
    --accent:#58A6FF; --accent-hover:#79C0FF; --line:#21262D; --line-strong:#30363D;
    --soft-bg:#161B22; --surface-soft:#21262D; --surface-soft-hover:#30363D;
    --tray-bg:#010409; --accent-soft:#1F2D44; --accent-line:#2A4A7E;
    --ok-bg:#143323; --ok-fg:#7EE787; --err-bg:#3D1F1F; --err-fg:#FF7B72;
    --info-bg:#1F2D3D; --info-fg:#79C0FF; --admin-bg:#3A2A1F; --admin-fg:#F0883E;
    --danger:#FF7B72; --danger-line:#5C2A2A; --warn-bg:#332A1A; --warn-fg:#D29922;
    --alert-danger-bg:#3D1F1F; --alert-danger-fg:#FF7B72;
    --placeholder:#6E7681; --nav-bg:rgba(13,17,23,.88);
    --accent-ring:rgba(88,166,255,.3); --row-hover:rgba(230,237,243,.04);
    --heading-font: var(--sans);
}

/* ============ 主题：Gruvbox 暗 ============ */
body[data-skin="gruvbox-dark"] {
    --paper:#282828; --surface:#1D2021; --ink:#EBDBB2; --ink-soft:#D5C4A1; --muted:#928374;
    --accent:#FE8019; --accent-hover:#EB6010; --line:#3C3836; --line-strong:#504945;
    --soft-bg:#32302A; --surface-soft:#3A3832; --surface-soft-hover:#45423D;
    --tray-bg:#1D2021; --accent-soft:#3F2B1F; --accent-line:#5C3A1F;
    --ok-bg:#1F3324; --ok-fg:#B8BB26; --err-bg:#3A1F1F; --err-fg:#FB4934;
    --info-bg:#1F2D3D; --info-fg:#83A598; --admin-bg:#3A2D11; --admin-fg:#FABD2A;
    --danger:#FB4934; --danger-line:#5C2A2A; --warn-bg:#3A2F11; --warn-fg:#FABD2A;
    --alert-danger-bg:#3D1F1F; --alert-danger-fg:#FB4934;
    --placeholder:#7C6F64; --nav-bg:rgba(40,40,40,.85);
    --accent-ring:rgba(254,128,25,.35); --row-hover:rgba(235,219,178,.04);
    --heading-font: var(--sans);
}

/* ============ 主题：VSCode 现代浅色 ============ */
body[data-skin="light-modern"] {
    --paper:#F8F8F8; --surface:#FFFFFF; --ink:#1F1F1F; --ink-soft:#4A4A4A; --muted:#6E6E6E;
    --accent:#005FB8; --accent-hover:#0078D4; --line:#E8E8E8; --line-strong:#D4D4D4;
    --soft-bg:#EFEFEF; --surface-soft:#E6E6E6; --surface-soft-hover:#DCDCDC;
    --tray-bg:#F2F2F2; --accent-soft:#E7F0FA; --accent-line:#BBD3F0;
    --ok-bg:#E3F2E1; --ok-fg:#2E7D32; --err-bg:#F9E7E5; --err-fg:#C62828;
    --info-bg:#E7F0F9; --info-fg:#1565C0; --admin-bg:#F6ECE2; --admin-fg:#A0592F;
    --danger:#C62828; --danger-line:#E5C4BE; --warn-bg:#FBF2E3; --warn-fg:#8A5A14;
    --alert-danger-bg:#FCEAE7; --alert-danger-fg:#A93428;
    --placeholder:#A6A6A6; --nav-bg:rgba(248,248,248,.88);
    --accent-ring:rgba(0,95,184,.18); --row-hover:rgba(31,31,31,.03);
    --heading-font: var(--sans);
}

/* ============ 主题：Quiet Light ============ */
body[data-skin="quiet-light"] {
    --paper:#F5F5F5; --surface:#FAFAFA; --ink:#333333; --ink-soft:#555555; --muted:#7A7A7A;
    --accent:#A66400; --accent-hover:#854E00; --line:#E0E0E0; --line-strong:#CCCCCC;
    --soft-bg:#ECECEC; --surface-soft:#E2E2E2; --surface-soft-hover:#D8D8D8;
    --tray-bg:#F0F0F0; --accent-soft:#F5E8DC; --accent-line:#DDC0A6;
    --ok-bg:#E5EFE2; --ok-fg:#33622E; --err-bg:#F7E5E2; --err-fg:#A03E1F;
    --info-bg:#E8EFE5; --info-fg:#5E6642; --admin-bg:#F5E7DD; --admin-fg:#8A4A1C;
    --danger:#A03E1F; --danger-line:#E0C4C0; --warn-bg:#F8F0DA; --warn-fg:#6B5310;
    --alert-danger-bg:#F9EAE6; --alert-danger-fg:#A03E1F;
    --placeholder:#A0A0A0; --nav-bg:rgba(245,245,245,.9);
    --accent-ring:rgba(166,100,0,.15); --row-hover:rgba(51,51,51,.03);
    --heading-font: var(--serif);
}

/* ============ 主题：Solarized 浅色 ============ */
body[data-skin="solarized-light"] {
    --paper:#FDF6E3; --surface:#FFFFFF; --ink:#586E75; --ink-soft:#657B83; --muted:#93A1A1;
    --accent:#B58900; --accent-hover:#A07A00; --line:#EAE5C8; --line-strong:#D9D4B6;
    --soft-bg:#F2EDD8; --surface-soft:#ECE9D2; --surface-soft-hover:#E0DDC2;
    --tray-bg:#F8F1D5; --accent-soft:#F7E9C4; --accent-line:#D9C36F;
    --ok-bg:#EBF1D9; --ok-fg:#859900; --err-bg:#F3DDD9; --err-fg:#DC322F;
    --info-bg:#E7F0F5; --info-fg:#268BD2; --admin-bg:#F5E5C8; --admin-fg:#A0592F;
    --danger:#DC322F; --danger-line:#E5C3BC; --warn-bg:#F8EFCB; --warn-fg:#B58900;
    --alert-danger-bg:#FAE3DC; --alert-danger-fg:#B23A2C;
    --placeholder:#93A1A1; --nav-bg:rgba(253,246,227,.9);
    --accent-ring:rgba(181,137,0,.15); --row-hover:rgba(88,110,117,.03);
    --heading-font: var(--serif);
}

/* ============ 主题：GitHub 浅 ============ */
body[data-skin="github-light"] {
    --paper:#FFFFFF; --surface:#F6F8FA; --ink:#1F2328; --ink-soft:#424A53; --muted:#656D76;
    --accent:#0969DA; --accent-hover:#1F7AE0; --line:#D1D9E0; --line-strong:#B1BAC4;
    --soft-bg:#F3F5F8; --surface-soft:#EAEEF2; --surface-soft-hover:#DDE2E8;
    --tray-bg:#F0F3F6; --accent-soft:#DCEEFB; --accent-line:#BFD9F2;
    --ok-bg:#DAFBE1; --ok-fg:#1A7F37; --err-bg:#FFEBE9; --err-fg:#CF222E;
    --info-bg:#DDF4FF; --info-fg:#0969DA; --admin-bg:#FFF1E5; --admin-fg:#BC4C00;
    --danger:#CF222E; --danger-line:#F4C7C3; --warn-bg:#FFF8C5; --warn-fg:#9A6700;
    --alert-danger-bg:#FFEBE9; --alert-danger-fg:#CF222E;
    --placeholder:#8C959F; --nav-bg:rgba(255,255,255,.9);
    --accent-ring:rgba(9,105,218,.18); --row-hover:rgba(31,35,40,.03);
    --heading-font: var(--sans);
}

/* ============ 主题：Catppuccin Latte（浅） ============ */
body[data-skin="catppuccin-latte"] {
    --paper:#EFF1F5; --surface:#E6E9EF; --ink:#4C4F69; --ink-soft:#5C5F77; --muted:#7C7F93;
    --accent:#8839EF; --accent-hover:#762DD0; --line:#BCC0CC; --line-strong:#9CA0B0;
    --soft-bg:#E6E9EF; --surface-soft:#DDE0E8; --surface-soft-hover:#D0D4DE;
    --tray-bg:#DCE0E8; --accent-soft:#EDE2F8; --accent-line:#C7A8F5;
    --ok-bg:#DCE9D8; --ok-fg:#40A02B; --err-bg:#F2D7D5; --err-fg:#D20F39;
    --info-bg:#DCE3F2; --info-fg:#1E66F5; --admin-bg:#F5E6E0; --admin-fg:#A5552A;
    --danger:#D20F39; --danger-line:#EBC3C0; --warn-bg:#F5EBD2; --warn-fg:#A5751F;
    --alert-danger-bg:#F8E2DE; --alert-danger-fg:#B73A4A;
    --placeholder:#9CA0B0; --nav-bg:rgba(239,241,245,.9);
    --accent-ring:rgba(136,57,239,.18); --row-hover:rgba(76,79,105,.03);
    --heading-font: var(--sans);
}

/* ============ 主题：Gruvbox 浅 ============ */
body[data-skin="gruvbox-light"] {
    --paper:#FBF1C7; --surface:#FFFFFF; --ink:#3C3836; --ink-soft:#504945; --muted:#7C6F64;
    --accent:#B57614; --accent-hover:#9A5F0A; --line:#E8DDB0; --line-strong:#D5C68D;
    --soft-bg:#F2EBC0; --surface-soft:#EDE2A8; --surface-soft-hover:#E5D89A;
    --tray-bg:#F5E9B4; --accent-soft:#F0E2B5; --accent-line:#D9B86B;
    --ok-bg:#E3E8C8; --ok-fg:#79740E; --err-bg:#F3DDD9; --err-fg:#9D0006;
    --info-bg:#E7E8D0; --info-fg:#458588; --admin-bg:#F2DFB0; --admin-fg:#A55A1E;
    --danger:#9D0006; --danger-line:#E5C3C0; --warn-bg:#F8EDB8; --warn-fg:#B57614;
    --alert-danger-bg:#F8E2DC; --alert-danger-fg:#9D0006;
    --placeholder:#A89984; --nav-bg:rgba(251,241,199,.9);
    --accent-ring:rgba(181,118,20,.15); --row-hover:rgba(60,56,54,.03);
    --heading-font: var(--serif);
}

/* ---------- 导航栏主题下拉（紧凑单行，不撑高导航条） ---------- */
.nav-item.skin-item {
    margin-left: 0.75rem;
}

/* 未登录页（登录/注册）主题下拉，靠右单行 */
.skin-anon-wrap {
    display: flex;
    align-items: center;
}

.skin-select {
    width: auto;
    min-width: 7.5rem;
    max-width: 9.5rem;
    border-radius: var(--radius-ctl);
    border: 1px solid var(--line-strong);
    background-color: var(--surface);
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    height: auto;
    padding: 0.2rem 1.8rem 0.2rem 0.55rem;
    background-position: right 0.5rem center;
    background-size: 0.9em;
    cursor: pointer;
    vertical-align: middle;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.skin-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

@media (max-width: 991.98px) {
    .nav-item.skin-item {
        margin: 0.4rem 0.75rem 0.15rem;
    }
    .skin-select {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}