/* 鱼麦多插件 · 液态玻璃统一皮肤层（4 插件共用，四份必须逐字节一致，改此文件请同步四份并核对哈希）。
   加载顺序：tokens → [base] → styles → glass（本层最后加载，负责统一质感覆盖）。
   规则：
   - backdrop-filter 只加在末端内容容器（卡片/弹窗盒/抽屉盒/小卡），绝不加在 body/.tab-pane 等含 fixed 后代的祖先；
   - 辉光背景走 body::before 固定层，不用 background-attachment: fixed（Safari iframe 抖动）；
   - sticky 表头一律近实色防透字；输入控件/.arm-confirm/表格行底色为实色例外，本层不碰；
   - toast 不动定位与 filter（JS 会动态改锚定），仅调圆角阴影；.switch 语义两套，本层完全不碰。 */

/* ═══ 1. 皮肤变量 ═══ */
:root {
  --glass-card: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.92);
  --glass-soft: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-blur: 14px;
  --glass-blur-strong: 22px;
  --glass-shadow: 0 4px 24px rgba(31, 35, 41, 0.07);
  --glass-shadow-hover: 0 8px 32px rgba(31, 35, 41, 0.12);
  --glass-tint: rgba(255, 198, 10, 0.16);
  --glass-th: rgba(244, 245, 248, 0.97); /* sticky 表头近实色 */
}

/* ═══ 2. 辉光背景（iframe 内负 z-index 需 body 自建隔离栈） ═══ */
body {
  position: relative;
  isolation: isolate;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(560px 320px at 12% -60px, var(--glass-tint), transparent 70%),
    radial-gradient(640px 360px at 94% 8%, rgba(255, 198, 10, 0.1), transparent 72%);
}

/* ═══ 3. 玻璃容器矩阵（四插件类名并集） ═══ */
/* 3.1 玻璃卡片（大容器） */
.card,
.panel,
.left-list,
.right-detail,
.collect-card,
.summary-card,
.launch-bar {
  background: var(--glass-card);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
  transition: box-shadow 0.15s ease;
}
.card:hover,
.panel:hover,
.launch-bar:hover {
  box-shadow: var(--glass-shadow-hover);
}

/* 3.2 玻璃胶囊 Tab（去下划线，active 品牌黄实心） */
.tabs {
  border-bottom: none;
  background: var(--glass-soft);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
  display: inline-flex;
  box-shadow: var(--glass-shadow);
}
.tabs button,
.tabs .tab {
  border: none;
  border-bottom: none;
  border-radius: 999px;
  padding: 8px 18px;
  transition: background 0.15s ease, color 0.15s ease;
}
.tabs button.active,
.tabs .tab.active {
  background: var(--primary);
  color: var(--on-primary);
  border-bottom-color: transparent;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(255, 198, 10, 0.45);
}

/* 3.3 弹窗盒强磨砂 + 抽屉 */
.modal,
.drawer {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
  backdrop-filter: blur(var(--glass-blur-strong));
  box-shadow: var(--glass-shadow-hover);
}
/* 3.4 遮罩微模糊（自身 fixed 于 body 直系，安全） */
.modal-overlay,
.modal-mask,
.drawer-overlay {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
/* 3.5 玻璃小卡 + hover 上浮 1px
   注意：小卡可能一屏 20+（商品网格/推荐类目），且都叠在已 blur 的玻璃卡上，
   叠加 backdrop-filter 无视觉增益只伤性能（B0-1 末端容器 + 单屏 blur ≤10 守卫），
   故小卡只做半透明底 + 玻璃描边，不做 blur。 */
.prod-card,
.channel-card,
.web-cat-card,
.tpl-chip,
.tray-chip {
  background: var(--glass-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.prod-card:hover,
.channel-card:hover:not(.disabled),
.web-cat-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--glass-shadow-hover);
}
/* 列表行仅半透明底不 blur（控性能，单屏 blur 元素 ≤10） */
.left-list-body li {
  background: rgba(255, 255, 255, 0.4);
}
.left-list-body li:hover,
.left-list-body li.active {
  background: var(--glass-tint);
}

/* 3.6 主按钮品牌黄渐变 + 发光投影 */
.btn-primary,
.btn.primary {
  background: linear-gradient(180deg, #ffd23e 0%, var(--primary) 60%, #f0b400 100%);
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(255, 198, 10, 0.4);
  transition: box-shadow 0.15s ease, filter 0.15s ease;
}
.btn-primary:hover:not(:disabled),
.btn.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffd23e 0%, var(--primary) 40%, #e8ae00 100%);
  color: var(--on-primary);
  box-shadow: 0 4px 16px rgba(255, 198, 10, 0.55);
}

/* 3.7 sticky 表头近实色（防半透明透字） */
.log-table th,
.prod-table th,
.card-table th,
.group-member-table th,
.cat-table th,
.task-table th,
.grid th,
.ch-codes-list th,
.data-table th,
.cat-group {
  background: var(--glass-th);
}

/* 3.8 高亮/提示条半透明化 */
.prod-selectbar,
.group-tip,
.web-cat-source,
.web-cat-chosen {
  background: var(--glass-tint);
}
.web-cat-chosen {
  background: rgba(24, 160, 88, 0.12);
}

/* 3.9 chips / 标签统一质感（描边 + 微透明，颜色沿用各自语义色） */
.tag,
.status-tag,
.ev-chip,
.group-chip,
.var-tag,
.stat-chip {
  border: 1px solid rgba(31, 35, 41, 0.06);
}

/* 3.10 分页玻璃化；toast 只调圆角阴影 */
.pagination button,
.pager .btn,
.pager button {
  background: var(--glass-card);
  border-color: var(--glass-border);
}
.toast {
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(31, 35, 41, 0.18);
}

/* ═══ 4. 动效（弹窗/抽屉进场，用现有 .open/.show/.hidden 开合触发，不改 JS） ═══ */
@keyframes glassPopIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes glassSlideIn {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.modal-overlay.open .modal,
.modal-overlay.show .modal,
.modal-mask:not(.hidden) .modal {
  animation: glassPopIn 0.2s ease both;
}
.drawer-overlay.show .drawer {
  animation: glassSlideIn 0.2s ease both;
}

/* ═══ 5. 守卫（降级与无障碍） ═══ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card,
  .panel,
  .left-list,
  .right-detail,
  .collect-card,
  .summary-card,
  .launch-bar,
  .modal,
  .drawer,
  .prod-card,
  .channel-card,
  .web-cat-card,
  .tpl-chip,
  .tray-chip,
  .tabs {
    background: var(--card);
  }
}
@media (prefers-reduced-motion: reduce) {
  .modal-overlay.open .modal,
  .modal-overlay.show .modal,
  .modal-mask:not(.hidden) .modal,
  .drawer-overlay.show .drawer {
    animation: none;
  }
  .card,
  .panel,
  .launch-bar,
  .prod-card,
  .channel-card,
  .web-cat-card,
  .tpl-chip,
  .tray-chip,
  .tabs button,
  .tabs .tab,
  .btn-primary,
  .btn.primary {
    transition: none;
  }
  .prod-card:hover,
  .channel-card:hover:not(.disabled),
  .web-cat-card:hover {
    transform: none;
  }
}

/* ═══ 6. gift 专属映射段（独立类名体系；.pw/.switch 保持实色语义，不碰） ═══ */
.modal-steps li.active {
  border-bottom-color: var(--primary);
}
.oauth-row,
.shop-item {
  border-bottom-color: rgba(31, 35, 41, 0.07);
}

/* ═══ 7. 硬编码色净化说明 ═══
   业务 styles.css 内的硬编码色（smart-reply .tpl-block #fcfcfd、fission .tag-wait/.tag-muted #eef0f3、
   .ctl #fff）在各自 styles.css 内改为 tokens 变量，不在本层覆盖（保持本层纯并集皮肤规则）。 */