/* Carta · 主题层：调色板 + 超管深色皮肤。换肤改这里。 */
  /* v606：字体已自托管，见 /fonts.css（原 Google Fonts @import 已移除） */

  :root {
    --bg: #FAFAF8;
    --card: #FFFFFF;
    --surface: #F4F3EE;
    --me-off-bg: #E9E7DE;
    --text: #1A1A1A;
    --text-sub: #6B6B6B;
    --accent: #E85D3A;
    --accent-light: #FFF0EC;
    --accent-dark: #C94A2A;
    --green: #2D9F6F;
    --green-light: #E8F7F0;
    --border: #E8E8E4;
    --shadow: 0 2px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
    --radius: 12px;
    --nav-h: 56px;
    /* 🎨 v644：原先硬编码在 styles.css 里的三处顾客端背景，收进变量供换肤覆盖。
       默认值＝改造前的原值，浅色皮肤观感零变化。 */
    /* 🎨 v646：按钮外发光的色源。原先写死在 styles.css 的 .landing-cta 里，换肤后按钮变蓝、
       光晕还是橙的（Jay 报）。收进变量，往后新增皮肤自动跟着走。默认值＝改造前原值。 */
    --glow: 232,93,58;
    /* 🎨 v647：减菜时菜品卡的一闪反馈色。原先写死 '#F0EFEC' 在 app.src.js 的 addItem 里，
       换肤后加菜是 var(--accent-light)（跟着皮肤走）、减菜却是浅米色 → 星空下白闪。默认值＝改造前原值。 */
    --flash-minus: #F0EFEC;
    /* 🛒 v655/v656：购物车药丸的底色与字色。
       ⚠️ 必须按皮肤取反 —— 浮条底是 var(--text)，浅色皮肤下近黑、星空皮肤下近白，【两边是反的】。
          若两边都写死同一个值，必有一边变成同色底同色药丸（纯白在星空下只有 1.10:1，等于没有）。
       ⚠️ 也【不能共用同一支中性灰】：实测最优解 #797979 对两条浮条都只有 ~4:1，
          且药丸内文字仅 4.35:1，卡在 AA 4.5 之下 —— 既不够显眼、桌面端标签又不合格。
       版本史：v655 纯白 → v656 试中性灰 #DCDCDC → v657 回纯白（Jay：中性灰在近黑浮条上显闷）。
       浅色皮肤这一支【就用纯白】：近黑浮条 + 纯白药丸 = 17.40:1，是四种取值里最跳的。
       中性灰的顾虑（emoji 压在纯黑上难看）只存在于星空那一侧 —— 那边已改成天色同源的蓝，见 .skin-dark。 */
    --cart-chip: #FFFFFF;
    --cart-chip-fg: #1A1A1A;
    /* 🎨 v650：菜品图放大查看里【留白条】的底色。图片用 object-fit:contain 等比缩放，
       画幅比例与容器不一致时两侧（或上下）会露出这块底 —— 原先写死 '#F5F4F2' 在 app.src.js 里，
       星空皮肤下就是 Jay 报的「两侧的边是白色的」。默认值＝改造前原值。 */
    --media-bg: #F5F4F2;
    --rail: #F0EFEC;    /* 左侧分类栏底 */
    --cat-off-fg: #AEADAC; /* v665：分类栏「暂停/超时段」按钮的字色。等效于旧的 opacity:.5 —— 即 --text-sub 与栏底 --rail 各半，观感逐像素不变，但不再产生 opacity 图层 */
    --imgbg: #EEECEA;   /* 菜品图占位底 */
    --chip: #F0EFEC;    /* 菜号小标签底 */
  }

  /* ═══ 🧱 v814 界面隔离：三端各一整套调色变量（Jay：「让背景不通用，后台和用户的界面完全隔离开来」）═══
     <html data-surface> 在第一帧前由 index.html 的内联脚本打上（customer / work / hub / home）。
     · 改【顾客端】的背景 / 配色 → 只改 customer 这一块（皮肤 .skin-* 也只在顾客端生效）
     · 改【工作端】（柜台 / 厨房 / 出菜口 / 寿司吧 / 菜品编辑 / 设置端）→ 只改 work 这一块
     · 改【后台】→ 只改 hub 这一块（= 原 .hub-dark 的取值；.hub-dark 保留给非变量的后台样式）
     · 上面的 :root 只是出厂缺省（登录首页 home、以及万一没打上标记时兜底），三端都不读它的值 —— 改 :root 不会动到任何一端
     ⚠️ 三块的变量名必须一致、一个都不能少（少了就会回落到 :root，隔离出现缺口）；自检 ⑰ 会逐个核对。 */
  html[data-surface="customer"] {
    --bg: #FAFAF8;
    --card: #FFFFFF;
    --surface: #F4F3EE;
    --me-off-bg: #E9E7DE;
    --text: #1A1A1A;
    --text-sub: #6B6B6B;
    --accent: #E85D3A;
    --accent-light: #FFF0EC;
    --accent-dark: #C94A2A;
    --green: #2D9F6F;
    --green-light: #E8F7F0;
    --border: #E8E8E4;
    --shadow: 0 2px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
    --radius: 12px;
    --nav-h: 56px;
    --glow: 232,93,58;
    --flash-minus: #F0EFEC;
    --cart-chip: #FFFFFF;
    --cart-chip-fg: #1A1A1A;
    --media-bg: #F5F4F2;
    --rail: #F0EFEC;
    --cat-off-fg: #AEADAC;
    --imgbg: #EEECEA;
    --chip: #F0EFEC;
  }
  html[data-surface="work"] {
    --bg: #FAFAF8;
    --card: #FFFFFF;
    --surface: #F4F3EE;
    --me-off-bg: #E9E7DE;
    --text: #1A1A1A;
    --text-sub: #6B6B6B;
    --accent: #E85D3A;
    --accent-light: #FFF0EC;
    --accent-dark: #C94A2A;
    --green: #2D9F6F;
    --green-light: #E8F7F0;
    --border: #E8E8E4;
    --shadow: 0 2px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
    --radius: 12px;
    --nav-h: 56px;
    --glow: 232,93,58;
    --flash-minus: #F0EFEC;
    --cart-chip: #FFFFFF;
    --cart-chip-fg: #1A1A1A;
    --media-bg: #F5F4F2;
    --rail: #F0EFEC;
    --cat-off-fg: #AEADAC;
    --imgbg: #EEECEA;
    --chip: #F0EFEC;
  }
  html[data-surface="hub"] {
    --bg: #1E2530;
    --card: #2A3340;
    --surface: #232B38;
    --me-off-bg: #1C2330;
    --text: #E6EAF0;
    --text-sub: #A3ADBA;   /* 🧭 v861 后台灰字提亮：原 #8B95A3 在卡片 #2A3340 上只有 4.2:1，提到 5.6:1（≥ 4.5） */
    --accent: #E85D3A;
    --accent-light: rgba(232,93,58,0.18);
    --accent-dark: #C94A2A;
    --green: #2D9F6F;
    --green-light: rgba(45,159,111,0.20);
    --border: #39434F;
    --shadow: 0 2px 12px rgba(0,0,0,0.35);
    --shadow-lg: 0 10px 36px rgba(0,0,0,0.5);
    --radius: 12px;
    --nav-h: 56px;
    --glow: 232,93,58;
    --flash-minus: #F0EFEC;
    --cart-chip: #FFFFFF;
    --cart-chip-fg: #1A1A1A;
    --media-bg: #F5F4F2;
    --rail: #F0EFEC;
    --cat-off-fg: #AEADAC;
    --imgbg: #EEECEA;
    --chip: #F0EFEC;
  }


  /* ===== 后台·深蓝灰深色主题（ROLE='hub' 时 body 挂 .hub-dark；绝不影响顾客/员工/厨房/柜台端） ===== */
  .hub-dark {
    --bg: #1E2530;
    --card: #2A3340;
    --surface: #232B38;
    --me-off-bg: #1C2330;
    --text: #E6EAF0;
    --text-sub: #A3ADBA;   /* 🧭 v861 后台灰字提亮：原 #8B95A3 在卡片 #2A3340 上只有 4.2:1，提到 5.6:1（≥ 4.5） */
    --border: #39434F;
    --green-light: rgba(45,159,111,0.20);
    --accent-light: rgba(232,93,58,0.18);
    --shadow: 0 2px 12px rgba(0,0,0,0.35);
    --shadow-lg: 0 10px 36px rgba(0,0,0,0.5);
    background: #1E2530;
    color: var(--text);
  }
  #pageHub .ac-rail { background: #232B38; }
  #pageHub .ac-nav .ic { border-color: color-mix(in srgb, var(--ac,var(--accent)) 38%, transparent); }
  #pageHub .ac-panel.danger { border-color: #6E4248; background: #33292C; }
  #pageHub .ac-chip.off { background: rgba(229,62,62,0.22); color: #F0A0A0; }
  #pageHub .hub-link.dark { background: #39434F; color: #E6EAF0; }
  .hub-dark input, .hub-dark select, .hub-dark textarea { background: #1A212B; color: var(--text); }
  .hub-dark input::placeholder, .hub-dark textarea::placeholder { color: #6A7483; }
  #pageHub code { background: rgba(255,255,255,0.07); padding: 2px 6px; border-radius: 4px; font-size: 11px; }
  /* 后台深色：覆盖菜品编辑器/翻译页等写死的浅色表面（仅 hub 会话生效） */
  .hub-dark .me-cat-head { background: var(--surface); }
  .hub-dark .me-item { border-bottom-color: var(--border); }
  .hub-dark .me-item:nth-child(odd) { background: var(--surface); }
  .hub-dark .me-item:nth-child(even) { background: var(--card); }
  .hub-dark .me-item.me-dragging { background: var(--accent-light); }  /* v384 深色拖拽抬起态：压过斑马纹 */
  .hub-dark .toast { background: #11161F; }

/* ═══════════════════════════════════════════════════════════════════════
   🎨 v651 皮肤分层（Jay 2026-08-08 定：像 i18n.js 那样「加皮肤只动调色板」）

   三层，从通用到专属：
     :root         浅色基准（出厂皮肤）
     .skin-dark    ★【所有深色皮肤共用】—— 深色下该长什么样，与色相无关的全在这层
     .skin-<名字>  该皮肤自己的色相：强调色 + 背景填充 + 选中胶囊，六七行而已
                   🧱 v862 起不在本文件：写在 app.src.js 皮肤积木的 vars 里，第一次换肤时自动生成一张样式表（排在本文件之后）

   ⚠️ 两个 class 都挂在 <body> 上、特异性相同 → 【源码顺序决定胜负】，
      所以 .skin-<名字> 必须永远排在 .skin-dark 之后 —— 积木生成的样式表插在 <head> 末尾，天然在后。

   ⚠️ 派生变量（值里带 var() 的）只能写在这两层里，不能写进 styles.css 的 :root ——
      自定义属性在【声明所在元素】上求值，:root 是 <html>，那里永远是浅色调色板。
      v647 的「搜索框白底白字」就是这么来的。

   ═══ 🧱 v862 加 / 删一个皮肤 = 一块积木（只动 app.src.js，HTML / CSS 一个字都不用改）═══
     加：照抄 SKIN_COSMOS 写一个 SKIN_<名字>（id / n / d / gate / dark / vars，要动态背景再写 fx: '<特效id>'），放进 SKINS。
     删：从 SKINS 拿掉。正在用它的店自动回默认浅色；平台页会提示还有几家店存着它。
     动态背景是另一种积木（FXS，如 FX_STARS：layer + css + start/stop），几个皮肤可以共用一个特效。
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────── 通用深色层：任何深色皮肤共用的默认值，皮肤可逐条覆盖 ───────── */
:where(html[data-surface="customer"]) .skin-dark {
  /* 表面：背景交给 #skinBg 承担，其余一律用「白纱叠在背景上」，深浅只差不透明度 */
  --bg: transparent;
  --card: rgba(255,255,255,0.055);
  --surface: rgba(255,255,255,0.035);
  --me-off-bg: rgba(255,255,255,0.05);
  --rail: var(--card);                    /* 分类侧栏＝菜品卡同款底，调卡片时侧栏自动跟上 */
  --imgbg: rgba(255,255,255,0.07);
  --chip: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.10);
  /* 文字 */
  --text: #F2F4F8;
  --text-sub: #A8B0C4;
  --nav-fg: #BDC1C8;                      /* 顶/底/侧三条栏的未选中字色。🌠 v920 必须不透明：原来 rgba(255,255,255,.70)，背景流星会从字和图标的笔画里透出来，看着像盖在字上（等效色：.70 白叠在栏底上算出）*/
  --cat-off-fg: #717379;                  /* v665：= --nav-fg(.70) × 旧的 opacity(.5)，等效还原。🌠 v920 改成不透明等效色（.35 白叠在侧栏底上），理由同上 */
  --nav-fg-on: #FFFFFF;                   /* 同上，选中态（靠亮度差区分，不靠色相） */
  --on-light: #14161C;                    /* 压在【白底控件】上的字色：购物车浮条/提示条/白圆按钮 */
  /* 星空：药丸底 #2C3D54 —— 与背景天色 #1b2735 【同色相 ~213° + 同饱和度 ~31%】，只是更亮，
     所以它读起来就是「夜空的一小块」，而不是贴上去的一颗灰疙瘩。
     🔒 明度锁死：相对亮度与 v656 的中性灰 #3C3C3C 完全相同（0.04519），
        因此对比度【一个数都没变】—— vs 浮条 10.02:1、白字 11.03:1。
        调色相/饱和时务必守住这个亮度，否则显眼度会跟着漂。
     版本史：v655 用 var(--on-light) 近黑（Jay：🛒 压在纯黑上不好看）
             → v656 改纯中性灰 #3C3C3C
             → v657 加蓝调、与背景同源（本版）。
     🔧 嫌蓝得太浓就往中性收：#323D4A（饱和 20%）或 #363D45（12%），三者亮度完全一致。 */
  --cart-chip: #2C3D54;
  --cart-chip-fg: #FFFFFF;
  /* 语义色（深色下的默认值；皮肤想换色相就覆盖） */
  --green: #34D399;
  --green-light: rgba(52,211,153,0.18);
  --shadow: 0 2px 14px rgba(0,0,0,0.40);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.60);
  /* 不透明表面：深色下必须显式给色，【不许写 transparent 去蹭背景】——
     v649 教训：透明元素一旦所在图层拿不到背景层就会泛白 */
  --skin-fill: #0B0D14;                   /* 背景层 + 两块满屏锁的填充（可以是渐变） */
  /* 🚨 v658：整页的【不透明兜底色】。正常渲染时永远看不见 —— #skinBg 是 fixed + inset:0，
     把它完全盖住。它存在的唯一意义是：万一合成器某一帧没把背景层的纹理拿上来，
     露出来的是这块深色，而不是浏览器默认的【白】。
     白闪的成因一直是「半透明浅色元素 + 背后没有背景」= 白纱叠在空白底上；
     堵住「空白底 = 白」这一环，整类故障就再也显不出来，且不花一分显存、不改任何观感。
     必须是【不带渐变的纯色】—— background-color 不接受渐变。 */
  --skin-base: #0B0D14;
  --sheet: #12151F;                       /* 底部弹层（属性/购物车/选菜/套餐选餐） */
  --media-bg: #0D1016;                    /* 看大图时 object-fit:contain 露出的留白条 */
  --sticky: 9,10,15;                      /* 粘性分类标题玻璃底的 RGB（配 alpha 用） */
  --flash-minus: rgba(255,255,255,0.12);  /* 减菜一闪，与加菜的 accent-light 同量级 */
  --pill: var(--accent);                  /* 分类选中胶囊；皮肤可换成渐变 */
  /* 派生变量：必须在本层重声明，理由见顶部注释 */
  --input: var(--surface);
  --border-d: var(--border);
  --indigo: var(--accent);
  --indigo-light: var(--accent-light);
  color: var(--text);
}