/* ==========================================================================
   液态玻璃风格（style-glass.css）
   只在 <html data-style="glass"> 时生效，默认的简约风格完全不受影响。
   思路：配色仍由 _skin.html 的 CSS 变量提供，这里只换「材质」——
   半透明磨砂面板 + 顶部高光 + 描边渐变 + 柔光景深。
   ========================================================================== */

html[data-style="glass"]{
  /* 玻璃材质参数：深浅色皮肤共用，靠 --glass-tint 区分 */
  --glass-tint: 55%;
  --glass-blur: 18px;
  --glass-edge: rgba(255,255,255,.65);
  --glass-edge-2: rgba(255,255,255,.12);
  --glass-hi: rgba(255,255,255,.6);
  --glass-shadow: 0 8px 32px rgba(16,24,40,.12), 0 1px 2px rgba(16,24,40,.06);
  --glass-shadow-lift: 0 14px 44px rgba(16,24,40,.18), 0 2px 6px rgba(16,24,40,.08);
  --r: 12px;
  --r-lg: 18px;
  --glass-grain: none;
}

/* 深色皮肤（含自定义深色）下，高光减弱、描边转冷，避免"死白边" */
html[data-style="glass"][data-dark="1"]{
  --glass-tint: 72%;
  --glass-edge: rgba(255,255,255,.14);
  --glass-edge-2: rgba(255,255,255,.04);
  --glass-hi: rgba(255,255,255,.16);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.42), 0 1px 2px rgba(0,0,0,.3);
  --glass-shadow-lift: 0 14px 44px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
}

/* ---------- 背景：两团流动光斑，玻璃才有东西可"透" ----------
   仅在用户没有自定义背景图（body 无 has-bg 类）时叠加光斑；
   有背景图时让 _skin.html 的 background-image 规则自然生效，这里不碰。 */
html[data-style="glass"] body:not(.has-bg){
  background-image:
    radial-gradient(56vw 46vw at 6% -8%, color-mix(in srgb,var(--brand-flat) 42%,transparent), transparent 72%),
    radial-gradient(50vw 42vw at 100% 2%, color-mix(in srgb,var(--brand-flat) 26%,transparent), transparent 70%),
    radial-gradient(64vw 52vw at 60% 106%, color-mix(in srgb,var(--ink) 12%,transparent), transparent 74%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* 黑白：纯白底，不铺任何带颜色的光斑，层次全靠黑线框与阴影 */
html[data-style="glass"][data-theme="mono"] body:not(.has-bg){
  background-image:none;
}
html[data-style="glass"][data-theme="gold"] body:not(.has-bg){
  background-image:
    radial-gradient(58vw 46vw at 5% -10%, rgba(255,255,255,.9), transparent 68%),
    radial-gradient(48vw 40vw at 101% -2%, color-mix(in srgb,var(--brand-flat) 14%,transparent), transparent 68%),
    radial-gradient(64vw 50vw at 58% 110%, color-mix(in srgb,var(--brand-flat) 8%,transparent), transparent 70%);
}
/* 红色主题：正红大光斑显燥，同样淡化为点缀 */
html[data-style="glass"][data-theme="red"] body:not(.has-bg){
  background-image:
    radial-gradient(58vw 46vw at 5% -10%, rgba(255,255,255,.9), transparent 68%),
    radial-gradient(48vw 40vw at 101% -2%, color-mix(in srgb,var(--brand-flat) 13%,transparent), transparent 68%),
    radial-gradient(64vw 50vw at 58% 110%, color-mix(in srgb,var(--ink) 4%,transparent), transparent 70%);
}

/* ---------- 渐变彩皮肤：三团彩色光斑各占一角，整页形成一条斜向渐变 ----------
   --brand-c1/c2/c3 是主题渐变的三段色标（见 _skin.html），分别铺在不同角落，
   比"一片主色"更有层次；浓度压在 14~30%，玻璃面板透过去才通透而不糊。 */
html[data-style="glass"][data-grad="1"] body:not(.has-bg){
  background-image:
    radial-gradient(52vw 44vw at 2% -8%, color-mix(in srgb,var(--brand-c1) 30%,transparent), transparent 70%),
    radial-gradient(46vw 40vw at 52% -14%, color-mix(in srgb,var(--brand-c2) 22%,transparent), transparent 68%),
    radial-gradient(54vw 46vw at 104% 0%, color-mix(in srgb,var(--brand-c3) 28%,transparent), transparent 70%),
    radial-gradient(70vw 56vw at 66% 108%, color-mix(in srgb,var(--brand-c2) 14%,transparent), transparent 72%);
}

/* ---------- 玻璃面板 ---------- */
html[data-style="glass"] .card,
html[data-style="glass"] .stat,
html[data-style="glass"] .sidebar,
html[data-style="glass"] .modal,
html[data-style="glass"] .mcard,
html[data-style="glass"] .m-top,
html[data-style="glass"] .user-drop,
html[data-style="glass"] .preview-box,
html[data-style="glass"] .media-item{
  background:color-mix(in srgb,var(--panel) var(--glass-tint),transparent);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  border:1px solid transparent;
  box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  /* 描边用渐变边框模拟玻璃边缘的折射亮线 */
  border-color:color-mix(in srgb,var(--glass-edge) 70%,var(--line));
}

/* ---------- 侧栏更薄 ----------
   侧栏整条贴着页面边缘，底下正是背景光斑最浓的地方：压低 tint、加大模糊，
   让光斑透进来，看起来是一块薄玻璃而不是白色板子。卡片保持 55%，正文不发飘。 */
html[data-style="glass"] .sidebar{--glass-tint:28%;--glass-blur:30px}
html[data-style="glass"][data-dark="1"] .sidebar{--glass-tint:52%;--glass-blur:24px}
/* 飞出的副面板与侧栏同一块玻璃，但离正文近、底下没有光斑，稍厚一点保住可读性 */
html[data-style="glass"] .nav-fly{
  background:color-mix(in srgb,var(--panel) 66%,transparent);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border-color:color-mix(in srgb,var(--glass-edge) 70%,var(--line));
  box-shadow:var(--glass-shadow-lift), inset 0 1px 0 var(--glass-hi)}
html[data-style="glass"] .nf-notch{
  background:color-mix(in srgb,var(--panel) 66%,transparent);
  border-color:color-mix(in srgb,var(--glass-edge) 70%,var(--line))}

/* 登录页合并成一张卡后，表单区不再是独立面板（否则接缝处会重影） */
html[data-style="glass"] .login-box{
  background:transparent;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}

/* 卡片顶部那道高光 */
html[data-style="glass"] .card,
html[data-style="glass"] .stat{
  position:relative;
  overflow:hidden;
}

/* 侧栏不参与玻璃滤镜：它一旦有 backdrop-filter，就会自建堆叠上下文，
   把侧栏里的智能助手面板困在里面，从而被右侧内容卡片盖住。
   这里改为"半透明底 + 右侧亮边"来保留玻璃观感，但不用滤镜。 */
html[data-style="glass"] .sidebar{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  background:color-mix(in srgb,var(--panel) 82%,transparent);
}
/* 助手本体与面板始终压在所有内容之上 */
html[data-style="glass"] .bot-wrap{z-index:2000000}

/* 顶栏里的悬停提示（换肤/风格按钮的 .tip）也容易被后面的玻璃卡片盖住：
   给顶栏整体一个高于内容区的层级，提示随顶栏一起浮在最上层。 */
html[data-style="glass"] .topbar{position:relative;z-index:120}
html[data-style="glass"] .card::before,
html[data-style="glass"] .stat::before{
  content:"";position:absolute;left:0;right:0;top:0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,var(--glass-hi),transparent 88%);
  opacity:.5;
}
html[data-style="glass"] .card:hover,
html[data-style="glass"] .stat:hover{
  box-shadow:var(--glass-shadow-lift), inset 0 1px 0 var(--glass-hi);
}

/* 侧边栏：整块玻璃，右侧留一条亮边而不是实线 */
html[data-style="glass"] .sidebar{
  border-right:1px solid color-mix(in srgb,var(--glass-edge) 55%,var(--line));
  background:color-mix(in srgb,var(--panel) calc(var(--glass-tint) + 8%),transparent);
}
html[data-style="glass"] .brand-mark,
html[data-style="glass"] .login-box .logo{
  /* 渐变皮肤下 --brand 已是渐变，叠加会把渐变冲掉，这里用 --brand-flat 兜住纯色皮肤 */
  background:linear-gradient(135deg,var(--brand-flat),color-mix(in srgb,var(--brand-flat) 55%,var(--ink)));
  background-image:linear-gradient(135deg,var(--brand-flat),color-mix(in srgb,var(--brand-flat) 55%,var(--ink)));
  box-shadow:0 4px 14px color-mix(in srgb,var(--brand-flat) 38%,transparent),
             inset 0 1px 0 rgba(255,255,255,.45);
}
/* 渐变彩皮肤：品牌块与主按钮直接铺彩色渐变带 */
html[data-style="glass"][data-grad="1"] .brand-mark,
html[data-style="glass"][data-grad="1"] .login-box .logo{
  background-image:var(--brand);
  box-shadow:0 4px 16px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.45);
}
html[data-style="glass"][data-grad="1"] .btn.primary{
  background:var(--brand);
  background-image:var(--brand);
}
html[data-style="glass"] .nav a{border-radius:10px}
html[data-style="glass"] .nav a.on{
  background:color-mix(in srgb,var(--brand-flat) 14%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 10px color-mix(in srgb,var(--brand-flat) 16%,transparent);
}

/* ---------- 顶栏按钮与控件：一体玻璃 ---------- */
/* .tb-user（用户名）不参与玻璃化：保持纯文字，悬停浅灰即可 */
html[data-style="glass"] .tb-icon,
html[data-style="glass"] .btn,
html[data-style="glass"] .chip,
html[data-style="glass"] .chip-check,
html[data-style="glass"] .filters input,
html[data-style="glass"] .filters select{
  background:color-mix(in srgb,var(--panel) 72%,transparent);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  backdrop-filter:blur(10px) saturate(160%);
  border:1px solid color-mix(in srgb,var(--glass-edge) 62%,var(--line));
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 1px 2px rgba(16,24,40,.05);
  border-radius:10px;
}
html[data-style="glass"] .tb-user{
  background:transparent;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
/* 企微绿按钮不参与玻璃化（半透明白底 + 白字 = 看不见） */
html[data-style="glass"] .btn.wxbtn{
  background:#0082ef;border-color:#0082ef;color:#fff;
  -webkit-backdrop-filter:none;backdrop-filter:none}
html[data-style="glass"] .btn.wxbtn:hover{background:#0072d6;border-color:#0072d6;color:#fff}
html[data-style="glass"] .tb-user:hover{background:var(--gray-soft)}
html[data-style="glass"] .tb-icon:hover,
html[data-style="glass"] .btn:hover{
  background:color-mix(in srgb,var(--brand-flat) 16%,transparent);
  border-color:color-mix(in srgb,var(--brand-flat) 46%,transparent);
}
html[data-style="glass"] .btn.primary{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--brand-flat) 88%,#fff),
    var(--brand-flat));
  border-color:color-mix(in srgb,var(--brand-flat) 70%,transparent);
  box-shadow:0 4px 16px color-mix(in srgb,var(--brand-flat) 38%,transparent),
             inset 0 1px 0 rgba(255,255,255,.5);
  color:var(--on-brand);
}
html[data-style="glass"] .btn.primary:hover{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--brand-flat) 96%,#fff),
    color-mix(in srgb,var(--brand-flat) 88%,var(--ink)));
}

/* 输入框：内凹玻璃，聚焦时染成主色光晕 */
html[data-style="glass"] .field input,
html[data-style="glass"] .field select,
html[data-style="glass"] .field textarea,
html[data-style="glass"] .big-input,
html[data-style="glass"] .inline-form input{
  background:color-mix(in srgb,var(--panel) 55%,transparent);
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  box-shadow:inset 0 1px 2px rgba(16,24,40,.06), inset 0 -1px 0 var(--glass-hi);
  border-radius:10px;
}
html[data-style="glass"] .field input:focus,
html[data-style="glass"] .field select:focus,
html[data-style="glass"] .field textarea:focus,
html[data-style="glass"] .big-input:focus,
html[data-style="glass"] .filters input:focus,
html[data-style="glass"] .filters select:focus{
  border-color:var(--brand-flat);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-flat) 18%,transparent),
             inset 0 1px 2px rgba(16,24,40,.04);
}

/* ---------- 标签：半透明玻璃小药丸 ---------- */
html[data-style="glass"] .tag{
  background:color-mix(in srgb,var(--ink) 7%,transparent);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  border-radius:999px;
  padding:0 10px;
}
html[data-style="glass"] .tag.ok{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
html[data-style="glass"] .tag.warn{background:color-mix(in srgb,var(--warn) 17%,transparent);color:var(--warn)}
html[data-style="glass"] .tag.bad,
html[data-style="glass"] .tag.urgent{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}
html[data-style="glass"] .tag.info{background:color-mix(in srgb,var(--brand-flat) 15%,transparent);color:var(--brand-flat)}

/* ---------- 表格：玻璃上的"无边框"表格 ---------- */
html[data-style="glass"] .tb th{
  background:color-mix(in srgb,var(--ink) 5%,transparent);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 9%,transparent);
}
html[data-style="glass"] .tb td{border-bottom:1px solid color-mix(in srgb,var(--ink) 6%,transparent)}
html[data-style="glass"] .tb tr:hover td{background:color-mix(in srgb,var(--brand-flat) 8%,transparent)}

/* ---------- 数字与进度条：发光 ---------- */
html[data-style="glass"] .stat .num{letter-spacing:-.6px}
html[data-style="glass"] .stat.hl .num{
  color:var(--brand-flat);
  text-shadow:0 0 24px color-mix(in srgb,var(--brand-flat) 42%,transparent);
}
html[data-style="glass"] .progress{
  background:color-mix(in srgb,var(--ink) 10%,transparent);
  box-shadow:inset 0 1px 2px rgba(16,24,40,.12);
  border-radius:999px;
}
html[data-style="glass"] .progress>i{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--brand-flat) 62%,#fff),
    var(--brand-flat));
  box-shadow:0 0 12px color-mix(in srgb,var(--brand-flat) 55%,transparent);
  border-radius:999px;
}
/* 渐变彩皮肤：进度条整条走彩色，比单色更有"能耗在跑"的感觉 */
html[data-style="glass"][data-grad="1"] .progress>i{
  background:var(--brand);
  background-image:linear-gradient(90deg,var(--brand));
}

/* ---------- 看板车间切换条：玻璃胶囊 ---------- */
html[data-style="glass"] .ws-seg{
  background:color-mix(in srgb,var(--panel) 52%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  backdrop-filter:blur(14px) saturate(170%);
  border:1px solid color-mix(in srgb,var(--glass-edge) 55%,transparent);
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 4px 18px rgba(16,24,40,.07);
  border-radius:999px;
  padding:5px;
}
html[data-style="glass"] .ws-seg .seg-b{border-radius:999px}
html[data-style="glass"] .ws-seg .seg-b.on{
  background:color-mix(in srgb,var(--panel) 92%,transparent);
  box-shadow:0 2px 8px color-mix(in srgb,var(--brand-flat) 20%,rgba(16,24,40,.06)),
             inset 0 1px 0 rgba(255,255,255,.6);
}
html[data-style="glass"] .ws-note{
  background:color-mix(in srgb,var(--brand-flat) 12%,transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb,var(--brand-flat) 20%,transparent);
  border-radius:12px;
}

/* ---------- 弹层：厚玻璃 + 遮罩 ---------- */
html[data-style="glass"] .modal-mask{
  background:color-mix(in srgb,var(--ink) 34%,transparent);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
html[data-style="glass"] .modal{
  background:color-mix(in srgb,var(--panel) 82%,transparent);
  -webkit-backdrop-filter:blur(26px) saturate(190%);
  backdrop-filter:blur(26px) saturate(190%);
  box-shadow:0 30px 80px rgba(16,24,40,.28), inset 0 1px 0 var(--glass-hi);
  border-radius:20px;
}
html[data-style="glass"] .sk-ft{
  background:color-mix(in srgb,var(--ink) 4%,transparent);
  border-radius:0 0 20px 20px;
}
html[data-style="glass"] .user-drop{
  background:color-mix(in srgb,var(--panel) 82%,transparent);
  -webkit-backdrop-filter:blur(24px) saturate(190%);
  backdrop-filter:blur(24px) saturate(190%);
  border-radius:14px;
  box-shadow:0 16px 44px rgba(16,24,40,.2), inset 0 1px 0 var(--glass-hi);
}

/* ---------- 时间轴 / 二维码 / 媒体 ---------- */
html[data-style="glass"] .tl-item.done .tl-dot,
html[data-style="glass"] .step.done .dot{
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 16%,transparent);
}
html[data-style="glass"] .tl-item.cur .tl-dot,
html[data-style="glass"] .step.cur .dot{
  box-shadow:0 0 0 5px color-mix(in srgb,var(--brand-flat) 18%,transparent);
}
html[data-style="glass"] .qr-box img,
html[data-style="glass"] .ps-qr img{
  border-radius:10px;
  background:#fff;
}
html[data-style="glass"] .media-item{border-radius:14px}
html[data-style="glass"] .media-item:hover{
  border-color:color-mix(in srgb,var(--brand-flat) 45%,transparent);
  box-shadow:var(--glass-shadow-lift);
}

/* ---------- 登录页 ---------- */
html[data-style="glass"] .login-wrap{
  background:radial-gradient(60vw 50vw at 20% 0%, color-mix(in srgb,var(--brand-flat) 26%,transparent), transparent 70%),
             radial-gradient(50vw 40vw at 92% 92%, color-mix(in srgb,var(--brand-flat) 16%,transparent), transparent 72%);
}
html[data-style="glass"][data-grad="1"] .login-wrap{
  background:
    radial-gradient(56vw 48vw at 8% -6%, color-mix(in srgb,var(--brand-c1) 34%,transparent), transparent 70%),
    radial-gradient(48vw 42vw at 58% -12%, color-mix(in srgb,var(--brand-c2) 26%,transparent), transparent 70%),
    radial-gradient(54vw 46vw at 102% 6%, color-mix(in srgb,var(--brand-c3) 32%,transparent), transparent 70%),
    radial-gradient(70vw 56vw at 74% 106%, color-mix(in srgb,var(--brand-c2) 16%,transparent), transparent 74%);
}
html[data-style="glass"][data-theme="mono"] .login-wrap{
  background:radial-gradient(60vw 50vw at 20% 0%, rgba(255,255,255,.9), transparent 68%),
             radial-gradient(50vw 40vw at 92% 92%, color-mix(in srgb,var(--ink) 5%,transparent), transparent 72%);
}
html[data-style="glass"][data-theme="gold"] .login-wrap,
html[data-style="glass"][data-theme="red"] .login-wrap{
  background:radial-gradient(60vw 50vw at 20% 0%, rgba(255,255,255,.88), transparent 68%),
             radial-gradient(50vw 40vw at 92% 92%, color-mix(in srgb,var(--brand-flat) 10%,transparent), transparent 70%);
}

/* ---------- 移动报工页 ---------- */
html[data-style="glass"] .msubmit{
  background:color-mix(in srgb,var(--panel) 78%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
  border-top:1px solid color-mix(in srgb,var(--glass-edge) 50%,transparent);
}

/* ---------- 兼容性兜底 ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-style="glass"] .card,
  html[data-style="glass"] .stat,
  html[data-style="glass"] .sidebar,
  html[data-style="glass"] .modal{
    background:color-mix(in srgb,var(--panel) 96%,transparent);
  }
}

/* 打印时一律回到白纸，别把毛玻璃打到纸上 */
@media print{
  html[data-style="glass"] body{background-image:none!important}
  html[data-style="glass"] .card,
  html[data-style="glass"] .stat,
  html[data-style="glass"] .modal{
    background:#fff!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    box-shadow:none!important;
  }
  html[data-style="glass"] .card::before{display:none}
}

/* 筛选下拉面板要从卡片头里弹出来，卡片不能裁切；
   高光层改用圆角自身裁切补回 */
html[data-style="glass"] .card{overflow:visible}
html[data-style="glass"] .card::before{border-radius:var(--r-lg)}

/* 员工与权限 → 角色权限：这一页卡片大、滚动长，毛玻璃滤镜每帧都要重算模糊，
   滚轮滑起来发卡。改为不透明底 + 普通投影，观感几乎不变但滚动立刻顺滑。 */
html[data-style="glass"] .pm-side,
html[data-style="glass"] .pm-panel{
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background:var(--panel);
  box-shadow:var(--shadow)}
html[data-style="glass"] .pm-side::before,
html[data-style="glass"] .pm-panel::before{display:none}
html[data-style="glass"] .pm-side.stuck,
html[data-style="glass"] .pm-panel:hover{
  box-shadow:0 10px 28px -14px rgba(20,30,60,.35)}

/* ============================================================
   旧内核降级（Chromium 111 以下：Win7 的 Edge 109、部分国产壳浏览器等）。
   这些浏览器不认识 color-mix()，玻璃皮肤里所有内嵌它的声明会整体失效，
   失效后虽然会回退到 style.css 的基线样式，但登录页和高频组件再显式兜
   一遍，保证旧浏览器"能看能用"。支持 color-mix 的新内核忽略整块。
   ============================================================ */
@supports not (color: color-mix(in srgb, #fff, #000)){
  /* 登录卡 logo：主色渐变方块 + 白色对钩图形（图形原用 inset 简写） */
  html[data-style="glass"] .login-box .logo,
  html[data-style="glass"] .brand-mark{
    background:linear-gradient(135deg,var(--brand-flat),var(--brand-d));
    background-image:linear-gradient(135deg,var(--brand-flat),var(--brand-d));
    box-shadow:0 4px 14px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.45);
  }
  html[data-style="glass"] .login-box .logo::after,
  html[data-style="glass"] .brand-mark::after{top:8px;right:8px;bottom:8px;left:8px}

  /* 主按钮：主色实心，不依赖半透明混合 */
  html[data-style="glass"] .btn.primary{
    background:var(--brand);background-image:var(--brand);
    border-color:var(--brand-flat);color:var(--on-brand);
    box-shadow:0 4px 16px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.5);
  }
  html[data-style="glass"] .btn.primary:hover{
    background:var(--brand-d);background-image:var(--brand-d);border-color:var(--brand-d);
  }
  html[data-style="glass"] .btn:hover,
  html[data-style="glass"] .tb-icon:hover{
    background:var(--brand-soft);border-color:var(--brand-flat);
  }

  /* 通用按钮 / 筛选控件：实底白 + 实线边 */
  html[data-style="glass"] .btn,
  html[data-style="glass"] .chip,
  html[data-style="glass"] .chip-check,
  html[data-style="glass"] .filters input,
  html[data-style="glass"] .filters select{
    background:var(--panel);
    border:1px solid var(--line);
  }

  /* 输入框：白底实线边，聚焦主色光圈 */
  html[data-style="glass"] .field input,
  html[data-style="glass"] .field select,
  html[data-style="glass"] .field textarea,
  html[data-style="glass"] .big-input,
  html[data-style="glass"] .inline-form input{
    background:var(--panel);
    border:1px solid var(--line);
    box-shadow:inset 0 1px 2px rgba(16,24,40,.06);
  }
  html[data-style="glass"] .field input:focus,
  html[data-style="glass"] .field select:focus,
  html[data-style="glass"] .field textarea:focus,
  html[data-style="glass"] .big-input:focus,
  html[data-style="glass"] .filters input:focus,
  html[data-style="glass"] .filters select:focus{
    border-color:var(--brand-flat);
    box-shadow:0 0 0 3px var(--brand-glow);
  }

  /* 卡片：玻璃半透明失效时保证有实底和描边 */
  html[data-style="glass"] .card,
  html[data-style="glass"] .stat{border-color:var(--line)}

  /* 侧栏：白底实线亮边 */
  html[data-style="glass"] .sidebar{
    background:var(--panel);
    border-right:1px solid var(--line);
  }

  /* 标签药丸：浅色实底 + 彩字 */
  html[data-style="glass"] .tag{background:var(--gray-soft)}
  html[data-style="glass"] .tag.ok{background:var(--ok-soft);color:var(--ok)}
  html[data-style="glass"] .tag.warn{background:var(--warn-soft);color:var(--warn)}
  html[data-style="glass"] .tag.bad,
  html[data-style="glass"] .tag.urgent{background:var(--bad-soft);color:var(--bad)}
  html[data-style="glass"] .tag.info{background:var(--brand-soft);color:var(--brand-flat)}

  /* 表格：实线分隔 */
  html[data-style="glass"] .tb th{
    background:var(--gray-soft);
    border-bottom:1px solid var(--line);
  }
  html[data-style="glass"] .tb td{border-bottom:1px solid var(--line2)}
  html[data-style="glass"] .tb tr:hover td{background:var(--brand-soft)}
}

/* ================= 工单优先级：玻璃皮肤下的实心态 ================= */
/* 特急在玻璃上也保持实底红——重色块是"插单"的视觉信号，不能淡成一团雾 */
html[data-style="glass"] .tag.hot{
  background:#cf1322;color:#fff;font-weight:600;letter-spacing:.3px;
  border:1px solid rgba(255,255,255,.28);
}
html[data-style="glass"] .btn.prio-flash.on{
  background:#cf1322;border-color:#cf1322;color:#fff;
}
html[data-style="glass"] .prio-opt{background:rgba(255,255,255,.06)}
html[data-style="glass"][data-dark="1"] .prio-opt{background:rgba(255,255,255,.04)}
html[data-style="glass"] .prio-btn{background:rgba(255,255,255,.08);color:var(--ink2)}
html[data-style="glass"] .prio-btn.p0.on{background:var(--gray-soft);color:var(--ink)}
html[data-style="glass"] .prio-btn.p1.on{background:#cf1322;border-color:#cf1322;color:#fff}
html[data-style="glass"] .prio-btn.p2.on{background:#8a0b17;border-color:#8a0b17;color:#fff}

/* ================= 商品库：与全站同一块玻璃（宣纸版） ================= */
/* 商品库在页面内把 --panel 换成了暖白（宣纸），这里继续用 var(--panel) 做 tint，
   于是同一套玻璃材质自然变成"雾面宣纸"；顶部那道品牌发丝线由页面自己画。 */
html[data-style="glass"] .mk-wrap{
  background:color-mix(in srgb,var(--panel) var(--glass-tint),transparent);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(170%);
  backdrop-filter:blur(var(--glass-blur)) saturate(170%);
  border-color:color-mix(in srgb,var(--glass-edge) 70%,var(--line));
  box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hi);
}
html[data-style="glass"] .mk-pop{
  background:color-mix(in srgb,var(--panel) 86%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border-color:color-mix(in srgb,var(--glass-edge) 70%,var(--line));
  box-shadow:var(--glass-shadow-lift);
}
/* 抽屉与弹窗是从正文上浮出来的，透太多会看不清表单，压厚一点 */
html[data-style="glass"] .mk-drawer,
html[data-style="glass"] .mk-bp{
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  -webkit-backdrop-filter:blur(30px) saturate(170%);
  backdrop-filter:blur(30px) saturate(170%);
}
/* 输入类控件的底不再统一刷白：这一页要的是"纸上的线"，填充交给页面自己控制
   （.mk-search 是下划线式、.mk-db/.mk-xgrid 是透明底），这里一律不插手。 */