@charset "utf-8";
/* ===================================================================
   余哥礼簿 · 界面视觉层（现代极简 / 中性灰蓝）
   -------------------------------------------------------------------
   定位：**只管好看**，不碰任何逻辑。所有 id、class、form name、JS 选择器
   一律沿用页面原有的（要改也只是**加**类，绝不删），所以这份文件删掉也只是
   「回到旧皮肤」，功能一个都不受影响。

   加载顺序（很重要）：gb_theme.css → gb_ui.css。
   gb_ui.css 排在最后 ⇒ 同特异度下由它说了算。要压住 gb_theme 里带 !important
   的规则（比如统计卡的渐变），选择器必须凑到同等特异度再叠加 body.gb-ui。

   这一版相对上一版做了什么（其余段落的改动写在各自注释里）：
     ① 补齐「设计令牌」：字号阶梯、4px 间距网格、圆角三档、两层阴影、语义色，
        文件里不再出现随手写的散值；
     ② 新增全局 :focus-visible 焦点环、统一禁用态（opacity .5 + not-allowed）、
        空态排版 —— 上一版只有按钮有焦点环，禁用态散在主程序里且数值不统一；
     ③ 圆角并到三档：卡片 14 / 输入与按钮 10 / 徽章 6 / 弹窗 16
        （上一版统计卡 12、小按钮 8、工具条按钮 9，一屏四种圆角）；
     ④ 语义色降饱和：成功 / 警告 / 危险 / 信息统一成 #15803d / #b45309 /
        #b91c1c / #0369a1，只用于文字、徽章、提示条，**不**用于实心按钮；
     ⑤ 列表页与详情页的表格规则合并成一份（上一版 gb_theme.css 里还有一份
        带 #eventTable 的副本，靠 id 特异度压着这份，导致「改了没反应」）。

   ⚠️ 四条硬约束：
   1. 一排表单控件的**等高**不能破：输入框 / 下拉 / 非 sm 按钮统一 40px，
      改任一项都要同步另外两项。
   2. 桌面规则一律包 @media (min-width:769px)：≤768px 时 #recordTable 是
      block 卡片流（thead 隐藏、td::before 补列名），那套 padding 是刻意调的。
   3. 不要给 #qrUploadBox / #qrEditBox 设 display：JS 用 inline display 开关它，
      !important 会把「点开二维码面板」这个功能直接废掉。
   4. 注释里不能出现注释结束标记（星号紧跟斜杠）——出现过一次，整段样式被吞。
   =================================================================== */

/* ===================================================================
   设计令牌
   -------------------------------------------------------------------
   为什么集中成令牌：上一版颜色、字号、圆角全是散值，改一个灰阶要在文件里
   搜五处；现在只允许从这里取值，别处不写字面量。
   =================================================================== */
body.gb-ui{
    /* ---- 中性基底：页面 → 卡片 → 分割线 ---- */
    --ui-bg:#f6f7f9;            /* 页面底：比 #f4f6f9 再提一档，卡片才浮得出来 */
    --ui-surface:#ffffff;       /* 卡片 / 弹窗 / 输入框 */
    --ui-line:#e5e8ec;          /* 卡片与弹窗描边 */
    --ui-line-2:#eef0f3;        /* 分割线（卡片头与正文之间） */
    --ui-line-3:#f1f5f9;        /* 表格行线：比分割线更淡，不打断阅读 */
    --ui-field:#dbe2ea;         /* 输入框描边：比卡片描边深一点，才看得出是「可填」 */
    --ui-field-hover:#c3cddb;
    --ui-row-hover:#f8fafc;     /* 表格 hover 底 */
    --ui-bar:#94a3b8;           /* hover 时首列那道 3px 中性指示条 */

    /* ---- 文字三档：正文 / 次要 / 弱化 ---- */
    --ui-ink:#0f172a;
    --ui-ink-2:#475569;
    --ui-ink-3:#64748b;
    --ui-muted:#94a3b8;
    --ui-solid:#334155;
    --ui-ring:rgba(148,163,184,.18);

    /* ---- 语义色：全部降饱和，只给文字 / 徽章 / 提示条用。
           实心按钮不碰语义色 —— 一屏只允许一颗实心主色（见下方按钮五档）。 ---- */
    --ui-ok:#15803d;         --ui-ok-bg:#f0fdf4;      --ui-ok-line:#bbf7d0;
    --ui-warn:#b45309;       --ui-warn-bg:#fffbeb;    --ui-warn-line:#fde68a;
    --ui-danger:#b91c1c;     --ui-danger-bg:#fef2f2;  --ui-danger-line:#fecaca;
    --ui-info:#0369a1;       --ui-info-bg:#f0f9ff;    --ui-info-line:#bae6fd;

    /* ---- 中性实心（不随红白事变）：「进入事务」「大屏二维码显示中」这类
           要强调、但不能抢主色焦点的按钮。比 --ui-solid 再深一档做渐变。 ---- */
    --ui-nsolid-1:#3c4b5f;  --ui-nsolid-2:#263241;
    --ui-nsolid-1h:#333f51; --ui-nsolid-2h:#1b242e;

    /* ---- 字号阶梯：11 / 12.5 / 13.5 / 14 / 15 / 16 / 18 / 21 / 26 ----
       全站只允许取这九档。26 是留给大标题 / 空态的，目前页面没用到，先占住。 */
    --ui-fs-11:11px;
    --ui-fs-12:12.5px;
    --ui-fs-13:13.5px;
    --ui-fs-14:14px;
    --ui-fs-15:15px;
    --ui-fs-16:16px;
    --ui-fs-18:18px;
    --ui-fs-21:21px;
    --ui-fs-26:26px;

    /* ---- 间距网格：4px 基准，取 4 / 8 / 12 / 16 / 20 / 24 ----
       （label 与输入框之间保留 6px 这个 2px 半档，见下方表单段注释） */
    --ui-s-1:4px;
    --ui-s-2:8px;
    --ui-s-3:12px;
    --ui-s-4:16px;
    --ui-s-5:20px;
    --ui-s-6:24px;

    /* ---- 圆角三档 ---- */
    --ui-r-card:14px;    /* 卡片 / 操作条 / 打印版式卡 */
    --ui-r-field:10px;   /* 输入框 / 下拉 / 按钮（含小按钮） */
    --ui-r-tag:6px;      /* 徽章 */
    --ui-r-modal:16px;   /* 弹窗 */

    /* ---- 阴影：两层轻投影，静态很浅、hover 略深；一律中性，禁止彩色外发光 ---- */
    --ui-shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 18px rgba(16,24,40,.05);
    --ui-shadow-hover:0 2px 6px rgba(16,24,40,.06), 0 14px 30px rgba(16,24,40,.07);
    --ui-shadow-modal:0 24px 60px rgba(16,24,40,.22);

    /* ---- 动效：150–200ms，统一缓动 ---- */
    --ui-t:160ms;
    --ui-ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- 页面底与容器 ----------
   背景改成**纯色**：上一版 gb_theme.css 有两团 radial-gradient 光晕（透明度
   .09–.12），在浅底上会形成两块脏兮兮的色斑，也是「看起来不贵」的主要来源。
   光晕已随 gb_theme.css 瘦身一起删掉，这里 !important 兜住残留。 */
body.gb-ui{
    background-color:var(--ui-bg) !important;
    background-image:none !important;
    color:var(--ui-ink);
    font-size:var(--ui-fs-14);
}
body.gb-ui .container-fluid{
    max-width:1440px;
    margin-left:auto;
    margin-right:auto;
    padding-left:var(--ui-s-5) !important;
    padding-right:var(--ui-s-5) !important;
}

/* ---------- 标题区 ---------- */
body.gb-ui h3.fw-semibold{
    font-size:var(--ui-fs-21) !important;
    font-weight:600 !important;
    color:var(--ui-ink) !important;
    letter-spacing:.01em;
    margin:0 !important;
}
body.gb-ui .gb-list-title{ display:flex; align-items:center; gap:9px; color:var(--ui-ink); }
/* 标题左侧竖条：纯装饰，4px 中性色，不抢戏（不用主题色 —— 主题色留给唯一焦点） */
body.gb-ui .gb-list-title::before{
    content:""; width:4px; height:18px; border-radius:2px;
    background:#cbd5e1; flex:none;
}
body.gb-ui .mb-4.flex-wrap{ margin-bottom:var(--ui-s-4) !important; }

/* ---------- 卡片 ----------
   圆角统一到 14px（上一版统计卡是 12px，一屏两种圆角），描边 1px + 两层轻投影。
   hover 只换阴影、不动位置：卡片是容器，整块跟着鼠标上浮会很廉价。 */
body.gb-ui .card{
    background:var(--ui-surface) !important;
    border:1px solid var(--ui-line) !important;
    border-radius:var(--ui-r-card) !important;
    box-shadow:var(--ui-shadow) !important;
    margin-bottom:var(--ui-s-4) !important;
}
body.gb-ui .card:hover{ box-shadow:var(--ui-shadow-hover) !important; }
body.gb-ui .card-header{
    padding:var(--ui-s-4) var(--ui-s-5) !important;
    background:var(--ui-surface) !important;
    border-bottom:1px solid var(--ui-line-2) !important;
}
/* 卡片顶部 3px 细条：详情页 = 主题色（红事红 / 白事墨青，是整页唯一的类型信号），
   列表页 = 中性灰蓝（两种礼簿共用同一套界面，不能上主题色）。
   ⚠️ 这条是从 gb_theme.css 搬过来的：那边只留变量，视觉决定统一放这里。
   想彻底去掉色条，把这两条整段删掉即可，别的规则不依赖它。 */
body.gb-ui .card-header{ box-shadow:inset 0 3px 0 var(--gb-a1) !important; }
body.gb-ui.gb-page-list .card-header{ box-shadow:inset 0 3px 0 #cbd5e1 !important; }
body.gb-ui .card-header h5{
    font-size:var(--ui-fs-15) !important;
    font-weight:600 !important;
    color:var(--ui-ink) !important;
    letter-spacing:.01em;
}
body.gb-ui .card-body{ padding:var(--ui-s-5) !important; }

/* ---------- 表单 ----------
   label 与输入框之间保留 6px（2px 半档）：8px 会让「事务名称」这种短 label
   和输入框之间出现明显的空档，6px 刚好是「贴着但不粘」的距离。 */
body.gb-ui .form-label{
    margin-bottom:6px !important;
    font-size:var(--ui-fs-12) !important;
    font-weight:500 !important;
    color:var(--ui-ink-3) !important;
    letter-spacing:.02em;
}
body.gb-ui .form-control,
body.gb-ui .form-select{
    padding:var(--ui-s-2) var(--ui-s-3) !important;
    font-size:var(--ui-fs-14) !important;
    color:var(--ui-ink) !important;
    border:1px solid var(--ui-field) !important;
    border-radius:var(--ui-r-field) !important;
    background:var(--ui-surface) !important;
    transition:border-color var(--ui-t) var(--ui-ease), box-shadow var(--ui-t) var(--ui-ease) !important;
}
body.gb-ui input.form-control,
body.gb-ui select.form-select{ height:40px !important; }
body.gb-ui .form-control:hover,
body.gb-ui .form-select:hover{ border-color:var(--ui-field-hover) !important; }
/* 鼠标点进输入框：只给「描边加深 + 3px 柔光」，不给硬环；
   键盘 Tab 进来时由下方 :focus-visible 补 2px 硬环（见交互细节段） */
body.gb-ui .form-control:focus,
body.gb-ui .form-select:focus{
    border-color:var(--ui-muted) !important;
    box-shadow:0 0 0 3px var(--ui-ring) !important;
    outline:none;
}
body.gb-ui select.form-select{ padding-right:30px !important; }

/* ===================================================================
   交互细节：焦点环 / 禁用态
   -------------------------------------------------------------------
   上一版只有 .btn 有焦点环、禁用态散在主程序里（.btn:disabled 是 .5，
   #exportSortConfirm[disabled] 是 .65，#closeBookModal .btn-book-confirm:disabled
   是 .6），一个「不可点」三种灰。这里统一成 .5 + not-allowed。
   =================================================================== */
/* 键盘焦点环：只在 :focus-visible 出现，鼠标点击不显示（避免满屏蓝框） */
body.gb-ui a:focus-visible,
body.gb-ui button:focus-visible,
body.gb-ui input:focus-visible,
body.gb-ui select:focus-visible,
body.gb-ui textarea:focus-visible,
body.gb-ui [tabindex]:focus-visible{
    outline:2px solid var(--ui-muted) !important;
    outline-offset:2px;
}
/* 禁用态：留原位变灰，不隐藏（操作列不会跳动），并把 hover 的上浮和投影一起关掉 */
body.gb-ui .btn:disabled,
body.gb-ui .btn[disabled],
body.gb-ui .form-control:disabled,
body.gb-ui .form-select:disabled{
    opacity:.5 !important;
    cursor:not-allowed !important;
}
body.gb-ui .btn:disabled:hover,
body.gb-ui .btn[disabled]:hover{
    transform:none !important;
    box-shadow:none !important;
}

/* ---------- 按钮：只改形，不改色（颜色见文件末尾的「按钮配色体系」） ---------- */
body.gb-ui .btn{
    height:40px !important;
    padding:0 var(--ui-s-4) !important;
    font-size:var(--ui-fs-13) !important;
    font-weight:600 !important;
    letter-spacing:.01em;
    border-radius:var(--ui-r-btn,var(--ui-r-field)) !important;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:6px;
    transition:transform var(--ui-t) var(--ui-ease), box-shadow var(--ui-t) var(--ui-ease), background-color var(--ui-t) var(--ui-ease), border-color var(--ui-t) var(--ui-ease) !important;
}
body.gb-ui .btn:active{ transform:translateY(0) scale(.985); }
/* 小按钮：表格 / 工具栏，不钉死高度（工具栏那条 min-height 是手机下的折中值）。
   圆角并回 10px —— 上一版小按钮 8px、工具条按钮 9px，和 10px 的主按钮放一排
   会被一眼看出「三种圆角」。 */
body.gb-ui .btn.btn-sm{
    height:auto !important;
    min-height:28px;
    padding:5px 11px !important;
    font-size:var(--ui-fs-12) !important;
    border-radius:var(--ui-r-field) !important;
}
body.gb-ui .table .btn.btn-sm{ min-height:30px; padding:5px 10px !important; }

/* ---------- 横排表单（编辑 / 录入 / 筛选）：改成自适应网格 ---------- */
@media (min-width:769px){
    /* 列宽按表单的字段数分别定：auto-fit 的最小轨道太小会把「事务名称」压成
       158px，太大又会让 6 个字段的录入表单挤成三行。
       ⚠️ #createEventForm **不在这组里**：新建表单已收进 #createEventModal，
          它的直接子元素是 .modal-body / .modal-footer，套上网格会被塞进两列
          （实测 600px 弹窗里每列只剩 293px，字段被压到 121px、页脚跑到正文右边）。
          弹窗内部排版交给下面的 .gb-form-grid。 */
    body.gb-ui #editEventForm{
        display:grid !important;
        grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
        gap:var(--ui-s-3) var(--ui-s-4) !important;
        align-items:end !important;
    }
    body.gb-ui #recordForm{
        display:grid !important;
        grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) !important;
        gap:var(--ui-s-3) var(--ui-s-4) !important;
        align-items:end !important;
    }
    body.gb-ui #filterForm{
        display:grid !important;
        grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) !important;
        gap:var(--ui-s-3) var(--ui-s-4) !important;
        align-items:end !important;
    }
    body.gb-ui #editEventForm > *,
    body.gb-ui #recordForm    > *,
    body.gb-ui #filterForm    > *{ min-width:0; }
    body.gb-ui #editEventForm .form-control,
    body.gb-ui #editEventForm .form-select,
    body.gb-ui #recordForm    .form-control,
    body.gb-ui #recordForm    .form-select,
    body.gb-ui #filterForm    .form-control,
    body.gb-ui #filterForm    .form-select{ width:100% !important; }
    body.gb-ui #recordForm .field-remark,
    body.gb-ui #recordForm .field-address,
    body.gb-ui #filterForm .field-ftype{ grid-column:span 2 !important; }
    body.gb-ui .field-actions{
        grid-column:1 / -1 !important;
        display:flex !important;
        align-items:center !important;
        gap:var(--ui-s-2) !important;
        flex-wrap:wrap;
    }
    /* 按钮组里那个撑高的空 label（ ）在网格里没用了 */
    body.gb-ui .field-actions .form-label{ display:none !important; }
    body.gb-ui .gb-full{ grid-column:1 / -1 !important; }
}

/* ===================================================================
   表格（桌面）
   -------------------------------------------------------------------
   ⚠️ 这一段现在**同时**管 #eventTable（列表页）和 #recordTable（详情页）。
   上一版 gb_theme.css 里还有一份带 #eventTable 的副本，特异度 (1,3,1) 反而
   盖住这里 (0,4,1) 的规则 —— 两份值几乎一样所以一直没被发现，但只要想统一
   改表格配色就会「改了没反应」。那份副本已随 gb_theme.css 瘦身删掉。
   层级靠「字号 + 字重 + 灰阶」做，不靠行底色：不要斑马纹，hover 只上浅灰
   + 首列 3px 中性条（比整行变色克制，也更好定位当前行）。
   =================================================================== */
@media (min-width:769px){
    body.gb-ui .table{ color:var(--ui-ink-2); }
    body.gb-ui .table>thead th{
        background:var(--ui-row-hover) !important;
        color:var(--ui-ink-2) !important;
        font-size:var(--ui-fs-12) !important;
        font-weight:600 !important;
        letter-spacing:.03em;
        white-space:nowrap;
        padding:11px var(--ui-s-4) !important;
        border-bottom:1px solid var(--ui-line-2) !important;
    }
    body.gb-ui .table>tbody td{
        padding:var(--ui-s-3) var(--ui-s-4) !important;
        border-bottom:1px solid var(--ui-line-3) !important;
        vertical-align:middle !important;
        font-size:var(--ui-fs-14);
        color:var(--ui-ink-2);
    }
    body.gb-ui .table>tbody tr{ transition:background var(--ui-t) var(--ui-ease); }
    body.gb-ui .table>tbody tr:hover{ background:var(--ui-row-hover) !important; }
    body.gb-ui .table>tbody>tr:hover>td:first-child{ box-shadow:inset 3px 0 0 var(--ui-bar) !important; }
    body.gb-ui .table>tbody tr:last-child>td{ border-bottom:none !important; }

    /* 空态：居中 + 留白 + 灰字，不加边框（整行 td 描边会显得像坏掉的表格） */
    body.gb-ui .table>tbody>tr>td[colspan],
    body.gb-ui .table>tbody>tr>td[data-label=""]{
        padding:28px var(--ui-s-4) !important;
        color:var(--ui-muted);
        font-size:var(--ui-fs-13);
        text-align:center;
        border-bottom:none !important;
    }

    /* 主信息加深，次要信息退灰，金额等宽对齐 */
    body.gb-ui .table td.cell-name{ color:var(--ui-ink) !important; font-weight:600; }
    body.gb-ui .table td.cell-money{ font-variant-numeric:tabular-nums; font-weight:600; }
    body.gb-ui .table td.cell-id,
    body.gb-ui .table td.cell-time,
    body.gb-ui .table td.cell-date,
    body.gb-ui .table td.cell-person,
    body.gb-ui .table td.cell-edits{
        color:var(--ui-ink-3) !important;
        font-size:var(--ui-fs-13);
        font-variant-numeric:tabular-nums;
    }
}

/* ===================================================================
   统计卡：白底 + 左侧 3px 主题色条
   -------------------------------------------------------------------
   上一版这六张卡是六条 135° 高饱和渐变（橙 / 蓝 / 绿 / 紫 / 粉 / 黄），
   一张屏六种色相 = 「不高级」的典型来源。现在统一白底 + 1px 描边 + 左侧
   3px 主题色条（红事红 / 白事墨青），靠**位置**而不是**色相**区分。
   圆角并到 14px（上一版 12px），数字降到 18px 纳入字号阶梯。
   ⚠️ 必须带 #statCards 且叠 .gb-stat：HTML 上写着 inline 彩虹渐变，
      只有 !important 压得住；gb_theme.css 里还有一份同特异度的红/白渐变副本，
      靠「本文件后加载」取胜 —— 顺序别动。
   =================================================================== */
body.gb-ui #statCards{
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:var(--ui-s-3) !important;
    margin-bottom:var(--ui-s-4) !important;
}
body.gb-ui #statCards .stat-card.gb-stat{
    background:var(--ui-surface) !important;
    border:1px solid var(--ui-line) !important;
    border-radius:var(--ui-r-card) !important;
    border-left:3px solid var(--gb-a1) !important;
    padding:var(--ui-s-3) var(--ui-s-4) !important;
    text-align:left !important;
    text-shadow:none !important;
    color:var(--ui-ink) !important;
    box-shadow:0 1px 2px rgba(16,24,40,.04) !important;
    min-width:0 !important;
    flex:none !important;
    transition:box-shadow var(--ui-t) var(--ui-ease), transform var(--ui-t) var(--ui-ease);
}
body.gb-ui #statCards .stat-card.gb-stat:hover{
    box-shadow:0 8px 20px rgba(16,24,40,.08) !important;
    transform:translateY(-1px);
}
body.gb-ui #statCards .label-text{
    font-size:var(--ui-fs-12) !important;
    color:var(--ui-ink-3) !important;
    opacity:1 !important;
    font-weight:500;
    letter-spacing:.02em;
}
body.gb-ui #statCards .num-text{
    font-size:var(--ui-fs-18) !important;
    font-weight:600 !important;
    color:var(--ui-ink) !important;
    margin-top:var(--ui-s-1) !important;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.01em;
}
@media (max-width:1200px){
    body.gb-ui #statCards{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width:768px){
    body.gb-ui #statCards{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:var(--ui-s-2) !important; }
    body.gb-ui #statCards .num-text{ font-size:var(--ui-fs-16) !important; }
}

/* ===================================================================
   徽章 / 提示条 / 状态色
   -------------------------------------------------------------------
   语义色统一降饱和：信息 #0369a1、危险 #b91c1c、成功 #15803d、警告 #b45309。
   「已锁定」徽章原来是 #fecaca / #991b1b —— 那是当年为了躲开「红事」类型徽章
   才特意错开的（两个红徽章在同一行会分不清）。现在类型徽章已整站下线，
   可以回归标准危险档 #fef2f2 / #b91c1c，与 .alert-danger 同一套。
   =================================================================== */
body.gb-ui .badge{
    border-radius:var(--ui-r-tag) !important;
    padding:3px var(--ui-s-2) !important;
    font-size:var(--ui-fs-11) !important;
    font-weight:600 !important;
    letter-spacing:.02em;
}
body.gb-ui .badge.st-open{
    background:var(--ui-info-bg) !important;
    color:var(--ui-info) !important;
}
body.gb-ui .badge.st-locked{
    background:var(--ui-danger-bg) !important;
    color:var(--ui-danger) !important;
}
body.gb-ui .alert{
    border-radius:var(--ui-r-field) !important;
    font-size:var(--ui-fs-13) !important;
    padding:var(--ui-s-3) var(--ui-s-4) !important;
    border:1px solid transparent !important;
}
body.gb-ui .alert-info{
    background:var(--ui-info-bg) !important; color:var(--ui-info) !important; border-color:var(--ui-info-line) !important;
}
body.gb-ui .alert-success{
    background:var(--ui-ok-bg) !important; color:var(--ui-ok) !important; border-color:var(--ui-ok-line) !important;
}
body.gb-ui .alert-warning{
    background:var(--ui-warn-bg) !important; color:var(--ui-warn) !important; border-color:var(--ui-warn-line) !important;
}
body.gb-ui .alert-danger{
    background:var(--ui-danger-bg) !important; color:var(--ui-danger) !important; border-color:var(--ui-danger-line) !important;
}
/* 录入表单下面那条「⌨️ ← → 可在姓名与礼金之间切换」提示已移除，
   .key-tip / kbd 的样式一并删掉（页面里已无这两个选择器，留着是死规则） */

/* ---------- 弹窗 ---------- */
body.gb-ui .modal-content{
    border-radius:var(--ui-r-modal) !important;
    box-shadow:var(--ui-shadow-modal) !important;
    border:none !important;
}
body.gb-ui .modal-header{
    padding:var(--ui-s-4) var(--ui-s-5) !important;
    border-bottom:1px solid var(--ui-line-2) !important;
}
body.gb-ui .modal-title{ font-size:var(--ui-fs-15) !important; font-weight:600 !important; color:var(--ui-ink); }
body.gb-ui .modal-body{ padding:var(--ui-s-5) !important; font-size:var(--ui-fs-14); color:var(--ui-ink-2); }
body.gb-ui .modal-footer{
    padding:var(--ui-s-4) var(--ui-s-5) !important;
    border-top:1px solid var(--ui-line-2) !important;
    gap:var(--ui-s-3) !important;
}
body.gb-ui .btn-close{ color:var(--ui-muted) !important; font-size:22px !important; line-height:1; }

/* ---------- 工具栏 / 表格里的小按钮：钉死高度 ----------
   不钉的话 emoji 和文字的行高不一致，一排十颗会出现 29px / 31px 交错，
   顶边差 1px，看着就是「没对齐」（实测踩到）。 */
@media (min-width:769px){
    body.gb-ui #listToolbar .btn,
    body.gb-ui #detailToolbar .btn{
        height:32px !important;
        padding:0 var(--ui-s-3) !important;
        border-radius:var(--ui-r-field) !important;
    }
    body.gb-ui #listToolbar .tb-minor,
    body.gb-ui #detailToolbar .tb-minor{ height:28px !important; padding:0 10px !important; }
    body.gb-ui .table .btn.btn-sm{ height:30px !important; }
}
body.gb-ui #listToolbar,
body.gb-ui #detailToolbar{ gap:var(--ui-s-2) !important; }

/* ===================================================================
   按钮配色体系：一屏只允许出现一颗「焦点色」
   -------------------------------------------------------------------
   五档，靠**填充方式**而不是**色相**分主次 —— 一整排红橙紫是「不高级」的根源：
     S1 实心主色  每屏唯一焦点：创建事务 / 新增记录 / 查询 / 打印 / 确定导入
     S2 中性实心  要强调但不抢焦点：进入事务、大屏二维码「显示中」
     S3 描边      次要但要有形状：取消 / 关闭 / 重置 / 返回 / 编辑 / 移交 / 导出
     S4 幽灵      工具条里的轻动作：锁屏 / 语音 / 关于 / 主家链接 / 收款二维码
     S5 危险      实心＝弹窗里的「确定删除」；描边＝表格里每行一颗的「删除」
   颜色的原料是 gb_theme.css 里的 --gb-solid-* / --gb-dgr-*（红白事自动切换），
   本文件只决定「哪颗按钮用哪一档」，两边不再互相覆盖。
   ⚠️ hover 一律写死更深的色值，不用 filter:brightness() —— 它会连白字一起
      提亮，字发灰，是旧版最廉价的一处。
   ⚠️ 没有新增任何 class：定位全用页面已有的 id 与属性选择器，JS 零改动。
   ⚠️ 特异度是有意排好的（id > class），下面每条的覆盖关系别随手调顺序：
      通用档 .btn-primary(0,3,0) → 表格 #recordTable .btn-danger(1,2,0) →
      工具条里的具体按钮 #detailToolbar #btnCloseBook(2,1,0)。
   =================================================================== */

/* 基线：页面自带 hover 上浮 2px，密集工具条里一整排都在跳，压到 1px */
body.gb-ui .btn:hover{ transform:translateY(-1px); }
body.gb-ui .btn:active{ transform:translateY(0) scale(.985); }

/* ---------- S1 实心主色：每屏唯一的焦点 ---------- */
body.gb-ui .btn.btn-primary,
body.gb-ui .btn.btn-success,
body.gb-ui .btn.btn-create-event,
body.gb-ui #closeBookModal .btn-book-confirm{
    background:linear-gradient(180deg,var(--gb-solid-1),var(--gb-solid-2)) !important;
    border:none !important;
    color:#fff !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 4px 12px var(--gb-solid-sh) !important;
}
body.gb-ui .btn.btn-primary:hover,
body.gb-ui .btn.btn-success:hover,
body.gb-ui .btn.btn-create-event:hover,
body.gb-ui #closeBookModal .btn-book-confirm:hover{
    background:linear-gradient(180deg,var(--gb-solid-1h),var(--gb-solid-2h)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 8px 18px var(--gb-solid-sh2) !important;
}

/* ---------- S2 中性实心：强调但不抢焦点 ---------- */
body.gb-ui #eventTable .btn-primary,
body.gb-ui #detailToolbar .btn.btn-warning{
    background:linear-gradient(180deg,var(--ui-nsolid-1),var(--ui-nsolid-2)) !important;
    border:none !important;
    color:#fff !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.13), 0 3px 9px rgba(16,24,40,.16) !important;
}
body.gb-ui #eventTable .btn-primary:hover,
body.gb-ui #detailToolbar .btn.btn-warning:hover{
    background:linear-gradient(180deg,var(--ui-nsolid-1h),var(--ui-nsolid-2h)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.13), 0 6px 14px rgba(16,24,40,.22) !important;
}

/* ---------- S3 描边：白底 + 细边，形状清楚但不抢 ---------- */
body.gb-ui .btn.btn-outline-secondary,
body.gb-ui .btn.btn-secondary,
body.gb-ui .btn.btn-warning,
body.gb-ui .btn.btn-info,
body.gb-ui .btn.btn-about,
body.gb-ui .btn.btn-import-event,
body.gb-ui .gbm-entry{
    background:#fff !important;
    border:1px solid var(--ui-field) !important;
    color:var(--ui-ink-2) !important;
    box-shadow:0 1px 2px rgba(16,24,40,.03) !important;
}
body.gb-ui .btn.btn-outline-secondary:hover,
body.gb-ui .btn.btn-secondary:hover,
body.gb-ui .btn.btn-warning:hover,
body.gb-ui .btn.btn-info:hover,
body.gb-ui .btn.btn-about:hover,
body.gb-ui .btn.btn-import-event:hover,
body.gb-ui .gbm-entry:hover{
    background:#f4f7fa !important;
    border-color:var(--ui-field-hover) !important;
    color:var(--ui-ink) !important;
    box-shadow:0 1px 2px rgba(16,24,40,.05) !important;
}

/* ---------- S4 幽灵：工具条里的轻动作，浅灰底无边框 ---------- */
body.gb-ui #listToolbar .btn,
body.gb-ui #detailToolbar .btn{
    background:#eef2f7 !important;
    border:1px solid transparent !important;
    color:var(--ui-ink-2) !important;
    box-shadow:none !important;
}
body.gb-ui #listToolbar .btn:hover,
body.gb-ui #detailToolbar .btn:hover{
    background:#e2e8ef !important;
    color:var(--ui-ink) !important;
}
/* 收款二维码（新建卡片里展开面板的那个）同档 */
body.gb-ui .btn.btn-qr-toggle{
    background:#eef2f7 !important;
    border:1px solid transparent !important;
    color:var(--ui-ink-2) !important;
    box-shadow:none !important;
}
body.gb-ui .btn.btn-qr-toggle:hover{
    background:#e2e8ef !important;
    color:var(--ui-ink) !important;
}

/* ---------- S5 危险：实心（弹窗里唯一的确认） ---------- */
body.gb-ui .btn.btn-danger{
    background:linear-gradient(180deg,var(--gb-dgr-1),var(--gb-dgr-2)) !important;
    border:none !important;
    color:#fff !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 4px 12px var(--gb-dgr-sh) !important;
}
body.gb-ui .btn.btn-danger:hover{
    background:linear-gradient(180deg,var(--gb-dgr-1h),var(--gb-dgr-2h)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 8px 18px var(--gb-dgr-sh2) !important;
}
/* 危险·描边：表格里「每行一颗」的删除、工具条里的「关闭系统」。
   几十行实心红会把整张表染成红条子，描边既保留警示又不吵。 */
body.gb-ui #eventTable .btn-danger,
body.gb-ui #recordTable .btn-danger,
body.gb-ui #listToolbar .btn-danger{
    background:#fff !important;
    border:1px solid var(--gb-dgr-line) !important;
    color:var(--gb-dgr-ink) !important;
    box-shadow:0 1px 2px rgba(16,24,40,.03) !important;
}
body.gb-ui #eventTable .btn-danger:hover,
body.gb-ui #recordTable .btn-danger:hover,
body.gb-ui #listToolbar .btn-danger:hover{
    background:var(--gb-dgr-tint) !important;
    border-color:var(--gb-dgr-line2) !important;
    color:var(--gb-dgr-2) !important;
}

/* ---------- 工具条里的例外：按语义单独提拔 / 下沉 ----------
   工具条默认是 S4 幽灵（一整排浅灰），下面几颗要单独定档。
   选择器带 id 或属性 ⇒ 特异度高于上面的 #detailToolbar .btn，顺序无关也能赢。 */
/* 打印预览：详情页的头号动作 → S1 实心主色 */
body.gb-ui #detailToolbar .btn[onclick*="openMainPrintChoose"]{
    background:linear-gradient(180deg,var(--gb-solid-1),var(--gb-solid-2)) !important;
    border:none !important;
    color:#fff !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 4px 12px var(--gb-solid-sh) !important;
}
body.gb-ui #detailToolbar .btn[onclick*="openMainPrintChoose"]:hover{
    background:linear-gradient(180deg,var(--gb-solid-1h),var(--gb-solid-2h)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 8px 18px var(--gb-solid-sh2) !important;
}
/* 移交礼簿 / 大屏展示 / 导出 Excel：不可逆或高频，从幽灵提到描边 */
/* 「🔐修改登录密码」已从列表页移除，原来那条 #listToolbar a[href*=change_password] 一并删掉 */
body.gb-ui #detailToolbar #btnCloseBook,
body.gb-ui #detailToolbar a[href*="gift_book_big_screen"],
body.gb-ui #detailToolbar a[href*="export_csv.php"]{
    background:#fff !important;
    border:1px solid var(--ui-field) !important;
    color:var(--ui-ink-2) !important;
    box-shadow:0 1px 2px rgba(16,24,40,.03) !important;
}
body.gb-ui #detailToolbar #btnCloseBook:hover,
body.gb-ui #detailToolbar a[href*="gift_book_big_screen"]:hover,
body.gb-ui #detailToolbar a[href*="export_csv.php"]:hover{
    background:#f4f7fa !important;
    border-color:var(--ui-field-hover) !important;
    color:var(--ui-ink) !important;
}
/* 大屏二维码开关：关（.btn-primary「显示二维码」）下沉成描边，
   开（.btn-warning「隐藏二维码」）已是 S2 中性实心 ⇒ 开关两态一眼可辨 */
body.gb-ui #detailToolbar #btnBigQrToggle.btn-primary{
    background:#fff !important;
    border:1px solid var(--ui-field) !important;
    color:var(--ui-ink-2) !important;
    box-shadow:0 1px 2px rgba(16,24,40,.03) !important;
}
body.gb-ui #detailToolbar #btnBigQrToggle.btn-primary:hover{
    background:#f4f7fa !important;
    border-color:var(--ui-field-hover) !important;
    color:var(--ui-ink) !important;
}

/* ---------- 记录表里的「记录」：比编辑更轻，走幽灵 ---------- */
body.gb-ui #recordTable .btn-info{
    background:#eef2f7 !important;
    border:1px solid transparent !important;
    color:var(--ui-ink-2) !important;
    box-shadow:none !important;
}
body.gb-ui #recordTable .btn-info:hover{
    background:#e2e8ef !important;
    color:var(--ui-ink) !important;
}

/* ---------- 打印版式选择卡片：hover 边框跟中性走（原来被主题色接管） ---------- */
body.gb-ui #mainPrintMask .print-mode-btn{
    border-radius:var(--ui-r-card) !important;
    border:1px solid var(--ui-field) !important;
    transition:border-color var(--ui-t) var(--ui-ease), box-shadow var(--ui-t) var(--ui-ease), background-color var(--ui-t) var(--ui-ease);
}
body.gb-ui #mainPrintMask .print-mode-btn:hover{
    border-color:var(--ui-muted) !important;
    background:var(--ui-row-hover) !important;
    box-shadow:0 8px 20px rgba(16,24,40,.08) !important;
}

/* ---------- 列表页操作条（新建礼簿 / 导入历史礼簿 / 全局预设宾客名单） ----------
   新建表单收进弹窗后，列表页顶部只剩这一排入口。做成一条浅色圆角条，
   按钮居中 —— 与「礼簿事务管理」标题一左一右，视觉上是一条完整的页头。
   ⚠️ 只用 flex + gap，不给按钮加 margin：guest_manage.php 把「全局预设宾客名单」
      插进来时依赖容器自身的 gap:8px，加 margin 会变成 16px 对不齐。 */
body.gb-ui .gb-actions{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:var(--ui-s-2) !important;
    margin-bottom:var(--ui-s-4) !important;
    padding:var(--ui-s-3) var(--ui-s-4) !important;
    background:var(--ui-surface) !important;
    border:1px solid var(--ui-line) !important;
    border-radius:var(--ui-r-card) !important;
    box-shadow:var(--ui-shadow) !important;
}
/* ---------- 弹窗内的分栏表单：20 列网格，按「编辑事务」弹窗的版式切比例 ----------
   改了什么 / 为什么：原来是 1fr 1fr 两等分，720px 弹窗里每列 274px，「事务名称」
   这种长字段挤得慌；改成 20 列后可以用 span 精确落 65/35 与 30/70 两种比例
   （13+7 = 65%/35%，6+14 = 30%/70%），行与行的分割线也对齐。
   ⚠️ ≤560px 必须把所有 span 重置成整行：单列网格里 span 13 会撑出 13 条隐式列。 */
body.gb-ui .gb-form-grid{
    display:grid !important;
    grid-template-columns:repeat(20,minmax(0,1fr)) !important;
    gap:var(--ui-s-4) !important;
    align-items:start !important;
}
body.gb-ui .gb-form-grid > div{ min-width:0; }
/* ⚠️ 四条 span 规则必须包在 (min-width:561px) 里：手机上要把它们整段关掉。
   如果写在外面，`.gb-form-grid .gb-col-13`(0,3,0) 的特异度高于
   `.gb-form-grid > *`(0,2,0)，即使后者在 @media (max-width:560px) 里带
   !important 也压不住 —— 单列网格里 span 13 会撑出 13 条隐式列（实测踩到）。 */
@media (min-width:561px){
    body.gb-ui .gb-form-grid .gb-col-13{ grid-column:span 13 !important; }
    body.gb-ui .gb-form-grid .gb-col-7 { grid-column:span 7  !important; }
    body.gb-ui .gb-form-grid .gb-col-6 { grid-column:span 6  !important; }
    body.gb-ui .gb-form-grid .gb-col-14{ grid-column:span 14 !important; }
}
/* 只铺满**格子直属**的输入框：二维码槽位里的 file / 说明框是孙子级，
   它们自己写了 inline width:220px/180px，被 !important 拉成 100% 会撑成一整条。 */
body.gb-ui .gb-form-grid > div > .form-control,
body.gb-ui .gb-form-grid > div > .form-select{ width:100% !important; }
body.gb-ui .gb-form-full{ grid-column:1 / -1 !important; }
/* 手机上单列：两列会把「红事（婚嫁 / 寿宴 / 满月…）」这种长选项挤成两行。
   ⚠️ > * 的 grid-column 重置不能省 —— 单列网格里 span 13 会撑出隐式列。 */
@media (max-width:560px){
    body.gb-ui .gb-form-grid{ grid-template-columns:1fr !important; }
    body.gb-ui .gb-form-grid > *{ grid-column:1 / -1 !important; }
    body.gb-ui .gb-actions{ justify-content:stretch !important; }
    body.gb-ui .gb-actions .btn{ flex:1 1 auto; }
}

/* ---------- 新建礼簿弹窗：磨砂遮罩 + 半透明面板（对齐「编辑事务」弹窗的观感） ----------
   改了什么 / 为什么：原来的遮罩是纯 rgba(15,23,42,.65) 实底，面板是纯白，
   弹出来像一块硬邦邦的白板压在页面上。改成 20/20/30 的深色半透 + 背景模糊
   （blur 8px），面板改 96% 白 —— 底层内容能透出一点轮廓，层次立刻出来了。
   ⚠️ 只改背景与模糊，不动 display：openModal() 靠 el.style.display 开关弹窗。 */
body.gb-ui #createEventModal{
    background:rgba(20,20,30,.45) !important;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
body.gb-ui #createEventModal .modal-content{ background:rgba(255,255,255,.96) !important; }
body.gb-ui #createEventModal .modal-footer{ justify-content:flex-end !important; }

/* ---------- 减弱动效 ---------- */
@media (prefers-reduced-motion: reduce){
    body.gb-ui .btn:hover{ transform:none !important; }
    body.gb-ui #statCards .stat-card.gb-stat:hover{ transform:none; }
}