/* ==========================================================================
   BOILER-TUBE LCMS · Liquid Glass
   独立的第三主题绘制层：只在 html[data-theme="glass"] 下生效。
   设计原则：柔和环境光、清晰内容层级、细腻折射边、有限且缓慢的动效。
   ========================================================================== */

/* ---------- 主题选择器：三套主题共用 ---------- */
.theme-switcher { position: relative; flex: none; }
.theme-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--glow-soft);
}
.theme-ico-glass { display: none; }
.theme-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 220;
  width: 218px;
  padding: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--surface-glass-2);
  color: var(--text);
  box-shadow: var(--shadow-pop);
  backdrop-filter: blur(30px) saturate(1.65);
  -webkit-backdrop-filter: blur(30px) saturate(1.65);
  transform-origin: top right;
  animation: themeMenuIn .2s var(--ease-out);
}
.theme-menu[hidden] { display: none; }
.theme-menu-caption {
  padding: 7px 10px 8px;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.theme-option {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text-mid);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.theme-option:hover { background: var(--surface-sunken); color: var(--text-hi); }
.theme-option.active,
.theme-option[aria-pressed="true"] {
  border-color: var(--line);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text-hi);
}
.theme-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-sunken);
  color: var(--accent);
}
.theme-option-icon svg { width: 16px; height: 16px; }
.theme-option-copy { display: flex; flex-direction: column; min-width: 0; }
.theme-option-copy strong { font-size: 12.5px; font-weight: 650; line-height: 1.35; }
.theme-option-copy small { margin-top: 2px; color: var(--text-faint); font-size: 10px; line-height: 1.3; }
.theme-option-check { color: var(--accent); font-size: 14px; opacity: 0; }
.theme-option[aria-pressed="true"] .theme-option-check { opacity: 1; }
@keyframes themeMenuIn {
  from { opacity: 0; transform: translateY(-5px) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* ---------- 液态玻璃设计令牌 ---------- */
html[data-theme="glass"] {
  color-scheme: dark;
  --bg-0: #071426;
  --bg-1: #0b1c33;
  --bg-2: #122943;
  --bg-3: #1a3552;
  --bg-4: #244464;

  --surface-glass-1: linear-gradient(145deg, rgba(26, 48, 75, .62), rgba(8, 22, 42, .72));
  --surface-glass-2: linear-gradient(150deg, rgba(24, 44, 70, .8), rgba(7, 18, 36, .88));
  --surface-elevated: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .065));
  --surface-sunken: rgba(5, 17, 34, .42);

  --accent: #91ddff;
  --accent-bright: #c5efff;
  --accent-deep: #4cb8e8;
  --accent-darker: #267da9;
  --accent-glow: rgba(116, 211, 255, .34);
  --accent-ink: #071a2b;

  --text: #edf5ff;
  --text-hi: #ffffff;
  --text-mid: #d4e3f2;
  --text-dim: #adc2d7;
  --text-faint: #829bb5;
  --text-ghost: #607b96;

  --danger: #ff8b91;
  --danger-soft: #ffabb0;
  --danger-deep: #b84d59;
  --warn: #ffd08a;
  --warn-soft: #ffe0ad;
  --warn-deep: #a87635;
  --ok: #79e6b5;
  --ok-soft: #a2efcd;
  --ok-deep: #318d68;
  --info-violet: #c2b5ff;
  --info-violet-soft: #d8d0ff;

  --line-subtle: rgba(255, 255, 255, .075);
  --line: rgba(255, 255, 255, .14);
  --line-strong: rgba(255, 255, 255, .24);
  --line-bright: rgba(255, 255, 255, .48);
  --line-glow: rgba(173, 229, 255, .62);

  --glass-blur: blur(26px) saturate(1.55);
  --glass-blur-strong: blur(38px) saturate(1.7);
  --glass-specular: inset 0 1px 0 rgba(255, 255, 255, .34),
                    inset 0 0 0 1px rgba(255, 255, 255, .075),
                    inset 0 24px 40px -34px rgba(255, 255, 255, .42);
  --glass-page:
    radial-gradient(ellipse 1100px 720px at 4% -10%, rgba(89, 105, 210, .34), transparent 66%),
    radial-gradient(ellipse 980px 650px at 102% 4%, rgba(44, 171, 202, .25), transparent 65%),
    radial-gradient(ellipse 1000px 620px at 54% 112%, rgba(103, 74, 166, .24), transparent 68%),
    linear-gradient(155deg, #071426 0%, #0b1b33 42%, #111b38 72%, #171b38 100%);

  --glow-accent: 0 0 28px rgba(116, 211, 255, .24);
  --glow-soft: 0 0 48px -12px rgba(116, 211, 255, .3);
  --glow-sharp: 0 0 18px rgba(145, 221, 255, .4);
  --shadow-xs: 0 1px 2px rgba(2, 8, 20, .22);
  --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 12px rgba(2, 8, 20, .2);
  --shadow-md: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 30px -12px rgba(2, 8, 20, .52);
  --shadow-lg: inset 0 1px 0 rgba(255, 255, 255, .2), 0 24px 55px -22px rgba(2, 8, 20, .66);
  --shadow-xl: 0 28px 70px -24px rgba(2, 8, 20, .7);
  --shadow-2xl: 0 40px 100px -28px rgba(2, 8, 20, .78);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, .25),
                 inset 0 -1px 0 rgba(255, 255, 255, .045),
                 0 20px 48px -26px rgba(2, 8, 20, .72);
  --shadow-lift: inset 0 1px 0 rgba(255, 255, 255, .38),
                 0 28px 64px -26px rgba(2, 8, 20, .78),
                 0 0 42px -20px rgba(145, 221, 255, .32);
  --shadow-pop: 0 36px 90px -20px rgba(2, 7, 20, .82),
                inset 0 1px 0 rgba(255, 255, 255, .26);

  --radius-2xl: 26px;
  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 13px;
  --radius-sm: 10px;

  --chart-accent: #91ddff;
  --chart-accent-2: #7cd6e8;
  --chart-accent-soft: rgba(145, 221, 255, .13);
  --chart-accent-faint: rgba(145, 221, 255, .055);
  --chart-grid: rgb(139, 169, 197);
  --chart-label: #a8bfd4;
  --chart-title: #f2f8ff;
  --chart-green: #79e6b5;
  --chart-green-soft: rgba(121, 230, 181, .2);
  --chart-green-line: rgba(121, 230, 181, .28);
  --chart-red: #ff8b91;
  --chart-red-soft: #ffb7bc;
  --chart-red-zone-1: rgba(255, 139, 145, .045);
  --chart-red-zone-2: rgba(255, 139, 145, .16);
  --chart-orange: #ffd08a;
  --chart-violet: #c2b5ff;
  --chart-pink: #f6a8cf;
  --chart-panel: rgba(7, 24, 44, .54);
  --chart-panel-1: rgba(20, 48, 74, .58);
  --chart-panel-2: rgba(6, 18, 36, .7);
  --chart-panel-stroke: rgba(255, 255, 255, .16);
  --chart-dot-fill: #102942;
  --chart-tip-bg: rgba(8, 23, 43, .92);
  --chart-tip-stroke: rgba(181, 228, 255, .36);
  --chart-tip-val: #bcecff;
  --chart-hover-line: rgba(145, 221, 255, .5);
  --chart-bar-base: rgba(33, 79, 111, .68);

  --dg-bg-1: #142a43;
  --dg-bg-2: #09182c;
  --dg-title: #bcecff;
  --dg-meta: #91a9c0;
  --dg-grid: rgba(255, 255, 255, .045);
  --dg-legend-bg: rgba(11, 29, 50, .76);
  --dg-legend-stroke: rgba(255, 255, 255, .2);
  --dg-legend: #d4e3f2;
}

html[data-theme="glass"],
html[data-theme="glass"] body { background: #071426; }
html[data-theme="glass"] body {
  background-image: var(--glass-page);
  background-attachment: fixed;
  color: var(--text);
}
html[data-theme="glass"] ::selection { background: rgba(145, 221, 255, .25); color: #fff; }

/* ---------- 场景层：缓慢流动，但不干扰阅读 ---------- */
html[data-theme="glass"] .bg-grid {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .42) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(180, 226, 255, .25) 0 1px, transparent 1.4px);
  background-position: 0 0, 90px 120px;
  background-size: 240px 240px, 360px 360px;
  mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .3) 55%, transparent 88%);
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .3) 55%, transparent 88%);
  opacity: .38;
}
html[data-theme="glass"] .bg-glow {
  overflow: hidden;
  background:
    radial-gradient(ellipse 760px 460px at 12% 0%, rgba(129, 127, 235, .2), transparent 67%),
    radial-gradient(ellipse 760px 480px at 94% 12%, rgba(78, 198, 225, .14), transparent 66%);
  animation: none;
}
html[data-theme="glass"] .bg-glow::before,
html[data-theme="glass"] .bg-glow::after {
  content: "";
  position: absolute;
  width: 52vw;
  height: 52vw;
  min-width: 520px;
  min-height: 520px;
  border-radius: 43% 57% 62% 38% / 48% 42% 58% 52%;
  filter: blur(72px);
  opacity: .2;
  will-change: transform, border-radius;
}
html[data-theme="glass"] .bg-glow::before {
  left: -19vw;
  top: 22vh;
  background: linear-gradient(135deg, #6676cf, #3c9fbd);
  animation: glassLiquidA 24s ease-in-out infinite alternate;
}
html[data-theme="glass"] .bg-glow::after {
  right: -22vw;
  bottom: -24vw;
  background: linear-gradient(145deg, #326f9d, #806db5);
  animation: glassLiquidB 30s ease-in-out infinite alternate;
}
@keyframes glassLiquidA {
  to { transform: translate3d(6vw, -4vh, 0) rotate(12deg) scale(1.08); border-radius: 58% 42% 45% 55% / 38% 55% 45% 62%; }
}
@keyframes glassLiquidB {
  to { transform: translate3d(-5vw, -5vh, 0) rotate(-10deg) scale(1.06); border-radius: 55% 45% 38% 62% / 56% 38% 62% 44%; }
}

/* ---------- 外壳：轻薄、通透，内容始终优先 ---------- */
html[data-theme="glass"] .app-rail {
  background: linear-gradient(180deg, rgba(12, 29, 52, .58), rgba(6, 18, 35, .72));
  border-right-color: rgba(255, 255, 255, .14);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .035), 18px 0 50px -40px rgba(0, 0, 0, .8);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
}
html[data-theme="glass"] .app-rail::after {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .28) 20%, rgba(145, 221, 255, .1) 76%, transparent);
}
html[data-theme="glass"] .app-topbar {
  background: linear-gradient(180deg, rgba(19, 39, 64, .58), rgba(8, 23, 43, .52));
  border-bottom-color: rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 16px 38px -32px rgba(0, 0, 0, .75);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
}
html[data-theme="glass"] .rail-logo { border-bottom-color: rgba(255, 255, 255, .1); }
html[data-theme="glass"] .rail-logo .logo-icon {
  border-color: rgba(255, 255, 255, .28);
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .24), transparent 58%),
              linear-gradient(150deg, rgba(118, 199, 232, .2), rgba(31, 68, 102, .25));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 12px 28px -16px rgba(0, 0, 0, .6);
}
html[data-theme="glass"] .rail-logo .logo-text h1 { filter: none; }
html[data-theme="glass"] .rail-foot {
  background: linear-gradient(180deg, transparent, rgba(6, 18, 35, .28));
  border-top-color: rgba(255, 255, 255, .1);
}
html[data-theme="glass"] .nav-btn { border-color: transparent; }
html[data-theme="glass"] .nav-btn:hover {
  background: rgba(255, 255, 255, .075);
  border-color: rgba(255, 255, 255, .1);
}
html[data-theme="glass"] .nav-btn.active {
  color: #effaff;
  border-color: rgba(255, 255, 255, .2);
  background: linear-gradient(105deg, rgba(145, 221, 255, .2), rgba(255, 255, 255, .07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 8px 22px -16px rgba(0, 0, 0, .65);
}

/* ---------- 大平面玻璃：模糊只用于容器，不用于重复行 ---------- */
html[data-theme="glass"] :is(
  .card,
  .command-column,
  .command-core,
  .dashboard-status-band,
  .boiler-diagram,
  .table-wrap,
  .inventory-matrix-wrap,
  .ai-chart-container,
  .password-panel,
  .data-edit-panel,
  .assistant-panel
) {
  border-color: rgba(255, 255, 255, .18);
  background: var(--surface-glass-1);
  box-shadow: var(--glass-specular), var(--shadow-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
html[data-theme="glass"] :is(.password-panel, .data-edit-panel, .assistant-panel, .theme-menu) {
  background: var(--surface-glass-2);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
}
html[data-theme="glass"] :is(.card, .command-core)::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  opacity: .52;
}
html[data-theme="glass"] .card:hover { border-color: rgba(255, 255, 255, .28); }
html[data-theme="glass"] .boiler-diagram {
  background: linear-gradient(145deg, rgba(20, 43, 68, .62), rgba(7, 20, 38, .74));
}

/* ---------- 次级表面：不做高成本模糊，靠高光与层次表达材质 ---------- */
html[data-theme="glass"] :is(
  .dashboard-status-item,
  .command-metric,
  .hero-task-item,
  .trend-chart-wrap,
  .stat-card,
  .info-item,
  .surface-item,
  .command-warning,
  .aging-bucket,
  .mini-chart,
  .llm-viz,
  .llm-viz-metric,
  .mlog-stat,
  .ai-metric
) {
  border-color: rgba(255, 255, 255, .12);
  background: linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
html[data-theme="glass"] :is(.dashboard-status-item, .hero-task-item, .surface-item, .command-warning, .aging-bucket):hover {
  border-color: rgba(255, 255, 255, .24);
  background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .055));
}
html[data-theme="glass"] .dashboard-status-item .ds-ico {
  background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .055));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
html[data-theme="glass"] .health-ring-inner {
  background: radial-gradient(circle at 50% 22%, rgba(255, 255, 255, .18), transparent 65%), rgba(10, 30, 51, .7);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 12px 28px -16px rgba(0, 0, 0, .65);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
}

/* ---------- 控件：统一高光方向与按压反馈 ---------- */
html[data-theme="glass"] :is(.topbar-chip, .topbar-demo-toggle, .theme-toggle, .rail-toggle, .rail-collapse, .auth-btn) {
  border-color: rgba(255, 255, 255, .18);
  background: linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
  color: var(--text-mid);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 6px 18px -14px rgba(0, 0, 0, .7);
}
html[data-theme="glass"] :is(.topbar-chip, .topbar-demo-toggle, .theme-toggle, .rail-toggle, .auth-btn):hover {
  border-color: rgba(255, 255, 255, .34);
  background: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08));
  color: var(--accent-bright);
}
html[data-theme="glass"] .theme-menu { border-color: rgba(255, 255, 255, .24); }
html[data-theme="glass"] .theme-option:hover { background: rgba(255, 255, 255, .08); }
html[data-theme="glass"] .theme-option.active,
html[data-theme="glass"] .theme-option[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, .15);
  background: linear-gradient(110deg, rgba(145, 221, 255, .17), rgba(255, 255, 255, .055));
}
html[data-theme="glass"] .theme-option-icon {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

html[data-theme="glass"] :is(input, select, textarea) {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(5, 18, 35, .4);
  color: var(--text);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .16), 0 1px 0 rgba(255, 255, 255, .045);
}
html[data-theme="glass"] :is(input, select, textarea):focus {
  border-color: rgba(145, 221, 255, .72);
  box-shadow: 0 0 0 3px rgba(145, 221, 255, .12), inset 0 1px 2px rgba(0, 0, 0, .12);
}
html[data-theme="glass"] :is(input[type="checkbox"], input[type="radio"]):not(:checked) {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .36);
}
html[data-theme="glass"] .btn {
  border-color: rgba(255, 255, 255, .18);
  background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .055));
  color: var(--text-mid);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 5px 14px -10px rgba(0, 0, 0, .65);
}
html[data-theme="glass"] .btn:hover {
  border-color: rgba(255, 255, 255, .34);
  background: linear-gradient(145deg, rgba(255, 255, 255, .21), rgba(255, 255, 255, .08));
  color: #fff;
}
html[data-theme="glass"] .btn:active { transform: translateY(1px) scale(.99); }
html[data-theme="glass"] .btn-outline { background: rgba(255, 255, 255, .055); }
html[data-theme="glass"] :is(.unit-switch, .segmented-control) {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(4, 16, 32, .32);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .18);
}
html[data-theme="glass"] .unit-switch button.active {
  background: linear-gradient(145deg, rgba(255, 255, 255, .24), rgba(145, 221, 255, .14));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 4px 12px -8px rgba(0, 0, 0, .6);
}

/* ---------- 数据与弹层 ---------- */
html[data-theme="glass"] thead th {
  background: rgba(255, 255, 255, .075);
  color: var(--text-mid);
  border-bottom-color: rgba(255, 255, 255, .16);
}
html[data-theme="glass"] tbody td { border-bottom-color: rgba(255, 255, 255, .065); }
html[data-theme="glass"] tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .022); }
html[data-theme="glass"] tbody tr:hover td { background: rgba(145, 221, 255, .075); }
html[data-theme="glass"] :is(.code-output, .code-preview, .log-box, .llm-result, .llm-report-section) {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(5, 18, 35, .34);
}
html[data-theme="glass"] :is(.password-panel-head, .assistant-head) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent);
  border-bottom-color: rgba(255, 255, 255, .12);
}
html[data-theme="glass"] :is(.password-modal, .data-edit-modal) {
  background: rgba(2, 9, 21, .56);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}
html[data-theme="glass"] .toast {
  border-color: rgba(255, 255, 255, .2);
  background: linear-gradient(145deg, rgba(20, 42, 67, .9), rgba(7, 20, 39, .94));
  box-shadow: var(--shadow-pop);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
}
html[data-theme="glass"] .assistant-launcher {
  border-color: rgba(255, 255, 255, .22);
  background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(20, 48, 74, .5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), var(--shadow-lift);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
html[data-theme="glass"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(145, 221, 255, .13));
  background-clip: content-box;
}

/* ---------- 降级与可访问性 ---------- */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  html[data-theme="glass"] :is(.app-rail, .app-topbar) { background: rgba(8, 23, 43, .96); }
  html[data-theme="glass"] :is(.card, .command-column, .command-core, .dashboard-status-band, .boiler-diagram, .table-wrap, .inventory-matrix-wrap, .password-panel, .data-edit-panel, .assistant-panel, .theme-menu) {
    background: rgba(14, 34, 57, .97);
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="glass"] .bg-glow::before,
  html[data-theme="glass"] .bg-glow::after { animation: none; }
  .theme-menu { animation: none; }
}
@media (max-width: 700px) {
  .theme-menu { position: fixed; top: 66px; right: 12px; width: min(218px, calc(100vw - 24px)); }
}
@media print {
  .theme-menu { display: none !important; }
}