/* ============================================================
   css/panels/panels-nest.css — 小窝 (家规 + 小金库) 样式
   跟随主题变量
   ============================================================ */

/* ===== Nest Layout ===== */
.nest-header {
    padding: 20px 20px 12px;
    display: flex; align-items: center; justify-content: space-between;
}
.nest-title { font-size: 24px; font-weight: 600; color: var(--text-primary); margin: 0; font-family:var(--font-decorative); font-style:italic; letter-spacing:0.3px; }
.nest-sub-bar { padding: 0 16px; }

/* 使用display切换：无全屏叠化，仅内容区轻微淡入 */
.nest-sub-panel {
    display: none;
    flex: 1;
    overflow-y: auto;
}
.nest-sub-panel.active {
    display: block;
    animation: fadeIn 0.18s ease;
}

/* ===== Treasury · 小金库 =====
   ★ 管钱 V3 · 第 7 窗口（这一屏的专项视觉）：
   以前这一屏的层次是散的（右上角齿轮 + 标题 12px 全大写 + 一张 180px 大卡接一张，
   目标永远四行、日历格子塞 8px 金额…）。现在按手册 §11.9 / §十一 重排：
     一句状态 → 我的钱袋 → 钱袋列表（默认那张稍大、其余轻列表卡）→ 目标 → 存取记录 → 更多。
   颜色 / 圆角 / 阴影 / 动效一律取 --money-*（令牌只有一处：css/money-tokens.css）。 */
.nest-page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    /* 顶部让出状态栏（iOS 加到主屏后不顶到时间那一行）*/
    padding: 14px 18px 4px;
}
.nest-page-title { font-size: var(--money-fs-title); font-weight: 600; color: var(--money-ink); }
.nest-help-btn {
    width: var(--money-tap); height: var(--money-tap);
    flex: 0 0 auto; border: none; background: none; padding: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--money-muted); cursor: pointer;
    border-radius: var(--money-radius-btn);
    -webkit-tap-highlight-color: transparent;
    transition: color var(--money-duration-fast) var(--money-ease),
                background var(--money-duration-fast) var(--money-ease);
}
.nest-help-btn:hover { color: var(--money-on-accent-soft); background: var(--money-accent-soft); }
.nest-help-btn:active { transform: scale(0.94); }

.treasury-section {
    padding: 14px 18px;
    border-bottom: 0.5px solid var(--money-divider);
    font-family: var(--money-font);
}
.treasury-section:last-child { border-bottom: none; }
.treasury-more-section { padding-bottom: calc(28px + var(--safe-bottom)); }

.section-header {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 10px;
    font-size: 11.5px; font-weight: 500;
    color: var(--money-muted);
    letter-spacing: 0.08em;
}
.nest-chip-btn {
    /* 触摸目标：窄屏上原来被压到 32px（比 44 小），真机上不好按 —— 统一给下限 */
    min-height: var(--money-tap); padding: 0 14px;
    border: 1px solid var(--money-line);
    border-radius: var(--money-radius-tag);
    background: var(--money-surface-solid);
    color: var(--money-ink-soft); font-size: 12px; font-weight: 500;
    font-family: inherit; cursor: pointer;
    box-shadow: var(--money-shadow-sm);
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--money-duration-fast) var(--money-ease),
                color var(--money-duration-fast) var(--money-ease),
                transform var(--money-duration-fast) var(--money-ease);
}
.nest-chip-btn:hover { border-color: var(--money-accent-line); color: var(--money-on-accent-soft); }
.nest-chip-btn:active { transform: scale(0.96); }
.nest-chip-btn.danger { color: var(--money-danger); }
.nest-chip-btn.danger:hover { border-color: var(--money-danger); background: var(--money-danger-soft); }

/* ---- A. 顶上那一句话：现在手里有多少钱 ---- */
#treasury-status .ts-line {
    font-size: 15px; color: var(--money-ink-soft); line-height: 1.5;
}
#treasury-status .ts-line b {
    font-family: var(--money-font-num);
    font-size: 22px; font-weight: 600; color: var(--money-ink);
    letter-spacing: 0.01em;
}
#treasury-status .ts-sub {
    margin-top: 4px;
    font-size: var(--money-fs-sub); color: var(--money-muted);
    font-variant-numeric: tabular-nums;
}

/* ---- C. 钱袋列表：默认那张稍大，其余是轻列表卡（手册 §11.9）---- */
#treasury-cards { display: flex; flex-direction: column; gap: 10px; }

.nt-card {
    display: flex; width: 100%;
    box-sizing: border-box; text-align: left;
    font-family: inherit; color: var(--money-ink);
    border: 1px solid var(--money-line-faint);
    background: var(--money-surface-solid);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--money-duration-fast) var(--money-ease),
                box-shadow var(--money-duration-base) var(--money-ease),
                border-color var(--money-duration-base) var(--money-ease);
}
.nt-card:hover { box-shadow: var(--money-shadow-md); border-color: var(--money-line); }
.nt-card:active { transform: scale(0.985); }
.nt-card:focus-visible { outline: 2px solid var(--money-accent); outline-offset: 2px; }

/* 第一张（默认用着的那张）：纸面卡，大一点，但**不写死高度**——窄屏与字多都不溢出。
   这里刻意**不加纸纹浮层**：定位过的伪元素会盖在静态子元素上面，要靠给内容加 z-index 才能压回去，
   而这一块不许出现散层级数字（层级只走 --z-money-* 令牌）——高级感交给卡面本身的材质色。 */
.nt-card.is-hero {
    flex-direction: column; gap: 10px;
    min-height: 132px;
    padding: 18px 18px 16px;
    border-radius: var(--money-radius-card);
    background: var(--money-surface-solid);
    box-shadow: var(--money-shadow-md);
}
/* ★ 卡面是一层**浅色材质**：不管什么主题，压在上面的字都走 --money-face-* 一套深色 ——
   出过的事：深色模式下这里的字跟着主题翻成浅色，而卡面还是浅的 → 名字与金额几乎看不见。
   只有她自己挑的「深棕夜」那一款卡面才反过来用正色（.is-dark-face，见下）。 */
.nt-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nt-card.is-hero .nt-card-name {
    font-size: 15px; font-weight: 500; color: var(--money-face-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nt-card.is-hero .nt-card-amt {
    font-family: var(--money-font-num);
    font-size: 30px; font-weight: 500; letter-spacing: -0.01em;
    color: var(--money-face-amount);
    font-variant-numeric: tabular-nums;
}
.nt-card.is-hero .nt-card-bottom {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
.nt-card.is-hero .nt-card-purpose {
    font-size: var(--money-fs-sub); color: var(--money-face-ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nt-card.is-hero .nt-card-more { color: var(--money-face-ink-soft); }
.nt-card.is-hero .nt-card-badge {
    background: oklch(from var(--money-face-ink) l c h / 0.10);
    color: var(--money-face-ink);
}

/* 其余那些：一行一张的轻列表卡（不是又一排 180px 大卡） */
.nt-card:not(.is-hero) {
    align-items: center; gap: 12px;
    min-height: 60px;
    padding: 12px 14px;
    border-radius: var(--money-radius-surface);
}
/* 轻列表卡左边那一小块：就是这张卡自己的卡面（窄窄一条，当个性色签用） */
.nt-card-chip {
    width: 5px; height: 26px; flex: 0 0 auto;
    border-radius: 3px;
    background: var(--money-surface-soft);
}
.nt-card-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nt-card-row-main .nt-card-name {
    font-size: 14px; color: var(--money-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nt-card-row-main .nt-card-purpose {
    font-size: 11.5px; color: var(--money-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nt-card-row-amt {
    flex: 0 0 auto;
    font-family: var(--money-font-num); font-size: 15px;
    color: var(--money-ink); font-variant-numeric: tabular-nums;
}

/* 「默认使用」徽标（**不写「主卡」**：手册 §11.10 明文要求） */
.nt-card-badge {
    flex: 0 0 auto;
    font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em;
    padding: 3px 9px; border-radius: var(--money-radius-tag);
    background: var(--money-accent-soft); color: var(--money-on-accent-soft);
    margin-left: 6px;
}
.nt-card-more {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px;
    font-size: 11.5px; color: var(--money-muted);
}
.nt-card-more svg { width: 15px; height: 15px; }

/* 深色卡面那一款：压在上面的字要翻成正色 */
.nt-card.is-dark-face { color: var(--money-on-accent); }
.nt-card.is-dark-face .nt-card-name,
.nt-card.is-dark-face .nt-card-amt,
.nt-card.is-dark-face .nt-card-row-amt,
.nt-card.is-dark-face .nt-card-purpose,
.nt-card.is-dark-face .nt-card-more { color: oklch(0.985 0.004 84); }
.nt-card.is-dark-face .nt-card-badge { background: oklch(0.985 0.004 84 / 0.16); color: oklch(0.985 0.004 84); }

/* ---- D. 目标 ---- */
.treasury-goals-inner { display: flex; flex-direction: column; gap: 16px; padding: 2px 0; }
.treasury-goal-row { display: flex; flex-direction: column; gap: 7px; }
.treasury-goal-label-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    font-size: var(--money-fs-sub); color: var(--money-ink-soft);
    font-variant-numeric: tabular-nums;
}
.treasury-goal-name { font-weight: 500; }
.treasury-goal-num { color: var(--money-muted); }
.treasury-goal-bar-wrap {
    height: 5px; background: var(--money-line-faint);
    border-radius: 3px; overflow: hidden;
}
.treasury-goal-bar {
    height: 100%; border-radius: 3px;
    background: var(--money-accent-strong);
    transition: width var(--money-duration-slow) var(--money-ease);
}
.treasury-goals-action { text-align: right; }

/* ---- E. 存取记录 · 日历（手册 §11.14：日历只负责「哪天发生过事」）---- */
#treasury-calendar { font-size: 13px; }
.treasury-cal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
}
.treasury-cal-title {
    font-size: 14px; font-weight: 600; color: var(--money-ink);
    font-variant-numeric: tabular-nums;
}
.treasury-cal-nav {
    width: var(--money-tap); height: var(--money-tap);
    border: 1px solid var(--money-line); border-radius: var(--money-radius-btn);
    background: var(--money-surface-solid); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--money-muted);
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--money-duration-base) var(--money-ease),
                color var(--money-duration-base) var(--money-ease),
                transform var(--money-duration-fast) var(--money-ease);
}
.treasury-cal-nav svg { width: 18px; height: 18px; }
.treasury-cal-nav:hover { border-color: var(--money-accent-line); color: var(--money-on-accent-soft); }
.treasury-cal-nav:active { transform: scale(0.95); }

/* 当月收支 + 笔数（就在日期格上面，一眼看清，不用去格子里找）*/
.treasury-cal-sum {
    display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; align-items: baseline;
    margin-bottom: 10px;
    font-size: var(--money-fs-sub);
    font-variant-numeric: tabular-nums;
}
.treasury-cal-sum-item.is-in  { color: var(--money-success); }
.treasury-cal-sum-item.is-out { color: var(--money-danger); }
.treasury-cal-sum-item.is-count { color: var(--money-muted); }

.treasury-weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr);
    text-align: center; font-size: 10.5px; color: var(--money-muted);
    margin-bottom: 4px; font-weight: 500; letter-spacing: 0.06em;
}
.treasury-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.treasury-day {
    aspect-ratio: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    border-radius: var(--money-radius-btn);
    font-size: 12.5px; cursor: default;
    color: var(--money-ink-soft); font-weight: 400;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
    transition: background var(--money-duration-base) var(--money-ease),
                border-color var(--money-duration-base) var(--money-ease);
}
.treasury-day-num { line-height: 1; }
.treasury-day.empty { cursor: default; }
.treasury-day.today {
    font-weight: 600; color: var(--money-ink);
    background: var(--money-accent-soft);
}
/* 微标记：收进来=绿系，花出去=暖玫瑰系；两种都有就是并排两个点。
   格子里**只放这个**（绝不塞 8px 金额小字）。 */
.treasury-day-marks { display: flex; gap: 3px; height: 4px; }
.treasury-day-mark {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--money-accent);
}
.treasury-day-mark.is-in  { background: var(--money-success); }
.treasury-day-mark.is-out { background: var(--money-accent-strong); }

.treasury-day.has-records { cursor: pointer; }
.treasury-day.has-records:hover {
    background: var(--money-surface-soft);
    border-color: var(--money-line-faint);
}
.treasury-day.has-records:active { transform: scale(0.94); }
.treasury-day.has-records:focus-visible { outline: 2px solid var(--money-accent); outline-offset: 3px; }
.treasury-cal-quiet {
    margin-top: 10px; text-align: center;
    font-size: var(--money-fs-sub); color: var(--money-muted);
}

/* ---- F. 更多（高级管理入口；从右上角那个齿轮挪到这里，并标明是高级操作）---- */
.treasury-more-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    box-sizing: border-box; text-align: left;
    padding: 14px 16px;
    border: 1px solid var(--money-line-faint);
    border-radius: var(--money-radius-surface);
    background: var(--money-surface-solid);
    font-family: inherit; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--money-duration-base) var(--money-ease),
                transform var(--money-duration-fast) var(--money-ease);
}
.treasury-more-row:hover { border-color: var(--money-accent-line); }
.treasury-more-row:active { transform: scale(0.99); }
.treasury-more-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.treasury-more-title { font-size: 14px; color: var(--money-ink); }
.treasury-more-sub { font-size: 11.5px; color: var(--money-muted); line-height: 1.5; }
.treasury-more-arrow { flex: 0 0 auto; width: 18px; height: 18px; color: var(--money-faint); }
.treasury-more-arrow svg { width: 18px; height: 18px; }

/* ===== Day Detail Panel（某一天发生了什么 · 挂 #app 内的自绘小窗）=====
   旧版：z-index 430（会被小窝子面板/朋友圈盖住）、删除按钮是 24×24 小圆叉。
   现在：层级走 --z-money-modal，作废退成次级动作 + 二次确认，顶部给概要（含净变化）。 */
.day-detail-scrim { z-index: var(--z-money-modal); align-items: flex-end; }
@media (min-width: 481px) {
    .day-detail-scrim { align-items: center; }
}
.day-detail-scrim .day-detail-panel {
    width: 100%; max-width: 480px; box-sizing: border-box;
    max-height: 84vh;
    display: flex; flex-direction: column;
    /* 圆角与安全区来自 .money-sheet；这一层只补纸面与标题间距 */
    background: var(--money-bg);
    color: var(--money-ink);
}
@media (min-width: 481px) {
    .day-detail-scrim .day-detail-panel { border-radius: var(--money-radius-card); }
}

.day-detail-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 8px 14px 10px;
    border-bottom: 0.5px solid var(--money-divider);
    flex-shrink: 0;
}
.day-detail-title {
    font-size: var(--money-fs-title); font-weight: 600; color: var(--money-ink);
    font-variant-numeric: tabular-nums;
}
.day-detail-close-btn {
    width: var(--money-tap); height: var(--money-tap);
    flex: 0 0 auto;
    border: none; background: none;
    cursor: pointer; padding: 0; border-radius: var(--money-radius-btn);
    display: flex; align-items: center; justify-content: center;
    color: var(--money-muted);
    -webkit-tap-highlight-color: transparent;
    transition: background var(--money-duration-fast) var(--money-ease),
                color var(--money-duration-fast) var(--money-ease);
}
.day-detail-close-btn:hover { background: var(--money-surface-soft); color: var(--money-ink); }
.day-detail-close-btn:active { transform: scale(0.94); }

.day-detail-body {
    flex: 1; overflow-y: auto; padding: 4px 16px 18px;
    padding-bottom: calc(20px + var(--safe-bottom));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.day-detail-sk { height: 56px; margin-top: 8px; }

/* 概要三格：收进来 / 花出去 / 净变化（手册 §11.15） */
.day-detail-summary {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; padding: 10px 0 14px;
}
.day-detail-sum-cell {
    display: flex; flex-direction: column; gap: 5px;
    padding: 10px 10px 11px;
    border-radius: var(--money-radius-surface);
    background: var(--money-surface-soft);
}
.day-detail-sum-label { font-size: 11px; color: var(--money-muted); }
.day-detail-sum-value {
    font-family: var(--money-font-num);
    font-size: 15px; font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--money-ink);
    white-space: nowrap;
}
.day-detail-sum-value.is-in   { color: var(--money-success); }
.day-detail-sum-value.is-out  { color: var(--money-danger); }
.day-detail-sum-value.is-flat { color: var(--money-muted); }

.day-detail-list { display: flex; flex-direction: column; gap: 8px; }

.day-detail-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px 10px;
    padding: 12px 14px;
    background: var(--money-surface-solid);
    border-radius: var(--money-radius-surface);
    border: 1px solid var(--money-line-faint);
    transition: border-color var(--money-duration-base) var(--money-ease);
}
.day-detail-item:hover { border-color: var(--money-accent-line); }

.day-detail-item-left {
    min-width: 0; display: flex; flex-direction: column; gap: 4px;
}
.day-detail-item-type {
    font-size: 14px; font-weight: 600; color: var(--money-ink);
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
}
.day-detail-item-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--money-fs-sub); color: var(--money-muted);
    min-width: 0;
}
.day-detail-item-time {
    font-weight: 500; color: var(--money-ink-soft);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
.day-detail-item-note {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.day-detail-item-direction { font-size: 11px; color: var(--money-muted); margin-top: 2px; }
/* 状态小标（待拆 / 待领 / 已拒 / 钱没进出）：底浅字深，绝不在浅底上压白字 */
.day-detail-item-status {
    font-size: 10px; font-weight: 500; letter-spacing: 0.02em;
    padding: 2px 8px; border-radius: var(--money-radius-tag);
    background: var(--money-surface-soft); color: var(--money-ink-soft);
}

.day-detail-item-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
    flex-shrink: 0;
}
.day-detail-item-amount {
    font-family: var(--money-font-num);
    font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums;
    color: var(--money-ink);
    white-space: nowrap;
}
.day-detail-item-amount.sign-in     { color: var(--money-success); }
.day-detail-item-amount.sign-out    { color: var(--money-danger); }
.day-detail-item-amount.sign-neutral{ color: var(--money-muted); }

/* 作废＝改账本的动作，退成次级（先点「更多」才看得到），而且必须二次确认 */
.day-detail-more-btn {
    min-height: 30px; padding: 0 10px;
    display: inline-flex; align-items: center;
    border: 1px solid var(--money-line); border-radius: var(--money-radius-tag);
    background: transparent;
    font-family: var(--money-font); font-size: 11.5px;
    color: var(--money-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--money-duration-base) var(--money-ease),
                color var(--money-duration-base) var(--money-ease);
}
.day-detail-more-btn:hover,
.day-detail-more-btn.is-on { color: var(--money-ink-soft); border-color: var(--money-line); }
.day-detail-more {
    grid-column: 1 / -1;
    margin-top: 8px; padding-top: 10px;
    border-top: 0.5px dashed var(--money-divider);
    display: flex; flex-direction: column; gap: 10px;
    animation: moneyAmountIn var(--money-duration-base) var(--money-ease);
}
.day-detail-more[hidden] { display: none; }
.day-detail-more-tip { font-size: 11.5px; color: var(--money-muted); line-height: 1.6; }

/* 详情里的空态（说人话，不用「加载失败」「暂无数据」）*/
.day-detail-empty { padding: 34px 18px; }

/* ===== 高级管理（手册 §11.16：这是**直接改账本**的管理操作）===== */
.money-admin-warn {
    padding: 14px 16px;
    border: 1px solid var(--money-danger-soft);
    background: var(--money-danger-soft);
    border-radius: var(--money-radius-surface);
    margin-bottom: var(--money-pad-module);
}
.money-admin-warn-title { font-size: 13.5px; font-weight: 600; color: var(--money-danger); }
.money-admin-warn-sub { margin-top: 5px; font-size: 11.5px; color: var(--money-ink-soft); line-height: 1.65; }

.money-admin-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 0;
    border-bottom: 0.5px solid var(--money-divider);
}
.money-admin-row:last-child { border-bottom: none; }
.money-admin-row .admin-field-label {
    flex: 1 1 auto; min-width: 0;
    font-size: 13px; color: var(--money-ink-soft); font-weight: 400;
}
.money-admin-row .admin-field-input { width: 130px; flex: 0 0 auto; }
.money-admin-row .admin-field-input.admin-field-text { width: 150px; }

.money-admin-log { display: flex; flex-direction: column; gap: 8px; }
.money-admin-log-row {
    padding: 10px 12px;
    border: 1px solid var(--money-line-faint);
    border-radius: var(--money-radius-input);
    background: var(--money-surface-soft);
}
.money-admin-log-top {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    font-size: 12.5px; color: var(--money-ink);
}
.money-admin-log-time {
    font-size: 11px; color: var(--money-muted);
    font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.money-admin-log-detail {
    margin-top: 4px; font-size: 11.5px; color: var(--money-ink-soft);
    line-height: 1.6; word-break: break-all;
}
.money-admin-log-reason { margin-top: 3px; font-size: 11px; color: var(--money-muted); }

/* ===== 窄屏（<370px）：只收紧间距，绝不缩小正文把小字挤到看不清 ===== */
@media (max-width: 369px) {
    .treasury-section { padding: 12px 14px; }
    .nest-page-head { padding: 12px 14px 4px; }
    .nt-card.is-hero { padding: 16px 15px 14px; min-height: 120px; }
    .nt-card.is-hero .nt-card-amt { font-size: 26px; }
    .nt-card:not(.is-hero) { gap: 10px; padding: 11px 12px; }
    .day-detail-body { padding-left: 13px; padding-right: 13px; }
    .day-detail-summary { gap: 6px; }
    .day-detail-sum-cell { padding: 9px 8px 10px; }
    .money-admin-row .admin-field-input { width: 108px; }
    .money-admin-row .admin-field-input.admin-field-text { width: 118px; }
}

/* ===== 430 / 480 不放大任何东西：保持「手机设计」的比例（手册 §二十）===== */

/* ===== 减少动效（手册 §I：每一条动效都要有替代）===== */
@media (prefers-reduced-motion: reduce) {
    .nt-card,
    .nest-chip-btn,
    .nest-help-btn,
    .treasury-cal-nav,
    .treasury-day,
    .treasury-more-row,
    .day-detail-close-btn,
    .day-detail-item,
    .day-detail-more-btn,
    .money-admin-row .admin-field-input {
        transition: none !important;
    }
    .nt-card:active,
    .treasury-day.has-records:active,
    .treasury-more-row:active,
    .nest-chip-btn:active { transform: none; }
    .day-detail-more { animation: none; }
}

/* ============================================================
   家规 (House Rules) — 法式信纸美学
   暖米色纸质感 · 横线行 · 衬线体 · 花字装饰
   2025-08 全面重构：卡片/编辑器/工具栏/帮助
   ============================================================ */

/* ===== 分类列表容器 ===== */
#rules-paper-container { padding: 0 16px 80px; display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow-x: hidden; }

/* ===== 家规列表页标题区 ===== */
.rules-hero {
    text-align: center; padding: 24px 16px 16px;
}
.rules-hero-en {
    display: block;
    font-family: 'Playfair Display', var(--font-display); font-style: italic;
    font-size: 26px; color: #A08888; letter-spacing: 1px;
}
.rules-hero-zh {
    display: block; font-size: 13px; color: var(--text-muted);
    margin-top: 2px; font-weight: 500;
}
.rules-hero-line {
    width: 40px; height: 1px; margin: 10px auto 0;
    background: var(--gold); opacity: 0.35;
}

/* 列表页帮助按钮 */
.rules-list-help {
    /* z-index 必须低于返回条(.nest-sub-back z-index:10)，
       否则随内容滚动时会滚到头部栏下面却盖住它（实锤：把「?」改小，头部栏永远在最上） */
    position: absolute; top: calc(60px + env(safe-area-inset-top, 0px)); left: 16px; z-index: 5;
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface-solid);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s ease;
}
.rules-list-help svg { width: 16px; height: 16px; stroke: var(--text-muted); }
.rules-list-help:hover { border-color: var(--accent); background: var(--accent-light); }
.rules-list-help:hover svg { stroke: var(--accent); }
.rules-list-help:active { transform: scale(0.94); }

/* ===== 分类卡片 — 法式信纸美学 ===== */
.category-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    cursor: pointer;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.5) inset,
        var(--shadow-xs);
    transition: all 0.25s cubic-bezier(0.22,0.61,0.36,1);
    overflow: hidden;
}
/* 左侧法式装饰线 */
.category-card::before {
    content: '';
    position: absolute; left: 0; top: 12px; bottom: 12px;
    width: 3px; border-radius: 0 2px 2px 0;
    background: linear-gradient(180deg, var(--accent) 0%, rgba(201,176,168,0.3) 100%);
    opacity: 0; transition: opacity 0.3s ease;
}
.category-card:hover::before { opacity: 1; }
.category-card:hover {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.5) inset,
        0 4px 20px rgba(180,150,130,0.12);
    border-color: var(--accent);
    transform: translateY(-2px);
}
.category-card:active { transform: scale(0.985); transition: transform 0.08s ease; }

/* 列表卡片入场：交错淡入上浮（一次性 class，animationend 移除防重播闪动） */
.category-card.cat-enter {
    animation: rulesCardIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: calc(var(--ci, 0) * 70ms);
}
@keyframes rulesCardIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.category-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.category-card-name {
    font-size: 16px; font-weight: 600; color: var(--text-primary);
    line-height: 1.4; flex: 1; min-width: 0;
}
.category-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.category-card-meta {
    font-size: 11px; color: var(--text-muted); margin-top: 6px;
    font-family: var(--font-reading); font-style: italic; letter-spacing: 0.3px;
    display: flex; align-items: center; gap: 6px;
}
.category-card-meta-dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--accent); opacity: 0.5;
}
.category-card-preview {
    font-size: 13px; color: var(--text-secondary); margin-top: 10px;
    line-height: 1.6;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    white-space: normal;
}

/* 创建分类按钮 */
.rules-create-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px; margin-top: 4px;
    border: 2px dashed var(--border); border-radius: var(--radius-md);
    background: transparent; color: var(--text-muted);
    font-family: inherit; font-size: 14px; cursor: pointer;
    transition: all 0.25s ease;
}
.rules-create-btn:hover {
    border-color: var(--accent); color: var(--accent);
    background: var(--accent-light);
}
.rules-create-btn:active { transform: scale(0.97); }
.rules-create-btn svg { width: 16px; height: 16px; }
.rules-create-btn:hover {
    border-color: var(--accent); color: var(--accent);
    background: var(--accent-light);
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
}

/* 法式装饰分隔线 */
.rules-separator {
    text-align: center; padding: 8px 0 4px;
    position: relative;
}
.rules-separator::before {
    content: ''; display: block;
    height: 1px; margin: 0 24px 6px;
    background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
    opacity: 0.25;
}
.rules-separator span {
    font-family: 'Great Vibes', var(--font-handwriting);
    font-size: 15px; color: var(--text-muted); opacity: 0.4;
    font-style: italic;
}

/* 底部装饰花字 */
.rules-footer-deco {
    text-align: center; padding: 24px 0 8px;
    font-family: 'Great Vibes', var(--font-handwriting);
    font-size: 22px; color: var(--text-muted); opacity: 0.15;
    font-style: italic; letter-spacing: 1px;
}

/* ===== 创建/重命名弹窗（隐藏态插入 → rAF .show；open 动画独占、close 过渡独占） ===== */
.rules-dialog-overlay {
    position: fixed; inset: 0; z-index: 1510;
    background: rgba(30,25,20,0.25); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease;
}
.rules-dialog-overlay.show {
    opacity: 1; pointer-events: auto;
    transition: none;
}
.rules-dialog-overlay.show .rules-dialog-box {
    animation: rulesDialogPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes rulesDialogPop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
.rules-dialog-box {
    background: var(--surface-solid);
    border-radius: 16px; padding: 24px 20px 20px;
    width: 280px; max-width: 100%;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.5) inset,
        var(--shadow-md),
        var(--shadow-glow);
    position: relative;
    overflow: hidden;
}
/* 顶部暖色光晕 */
.rules-dialog-box::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 60px;
    background: radial-gradient(ellipse at 50% 0%, rgba(200,170,160,0.06) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 16px 16px 0 0;
}
.rules-dialog-title {
    font-size: 16px; font-weight: 600; color: var(--text-primary);
    text-align: center; margin-bottom: 2px;
    position: relative; z-index: 1;
}
.rules-dialog-deco {
    text-align: center; margin-bottom: 16px;
    font-family: 'Playfair Display', var(--font-display); font-style: italic;
    font-size: 11px; color: var(--text-muted); opacity: 0.5;
    letter-spacing: 0.5px; position: relative; z-index: 1;
}
.rules-dialog-input {
    width: 100%; padding: 10px 12px;
    border: 1.5px solid var(--border); border-radius: 10px;
    font-family: inherit; font-size: 14px;
    background: var(--bg-chat); color: var(--text-primary);
    box-sizing: border-box; outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative; z-index: 1;
}
.rules-dialog-input:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}
.rules-dialog-actions {
    display: flex; gap: 8px; margin-top: 16px;
    position: relative; z-index: 1;
}
.rules-dialog-btn {
    flex: 1; padding: 10px; border-radius: 10px;
    font-family: inherit; font-size: 14px; cursor: pointer;
    transition: all 0.15s ease;
}
.rules-dialog-btn.secondary {
    border: 1px solid var(--border);
    background: var(--surface); color: var(--text-secondary);
}
.rules-dialog-btn.secondary:hover {
    border-color: var(--accent); color: var(--accent);
}
.rules-dialog-btn.primary {
    border: none; background: var(--accent-gradient); color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px var(--accent-glow);
}
.rules-dialog-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--accent-glow);
}
.rules-dialog-btn:active { transform: scale(0.97); }

/* 空状态 */
.rules-empty-state {
    text-align: center; padding: 48px 20px; color: var(--text-muted);
}
.rules-empty-title {
    font-size: 17px; color: var(--text-secondary); margin-bottom: 6px;
    font-weight: 600;
}
.rules-empty-sub {
    font-size: 13px; margin-bottom: 24px; line-height: 1.7;
}
.rules-empty-deco {
    font-family: 'Great Vibes', var(--font-handwriting);
    font-size: 24px; color: rgba(200,170,160,0.2); margin-top: 16px;
    font-style: italic;
}

/* ===== 分类编辑器滚动容器 ===== */
.category-editor-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: opacity 0.22s ease; overflow-anchor: none; }
.category-editor-scroll.mode-switching { opacity: 0; }

/* ===== 家规信纸页 — 核心视觉 ===== */
.rules-page-wrapper { position: relative; margin-bottom: 16px; }

.rules-page {
    position: relative;
    min-height: 220px;
    border-radius: 6px;
    padding: 32px 26px 28px;
    cursor: default;
    /* 纸质感：暖米白底 + 内高光 + 微阴影 */
    background: linear-gradient(180deg, #FCFAF6 0%, #F9F5EF 40%, #F7F2EB 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 2px 12px rgba(160,140,120,0.08),
        0 0 0 1px rgba(180,160,140,0.15);
    font-family: "Cormorant Garamond", "Noto Serif SC", "Songti SC", "Georgia", "STSong", serif;
    font-size: 15px;
    line-height: 2;
    color: #3d3228;
    white-space: pre-wrap;
    word-break: break-word;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    overflow: hidden;
}
[data-theme-mode="dark"] .rules-page {
    background: linear-gradient(180deg, #2A2520 0%, #25201B 40%, #221D18 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 2px 12px rgba(0,0,0,0.25),
        0 0 0 1px rgba(100,90,80,0.25);
    color: #D8D0C4;
}
.rules-page:hover {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 6px 24px rgba(160,140,120,0.14),
        0 0 0 1px rgba(180,160,140,0.25);
    transform: translateY(-2px);
}
[data-theme-mode="dark"] .rules-page:hover {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 6px 24px rgba(0,0,0,0.35),
        0 0 0 1px rgba(140,120,100,0.35);
}

/* 横线行 — 信纸质感 */
.rules-lines { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.rules-lines::before {
    content: '';
    position: absolute;
    inset: 32px 26px 28px 26px;
    background: repeating-linear-gradient(
        transparent, transparent 29px,
        rgba(180,160,140,0.08) 29px,
        rgba(180,160,140,0.08) 30px
    );
}
[data-theme-mode="dark"] .rules-lines::before {
    background: repeating-linear-gradient(
        transparent, transparent 29px,
        rgba(255,255,255,0.03) 29px,
        rgba(255,255,255,0.03) 30px
    );
}
/* 左边红线（法式信纸经典元素） */
.rules-lines::after {
    content: '';
    position: absolute;
    left: 34px; top: 32px; bottom: 28px;
    width: 1px;
    background: rgba(200,150,150,0.18);
}
[data-theme-mode="dark"] .rules-lines::after {
    background: rgba(180,130,130,0.12);
}

.rules-page-content {
    position: relative; z-index: 1;
    padding-left: 12px;
}

/* 右下角花体签名装饰 */
.rules-page-wrapper::after {
    content: 'règles';
    position: absolute;
    bottom: 40px;
    right: 30px;
    z-index: 1;
    font-family: 'Great Vibes', var(--font-handwriting);
    font-size: 20px;
    color: rgba(200,170,160,0.18);
    pointer-events: none;
    transform: rotate(-3deg);
}
[data-theme-mode="dark"] .rules-page-wrapper::after {
    color: rgba(180,150,140,0.10);
}

.rules-page-actions {
    display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px;
}
.rules-page-action-btn {
    font-size: 11px; color: var(--text-muted); background: none;
    border: none; cursor: pointer; padding: 2px 8px;
    font-family: inherit; border-radius: var(--radius-sm); transition: all 0.15s;
}
.rules-page-action-btn:hover { color: var(--text-secondary); background: var(--accent-light); }
.rules-page-action-btn.danger:hover { color: var(--danger); }

/* ===== 修改记录弹层（body 级 fixed，盖编辑器，桌面端也限 480 手机框） ===== */
/* ★ 2026-10-20 甲方实锤「点家规进去，详情层跑到主页面下面、看不见」：
   家规子面板是 .nest-sub-panel.fullscreen（z-index:1500），这三层原来是 410/450 全被压在下面。
   层级口径：列表页 1500 < 详情/编辑器 1505 < 修改记录 1520 < 帮助 1530（分类弹窗仍 1510）。 */
.rules-history-overlay {
    position: fixed; inset: 0; z-index: 1520;
    background: var(--bg-chat);
    display: flex; flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.22s ease, visibility 0s 0.22s;
}
.rules-history-overlay.show {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity 0.22s ease, visibility 0s 0s;
    animation: rulesOverlayIn 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (min-width: 481px) {
    .rules-history-overlay { left: 50%; width: 100%; max-width: 480px; margin-left: -240px; }
}
@keyframes rulesOverlayIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.rules-history-head {
    display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
    padding: 10px 12px; flex-shrink: 0;
    border-bottom: 0.5px solid var(--divider);
    background: var(--surface);
}
.rules-history-title-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.rules-history-head-zh { font-size: 16px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.rules-history-head-en { font-size: 11px; color: var(--text-muted); font-family: 'Playfair Display', var(--font-display); font-style: italic; letter-spacing: 0.5px; }
.rules-history-head-slot { display: flex; align-items: center; }
.rules-history-close {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface-solid);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.18s ease;
}
.rules-history-close svg { width: 17px; height: 17px; stroke: var(--text-muted); }
.rules-history-close:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.rules-history-close:hover svg { stroke: var(--accent); }
.rules-history-close:active { transform: scale(0.93); }

#rules-history-overlay .rules-history-head-slot:nth-child(1),
#rules-version-viewer .rules-history-head-slot:nth-child(1) { justify-content: flex-start; }
#rules-history-overlay .rules-history-head-slot:nth-child(3),
#rules-version-viewer .rules-history-head-slot:nth-child(3) { justify-content: flex-end; }

.rules-history-body {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 14px 16px calc(22px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 10px;
}

.rules-history-item {
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    box-shadow: var(--shadow-xs);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.rules-history-item:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.rules-history-item:active { transform: scale(0.985); }
.rules-history-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rules-history-author { font-size: 13px; font-weight: 600; color: var(--text-primary); padding: 3px 11px; border-radius: 20px; }
.rh-auth-ai { background: var(--accent-light); color: var(--accent); }
.rh-auth-user { background: var(--rose-light); color: var(--rose); }
.rules-history-date { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rules-history-diff { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.rh-line { font-size: 12px; line-height: 1.6; border-radius: 8px; padding: 6px 9px; color: var(--text-primary); word-break: break-word; }
.rh-add { background: rgba(80,160,96,0.09); color: #3e6b4a; }
.rh-del { background: rgba(200,90,90,0.09); color: #a0564a; }
.rh-none { background: var(--bg-chat); color: var(--text-secondary); }
[data-theme-mode="dark"] .rh-add { color: #a9c8a8; }
[data-theme-mode="dark"] .rh-del { color: #d0a8a0; }
.rules-history-item-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.rules-history-pages { font-size: 11px; color: var(--text-muted); }
.rules-history-actions { display: flex; gap: 8px; }
.rules-history-btn {
    padding: 6px 14px; border-radius: 20px;
    border: 1px solid var(--border); background: var(--surface-solid);
    color: var(--text-secondary); font-size: 12px; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: all 0.15s ease;
}
.rules-history-btn:hover { border-color: var(--accent); color: var(--accent); }
.rules-history-btn.danger:hover { border-color: var(--danger); color: var(--danger); }

.rules-history-empty { text-align: center; padding: 56px 24px; color: var(--text-muted); line-height: 1.7; }
.rules-history-empty-en { font-family: 'Playfair Display', var(--font-display); font-style: italic; font-size: 20px; color: var(--text-muted); opacity: 0.6; margin-bottom: 10px; }
.rules-history-empty p { font-size: 13px; margin: 0; }

.rules-history-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 64px 20px; color: var(--text-muted);
    font-size: 13px; font-family: var(--font-reading); font-style: italic;
}

.rules-version-meta { display: flex; align-items: center; gap: 10px; }
.rules-version-pages { display: flex; flex-direction: column; gap: 12px; }
.rules-version-restore { width: 100%; margin-top: 14px; }

/* ===== 历史版本 loading 旋转装饰 ===== */
.rules-loading-ring {
    width: 34px; height: 34px; position: relative;
}
.rules-loading-ring::before {
    content: ''; position: absolute; inset: 0;
    border-radius: 50%; border: 2px solid var(--border);
}
.rules-loading-ring::after {
    content: ''; position: absolute; inset: -2px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--accent);
    animation: rulesSpin 0.8s linear infinite;
}
@keyframes rulesSpin {
    to { transform: rotate(360deg); }
}

/* ===== Rules Editor 弹窗 ===== */
/* ★ 必须压住家规列表子面板（.nest-sub-panel.fullscreen z-index:1500），见上方层级口径 */
.rules-editor-overlay {
    position: fixed; inset: 0; z-index: 1505;
    background: var(--bg-chat);
    display: flex; flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px);
    visibility: hidden; opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.25s ease-out,
                transform 0.25s ease-out,
                visibility 0s 0.25s;
    pointer-events: none;
    overflow-x: hidden;
}
.rules-editor-overlay.open {
    visibility: visible; opacity: 1;
    transform: translateX(0);
    transition: opacity 0.25s ease-out,
                transform 0.25s ease-out,
                visibility 0s 0s;
    pointer-events: auto;
}
@media (min-width: 481px) {
    .rules-editor-overlay {
        left: 50%; width: 100%; max-width: 480px;
        margin-left: -240px;
        transform: translateX(40px);
    }
    .rules-editor-overlay.open {
        transform: translateX(0);
    }
}

/* ===== 编辑器头部 ===== */
.rules-editor-header {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: 10px 12px 10px 8px; flex-shrink: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
}
.rules-editor-back {
    border: none; background: none; cursor: pointer; padding: 6px;
    color: var(--text-primary); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
    justify-self: start;
}
.rules-editor-back:hover { color: var(--accent); background: var(--accent-light); }
.rules-editor-back svg { width: 22px; height: 22px; }
.rules-editor-back:active { transform: scale(0.93); }

.rules-editor-title-wrap {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
}
.rules-editor-title-zh {
    font-size: 16px; font-weight: 600; color: var(--text-primary);
    line-height: 1.3;
}
.rules-editor-title-en {
    font-size: 11px; color: var(--text-muted);
    font-family: 'Playfair Display', var(--font-display); font-style: italic;
    letter-spacing: 0.5px; white-space: nowrap;
}

.rules-editor-header-actions {
    display: flex; align-items: center; gap: 4px;
    justify-self: end;
}
.rules-editor-help-btn {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface-solid);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s ease;
}
.rules-editor-help-btn svg { width: 16px; height: 16px; stroke: var(--text-muted); }
.rules-editor-help-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.rules-editor-help-btn:hover svg { stroke: var(--accent); }
.rules-editor-help-btn:active { transform: scale(0.93); }

/* ===== 底部操作条（阅读模式 / 编辑模式） ===== */
.rules-editor-footer {
    flex-shrink: 0;
    border-top: 0.5px solid var(--divider);
    background: var(--surface);
}
.rules-editor-mode-read .rules-footer-read { display: flex; }
.rules-editor-mode-read .rules-footer-edit { display: none; }
.rules-editor-mode-edit .rules-footer-read { display: none; }
.rules-editor-mode-edit .rules-footer-edit { display: flex; }

.rules-footer-read {
    justify-content: center; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
.rules-footer-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 11px 20px; border-radius: var(--radius-full);
    font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all 0.18s ease;
    letter-spacing: 0.3px;
}
.rules-footer-btn svg { width: 16px; height: 16px; }
.rules-footer-btn:active { transform: scale(0.97); }
.rules-footer-btn.primary {
    border: none; color: #fff;
    background: var(--accent);
    box-shadow: 0 2px 10px var(--accent-glow);
}
.rules-footer-btn.primary:hover { background: var(--rose-hover); transform: translateY(-1px); box-shadow: 0 4px 16px var(--accent-glow); }
.rules-footer-btn.secondary {
    border: 1px solid var(--border);
    background: var(--surface-solid); color: var(--text-secondary);
    box-shadow: var(--shadow-xs);
}
.rules-footer-btn.secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); transform: translateY(-1px); }

/* ===== 逐页可视化编辑：每页一张信纸，纸上直接输入 ===== */
.category-editor-scroll.editing {
    /* 底部留白跟随键盘高度（--kbd-h 由 socket-nav 实时更新），最后一行输入时能滚到键盘上方，不遮挡 */
    padding: 14px 0 calc(var(--kbd-h, 0px) + 34px);
}
.category-editor-scroll.editing .rules-page,
.category-editor-scroll.editing .rules-page:hover {
    transform: none;   /* 编辑时纸页不浮动，专心写 */
    cursor: text;
}
.rules-page-edit { position: relative; margin: 0 16px 16px; }
.rules-page-textarea {
    position: relative; z-index: 1;
    width: 100%; min-height: 200px;
    padding: 0 0 0 12px; border: none; resize: none;
    background: transparent;
    font-family: "Cormorant Garamond", "Noto Serif SC", "Songti SC", "Georgia", "STSong", serif;
    font-size: 15px; line-height: 2; color: #3d3228;
    outline: none; box-sizing: border-box;
    overflow: hidden;   /* 高度由 autoResizeRulePage 撑到内容 */
}
[data-theme-mode="dark"] .rules-page-textarea { color: #D8D0C4; }
.rules-page-textarea::placeholder { color: #C0B8A0; font-style: italic; font-family: var(--font-reading); }
[data-theme-mode="dark"] .rules-page-textarea::placeholder { color: #5A5450; }

/* 每页右上角删除按钮（常态半透明显现，手机上也能点；悬停加深） */
.rules-page-del {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 26px; height: 26px; border: none; border-radius: 50%;
    background: rgba(0,0,0,0.05); color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: 0.55; transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.rules-page-del:hover, .rules-page-del:focus-visible { opacity: 1; background: rgba(176,101,90,0.12); color: #b0655a; }
.rules-page-del svg { width: 14px; height: 14px; }
.rules-page-del:active { transform: scale(0.9); }

/* 空页提示 */
.rules-edit-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.rules-edit-empty-en { font-family: 'Playfair Display', var(--font-display); font-style: italic; font-size: 20px; color: var(--text-muted); opacity: 0.7; margin-bottom: 8px; }
.rules-edit-empty p { font-size: 13px; line-height: 1.7; }
.rules-edit-add {
    margin-top: 14px; padding: 9px 24px; border: none; border-radius: 20px;
    background: var(--accent); color: #fff; font-family: inherit; font-size: 14px;
    cursor: pointer; box-shadow: var(--shadow-xs), var(--shadow-sm); transition: all 0.2s;
}
.rules-edit-add:hover { background: var(--rose-hover); transform: translateY(-1px); }
.rules-edit-add:active { transform: scale(0.96); }

/* ===== 编辑模式：页面工具 + 存草稿/正式发布 ===== */
.rules-footer-edit {
    flex-direction: column;
}
.rules-page-tools {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    padding: 10px 16px 4px;
}
.rules-tool-btn {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    width: 76px; padding: 9px 0 8px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface-solid); cursor: pointer;
    font-family: inherit; color: var(--text-secondary);
    box-shadow: var(--shadow-xs);
    transition: all 0.18s ease;
}
.rules-tool-btn svg { width: 20px; height: 20px; stroke: currentColor; transition: transform 0.18s ease; }
.rules-tool-btn span { font-size: 11px; font-weight: 500; line-height: 1; }
.rules-tool-btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-glow); }
.rules-tool-btn:hover svg { transform: translateY(-1px); }
.rules-tool-btn:active { transform: scale(0.96); }
.rules-tool-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }

.rules-publish-row {
    padding: 6px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 0.5px solid var(--divider);
    margin-top: 8px;
}
.rules-publish-hint {
    font-size: 12px; color: var(--text-muted);
    text-align: center; line-height: 1.6;
    margin-bottom: 10px;
}
.rules-publish-btns {
    display: flex; gap: 12px;
}
.rules-publish-btns .rules-footer-btn { flex: 1; }

/* 保留旧 .ret-btn 兼容历史模块 */
.ret-btn {
    padding: 8px 16px;
    border: 1px solid var(--border); border-radius: var(--radius-full);
    background: var(--surface-solid); font-family: inherit;
    font-size: 13px; color: var(--text-secondary);
    cursor: pointer; font-weight: 500;
    box-shadow: var(--shadow-xs);
    transition: all 0.15s ease;
}
.ret-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.ret-btn:active { transform: scale(0.96); }
.ret-btn.active {
    background: var(--accent-gradient); color: #fff; border-color: transparent;
    box-shadow: 0 2px 8px var(--accent-glow);
}

/* ===== 帮助弹窗 ===== */
/* ★ 从编辑器里点「使用帮助」也要能看见 → 1530，高于编辑器 1505 / 修改记录 1520 */
.rules-help-overlay {
    position: fixed; inset: 0; z-index: 1530;
    background: rgba(30,25,20,0.35); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 40px 20px;
    visibility: hidden; opacity: 0;
    transition: opacity 0.28s ease, visibility 0s 0.28s;
    pointer-events: none;
}
.rules-help-overlay.open {
    visibility: visible; opacity: 1;
    transition: opacity 0.28s ease, visibility 0s 0s;
    pointer-events: auto;
}
.rules-help-panel {
    background: var(--surface-solid);
    border-radius: 18px; box-shadow: var(--shadow-lg);
    max-width: 320px; width: 100%; max-height: 82vh; overflow-y: auto;
    padding: 26px 22px 20px; text-align: center;
    animation: popIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
    position: relative;
}
.rules-help-title {
    font-family: var(--font-body); font-size: 18px; color: var(--text-primary);
    font-weight: 600; margin-bottom: 2px;
}
.rules-help-deco {
    font-family: 'Playfair Display', var(--font-display); font-style: italic;
    font-size: 12px; color: var(--text-muted); opacity: 0.6; margin-bottom: 6px;
}
.rules-help-body { text-align: left; }
.rules-help-tip {
    font-size: 12px; color: var(--text-primary); line-height: 1.7;
    margin: 14px 0 0; padding: 12px 14px; text-align: left;
    background: var(--rose-light); border-radius: 10px;
}
.rules-help-close-btn {
    display: block; width: 100%; margin: 18px 0 0;
    padding: 12px; border: 1px solid var(--accent);
    border-radius: var(--radius-full);
    background: transparent; color: var(--accent);
    font-family: inherit; font-size: 14px; font-weight: 500;
    cursor: pointer; transition: all 0.2s ease;
    letter-spacing: 0.5px;
}
.rules-help-close-btn:hover {
    background: var(--accent); color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 12px var(--accent-glow);
}
.rules-help-close-btn:active { transform: scale(0.97); }

/* ===== Admin Module ===== */
.admin-overlay {
    position: fixed; inset: 0; z-index: 420;
    background: var(--bg-chat); display: none; flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px);
}
.admin-overlay.open { display: flex; }
@media (min-width: 481px) {
    .admin-overlay { left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; }
}
.admin-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; flex-shrink: 0;
    background: var(--surface-solid); border-bottom: 0.5px solid var(--divider);
}
.admin-body {
    flex: 1; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 14px;
}
.admin-section-title {
    font-size: 11px; font-weight: 700; color: var(--text-muted);
    letter-spacing: 1px;
}
.admin-field {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; border-bottom: 0.5px solid var(--divider);
}
.admin-field-label { font-size: 14px; color: var(--text-primary); font-weight: 500; }
.admin-field-input {
    width: 130px; padding: 8px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-family: inherit; font-size: 14px; text-align: right;
    background: var(--surface-solid); color: var(--text-primary); outline: none;
    transition: border-color 0.2s;
}
.admin-field-input:focus { border-color: var(--accent); }
.admin-saved-indicator {
    font-size: 11px; color: var(--success); text-align: center;
    opacity: 0; transition: opacity 0.3s; font-weight: 600;
}
.admin-saved-indicator.show { opacity: 1; }