/* ========== XcDream iOS26 液态 / 磨砂玻璃主题 ========== */
/*
 * 液态 = 参考图：边缘扭曲背景（SVG feDisplacementMap），不是 CSS 假高光。
 * - backdrop-filter: url(#xcdream-liquid-refract) 必须可见，面板几乎透明
 * - 禁止 ::before/::after 白边渐变盖住折射
 * 磨砂 = 厚雾，无折射
 */

html {
  --glass-blur: 28px;
  --glass-saturate: 160%;
  --glass-radius: 28px;
  --glass-radius-sm: 18px;
  --glass-radius-md: 16px;
  --glass-radius-xs: 12px;
  --glass-shine: rgba(255, 255, 255, 0.28);
  --glass-edge: rgba(255, 255, 255, 0.16);
  --glass-fill: rgba(40, 44, 56, 0.42);
  --glass-fill-strong: rgba(28, 30, 40, 0.55);
  --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 var(--glass-shine);
  --glass-transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
  --glass-backdrop: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(1.04);
  color-scheme: dark;
}

/* —— 液态：参考图厚液态玻璃 —— */
html[data-glass="liquid"] {
  --bg: #061018;
  --panel: rgba(200, 230, 255, 0.05);
  --panel-head: rgba(200, 230, 255, 0.08);
  --border: rgba(235, 248, 255, 0.46);
  --text: #f0f6ff;
  --text-dim: #a8b8cc;
  --title: #fafcff;
  --accent: #3b9eff;
  --accent-hover: #5cb0ff;
  --keyword: #7ec8ff;
  --green: #5eead4;
  --danger: #ff6b7a;
  --bg-panel: rgba(200, 230, 255, 0.05);
  --bg-input: rgba(255, 255, 255, 0.06);
  --bg-hover: rgba(255, 255, 255, 0.1);
  --bg-active: rgba(59, 158, 255, 0.22);
  --text-title: #fafcff;
  --input-bg: rgba(255, 255, 255, 0.06);
  /* 中心零模糊，弯折完全交给 SVG 折射 */
  --glass-blur: 0px;
  --glass-saturate: 225%;
  --glass-fill: rgba(200, 230, 255, 0.04);
  --glass-fill-strong: rgba(50, 110, 170, 0.1);
  --glass-shine: rgba(255, 255, 255, 0.2);
  --glass-edge: rgba(220, 240, 255, 0.22);
  --glass-backdrop: url(#xcdream-liquid-refract) saturate(175%);
  /* 液态仅外阴影；rim/specular 全部由 ::after 单层承担，禁止 inset 叠高光 */
  --glass-shadow:
    0 36px 80px rgba(0, 6, 18, 0.48),
    0 14px 32px rgba(0, 10, 24, 0.28),
    0 4px 12px rgba(0, 8, 20, 0.16);
  --nav-solid: rgba(6, 16, 28, 0.12);
}

/* 无 SVG backdrop 能力时回退（Safari/Firefox/iOS）：对齐 PC 液态通透感 */
html[data-glass="liquid"][data-glass-refract="fallback"] {
  --glass-blur: 18px;
  --glass-backdrop: blur(18px) saturate(175%) brightness(1.04);
}

html[data-glass="frosted"] {
  --bg: #0d1118;
  --panel: rgba(28, 40, 62, 0.58);
  --panel-head: rgba(34, 48, 74, 0.64);
  --border: rgba(170, 200, 255, 0.16);
  --text: #e4eaf6;
  --text-dim: #9aabc4;
  --title: #f2f6ff;
  --accent: #3b9eff;
  --accent-hover: #5cb0ff;
  --keyword: #7ec8ff;
  --green: #5eead4;
  --danger: #ff6b7a;
  --bg-panel: rgba(28, 40, 62, 0.58);
  --bg-input: rgba(255, 255, 255, 0.09);
  --bg-hover: rgba(120, 170, 255, 0.1);
  --bg-active: rgba(59, 158, 255, 0.28);
  --text-title: #f2f6ff;
  --input-bg: rgba(255, 255, 255, 0.09);
  --glass-blur: 36px;
  --glass-saturate: 165%;
  --glass-fill: rgba(26, 38, 60, 0.48);
  --glass-fill-strong: rgba(22, 32, 52, 0.64);
  --glass-shine: rgba(210, 230, 255, 0.28);
  --glass-edge: rgba(170, 205, 255, 0.2);
  --glass-backdrop: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(1.08);
  --glass-shadow:
    0 8px 32px rgba(0, 0, 0, 0.28),
    0 0 0 0.5px rgba(140, 180, 255, 0.12),
    inset 0 1px 0 rgba(220, 235, 255, 0.22);
  --nav-solid: rgba(18, 28, 46, 0.62);
}

html[data-glass]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(0, 150, 255, 0.18), transparent 55%),
    radial-gradient(ellipse 45% 40% at 8% 20%, rgba(0, 180, 220, 0.14), transparent 60%),
    radial-gradient(ellipse 40% 35% at 92% 72%, rgba(0, 200, 160, 0.1), transparent 58%),
    radial-gradient(ellipse 50% 30% at 70% 12%, rgba(64, 120, 255, 0.08), transparent 50%),
    linear-gradient(180deg, #0a0e16 0%, #0d1118 38%, #0b1016 72%, #080c12 100%);
}

html[data-glass].has-site-bg::before {
  background:
    linear-gradient(180deg, rgba(8, 12, 18, 0.45) 0%, rgba(8, 12, 18, 0.28) 45%, rgba(8, 12, 18, 0.55) 100%),
    var(--site-bg-image) center / cover no-repeat;
}

html[data-glass].has-site-bg body {
  background: transparent !important;
}

html[data-glass]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(120, 180, 255, 0.015) 2px, rgba(120, 180, 255, 0.015) 3px),
    linear-gradient(rgba(90, 160, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 160, 255, 0.06) 1px, transparent 1px),
    repeating-linear-gradient(-18deg, transparent 0, transparent 48px, rgba(0, 200, 220, 0.03) 48px, rgba(0, 200, 220, 0.03) 49px);
  background-size: auto, 48px 48px, 48px 48px, auto;
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 40%, black 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 75% at 50% 40%, black 25%, transparent 100%);
  animation: tech-grid-drift 48s linear infinite;
}

@keyframes tech-grid-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 48px 48px, 48px 48px, 120px 0; }
}

html[data-glass] body {
  background: transparent !important;
  color: var(--text);
}

html[data-glass] #app,
html[data-glass] .page-scroll,
html[data-glass] .page-main,
html[data-glass] .main-content,
html[data-glass] .editor-area,
html[data-glass] .view-container,
html[data-glass] .admin-main,
html[data-glass] .page,
html[data-glass] .desktop-block {
  background: transparent !important;
}

/* —— 通用玻璃表面（site-nav 单独处理，避免覆盖编辑器 fixed 顶栏）—— */
.glass-surface,
html[data-glass] .topbar,
html[data-glass] .card,
html[data-glass] .showcase-card,
html[data-glass] .editor-card,
html[data-glass] .tutorial-item,
html[data-glass] .screenshot-card,
html[data-glass] .feature-card,
html[data-glass] .home-panel,
html[data-glass] .home-feature,
html[data-glass] .video-player-wrap,
html[data-glass] .download-modal,
html[data-glass] .tutorial-toc,
html[data-glass] .site-footer,
html[data-glass] .modal-box,
html[data-glass] .error-card,
html[data-glass] .mc-card,
html[data-glass] .page .card,
html[data-glass] form.card,
html[data-glass] .layout .section,
html[data-glass] .admin-main .section,
html[data-glass] .admin-main .lib-card,
html[data-glass] .admin-main .group-card,
html[data-glass] .admin-main .flow-pair-card,
html[data-glass] .admin-main .syntax-color-item,
html[data-glass] .sub-program-card,
html[data-glass] .mc-panel,
html[data-glass] .sheet,
html[data-glass] .move-card {
  position: relative;
  background: var(--glass-fill) !important;
  border: 1px solid var(--glass-edge) !important;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-backdrop);
  backdrop-filter: var(--glass-backdrop);
  transition: var(--glass-transition);
}

/* —— 液态面板：几乎透明，折射完全来自 backdrop-filter —— */
html[data-glass="liquid"] .card,
html[data-glass="liquid"] .showcase-card,
html[data-glass="liquid"] .editor-card,
html[data-glass="liquid"] .tutorial-item,
html[data-glass="liquid"] .feature-card,
html[data-glass="liquid"] .screenshot-card,
html[data-glass="liquid"] .home-panel,
html[data-glass="liquid"] .home-feature,
html[data-glass="liquid"] .download-modal,
html[data-glass="liquid"] .modal-box,
html[data-glass="liquid"] .error-card,
html[data-glass="liquid"] .mc-card,
html[data-glass="liquid"] form.card,
html[data-glass="liquid"] .tutorial-toc,
html[data-glass="liquid"] .video-player-wrap,
html[data-glass="liquid"] .layout .section,
html[data-glass="liquid"] .mc-panel,
html[data-glass="liquid"] .sheet,
html[data-glass="liquid"] .move-card,
html[data-glass="liquid"] .admin-main .section,
html[data-glass="liquid"] .admin-main .lib-card,
html[data-glass="liquid"] .admin-main .group-card,
html[data-glass="liquid"] .admin-main .flow-pair-card,
html[data-glass="liquid"] .admin-main .syntax-color-item,
html[data-glass="liquid"] .admin-main .move-card,
html[data-glass="liquid"] .sub-program-card {
  border-radius: var(--glass-radius-sm);
  overflow: hidden;
  background: var(--glass-fill) !important;
  border-color: rgba(210, 235, 255, 0.18) !important;
  box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: var(--glass-backdrop) !important;
  backdrop-filter: var(--glass-backdrop) !important;
}

/* 液态禁止伪元素假高光，否则会盖住背景折射 */
html[data-glass="liquid"] .card::before,
html[data-glass="liquid"] .showcase-card::before,
html[data-glass="liquid"] .editor-card::before,
html[data-glass="liquid"] .tutorial-item::before,
html[data-glass="liquid"] .feature-card::before,
html[data-glass="liquid"] .screenshot-card::before,
html[data-glass="liquid"] .home-panel::before,
html[data-glass="liquid"] .home-feature::before,
html[data-glass="liquid"] .download-modal::before,
html[data-glass="liquid"] .modal-box::before,
html[data-glass="liquid"] .error-card::before,
html[data-glass="liquid"] .mc-card::before,
html[data-glass="liquid"] form.card::before,
html[data-glass="liquid"] .layout .section::before,
html[data-glass="liquid"] .admin-main .section::before,
html[data-glass="liquid"] .admin-main .lib-card::before,
html[data-glass="liquid"] .admin-main .group-card::before,
html[data-glass="liquid"] .admin-main .flow-pair-card::before,
html[data-glass="liquid"] .admin-main .syntax-color-item::before,
html[data-glass="liquid"] .admin-main .move-card::before,
html[data-glass="liquid"] .sub-program-card::before,
html[data-glass="liquid"] .mc-panel::before,
html[data-glass="liquid"] .sheet::before,
html[data-glass="liquid"] .move-card::before,
html[data-glass="liquid"] .card::after,
html[data-glass="liquid"] .showcase-card::after,
html[data-glass="liquid"] .editor-card::after,
html[data-glass="liquid"] .tutorial-item::after,
html[data-glass="liquid"] .feature-card::after,
html[data-glass="liquid"] .screenshot-card::after,
html[data-glass="liquid"] .home-panel::after,
html[data-glass="liquid"] .home-feature::after,
html[data-glass="liquid"] .download-modal::after,
html[data-glass="liquid"] .modal-box::after,
html[data-glass="liquid"] .error-card::after,
html[data-glass="liquid"] .mc-card::after,
html[data-glass="liquid"] form.card::after,
html[data-glass="liquid"] .tutorial-toc::after,
html[data-glass="liquid"] .video-player-wrap::after,
html[data-glass="liquid"] .layout .section::after,
html[data-glass="liquid"] .admin-main .section::after,
html[data-glass="liquid"] .admin-main .lib-card::after,
html[data-glass="liquid"] .admin-main .group-card::after,
html[data-glass="liquid"] .admin-main .flow-pair-card::after,
html[data-glass="liquid"] .admin-main .syntax-color-item::after,
html[data-glass="liquid"] .admin-main .move-card::after,
html[data-glass="liquid"] .sub-program-card::after,
html[data-glass="liquid"] .mc-panel::after,
html[data-glass="liquid"] .sheet::after,
html[data-glass="liquid"] .move-card::after {
  content: none !important;
  display: none !important;
}

html[data-glass] .home-panel-media {
  border-bottom-color: var(--glass-edge) !important;
  background: transparent !important;
}

html[data-glass="frosted"] .card,
html[data-glass="frosted"] .showcase-card,
html[data-glass="frosted"] .editor-card,
html[data-glass="frosted"] .tutorial-item,
html[data-glass="frosted"] .feature-card,
html[data-glass="frosted"] .screenshot-card,
html[data-glass="frosted"] .home-panel,
html[data-glass="frosted"] .home-feature,
html[data-glass="frosted"] .download-modal,
html[data-glass="frosted"] .modal-box,
html[data-glass="frosted"] .error-card,
html[data-glass="frosted"] .mc-card,
html[data-glass="frosted"] form.card,
html[data-glass="frosted"] .tutorial-toc,
html[data-glass="frosted"] .video-player-wrap,
html[data-glass="frosted"] .layout .section,
html[data-glass="frosted"] .mc-panel,
html[data-glass="frosted"] .sheet,
html[data-glass="frosted"] .move-card,
html[data-glass="frosted"] .admin-main .section,
html[data-glass="frosted"] .admin-main .lib-card,
html[data-glass="frosted"] .admin-main .group-card,
html[data-glass="frosted"] .admin-main .flow-pair-card,
html[data-glass="frosted"] .admin-main .syntax-color-item,
html[data-glass="frosted"] .admin-main .move-card,
html[data-glass="frosted"] .sub-program-card {
  border-radius: var(--glass-radius-sm);
  background:
    linear-gradient(160deg, rgba(180, 210, 255, 0.14) 0%, rgba(120, 170, 255, 0.04) 42%, transparent 70%),
    var(--glass-fill) !important;
}

/* 导航 */
html[data-glass] .site-nav {
  background: var(--nav-solid) !important;
  border-bottom: 1px solid var(--glass-edge) !important;
  overflow: visible;
  -webkit-backdrop-filter: var(--glass-backdrop);
  backdrop-filter: var(--glass-backdrop);
  box-shadow: var(--glass-shadow);
  transition: var(--glass-transition);
}

html[data-glass] #app > .site-nav {
  position: relative;
  flex: 0 0 auto;
  z-index: 1000;
}

html[data-glass].editor-page .site-nav {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
}

html[data-glass].editor-page .main-wrapper {
  z-index: 1;
}

html[data-glass].editor-page .program-set-tabs {
  z-index: 1005;
}

/* 编辑器侧栏：保持 fixed 全高，仅叠加玻璃视觉（不可 position:relative） */
html[data-glass] .sidebar {
  background: var(--glass-fill) !important;
  border-right: 1px solid var(--glass-edge) !important;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-backdrop);
  backdrop-filter: var(--glass-backdrop);
  transition: var(--glass-transition);
}

html[data-glass].editor-page .sidebar {
  position: fixed !important;
  top: calc(var(--nav-height, 52px) + env(safe-area-inset-top, 0px)) !important;
  left: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

html[data-glass="liquid"] .sidebar {
  border-radius: 0 var(--glass-radius-sm) var(--glass-radius-sm) 0;
  background: var(--glass-fill) !important;
  border-color: rgba(210, 235, 255, 0.18) !important;
  box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: var(--glass-backdrop) !important;
  backdrop-filter: var(--glass-backdrop) !important;
}

html[data-glass="liquid"] .sidebar::before,
html[data-glass="liquid"] .sidebar::after {
  content: none !important;
  display: none !important;
}

html[data-glass] .topbar {
  background: var(--nav-solid) !important;
  border-bottom: 1px solid var(--glass-edge) !important;
  overflow: visible;
}

html[data-glass="liquid"] .site-nav,
html[data-glass="liquid"] .topbar {
  background: var(--nav-solid) !important;
  -webkit-backdrop-filter: var(--glass-backdrop) !important;
  backdrop-filter: var(--glass-backdrop) !important;
  box-shadow: 0 12px 36px rgba(0, 6, 18, 0.28) !important;
}

html[data-glass="frosted"] .site-nav,
html[data-glass="frosted"] .topbar {
  background:
    linear-gradient(180deg, rgba(160, 200, 255, 0.12) 0%, transparent 70%),
    var(--nav-solid) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(1.06);
  backdrop-filter: blur(28px) saturate(160%) brightness(1.06);
}

html[data-glass="liquid"] .site-nav > *,
html[data-glass="liquid"] .topbar > * {
  position: relative;
  z-index: 1;
}

html[data-glass] .panel-head,
html[data-glass] .card-head,
html[data-glass] .download-modal-head,
html[data-glass] .section-title,
html[data-glass] .sidebar-tabs,
html[data-glass] .sub-program-header {
  background: var(--panel-head) !important;
  border-color: var(--glass-edge) !important;
}

/* 液态内凹井：参考图 icon well —— 上/左内阴影，下/右内高光 */
html[data-glass="liquid"] .panel-head,
html[data-glass="liquid"] .card-head,
html[data-glass="liquid"] .download-modal-head,
html[data-glass="liquid"] .section-title,
html[data-glass="liquid"] .sidebar-tabs,
html[data-glass="liquid"] .sub-program-header,
html[data-glass="liquid"] .admin-main .section-head,
html[data-glass="liquid"] .admin-main .lib-card-head,
html[data-glass="liquid"] .admin-main .group-card-head,
html[data-glass="liquid"] .admin-main .flow-pair-card-head {
  background:
    linear-gradient(180deg, rgba(120, 185, 255, 0.12) 0%, rgba(80, 150, 230, 0.07) 100%),
    rgba(100, 170, 240, 0.05) !important;
  -webkit-backdrop-filter: blur(2px) saturate(190%);
  backdrop-filter: blur(2px) saturate(190%);
  box-shadow:
    inset 0 3px 6px rgba(0, 16, 36, 0.26),
    inset 3px 0 4px rgba(0, 16, 36, 0.14);
  border-radius: var(--glass-radius-md);
}

html[data-glass="frosted"] .panel-head,
html[data-glass="frosted"] .card-head,
html[data-glass="frosted"] .download-modal-head,
html[data-glass="frosted"] .section-title,
html[data-glass="frosted"] .sidebar-tabs,
html[data-glass="frosted"] .sub-program-header,
html[data-glass="frosted"] .admin-main .section-head,
html[data-glass="frosted"] .admin-main .lib-card-head,
html[data-glass="frosted"] .admin-main .group-card-head,
html[data-glass="frosted"] .admin-main .flow-pair-card-head {
  border-radius: var(--glass-radius-md);
}

/* —— 统一玻璃按钮（去掉实色底，液态/磨砂同一套圆角与质感）—— */
html[data-glass] .btn-primary,
html[data-glass] .btn-secondary,
html[data-glass] .btn-outline,
html[data-glass] .btn-danger,
html[data-glass] .nav-toggle,
html[data-glass] .menu-toggle,
html[data-glass] .nav-import-btn,
html[data-glass] .nav-save-btn,
html[data-glass] .admin-main .btn,
html[data-glass] .sub-program-actions .btn,
html[data-glass] .view-title-actions .btn,
html[data-glass] .section-title .title-actions .btn,
html[data-glass] .leave-dialog-btn,
html[data-glass] .btn-add-sub,
html[data-glass] .btn-add-outline,
html[data-glass] .btn-copy,
html[data-glass] .btn-clear,
html[data-glass] .btn-dup,
html[data-glass] .btn-clip,
html[data-glass] .btn-del {
  border-radius: var(--glass-radius-md) !important;
  border: 1px solid var(--glass-edge) !important;
  color: var(--text-title) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

html[data-glass="liquid"] .btn-primary,
html[data-glass="liquid"] .btn-secondary,
html[data-glass="liquid"] .btn-outline,
html[data-glass="liquid"] .btn-danger,
html[data-glass="liquid"] .nav-toggle,
html[data-glass="liquid"] .menu-toggle,
html[data-glass="liquid"] .nav-import-btn,
html[data-glass="liquid"] .nav-save-btn,
html[data-glass="liquid"] .admin-main .btn,
html[data-glass="liquid"] .sub-program-actions .btn,
html[data-glass="liquid"] .view-title-actions .btn,
html[data-glass="liquid"] .section-title .title-actions .btn,
html[data-glass="liquid"] .leave-dialog-btn,
html[data-glass="liquid"] .btn-add-sub,
html[data-glass="liquid"] .btn-add-outline,
html[data-glass="liquid"] .btn-copy,
html[data-glass="liquid"] .btn-clear,
html[data-glass="liquid"] .btn-dup,
html[data-glass="liquid"] .btn-clip,
html[data-glass="liquid"] .btn-del {
  background: rgba(200, 230, 255, 0.05) !important;
  -webkit-backdrop-filter: var(--glass-backdrop) !important;
  backdrop-filter: var(--glass-backdrop) !important;
  box-shadow: 0 8px 20px rgba(0, 6, 18, 0.22) !important;
}

html[data-glass="frosted"] .nav-toggle,
html[data-glass="frosted"] .menu-toggle {
  -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(1.06) !important;
  backdrop-filter: blur(28px) saturate(160%) brightness(1.06) !important;
}

html[data-glass="frosted"] .btn-primary,
html[data-glass="frosted"] .btn-secondary,
html[data-glass="frosted"] .btn-outline,
html[data-glass="frosted"] .btn-danger,
html[data-glass="frosted"] .nav-toggle,
html[data-glass="frosted"] .menu-toggle,
html[data-glass="frosted"] .nav-import-btn,
html[data-glass="frosted"] .nav-save-btn,
html[data-glass="frosted"] .admin-main .btn,
html[data-glass="frosted"] .sub-program-actions .btn,
html[data-glass="frosted"] .view-title-actions .btn,
html[data-glass="frosted"] .section-title .title-actions .btn,
html[data-glass="frosted"] .leave-dialog-btn,
html[data-glass="frosted"] .btn-add-sub,
html[data-glass="frosted"] .btn-add-outline,
html[data-glass="frosted"] .btn-copy,
html[data-glass="frosted"] .btn-clear,
html[data-glass="frosted"] .btn-dup,
html[data-glass="frosted"] .btn-clip,
html[data-glass="frosted"] .btn-del {
  background: rgba(140, 180, 255, 0.1) !important;
  border-color: rgba(170, 205, 255, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(220, 235, 255, 0.18);
}

html[data-glass] .btn-danger,
html[data-glass] .admin-main .btn-danger,
html[data-glass] .btn-del,
html[data-glass] .btn-clear {
  color: var(--danger) !important;
  border-color: rgba(255, 107, 122, 0.42) !important;
}

html[data-glass] .admin-main .btn.btn-icon-only {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

html[data-glass] input,
html[data-glass] select,
html[data-glass] textarea,
html[data-glass] .field input,
html[data-glass] .form-control {
  background: var(--bg-input) !important;
  border-color: var(--glass-edge) !important;
  color: var(--text);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

html[data-glass] input,
html[data-glass] select,
html[data-glass] textarea,
html[data-glass] .field input,
html[data-glass] .form-control,
html[data-glass] .admin-main .cell-input,
html[data-glass] .admin-main .cell-textarea,
html[data-glass] .admin-main .sub-tab {
  border-radius: var(--glass-radius-xs);
}

html[data-glass="liquid"] input,
html[data-glass="liquid"] select,
html[data-glass="liquid"] textarea,
html[data-glass="liquid"] .field input,
html[data-glass="liquid"] .form-control,
html[data-glass="liquid"] .admin-main .cell-input,
html[data-glass="liquid"] .admin-main .cell-textarea {
  background: rgba(255, 255, 255, 0.05) !important;
  -webkit-backdrop-filter: blur(3px) saturate(170%);
  backdrop-filter: blur(3px) saturate(170%);
  box-shadow:
    inset 0 2px 4px rgba(0, 16, 32, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.28);
}

html[data-glass] table thead th,
html[data-glass] .table-scroll thead th {
  background: var(--panel-head) !important;
}

html[data-glass] .tab.active,
html[data-glass] .sub-tab.active,
html[data-glass] .sidebar-tab.active,
html[data-glass] .program-set-tab.active {
  background: var(--bg-active) !important;
}

html[data-glass] .modal-overlay,
html[data-glass] .download-modal-overlay {
  background: rgba(6, 8, 14, 0.45) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
}

html[data-glass="liquid"] .modal-overlay,
html[data-glass="liquid"] .download-modal-overlay {
  background: rgba(4, 12, 22, 0.26) !important;
  -webkit-backdrop-filter: blur(5px) saturate(145%);
  backdrop-filter: blur(5px) saturate(145%);
}

/* 后台/编辑器 toast：固定定位 + 玻璃视觉，不参与 backdrop 折射避免移动端错位 */
html[data-glass] #toast,
html[data-glass] .toast {
  position: fixed !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-sizing: border-box;
  max-width: min(420px, calc(100vw - 24px));
  word-break: break-word;
  white-space: normal;
  background: var(--glass-fill-strong) !important;
  color: var(--text-title) !important;
  border: 1px solid var(--glass-edge) !important;
  border-radius: var(--glass-radius-sm) !important;
  box-shadow: var(--glass-shadow) !important;
}

html[data-glass="liquid"] #toast,
html[data-glass="liquid"] .toast {
  background: rgba(40, 72, 110, 0.72) !important;
  border-color: rgba(210, 235, 255, 0.28) !important;
}

html[data-glass="frosted"] #toast,
html[data-glass="frosted"] .toast {
  background: rgba(22, 32, 52, 0.88) !important;
  border-color: rgba(170, 205, 255, 0.22) !important;
}

html[data-glass] #toast.toast.error,
html[data-glass] .toast.error {
  background: rgba(90, 29, 29, 0.92) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
}

html[data-glass] .admin-main .section,
html[data-glass] .admin-main .lib-card,
html[data-glass] .admin-main .group-card,
html[data-glass] .admin-main .flow-pair-card,
html[data-glass] .admin-main .syntax-color-item,
html[data-glass] .admin-main .move-card {
  border-radius: var(--glass-radius-sm) !important;
  overflow: hidden;
}

html[data-glass] .admin-main .section-head,
html[data-glass] .admin-main .lib-card-head,
html[data-glass] .admin-main .group-card-head,
html[data-glass] .admin-main .flow-pair-card-head,
html[data-glass] .admin-main th {
  background: var(--panel-head) !important;
  border-color: var(--glass-edge) !important;
}

html[data-glass="liquid"] .admin-main .section::before,
html[data-glass="liquid"] .admin-main .section::after,
html[data-glass="liquid"] .admin-main .lib-card::before,
html[data-glass="liquid"] .admin-main .lib-card::after,
html[data-glass="liquid"] .admin-main .group-card::before,
html[data-glass="liquid"] .admin-main .group-card::after,
html[data-glass="liquid"] .admin-main .move-card::before,
html[data-glass="liquid"] .admin-main .move-card::after {
  content: none !important;
  display: none !important;
}
html[data-glass] .sidebar { border-right-color: var(--glass-edge) !important; }
html[data-glass] .tree-node.active { background: var(--bg-active) !important; }

/* 编辑器侧栏折叠钮：与 glass-toggle / 顶栏按钮统一玻璃质感 */
html[data-glass] .sidebar-toggle {
  border-radius: 0 var(--glass-radius-xs) var(--glass-radius-xs) 0 !important;
  border: 1px solid var(--glass-edge) !important;
  border-left: none !important;
  color: var(--text-title) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), width 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

html[data-glass="liquid"] .sidebar-toggle {
  background: rgba(200, 230, 255, 0.05) !important;
  border-color: rgba(210, 235, 255, 0.18) !important;
  -webkit-backdrop-filter: var(--glass-backdrop) !important;
  backdrop-filter: var(--glass-backdrop) !important;
  box-shadow: 0 8px 20px rgba(0, 6, 18, 0.22) !important;
}

html[data-glass="frosted"] .sidebar-toggle {
  background: rgba(140, 180, 255, 0.12) !important;
  border-color: rgba(170, 205, 255, 0.22) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(1.06) !important;
  backdrop-filter: blur(28px) saturate(160%) brightness(1.06) !important;
  box-shadow: inset 0 1px 0 rgba(220, 235, 255, 0.22) !important;
}

html[data-glass] .sidebar-toggle-icon {
  color: var(--text-title) !important;
}

/* 侧栏底部 Tab：分段胶囊，替代旧下划线 Tab */
html[data-glass] .sidebar-tabs {
  gap: 8px !important;
  padding: 10px 12px !important;
  border-top-color: var(--glass-edge) !important;
}

html[data-glass] .sidebar-tab {
  border-radius: var(--glass-radius-xs) !important;
  border: 1px solid transparent !important;
  font-weight: 500 !important;
}

html[data-glass] .sidebar-tab.active {
  border-color: rgba(120, 190, 255, 0.35) !important;
  color: var(--keyword) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html[data-glass="liquid"] .sidebar-tab.active,
html[data-glass="frosted"] .sidebar-tab.active {
  background: var(--bg-active) !important;
}

/* 编辑器底部程序集 Tab：分段胶囊，与侧栏 Tab 一致 */
html[data-glass] .program-set-tabs {
  background: var(--glass-fill-strong) !important;
  border-top: 1px solid var(--glass-edge) !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: var(--glass-backdrop) !important;
  backdrop-filter: var(--glass-backdrop) !important;
}

html[data-glass="liquid"] .program-set-tabs,
html[data-glass="frosted"] .program-set-tabs {
  background: var(--glass-fill-strong) !important;
  border-top-color: var(--glass-edge) !important;
}

html[data-glass] .program-set-tab {
  border-radius: var(--glass-radius-xs) !important;
  border: 1px solid transparent !important;
  font-weight: 500 !important;
  color: var(--text-dim) !important;
}

html[data-glass] .program-set-tab.active {
  border-color: rgba(120, 190, 255, 0.35) !important;
  color: var(--keyword) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html[data-glass="liquid"] .program-set-tab.active,
html[data-glass="frosted"] .program-set-tab.active {
  background: var(--bg-active) !important;
}

html[data-glass] .program-set-tab .tab-close:hover {
  background: var(--danger) !important;
  color: #fff !important;
}

/* 编辑器 ICP 底栏：玻璃底栏，替代旧纯色条 */
html[data-glass] .site-icp-footer.is-editor.is-fixed {
  background: var(--glass-fill-strong) !important;
  border-top: 1px solid var(--glass-edge) !important;
  box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: var(--glass-backdrop) !important;
  backdrop-filter: var(--glass-backdrop) !important;
  color: var(--text-dim) !important;
}

html[data-glass] .site-icp-footer.is-editor a {
  color: var(--text-dim) !important;
}

html[data-glass] .site-icp-footer.is-editor a:hover {
  color: var(--keyword) !important;
}

html[data-glass] .site-icp-footer.is-editor .site-icp-sep {
  color: var(--text-dim) !important;
}

/* 编辑器卡片内表格 / 输入框（表格保持直角，不用圆角） */
html[data-glass] .view-table,
html[data-glass] .sub-table,
html[data-glass] .var-table,
html[data-glass] .sub-program-card table {
  border-radius: 0 !important;
}

html[data-glass] .view-table,
html[data-glass] .view-table td,
html[data-glass] .sub-table td,
html[data-glass] .var-table td {
  border-color: var(--glass-edge) !important;
}

html[data-glass] .view-table .table-label,
html[data-glass] .table-label {
  background: var(--panel-head) !important;
  color: var(--keyword) !important;
}

html[data-glass] .sub-program-name {
  color: var(--text-title) !important;
}

html[data-glass] .view-title {
  color: var(--text-title) !important;
  border-bottom-color: var(--glass-edge) !important;
}

html[data-glass] .section-title {
  color: var(--green) !important;
}

html[data-glass] .input-fill {
  background: var(--bg-input) !important;
  color: var(--text) !important;
  border-color: var(--glass-edge) !important;
  border-radius: 0 !important;
}

html[data-glass] .smart-var-input {
  background: var(--bg-input) !important;
  color: var(--text) !important;
  border-color: var(--glass-edge) !important;
}

html[data-glass="liquid"] .input-fill,
html[data-glass="liquid"] .smart-var-input {
  background: rgba(255, 255, 255, 0.05) !important;
  -webkit-backdrop-filter: blur(3px) saturate(170%);
  backdrop-filter: blur(3px) saturate(170%);
  box-shadow:
    inset 0 2px 4px rgba(0, 16, 32, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.28);
}

html[data-glass] .toggle-btn {
  background: var(--bg-input) !important;
  border: 1px solid var(--glass-edge) !important;
  color: var(--text) !important;
}

html[data-glass] .smart-var-dialog {
  background: var(--glass-fill) !important;
  border: 1px solid var(--glass-edge) !important;
  border-radius: var(--glass-radius-sm) !important;
  box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: var(--glass-backdrop) !important;
  backdrop-filter: var(--glass-backdrop) !important;
  color: var(--text) !important;
}

html[data-glass] .site-footer {
  border-top: 1px solid var(--glass-edge) !important;
  margin-top: 24px;
}

html[data-glass="liquid"] .site-footer {
  background: var(--glass-fill) !important;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.glass-toggle,
.nav-toggle,
.menu-toggle {
  border-radius: var(--glass-radius-xs);
}

html[data-glass] .glass-toggle,
html[data-glass] .nav-toggle,
html[data-glass] .menu-toggle {
  border-radius: var(--glass-radius-xs) !important;
}

.glass-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--glass-edge, rgba(255, 255, 255, 0.16));
  background: rgba(255, 255, 255, 0.08);
  color: var(--title, #f4f7ff);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}

.glass-toggle:active { transform: scale(0.96); }

.glass-toggle svg {
  width: 20px;
  height: 20px;
  display: none;
  pointer-events: none;
}

html[data-glass="liquid"] .glass-toggle .glass-icon-liquid,
html[data-glass="frosted"] .glass-toggle .glass-icon-frosted {
  display: block;
}

html[data-glass="liquid"] .glass-toggle {
  background: rgba(200, 230, 255, 0.06);
  -webkit-backdrop-filter: var(--glass-backdrop) !important;
  backdrop-filter: var(--glass-backdrop) !important;
  box-shadow: 0 8px 20px rgba(0, 6, 18, 0.22) !important;
}

html[data-glass="frosted"] .glass-toggle {
  background: rgba(140, 180, 255, 0.12);
  border-color: rgba(170, 205, 255, 0.22);
  -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(1.06);
  backdrop-filter: blur(28px) saturate(160%) brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(220, 235, 255, 0.22);
}

@media (max-width: 768px) {
  .site-nav .nav-links { order: 10; }
}

html[data-glass] .bg {
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(0, 150, 255, 0.18), transparent 55%),
    radial-gradient(ellipse 45% 40% at 8% 20%, rgba(0, 180, 220, 0.14), transparent 60%),
    radial-gradient(ellipse 40% 35% at 92% 72%, rgba(0, 200, 160, 0.1), transparent 58%),
    linear-gradient(180deg, #0a0e16 0%, #0d1118 40%, #080c12 100%) !important;
}

html[data-glass].has-site-bg .bg {
  background:
    linear-gradient(180deg, rgba(8, 12, 18, 0.58) 0%, rgba(8, 12, 18, 0.42) 45%, rgba(8, 12, 18, 0.72) 100%),
    var(--site-bg-image) center / cover no-repeat !important;
}

html[data-glass] .login-glass-toggle {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 20;
}

html[data-glass] .tabs {
  border-bottom-color: var(--glass-edge) !important;
  background: transparent;
}

html[data-glass] .tab { border-radius: 10px 10px 0 0; }
html[data-glass] .admin-main { background: transparent; }

html[data-glass] .layout .section {
  border-radius: var(--glass-radius-sm);
  margin-bottom: 16px;
  overflow: hidden;
  isolation: isolate;
}

html[data-glass] .layout .section-head {
  background: var(--panel-head) !important;
  border-color: var(--glass-edge) !important;
}

html[data-glass] .page-main > .section,
html[data-glass] main.page-main .section,
html[data-glass] .page-main .section-head,
html[data-glass] main.page-main .section-head {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-glass] .page-main > .section::before,
html[data-glass] main.page-main .section::before,
html[data-glass] .page-main > .section::after,
html[data-glass] main.page-main .section::after {
  content: none !important;
  display: none !important;
}

html[data-glass] .error-bg { opacity: 1; }

html[data-glass] .card-media > .media-img,
html[data-glass] .home-feature-media > .media-img,
html[data-glass] .home-panel-media > .media-img,
html[data-glass] .article-content img {
  background: transparent !important;
}

html[data-glass] .card-media > .media-video {
  background: rgba(0, 0, 0, 0.28) !important;
}

/* 触控：去掉 tap 高亮；非 hover 设备不保留 hover 底色 */
html[data-glass] .admin-main .tab,
html[data-glass] .admin-main .sub-tab,
html[data-glass] .sidebar-tab,
html[data-glass] .program-set-tab,
html[data-glass] .tree-node,
html[data-glass] .nav-links a {
  -webkit-tap-highlight-color: transparent;
}

html[data-glass] .nav-links a.active {
  background: transparent !important;
}

@media (max-width: 768px) {
  html[data-glass] .nav-links a.active {
    background: var(--bg-active) !important;
  }

  html[data-glass] .admin-main .section-head {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
  }

  html[data-glass] .admin-main .section-head h2 {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    word-break: keep-all !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html[data-glass] .admin-main .section-head > .btn,
  html[data-glass] .admin-main .section-head .toolbar {
    flex: 0 0 auto !important;
    width: auto !important;
    justify-content: flex-end !important;
  }

  html[data-glass="liquid"] .admin-main .section-head,
  html[data-glass="frosted"] .admin-main .section-head {
    border-radius: var(--glass-radius-md) !important;
  }

  /* 移动端 backdrop-filter 合成层：避免液态/磨砂发灰、发虚与 PC 不一致 */
  html[data-glass] .site-nav,
  html[data-glass] .topbar,
  html[data-glass] .card,
  html[data-glass] .showcase-card,
  html[data-glass] .editor-card,
  html[data-glass] .home-panel,
  html[data-glass] .home-feature,
  html[data-glass] .download-modal,
  html[data-glass] .modal-box,
  html[data-glass] .layout .section,
  html[data-glass] .admin-main .section,
  html[data-glass] .admin-main .lib-card,
  html[data-glass] .admin-main .group-card,
  html[data-glass] .sub-program-card,
  html[data-glass] .program-set-tabs,
  html[data-glass] .sidebar,
  html[data-glass] .sidebar-toggle,
  html.tutorial-list-view[data-glass] .tutorial-sidebar-toggle,
  html[data-glass] .glass-toggle,
  html[data-glass] .nav-toggle,
  html[data-glass] .menu-toggle {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* 教程列表：移动端侧栏与折叠钮（须 fixed + flex 列，避免通用玻璃面 position:relative 压过 site.css） */
  html.tutorial-list-view[data-glass] .tutorial-toc,
  html.tutorial-list-view[data-glass="liquid"] .tutorial-toc,
  html.tutorial-list-view[data-glass="frosted"] .tutorial-toc {
    position: fixed !important;
    top: calc(var(--nav-height, 52px) + env(safe-area-inset-top, 0px)) !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 1001 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    align-self: auto !important;
    height: auto !important;
    background: var(--glass-fill) !important;
    border-right-color: var(--glass-edge) !important;
    -webkit-backdrop-filter: var(--glass-backdrop) !important;
    backdrop-filter: var(--glass-backdrop) !important;
    box-shadow: var(--glass-shadow) !important;
  }

  html.tutorial-list-view[data-glass] .tutorial-toc-head {
    flex: 0 0 auto !important;
  }

  html.tutorial-list-view[data-glass] .tutorial-toc-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  html.tutorial-list-view[data-glass="liquid"] .tutorial-toc {
    border-radius: 0 var(--glass-radius-sm) var(--glass-radius-sm) 0 !important;
  }

  html.tutorial-list-view[data-glass] .tutorial-sidebar-toggle,
  html.tutorial-list-view[data-glass="liquid"] .tutorial-sidebar-toggle,
  html.tutorial-list-view[data-glass="frosted"] .tutorial-sidebar-toggle {
    border-radius: 0 var(--glass-radius-xs) var(--glass-radius-xs) 0 !important;
    border: 1px solid var(--glass-edge) !important;
    border-left: none !important;
    color: var(--text-title) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  }

  html.tutorial-list-view[data-glass="liquid"] .tutorial-sidebar-toggle {
    background: rgba(200, 230, 255, 0.05) !important;
    border-color: rgba(210, 235, 255, 0.18) !important;
    -webkit-backdrop-filter: var(--glass-backdrop) !important;
    backdrop-filter: var(--glass-backdrop) !important;
    box-shadow: 0 8px 20px rgba(0, 6, 18, 0.22) !important;
  }

  html.tutorial-list-view[data-glass="frosted"] .tutorial-sidebar-toggle {
    background: rgba(140, 180, 255, 0.12) !important;
    border-color: rgba(170, 205, 255, 0.22) !important;
    -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(1.06) !important;
    backdrop-filter: blur(28px) saturate(160%) brightness(1.06) !important;
    box-shadow: inset 0 1px 0 rgba(220, 235, 255, 0.22) !important;
  }

  html.tutorial-list-view[data-glass] .tutorial-sidebar-toggle-icon {
    color: var(--text-title) !important;
  }

  html.tutorial-list-view[data-glass] .tutorial-toc-item.active,
  html.tutorial-list-view[data-glass="liquid"] .tutorial-toc-item.active,
  html.tutorial-list-view[data-glass="frosted"] .tutorial-toc-item.active {
    background: var(--bg-active) !important;
    color: var(--keyword) !important;
  }

}

/* 全端禁用 hover 底色（PC/移动均不加背景；顶栏 .active 背景仅移动端保留） */
html[data-glass] .admin-main .tab:not(.active):hover,
html[data-glass] .admin-main .sub-tab:not(.active):hover,
html[data-glass] .admin-main tr:hover td,
html[data-glass] .admin-main .table-scroll tr:hover td,
html[data-glass] tr:hover td,
html[data-glass] .nav-links a:not(.active):hover,
html[data-glass] .sidebar-tab:not(.active):hover,
html[data-glass] .program-set-tab:not(.active):hover,
html[data-glass] .tree-node:not(.active):hover,
html[data-glass] .sub-program-header:hover,
html[data-glass] .check-cell:hover,
html[data-glass] .tree-node .tree-fold:hover {
  background: transparent !important;
}

html[data-glass="liquid"] .btn-primary:hover,
html[data-glass="liquid"] .btn-secondary:hover,
html[data-glass="liquid"] .btn-outline:hover,
html[data-glass="liquid"] .btn-danger:hover,
html[data-glass="liquid"] .nav-toggle:hover,
html[data-glass="liquid"] .menu-toggle:hover,
html[data-glass="liquid"] .nav-import-btn:hover,
html[data-glass="liquid"] .nav-save-btn:hover,
html[data-glass="liquid"] .admin-main .btn:hover,
html[data-glass="liquid"] .sub-program-actions .btn:hover,
html[data-glass="liquid"] .view-title-actions .btn:hover,
html[data-glass="liquid"] .section-title .title-actions .btn:hover,
html[data-glass="liquid"] .leave-dialog-btn:hover,
html[data-glass="liquid"] .btn-add-sub:hover,
html[data-glass="liquid"] .btn-add-outline:hover,
html[data-glass="liquid"] .btn-copy:hover,
html[data-glass="liquid"] .btn-clear:hover,
html[data-glass="liquid"] .btn-dup:hover,
html[data-glass="liquid"] .btn-clip:hover,
html[data-glass="liquid"] .btn-del:hover,
html[data-glass="liquid"] .glass-toggle:hover,
html[data-glass="liquid"] .sidebar-toggle:hover,
html.tutorial-list-view[data-glass="liquid"] .tutorial-sidebar-toggle:hover {
  background: rgba(200, 230, 255, 0.05) !important;
  box-shadow: 0 8px 20px rgba(0, 6, 18, 0.22) !important;
}

html[data-glass="frosted"] .btn-primary:hover,
html[data-glass="frosted"] .btn-secondary:hover,
html[data-glass="frosted"] .btn-outline:hover,
html[data-glass="frosted"] .btn-danger:hover,
html[data-glass="frosted"] .nav-toggle:hover,
html[data-glass="frosted"] .menu-toggle:hover,
html[data-glass="frosted"] .nav-import-btn:hover,
html[data-glass="frosted"] .nav-save-btn:hover,
html[data-glass="frosted"] .admin-main .btn:hover,
html[data-glass="frosted"] .sub-program-actions .btn:hover,
html[data-glass="frosted"] .view-title-actions .btn:hover,
html[data-glass="frosted"] .section-title .title-actions .btn:hover,
html[data-glass="frosted"] .leave-dialog-btn:hover,
html[data-glass="frosted"] .btn-add-sub:hover,
html[data-glass="frosted"] .btn-add-outline:hover,
html[data-glass="frosted"] .btn-copy:hover,
html[data-glass="frosted"] .btn-clear:hover,
html[data-glass="frosted"] .btn-dup:hover,
html[data-glass="frosted"] .btn-clip:hover,
html[data-glass="frosted"] .btn-del:hover,
html[data-glass="frosted"] .glass-toggle:hover,
html[data-glass="frosted"] .sidebar-toggle:hover,
html.tutorial-list-view[data-glass="frosted"] .tutorial-sidebar-toggle:hover {
  background: rgba(140, 180, 255, 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(220, 235, 255, 0.18) !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-glass]::after { animation: none; }
  .glass-toggle { transition: none; }
  html[data-glass="liquid"] {
    --glass-backdrop: blur(8px) saturate(170%) brightness(1.06);
  }
}