/**
 * Liquid Glass 皮肤（skin）
 * 灵感来自 Apple "Liquid Glass"，取自 docs/theme/theme3.html 的 token（light/dark 各一份）。
 *
 * 与"模式"（data-theme=light/dark）是两个独立维度：
 * 本文件只在 html 同时带有 data-skin="liquid-glass" 时生效，叠加在 light.css / dark.css
 * 已经定下的浅色/深色变量之上，只覆盖这套皮肤要改的那部分。
 *
 * 2026-07-29：模糊/投影用的是 THEMES.liquidglass（Regular，标准版）的数值（24px 模糊），
 * 不透明度按用户反馈手调过，不是照抄哪一个变体：浅色卡片是白色、深色卡片是黑色（不是 Regular
 * 原版深色模式那种"玻璃本身不带颜色、还是罩一层白纱"的做法），各自"轻微透明"——不透明度
 * 大头（85%/70%），只留一点点缝隙透模糊背景，不是 Frosted(92%/94%) 那种几乎看不见背景、
 * 也不是 Regular 原版(55%/8%) 那种大面积透底，是两者之间、偏"卡片本身还是看得出黑/白色"
 * 那一档。
 * 文字色、状态色（成功/警告/危险/信息）、--border-color 还是沿用 Frosted 那组：这几个值
 * 是特意加深/加暗过的，可读性比 Regular 原版更鲜艳的颜色更好，没有跟着换。
 *
 * 卡片本身不加边框——加过一版 1px 发丝边框，会被 .food-row/.shopping-item/.stat-card/
 * .gps-record-row/.price-record-row 上用来标记状态（过期/临期/低库存/最低价…）的
 * border-left 色条盖掉（border 简写会把 border-left 一起重置），已经去掉。
 *
 * "缝隙透明"：食材列表外层那个 .content-card（现在多带一个 .food-list-card 标记类）本身
 * 不再有背景/模糊——它只是布局容器，真正的"磨砂卡片"是里面每一个独立的表头/食材行，
 * 容器透明之后行与行之间的缝隙才能露出后面模糊的背景图，而不是被容器自己的一层底色盖住。
 * 筛选标签栏（.category-tabs/.category-sub-tabs）刚好相反，是要看得见的一整条玻璃面板——
 * 见下面"液态玻璃分段控件"那一块的注释。
 * 背景图上再蒙一层黑/白磨砂遮罩（common.js applyBgImage 按 data-theme 决定颜色），让整页
 * 不管换成哪张背景图，深色模式始终是"暗"的基调、浅色模式始终是"亮"的基调。
 *
 * 变量分两层（primitives 原始色板 -> semantic 语义映射），写法和 light.css/dark.css 对齐。
 */

html[data-skin="liquid-glass"][data-theme="light"] {
    /* ---------- primitives ---------- */
    --glass-l-ink:      #0a0a0a;
    --glass-l-gray-700: #3c3c43;
    --glass-l-gray-500: #6c6c70;
    --glass-l-surface:  rgba(255, 255, 255, .85);
    --glass-l-sunken:   rgba(255, 255, 255, .68);
    --glass-l-hairline: rgba(0, 0, 0, .16);
    --glass-l-blue:     #007aff;
    --glass-l-green:    #248a3d;
    --glass-l-amber:    #9a5b00;
    --glass-l-red:      #d70015;
    --glass-l-indigo:   #5856d6;
    --glass-l-blue-strong: #0060cc;

    /* ---------- semantic（组件层只认这一层） ---------- */
    --font-family: -apple-system, 'SF Pro Display', 'PingFang SC', 'Microsoft YaHei', sans-serif;

    --text-primary:   var(--glass-l-ink);
    --text-secondary: var(--glass-l-gray-700);
    --text-light:     var(--glass-l-gray-500);

    --bg-primary:   var(--glass-l-surface);
    --bg-secondary: var(--glass-l-sunken);
    --bg-tertiary:  var(--glass-l-sunken);

    --border-color:  var(--glass-l-hairline);
    --border-radius: 16px;
    --card-radius:   12px;
    --pill-radius:   999px;
    --shadow-card:   0 8px 24px rgba(20, 30, 60, .12);

    --primary-color: var(--glass-l-blue);
    --success-color: var(--glass-l-green);
    --warning-color: var(--glass-l-amber);
    --danger-color:  var(--glass-l-red);
    --info-color:    var(--glass-l-indigo);

    --shadow-sm:  0 1px 3px rgba(0, 0, 0, .08);
    --shadow-md:  0 4px 14px rgba(0, 0, 0, .12);
    --shadow-lg:  0 10px 28px rgba(0, 0, 0, .16);
    --shadow-nav: 0 -2px 20px rgba(0, 0, 0, .1);

    --brand-color:        var(--glass-l-blue);
    --brand-color-strong: var(--glass-l-blue-strong);

    --blur: blur(24px) saturate(160%);
    color-scheme: light;
}

html[data-skin="liquid-glass"][data-theme="dark"] {
    /* ---------- primitives ---------- */
    --glass-d-paper:    #ffffff;
    --glass-d-gray-300: #e5e5e7;
    --glass-d-gray-500: #8e8e93;
    --glass-d-surface:  rgba(0, 0, 0, .7);
    --glass-d-sunken:   rgba(0, 0, 0, .55);
    --glass-d-hairline: rgba(255, 255, 255, .2);
    --glass-d-blue:     #0a84ff;
    --glass-d-green:    #30d158;
    --glass-d-amber:    #ff9f0a;
    --glass-d-red:      #ff453a;
    --glass-d-indigo:   #5e5ce6;
    --glass-d-blue-strong: #0060cc;

    /* ---------- semantic（组件层只认这一层） ---------- */
    --font-family: -apple-system, 'SF Pro Display', 'PingFang SC', 'Microsoft YaHei', sans-serif;

    --text-primary:   var(--glass-d-paper);
    --text-secondary: var(--glass-d-gray-300);
    --text-light:     var(--glass-d-gray-500);

    --bg-primary:   var(--glass-d-surface);
    --bg-secondary: var(--glass-d-sunken);
    --bg-tertiary:  var(--glass-d-sunken);

    --border-color:  var(--glass-d-hairline);
    --border-radius: 16px;
    --card-radius:   12px;
    --pill-radius:   999px;
    /* 补一圈 1px 内描边（inset box-shadow，不是 border）：卡片轮廓光靠"背景更暗一档"还是偏弱，
       尤其没背景图、缝隙里全是同一片渐变的时候。用 inset 而不是 border 简写，就不会像之前
       试过的 1px 发丝边框那样把 .food-row 等元素用 border-left 做的状态色条重置掉（见上面
       文件头注释）——box-shadow 是完全独立的属性，两边互不影响。 */
    --shadow-card:   0 8px 26px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .1);

    --primary-color: var(--glass-d-blue);
    --success-color: var(--glass-d-green);
    --warning-color: var(--glass-d-amber);
    --danger-color:  var(--glass-d-red);
    --info-color:    var(--glass-d-indigo);

    --shadow-sm:  0 1px 3px rgba(0, 0, 0, .3);
    --shadow-md:  0 4px 16px rgba(0, 0, 0, .4);
    --shadow-lg:  0 10px 30px rgba(0, 0, 0, .5);
    --shadow-nav: 0 -2px 22px rgba(0, 0, 0, .4);

    --brand-color:        var(--glass-d-blue);
    --brand-color-strong: var(--glass-d-blue-strong);

    --blur: blur(24px) saturate(170%) brightness(1.05);
    color-scheme: dark;
}

/* 页面背景（没设置自定义背景图时的兜底）：卡片/标签本身有 70%~85% 不透明度，容器之间、
   卡片缝隙里能看到这层浅蓝/深黑渐变——设置里传了自定义背景图之后，body 的背景图
   （内联 style，见 common.js applyBgImage，图上还叠了一层按深浅色模式变化的黑/白磨砂遮罩）
   会盖过这层渐变，缝隙和模糊里看到的就是那张背景图经模糊+遮罩处理后的样子 */
html[data-skin="liquid-glass"][data-theme="light"] body {
    background: linear-gradient(180deg, #eef3fb 0%, #dbe6f5 100%);
}
/* 2026-07-30：原来是 #05060a→#0d1220 这种接近纯黑的渐变，跟卡片自己的 rgba(0,0,0,.7)/
   .55 黑色玻璃底色亮度太接近——没背景图时缝隙里露出来的还是这层近黑渐变，卡片"更黑一点"
   的差异肉眼几乎分不出来，玻璃质感、卡片轮廓全部糊成一片。--blur 里那个 brightness(1.05)
   本来想补一点亮度，但 5% 是乘法，作用在接近 0 的亮度上还是接近 0，压根提不动。
   改成更深靛蓝而不是纯黑，把整页基础亮度提上去一档：卡片的黑色半透明底叠上去之后仍然比
   页面背景更暗，这时候"卡片是页面上一块更暗的玻璃"才分得出来，缝隙/页面本身也不再是纯黑。 */
html[data-skin="liquid-glass"][data-theme="dark"] body {
    background: linear-gradient(180deg, #12162a 0%, #202a4d 100%);
}

/* 主要卡片/面板/弹窗统一挂上毛玻璃模糊，配合半透明背景色形成"磨砂玻璃"质感 */
html[data-skin="liquid-glass"] .content-card,
html[data-skin="liquid-glass"] .stat-card,
html[data-skin="liquid-glass"] .bottom-nav,
html[data-skin="liquid-glass"] .pagination,
html[data-skin="liquid-glass"] .modal-content,
html[data-skin="liquid-glass"] .food-table-header,
html[data-skin="liquid-glass"] .food-row,
html[data-skin="liquid-glass"] .food-card,
html[data-skin="liquid-glass"] .recipe-card,
html[data-skin="liquid-glass"] .detail-box,
html[data-skin="liquid-glass"] .r-modal-box,
html[data-skin="liquid-glass"] .ing-suggestions,
html[data-skin="liquid-glass"] .cat-modal,
html[data-skin="liquid-glass"] .stat-box,
html[data-skin="liquid-glass"] .shopping-item,
html[data-skin="liquid-glass"] .quick-add-section,
html[data-skin="liquid-glass"] .store-group,
html[data-skin="liquid-glass"] #addNameSuggestions,
html[data-skin="liquid-glass"] .chart-card,
html[data-skin="liquid-glass"] .summary-card,
html[data-skin="liquid-glass"] .tc-box,
html[data-skin="liquid-glass"] #stat-menu-btn,
html[data-skin="liquid-glass"] #stat-drawer,
html[data-skin="liquid-glass"] .add-food-modal-content,
html[data-skin="liquid-glass"] #globalNameSuggestions,
html[data-skin="liquid-glass"] .store-ac-drop,
html[data-skin="liquid-glass"] .gps-record-row,
html[data-skin="liquid-glass"] .price-record-row {
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}

/* 列表/网格里的"项目框"（食材行、食谱卡、统计卡…）：换皮肤时页面级 CSS 里写死的圆角、
   投影完全没跟着变，只有背景色透了下去，卡片形状还是原版那套，磨砂质感无从谈起——这里把
   圆角、投影统一收到规格 token 上（rMd 12px / shadowCard），弹窗、下拉菜单、导航栏不在这个
   列表里，它们的圆角/投影跟"两侧贴边"或"底部固定"的布局是绑定的，贸然统一反而会破坏原有
   形状，继续只走上面那条 backdrop-filter 规则就够。
   不加 border：试过一版 1px 发丝边框，border 简写会把 .food-row/.shopping-item/.stat-card/
   .gps-record-row/.price-record-row 用 border-left 做的状态色条（过期/临期/低库存/最低价…）
   一起重置掉，视觉上等于把这些状态提示条冲没了，所以去掉，纯靠半透明背景+模糊来表现玻璃感。 */
html[data-skin="liquid-glass"] .content-card,
html[data-skin="liquid-glass"] .stat-card,
html[data-skin="liquid-glass"] .food-table-header,
html[data-skin="liquid-glass"] .food-row,
html[data-skin="liquid-glass"] .food-card,
html[data-skin="liquid-glass"] .recipe-card,
html[data-skin="liquid-glass"] .shopping-item,
html[data-skin="liquid-glass"] .quick-add-section,
html[data-skin="liquid-glass"] .store-group,
html[data-skin="liquid-glass"] .chart-card,
html[data-skin="liquid-glass"] .summary-card,
html[data-skin="liquid-glass"] .stat-box,
html[data-skin="liquid-glass"] .gps-record-row,
html[data-skin="liquid-glass"] .price-record-row,
html[data-skin="liquid-glass"] .pagination,
html[data-skin="liquid-glass"] .tc-box {
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-card);
}
/* .pagination 之前只挂了模糊，没给圆角/投影——.food-list-card 现在是透明的（见下面那条规则），
   分页条自己的实色背景（--bg-primary）直角边缘就露出来了，跟其他项目框一样得补圆角+投影；
   顶部间距（margin-top）已经在 common.css 的 .pagination 基础规则里加过，两套皮肤共用。 */

/* recipes.css 里 .recipe-card:hover 的选择器特异性比上面这条低，光靠它自己的 box-shadow
   声明盖不过来——悬浮抬升时单独换一个更重的投影，避免 hover 效果被摁成跟静止态一样平 */
html[data-skin="liquid-glass"] .recipe-card:hover {
    box-shadow: var(--shadow-lg);
}

/* 悬浮深浅切换按钮、主题切换按钮与下拉菜单同样玻璃化 */
html[data-skin="liquid-glass"] .dark-mode-btn,
html[data-skin="liquid-glass"] .skin-switch-btn,
html[data-skin="liquid-glass"] .skin-switch-menu {
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}

/* 筛选标签（存储区域/分类子标签、购物清单页"全部/待购买/已购买/按店铺"）、页头"+ 添加"按钮：
   theme3 里这类元素统一用 rPill（999px）的胶囊形状，页面级 CSS 给的是 6px/16px 的小圆角矩形，
   跟参考效果图里那种两端全圆的胶囊标签对不上，这里单独收到胶囊形状上 */
html[data-skin="liquid-glass"] .category-tab,
html[data-skin="liquid-glass"] .category-sub-tab,
html[data-skin="liquid-glass"] .filter-buttons .btn,
html[data-skin="liquid-glass"] .page-header-add-btn {
    border-radius: var(--pill-radius);
}

/* 顶部筛选标签栏（存储区域/分类、购物清单页的 .filter-buttons）改成 theme3
   [data-flair~="lg"] .tp-tabs 那种"液态玻璃"分段控件：整条标签栏收成一颗大胶囊，自己带
   玻璃背景+模糊+投影，上面叠一层斜向高光模拟玻璃对光线的折射；标签按钮本身不再各自上色，
   选中态由 common.js 里定位的 .tp-tab-thumb（一颗跟着选中项滑动的小胶囊）负责，切换标签时
   胶囊平滑滑过去，而不是每个按钮各自瞬间变色——这是"动效"的来源。跟食材行/表头要"缝隙透
   背景"是两种不同诉求，这里反过来就是要一整条看得见的玻璃面板，不透空。 */
html[data-skin="liquid-glass"] .category-tabs,
html[data-skin="liquid-glass"] .category-sub-tabs,
html[data-skin="liquid-glass"] .filter-buttons {
    position: relative;
    background: var(--bg-primary);
    border-bottom: none;
    border-radius: var(--pill-radius);
    box-shadow: var(--shadow-card);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    padding: 4px;
    margin: 8px 15px;
}
html[data-skin="liquid-glass"] .category-tabs::before,
html[data-skin="liquid-glass"] .category-sub-tabs::before,
html[data-skin="liquid-glass"] .filter-buttons::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(115deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .08) 32%, rgba(255, 255, 255, 0) 55%);
    mix-blend-mode: overlay;
}

/* 标签按钮不再自己上色，颜色/选中态全靠下面的滑动胶囊撑起来，按钮本身只负责文字 */
html[data-skin="liquid-glass"] .category-tab,
html[data-skin="liquid-glass"] .category-sub-tab,
html[data-skin="liquid-glass"] .filter-buttons .btn {
    position: relative;
    z-index: 1;
    background: transparent !important;
}
html[data-skin="liquid-glass"] .category-tab:hover,
html[data-skin="liquid-glass"] .category-sub-tab:hover,
html[data-skin="liquid-glass"] .filter-buttons .btn:hover:not(:disabled) {
    background: transparent !important;
}
html[data-skin="liquid-glass"] .category-tab.active,
html[data-skin="liquid-glass"] .category-sub-tab.active,
html[data-skin="liquid-glass"] .filter-buttons .btn.active {
    color: #ffffff;
    /* 存储区域标签的 --tab-color 是用户自己挑的（设置页颜色选择器），可能选到浅色，
       白字直接叠上去会看不清——加一圈深色描边兜底，不管滑动胶囊是什么颜色都还能看清字 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 4px rgba(0, 0, 0, .35);
}

/* 滑动指示胶囊：common.js 的 snapTabThumb() 按当前选中按钮的实际尺寸算出 width/transform，
   写成 inline style 再交给这里的 transition 做动画；--tab-color 有值时（存储区域自带颜色）
   跟着变色，没有就退回主题色 */
html[data-skin="liquid-glass"] .tp-tab-thumb {
    display: block;
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 0;
    z-index: 0;
    border-radius: var(--pill-radius);
    background: var(--tab-color, var(--primary-color));
    box-shadow: var(--shadow-card);
    opacity: 0;
    transition: transform .2s ease, width .2s ease, opacity .15s ease, background .2s ease;
    pointer-events: none;
}

/* 食材列表页/购物清单页同一个问题：表头/每一行（.food-table-header/.food-row/
   .shopping-item）本身已经是各自独立的磨砂卡片，外层包着的那个 .content-card
   （分别多带 .food-list-card / .shopping-list-card 标记）不该再罩一层自己的底色/投影/模糊，
   否则行与行之间的缝隙露出来的是这层外壳的颜色而不是背景图 */
html[data-skin="liquid-glass"] .food-list-card,
html[data-skin="liquid-glass"] .shopping-list-card {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* "加载中…"/"暂无数据"这类占位文字（.loading-spinner/.empty-state）本来是裸文字，颜色是
   --text-light 这种"次要文字"的浅灰/深灰，套在实色卡片背景上没问题，但食材列表/购物清单的
   外壳现在是透明的（见上面 .food-list-card/.shopping-list-card），这些占位文字直接露在
   模糊背景图上，对比度就看运气了——跟其他"项目框"一样补一层磨砂卡片背景兜底，不管背景图
   是什么内容都能看清 */
html[data-skin="liquid-glass"] .loading-spinner,
html[data-skin="liquid-glass"] .empty-state {
    background: var(--bg-primary);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-card);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    color: var(--text-secondary);
}

/* 已购买清单项（.shopping-item.purchased）原来是写死的浅绿背景 #f0fdf4 + opacity:.65——
   浅绿在深色模式下本来就刺眼，opacity 又是叠在玻璃卡片本已经半透明的基础上再打折，两层
   透明度一乘，文字基本糊没在背景图里。改成跟随主题的 --bg-secondary（磨砂卡片自带的
   "沉底"色调，已经比普通卡片更透一点，不需要再额外调 opacity），"已完成"这个语义交给
   左边的绿色色条 + 文字删除线就够，不用靠整块变暗/变绿 */
html[data-skin="liquid-glass"] .shopping-item.purchased {
    opacity: 1;
    background: var(--bg-secondary);
    border-left-color: var(--success-color);
}

/* 价格对比弹窗（购物清单页 .price-record-row / 食材编辑弹窗内联区块 .gps-record-row）里
   "最低价"/"计划购买"这两个高亮状态，跟上面 .shopping-item.purchased 是同一个问题：
   shopping-list.css/common.css 里写的是不跟主题变量走的写死浅色底（#ecfdf5/#eff6ff）+
   写死深色字（#1f2937）——这两行本来是特意给"底色不随模式变"这套设计配的深色字，深色模式下
   底色确实没变、还是浅色，所以文字本身读得出来，但整块浅色卡片杵在其它全部磨砂变暗的
   项目框中间，效果跟"已购买清单项"当初那次一样刺眼、像没切到深色模式。改成跟随
   --bg-secondary，状态改由边框颜色（成功色/信息色）表达，和列表其它状态色条保持同一套语言 */
html[data-skin="liquid-glass"] .price-record-row.cheapest,
html[data-skin="liquid-glass"] .gps-record-row.cheapest {
    background: var(--bg-secondary);
    border-color: var(--success-color);
}
html[data-skin="liquid-glass"] .price-record-row.wanted,
html[data-skin="liquid-glass"] .gps-record-row.wanted {
    background: var(--bg-secondary);
    border-color: var(--info-color);
}
html[data-skin="liquid-glass"] .price-record-row.cheapest .price-record-store,
html[data-skin="liquid-glass"] .price-record-row.wanted   .price-record-store,
html[data-skin="liquid-glass"] .price-record-row.wanted   .price-record-price,
html[data-skin="liquid-glass"] .gps-record-row.cheapest   .gps-store,
html[data-skin="liquid-glass"] .gps-record-row.wanted     .gps-store,
html[data-skin="liquid-glass"] .gps-record-row.wanted     .gps-price {
    color: var(--text-primary);
}
html[data-skin="liquid-glass"] .price-record-price.cheapest,
html[data-skin="liquid-glass"] .gps-price.cheapest {
    color: var(--success-color);
}

/* .btn-secondary 原来的底色写的是 var(--text-secondary)——这个变量本来是给"文字"用的，浅色
   模式下是深灰、深色模式下是浅灰（这样文字在各自的页面背景上才读得出来），拿来当按钮底色在
   原版皮肤下只是凑巧还过得去，liquid-glass 深色模式下 --text-secondary 是接近白色的浅灰
   （#e5e5e7），配按钮写死的白字基本看不出字——比价/扫码这两个按钮用的都是 .btn-secondary，
   问题出在这里，不是这两个按钮单独有什么特殊样式。
   深色模式下换成 --text-light 就够了：这个变量两套模式下都是同一档中灰（不像 text-secondary
   会随模式反转深浅），配白字读得清楚，深色界面里这块中灰也不显得突兀。 */
html[data-skin="liquid-glass"][data-theme="dark"] .btn-secondary {
    background-color: var(--text-light);
}
html[data-skin="liquid-glass"][data-theme="dark"] .btn-secondary:hover:not(:disabled) {
    background-color: var(--text-secondary);
}

/* 浅色模式不能照搬同一档中灰——液态玻璃整体是偏亮、偏透的调性，一块实心深灰配白字的按钮
   杵在一堆半透明浅色卡片中间会显得又重又突兀。改成跟 .category-tab 未选中态、卡片同一套
   "玻璃"语言：半透明浅色底 + 深色字，配一道细边框防止太融进背景、让人看得出这是个按钮。 */
html[data-skin="liquid-glass"][data-theme="light"] .btn-secondary {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
html[data-skin="liquid-glass"][data-theme="light"] .btn-secondary:hover:not(:disabled) {
    background-color: var(--bg-primary);
}