.wide-dialog {
    min-width: min(540px, 90vw);
    max-width: min(900px, 95vw);
}
.reminder-center-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    margin-bottom: 1rem;
}
.reminder-center-filters {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.reminder-center-filters input,
.reminder-center-filters select {
    min-width: 120px;
    padding: 4px 8px;
}
.reminder-center-filters input {
    flex: 1 1 220px;
}
.reminder-center-filters button {
    margin-left: auto;
}
.reminder-list .reminder-item label {
    margin-right: 0.7em;
}
.reminder-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.85rem;
    align-items: start;
}
.reminder-item-main {
    min-width: 0;
}
.reminder-item-main p {
    margin: 0.2rem 0;
}
.reminder-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.reminder-meta {
    color: var(--muted);
    font-size: 0.92rem;
}
.reminder-empty {
    padding: 1rem 0;
    color: var(--muted);
}

.item-image-dialog-body {
    display: grid;
    gap: 1rem;
}

.item-image-dialog-meta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(31, 39, 30, 0.08);
}

.item-image-preview-panel {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem;
    border: 1px solid rgba(24, 95, 87, 0.12);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 248, 245, 0.92));
}

.item-image-preview-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.item-image-preview-head h3 {
    margin: 0.1rem 0 0;
}

.item-image-preview-meta {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    align-items: center;
}

.item-image-preview-main {
    width: 100%;
    max-height: min(60vh, 560px);
    object-fit: contain;
    border-radius: 18px;
    background: rgba(24, 95, 87, 0.06);
}

.item-image-group {
    display: grid;
    gap: 0.75rem;
}

.item-image-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.item-image-group-head h3 {
    margin: 0;
}

.item-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.9rem;
}

.item-image-card {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid rgba(24, 95, 87, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    text-align: left;
    cursor: pointer;
}

.item-image-card.active {
    border-color: rgba(24, 95, 87, 0.42);
    box-shadow: 0 0 0 3px rgba(24, 95, 87, 0.12);
}

.item-image-card-head {
    display: flex;
    justify-content: flex-start;
}

.item-image-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 14px;
    background: rgba(24, 95, 87, 0.06);
}
.filter-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr) 80px 100px;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.app-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
    margin-top: 0.5rem;
}

/* 顶栏要尽量薄：.panel 的 1.4rem 内边距是给内容面板的，套在导航条上太厚。
   必须用双类名 —— .app-menu 单独写压不过后面的 .panel（同优先级时后者胜） */
.app-menu.panel {
    /* .panel 的 backdrop-filter 会生成层叠上下文，把下拉菜单困在顶栏内部 ——
       菜单自己的 z-index 只在顶栏内部有效。得把顶栏整体抬到内容之上，
       下拉才能盖住下面的视图 */
    position: relative;
    z-index: 500;
    padding: 0.85rem 1.2rem;
    /* 两栏网格：第一行 = 导航区（左）+ 登录人卡片（右）；「常用操作」在第二行整行。
       这里必须用 grid 而不是 flex-wrap —— flex 下卡片落在哪一行取决于左边还剩多少空间
       （导航项一多就被挤到第二行），grid 的 grid-row / grid-column 让它**稳定**待在右上角。 */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.app-menu > .app-menu-left {
    grid-column: 1;
}

/* 登录人卡片固定右上角：宽屏、窄屏都一样，不随左侧内容多少而换行 */
.app-menu > .topbar-user-chip {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}

/* 「常用操作」整行铺在下面，内容靠右 */
.app-menu > .app-menu-right {
    grid-column: 1 / -1;
}

.app-menu-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
}

.app-breadcrumb {
    font-size: 0.92rem;
    line-height: 1.3;
}

/* 统计条跟在面包屑后面，并被推到第一行末尾 —— 原来右半边空着，第二行却挤满了 */
.app-menu-left .topbar-stats {
    margin-left: auto;
}

.app-menu-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    margin-left: auto;
}

.nav-stats {
    gap: 0.4rem;
}

.nav-stats .stat-chip {
    padding: 0.15rem 0.45rem;
    border-radius: 8px;
    font-size: 0.78rem;
}

.nav-stats .stat-chip strong {
    font-size: 0.9rem;
}

.nav-stats .stat-chip small {
    font-size: 0.7rem;
}

.app-menu-utility {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.app-menu-utility-label {
    /* 把后面的按钮统一推到右侧 */
    margin-right: auto;
    white-space: nowrap;
}

.app-nav {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.app-nav-groups {
    padding-bottom: 0.2rem;
}

/* 一级导航的每一项都自带一个二级菜单，默认收起 —— 顶栏因此只需要一行。
   用 visibility 而不是 display 收起：既能做过渡，鼠标移向菜单的途中也不会断掉 hover */
.app-nav-group {
    position: relative;
}

.app-nav-group-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 400;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 100%;
    padding: 0.45rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel-strong);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.3rem);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

/* 按钮和菜单之间留了 0.4rem 的空隙，补一块透明区域兜住鼠标路径 */
.app-nav-group-menu::before {
    content: '';
    position: absolute;
    top: -0.4rem;
    right: 0;
    left: 0;
    height: 0.4rem;
}

/* 展开条件只有两个：鼠标悬停，或键盘把焦点移进来。
   这里必须用 :has(:focus-visible) 而不是 :focus-within —— 鼠标点一级按钮后焦点会留在它身上，
   :focus-within 会一直成立、鼠标移开菜单也收不起来（"二级菜单有时不消失"就是这个原因）；
   :focus-visible 只在键盘操作时命中，鼠标点击不会命中。 */
.app-nav-group:not(.is-dismissed):hover .app-nav-group-menu,
.app-nav-group:not(.is-dismissed):has(:focus-visible) .app-nav-group-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.app-nav-group-menu .app-nav-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 100%;
    text-align: left;
    white-space: nowrap;
}

.top-actions-group {
    display: grid;
    gap: 0.45rem;
}

.top-actions-group .eyebrow {
    margin-bottom: 0;
}

.top-actions-group-buttons {
    display: grid;
    gap: 0.5rem;
}

.app-nav-group-button,
.app-nav-button {
    min-width: 6.2rem;
}

.app-nav-group-button {
    padding: 0.55rem 0.9rem;
}

.app-nav-button {
    padding: 0.5rem 0.8rem;
}

.app-nav-group-button.active,
.app-nav-button.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

.home-panel {
    margin-top: 1rem;
}

.manage-page {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.settings-panel {
    display: grid;
    gap: 1rem;
}

.reminder-page-intro {
    margin: 0 0 1rem;
}

.settings-page {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.settings-subform {
    padding-top: 0.6rem;
    border-top: 1px solid rgba(31, 39, 30, 0.08);
}

.settings-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bulk-edit-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.quick-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.quick-filter-list {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.quick-filter-chip.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

/* ══════════ 物品列表页头部：整块压紧，把表格尽量留在首屏 ══════════
   原来标题行 + 筛选行 + 快捷查看面板 + 批量修改面板叠了约 400px 才看到表格，
   四块都收一档：标题行只留一行高度，两条面板块降级成细横条。 */
.items-head {
    align-items: center;
    margin-bottom: 0.5rem;
}
/* h2 没有全局样式（浏览器默认上下各 0.83em 外边距），flex 行里不折叠 —— 不归零白撑 40px */
.items-head h2 {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.25;
}
.items-head .eyebrow {
    margin: 0 0 0.1rem;
}
.items-head #new-item-button {
    flex: 0 0 auto;
    padding: 0.5rem 1.05rem;
    font-size: 0.92rem;
}
/* 筛选行紧贴标题，输入框/按钮收窄到同一高度，看起来是一整块搜索区 */
.manage-page #filter-form {
    margin-top: 0.5rem;
}
.filter-grid select,
.filter-grid button {
    padding: 0.6rem 0.8rem;
    border-radius: 14px;
    font-size: 0.92rem;
}
.filter-grid button {
    padding: 0.6rem 1rem;
}
/* 快捷查看 / 批量修改：从 .panel 的大内边距降级为一条细横条 */
.quick-filter-bar.panel,
.bulk-edit-bar.panel,
.filter-summary.panel {
    padding: 0.5rem 0.75rem;
    border-radius: 14px;
    margin-bottom: 0.5rem;
}
/* 标签与摘要并排，占一行而不是两行 */
.filter-bar-label {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    flex-wrap: wrap;
}
.filter-bar-label .eyebrow {
    margin: 0;
}
.filter-bar-label .subtle {
    padding: 0;
    font-size: 0.88rem;
}
/* 筛选状态条（有筛选时才出现）：标签小胶囊 + 小号清除按钮，别再顶一个大药丸按钮 */
.filter-summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.filter-tag {
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.filter-tag-item {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(24, 95, 87, 0.1);
    color: var(--brand);
    font-size: 0.82rem;
}
.filter-summary .filter-clear {
    padding: 0.15rem 0.6rem;
    border: 1px solid #bbb;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--brand);
    font-size: 0.82rem;
}

.operation-log-filters {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.75rem 0;
}

.operation-log-filters input,
.operation-log-filters select {
    min-width: 12rem;
}

.inline-actions {
    margin-bottom: 0.5rem;
}

.avatar-preview-card {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.8rem 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(24, 95, 87, 0.08);
}

.reminder-preferences {
    display: grid;
    gap: 0.75rem;
}

.check-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 500;
}

.check-row input {
    width: auto;
}

.reminder-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.notification-status {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
}

.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
}

.danger-zone {
    border-top: 1px solid rgba(163, 52, 87, 0.18);
}

.danger-button {
    border-color: rgba(163, 52, 87, 0.35);
    color: var(--danger);
}

.danger-button:hover {
    border-color: var(--danger);
    background: rgba(163, 52, 87, 0.08);
}

.onboarding-panel {
    margin-top: 1rem;
    background: linear-gradient(135deg, rgba(214, 236, 229, 0.85), rgba(255, 249, 240, 0.96));
}

.onboarding-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.onboarding-grid article {
    padding: 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.64);
    border: 1px solid rgba(24, 95, 87, 0.08);
}

.onboarding-grid article strong {
    display: block;
    margin-bottom: 0.45rem;
}

.onboarding-grid article p {
    margin: 0;
}

.compact-list {
    gap: 0.5rem;
}

.compact-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: flex-start;
}

.ghost-button {
    background: none;
    border: 1px solid #bbb;
    color: #666;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 4px;
    font-size: 0.95em;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.ghost-button:hover {
    border-color: #0078d4;
    color: #0078d4;
    background: #f0f8ff;
}

#filter-history-panel {
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 12px;
    min-width: 360px;
    max-width: min(92vw, 460px);
    z-index: 10;
    margin-top: 2px;
    right: 0;
    border-radius: 18px;
}

.history-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.75rem;
}

.history-panel-head strong {
    display: block;
}

.history-panel-actions {
    display: flex;
    gap: 0.4rem;
}

.history-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.65rem 0;
    border-bottom: 1px solid #f2f2f2;
    font-size: 0.97em;
}

.history-copy {
    display: grid;
    gap: 0.25rem;
}

.history-summary {
    color: #24352e;
    font-weight: 600;
}

.history-meta {
    color: #7a867d;
    font-size: 0.88rem;
}

.history-actions {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
}

.history-row:last-child {
    border-bottom: none;
}
.subtle {
    color: #6b6b6b; /* 提高对比度，保证小字清晰可读 */
    font-size: 0.96em;
    padding: 6px 0;
}
.hidden {
    display: none !important;
}
/* 弹窗样式 */
.dialog-mask {
    position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.2); z-index: 1000;
}
.dialog {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);
    background: #fff; border-radius: 8px; box-shadow: 0 2px 16px #0002;
    z-index: 1001; min-width: 320px; padding: 2em 2em 1em 2em;
    /* 限高 + 内部滚动：长表单弹窗（批量改属性 / 记一笔 / 选父节点 / 标签管理…）不限高时，
       上下两端会被顶出视口、底部按钮点不到。原来只有 ≤980px 才限高 —— 而"屏很矮但宽度 >980"
       （小笔记本、平板横屏、浏览器开窄窗）同样会溢出，所以提到基础样式。 */
    max-height: min(88vh, calc(100vh - 2rem));
    overflow: auto;
    overscroll-behavior: contain;
}
.dialog .dialog-actions { display: flex; gap: 1em; justify-content: flex-end; margin-top: 1em; }
.dialog.hidden, .dialog-mask.hidden { display: none; }
/* 通用确认对话框 */
.confirm-dialog-message {
    white-space: pre-line;
    color: #555;
    line-height: 1.6;
    margin: 0.75rem 0 1.25rem;
}
#confirm-dialog-ok.danger-solid {
    background: var(--danger);
}

/* ── 时钟表盘 ── */
/* 时钟是从日程抽屉里打开的，层级必须压过抽屉本身（.dialog / .dialog-mask 都是 1000/1001） */
#clock-mask {
    z-index: 1002;
}
.clock-dialog {
    z-index: 1003;
    width: min(20rem, calc(100vw - 2rem));
    padding: 1.2rem 1.2rem 1rem;
    text-align: center;
}
.clock-dialog h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}
.clock-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.1rem;
    margin: 0 0 0.45rem;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
/* 小时/分钟都可点，用来在两段之间切换 */
.clock-part {
    padding: 0.1rem 0.32rem;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
}
.clock-part.is-active {
    color: var(--brand);
}
.clock-colon {
    color: var(--muted);
    font-style: normal;
}
.clock-meridiem {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
}
.clock-meridiem-btn {
    padding: 0.16rem 0.72rem;
    border: 1px solid rgba(31, 39, 30, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--muted);
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.clock-meridiem-btn.is-active {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
    font-weight: 700;
}
.clock-face-wrap {
    display: flex;
    justify-content: center;
}
.clock-face {
    width: min(15.5rem, 58vw);
    height: auto;
    cursor: pointer;
    user-select: none;
    /* 拖动指针时不要触发页面滚动 */
    touch-action: none;
}
.clock-ring {
    fill: rgba(255, 255, 255, 0.75);
    stroke: var(--line);
}
.clock-inner {
    fill: rgba(24, 95, 87, 0.05);
}
.clock-hand {
    stroke: var(--brand);
    stroke-width: 2.5;
    stroke-linecap: round;
}
.clock-sel {
    fill: var(--brand);
}
.clock-pin {
    fill: var(--brand);
}
.clock-num {
    fill: var(--muted);
    font-size: 13px;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}
.clock-num.is-active {
    fill: #fff;
}
.clock-hint {
    margin: 0.55rem 0 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* 快捷键帮助面板 */
.shortcut-dialog {
    width: min(38rem, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    padding: 1.4rem 1.4rem 1rem;
}
.shortcut-dialog h3 {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
}
.shortcut-lead {
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: 0.84rem;
}
.shortcut-body {
    display: grid;
    gap: 1.1rem;
}
.shortcut-section h4 {
    margin: 0 0 0.5rem;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.shortcut-list {
    display: grid;
    gap: 0.3rem;
    margin: 0;
}
.shortcut-list > div {
    display: grid;
    grid-template-columns: 11.5rem minmax(0, 1fr);
    gap: 0.7rem;
    align-items: baseline;
}
.shortcut-list dt {
    margin: 0;
}
.shortcut-list dd {
    margin: 0;
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.5;
}
.shortcut-list kbd {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border: 1px solid rgba(31, 39, 30, 0.16);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
/* 手机上竖排：键位一行、说明一行 */
@media (max-width: 760px) {
    .shortcut-list > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.15rem;
        margin-bottom: 0.25rem;
    }
}

/* 列表页通用容器：列表卡片 + 详情面板（脑图等模块复用） */
.section-panel {
    display: grid;
    gap: 0.35rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    min-width: 0;
}
.section-list {
    display: grid;
    gap: 0.9rem;
}
.section-card {
    display: grid;
    gap: 0.7rem;
    padding: 1rem 1.1rem;
}
.section-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.section-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.section-empty {
    padding: 1.5rem 0;
    text-align: center;
}
/* 脑图详情头部：返回按钮与标题并排，省掉原来单独一行的返回栏。
   eyebrow「脑图」也一并去掉 —— 顶栏面包屑已经写着「脑图 / xxx」 */
.mindmap-head-left {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    flex-wrap: wrap;
}
/* 两侧垂直居中，比 .section-head 默认的顶部对齐更紧凑；
   同时压掉 .compact-head 的下边距，给画布让出竖向空间 */
.section-head.mindmap-head {
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
}
/* h2 没有全局样式（用的是浏览器默认的上下各 0.83em 外边距），
   flex 行里外边距不会折叠 —— 不归零的话光标题就白撑约 40px 高度 */
#mindmap-title {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.25;
}
/* 头部右侧那排按钮：.inline-actions 的 0.5rem 下边距同样会算进行高 */
.section-head.mindmap-head .settings-actions.inline-actions {
    margin-bottom: 0;
    gap: 0.4rem;
}
/* 脑图列表：整行可点，已去掉「打开脑图」按钮 */
.mind-card {
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.mind-card:hover {
    border-color: var(--brand);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(24, 95, 87, 0.12);
}
.mind-card:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.mind-card-arrow {
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1;
    padding: 0 0.15rem;
    align-self: center;
}
.mind-card:hover .mind-card-arrow {
    color: var(--brand);
}

/* 脑图 */
.mindmap-tools {
    align-items: center;
    align-content: flex-start;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.2rem 0 0.35rem;
    max-width: 100%;
    min-width: 0;
    padding-bottom: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex !important;
    grid-column: 1 / -1;
    justify-content: flex-start;
}
.mindmap-tools > * {
    flex: 0 0 auto;
    min-width: auto;
}
.mindmap-tools button {
    white-space: nowrap;
    margin-left: 0;
    /* 工具按钮收一档：按钮多，缩一点更容易挤在一行内 */
    padding: 2px 6px;
    font-size: 0.88em;
    line-height: 1.35;
}
/* .subtle 自带 6px 上下内边距，在工具条/模式条里会白白撑高一行 */
.mindmap-tools .subtle,
.mind-view-bar .subtle {
    padding: 0;
}
/* 刷子上色条 */
.mind-paint-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0 0 0.35rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
}
.mind-paint-swatch {
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(31, 39, 30, 0.18);
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.mind-paint-swatch:hover {
    transform: scale(1.12);
}
.mind-paint-swatch.active {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(24, 95, 87, 0.22);
    transform: scale(1.1);
}
.mind-paint-clear {
    background: #fff;
    color: #999;
    font-size: 1rem;
    line-height: 1;
}
.mind-paint-hint {
    color: var(--brand);
    font-weight: 600;
}
/* 刷子模式：节点光标变十字，提示可刷 */
.mindmap-painting .mindmap-node {
    cursor: crosshair;
}
/* 整图状态模式开关：开启时高亮（「显示标签」是同一类"开着就高亮"的开关） */
#mindmap-status-toggle.active,
#mind-tags-toggle.active {
    border-color: var(--brand);
    color: var(--brand);
    background: rgba(24, 95, 87, 0.1);
    font-weight: 600;
}
/* 刷子条：分隔线与一键隐藏下拉 */
.mind-paint-sep {
    width: 1px;
    height: 1.2rem;
    background: rgba(31, 39, 30, 0.15);
    margin: 0 0.15rem;
}
/* 标签刷：按钮 + 可搜索的弹出面板。
   之所以不用原生 select：标签最多 50（公共）+ 50（本图），下拉里要滚半天、还不能搜、取消也不直观
   （旧写法是把"标签刷…"那个空选项拨回去）。面板限高可滚，选项按公共 / 本图分组，支持拼音首字母。 */
.tag-brush-control {
    position: relative;
    display: inline-flex;
}
.tag-brush-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    width: min(22rem, 78vw);
    padding: 0.5rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(31, 39, 30, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
.tag-brush-panel input[type="search"] {
    width: 100%;
    box-sizing: border-box;
}
.tag-brush-list {
    max-height: 14rem;
    overflow: auto;
    margin-top: 0.4rem;
}
.tag-brush-list .tag-chip-row {
    margin-top: 0.3rem;
}
.tag-brush-add {
    width: 100%;
    margin-top: 0.4rem;
}
.mind-preset-select {
    padding: 0.25rem 0.45rem;
    border-radius: 8px;
    border: 1px solid #bbb;
    background: #fff;
    color: #666;
    font-size: 0.85rem;
    cursor: pointer;
}
/* 视图模式条（单独一行） */
.mind-view-bar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin: 0 0 0.35rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
}
.mind-view-list {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.mind-view-chip {
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid #bbb;
    background: #fff;
    color: #666;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.mind-view-chip:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.mind-view-chip.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-weight: 600;
}
.mind-view-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
}
/* 显示密度三档切换 */
.mind-density-group {
    display: inline-flex;
    gap: 0.2rem;
}
.mind-density-btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.82rem;
}
.mind-density-btn.active {
    border-color: var(--brand);
    color: var(--brand);
    background: rgba(24, 95, 87, 0.1);
    font-weight: 600;
}
/* 密度：紧凑（标准档用 .mindmap-node 基础样式，只需覆盖两端） */
.mindmap-compact .mindmap-node {
    padding: 0.18rem 0.42rem;
    border-radius: 9px;
    font-size: 0.82rem;
    line-height: 1.25;
}
.mindmap-compact .mindmap-node .node-check,
.mindmap-compact .mindmap-node .node-note-flag {
    width: 0.9rem;
    height: 0.9rem;
    font-size: 0.55rem;
}
.mindmap-compact .mindmap-node .node-progress {
    font-size: 0.68rem;
    padding: 0 0.28rem;
}
/* 密度：宽松 */
.mindmap-loose .mindmap-node {
    padding: 0.6rem 0.95rem;
    border-radius: 16px;
    font-size: 1rem;
    line-height: 1.45;
}
/* 模式拖拽排序 */
.mind-view-chip[draggable='true'] {
    cursor: grab;
}
.mind-view-chip.dragging {
    opacity: 0.4;
    cursor: grabbing;
}
.mind-view-chip.drop-target {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(24, 95, 87, 0.25);
}
/* 被隐藏的节点（仅在「显示隐藏」开启时可见）：虚线框 + 半透明 + 眼睛标记 */
.mindmap-node.hidden-node {
    border-style: dashed;
    border-color: rgba(31, 39, 30, 0.5);
    opacity: 0.6;
}
.mindmap-node.hidden-node .node-text {
    text-decoration: line-through;
    text-decoration-style: dotted;
}
.mindmap-node.hidden-node::after {
    content: '\1F441';
    position: absolute;
    top: -0.55rem;
    left: -0.35rem;
    font-size: 0.7rem;
    line-height: 1;
}
/* 显示隐藏开关：开启时高亮 */
#mindmap-hidden-toggle.active {
    border-color: var(--brand);
    color: var(--brand);
    background: rgba(24, 95, 87, 0.1);
    font-weight: 600;
}
.mindmap-canvas-wrap {
    position: relative;
    overflow: auto;
    border: 1px solid rgba(31, 39, 30, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.45);
    min-height: 60vh;
    touch-action: pan-x pan-y;
}
.mindmap-canvas {
    position: relative;
    transform-origin: 0 0;
}
#mindmap-links {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
}
#mindmap-nodes {
    position: absolute;
    left: 0;
    top: 0;
}
.mindmap-node {
    position: absolute;
    box-sizing: border-box;
    padding: 0.5rem 0.8rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(31, 39, 30, 0.12);
    box-shadow: 0 2px 8px rgba(31, 39, 30, 0.07);
    cursor: pointer;
    word-break: break-word;
    font-size: 0.95rem;
    line-height: 1.35;
    user-select: none;
}
.mindmap-node.root-node {
    background: var(--brand);
    color: #fff;
    border-color: transparent;
    font-size: 1.05rem;
    font-weight: 600;
}
.mindmap-node .node-main {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}
.mindmap-node .node-check {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
    border-radius: 999px;
    border: 1.5px solid rgba(31, 39, 30, 0.35);
    background: transparent;
    color: #fff;
    font-size: 0.72rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.mindmap-node:hover .node-check,
.mindmap-node.selected .node-check,
.mindmap-node.status-todo .node-check,
.mindmap-node.status-doing .node-check,
.mindmap-node.status-done .node-check {
    opacity: 1;
}
.mindmap-node.status-doing .node-check {
    border-color: var(--accent);
    color: var(--accent);
}
.mindmap-node.status-done .node-check {
    background: var(--brand);
    border-color: var(--brand);
}
.mindmap-node.status-done .node-text {
    opacity: 0.6;
}
.mindmap-node.status-done {
    opacity: 0.75;
}
.mindmap-node .node-icon {
    flex: 0 0 auto;
    font-size: 0.95rem;
    line-height: 1;
}
.mindmap-node .node-text {
    min-width: 0;
}
.mindmap-node .node-progress {
    flex: 0 0 auto;
    margin-left: 0.15rem;
    font-size: 0.72rem;
    color: #7c8b84;
    background: rgba(31, 39, 30, 0.06);
    border-radius: 999px;
    padding: 0 0.35rem;
}
.mindmap-node.root-node .node-progress {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.18);
}
@media (hover: none) {
    .mindmap-node .node-check {
        opacity: 1;
    }
}
.mind-icon-groups {
    display: grid;
    gap: 0.7rem;
    max-height: 50vh;
    overflow: auto;
}
.mind-icon-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0.3rem;
    margin-top: 0.3rem;
}
.mind-icon-option {
    font-size: 1.15rem;
    line-height: 1;
    padding: 0.35rem 0;
    border: 1px solid rgba(31, 39, 30, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}
.mind-icon-option:hover {
    border-color: var(--accent);
    background: #fff;
}
@media (max-width: 760px) {
    .mind-icon-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}
.mindmap-node.selected {
    outline: 3px solid var(--accent);
    outline-offset: 1px;
}
.mindmap-node.droptarget {
    outline: 3px dashed var(--accent);
    outline-offset: 2px;
    cursor: copy;
}
.mindmap-node.dragging {
    opacity: 0.5;
}
.mindmap-drop-line {
    position: absolute;
    height: 4px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(205, 106, 45, 0.16);
    pointer-events: none;
    z-index: 6;
}
.mindmap-node.editing {
    z-index: 5;
    box-shadow: 0 0 0 3px var(--accent);
}
.mindmap-node .node-edit-input {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    color: #22302c;
    background: #fff;
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 0.15rem 0.35rem;
    outline: none;
}
.mindmap-node.mind-flash {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(205, 106, 45, 0.18);
    transition: box-shadow 0.3s;
}
/* 备注：默认隐藏，悬浮/选中时以浮层显示。
   用绝对定位而非直接占位，避免 hover 时节点撑高导致整图布局跳动。 */
.mindmap-node .node-note {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 6;
    margin-top: 0.35rem;
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    background: rgba(31, 39, 30, 0.94);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.4;
    white-space: pre-wrap;
    width: max-content;
    max-width: 15rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}
.mindmap-node:hover .node-note,
.mindmap-node.selected .node-note {
    display: block;
}
/* 浮层要盖在相邻节点之上 */
.mindmap-node:hover,
.mindmap-node.selected {
    z-index: 10;
}
/* 有备注的节点：橙色圆形铅笔标记，提示可悬浮查看 */
.mindmap-node .node-note-flag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.62rem;
    line-height: 1;
    cursor: help;
}
/* 节点上的标签 chip：单独一行、可换行（超出 MIND_NODE_TAG_SHOWN 个的收成 +N）。
   宽度/高度都是"先把内容塞进 DOM 再量"，所以这一行会被正常算进节点尺寸、布局不会压到它。 */
.mindmap-node .node-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.22rem;
    margin-top: 0.3rem;
}
.mindmap-node .node-tag {
    max-width: 100%;
    padding: 0 0.34rem;
    border-radius: 999px;
    /* 颜色由 --tag-hue 决定（app.js 按标签 id 写进 style）：同一个标签永远同一个颜色。
       变量缺失时退回默认色相，深色节点那条规则在后面覆盖成半透明白。 */
    background: hsl(var(--tag-hue, 150) 45% 93%);
    color: hsl(var(--tag-hue, 150) 45% 30%);
    font-size: 0.68rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mindmap-compact .mindmap-node .node-tags {
    margin-top: 0.15rem;
    gap: 0.15rem;
}
.mindmap-compact .mindmap-node .node-tag {
    padding: 0 0.26rem;
    font-size: 0.6rem;
}
/* 深色底的节点（中心主题 / 自定义颜色）：chip 换成半透明白，与 .node-progress 同一套处理 */
.mindmap-node.root-node .node-tag,
.mindmap-node.has-color .node-tag {
    background: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.94);
}
/* 自定义颜色的节点：进度徽章改用白色，避免与背景色相近看不清 */
.mindmap-node.has-color .node-progress {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.18);
}
.mindmap-node .node-toggle {
    position: absolute;
    right: -0.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    background: #fff;
    color: var(--brand);
    border: 1px solid rgba(31, 39, 30, 0.2);
    font-size: 0.78rem;
    line-height: 1.05rem;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.mindmap-node.root-node .node-toggle {
    background: var(--brand-soft);
    color: var(--brand);
}
.mindmap-edit-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.7rem;
    border: 1px dashed rgba(31, 39, 30, 0.2);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.6);
    margin: 0.6rem 0;
}
.mindmap-edit-bar input[type='text'] {
    min-width: 12rem;
    flex: 1;
}
.mindmap-edit-bar select {
    width: 8.5rem;
}
:root {
    --bg: #f0eadf;
    --panel: rgba(255, 251, 245, 0.92);
    --panel-strong: #fffdf8;
    --text: #1f271e;
    --muted: #667062;
    --line: rgba(31, 39, 30, 0.08);
    --brand: #185f57;
    --brand-soft: #d6ece5;
    --accent: #cd6a2d;
    --danger: #a33457;
    --shadow: 0 18px 42px rgba(31, 39, 30, 0.08);
    --radius: 24px;
    /* 时钟图标：只作为遮罩使用，颜色由所在元素的 background 决定 */
    --clock-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 6.6V12l3.6 2.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--text);
    font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at top left, rgba(24, 95, 87, 0.16), transparent 26%),
        radial-gradient(circle at bottom right, rgba(205, 106, 45, 0.18), transparent 28%),
        linear-gradient(135deg, #f9f4eb, var(--bg));
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    border: 0;
    border-radius: 999px;
    padding: 0.85rem 1.15rem;
    background: linear-gradient(135deg, var(--brand), #0e4742);
    color: #fff;
    cursor: pointer;
}

.ghost-button,
.link-button {
    background: rgba(255, 255, 255, 0.74);
    color: var(--brand);
    box-shadow: none;
}

.link-button.danger {
    color: var(--danger);
}

.shell {
    width: min(1380px, calc(100vw - 2rem));
    margin: 0 auto;
    padding: 1.4rem 0 2rem;
}

.topbar,
.hero,
.content-grid,
.auth-grid,
.stats-grid,
.item-form-grid,
.filter-grid,
.media-grid {
    display: grid;
    gap: 1rem;
}

.topbar {
    grid-template-columns: 1fr auto;
    align-items: start;
    margin-bottom: 0.9rem;
}

.topbar-spacer {
    min-height: 1px;
}

.topbar-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
    width: fit-content;
    margin-left: auto;
}

.topbar-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.25rem 0.35rem;
    border-radius: 999px;
    background: rgba(255, 251, 245, 0.5);
    border: 1px solid rgba(24, 95, 87, 0.08);
}

.topbar-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 1rem;
}

.topbar-user-text {
    display: grid;
    gap: 0.08rem;
    max-width: 7rem;
}

.topbar-user-text strong {
    font-size: 0.92rem;
    line-height: 1.1;
}

.topbar-user-text .subtle {
    font-size: 0.8rem;
}

.top-actions-shell {
    position: relative;
}

.top-actions,
.inline-form,
.ocr-actions,
.table-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ── 快速消耗：一键减 1 ── */
.quantity-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.consume-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), #0e4742);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
    transition: transform 0.1s, opacity 0.1s;
}

.consume-inline:hover {
    opacity: 0.85;
    transform: scale(1.1);
}

.consume-inline:active {
    transform: scale(0.95);
}

.item-batch-checkbox,
#items-select-all {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
}

.inline-edit-select {
    min-width: 7rem;
    padding: 0.45rem 0.65rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
}

.lookup-field {
    display: grid;
    gap: 0.4rem;
}

.lookup-field.compact-field {
    align-content: start;
    font-size: 0.92rem;
    font-weight: 600;
}

/* ---- 类别/位置折叠面板 ---- */
.lookup-search-input {
    padding: 0.65rem 0.8rem;
    border-radius: 14px;
    border: 1px dashed rgba(24, 95, 87, 0.22);
    background: rgba(247, 250, 248, 0.94);
}

.lookup-input-wrap {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
}

.lookup-input-wrap .lookup-search-input {
    flex: 1;
    min-width: 0;
}

.lookup-show-all {
    flex-shrink: 0;
    padding: 0.65rem 0.8rem;
    border-radius: 14px;
    border: 1px dashed rgba(24, 95, 87, 0.22);
    background: rgba(247, 250, 248, 0.94);
    color: var(--brand);
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.lookup-show-all:hover {
    background: rgba(24, 95, 87, 0.08);
    border-style: solid;
}

/* 类别/位置单元格：只有 select（它的选项文本本身就是完整路径，所以不需要"路径提示"那一行）。
   旁边原本还有个悬停才露出的「🔎 按此筛选」图标，已整套删除（筛选条里本来就有类别 / 位置筛选）。 */
.inline-lookup-cell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 0.2rem;
}

/* ---- 物品名称自动补全下拉 ---- */
.autocomplete-label {
    position: relative;
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 240px;
    overflow-y: auto;
    margin-top: 2px;
    border-radius: 14px;
    border: 1px solid rgba(31, 39, 30, 0.1);
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 0 12px 32px rgba(31, 39, 30, 0.1);
}

.autocomplete-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0.9rem;
    cursor: pointer;
    font-size: 0.93rem;
    border-bottom: 1px solid rgba(31, 39, 30, 0.05);
    transition: background 0.15s;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background: rgba(24, 95, 87, 0.07);
    color: var(--brand);
}

.autocomplete-item .ac-name {
    font-weight: 600;
}

.autocomplete-item .ac-hint {
    font-size: 0.78rem;
    color: var(--muted);
    margin-left: 0.75rem;
    white-space: nowrap;
}

.autocomplete-item .ac-badge {
    flex-shrink: 0;
    margin-left: 0.5rem;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.4;
}

.autocomplete-item .ac-badge.existing {
    color: #0e7a5f;
    background: rgba(14, 122, 95, 0.12);
}

.autocomplete-dropdown .ac-empty {
    padding: 0.75rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.85rem;
}

.autocomplete-dropdown .ac-note {
    padding: 0.5rem 0.9rem;
    font-size: 0.78rem;
    color: var(--muted);
    background: rgba(31, 39, 30, 0.04);
    border-bottom: 1px solid rgba(31, 39, 30, 0.06);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 「编辑」的实心主按钮外观只在移动端卡片里生效（见文末 .items-table 段的 ≤980px 规则）：
   原来它无条件下发，桌面表格里比「删除」还抢眼，视觉权重是反的 */
.primary-mobile-action {
    font-weight: 600;
}

.top-actions {
    display: none;
    justify-content: flex-end;
}

.top-actions-shell.open .top-actions {
    position: absolute;
    right: 0;
    top: calc(100% + 0.45rem);
    z-index: 100;
    min-width: 280px;
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 18px;
    border: 1px solid rgba(31, 39, 30, 0.08);
    background: rgba(255, 251, 245, 0.98);
    box-shadow: 0 18px 42px rgba(31, 39, 30, 0.12);
}

.top-actions-shell.open .top-actions button {
    width: 100%;
    justify-content: flex-start;
    white-space: nowrap;
}

.top-actions-toggle {
    display: inline-flex;
}

.form-panel.form-mode-quick .item-form-advanced {
    display: none;
}

.form-panel.form-mode-advanced .item-form-advanced {
    display: block;
}

.form-panel.form-mode-advanced .item-form-advanced > summary {
    display: none;
}

.eyebrow {
    margin: 0 0 0.35rem;
    color: var(--brand);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
    padding: 1.4rem;
}

.auth-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
}

.user-avatar {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand), #0e4742);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.join-line {
    margin-bottom: 0.9rem;
    font-size: 1.3rem;
}

.household-card {
    padding: 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(24, 95, 87, 0.08);
}

.stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1rem;
}

.stat-card strong {
    display: block;
    margin-top: 0.4rem;
    font-size: 2rem;
}

/* ── 顶栏统计条 ── */
.topbar-stats {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.stat-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    padding: 0.2rem 0.55rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(31, 39, 30, 0.06);
    font-size: 0.82rem;
    white-space: nowrap;
    user-select: none;
}

.stat-chip strong {
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink);
}

.stat-chip small {
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 500;
}

.stat-clickable {
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    border-color: rgba(221, 80, 46, 0.25);
    background: rgba(221, 80, 46, 0.06);
}

.stat-clickable:hover {
    background: rgba(221, 80, 46, 0.12);
    border-color: rgba(221, 80, 46, 0.4);
}

.stat-clickable strong {
    color: #c0392b;
}



/* ── 导入结果横幅 ── */
.import-result-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0.5rem 1rem;
    padding: 0.6rem 1rem;
    border-radius: 14px;
    background: rgba(24, 95, 87, 0.07);
    border: 1px solid rgba(24, 95, 87, 0.15);
    font-size: 0.85rem;
    color: var(--ink);
}

.import-banner-summary strong {
    color: var(--brand);
}

.import-banner-errors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.6rem;
    font-size: 0.78rem;
    color: var(--muted);
}

.import-error-item {
    color: #c0392b;
}

.import-banner-close {
    margin-left: auto;
    padding: 0.1rem 0.4rem;
    border: none;
    border-radius: 6px;
    background: none;
    font-size: 1rem;
    color: var(--muted);
    cursor: pointer;
    line-height: 1;
}

.import-banner-close:hover {
    color: var(--ink);
    background: rgba(31, 39, 30, 0.06);
}

/* 隐藏老的 stats-grid、import-result-panel（如果还有引用） */
#stats-grid, #import-result-panel { display: none !important; }

.content-grid {
    grid-template-columns: 1.8fr 0.95fr;
    align-items: start;
    margin-top: 1rem;
}

.side-grid {
    display: grid;
    gap: 1rem;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
}

.compact-head {
    margin-bottom: 0.8rem;
}

.filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-top: 1rem;
}

.stack-form,
.item-form-grid {
    display: grid;
    gap: 1rem;
}

.item-form-shell {
    gap: 1.2rem;
    margin-top: 1rem;
}

.item-form-section,
.item-form-advanced {
    padding: 1rem 1.1rem;
    border: 1px solid rgba(31, 39, 30, 0.08);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 247, 0.94));
}

.item-form-section h3,
.item-form-advanced summary strong {
    margin: 0;
    color: var(--ink);
}

.item-form-advanced summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}

.item-form-advanced summary::-webkit-details-marker {
    display: none;
}

.item-form-advanced-body {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(31, 39, 30, 0.08);
}

.item-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.recent-picks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}

.recent-picks-panel {
    padding: 0.9rem 1rem;
    border-radius: 20px;
    border: 1px dashed rgba(24, 95, 87, 0.18);
    background: rgba(242, 248, 245, 0.9);
}

.recent-picks-panel .eyebrow {
    margin-bottom: 0.6rem;
}

.recent-picks-list {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.recent-pick-chip {
    border-radius: 999px;
    padding: 0.5rem 0.85rem;
    max-width: 100%;
    white-space: normal;
    text-align: left;
    line-height: 1.35;
}

.media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

label {
    display: grid;
    gap: 0.45rem;
    font-weight: 600;
}

input,
select,
textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    border: 1px solid rgba(31, 39, 30, 0.12);
    background: rgba(255, 255, 255, 0.84);
}


/* ── 分页 ── */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 0 0.25rem;
    flex-wrap: wrap;
}

.pagination-bar .page-info {
    font-size: 0.82rem;
    color: var(--muted);
    margin-right: 0.5rem;
}

.pagination-bar .page-btn {
    min-width: 2.2rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid rgba(31, 39, 30, 0.1);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, border-color 0.15s;
}

.pagination-bar .page-btn:hover {
    background: rgba(24, 95, 87, 0.07);
    border-color: var(--brand);
}

.pagination-bar .page-btn.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-weight: 700;
}

.pagination-bar .page-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.pagination-bar .page-btn:disabled:hover {
    background: #fff;
    border-color: rgba(31, 39, 30, 0.1);
}

.pagination-bar .page-ellipsis {
    padding: 0 0.2rem;
    color: var(--muted);
}

@media (max-width: 980px) {
    .pagination-bar {
        gap: 0.3rem;
        padding: 0.5rem 0;
    }
    .pagination-bar .page-btn {
        min-width: 1.8rem;
        padding: 0.3rem 0.35rem;
        font-size: 0.8rem;
        border-radius: 8px;
    }
    .pagination-bar .page-info {
        width: 100%;
        text-align: center;
        margin-right: 0;
        margin-bottom: 0.15rem;
    }
}

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

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 0.9rem 0.75rem;
    border-bottom: 1px solid rgba(31, 39, 30, 0.08);
    text-align: left;
    vertical-align: top;
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 0.26rem 0.65rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
}

.pill.shared {
    background: rgba(24, 95, 87, 0.12);
    color: var(--brand);
}

.pill.private {
    background: rgba(163, 52, 87, 0.12);
    color: var(--danger);
}

.plain-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.8rem;
}

.plain-list li,
.reminder-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px dashed rgba(31, 39, 30, 0.1);
}

.reminder-item.done {
    opacity: 0.7;
}

.tree-list {
    display: grid;
    gap: 0.5rem;
}

.tree-level {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.tree-level li {
    margin: 0.4rem 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid rgba(31, 39, 30, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.tree-node-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.tree-node-main {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex: 1;
    min-width: 0;
}

.tree-node-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    border-radius: 999px;
    background: rgba(24, 95, 87, 0.08);
    color: var(--brand);
    font-weight: 700;
}

.tree-node-toggle.is-placeholder {
    visibility: hidden;
    pointer-events: none;
}

/* 单节点「全展 / 全收」按钮：比普通折叠按钮略小，用方框 ± 与 +/- 区分 */
.tree-node-all {
    padding: 0.1rem 0.3rem;
    font-size: 0.75rem;
    line-height: 1;
    border-radius: 6px;
    opacity: 0.75;
}
.tree-node-all:hover {
    opacity: 1;
    border-color: var(--brand);
    color: var(--brand);
}

.tree-node-children.hidden {
    display: none;
}

.tree-level li > .tree-node-row > .tree-node-name {
    font-weight: 700;
    color: var(--text);
    cursor: grab;
    flex: 1;
}

.tree-node-usage {
    font-weight: 400;
    color: var(--muted);
    font-size: 0.85rem;
}

/* ── 位置关联类别多选标签 ── */
.category-tag-select {
    display: grid;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid rgba(31, 39, 30, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
    min-height: 2.8rem;
    position: relative;
}

.cat-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cat-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.55rem;
    border-radius: 10px;
    border: 1px solid rgba(31, 39, 30, 0.1);
    background: #fff;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}

.cat-tag:hover {
    background: rgba(24, 95, 87, 0.07);
    border-color: var(--brand);
}

.cat-tag.selected {
    background: rgba(24, 95, 87, 0.12);
    border-color: var(--brand);
    color: var(--brand);
    font-weight: 600;
}

.cat-tag-remove {
    padding: 0;
    border: none;
    background: none;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
}

.cat-tag-remove:hover {
    color: #c0392b;
}

.cat-tag-search {
    padding: 0.4rem 0.6rem;
    border-radius: 10px;
    border: 1px dashed rgba(24, 95, 87, 0.15);
    background: rgba(247, 250, 248, 0.94);
    font-size: 0.82rem;
}

.tree-node-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: rgba(24, 95, 87, 0.1);
    color: var(--brand);
    font-size: 0.82rem;
    font-weight: 700;
}

.tree-level li > .tree-node-row > .tree-node-actions {
    display: inline-flex;
    gap: 0.35rem;
}

.tree-level li > .tree-node-row > .tree-node-actions button {
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.82rem;
}

/* 层级引导线：子节点被 .tree-node-children 包了一层，
   旧的 `.tree-level li > ul` 是匹配不到的，导致缩进和引导线一直没生效 */
.tree-level li > .tree-node-children {
    margin-top: 0.6rem;
    margin-left: 0.35rem;
    padding-left: 0.85rem;
    border-left: 2px dashed rgba(24, 95, 87, 0.28);
}
.tree-level li > .tree-node-children > ul {
    margin: 0;
    padding-left: 0;
}

.tree-level li.is-dragging {
    opacity: 0.45;
    transform: scale(0.985);
}

.tree-level li.drag-target-child {
    border-color: rgba(24, 95, 87, 0.45);
    box-shadow: 0 0 0 2px rgba(24, 95, 87, 0.12);
    background: rgba(214, 236, 229, 0.5);
}

.tree-level li.drag-target-before {
    box-shadow: inset 0 3px 0 rgba(24, 95, 87, 0.75);
}

.tree-level.drag-target-list {
    background: rgba(24, 95, 87, 0.05);
    border-radius: 14px;
}

.tree-level-0 > li {
    background: rgba(214, 236, 229, 0.3);
}

.tree-dialog-hint {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.form-panel,
.wide-panel {
    margin-top: 1rem;
}

.item-name-cell {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.item-name-link {
    cursor: pointer;
    transition: color 0.15s;
}

.item-name-link:hover {
    color: var(--brand);
    text-decoration: underline;
}

.item-thumb {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(24, 95, 87, 0.14);
    background: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

.item-thumb-empty {
    display: grid;
    place-items: center;
    background: rgba(31, 39, 30, 0.04);
}

/* ── 状态背景色（名称左侧渐变条） ── */
#items-body .item-row-card.status-待补货 {
    background: linear-gradient(90deg, rgba(221, 80, 46, 0.12) 0%, rgba(255, 255, 255, 0.82) 4%);
}
#items-body .item-row-card.status-待补货 td[data-label="名称"] strong {
    color: #c0392b;
}

#items-body .item-row-card.status-待清洗 {
    background: linear-gradient(90deg, rgba(41, 128, 185, 0.1) 0%, rgba(255, 255, 255, 0.82) 4%);
}
#items-body .item-row-card.status-待清洗 td[data-label="名称"] strong {
    color: #2980b9;
}

#items-body .item-row-card.status-待维修 {
    background: linear-gradient(90deg, rgba(243, 156, 18, 0.12) 0%, rgba(255, 255, 255, 0.82) 4%);
}
#items-body .item-row-card.status-待维修 td[data-label="名称"] strong {
    color: #d68910;
}

#items-body .item-row-card.status-已闲置 {
    background: linear-gradient(90deg, rgba(127, 140, 141, 0.15) 0%, rgba(255, 255, 255, 0.82) 4%);
}
#items-body .item-row-card.status-已闲置 td[data-label="名称"] strong {
    color: #7f8c8d;
    text-decoration: line-through;
}

.quantity-cell {
    min-width: 0;
    display: grid;
    gap: 0.2rem;
    justify-items: center;
}

.quantity-meta {
    margin-bottom: 0;
    font-size: 0.86rem;
    color: var(--muted);
    text-align: center;
}

.progress-track.compact {
    width: 80px;
    height: 8px;
}

/* ══════════ 物品列表表格：紧凑行 + 列宽 / 对齐 / 操作列 ══════════
   原来一行约 83-100px：操作列两个按钮被挤到换行、到期日期断成两行、
   td 上下各 0.9rem 内边距、勾选框是 44px 的触控尺寸。这里一并收掉，目标行高约 52px。 */
.items-table th,
.items-table td {
    padding: 0.5rem 0.55rem;
    vertical-align: middle;
}

.items-table thead th {
    padding: 0.3rem 0.55rem;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

/* 选择/数量/到期/操作四列按内容宽度收缩，富余宽度全给名称列 */
.items-table .col-select {
    width: 1.5rem;
}
.items-table .col-qty,
.items-table .col-expire,
.items-table .col-actions {
    width: 1%;
    white-space: nowrap;
}
.items-table .col-qty,
.items-table .col-expire {
    text-align: center;
}
.items-table .col-actions {
    text-align: right;
}

/* 桌面勾选框按内容大小即可（触控尺寸留给 ≤980px） */
.items-table .item-batch-checkbox,
.items-table #items-select-all {
    width: 1.05rem;
    height: 1.05rem;
    min-width: 1.05rem;
    min-height: 1.05rem;
}

/* 操作列：不换行 + 两个同规格小按钮 */
.items-table .table-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0.4rem;
}
.items-table .link-button {
    flex: 0 0 auto;
    padding: 0.15rem 0.6rem;
    border: 1px solid rgba(31, 39, 30, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--brand);
    font-size: 0.8rem;
    line-height: 1.6;
    margin-left: 0;
    white-space: nowrap;
}
.items-table .link-button:hover {
    border-color: currentColor;
    background: #fff;
}
.items-table .link-button.danger {
    color: var(--danger);
}

/* 内联下拉默认"安静"（无边框、透明底），悬停或聚焦才显形 —— 一排原生 select 会让列表像表单堆 */
.items-table .inline-edit-select {
    min-width: 5.5rem;
    padding: 0.3rem 0.4rem;
    border-color: transparent;
    background: transparent;
}
.items-table .inline-edit-select:hover {
    border-color: rgba(31, 39, 30, 0.12);
    background: rgba(255, 255, 255, 0.9);
}
.items-table .inline-edit-select:focus {
    border-color: var(--brand);
    background: #fff;
}

/* 无图片时用名称首字占位；悬停给一个"可点开看图"的提示 */
.item-thumb-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    cursor: zoom-in;
}
.item-thumb-wrap::after {
    content: '🔍';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    border-radius: 10px;
    background: rgba(15, 23, 20, 0.42);
    opacity: 0;
    transition: opacity 0.15s;
}
.item-name-cell:hover .item-thumb-wrap::after {
    opacity: 1;
}
.item-thumb {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--muted);
}
.item-name-cell {
    gap: 0.6rem;
}
.item-name-text {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    min-width: 0;
}
.item-name-text .subtle {
    flex-basis: 100%;
    padding: 0;
    font-size: 0.82rem;
    line-height: 1.35;
}
.cell-empty {
    color: var(--muted);
}

/* 快速消耗的小圆钮：桌面按内容大小（触控尺寸留给 ≤980px） */
.items-table .consume-inline {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    min-height: 1.5rem;
    font-size: 0.66rem;
}

/* 状态 pill：颜色沿用状态渐变条那套语义色 */
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}
.status-pill-need {
    background: rgba(221, 80, 46, 0.14);
    color: #c0392b;
}
.status-pill-clean {
    background: rgba(41, 128, 185, 0.14);
    color: #2980b9;
}
.status-pill-repair {
    background: rgba(243, 156, 18, 0.18);
    color: #b9770e;
}
.status-pill-idle {
    background: rgba(127, 140, 141, 0.18);
    color: #6b7678;
}

/* 触控设备：把上面收掉的点击目标补回来，卡片模式的操作列也恢复换行 */
@media (max-width: 980px) {
    .items-table .item-batch-checkbox,
    .items-table #items-select-all {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .items-table .consume-inline {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
        min-height: 2.75rem;
        font-size: 0.78rem;
    }

    .items-table .link-button {
        padding: 0.5rem 0.85rem;
        font-size: 0.88rem;
    }

    .items-table .primary-mobile-action {
        border-color: transparent;
        background: linear-gradient(135deg, var(--brand), #0e4742);
        color: #fff;
    }

    .items-table .table-actions {
        flex-wrap: wrap;
    }

    .items-table .quantity-cell {
        justify-items: start;
    }

    /* 卡片模式下每行是 grid，桌面那套"按内容收缩的列宽"必须还回去，否则格子会被压成 1% 宽 */
    .items-table .col-select,
    .items-table .col-qty,
    .items-table .col-expire,
    .items-table .col-actions {
        width: auto;
        white-space: normal;
    }
}



.ocr-panel {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border-radius: 18px;
    background: rgba(24, 95, 87, 0.06);
    border: 1px dashed rgba(24, 95, 87, 0.16);
}

.photo-quick-entry-panel {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(214, 236, 229, 0.72), rgba(255, 249, 240, 0.92));
    border: 1px dashed rgba(24, 95, 87, 0.18);
}

.photo-quick-entry-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr) auto;
    gap: 0.85rem;
    align-items: end;
}

.photo-entry-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.photo-entry-draft-list {
    display: grid;
    gap: 0.85rem;
}

.photo-entry-draft-card {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(24, 95, 87, 0.12);
}

.photo-entry-draft-card.is-saved {
    border-color: rgba(24, 95, 87, 0.26);
    background: rgba(236, 249, 244, 0.92);
}

.photo-entry-draft-body {
    display: grid;
    gap: 0.75rem;
}

.photo-entry-draft-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.compact-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.photo-entry-readonly {
    display: grid;
    gap: 0.2rem;
    align-content: center;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    background: rgba(24, 95, 87, 0.05);
    border: 1px solid rgba(24, 95, 87, 0.08);
}

.photo-entry-meta {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.86rem;
}

.photo-entry-text-details {
    border-top: 1px dashed rgba(24, 95, 87, 0.14);
    padding-top: 0.65rem;
}

.photo-entry-text-details summary {
    cursor: pointer;
    color: var(--brand);
    font-weight: 600;
}

.ocr-preview-card,
.ocr-result-card {
    padding: 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(24, 95, 87, 0.12);
}

.empty-preview {
    display: grid;
    place-items: center;
    min-height: 180px;
    border: 1px dashed rgba(24, 95, 87, 0.18);
    border-radius: 16px;
    color: var(--muted);
    background: rgba(24, 95, 87, 0.03);
}

.preview-image {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: 16px;
    border: 1px solid rgba(24, 95, 87, 0.14);
    background: rgba(255, 255, 255, 0.8);
}

.preview-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.preview-card {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(24, 95, 87, 0.1);
}

.preview-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.preview-card-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.image-kind-field {
    display: grid;
    gap: 0.2rem;
    min-width: 5.5rem;
}

.image-kind-select {
    min-width: 5.5rem;
    padding: 0.18rem 0.35rem;
    border-radius: 10px;
    border: 1px solid rgba(24, 95, 87, 0.16);
    background: rgba(255, 255, 255, 0.9);
}

.image-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.6rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(24, 95, 87, 0.12);
    color: var(--brand);
    font-size: 0.78rem;
    font-weight: 700;
}

.pending-badge {
    background: rgba(198, 140, 46, 0.14);
    color: #8b5a12;
}

.preview-card.pending {
    border-style: dashed;
}

.media-section {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 18px;
    background: rgba(24, 95, 87, 0.04);
    border: 1px dashed rgba(24, 95, 87, 0.12);
}

.progress-wrap {
    margin-top: 0.75rem;
    display: grid;
    gap: 0.4rem;
}

.progress-track {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(24, 95, 87, 0.1);
}

.progress-bar {
    width: 0;
    height: 100%;
    background: linear-gradient(135deg, var(--brand), var(--accent));
}

.ocr-summary {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 0.8rem;
}

.ocr-summary strong {
    display: inline-block;
    min-width: 7rem;
}

.ocr-text {
    margin: 0 0 1rem;
    padding: 0.9rem;
    min-height: 140px;
    white-space: pre-wrap;
    border-radius: 14px;
    border: 1px solid rgba(31, 39, 30, 0.08);
    background: rgba(255, 255, 255, 0.78);
    color: var(--muted);
}

/* OCR 识别结果可视化增强 */
.ocr-suggestion {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.12), rgba(33, 150, 243, 0.08));
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-weight: 600;
    border: 1px solid rgba(76, 175, 80, 0.15);
}

.ocr-text-header {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px dashed rgba(31, 39, 30, 0.1);
}

.ocr-text-body {
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.6;
    font-size: 0.88rem;
}

/* 空状态引导 */
.empty-state {
    padding: 2rem;
    text-align: center;
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.empty-state p {
    margin: 0.3rem 0;
    color: var(--muted);
}

.empty-hint {
    font-size: 0.9rem;
    line-height: 1.8;
}

/* 必填标记 */
.required-mark {
    color: var(--error);
    font-weight: 700;
    margin-left: 0.15rem;
}

/* 表单验证 */
.field-error {
    border-color: var(--error) !important;
    background: rgba(255, 235, 235, 0.5) !important;
}

.field-error-msg {
    color: var(--error);
    font-size: 0.82rem;
    margin-top: 0.2rem;
    animation: fadeIn 0.2s;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 表单内联字段 */
.form-field-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.form-field-inline select {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(31, 39, 30, 0.1);
    background: rgba(255, 255, 255, 0.9);
}

.full-span {
    grid-column: 1 / -1;
}

.subtle,
.helper-line,
.empty {
    color: var(--muted);
}

.error-line {
    color: var(--danger);
}

.toast {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    max-width: min(90vw, 420px);
    padding: 0.7rem 1.25rem;
    border-radius: 999px;
    background: rgba(24, 95, 87, 0.95);
    color: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    text-align: center;
    animation: toast-pop 0.25s ease, toast-fade 0.35s ease 2.6s forwards;
    pointer-events: none;
}

.toast.error {
    background: rgba(163, 52, 87, 0.95);
}

@keyframes toast-pop {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes toast-fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.hidden {
    display: none !important;
}

@media (max-width: 980px) {
    .panel {
        padding: 1rem;
    }

    .photo-quick-entry-toolbar,
    .photo-entry-draft-card,
    .compact-grid {
        grid-template-columns: 1fr;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .onboarding-grid {
        grid-template-columns: 1fr;
    }

    .auth-grid,
    .content-grid,
    .stats-grid,
    .item-form-grid,
    .recent-picks-grid,
    .filter-grid,
    .topbar,
    .media-grid {
        grid-template-columns: 1fr;
    }

    .shell {
        width: min(100vw - 1rem, 100%);
    }

    .topbar-tools {
        gap: 0.45rem;
        width: fit-content;
    }

    .topbar-user-chip {
        min-width: 0;
        flex: 0 1 auto;
        padding: 0.18rem 0.22rem;
        overflow: hidden;
    }

    .topbar-user-text {
        min-width: 0;
    }

    .topbar-user-text strong,
    .topbar-user-text .subtle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar-user-text .subtle {
        display: none;
    }

    .app-menu {
        gap: 0.5rem;
    }

    .app-menu-left {
        flex: 0 1 auto;
    }

    .app-menu-right {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        margin-left: auto;
    }

    .nav-stats {
        flex-shrink: 0;
    }

    .nav-stats .stat-chip {
        padding: 0.12rem 0.35rem;
        border-radius: 6px;
        font-size: 0.72rem;
    }

    .nav-stats .stat-chip strong {
        font-size: 0.82rem;
    }

    .app-menu-utility {
        align-items: stretch;
        flex-direction: column;
    }

    .app-menu-utility-label {
        font-size: 0.8rem;
    }

    .top-actions {
        display: none;
    }

    .top-actions-shell {
        justify-self: end;
        width: 100%;
    }

    .top-actions-shell.open .top-actions {
        position: absolute;
        right: 0;
        top: calc(100% + 0.45rem);
        z-index: 100;
        min-width: min(78vw, 280px);
        display: grid;
        gap: 0.5rem;
        padding: 0.75rem;
        border-radius: 18px;
        border: 1px solid rgba(31, 39, 30, 0.08);
        background: rgba(255, 251, 245, 0.98);
        box-shadow: 0 18px 42px rgba(31, 39, 30, 0.12);
    }

    .top-actions-shell.open .top-actions button {
        width: 100%;
        justify-content: flex-start;
        white-space: nowrap;
    }

    .ocr-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .app-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem;
        overflow: visible;
        padding-bottom: 0;
    }

    /* 触摸设备没有 hover：二级菜单还原成平铺，和一级导航共用同一张网格。
       display:contents 让分组容器与菜单容器都不生成盒子，子按钮直接参与外层网格 */
    .app-nav-group,
    .app-nav-group-menu {
        display: contents;
    }

    /* display:contents 的元素不生成盒子，但 visibility / opacity 仍会被子元素继承 ——
       必须显式还原，否则二级菜单在手机上会一直不可见 */
    .app-nav-group-menu {
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    /* 平铺后所有分组的二级项会一起铺开（13 项太长），只保留当前分组的那一组 */
    .app-nav-group:not(.is-current) .app-nav-button {
        display: none;
    }

    /* 桌面端用来兜住按钮与菜单之间那 0.4rem 空隙的伪元素，平铺后没有任何作用。
       而且 display:contents 不生成盒子、伪元素却仍会生成 —— 不关掉的话，
       5 个绝对定位的透明块会一起堆到顶栏左上角外侧去 */
    .app-nav-group-menu::before {
        display: none;
    }

    .app-nav-group-button,
    .app-nav-button {
        min-width: 0;
        width: 100%;
        min-height: 3rem;
        padding: 0.68rem 0.72rem;
        border-radius: 18px;
        font-size: 0.95rem;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
    }

    .stack-on-mobile {
        display: grid;
        gap: 0.75rem;
    }

    .stack-on-mobile button {
        width: 100%;
    }

    .table-wrap table {
        min-width: 900px;
    }

    th,
    td {
        padding: 0.7rem 0.6rem;
    }

        .table-wrap:has(#items-body) table {
            min-width: 0;
        }

        .table-wrap:has(#items-body) thead {
            display: none;
        }

        #items-body {
            display: grid;
            gap: 0.9rem;
        }

        /* 手机上的物品卡片：信息要全、但要紧凑。
           以前类别 / 位置 / 到期藏在「更多信息」按钮里，默认只剩名称 + 数量 ——
           用户反馈"一行显示的内容太少"，所以现在**默认全部显示**，靠排版压紧：
           第一行 = 勾选 + 名称（含缩略图 / 状态 / 标签），类别与位置各占半行，
           数量与到期并排，最后一行是操作。data-label 也从"字段上方"挪到"字段左侧"，
           每个字段由两行变成一行。 */
        #items-body .item-row-card {
            display: grid;
            /* 第 4 列（auto）专门留给右上角的编辑 / 删除图标：操作不再单独占一行 */
            grid-template-columns: 1.8rem minmax(0, 1fr) minmax(0, 1fr) auto;
            gap: 0.5rem 0.55rem;
            padding: 0.85rem;
            border: 1px solid rgba(31, 39, 30, 0.08);
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.82);
            box-shadow: 0 10px 24px rgba(31, 39, 30, 0.05);
        }

        #items-body .item-row-card td {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            gap: 0.3rem;
            min-width: 0;
            padding: 0;
            border-bottom: 0;
            text-align: left; /* 表格里的数量/到期是居中的，卡片里统一左对齐 */
        }

        #items-body .item-row-card td::before {
            content: attr(data-label);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            color: var(--brand);
            white-space: nowrap;
        }

        /* 名称占第 2-3 列（列 1 = 勾选框，列 4 = 右上角的编辑 / 删除图标），
           它自带缩略图与标签行，所以不加标签 */
        #items-body .item-row-card td[data-label="名称"] {
            grid-column: 2 / 4;
            grid-row: 1;
            grid-template-columns: minmax(0, 1fr);
        }
        #items-body .item-row-card .col-select {
            grid-column: 1;
            grid-row: 1;
            align-self: start;
        }
        /* 每行最前面的批量勾选框：触屏回补把它放大到了 2.75rem（44px），搁在卡片里比名称还抢眼、
           还把第 1 列撑得比设计宽 —— 收到 1.6rem（约 25px），照样点得中 */
        #items-body .item-row-card .item-batch-checkbox {
            width: 1.6rem;
            height: 1.6rem;
            min-width: 1.6rem;
            min-height: 1.6rem;
        }
        #items-body .item-row-card .col-select::before {
            content: '';
            display: none;
        }

        /* 编辑 / 删除：挪到第一行最右（第 4 列）并只显示图标 ——
           原来它俩单独占一行，现在整行省掉。图标态全靠 .btn-text / .btn-icon（桌面仍是文字）。 */
        #items-body .item-row-card .col-actions {
            grid-column: 4;
            grid-row: 1;
            align-self: start;
            grid-template-columns: auto;
        }
        #items-body .item-row-card .table-actions {
            justify-content: flex-end;
        }
        #items-body .item-row-card .table-actions .btn-text {
            display: none;
        }
        #items-body .item-row-card .table-actions .btn-icon {
            display: inline;
            margin-right: 0;
        }
        #items-body .item-row-card .table-actions .link-button {
            min-width: 2.3rem;
            min-height: 2.3rem;
            padding: 0.2rem 0.35rem;
            justify-content: center;
            font-size: 1rem;
        }

        /* 类别 / 位置各占半行（位置跨到最后一列，宽度才对得上）：
           选择框里显示的就是完整路径，不再重复一遍标签 */
        #items-body .item-row-card td[data-label="类别"] {
            grid-column: 2;
            grid-template-columns: minmax(0, 1fr);
        }
        #items-body .item-row-card td[data-label="位置"] {
            grid-column: 3 / -1;
            grid-template-columns: minmax(0, 1fr);
        }
        #items-body .item-row-card td[data-label="类别"]::before,
        #items-body .item-row-card td[data-label="位置"]::before {
            content: '';
            display: none;
        }

        /* 数量 / 到期才带标签（"12 / 5""2026-10-01"光看数字不自明）；
           名称与操作那两格不加 —— 名称自明、操作那格是图标 */
        #items-body .item-row-card td[data-label="名称"]::before,
        #items-body .item-row-card td[data-label="操作"]::before {
            content: '';
            display: none;
        }

        /* 数量 / 到期并排；**没设置的整格不显示**（空值渲染出来是 .cell-empty 的「—」），
           两格都没设时这一行会自动消失。桌面表格仍显示「—」占位，列不会错位。 */
        #items-body .item-row-card .col-qty {
            grid-column: 2;
        }
        #items-body .item-row-card .col-expire {
            grid-column: 3 / -1;
        }
        #items-body .item-row-card .col-qty:has(.cell-empty),
        #items-body .item-row-card .col-expire:has(.cell-empty) {
            display: none;
        }
}

#ocr-runtime-status {
    margin-top: 0.5rem;
}

/* Reminder Center Styles */
#reminder-center {
    padding: 1rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#reminder-center .filter-grid {
    margin-bottom: 1rem;
}
.reminder-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.reminder-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f9f9f9;
}
.reminder-item.done {
    background: #e6ffe6;
    border-color: #b2d8b2;
}
.reminder-item .subtle {
    color: #888;
    font-size: 0.9em;
}

/* 手机窄屏适配补丁 */
@media (max-width: 760px) {
    input,
    select,
    textarea {
        font-size: 16px; /* 防止 iOS 聚焦自动放大 */
    }

    #filter-history-panel {
        min-width: 0;
        width: min(92vw, 360px);
        right: 0;
    }

    .dialog {
        width: min(92vw, 440px);
        min-width: 0;
        padding: 1.4rem 1.1rem 1rem;
    }

    .settings-page {
        padding-bottom: 1.5rem;
    }

    .mindmap-tools {
        gap: 0.4rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        max-width: 100%;
        padding-bottom: 0.4rem;
    }

    .mindmap-tools button {
        padding: 0.45rem 0.6rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .mindmap-canvas-wrap {
        min-height: 52vh;
    }

    .section-card-actions button {
        flex: 1 1 auto;
    }

    .reminder-item {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .reminder-item .subtle {
        margin-left: auto;
    }
}

/* 触控设备（手机 / 平板）：放大点击目标、限制弹层高度 */
@media (max-width: 980px) {
    .ghost-button {
        padding: 0.6rem 0.95rem;
        min-height: 2.75rem;
        border-radius: 12px;
        font-size: 0.95rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .dialog {
        max-height: 88vh;
        overflow: auto;
    }

    .mindmap-tools button,
    .section-card-actions button,
    .settings-actions button {
        min-height: 2.75rem;
    }

    .mindmap-node .node-toggle {
        width: 1.8rem;
        height: 1.8rem;
        line-height: 1.7rem;
        font-size: 0.95rem;
    }

    /* 表格区域在触控设备上允许横向滚动查看完整信息 */
    .table-wrap {
        -webkit-overflow-scrolling: touch;
    }

    /* 物品列表头部虽然压紧了，但触控目标不能变小（手机上台式尺寸的按钮点不准） */
    .items-head #new-item-button {
        padding: 0.6rem 1.05rem;
        min-height: 2.75rem;
    }

    .filter-grid select,
    .filter-grid button {
        padding: 0.6rem 0.95rem;
        min-height: 2.75rem;
    }
}

/* 平板横屏 / 小尺寸笔记本：收窄留白，避免内容过空或挤压 */
@media (min-width: 981px) and (max-width: 1200px) {
    .shell {
        width: min(1180px, calc(100vw - 2rem));
    }

    .panel {
        padding: 1.25rem;
    }

    .item-form-grid,
    .filter-grid {
        gap: 0.8rem;
    }

    .table-wrap table {
        font-size: 0.95rem;
    }

    th,
    td {
        padding: 0.8rem 0.65rem;
    }

    .mindmap-canvas-wrap {
        min-height: 62vh;
    }

    .mindmap-tools,
    .section-card-actions {
        gap: 0.5rem;
    }

    .reminder-center-filters {
        gap: 0.6rem;
    }
}

/* ══════════════════ 日历 ══════════════════ */

.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.1rem 0 0.5rem;
}
.calendar-view-switch {
    display: inline-flex;
    gap: 0.3rem;
    padding: 0.22rem;
    border-radius: 999px;
    background: rgba(31, 39, 30, 0.05);
}
.calendar-view-switch .cal-view-btn {
    padding: 0.3rem 0.95rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}
.calendar-view-switch .cal-view-btn.active {
    border-color: var(--line);
    background: #fff;
    color: var(--brand);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(31, 39, 30, 0.08);
}
.calendar-hint {
    font-size: 0.85rem;
    padding: 0;
}
/* 操作提示：默认收起，点「提示」按钮才展开 */
.cal-hint-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.cal-hint-toggle {
    flex: 0 0 auto;
    min-width: 1.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.82rem;
    text-align: center;
}
.cal-hint-toggle.active {
    border-color: var(--brand);
    background: rgba(24, 95, 87, 0.1);
    color: var(--brand);
    font-weight: 600;
}
/* 视图切换 + 密度开关，成组靠左；右侧留给操作提示 */
.cal-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.cal-density-btn {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
}
.calendar-body {
    min-height: 38vh;
}

/* ── 日历头部：‹ 2026 年 9 月 › 今天 合成一组 ──
   翻页按钮原来在右上角、跟月份标题隔了一行，看不出是在翻月，还多占两个按钮位。
   另外 h2 没有全局样式（浏览器默认上下各 0.83em 外边距），flex 行里不折叠，
   不归零的话光标题就白撑约 40px。 */
.cal-head {
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
}
.cal-month-nav {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
#calendar-month-label {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.25;
}
.cal-nav-btn {
    margin-left: 0;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 1rem;
    line-height: 1.4;
}
.cal-today-btn {
    margin-left: 0.1rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.82rem;
}

/* 头部按钮的「图标 + 文字」两段式（日历 / 财务共用）：桌面上照旧显示文字，
   手机（≤760px）里把 .btn-text 收起来、只留图标 —— 全称仍在 title / aria-label 里。
   ⚠️ 桌面默认**不显示**图标：只有原本就带符号的按钮（如「＋ 新建日程」）给它加 `is-shown`；
   其余按钮桌面是纯文字，凭空多一个图标会改变桌面观感。 */
.btn-icon {
    margin-right: 0.25rem;
}
.btn-icon:not(.is-shown) {
    display: none;
}

/* ── 日历标题：点开年月选择器 ── */
.cal-title-wrap {
    position: relative;
}
.cal-jump-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.1rem 0.4rem 0.1rem 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.cal-jump-trigger:hover {
    color: var(--brand);
}
.cal-jump-caret {
    font-size: 0.62rem;
    font-style: normal;
    color: var(--muted);
    transition: transform 0.15s ease;
}
.cal-jump-trigger[aria-expanded="true"] .cal-jump-caret {
    transform: rotate(180deg);
    color: var(--brand);
}

/* ── 年月选择面板：一次点击跳到任意月份 ── */
.cal-jump-panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 400;
    display: grid;
    gap: 0.6rem;
    width: min(20rem, calc(100vw - 3rem));
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 251, 245, 0.99);
    box-shadow: 0 18px 42px rgba(31, 39, 30, 0.16);
}
.cal-jump-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.cal-jump-head strong {
    font-size: 0.98rem;
}
.cal-jump-head .ghost-button {
    margin-left: 0;
    padding: 0.1rem 0.6rem;
    line-height: 1.5;
}
.cal-jump-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
}
.cal-jump-month {
    padding: 0.45rem 0.2rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cal-jump-month:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.cal-jump-month.active {
    background: var(--brand);
    color: #fff;
    font-weight: 700;
}

/* ── 一句话新建 ── */
.cal-quick-dialog {
    width: min(34rem, calc(100vw - 2rem));
    padding: 1.3rem 1.3rem 1.1rem;
}
.cal-quick-dialog h3 {
    margin: 0 0 0.8rem;
    font-size: 1.1rem;
}
.cal-quick-input {
    padding: 0.7rem 0.9rem;
    font-size: 1.02rem;
}
/* 实时预览：解析出来的字段逐行列出，认错了能一眼看出 */
.cal-quick-preview {
    min-height: 6rem;
    margin-top: 0.8rem;
    padding: 0.75rem 0.9rem;
    border: 1px dashed rgba(31, 39, 30, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
}
.cal-quick-hint {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.7;
}
.cal-quick-lines {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cal-quick-lines li {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: 0.55rem;
    font-size: 0.9rem;
    line-height: 1.5;
}
.cal-quick-lines b {
    color: var(--muted);
    font-weight: 600;
}
.cal-quick-lines span {
    color: var(--text);
    word-break: break-word;
}
.cal-quick-note {
    margin: 0.55rem 0 0;
    color: var(--accent);
    font-size: 0.8rem;
    line-height: 1.6;
}
.cal-quick-dialog .dialog-actions button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── 月视图 ── */
.cal-weekhead,
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal-weekhead span {
    padding: 0.3rem 0.2rem;
    font-size: 0.78rem;
    color: var(--muted);
    text-align: center;
}
/* 表头最后两格是周六、周日 */
.cal-weekhead span.is-rest {
    color: var(--accent);
}
.cal-grid {
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.cal-cell {
    position: relative;   /* hover 时右上角的「＋」提示要绝对定位 */
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    /* 6.4rem → 5.2rem：没有日程的格子原来是纯留白，6 行下来白占一百多像素 */
    min-height: 5.2rem;
    padding: 0.35rem 0.4rem;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, box-shadow 0.15s;
}
/* hover 提示"点这里新建"：绝对定位，不占任何布局空间，手机上（无 hover）自然不出现 */
.cal-cell::after {
    content: '＋';
    position: absolute;
    top: 0.1rem;
    right: 0.25rem;
    color: var(--brand);
    font-size: 0.78rem;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.cal-cell:hover::after {
    opacity: 0.6;
}
/* ── 工作日 / 休息日 ──
   底色是「大面积低强度」信号：只轻微染色，把强信号（内描边、饱和色）留给「今天」和「选中」。
   透明度压在 0.09 以内，避免和橙色日程方块（#cd6a2d）混淆。
   优先级（低 → 高）：普通 < 休息日 < hover < 非本月 < 今天/选中
   —— 全部是单/双类选择器，靠下面的源码顺序决定胜负，勿随意挪动 */
/* 周末只给日期数字上色，不铺底色：原来周末 0.055 与法定节假日 0.09 的底色几乎分不出来，
   现在"铺了底色 = 真放假"，一眼可辨 */
.cal-cell.is-rest .cal-cell-day {
    color: var(--accent);
}
/* 法定节假日：整格铺橙色底（周末不再铺底，所以这里可以给足对比） */
.cal-cell.is-holiday {
    background: rgba(205, 106, 45, 0.12);
}
/* 调休上班的周末不加底色（保持和其它工作日一样的白底），靠日期旁的「班」角标区分 */
/* 「休」「班」角标：紧跟日期数字，不用绝对定位，手机上也不会错位 */
.cal-day-tag {
    margin-left: 0.18rem;
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 700;
    color: var(--accent);
}
.cal-day-tag.is-swap {
    color: var(--muted);
}
/* hover 要盖过休息日底色，所以排在它后面 */
.cal-cell:hover {
    background: rgba(24, 95, 87, 0.06);
}
.cal-cell:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}
.cal-cell.is-outside {
    background: rgba(31, 39, 30, 0.03);
}
.cal-cell.is-outside .cal-cell-day {
    color: var(--muted);
    opacity: 0.6;
}
/* 「+N」展开后的格子给个淡描边，和普通格子区分开 */
.cal-cell.is-expanded {
    box-shadow: inset 0 0 0 1px rgba(24, 95, 87, 0.28);
}
.cal-cell.is-today {
    box-shadow: inset 0 0 0 2px var(--brand);
}
.cal-cell.is-selected {
    background: rgba(24, 95, 87, 0.1);
}
.cal-cell-day {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}
.cal-cell.is-today .cal-cell-day {
    color: var(--brand);
}
/* 日期 + 农历的容器：标准档让农历换行成第二行（flex-basis 100%），紧凑档改成同行 */
.cal-cell-head {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    flex-wrap: wrap;
    min-width: 0;
}
.cal-cell-head .cal-cell-lunar {
    flex: 1 0 100%;
}
/* 农历行：节日（含清明、冬至）暖色加粗，节气用品牌绿，普通农历日灰字。
   内容由 modules/lunar.js 的 lunarBadge() 给出，超出数据范围（1900 前 / 2100 后）时整行不渲染 */
.cal-cell-lunar {
    font-size: 0.68rem;
    line-height: 1.2;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-cell-lunar.is-festival {
    color: var(--accent);
    font-weight: 700;
}
.cal-cell-lunar.is-term {
    color: var(--brand);
}
/* 月视图密度三档只作用于桌面（手机上格子本来就只显示圆点，另有 ≤760px 的一套尺寸） */
@media (min-width: 761px) {
    #calendar-body.cal-density-compact .cal-cell {
        gap: 0.1rem;
        min-height: 4.2rem;
        padding: 0.2rem 0.3rem;
    }
    #calendar-body.cal-density-compact .cal-cell-head {
        flex-wrap: nowrap;
    }
    #calendar-body.cal-density-compact .cal-cell-head .cal-cell-lunar {
        flex: 0 1 auto;
        font-size: 0.64rem;
    }
    #calendar-body.cal-density-loose .cal-cell {
        min-height: 6.4rem;
    }
    #calendar-body.cal-density-loose .cal-cell-list {
        gap: 0.2rem;
    }
}
.cal-cell-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

/* ── 事件条 / 圆点（手机上看圆点，桌面看文字） ── */
.cal-chip {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    width: 100%;
    min-width: 0;
    /* 瘦身一档：一条约 20px → 17px，一天三条的格子能省下近 10px */
    padding: 0.05rem 0.3rem;
    border: none;
    border-radius: 7px;
    background: rgba(24, 95, 87, 0.12);
    background: color-mix(in srgb, var(--cal-c, var(--brand)) 14%, transparent);
    color: var(--text);
    font-family: inherit;
    font-size: 0.72rem;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}
.cal-chip:hover {
    background: rgba(24, 95, 87, 0.22);
    background: color-mix(in srgb, var(--cal-c, var(--brand)) 26%, transparent);
}
.cal-dot {
    flex: 0 0 auto;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--cal-c, var(--brand));
}
.cal-chip-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: normal;
}
.cal-chip-text b {
    color: var(--muted);
    font-weight: 600;
}
.cal-chip.is-done .cal-chip-text {
    opacity: 0.6;
    text-decoration: line-through;
}
/* ── 日程的「完成」标记（月格 chip / 周视图全天条 / 时间块）──
   用 span 而不是按钮：这些父元素本身就是 `<button>`，button 里不能再嵌 button。
   未完成是淡淡的空心圈（可点），已完成是品牌色实心 ✓。 */
.cal-done-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 0.9rem;
    height: 0.9rem;
    margin-left: auto;      /* 推到行尾 */
    border-radius: 999px;
    border: 1px solid rgba(31, 39, 30, 0.28);
    color: rgba(31, 39, 30, 0.42);
    font-size: 0.62rem;
    line-height: 1;
    cursor: pointer;
}
.cal-done-mark:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.cal-done-mark[aria-pressed="true"] {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}
/* 时间块里贴在右上角（盖掉 .cal-block span 那条 ellipsis 规则） */
.cal-block .cal-done-mark {
    position: absolute;
    top: 2px;
    right: 3px;
    margin-left: 0;
    background: rgba(255, 255, 255, 0.72);
}
/* 紧凑档再瘦一档：别为了一个圈把月格撑高 */
.cal-density-compact .cal-done-mark {
    width: 0.75rem;
    height: 0.75rem;
    font-size: 0.52rem;
}
/* 「+N / 收起」：可点，就地展开当天全部日程（原来只是个 span，点它会冒泡成新建日程） */
.cal-more {
    align-self: flex-start;
    padding: 0 0.2rem;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--muted);
    font-family: inherit;
    font-size: 0.72rem;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.cal-more:hover {
    color: var(--brand);
    background: rgba(24, 95, 87, 0.08);
}

/* ── 周 / 日视图 ── */
.cal-week {
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.5);
}
.cal-week-head,
.cal-week-allday,
.cal-week-body {
    display: grid;
    grid-template-columns: 3.2rem repeat(7, minmax(0, 1fr));
}
.cal-week.is-single .cal-week-head,
.cal-week.is-single .cal-week-allday,
.cal-week.is-single .cal-week-body {
    grid-template-columns: 3.2rem minmax(0, 1fr);
}
.cal-week-head,
.cal-week-allday {
    border-bottom: 1px solid var(--line);
}
.cal-week-gutter {
    padding: 0.3rem 0.4rem;
    font-size: 0.72rem;
    color: var(--muted);
}
.cal-week-dow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    padding: 0.3rem 0.2rem;
    border-left: 1px solid var(--line);
    font-size: 0.85rem;
}
.cal-week-dow small {
    font-size: 0.7rem;
    color: var(--muted);
}
/* 周六 / 周日表头染色；写在 .is-today 之前，「今天」才能盖过它 */
.cal-week-dow.is-rest b,
.cal-week-dow.is-rest small {
    color: var(--accent);
}
/* 农历行写在 .is-rest 之后：周末表头统一把 small 染成暖色，这里再按节日/节气分开上色 */
.cal-week-dow small.cal-week-lunar {
    color: var(--muted);
    font-size: 0.66rem;
}
.cal-week-dow small.cal-week-lunar.is-festival {
    color: var(--accent);
    font-weight: 700;
}
.cal-week-dow small.cal-week-lunar.is-term {
    color: var(--brand);
}
.cal-week-dow.is-today b {
    color: var(--brand);
}
.cal-week-allday-cell {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-height: 1.9rem;
    padding: 0.15rem;
    border-left: 1px solid var(--line);
    cursor: pointer;
}
.cal-week-allday-cell.is-rest {
    background: rgba(205, 106, 45, 0.05);
}
.cal-week-body {
    max-height: 62vh;
    overflow-y: auto;
}
.cal-hour {
    display: block;
    height: 44px;
    padding-right: 0.4rem;
    font-size: 0.68rem;
    color: var(--muted);
    text-align: right;
}
.cal-week-col {
    position: relative;
    border-left: 1px solid var(--line);
    cursor: pointer;
}
.cal-week-col.is-rest {
    background: rgba(205, 106, 45, 0.03);
}
.cal-hour-line {
    display: block;
    height: 44px;
    border-bottom: 1px dashed rgba(31, 39, 30, 0.07);
    /* 每小时中间补一条更淡的线作为 30 分钟刻度参照（15 分钟间隔只有 11px，会显花） */
    background-image: linear-gradient(
        to bottom,
        transparent calc(50% - 1px),
        rgba(31, 39, 30, 0.045) calc(50% - 1px),
        rgba(31, 39, 30, 0.045) 50%,
        transparent 50%
    );
}
/* 拖动日程时的落位预览：虚线框 + 目标时间段，松手前就能看到会落到哪 */
.cal-drop-ghost {
    position: absolute;
    left: 2px;
    right: 2px;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    padding: 0.2rem 0.35rem;
    border: 2px dashed var(--brand);
    border-radius: 7px;
    background: rgba(24, 95, 87, 0.13);
    color: var(--brand);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.25;
    /* 不参与命中判定，否则会挡住 dragover 的目标元素 */
    pointer-events: none;
    overflow: hidden;
}
.cal-block {
    position: absolute;
    left: 2px;
    right: 2px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0.2rem 0.35rem;
    border: none;
    border-left: 3px solid var(--cal-c, var(--brand));
    border-radius: 7px;
    background: rgba(24, 95, 87, 0.14);
    background: color-mix(in srgb, var(--cal-c, var(--brand)) 16%, transparent);
    font-family: inherit;
    font-size: 0.72rem;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
}
.cal-block b {
    color: var(--muted);
    font-weight: 600;
}
.cal-block span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-block.is-done {
    opacity: 0.55;
}

/* ── 议程视图 ── */
.cal-agenda {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cal-agenda-day {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.cal-agenda-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.92rem;
    color: var(--text);
}
/* 议程里每天标题后面的农历 / 节日 */
.cal-agenda-lunar {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
}
.cal-agenda-lunar.is-festival {
    color: var(--accent);
    font-weight: 700;
}
.cal-agenda-lunar.is-term {
    color: var(--brand);
}
/* 休息日整行标题染色；写在 .is-today 之前，「今天」才能盖过它 */
.cal-agenda-day.is-rest .cal-agenda-date {
    color: var(--accent);
}
.cal-agenda-day.is-today .cal-agenda-date {
    color: var(--brand);
}
.cal-today-tag {
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
}
/* 议程视图一天一行、横向有空间，所以直接显示节日名 /「上班」，比月视图的单个字信息量更大 */
.cal-agenda-tag {
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.cal-agenda-tag.is-holiday {
    background: rgba(205, 106, 45, 0.16);
    color: var(--accent);
}
.cal-agenda-tag.is-swap {
    background: rgba(31, 39, 30, 0.08);
    color: var(--muted);
}
.cal-agenda-add {
    margin-left: auto;
    padding: 0.1rem 0.6rem;
}
.cal-agenda-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.cal-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line);
    border-left: 4px solid var(--cal-c, var(--brand));
    border-radius: 12px;
    background: var(--panel-strong);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cal-card:hover {
    border-color: var(--brand);
    box-shadow: 0 2px 10px rgba(24, 95, 87, 0.1);
}
.cal-card.is-done {
    opacity: 0.6;
}
.cal-card.is-done strong {
    text-decoration: line-through;
}
.cal-card-time {
    flex: 0 0 auto;
    min-width: 3.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}
.cal-card-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.cal-card-main strong {
    overflow: hidden;
    font-size: 0.93rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-card-main small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-card-done {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border-radius: 50%;
}
.cal-empty {
    padding: 2rem 1rem;
    color: var(--muted);
    text-align: center;
}

/* ── 新建 / 编辑抽屉（桌面紧凑版）──
   笔记本的瓶颈是「高度」，富余的是「宽度」，所以：抽屉放宽 → 字段名挪到控件左侧 →
   两栏并排 → 压缩间距。目标是把 13 个字段压进一屏，不用滚动就能看到保存按钮。 */
.calendar-dialog {
    width: min(46rem, calc(100vw - 3rem));
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    /* 内边距交给 .stack-form，这样 sticky 的操作栏才能严丝合缝地贴住抽屉底边 */
    padding: 0;
}
.calendar-dialog .stack-form {
    padding: 1.5rem 1.5rem 0;
    gap: 0.7rem;
}
.calendar-dialog h3 {
    margin: 0 0 0.2rem;
    font-size: 1.15rem;
}
/* 字段名挪到控件左边：横向排比纵向排每行省下约 27px，13 个字段就是 350px */
.calendar-dialog label:not(.cal-check) {
    display: grid;
    grid-template-columns: 3.75rem minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
}
.calendar-dialog .cal-field-label {
    font-weight: 600;
    white-space: nowrap;
}
/* 备注这类多行控件：字段名和文本域首行对齐，而不是垂直居中 */
.calendar-dialog .cal-field-top {
    align-items: start;
}
.calendar-dialog .cal-field-top .cal-field-label {
    padding-top: 0.62rem;
}
.calendar-dialog .cal-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.7rem;
}
/* 标题 + 全天开关：开关只占自身宽度，不跟标题平分 */
.calendar-dialog .cal-field-row.is-inline {
    grid-template-columns: minmax(0, 1fr) auto;
}
.calendar-dialog .cal-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
}
/* 只有「标题 + 全天」这一行需要禁止换行；「应用范围」里那两条较长，要允许折行 */
.calendar-dialog .cal-field-row.is-inline .cal-check {
    white-space: nowrap;
}
/* 复选框 / 单选框不该继承全局 input 的 width:100% 与内边距 */
.calendar-dialog .cal-check input[type="checkbox"],
.calendar-dialog .cal-check input[type="radio"] {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    min-width: 1.05rem;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    accent-color: var(--brand);
}
/* 时间行：日期 · 时间 —— 至 —— 日期 · 时间。用 flex 是因为切到「全天」时
   两个时间框会被隐藏，flex 会自动让日期撑开，不需要换 grid 模板 */
.calendar-dialog .cal-time-inputs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}
.calendar-dialog .cal-time-inputs input[type="date"] {
    flex: 1 1 0;
    min-width: 0;
}
.calendar-dialog .cal-time-inputs input[type="time"] {
    flex: 0 1 6.4rem;
    min-width: 0;
}
/* 桌面端：文本框 + 时钟按钮包成一个整体，宽度和手机端的原生 time 框接近 */
.calendar-dialog .cal-time-inputs .cal-time-pair {
    position: relative;
    display: flex;
    flex: 0 1 7.2rem;
    min-width: 0;
}
.calendar-dialog .cal-time-text {
    width: 100%;
    padding-right: 1.85rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.cal-clock-btn {
    position: absolute;
    top: 50%;
    right: 0.28rem;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--muted);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background 0.15s;
    /* 用遮罩把图标染成按钮背景色，hover 时直接换 background 就能变色 */
    -webkit-mask-image: var(--clock-icon);
    mask-image: var(--clock-icon);
    -webkit-mask-size: 15px 15px;
    mask-size: 15px 15px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.cal-clock-btn:hover {
    background: var(--brand);
}
/* 时长：结束时刻由它推出来，所以留出比普通下拉更明显的宽度 */
.calendar-dialog .cal-time-inputs select.cal-duration-select {
    flex: 0 1 6.8rem;
    min-width: 5.2rem;
    width: auto;
}
.calendar-dialog .cal-duration-custom {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 1 8.6rem;
    min-width: 0;
}
.calendar-dialog .cal-duration-custom input[type="number"] {
    flex: 1 1 3.6rem;
    min-width: 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.calendar-dialog .cal-unit {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.8rem;
    white-space: nowrap;
}

.cal-time-sep {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.82rem;
}
/* 抽屉里的控件比全局样式矮一档，桌面端不会显得笨重（手机端会还原） */
.calendar-dialog input,
.calendar-dialog select,
.calendar-dialog textarea {
    padding: 0.6rem 0.85rem;
    border-radius: 12px;
}
/* 底部操作栏 sticky 贴底：即使内容真的超长，保存按钮也始终在视野里。
   负外边距让它的白色背景铺满抽屉两侧，内容不会从缝隙里透出来 */
.calendar-dialog .dialog-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 -1.5rem;
    padding: 0.7rem 1.5rem 1.1rem;
    background: #fff;
    box-shadow: 0 -10px 14px -10px rgba(0, 0, 0, 0.14);
}

/* ── 「更多选项」折叠区：备注 / 颜色 / 范围 ── */
.cal-adv-toggle {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0.85rem;
    border: 1px dashed rgba(31, 39, 30, 0.22);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.5);
    color: var(--muted);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.cal-adv-toggle:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.cal-adv-caret {
    display: inline-block;
    font-size: 0.7rem;
    transition: transform 0.18s ease;
}
.cal-adv-toggle.is-open .cal-adv-caret {
    transform: rotate(90deg);
}
.cal-adv-badge {
    margin-left: auto;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(24, 95, 87, 0.12);
    color: var(--brand);
    font-size: 0.74rem;
}
/* 展开后内容看得见，就不用再提示「已填 N 项」了 */
.cal-adv-toggle.is-open .cal-adv-badge {
    display: none;
}
.cal-adv-panel {
    display: grid;
    gap: 0.7rem;
}
.cal-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.cal-swatch {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 2px solid rgba(31, 39, 30, 0.15);
    border-radius: 50%;
    background: #fff;
    color: var(--muted);
    font-family: inherit;
    font-size: 0.68rem;
    cursor: pointer;
}
.cal-swatch.active {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(24, 95, 87, 0.18);
}
.cal-hint-inline {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

/* 重复日程的「只改这一次」范围选择 */
.cal-scope {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.6rem 0.7rem;
    border: 1px dashed rgba(31, 39, 30, 0.22);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
}
.cal-scope .cal-check {
    font-size: 0.88rem;
}
/* 被单独调整过的实例：加一圈内描边与虚线边框做区分 */
.cal-chip.is-overridden,
.cal-block.is-overridden {
    box-shadow: inset 0 0 0 1px rgba(31, 39, 30, 0.22);
}
.cal-card.is-overridden {
    border-style: dashed;
}

/* ── 重复标记与拖拽改期 ── */
/* 每条都带一个 ↻ 会很吵，压淡一些；「重复」的说明改由 chip 的 tooltip 承担 */
.cal-repeat {
    margin-right: 0.15rem;
    color: var(--muted);
    font-size: 0.9em;
    font-style: normal;
    opacity: 0.5;
}
.cal-chip:hover .cal-repeat {
    opacity: 1;
}
.cal-chip,
.cal-block {
    cursor: grab;
}
.cal-chip:active,
.cal-block:active {
    cursor: grabbing;
}
.cal-chip.is-dragging,
.cal-block.is-dragging,
.cal-card.is-dragging {
    opacity: 0.4;
}
.cal-cell.is-drop-target,
.cal-week-allday-cell.is-drop-target,
.cal-week-col.is-drop-target {
    background: rgba(24, 95, 87, 0.14);
    box-shadow: inset 0 0 0 2px var(--brand);
}

/* ── 手机适配 ── */
@media (max-width: 760px) {
    .calendar-toolbar {
        justify-content: center;
        gap: 0.5rem;
    }
    .calendar-hint {
        display: none;
    }
    /* 操作提示、密度都是桌面端概念：手机格子只显示圆点，放不下也没必要 */
    .cal-hint-wrap,
    .cal-density-btn {
        display: none;
    }

    /* 月视图：格子只显示圆点，避免 7 列塞不下文字 */
    .cal-cell {
        align-items: center;
        gap: 0.15rem;
        min-height: 3.6rem;
        padding: 0.25rem 0.15rem;
    }
    .cal-cell-day {
        font-size: 0.78rem;
    }
    /* 手机格子窄，农历行再缩一档（节日名最长 3 个字也要塞得下） */
    .cal-cell-lunar {
        font-size: 0.6rem;
    }
    /* 日期与农历在手机上是居中的两行（桌面才是左上角对齐） */
    .cal-cell-head {
        justify-content: center;
    }
    .cal-cell-head .cal-cell-lunar {
        text-align: center;
    }
    /* 手机上格子窄且矮，「休 / 班」角标要缩到最小才塞得下 */
    .cal-day-tag {
        margin-left: 0.1rem;
        font-size: 0.55rem;
    }
    .cal-cell-list {
        flex-direction: row;
        justify-content: center;
        gap: 0.14rem;
    }
    .cal-chip {
        width: auto;
        justify-content: center;
        padding: 0.1rem;
        background: none;
    }
    .cal-chip-text {
        display: none;
    }
    .cal-dot {
        width: 0.5rem;
        height: 0.5rem;
    }
    .cal-more {
        padding-left: 0;
        font-size: 0.62rem;
    }

    /* 周视图在手机上只显示一天，压缩左侧时间轴 */
    .cal-week-head,
    .cal-week-allday,
    .cal-week-body {
        grid-template-columns: 2.4rem minmax(0, 1fr);
    }
    .cal-hour {
        padding-right: 0.25rem;
        font-size: 0.62rem;
    }
    .cal-card {
        gap: 0.5rem;
        padding: 0.7rem 0.6rem;
    }
    .cal-card-time {
        min-width: 2.9rem;
    }

    /* 抽屉改成底部弹出，拇指可达 */
    .calendar-dialog {
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: auto;
        min-width: 0;
        max-height: 88vh;
        padding: 0;
        border-radius: 20px 20px 0 0;
        transform: none;
    }
    /* 手机上回到原有的单列纵向布局（字段名在控件上方）+ 可滚动，不套用桌面的紧凑排版 */
    .calendar-dialog .stack-form {
        padding: 1.25rem 1rem 0;
        gap: 1rem;
    }
    .calendar-dialog label:not(.cal-check) {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.45rem;
    }
    .calendar-dialog .cal-field-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.85rem;
    }
    .calendar-dialog .cal-field-row.is-inline {
        grid-template-columns: minmax(0, 1fr);
    }
    .calendar-dialog .cal-field-top .cal-field-label {
        padding-top: 0;
    }
    /* 触控目标还原到舒适尺寸 */
    .calendar-dialog input,
    .calendar-dialog select,
    .calendar-dialog textarea {
        padding: 0.75rem 0.9rem;
    }
    /* 时间行排成两行，中间用「至」分隔，避免 4 个控件挤在一行 */
    .calendar-dialog .cal-time-inputs {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.5rem;
    }
    .cal-time-sep {
        grid-column: 1 / -1;
        text-align: center;
        font-size: 0.75rem;
    }
    .calendar-dialog .dialog-actions {
        margin: 0 -1rem;
        padding: 0.7rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ══════════════════ 人物档案（人情往来簿） ══════════════════ */

.people-head {
    align-items: center;
    margin-bottom: 0.5rem;
}
.people-head h2 {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.25;
}
.person-head-left {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    min-width: 0;
}
/* 「已归档」开关按下时的状态（用 id 限定，避免定义一个通用的 .ghost-button.active） */
#people-archived-toggle.active {
    border-color: var(--brand);
    background: rgba(24, 95, 87, 0.1);
    color: var(--brand);
    font-weight: 600;
}

/* 搜索 + 标签筛选 */
.people-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}
.people-toolbar input[type="search"] {
    flex: 1 1 14rem;
    min-width: 10rem;
    padding: 0.45rem 0.7rem;
    border-radius: 12px;
}
.people-tag-filters {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.people-tag-chip {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.82rem;
}
.people-tag-chip i {
    margin-left: 0.3rem;
    font-style: normal;
    color: var(--muted);
    font-size: 0.72rem;
}
.people-tag-chip.active {
    border-color: var(--brand);
    background: rgba(24, 95, 87, 0.1);
    color: var(--brand);
    font-weight: 600;
}
.people-tag-chip.active i {
    color: var(--brand);
}

/* 人物卡片 */
.people-list {
    display: grid;
    gap: 0.6rem;
}
.people-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.75rem 0.9rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.people-card:hover {
    border-color: var(--brand);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(24, 95, 87, 0.12);
}
.people-card:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.people-card.is-archived {
    opacity: 0.72;
}
.people-card-main {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}
.people-card-title {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.people-card-title strong {
    font-size: 1.02rem;
}
.people-card-bits,
.people-card-last {
    font-size: 0.84rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
}
.people-card-arrow {
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1;
}
.people-tag-row {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}
.people-tag {
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: rgba(24, 95, 87, 0.1);
    color: var(--brand);
    font-size: 0.76rem;
}
.people-badge {
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(31, 39, 30, 0.14);
    color: var(--muted);
    font-size: 0.72rem;
}
.people-badge.is-archived {
    border-color: rgba(205, 106, 45, 0.4);
    color: var(--accent);
}

/* 详情 */
.person-meta {
    display: grid;
    gap: 0.2rem;
    margin-bottom: 0.9rem;
}
.person-meta p {
    margin: 0;
}
.person-notes-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}
.person-notes-head .eyebrow {
    margin: 0;
}
.person-notes {
    display: grid;
    gap: 0.5rem;
}
.person-note {
    display: grid;
    gap: 0.3rem;
    padding: 0.7rem 0.85rem;
}
.person-note-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.person-note-head strong {
    font-variant-numeric: tabular-nums;
}
.person-note-head .subtle {
    font-size: 0.82rem;
}
.person-note-content {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
}
.person-note-next {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.25rem;
    border-top: 1px dashed rgba(31, 39, 30, 0.1);
    color: var(--brand);
    font-size: 0.84rem;
}
.person-note-next .ghost-button {
    padding: 0.1rem 0.5rem;
    font-size: 0.78rem;
}
.person-note-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
}
.person-note-actions .ghost-button {
    padding: 0.1rem 0.55rem;
    font-size: 0.8rem;
}
.birthday-preview {
    margin: -0.3rem 0 0.2rem;
    font-size: 0.82rem;
    line-height: 1.4;
}

/* 人物表单里的"字段块"：外观对齐 label（label 里塞多个按钮会串点击，所以标签选择器用 div） */
.field-block {
    display: grid;
    gap: 0.45rem;
    font-weight: 600;
}
.field-label {
    display: block;
}
/* 关系标签：内置预设 + 用过的自定义，点选切换 */
.tag-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
/* 列表里的标签 chip 会带一个计数（筛选条用） */
.tag-chip i {
    margin-left: 0.35rem;
    font-style: normal;
    font-weight: 700;
    opacity: 0.7;
}
/* 分组版点选器的一行：小标题 + 若干 chip（脑图的「公共标签 / 本图标签」两组） */
.tag-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}
.tag-chip-row + .tag-chip-row {
    margin-top: 0.25rem;
}
/* 还没进词表的标签（一句话里写的 #新标签）：虚线圈，明确"保存时才建" */
.tag-chip.is-pending {
    border-style: dashed;
}
/* 表格名称格里的小标签：比表单里的小一号，避免把行撑高 */
.tag-chip.is-mini {
    padding: 0.1rem 0.5rem;
    font-size: 0.76rem;
}
.item-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}
/* 物品表单里的标签字段：与 grid 里的其它字段等宽 */
.item-tag-field {
    grid-column: 1 / -1;
}
/* 按标签筛选条：chips 一行排开，模式开关靠右 */
/* 脑图节点编辑栏里的标签：允许换行，别把这一条工具栏撑到屏幕外 */
.mind-tag-picker {
    max-width: 42vw;
    align-items: center;
}
.mind-tag-picker .tag-chip {
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
}
@media (max-width: 760px) {
    .mind-tag-picker {
        max-width: 100%;
    }
}
/* 流水行上的标签：跟在主信息后面，不抢金额的位置 */
.finance-record-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.15rem;
}
.tag-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.tag-filter-bar .filter-bar-label {
    flex: 1 1 100%;
}
.tag-filter-bar .tag-picker {
    flex: 1 1 auto;
}
@media (max-width: 760px) {
    /* 触屏：筛选条的模式开关撑一撑，别挤成小方块 */
    .tag-filter-bar #item-tag-mode {
        flex: 1 1 100%;
        min-height: 2.5rem;
    }
}
.tag-chip {
    padding: 0.3rem 0.8rem;
    border: 1px solid rgba(31, 39, 30, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--text);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.tag-chip:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.tag-chip.active {
    border-color: var(--brand);
    background: rgba(24, 95, 87, 0.12);
    color: var(--brand);
    font-weight: 700;
}
.tag-chip:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
@media (max-width: 760px) {
    /* 触屏：标签chip按触控尺寸放大，避免点不准 */
    .tag-chip {
        padding: 0.45rem 0.9rem;
        font-size: 0.88rem;
    }
}

/* ── 标签管理页：一行一个标签（名字 + 用了几人 + 改名/删除）── */
.tag-def-list {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.7rem;
}
.tag-def-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
}
.tag-def-name {
    font-weight: 600;
    word-break: break-all;
}
.tag-def-count {
    padding: 0;
    font-size: 0.82rem;
}
.tag-def-actions {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
    flex: 0 0 auto;
}
@media (max-width: 760px) {
    /* 手机上名字与按钮挤不下一行：按钮掉到第二行并撑到触控尺寸 */
    .tag-def-row {
        flex-wrap: wrap;
    }
    .tag-def-actions {
        width: 100%;
        margin-left: 0;
    }
    .tag-def-actions .ghost-button {
        flex: 1;
        padding: 0.5rem 0.85rem;
        min-height: 2.5rem;
    }
}

/* 生日簿 */
.birthday-hint {
    margin: 0 0 0.7rem;
    font-size: 0.84rem;
}
.birthday-list {
    display: grid;
    gap: 0.5rem;
}
.birthday-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.7rem 0.9rem;
    flex-wrap: wrap;
}
.birthday-card.is-today {
    border-color: var(--brand);
    background: rgba(24, 95, 87, 0.06);
}
.birthday-main {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}
.birthday-main strong {
    font-size: 1rem;
}
.birthday-main .subtle {
    font-size: 0.82rem;
}
.birthday-lunar {
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 600;
}
.birthday-when {
    display: grid;
    justify-items: end;
    gap: 0.1rem;
    margin-left: auto;
}
.birthday-days {
    color: var(--brand);
    font-weight: 700;
}
.birthday-card.is-today .birthday-days {
    color: var(--accent);
}
.birthday-when .subtle {
    font-size: 0.78rem;
}

@media (max-width: 760px) {
    /* 手机上卡片竖排，日期不再右对齐 */
    .birthday-card {
        align-items: flex-start;
    }
    .birthday-when {
        justify-items: start;
        margin-left: 0;
    }
    .people-toolbar input[type="search"] {
        flex: 1 1 100%;
    }
}

/* ══════════════════ 人物：提醒接入 / 列表排序 / 详情汇总 ══════════════════ */

/* 首页「人物待办」：只在有到期的约定或近期生日时才出现（没有时 JS 直接 hidden，不占地方） */
.home-people {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
}
.home-people-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}
.home-people-head .eyebrow,
.home-people-group .eyebrow {
    margin: 0;
}
.home-people-group + .home-people-group {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--line);
}
.home-people-group .eyebrow {
    margin-bottom: 0.35rem;
}
.home-person-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0;
    flex-wrap: wrap;
}
.home-person-main {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
    min-width: 0;
}
.home-person-name {
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(24, 95, 87, 0.3);
    text-underline-offset: 3px;
}
.home-person-name:hover {
    text-decoration-color: currentColor;
}
.home-person-when {
    margin-left: auto;
    color: var(--accent);
    font-size: 0.86rem;
    font-weight: 700;
}
/* 约定行没有 .home-person-when，按钮自己顶到右边 */
.home-person-row .ghost-button {
    margin-left: auto;
}
.home-person-row .home-person-when + .ghost-button {
    margin-left: 0;
}

/* 列表排序下拉：与搜索框同行，不参与输入框的 100% 拉伸 */
.people-sort {
    flex: 0 0 auto;
    width: auto;
    padding: 0.45rem 0.6rem;
    border-radius: 12px;
    font-size: 0.88rem;
}

/* 久未联系：卡片左侧一条暖色提示 + 标题旁的小标签 */
.people-card.is-stale {
    border-left: 3px solid rgba(205, 106, 45, 0.55);
}
.people-badge.is-stale {
    border-color: rgba(205, 106, 45, 0.4);
    color: var(--accent);
}

/* 详情汇总条：往来几次 / 最近一次 / 下次约定 */
.person-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.75rem;
    margin-bottom: 0.45rem;
    font-size: 0.9rem;
    font-weight: 600;
}
.person-summary span {
    color: var(--brand);
}

/* 已处理的约定：把内容划掉提示"办完了"，但记录保留、按钮仍可点 */
.person-note-next.is-done > span:first-child {
    color: var(--muted);
    text-decoration: line-through;
}

@media (max-width: 760px) {
    /* 手机上排序下拉独占一行；首页人物行的按钮撑满便于点按 */
    .people-sort {
        flex: 1 1 100%;
    }
    .home-person-row {
        align-items: flex-start;
    }
    .home-person-when,
    .home-person-row .ghost-button,
    .home-person-row .home-person-when + .ghost-button {
        margin-left: 0;
    }
    .home-person-row .ghost-button {
        width: 100%;
        padding: 0.45rem 0.85rem;
        min-height: 2.5rem;
    }
}

/* ══════════════════ 人物：批量操作 / 随礼金额 / 日程挂人物 ══════════════════ */

/* 「批量」按钮按下时的状态（与 #people-archived-toggle.active 同一套写法） */
#people-batch-toggle.active {
    border-color: var(--brand);
    background: rgba(24, 95, 87, 0.1);
    color: var(--brand);
    font-weight: 600;
}

.people-batch-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(24, 95, 87, 0.06);
}
.people-batch-bar #people-batch-count {
    padding: 0;
    font-weight: 600;
}
.people-batch-bar button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* 多选模式：卡片左侧一个勾选圈，整张卡片点哪都能勾 */
.people-card-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    border: 1.5px solid rgba(31, 39, 30, 0.25);
    border-radius: 50%;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
}
.people-card.is-checked {
    border-color: var(--brand);
    background: rgba(24, 95, 87, 0.08);
}
.people-card.is-checked .people-card-check {
    border-color: var(--brand);
    background: var(--brand);
}
/* 多选模式下不显示"进入详情"的箭头，避免误解成点了会跳转 */
.people-list.is-batch .people-card-arrow {
    display: none;
}

/* 随礼 / 收礼：表单里方向 + 金额并排 */
.note-amount-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.note-amount-row select {
    flex: 0 0 auto;
    width: auto;
    min-width: 5.5rem;
}
.note-amount-row input {
    flex: 1 1 auto;
    min-width: 0;
}

/* 时间轴里的金额标签：送出用品牌色、收到用暖色，一眼分得开 */
.person-note-amount {
    justify-self: start;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(24, 95, 87, 0.1);
    color: var(--brand);
    font-size: 0.82rem;
    font-weight: 700;
}
.person-note-amount.is-in {
    background: rgba(205, 106, 45, 0.14);
    color: var(--accent);
}

/* 日程卡片上的「来自 张姨」：可点，跳到人物详情 */
.cal-card-person {
    margin-top: 0.15rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand);
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(24, 95, 87, 0.3);
    text-underline-offset: 3px;
}
.cal-card-person:hover {
    text-decoration-color: currentColor;
}

@media (max-width: 760px) {
    /* 手机上批量条的按钮撑开，便于点按 */
    .people-batch-bar button {
        flex: 1 1 auto;
        padding: 0.45rem 0.85rem;
        min-height: 2.5rem;
    }
    .people-batch-bar #people-batch-count {
        flex: 1 1 100%;
    }
}

/* ══════════════════ 财务（家庭账本）══════════════════ */

/* 收支两色：支出用暖色（--accent），收入用品牌绿（--brand） */
.is-income {
    color: var(--brand);
}
.is-expense {
    color: var(--accent);
}

/* 一句话记账 */
.finance-quick {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.35rem;
}
.finance-quick input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.6rem 0.85rem;
    border-radius: 14px;
}
.finance-quick button {
    flex: 0 0 auto;
}
.finance-quick-preview {
    margin: 0 0 0.7rem;
    padding: 0;
    font-size: 0.86rem;
    min-height: 1.2em;
}

/* 本月三个数 + 预算进度 */
.finance-summary {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}
.finance-stat {
    display: grid;
    gap: 0.1rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
    min-width: 6.5rem;
}
.finance-stat span {
    font-size: 0.78rem;
    padding: 0;
}
.finance-stat strong {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}
.finance-budget-bar {
    flex: 1 1 14rem;
    min-width: 12rem;
    display: grid;
    gap: 0.35rem;
}
.finance-budget-text {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.84rem;
    flex-wrap: wrap;
}
.finance-budget-bar.is-over .finance-budget-text {
    color: var(--accent);
    font-weight: 600;
}
.finance-budget-bar .progress-track.compact,
.finance-budget-bar .progress-track {
    width: 100%;
    height: 8px;
}

/* 到账单日 */
.finance-due {
    margin-bottom: 0.7rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid rgba(205, 106, 45, 0.35);
    border-radius: 14px;
    background: rgba(205, 106, 45, 0.07);
}
.finance-due .eyebrow {
    margin: 0 0 0.3rem;
}
.finance-due-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.2rem 0;
}
.finance-due-main {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
    min-width: 0;
}
.finance-due-main .subtle {
    padding: 0;
    font-size: 0.82rem;
}

/* 筛选行 */
.finance-filters {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}
.finance-filters select,
.finance-filters input[type="search"] {
    width: auto;
    min-width: 7rem;
    padding: 0.35rem 0.55rem;
    border-radius: 12px;
    font-size: 0.86rem;
}
.finance-filters input[type="search"] {
    flex: 1 1 10rem;
}
.finance-month-label {
    font-size: 0.95rem;
    min-width: 7.5rem;
    text-align: center;
}

/* 流水列表 */
.finance-record-list {
    display: grid;
    gap: 0.7rem;
}
.finance-day {
    display: grid;
    gap: 0.3rem;
}
.finance-day-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.finance-day-head .subtle {
    padding: 0;
    font-size: 0.8rem;
}
.finance-record {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
}
.finance-record:hover {
    border-color: var(--brand);
}
.finance-record-main {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
    min-width: 0;
}
.finance-record-main .subtle {
    padding: 0;
    font-size: 0.82rem;
}
.finance-record-amount {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 账户 */
.finance-account-list {
    display: grid;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
}
.finance-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
}
.finance-account-main {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}
.finance-account-main .subtle {
    padding: 0;
    font-size: 0.82rem;
}
.finance-account-balance {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.finance-sub-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}
.finance-sub-head .eyebrow {
    margin: 0;
}
.finance-sub-head .subtle {
    padding: 0;
    font-size: 0.82rem;
}

/* 固定账单 */
.finance-recurring-list {
    display: grid;
    gap: 0.4rem;
}
.finance-recurring {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}
.finance-recurring.is-off {
    opacity: 0.6;
}
.finance-recurring-main {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}
.finance-recurring-main .subtle {
    padding: 0;
    font-size: 0.82rem;
}
.finance-recurring-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* 报表 */
.finance-report-body {
    display: grid;
    gap: 1rem;
}
.finance-report-stats {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.finance-report-block {
    display: grid;
    gap: 0.4rem;
}
.finance-report-block .eyebrow {
    margin: 0;
}
.finance-bar-row {
    display: grid;
    grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr) 5.5rem;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.86rem;
}
.finance-bar-label {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    min-width: 0;
}
.finance-bar-label i {
    padding: 0;
    font-size: 0.74rem;
    font-style: normal;
}
.finance-bar {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: rgba(31, 39, 30, 0.06);
    overflow: hidden;
}
.finance-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), #b8551f);
}
.finance-bar.is-over i {
    background: linear-gradient(135deg, var(--danger), #7d2340);
}
.finance-bar-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* 近 6 个月：两根柱子（收入 / 支出） */
.finance-trend {
    display: flex;
    align-items: flex-end;
    gap: 0.9rem;
    height: 9rem;
}
.finance-trend-col {
    flex: 1 1 0;
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    height: 100%;
    grid-template-rows: 1fr auto;
}
.finance-trend-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    width: 100%;
    height: 100%;
    justify-content: center;
}
.finance-trend-bars i {
    display: block;
    width: 30%;
    min-height: 2px;
    border-radius: 4px 4px 0 0;
}
.finance-trend-bars i.is-income {
    background: var(--brand);
}
.finance-trend-bars i.is-expense {
    background: var(--accent);
}
.finance-trend-col .subtle {
    padding: 0;
    font-size: 0.76rem;
}

/* 预算抽屉：分类输入两列 */
.finance-budget-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.6rem;
}
.finance-budget-field {
    display: grid;
    gap: 0.3rem;
    font-size: 0.86rem;
}
.finance-budget-field input {
    padding: 0.45rem 0.6rem;
    border-radius: 12px;
}

@media (max-width: 760px) {
    /* 手机上统计块与筛选控件都撑开；报表的条改成两行 */
    .finance-stat {
        flex: 1 1 30%;
        min-width: 0;
    }
    .finance-filters select,
    .finance-filters input[type="search"] {
        flex: 1 1 100%;
        width: 100%;
    }
    .finance-quick {
        flex-wrap: wrap;
    }
    .finance-quick button {
        width: 100%;
        padding: 0.5rem 0.85rem;
        min-height: 2.5rem;
    }
    .finance-bar-row {
        grid-template-columns: minmax(0, 1fr) 5rem;
        grid-template-areas: "label value" "bar bar";
        row-gap: 0.2rem;
    }
    .finance-bar-label {
        grid-area: label;
    }
    .finance-bar {
        grid-area: bar;
    }
    .finance-bar-value {
        grid-area: value;
    }
    .finance-due-row .ghost-button,
    .finance-recurring-actions .ghost-button {
        flex: 1 1 auto;
        padding: 0.45rem 0.85rem;
        min-height: 2.4rem;
    }
}

/* ══════════════════ 备忘录：条目类型（人物 / 备忘）══════════════════ */

/* 类型筛选：全部 / 人物 / 备忘 */
.people-kind-filters,
.kind-picker {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.people-kind-filters {
    margin-right: 0.2rem;
}
.kind-chip {
    padding: 0.3rem 0.85rem;
    border: 1px solid rgba(31, 39, 30, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.5;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.kind-chip:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.kind-chip.active {
    border-color: var(--brand);
    background: rgba(24, 95, 87, 0.12);
    color: var(--brand);
    font-weight: 700;
}
.kind-chip:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* 备忘条目：人物专属字段（称呼/生日/电话）整块隐藏 */
.stack-form.is-memo .person-only-field {
    display: none;
}

/* 批量打标签弹窗：混选时按「人物标签 / 备忘标签」分成两组竖排 */
#people-batch-tag-picker {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}
#people-batch-tag-picker .eyebrow {
    margin: 0;
}

/* 备忘的「备忘」小标签，和人物条目标开 */
.people-badge.is-memo {
    border-color: rgba(53, 96, 161, 0.4);
    color: #3560a1;
}

/* 备忘内容：默认折叠（这类条目常放账号密码，列表页不该一眼全暴露），点「显示内容」再看 */
.memo-body {
    margin: 0.15rem 0 0;
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    background: rgba(31, 39, 30, 0.04);
    font-size: 0.86rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.memo-empty {
    font-size: 0.84rem;
}
.memo-reveal {
    align-self: flex-start;
    padding: 0.1rem 0.55rem;
    font-size: 0.78rem;
}

/* ── 手机顶栏：折叠主菜单，常驻常用入口 ──
   ≤980px 那套是把「7 个分组 + 当前分组二级项」全平铺成 3 列格子 —— 平板上合适，
   普通手机上顶栏要占 5 行。这里在 ≤760px 把它收起来：
   默认只留「☰ 菜单 + 常用入口 + 面包屑 + 头像」两行，主菜单与「常用操作」点开才出现。
   展开后仍是那套 3 列平铺（本段只改显示时机，不重写布局）。 */
.app-menu-toggle,
.app-quick-nav {
    display: none;
}

@media (max-width: 760px) {
    .app-menu-toggle {
        display: inline-flex;
        flex: 0 0 auto;
        white-space: nowrap;
    }
    /* 折叠后「当前在哪」全靠面包屑，长名字（物品 / 提醒中心）要能省略而不是把顶栏撑开 */
    .app-menu-left {
        min-width: 0;
    }
    .app-menu-left .app-breadcrumb {
        min-width: 0;
        flex: 0 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 常用入口独占一行：order 把它排到「菜单 / 面包屑 / 头像」那一行之后 */
    .app-quick-nav {
        display: flex;
        flex: 1 1 100%;
        order: 9;
        gap: 0.4rem;
        overflow-x: auto;
        padding-bottom: 0.1rem;
        scrollbar-width: none;
    }
    .app-quick-nav::-webkit-scrollbar {
        display: none;
    }
    .app-quick-nav .app-nav-button {
        flex: 0 0 auto;
        min-width: 0;
        min-height: 2.6rem;
        padding: 0.5rem 0.9rem;
        border-radius: 14px;
        font-size: 0.9rem;
    }

    /* 主菜单默认收起 */
    .app-nav-groups {
        display: none;
    }
    .app-menu.is-open .app-nav-groups {
        display: grid;
        flex: 1 1 100%;
        order: 10;
    }

    /* 「常用操作」与顶栏统计也是次要信息：跟菜单一起收，展开时再出现 */
    .app-menu-utility,
    .app-menu-left .topbar-stats {
        display: none;
    }
    .app-menu.is-open .app-menu-utility {
        display: flex;
        flex: 1 1 100%;
    }
    .app-menu.is-open .app-menu-left .topbar-stats {
        display: flex;
        flex: 1 1 100%;
        margin-left: 0;
    }
    /* 「常用操作」只在菜单展开时出现；收起状态下连这一行都不占位 */
    .app-menu-right {
        grid-column: 1 / -1;
    }
    .app-menu:not(.is-open) .app-menu-right {
        display: none;
    }
}

/* ══════════ 三端适配兜底（手机 / 平板 / 电脑） ══════════
   这一段集中放在文件末尾：既盖住前面按桌面写的样式，也盖住前面各断点里的规则，源顺序靠后最省心。 */

/* 批量条 / 快捷查看条原来不换行，手机上按钮直接溢出屏幕（这两条在任何断点里都没有规则） */
.bulk-edit-bar,
.quick-filter-bar {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

/* 筛选历史浮层：原来高度无上限，记录一多就超出视口且不能滚动 */
#filter-history-panel {
    max-height: min(70vh, 26rem);
    overflow: auto;
    overscroll-behavior: contain;
}

/* Toast 顶部居中，避开刘海 / 状态栏 */
.toast {
    top: max(1.25rem, env(safe-area-inset-top, 0px));
}

/* ── 触屏设备按 hover 判断，而不是按宽度 ──
   关键点：iPad 横屏、触屏笔记本的宽度常常 >980px 甚至 >1200px，走的是桌面布局，
   只按宽度写媒体查询会漏掉它们。 */

/* 1. 「悬停才出现」的东西在触屏上必须常显，否则根本点不到
      （类别/位置后面那个「按此筛选」图标已删除，所以这里只剩脑图节点的勾选圈） */
@media (hover: none) {
    .mindmap-node .node-check {
        opacity: 1;
    }
}

/* 2. 宽屏触屏的导航：二级菜单靠 hover 展开，iPad 横屏上点不开 ——
   补一份与 ≤980px 相同的平铺规则（只对「没鼠标」的宽屏生效，桌面不受影响） */
@media (hover: none) and (min-width: 981px) {
    .app-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem;
        overflow: visible;
    }
    .app-nav-group,
    .app-nav-group-menu {
        display: contents;
    }
    .app-nav-group-menu {
        visibility: visible;
        opacity: 1;
        transform: none;
    }
    .app-nav-group:not(.is-current) .app-nav-button {
        display: none;
    }
    .app-nav-group-menu::before {
        display: none;
    }
    .app-nav-group-button,
    .app-nav-button {
        min-width: 0;
        width: 100%;
        min-height: 3rem;
        padding: 0.68rem 0.72rem;
        border-radius: 18px;
        font-size: 0.95rem;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
    }
}

/* 3. 触屏上的点击目标：这批小控件在自己的断点里都没有回补规则，手指点不准 */
@media (hover: none), (max-width: 760px) {
    .cal-nav-btn,
    .cal-today-btn,
    .cal-view-btn,
    .cal-hint-toggle,
    .cal-density-btn,
    .mind-density-btn,
    .tree-node-all,
    .table-actions .link-button,
    .clock-meridiem-btn {
        min-height: 2.5rem;
    }
    .mind-paint-swatch {
        width: 2rem;
        height: 2rem;
    }
    .tree-node-toggle {
        width: 2.2rem;
        height: 2.2rem;
    }
    .people-card-check {
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
        min-height: 2rem;
    }
    .tag-chip.is-mini {
        padding: 0.35rem 0.7rem;
        font-size: 0.84rem;
    }
    .mind-icon-option {
        padding: 0.6rem 0;
    }
}

/* ── 手机（≤760px）补两处 ── */
@media (max-width: 760px) {
    /* ≤980px 那段把分页按钮压到 1.8rem（比桌面 2.2rem 还小），手机上根本点不准 —— 恢复触控尺寸 */
    .pagination-bar .page-btn {
        min-width: 2.5rem;
        min-height: 2.5rem;
        padding: 0.4rem 0.5rem;
        font-size: 0.92rem;
    }
    /* 物品列表卡片化后 td 是 grid item，类别/位置 select 的 min-width:7rem 会把卡片撑破 */
    .inline-edit-select {
        min-width: 0;
        width: 100%;
    }
}

/* ── 手机端的「多选模式」──
   默认每张卡片不显示勾选框（手机上一行空间紧，日常是"看/改"，批量是少数场景），
   点头部「☑」或长按卡片进入后才显示勾选框 + 吸底批量条（`body.items-multi-select`）。
   桌面端不进这个模式，表格那列勾选框一直在。 */
.mobile-only {
    display: none;
}

@media (max-width: 760px) {
    .mobile-only {
        display: inline-flex;
    }
    /* 默认不收勾选框：第 1 列也就空着（用 minmax(0,0) 把那一列压掉，
       否则 1.8rem 的空白会让卡片左边多一块） */
    #items-body .item-row-card {
        grid-template-columns: minmax(0, 0) minmax(0, 1fr) minmax(0, 1fr) auto;
    }
    #items-body .item-row-card .col-select {
        display: none;
    }
    /* 进入多选：勾选框回来、列宽恢复；右侧编辑/删除收起（此时点卡片 = 勾选，不给误触的机会） */
    body.items-multi-select #items-body .item-row-card {
        grid-template-columns: 1.8rem minmax(0, 1fr) minmax(0, 1fr) auto;
        column-gap: 0.55rem;
    }
    body.items-multi-select #items-body .item-row-card .col-select {
        display: grid;
    }
    body.items-multi-select #items-body .item-row-card .col-actions {
        display: none;
    }
    /* 行内操作停用（状态下拉、-1 消耗）：手指一滑就改数据太危险 */
    body.items-multi-select #items-body .item-row-card .inline-edit-select,
    body.items-multi-select #items-body .item-row-card .consume-inline {
        pointer-events: none;
        opacity: 0.55;
    }
    /* 选中的卡片给个底色，光靠小勾选框不够明显 */
    body.items-multi-select #items-body .item-row-card:has(.item-batch-checkbox:checked) {
        border-color: rgba(24, 95, 87, 0.45);
        background: rgba(24, 95, 87, 0.07);
    }
    /* 批量条吸底：拇指区，随时可点；上面那两行摘要文字在手机上收掉 eyebrow，省高度 */
    body.items-multi-select #item-bulk-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 400;
        margin: 0;
        border-radius: 18px 18px 0 0;
        padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 251, 245, 0.99);
        box-shadow: 0 -8px 28px rgba(31, 39, 30, 0.16);
    }
    body.items-multi-select #item-bulk-bar .eyebrow {
        display: none;
    }
    body.items-multi-select #item-bulk-bar .settings-actions {
        gap: 0.4rem;
    }
    body.items-multi-select #item-bulk-bar .ghost-button {
        flex: 1 1 auto;
        min-height: 2.4rem;
        padding: 0.4rem 0.6rem;
        font-size: 0.84rem;
    }
    /* 给吸底条留出空间，免得最后一张卡片被压在下面 */
    body.items-multi-select #items-body {
        padding-bottom: 6rem;
    }
}

/* ── 点某一天之后：日历下方的「当天日程」面板 ──
   卡片复用议程视图的 .cal-card（calAgendaCardHtml），所以这里只管外层容器与标题行 */
.cal-day-panel {
    margin-top: 0.9rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(24, 95, 87, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
}
.cal-day-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.6rem;
}
/* h3 自带上下外边距，在 flex 行里不折叠 —— 必须归零，否则白撑一行 */
.cal-day-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0;
    font-size: 1rem;
}
.cal-day-title strong {
    font-size: 1.05rem;
}
.cal-day-lunar {
    font-size: 0.82rem;
    color: var(--muted);
}
.cal-day-lunar.is-festival {
    color: var(--accent);
    font-weight: 700;
}
.cal-day-lunar.is-term {
    color: var(--brand);
}
.cal-day-list {
    display: grid;
    gap: 0.5rem;
}
.cal-day-empty {
    margin: 0;
    font-size: 0.88rem;
}

@media (max-width: 760px) {
    .cal-day-panel {
        padding: 0.8rem;
        border-radius: 14px;
    }
}

/* ── 手机（≤760px）：日历头部只留图标按钮 ──
   「今天」「✨ 一句话」「＋ 新建日程」原来各占一大块文字，加上月份标题和翻页按钮，
   手机上这一行挤不下、换行又白占高度。这里把文字收起来、只留方形图标按钮
   （全称仍在 title / aria-label 里）。桌面端不受影响，照旧显示文字。 */
@media (max-width: 760px) {
    .cal-head .btn-text {
        display: none;
    }
    .cal-head .btn-icon {
        display: inline;
        margin-right: 0;
    }
    .cal-head .settings-actions {
        gap: 0.4rem;
    }
    /* 月份标题缩一号，给图标腾地方，争取整行放得下 */
    .cal-head #calendar-month-label {
        font-size: 1.1rem;
    }
    .cal-head .cal-today-btn,
    .cal-head .cal-nav-btn,
    .cal-head .settings-actions .ghost-button {
        min-width: 2.5rem;
        min-height: 2.5rem;
        padding: 0.2rem 0.4rem;
        justify-content: center;
        font-size: 1.05rem;
    }
}

/* ══════════ 财务头部：桌面保持原样，手机只留图标 ══════════
   与日历头部同一套 `.btn-icon` / `.btn-text` 两段式。
   ⚠️ 桌面上默认不显示这些图标：财务按钮里只有「＋ xxx」原本带 ＋（已标 `is-shown`），
   转账 / 上月 / 解析 / 设置预算 桌面都是纯文字，凭空加图标会改变桌面观感。 */
@media (max-width: 760px) {
    :is(#finance-records-view, #finance-accounts-view, #finance-report-view) .btn-text {
        display: none;
    }
    :is(#finance-records-view, #finance-accounts-view, #finance-report-view) .btn-icon {
        display: inline;
        margin-right: 0;
    }
    /* 不限定 .ghost-button：「＋ 记一笔」是主按钮（实心），它也要变成方形图标 */
    :is(#finance-records-view, #finance-accounts-view, #finance-report-view) .settings-actions button {
        min-width: 2.5rem;
        min-height: 2.5rem;
        padding: 0.2rem 0.4rem;
        justify-content: center;
        font-size: 1.05rem;
    }
    /* 整句式副标题（"这个月花了多少、还剩多少"）缩一号，别在手机上占两行 */
    :is(#finance-records-view, #finance-accounts-view, #finance-report-view) .section-head h2 {
        font-size: 1rem;
    }
    /* 筛选：三个下拉改两列 —— 原来各占整行，连搜索框一共四行，太高 */
    .finance-filters select {
        flex: 1 1 calc(50% - 0.3rem);
        min-width: 0;
        width: auto;
    }
    /* 一句话记账：「解析」收成图标并与输入框同行（原来 width:100% 独占一行） */
    .finance-quick {
        gap: 0.4rem;
    }
    .finance-quick input {
        flex: 1 1 auto;
        min-width: 0;
    }
    .finance-quick button {
        flex: 0 0 auto;
        width: auto;
        padding: 0.4rem 0.6rem;
        min-height: 2.5rem;
    }
}