/* 修复滚动条抖动 */
html {
scrollbar-gutter: stable;
    /* 修复：移动端焦点自动滚动时的顶部安全距离，防止被 Sticky Header 遮挡 */
    scroll-padding-top: 140px; 
}

/* ===== P2-4：全站视觉 Token（圆角/阴影/边框）===== */
:root{
    /* ===== 与小程序 wxss 统一的色板变量（暖阳居家 Sunny Home） ===== */
    /* 主色调：焦糖橙 */
    --blue-600: #EA580C;
    --blue-700: #C2410C;

    /* 深蓝仍保留（用于少量强调/标签等；与小程序一致） */
    --blue-800: #002F8F;
    --blue-900: #001F66;

    /* 小程序补齐的浅蓝（用于 border-blue-400 / bg-blue-100 等一致性） */
    --blue-100: #DBEAFE;
    --blue-200: #BFDBFE;
    --blue-300: #93C5FD;
    --blue-400: #60A5FA;
    --blue-500: #3B82F6;

    --indigo-600: #4f46e5;
    --indigo-700: #4338ca;

    --orange-500: #f97316;
    --orange-600: #ea580c;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --red-600: #dc2626;

    /* 对齐小程序 wxss 的灰阶（暖石灰） */
    --slate-50: #F1F5FF;
    --slate-100: #EAF0FF;
    --slate-200: #E7E5E4;
    --slate-300: #C9D2E3;
    --slate-400: #AAB4C7;
    --slate-500: #78716C;
    --slate-700: #44403C;
    --slate-800: #111827;
    --slate-900: #292524;
    --slate-850: #0f172a;

    /* 小程序 page 背景一致（暖米白） */
    --page-bg: #FFFBF5;
    --page-text: var(--slate-900);

    /* ===== 基础色：禁止散落 #fff/#000 等硬编码，统一从 Token 取 ===== */
    --homi-white: #ffffff;

    /* ===== 深色状态补齐：用于“白字彩底”对比度达标（替代散落 #15803d/#166534） ===== */
    --green-700: #15803d;
    --green-800: #166534;

    /* ===== 浅底状态色：用于“浅底深字”按钮/徽标（替代散落 #f0fdf4/#fee2e2/#fecaca 等） ===== */
    --green-50: #f0fdf4;
    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-800: #991b1b;

    /* ===== 视觉层级专用 Token：用于统一“系统感” ===== */
    --blue-50: #EFF6FF; /* 用于 item-card focus 背景（唯一来源） */
    --slate-600: #475569;        /* 弱信息（替代 #64748b/#374151 等） */

    --orange-800: #9A3412;       /* expiry-badge warn 文字色（替代 #9a3412） */

    /* Toast / Overlay：避免散落 rgba(15,23,42,0.86) 等 */
    --homi-toast-bg: rgba(15, 23, 42, 0.86);
    --homi-overlay: rgba(15, 23, 42, 0.55);

    /* ===== Alpha Token：半透明统一来源（替代散落 rgba） ===== */
    --alpha-white-12: rgba(255, 255, 255, 0.12);
    --alpha-white-14: rgba(255, 255, 255, 0.14);
    --alpha-white-16: rgba(255, 255, 255, 0.16);
    --alpha-white-18: rgba(255, 255, 255, 0.18);
    --alpha-white-22: rgba(255, 255, 255, 0.22);

    --alpha-black-18: rgba(0, 0, 0, 0.18);
    --alpha-black-22: rgba(0, 0, 0, 0.22);
    --alpha-black-04: rgba(0, 0, 0, 0.04);
    --alpha-black-06: rgba(0, 0, 0, 0.06);
    --alpha-black-10: rgba(0, 0, 0, 0.10);
    --alpha-black-14: rgba(0, 0, 0, 0.14);
    --alpha-black-55: rgba(0, 0, 0, 0.55);
    --alpha-black-40: rgba(0, 0, 0, 0.40);
    --alpha-black-42: rgba(0, 0, 0, 0.42);
    --alpha-black-45: rgba(0, 0, 0, 0.45);
    --alpha-black-46: rgba(0, 0, 0, 0.46);
    --alpha-black-48: rgba(0, 0, 0, 0.48);

    --alpha-slate-10: rgba(15, 23, 42, 0.10);
    --alpha-slate-12: rgba(15, 23, 42, 0.12);

    /* ===== Status Alpha Token：状态浅底/边框统一来源（替代彩色 rgba） ===== */
    --alpha-green-bg: rgba(22, 163, 74, 0.12);
    --alpha-green-border: rgba(22, 163, 74, 0.28);

    --alpha-orange-bg: rgba(249, 115, 22, 0.14);
    --alpha-orange-border: rgba(249, 115, 22, 0.32);

    --alpha-red-bg: rgba(220, 38, 38, 0.14);
    --alpha-red-border: rgba(220, 38, 38, 0.34);

    --alpha-red-border-25: rgba(220, 38, 38, 0.25);
    --alpha-red-border-45: rgba(220, 38, 38, 0.45);
    --alpha-red-shadow-45: rgba(220, 38, 38, 0.45);
    --alpha-red-shadow-35: rgba(220, 38, 38, 0.35);

    --alpha-red-bg-10: rgba(220, 38, 38, 0.10);

    /* ===== 你原有 Homi Token（保留变量名，不改功能） ===== */
    --homi-focus: #3b82f6;
    --homi-radius-xs: 0.375rem;
    --homi-radius-sm: 0.5rem;
    --homi-radius-md: 0.75rem;
    --homi-radius-lg: 1rem;
    --homi-radius-pill: 9999px;

    --homi-border-w: 1px;
    --homi-border-color: var(--slate-300);

    --homi-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --homi-shadow-md: 0 6px 14px -12px rgb(0 0 0 / 0.35);
    --homi-shadow-lg: 0 18px 40px -24px rgb(0 0 0 / 0.55);
}

/* 与小程序 page 基础一致：仅统一底色/字体/行高（不改 DOM/无障碍顺序） */
body{
    background-color: var(--page-bg);
    color: var(--page-text);
    font-family: -apple-system, system-ui, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

        /* 无障碍专用隐藏 */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }
        
/* A11Y：Landing 标题橙色对比度增强（仅视觉，不改结构/逻辑/顺序） */
#title-landing{
  color: var(--orange-600) !important;
}

/* 强焦样式（键盘才显示，统一为蓝色主题） */
*:focus {
    outline: none;
}

/* 只在键盘导航时显示强焦框，避免鼠标/触摸闪动 */
*:focus-visible {
    outline: 4px solid var(--homi-focus);
    outline-offset: 4px;
    /* 已移除 z-index: 40，修复 iOS 日期选择器点击失效问题 */
}

/* ===== A11Y 兜底：如果浏览器不支持 :focus-visible，就用 :focus 显示焦点 ===== */
@supports not selector(:focus-visible) {
  :where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]:not([tabindex="-1"])
  ):focus{
    outline: 4px solid var(--homi-focus);
    outline-offset: 4px;
    border-radius: 12px;
  }
}

/* ===== A11Y-Focus：焦点细化（更清晰、更不易被裁切、更统一） ===== */
/* 只对“交互控件”强化焦点，避免非交互容器也出现大描边 */
:where(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus-visible{
  outline: 4px solid var(--homi-focus);
  outline-offset: 4px;              /* 比 2px 更不容易被裁切 */
  border-radius: 12px;              /* 统一焦点圆角观感（不改布局） */
}

/* 对于本身就是“统一圆角组件”的元素，焦点也跟随更统一 */
:where(.grid-btn, .lock-btn, .clear-btn, .custom-input-trigger, .item-card):focus-visible{
  border-radius: var(--homi-radius-md);
}

/* 让键盘焦点滚动定位更稳定（防 sticky header 遮挡） */
:where(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
){
  scroll-margin-top: 140px;
}

/* A11Y：页脚浅灰小字对比度增强（仅限 footer，不改结构/逻辑/文案/顺序） */
#screen-login footer span.text-gray-400,
#screen-home footer span.text-gray-400{
  color: var(--slate-500);
}

#screen-login footer a.text-gray-400,
#screen-home footer a.text-gray-400{
  color: var(--slate-500);
}

/* 保持原有“hover:text-blue-600”的视觉语义（不改点击逻辑） */
#screen-login footer a.text-gray-400:hover,
#screen-home footer a.text-gray-400:hover{
  color: var(--blue-600);
}

/* 首页：去掉 main/footer 的灰底块，对齐小程序整页暖米白 */
#screen-home{
  background-color: var(--page-bg) !important; /* 统一用 token：#FFFBF5（对齐小程序） */
}

/* 首页：筛选区不要白底分割块（保持功能存在，仅视觉融入背景） */
#screen-home > section{
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 8px !important;
  padding-bottom: 0 !important;
}

/* 首页：main/footer 彻底透明 + 去掉 Tailwind p-4 灰底影响 */
#screen-home main,
#screen-home footer{
  background: transparent !important;
}

#screen-home main{
  padding: 0 !important; /* 对齐小程序：列表从左右 16px 留白开始，不要再套一层 p-4 */
}

#screen-home footer{
  border-top-color: rgba(231, 229, 228, 0.6) !important;
}

/* A11Y：数据管理页“添加”按钮对比度增强（仅限此 ID，不影响其它绿色按钮） */
#btn-save-cat-add{
  background-color: var(--green-700); /* 更深的绿色以满足白字对比度 */
}
#btn-save-cat-add:hover{
  background-color: var(--green-800);
}
#btn-save-cat-add:active{
  background-color: var(--green-800);
}

/* ===== P2-2：Header 渐变层级策略（仅视觉，不改逻辑/无障碍） ===== */

/* 1) 所有 header：统一更“干净”的阴影与分隔线（不改变布局/高度） */
header{
    box-shadow: 0 10px 22px -18px var(--alpha-black-45);
    border-bottom: 1px solid var(--alpha-white-18);
}

/* 首页兜底：不使用全局 header 阴影（对齐小程序） */
#screen-home header{
  box-shadow: none !important;
}

/* 2) 分页 header：对齐小程序“纯色顶栏”（仅视觉，不改逻辑/无障碍） */
/* 2-0) 兜底：所有 screen 内的 header 一律禁用渐变（防漏网，仅视觉） */
.screen header{
    background-image: none;
    background-color: var(--blue-800); /* 默认顶栏色；各 screen 仍可在下方覆盖 */
}
#screen-home header,
#screen-settings header,
#screen-ai-search header{
    background-color: var(--blue-800);
    background-image: none;
}

#screen-data header{
    background-color: var(--blue-700);
    background-image: none;
}

#screen-takeout header{
    background-color: var(--orange-600);
    background-image: none;
}

#screen-add header,
#screen-edit header{
    background-color: var(--green-600);
    background-image: none;
}

/* 3) 兜底：如果某页 header 带了 bg-blue-600 类，统一按小程序蓝-600（仅视觉） */
#screen-add header.bg-blue-600,
#screen-edit header.bg-blue-600,
#screen-takeout header.bg-blue-600,
#screen-data header.bg-blue-600,
#screen-settings header.bg-blue-600{
    background-color: var(--blue-600);
    background-image: none;
}

/* 4) 顶栏文字与按钮：增强在渐变上的可读性（仅视觉，不改结构/逻辑/无障碍顺序） */
header,
header *{
    color: var(--homi-white);
}

/* 覆盖：仅首页顶栏对齐小程序“白底磨砂”（不影响其它 screen） */
#screen-home header{
    background: rgba(255, 251, 245, 0.98) !important;

    /* 对齐小程序：只有非常轻的底部分割线 */
    border-bottom: 1px solid rgba(231, 229, 228, 0.6) !important;

    /* 关键：去掉整块浮层阴影（小程序顶栏不“飘”） */
    box-shadow: none !important;
}

/* 首页顶栏文字改为深色（避免白底白字） */
#screen-home header,
#screen-home header *{
    color: var(--slate-900) !important;
}

/* 顶栏标题：与小程序 iOS 类似的轻阴影，提升对比（不影响读屏） */
header h1,
header h2,
header #title-home{
    text-shadow: 0 1px 2px var(--alpha-black-22);
}

/* 首页白底顶栏：标题不需要投影（对齐小程序的干净字形） */
#screen-home header h1,
#screen-home header h2,
#screen-home header #title-home{
    text-shadow: none !important;
}

/* 顶栏右上角账号按钮：更像小程序的轻量按钮（不改点击逻辑） */
#btn-account-menu{
    background-color: var(--alpha-white-16) !important;
    border: 1px solid var(--alpha-white-22) !important;
    box-shadow: none !important;
}
#btn-account-menu:hover{
    background-color: var(--alpha-white-22) !important;
}
#btn-account-menu:active{
    background-color: var(--alpha-white-14) !important;
}

.lock-btn {
            display: block;
            margin-left: auto;
            margin-top: 4px;
            padding: 4px 8px;
            font-size: 0.875rem;
            font-weight: bold;
            transition: all 0.2s;
            border: 2px solid var(--slate-300);
            background: var(--slate-50);
            color: var(--slate-600);
            width: fit-content;
}

/* 全局表单控件现代化重置 (覆盖 Tailwind Utility) */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    box-sizing: border-box;

    /* 与小程序一致：更原生、更清爽，但仍满足 44px 触控基线 */
    min-height: 44px !important;

    background-color: var(--homi-white) !important;
    border-width: 1px !important;
    border-color: var(--slate-200) !important;

    /* 你 Web 里圆角层级保持不变（不动结构），但焦点与边框对齐小程序 */
    box-shadow: none !important;
    transition: all 0.2s;
}

/* 说明：:focus 只做“边框颜色变化”，避免覆盖键盘 :focus-visible 的统一强焦策略（不改交互逻辑） */
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus{
    border-color: var(--blue-600) !important;
    outline: none !important;
    outline-offset: 0 !important;
    background-color: var(--homi-white) !important;
}

/* 仅键盘焦点：使用统一强焦（与 A11Y-Focus 一致），避免被 :focus 覆盖 */
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible{
    border-color: var(--blue-600) !important;
    outline: 4px solid var(--homi-focus) !important;
    outline-offset: 4px !important;
    background-color: var(--homi-white) !important;
}

/* 修复：隐形复选框的焦点去重 */
        input[type="checkbox"].opacity-0:focus {
            outline: none !important; /* 禁止浏览器给透明元素画边框，防止与父级 Label 的 Ring 冲突 */
            box-shadow: none !important;
        }

        /* 修复：移除移动端触摸时的默认高亮块（Tap Highlight） */
/* 修复：强制日期控件有实体背景，防止点击穿透 */
input[type="date"] {
    display: block;
    width: 100%;
    min-height: 60px;                 /* 旁白/触控更稳定 */
    cursor: pointer;

    /* 关键：恢复原生日期控件，让 iOS 真正弹出原生选择器 */
    -webkit-appearance: auto !important;
    appearance: auto !important;

    background-color: var(--homi-white);
    color: var(--slate-900);
    opacity: 1;

    /* 与全站 token 统一：圆角/边框（仅视觉） */
    border-width: 1px;
    border-style: solid;
    border-color: var(--slate-200);
    border-radius: var(--homi-radius-md);

    /* 内边距略收敛，更接近 iOS 表单（不影响可点区域） */
    padding: 0.875rem 1rem;

    /* 关键：防遮挡/防抢点 */
    position: relative;
    z-index: 2;
    pointer-events: auto;

    /* 关键：减少 iOS 把激活手势“解释成滚动/选择”的概率 */
    touch-action: manipulation;
}

/* 修复：移除移动端触摸时的默认高亮块（Tap Highlight） */
/* iOS Safari 兜底：滚动容器内 date 控件偶发“点了没反应/点不动” */
@supports (-webkit-touch-callout: none) {
    #screen-add .overflow-y-auto,
    #screen-edit .overflow-y-auto {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
}

input[type="checkbox"].opacity-0,
.item-card,
button {
    -webkit-tap-highlight-color: transparent;
}

.lock-btn.is-locked {
            background: var(--green-50);
            border-color: var(--green-500);
            color: var(--green-800);
        }
        .lock-btn.hidden {
            display: none;
        }

/* 列表卡片 */
/* 说明：item-card 的 focus-visible 统一在 P0-8 段落中维护，避免多处重复定义造成覆盖冲突 */

        /* 有效期状态：卡片左侧色条（覆盖默认蓝色条） */
        .item-card.item-card--ok { border-left-color: var(--green-600); }      /* green-600 */
        .item-card.item-card--warn { border-left-color: var(--orange-500); }    /* orange-500 */
        .item-card.item-card--expired { border-left-color: var(--red-600); }   /* red-600 */

/* ===== P2-3：卡片状态色条/徽章对比度与一致性（仅视觉，不改逻辑/无障碍） ===== */

/* 1) 状态卡片：小程序不使用底色渐变；
   Web 端已在 P0-8 统一禁用 background-image（background-image: none !important），
   这里不再定义渐变，避免“写了又被关掉”的维护冲突（仅注释层面的整理，不改任何视觉表现） */

/* 2) 徽章：跟随状态统一“底色 + 细边框 + 深色字”，读感更稳定 */
.item-card.item-card--ok .expiry-badge{
    background-color: var(--alpha-green-bg);
    border: 1px solid var(--alpha-green-border);
    color: var(--green-800);
}
.item-card.item-card--warn .expiry-badge{
    background-color: var(--alpha-orange-bg);
    border: 1px solid var(--alpha-orange-border);
    color: var(--orange-800);
}
.item-card.item-card--expired .expiry-badge{
    background-color: var(--alpha-red-bg);
    border: 1px solid var(--alpha-red-border);
    color: var(--red-800);
}

        /* 有效期徽章：防止被拆开、保持间距一致 */

/* ===== P0-8：卡片列表排版层级统一（仅视觉，不改逻辑/无障碍） ===== */

/* 1) 卡片整体：对齐小程序 item-card（白底 + 淡边框 + 极轻阴影） */
.item-card{
    line-height: 1.35;
    background: var(--homi-white);

    /* 对齐小程序：淡边框 + 左侧色条 */
    border: 1px solid #F5F5F4;
    border-left-style: solid;
    border-left-width: 8px !important;

    /* 对齐小程序：更大的圆角与更“暖”的柔光阴影 */
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(234, 88, 12, 0.06) !important;

    /* 对齐小程序：卡片内边距更接近移动端 */
    padding: 16px 16px !important;

    transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
}

/* 2) 按压态：对齐小程序（不改你全局 active 缩放规则，只补背景色） */
.item-card:active{
    background-color: rgba(234, 88, 12, 0.04) !important;
}

/* 点击聚焦（非键盘）：不显示强 ring，避免“选中背景板”观感（仅卡片，不影响其它控件） */
.item-card:focus{
  outline: none !important;
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.06) !important;
}

/* 3) 焦点态：对齐小程序（不放大，不改变无障碍顺序） */
.item-card:focus-visible{
    /* 保留焦点可见（无障碍不变），但视觉不做“整圈橙色选中框” */
    outline: none !important;

    /* 关键：不要把整张卡片边框改成橙色（小程序不会整圈变色） */
    border-color: #F5F5F4 !important;

    /* 只做非常轻的“系统感提示”，强度远低于 ring */
    box-shadow:
      0 10px 26px rgba(234, 88, 12, 0.08) !important;

    transform: none !important;
    background-color: var(--homi-white) !important;
}

/* 4) 移除“状态底色渐变”效果：小程序不使用该渐变，仅保留左色条语义 */
.item-card.item-card--ok,
.item-card.item-card--warn,
.item-card.item-card--expired{
    background-image: none !important;
}

/* 5) 有效期徽章：对齐小程序 expiry-tag 的“更轻更系统” */
.item-card .expiry-badge{
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
}

/* 6) 标签：对齐小程序（列表卡片内为“淡灰胶囊”，降低蓝色存在感）（仅卡片内作用域） */
.item-card .tag-bubble{
    background-color: var(--slate-50);
    color: var(--slate-700);
    border-color: var(--slate-200);

    font-weight: 600;
    font-size: 12px;

    /* 关键：卡片内标签更“扁”，对齐小程序 */
    padding: 2px 8px !important;
    border-radius: 9999px !important;
}

/* 7) 次要文字：卡片里不要到处 bold（对齐小程序“更耐看”） */
.item-card .text-slate-500,
.item-card .text-slate-600{
    font-weight: 500;
}

/* 8) 数量强调：仍保持蓝色体系，但不要“过度粗” */
.item-card .text-blue-600,
.item-card .text-blue-500{
    font-weight: 700;
}

/* 兜底：item-card 不使用全局蓝色强焦框，统一走小程序暖橙柔光（不影响其它控件焦点） */
.item-card:focus-visible{
  outline: none !important;
}

/* ===== P0-8A：物品列表文字层级对齐小程序（仅视觉，不改结构/逻辑/无障碍） ===== */

/* 1) 标题：更接近小程序（紧凑行高 + 稳定字重） */
.item-card .item-name{
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* 标题行与有效期徽章：更像小程序（同一行对齐、更稳定） */
.item-card .item-name{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.item-card .expiry-badge{
  transform: translateY(-1px);
}

/* 2) 分类/位置：弱信息更轻（小程序观感） */
.item-card .text-xs.font-medium{
  font-weight: 600 !important;
}
.item-card .item-loc{
  font-size: 14px !important;
  line-height: 1.35 !important;
  color: var(--slate-500) !important;
}

/* 3) 右侧数量：对齐小程序的“橙色强调” + 更大字号 */
.item-card .item-qty{
  font-size: 28px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  color: var(--blue-600) !important; /* 你的 token 里 blue-600 实际是焦糖橙 :contentReference[oaicite:3]{index=3} */
}

/* 4) 多级单位（例如 9箱 + 19瓶）：把“第二段数量”也变成橙色并换行展示
   兼容你 renderList 里生成的 `<span class="text-sm text-slate-500 ml-1">...</span>` :contentReference[oaicite:4]{index=4} */
.item-card .item-qty .text-sm{
  display: block !important;
  margin-left: 0 !important;         /* 覆盖 ml-1，让它不挤在同一行 */
  margin-top: 2px !important;
  font-size: 28px !important;        /* 小程序右侧两行同级强调 */
  line-height: 1.1 !important;
  font-weight: 800 !important;
  color: var(--blue-600) !important; /* 焦糖橙 */
}

/* 5) 兜底：Tailwind 的 text-blue-600/500 在卡片里不要“变真蓝”，统一走你的 token 橙色 */
.item-card .text-blue-600,
.item-card .text-blue-500{
  color: var(--blue-600) !important;
}

/* ===== P0-9：列表分组容器（iOS grouped 风，仅视觉，不改结构/逻辑/无障碍） ===== */
/* 说明：对齐小程序首页列表——不要 grouped 白底大容器，改为“独立卡片”呼吸感 */

/* ===== P0-9H：首页列表容器是 #home-list（不是 overflow-y-auto）——按小程序对齐 ===== */
#screen-home #home-list{
  /* 小程序：列表左右留白 16px */
  padding-left: 16px !important;
  padding-right: 16px !important;

  /* 小程序：列表与上方控件有呼吸感 */
  padding-top: 12px !important;
  padding-bottom: 12px !important;

  /* 让 space-y-4 的 16px 间距变成更接近小程序的 12px */
  background: transparent !important;
  border-radius: 0 !important;
}

/* 覆盖 Tailwind 的 space-y-4：把条目间距统一成 12px（更像小程序） */
#screen-home #home-list > :not([hidden]) ~ :not([hidden]){
  margin-top: 12px !important;
}

/* 首页卡片：不要再额外叠 margin，避免间距被叠加（保持你卡片自身阴影/圆角逻辑不变） */
#screen-home #home-list .item-card{
  margin: 0 !important;
}

/* 1) 列表滚动容器：取消白底分组块，让背景透出页面暖米白 */
#screen-home .overflow-y-auto,
#screen-takeout .overflow-y-auto,
#screen-data .overflow-y-auto{
    background: transparent;
    border: none;
    border-radius: 0;

    /* 对齐小程序：卡片左右留白（避免贴边） */
    padding-left: 16px;
    padding-right: 16px;

    box-shadow: none;
    margin-top: 12px;
    margin-bottom: 12px;
    margin-left: 0;
    margin-right: 0;
}

/* 2) 卡片：恢复为“独立卡片”而不是 grouped 列表条目 */
#screen-home .overflow-y-auto .item-card,
#screen-takeout .overflow-y-auto .item-card,
#screen-data .overflow-y-auto .item-card{
    /* 小程序卡片：有呼吸感 */
    margin: 12px 0 !important;

    /* 小程序卡片：淡边框 + 暖橙柔光阴影 */
    border: 1px solid #F5F5F4 !important;
    border-left-width: 8px !important; /* 保留你 P0-8 的语义，只强化宽度一致 */
    border-top-width: 1px !important;
    border-right-width: 1px !important;
    border-bottom-width: 1px !important;

    box-shadow: 0 8px 24px rgba(234, 88, 12, 0.06) !important;

    /* 圆角与内边距：先用你当前 P0-8 的 16px 体系，避免挤压内部布局 */
    border-radius: 16px !important;
    padding: 16px 16px !important;
}

/* 3) 独立卡片最后一条也应保留完整边框（撤销 grouped 的“去底线”逻辑） */
#screen-home .overflow-y-auto .item-card:last-child,
#screen-takeout .overflow-y-auto .item-card:last-child,
#screen-data .overflow-y-auto .item-card:last-child{
    border-bottom-width: 1px !important;
}

/* 4) 按压态：对齐小程序卡片浅橙高亮（不改你全局缩放反馈） */
#screen-home .overflow-y-auto .item-card:active,
#screen-takeout .overflow-y-auto .item-card:active,
#screen-data .overflow-y-auto .item-card:active{
    background-color: rgba(234, 88, 12, 0.06) !important;
}

/* ===== P0-6：主行动按钮体系统一（仅视觉，不改逻辑/无障碍） ===== */
#btn-nav-add,
#btn-nav-takeout,
#btn-nav-data,
#btn-nav-ai-search{
    min-height: 60px;
    letter-spacing: 0.01em;
    transition: transform 0.12s, box-shadow 0.2s;
}

/* 首页：+新增物品（主按钮：焦糖橙胶囊） */
#btn-nav-add{
    background-color: var(--blue-600) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 22px rgba(234, 88, 12, 0.22) !important;
}
#btn-nav-add:hover{ background-color: var(--blue-700) !important; }
#btn-nav-add:active{ background-color: var(--blue-700) !important; }

/* 首页：取出物品（次按钮：白底深橙字） */
#btn-nav-takeout{
    background-color: #ffffff !important;
    color: var(--blue-700) !important;
    border: 1px solid var(--slate-200) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06) !important;
}
#btn-nav-takeout:hover{ background-color: var(--slate-50) !important; }
#btn-nav-takeout:active{ background-color: var(--slate-50) !important; }

/* 首页：数据管理 / AI 搜索（轻量次按钮：浅底深字） */
#btn-nav-data,
#btn-nav-ai-search{
    background-color: var(--slate-50) !important;
    color: var(--slate-900) !important;
    border: 1px solid var(--slate-200) !important;
    border-radius: 0.75rem !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}
#btn-nav-data:hover,
#btn-nav-ai-search:hover{
    background-color: var(--slate-100) !important;
}
#btn-nav-data:active,
#btn-nav-ai-search:active{
    background-color: var(--slate-100) !important;
}

/* ===== P1-2：统一弹窗 Modal 的层级质感 + 底部安全区（仅视觉，不改逻辑/无障碍） ===== */

/* ===== P1-3：统一弹窗内部排版节奏（仅视觉，不改逻辑/无障碍） ===== */

/* 1) 弹窗标题：稳定行高与间距（不影响焦点与读屏） */

/* ===== P1-4：弹窗按钮主次关系（仅视觉，不改逻辑/无障碍） ===== */

/* 0) 遮罩层：对齐小程序（更深的遮罩；不改显示/隐藏逻辑） */
#modal-action,
#modal-qty,
#modal-unit,
#modal-zero,
#modal-confirm,
#modal-forgot,
#modal-protocol{
  background: var(--homi-overlay) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 1) 弹窗主体：对齐小程序（圆角、淡边框、克制阴影） */
#modal-action > div,
#modal-qty > div,
#modal-unit > div,
#modal-zero > div,
#modal-confirm > div,
#modal-forgot > div,
#modal-protocol > div{
  border-radius: 18px !important;
  border: 1px solid var(--slate-200) !important;
  box-shadow: 0 16px 30px var(--alpha-black-14) !important;
}

/* 2) 弹窗标题/正文：对齐小程序（字重更克制、行距更稳定） */
#modal-action h2,
#modal-qty h2,
#modal-unit h2,
#modal-zero h2,
#modal-confirm h2,
#modal-forgot h2,
#modal-protocol h2{
  line-height: 1.2;
  letter-spacing: 0.2px;
  font-weight: 600;
}

#modal-action p,
#modal-qty p,
#modal-unit p,
#modal-zero p,
#modal-confirm p,
#modal-forgot p,
#modal-protocol p{
  line-height: 1.5;
}

/* 3) 内容区与按钮区间距：对齐小程序（更克制但不拥挤） */
#modal-action .mt-6,
#modal-qty .mt-6,
#modal-unit .mt-6,
#modal-zero .mt-6,
#modal-confirm .mt-6,
#modal-forgot .mt-6,
#modal-protocol .mt-6{
  margin-top: 1.125rem !important;
}

#modal-action .flex.gap-3,
#modal-qty .flex.gap-3,
#modal-unit .flex.gap-3,
#modal-zero .flex.gap-3,
#modal-confirm .flex.gap-3,
#modal-forgot .flex.gap-3,
#modal-protocol .flex.gap-3{
  gap: 0.75rem !important;
}

/* 4) 弹窗按钮：对齐小程序（44px 高度、14px 圆角、字重 600、阴影更轻） */
#modal-action button,
#modal-qty button,
#modal-unit button,
#modal-zero button,
#modal-confirm button,
#modal-forgot button,
#modal-protocol button{
  min-height: 44px;
  border-radius: 14px !important;
  font-weight: 600;
  box-shadow: none !important;
}

/* 5) 次按钮：对齐小程序（slate-100 背景 + slate-200 边框） */
#btn-confirm-cancel,
#btn-qty-cancel,
#btn-zero-cancel,
#btn-cancel-forgot,
#btn-close-protocol,
#btn-back-settings{
  background-color: var(--slate-100) !important;
  border-color: var(--slate-200) !important;
  color: var(--slate-800) !important;
}

/* 6) 确认/提交按钮：保留原配色语义，仅对齐小程序的轻阴影手感 */
#btn-confirm-ok,
#btn-qty-confirm,
#btn-do-reset-action{
  border-width: 1px !important;
  box-shadow: 0 4px 10px var(--alpha-black-06) !important;
}

#qty-unit-toggle input:focus-visible + span {
    outline: 4px solid var(--homi-focus);
    outline-offset: 4px;
}

        #qty-unit-toggle input:checked + span {
            background-color: var(--homi-white);
            color: var(--slate-850);
            box-shadow: 0 4px 6px -1px var(--alpha-black-10), 0 2px 4px -2px var(--alpha-black-10);
            transform: scale(1.02);
        }

        .grid-btn {
            height: 60px;
            font-size: 1.5rem;
            font-weight: bold;

            border: 2px solid var(--slate-200);
            border-radius: 0.75rem;
            background: var(--homi-white);
            color: var(--slate-700);

            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }
.grid-btn:hover,
.grid-btn:focus-visible {
    background-color: var(--blue-100);
    border-color: var(--blue-600);
    color: var(--blue-900);
}

        /* 自定义输入触发器 */
        .custom-input-trigger {
            flex-grow: 1;
            border: 2px solid var(--slate-200);
            background: var(--homi-white);
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        

/* 清除搜索按钮：默认隐藏（通过 .hidden 控制），有内容时显示 */

/* ===== P0-5：统一搜索条/筛选条控件外观（仅视觉覆盖） ===== */

/* 1) 搜索输入框：对齐小程序（44px 高度、白底、slate-200 边框、焦点浅蓝外圈） */
#home-search,
#takeout-search,
#ai-search-input{
    min-height: 44px !important;
    background-color: var(--homi-white) !important;
    color: var(--slate-900) !important;
    font-weight: 500 !important;

    border-width: 1px !important;
    border-color: var(--slate-200) !important;

    box-shadow: none !important;
    border-radius: 0.75rem !important;
}

/* 2) 搜索按钮：首页对齐小程序（浅灰胶囊）；其它页面保持原语义 */
#btn-do-search{
    min-height: 44px !important;
    border-radius: 0.75rem !important;

    background-color: var(--slate-50) !important;
    border: 1px solid var(--slate-200) !important;
    color: var(--slate-900) !important;

    box-shadow: none !important;
    font-weight: 700 !important;
}

#btn-do-search:hover{
    background-color: var(--slate-100) !important;
}
#btn-do-search:active{
    background-color: var(--slate-100) !important;
}

/* 取出页 / AI 页：继续沿用你当前按钮体系，仅保留高度与圆角统一 */
#btn-do-search-takeout,
#btn-ai-search-submit{
    min-height: 44px !important;
    border-radius: 0.75rem !important;
}

/* 3) 清除按钮：同高度、同边框语义（不改 hidden 控制与点击逻辑） */
#btn-clear-home-search,
#btn-clear-takeout-search,
#btn-ai-search-clear{
    min-height: 44px !important;
    border-radius: 0.75rem !important;

    border-width: 1px !important;
    border-color: var(--slate-200) !important;
    box-shadow: none !important;
}

/* 4) 筛选/排序下拉框：对齐小程序 filter-chip（浅灰底 + 1px 边框 + 更圆） */
#home-filter,
#home-filter-cat,
#home-sort,
#takeout-filter,
#takeout-filter-cat,
#takeout-sort{
    min-height: 44px !important;

    /* 小程序更轻：1px 边框 + 更浅的边框色 */
    border-width: 1px !important;
    border-color: var(--slate-200) !important;

    background-color: var(--slate-50) !important;
    color: var(--slate-900) !important;

    /* 字号不要太“表单”，略收一点更像小程序 */
    font-weight: 700 !important;
    font-size: 1rem !important;

    box-shadow: none !important;
    border-radius: 0.75rem !important;
}

/* ===== P0-5B：首页筛选区对齐小程序（仅视觉；不改逻辑/无障碍顺序） ===== */
/* 小程序有“分类/排序”等左侧标签：网页端也显示出来以对齐（仅视觉） */
#screen-home label[for="home-filter"],
#screen-home label[for="home-filter-cat"],
#screen-home label[for="home-sort"]{
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 12px 0 0 !important;
  padding: 0 !important;

  overflow: visible !important;
  clip: auto !important;
  white-space: nowrap !important;
  border: 0 !important;

  display: inline-flex !important;
  align-items: center !important;

  font-weight: 800 !important;
  font-size: 1.125rem !important;
  color: var(--slate-900) !important;
}

/* 让下拉在视觉上更像小程序：整行胶囊、节奏更紧凑 */
#screen-home #home-filter,
#screen-home #home-filter-cat,
#screen-home #home-sort{
  width: 100% !important;
  margin-left: 0 !important; /* 防止被 label 的布局影响产生左缩进 */
}

/* 三行筛选之间的间距更像小程序（避免“表单感”过强） */
#screen-home #home-filter{
  margin-top: 8px !important;
}
#screen-home #home-filter-cat,
#screen-home #home-sort{
  margin-top: 8px !important;
}

.clear-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;

    border-radius: 10px;
    font-weight: 600;

    border-width: 1px;
    border-color: var(--slate-200);
    background: var(--homi-white);
    color: var(--slate-700);
    cursor: pointer;

    box-shadow: none;
}

/* 你页面里已经在用 hidden 类：hidden = 不显示 */
/* ===== AI 搜索页（仅本页作用域，不影响其它页面） ===== */
#screen-ai-search #ai-search-answer{
  white-space: pre-wrap;
}
#screen-ai-search #ai-search-answer .ai-answer-line{
  margin-top: 0.5rem;
}
.hidden {
    display: none !important;
}

/* ===== A11y：首页搜索框 placeholder 对比度（仅视觉） ===== */
#screen-home #home-search::placeholder{
  color: var(--slate-500) !important;
  opacity: 1 !important;
}
        
/* ===== P2-1：标签体系统一（仅视觉，不改逻辑/无障碍） ===== */

/* 1) 全局标签（用于新增/编辑等“标签编辑区”）：更像系统胶囊，减少“过饱和蓝色块” */
.tag-bubble{
    background-color: var(--slate-100);  /* slate-100 */
    color: var(--slate-700);             /* slate-700 */
    border-color: var(--slate-200);      /* slate-200 */
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}

/* 2) 删除小叉：提升命中与一致性（不改点击逻辑，只改热区与对比） */
.tag-remove{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    border-radius: 9999px;
    margin-left: 0.5rem;
    line-height: 1;
}

/* hover 仍保留“变红”语义，你原本的规则继续生效 */
.tag-remove:hover{
    background-color: var(--alpha-red-bg-10);
}

/* 可视化通知条 (Toast) */
#toast-container {
    position: fixed;

    /* 对齐小程序 wx.showToast：屏幕居中浮层提示（仅视觉） */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    /* 不拦截点击：保持你原有行为 */
    pointer-events: none;

    width: 86%;
    max-width: 360px;
}

.toast-message {
    /* 对齐小程序 toast：深色半透明、圆角更大、字重不“炸” */
    background: var(--homi-toast-bg);
    color: var(--homi-white);

    padding: 12px 16px;
    border-radius: 16px;

    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;

    /* 更克制的阴影，接近系统浮层 */
    box-shadow: 0 10px 22px var(--alpha-black-18);

    animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    border: 1px solid var(--alpha-white-12);
}

/* ===== P1-1：Toast 过渡与稳定性（仅视觉，不改逻辑/无障碍） ===== */
.toast-message{
    /* 让 JS 的 opacity/transform 变化更顺滑（JS 即使重复写 transition 也不冲突） */
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s, transform 0.3s;

    /* iOS 兼容：补上 webkit 前缀的毛玻璃 */
    -webkit-backdrop-filter: blur(4px);

    /* 让深色 toast 在浅色背景上边界更干净 */
    border: 1px solid var(--alpha-white-12);

    /* 性能提示：减少动画抖动 */
    will-change: opacity, transform;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(0) scale(1); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

        /* 复选框美化 */

/* ===== P1-2：模态框底部安全区（仅视觉，不改逻辑/无障碍） ===== */
#modal-qty > div,
#modal-action > div,
#modal-unit > div,
#modal-zero > div,
#modal-confirm > div,
#modal-forgot > div,
#modal-ai-fill > div,
#modal-protocol > div{
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

/* ===== P0 视觉增强补丁（不改结构/逻辑/无障碍） ===== */

/* 1) 页面切换时会 programmatic focus 到 h1（用于读屏/键盘）：
   给 tabindex=-1 的标题一个“可见提示”，不依赖 focus-visible */
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus,
h3[tabindex="-1"]:focus{
  outline: 4px solid var(--homi-focus);
  outline-offset: 4px;
  border-radius: 0.75rem;
}

/* 首页：不显示 programmatic focus 的蓝色外框（对齐小程序的“无高亮标题”观感）
   不改无障碍顺序：tabindex/-1 仍在，只是首页视觉上隐藏这条提示 */
#screen-home h1[tabindex="-1"]:focus,
#screen-home h2[tabindex="-1"]:focus,
#screen-home h3[tabindex="-1"]:focus{
  outline: none !important;
  box-shadow: none !important;
}

/* 2) 统一按压反馈：只做 transform，不改布局流、不改点击逻辑 */
.grid-btn:active,
.lock-btn:active,
.clear-btn:active,
button:active,
.item-card:active{
  transform: scale(0.98);
}

/* 补齐小程序手感：按钮按压态轻微降不透明度（仅按钮，不影响卡片文字可读性） */
button:active{
  opacity: 0.92;
}

/* 3) 禁用态更清晰（不影响可聚焦策略；disabled 本身就不可点） */
button:disabled,
button[aria-disabled="true"]{
  opacity: 0.55;
  cursor: not-allowed;
}

/* 4) 尊重减少动效偏好：降低 toast/缩放带来的眩晕风险 */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .toast-message{
    animation: none !important;
  }
  .item-card,
  .item-card:focus-visible{
    transform: none !important;
  }
}

        input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            background-color: var(--homi-white);
            margin: 0;
            font: inherit;
            color: currentColor;
            width: 1.5rem;
            height: 1.5rem;
            border: 2px solid var(--slate-300);
            border-radius: 0.375rem; /* rounded-md */
            display: grid;
            place-content: center;
            transition: all 0.2s;
            cursor: pointer;
        }
        input[type="checkbox"]::before {
            content: "";
            width: 0.85em;
            height: 0.85em;
            transform: scale(0);
            transition: 120ms transform ease-in-out;
            box-shadow: inset 1em 1em var(--homi-white);
            transform-origin: center;
            clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
        }
        input[type="checkbox"]:checked {
            background-color: var(--blue-500);
            border-color: var(--blue-500);
        }
        input[type="checkbox"]:checked::before {
            transform: scale(1);
        }

/* ===== P1-5：账号菜单下拉分组与层级（仅视觉，不改逻辑/无障碍） ===== */

/* 1) 下拉容器：更像浮层（不设置 overflow:hidden，避免 focus-visible 外框被裁切） */
#menu-account-dropdown{
  border: 1px solid var(--alpha-slate-12);
  box-shadow: 0 18px 40px -28px var(--alpha-black-55);
  background-color: var(--homi-white);
}

/* 2) 菜单项：统一触控高度与内边距（不改 aria，不改点击逻辑） */
#menu-account-dropdown button{
  min-height: 44px;
  padding: 12px 14px;
  border-radius: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* 3) 普通项 hover：更中性、更“系统” */
#btn-settings:hover,
#btn-logout:hover{
  background-color: var(--slate-100);
}

/* 4) 危险区块分隔线：在“清空数据”上方画一条细分割线（不新增 DOM） */
#btn-clear-data{
  position: relative;
}
#btn-clear-data::before{
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  top: -0.45rem;
  height: 1px;
  background: var(--alpha-slate-10);
}

/* ===== P0-10：首页背景底色对齐小程序（仅视觉，不改结构/逻辑/无障碍） ===== */
/* 目标：小程序是更暖的米白底；网页端 body 的 bg-slate-50 会让整体偏冷 */
#screen-home{
  background-color: var(--page-bg) !important;
}

/* 首页里 main/footer 你已设 transparent，这里补齐“页面根底色” */
body{
  background-color: var(--page-bg) !important;
}

/* 防止 header/上层容器带出冷色块（只作用于首页） */
#screen-home header,
#screen-home main,
#screen-home footer{
  background: transparent !important;
}

/* 让列表区域与顶部控件区域不出现“拼接分界”的冷色过渡 */
#screen-home #home-list{
  background: transparent !important;
}

/* 备案号样式优化：增加点击热区并适配读屏 */
/* ===== P0-7：危险操作按钮体系视觉统一（仅视觉，不改逻辑/无障碍） ===== */

/* 1) 危险按钮：统一红色语义（适用于 button 本身写了 danger 类/aria 的情况） */
button.danger,
button[data-variant="danger"],
button[aria-describedby="danger-hint"]{
    background-color: var(--red-100);   /* red-100 */
    border-color: var(--red-200);       /* red-200 */
    color: var(--red-800);              /* red-800 */
}

/* 2) 菜单里危险项：保持现有 hover 红底基础上，增强边界与可读性（不改 aria / 不改布局） */
#btn-clear-data,
#btn-delete-account{
    border: 1px solid var(--alpha-red-border-25);
}

/* 3) hover / active：更明确的危险反馈（reduce-motion 会自动降级动效） */
#btn-clear-data:hover,
#btn-delete-account:hover{
    border-color: var(--alpha-red-border-45);
    box-shadow: 0 6px 14px -12px var(--alpha-red-shadow-45);
}
#btn-clear-data:active,
#btn-delete-account:active{
    box-shadow: 0 4px 10px -12px var(--alpha-red-shadow-35);
}

/* 4) 确认弹窗里的“确认删除/确认清空”按钮（如果你后续有专门 id，可再精确加） */
#btn-confirm-ok{
    border: 1px solid var(--alpha-slate-12);
}

/* ===== P2-4：Token 覆盖层（仅视觉，不改逻辑/无障碍）===== */

/* 1) 通用输入框与下拉：统一边框/圆角/阴影
   注意：不覆盖 date 控件，避免影响 iOS 原生日期选择器点击 */
input:not([type="checkbox"]):not([type="radio"]):not([type="date"]),
select{
    border-width: var(--homi-border-w) !important;
    border-color: var(--homi-border-color) !important;
    border-radius: var(--homi-radius-md) !important;
    box-shadow: var(--homi-shadow-sm) !important;
}

/* 2) 常用按钮/卡片：统一圆角层级（不改颜色、不改尺寸、不改可点击逻辑） */
.grid-btn,
.lock-btn,
.clear-btn,
.custom-input-trigger,
.item-card,
#menu-account-dropdown button{
    border-radius: var(--homi-radius-md);
}

/* 3) 主按钮体系/弹窗：统一阴影“级别感”（不改原有语义配色） */
/* 注意：主行动按钮 #btn-nav-* 的阴影已在 P0-6 定义为 iOS 风，这里不再覆盖，避免互相打架 */

#modal-action > div,
#modal-qty > div,
#modal-unit > div,
#modal-zero > div,
#modal-confirm > div,
#modal-forgot > div,
#modal-protocol > div{
    border-radius: var(--homi-radius-lg);
    box-shadow: var(--homi-shadow-lg);
}

/* 4) 胶囊类元素：统一为 pill（不改文本内容与读屏） */
.tag-bubble{
    border-radius: var(--homi-radius-pill);
}

/* 有效期徽章：对齐小程序 expiry-tag（胶囊） */
.expiry-badge{
    border-radius: var(--homi-radius-pill) !important;
}

footer a {
    display: inline-block;
    padding: 12px;
    text-decoration: none;
    min-width: 44px;
    min-height: 44px;
}

footer a:focus-visible {
  outline: 4px solid var(--homi-focus);
  outline-offset: 4px;
  border-radius: 12px;
}