/* ==========================================================================
   glass-integration.css —— 「液态玻璃」样式库接入层
   加载顺序：glass.css → style.css → 本文件（最后，覆盖优先级最高）

   设计原则：
   1. 复用 glass.css 的 CSS 变量体系（--glass-* / --focus-*），不重写它的组件规则；
   2. 站点原有的类名（.btn / .panel / .topbar …）保持不变，只在这里做玻璃化翻新；
   3. 明暗双主题各自映射一套玻璃 token；实验画布本体保持不透明，保证读图清晰。
   ========================================================================== */

/* --------------------------------------------------------------------------
   §1 玻璃 token 的双主题映射
   -------------------------------------------------------------------------- */
:root {
        /* 浅色主题：白玻璃、深色字 */
        --glass-tint: 255 255 255;
        --glass-alpha: 0.42;
        --glass-text: #16233b;
        --glass-rim-color: 255 255 255;
        --glass-shadow-color: 30 58 110;
        --glass-shadow-alpha: 0.16;
        --glass-saturate: 1.3;
        --glass-blur-base: 14px;
        --accent-rgb: 37 99 235;          /* --accent #2563eb 的 RGB 三元组 */
}

html[data-time="day"] {
        /* 昼 = 站点浅色主题：白玻璃（glass.css §8 同特异性、但本文件后加载而胜出） */
        --glass-tint: 255 255 255;
        --glass-alpha: 0.42;
        --glass-text: #16233b;
        --glass-rim-color: 255 255 255;
        --glass-shadow-color: 30 58 110;
        --glass-shadow-alpha: 0.16;
        --accent: #2563eb;
        --accent-rgb: 37 99 235;
        --accent-soft: #dbeafe;
        --accent-ink: #1d4ed8;
}

html[data-time="night"] {
        /* 夜 = 站点深色主题：夜色玻璃（并修复三元组 --accent 污染） */
        --glass-tint: 170 192 226;
        --glass-alpha: 0.13;
        --glass-text: #e8eefc;
        --glass-rim-color: 205 222 255;
        --glass-shadow-color: 2 8 20;
        --glass-shadow-alpha: 0.48;
        --accent: #60a5fa;
        --accent-rgb: 96 165 250;
        --accent-soft: #1e3a8a;
        --accent-ink: #93c5fd;
}

[data-theme="dark"] {
        /* 深色主题：夜色玻璃、浅色字 */
        --glass-tint: 170 192 226;
        --glass-alpha: 0.13;
        --glass-text: #e8eefc;
        --glass-rim-color: 205 222 255;
        --glass-shadow-color: 2 8 20;
        --glass-shadow-alpha: 0.48;
        --glass-saturate: 1.45;
        --accent-rgb: 96 165 250;         /* --accent #60a5fa 的 RGB 三元组 */
}

/* --------------------------------------------------------------------------
   §2 天幕背景（body 直出，昼夜两套）+ 氛围光斑显隐
   -------------------------------------------------------------------------- */
body {
        background: linear-gradient(178deg, #4fa6f5 0%, #7cc0f8 42%, #b9e2ff 74%, #e7f4ff 100%) fixed;
}

[data-theme="dark"] body {
        background: linear-gradient(180deg, #050b23 0%, #0a1538 38%, #101f4d 66%, #16295f 100%) fixed;
}

/* 太阳只在白天、月亮只在黑夜 */
[data-time="day"] .orb--moon,
[data-time="night"] .orb--sun {
        display: none;
}

/* 夜晚光斑更收敛 */
[data-theme="dark"] .orb {
        --orb-opacity: 0.4;
}

/* --------------------------------------------------------------------------
   §3 布局堆叠：内容压在光斑之上；弹窗打开时背景「景深失焦」
   -------------------------------------------------------------------------- */
.layout {
        position: relative;
        z-index: 2;
        transition:
                filter var(--focus-duration, 420ms) var(--glass-ease, ease),
                transform var(--focus-duration, 420ms) var(--glass-ease, ease);
}

/* 复刻 glass.css §9 的景深对焦，但只在工作时挂 filter（避免常驻 filter
   产生的 containing block 影响移动端抽屉式侧栏） */
body.is-backdrop-blurred .layout {
        filter: blur(var(--focus-blur-amount, 10px))
                brightness(calc(1 - var(--focus-dim-amount, 0.3) * 0.55))
                saturate(calc(1 - var(--focus-desat-amount, 0.45)));
        transform: scale(var(--focus-scale-amount, 1.015));
        will-change: filter, transform;
}

body.is-backdrop-blurred .bg-orbs {
        transform: scale(calc(var(--focus-scale-amount, 1.015) + 0.01));
}

/* --------------------------------------------------------------------------
   §4 顶栏 / 侧栏：磨砂玻璃条
   -------------------------------------------------------------------------- */
.topbar {
        background: color-mix(in srgb, var(--bg-elev) 58%, transparent);
        -webkit-backdrop-filter: blur(18px) saturate(1.5);
        backdrop-filter: blur(18px) saturate(1.5);
        border-bottom: 1px solid rgb(var(--glass-rim-color) / 0.45);
        box-shadow: 0 8px 24px -14px rgb(var(--glass-shadow-color) / 0.35);
}

[data-theme="dark"] .topbar {
        border-bottom-color: rgb(var(--glass-rim-color) / 0.12);
}

.sidebar {
        background: color-mix(in srgb, var(--bg-elev) 64%, transparent);
        -webkit-backdrop-filter: blur(20px) saturate(1.4);
        backdrop-filter: blur(20px) saturate(1.4);
        border-right-color: rgb(var(--glass-rim-color) / 0.35);
}

[data-theme="dark"] .sidebar {
        border-right-color: rgb(var(--glass-rim-color) / 0.1);
}

/* 移动端抽屉态保持不透明度更高，保证可读 */
@media (max-width: 900px) {
        .sidebar {
                background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
        }
}

/* --------------------------------------------------------------------------
   §5 内容面板 / 画布容器 / 页脚：清透玻璃板
   -------------------------------------------------------------------------- */
.panel,
.stage-box,
.footer {
        background: color-mix(in srgb, var(--bg-elev) 82%, transparent);
        -webkit-backdrop-filter: blur(12px) saturate(1.3);
        backdrop-filter: blur(12px) saturate(1.3);
        border: 1px solid rgb(var(--glass-rim-color) / 0.5);
        box-shadow:
                inset 0 1px 0 rgb(255 255 255 / 0.35),
                0 14px 34px -18px rgb(var(--glass-shadow-color) / 0.4);
}

[data-theme="dark"] .panel,
[data-theme="dark"] .stage-box,
[data-theme="dark"] .footer {
        border-color: rgb(var(--glass-rim-color) / 0.12);
        box-shadow:
                inset 0 1px 0 rgb(255 255 255 / 0.06),
                0 16px 40px -18px rgb(var(--glass-shadow-color) / 0.6);
}

/* 画布本体保持不透明：实验图形的可读性优先 */
.stage-canvas {
        background: var(--bg-elev);
}

/* 表格容器不透明，长表格可读性优先 */
.table-wrap {
        background: var(--bg-elev);
}

/* --------------------------------------------------------------------------
   §6 按钮：液态玻璃胶囊
   -------------------------------------------------------------------------- */
.btn {
        height: auto;
        min-height: 32px;
        padding: 0.34em 1.05em;
        border: 1px solid rgb(var(--glass-rim-color) / 0.5);
        border-radius: 999px;
        color: var(--glass-text);
        font-weight: 600;
        background: linear-gradient(
                158deg,
                rgb(var(--glass-tint) / 0.5) 0%,
                rgb(var(--glass-tint) / 0.26) 42%,
                rgb(var(--glass-tint) / 0.44) 100%
        );
        -webkit-backdrop-filter: blur(10px) saturate(1.5);
        backdrop-filter: blur(10px) saturate(1.5);
        box-shadow:
                inset 0 0 0 1px rgb(var(--glass-rim-color) / 0.28),
                0 3px 10px -4px rgb(var(--glass-shadow-color) / 0.35);
        transition:
                transform 0.18s var(--glass-pop, ease),
                box-shadow 0.18s ease,
                background 0.3s ease;
}

.btn:hover {
        transform: translateY(-1px);
        box-shadow:
                inset 0 0 0 1px rgb(var(--glass-rim-color) / 0.42),
                0 6px 16px -6px rgb(var(--glass-shadow-color) / 0.45);
}

.btn:active {
        transform: scale(0.96);
}

.btn:focus-visible {
        outline: 2px solid rgb(var(--accent-rgb) / 0.65);
        outline-offset: 2px;
}

/* 主操作按钮：以品牌色为玻璃底色 */
.btn-primary {
        --glass-tint: var(--accent-rgb);
        --glass-alpha: 0.88;
        --glass-rim-color: 255 255 255;
        color: #fff;
        border-color: rgb(255 255 255 / 0.35);
        text-shadow: 0 1px 2px rgb(8 22 48 / 0.25);
}

.btn-primary:hover {
        background: linear-gradient(
                158deg,
                rgb(var(--glass-tint) / 0.98) 0%,
                rgb(var(--glass-tint) / 0.8) 42%,
                rgb(var(--glass-tint) / 0.92) 100%
        );
}

/* 顶栏图标按钮 */
.icon-btn {
        border: 1px solid rgb(var(--glass-rim-color) / 0.5);
        border-radius: 999px;
        color: var(--glass-text);
        background: linear-gradient(
                158deg,
                rgb(var(--glass-tint) / 0.46) 0%,
                rgb(var(--glass-tint) / 0.24) 60%,
                rgb(var(--glass-tint) / 0.4) 100%
        );
        -webkit-backdrop-filter: blur(10px) saturate(1.45);
        backdrop-filter: blur(10px) saturate(1.45);
        transition: transform 0.18s var(--glass-pop, ease), box-shadow 0.18s ease;
}

.icon-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px -6px rgb(var(--glass-shadow-color) / 0.45);
}

/* 搜索框：玻璃输入条 */
.search-wrap input {
        background: rgb(var(--glass-tint) / 0.45);
        border: 1px solid rgb(var(--glass-rim-color) / 0.55);
        -webkit-backdrop-filter: blur(10px) saturate(1.4);
        backdrop-filter: blur(10px) saturate(1.4);
        color: var(--glass-text);
        transition: box-shadow 0.2s ease, background 0.2s ease;
}

.search-wrap input::placeholder {
        color: var(--text-soft);
}

.search-wrap input:focus {
        background: rgb(var(--glass-tint) / 0.62);
        box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.22);
}

/* 标签页按钮 */
.tab {
        border: 1px solid transparent;
        border-radius: 999px;
        transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.tab.active {
        background: linear-gradient(
                158deg,
                rgb(var(--accent-rgb) / 0.16) 0%,
                rgb(var(--accent-rgb) / 0.08) 100%
        );
        color: var(--accent-ink);
        box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.35);
}

[data-theme="dark"] .tab.active {
        color: var(--accent);
}

/* --------------------------------------------------------------------------
   §7 二级参数菜单（液态玻璃弹窗）里的行样式
   -------------------------------------------------------------------------- */
.btn-params {
        margin-left: auto; /* 靠右，与主动作按钮区分 */
}

.params-count {
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        display: inline-grid;
        place-items: center;
        font-size: 11.5px;
        font-weight: 700;
        background: rgb(var(--accent-rgb) / 0.16);
        color: var(--accent-ink);
}

[data-theme="dark"] .params-count {
        color: var(--accent);
}

.params-body {
        display: flex;
        flex-direction: column;
        gap: 4px;
        max-height: min(54vh, 460px);
        overflow-y: auto;
        margin: 0 -6px;
        padding: 2px 6px;
        scrollbar-width: thin;
}

/* 滑杆行：名称 | 滑轨 | 数值 */
.params-body .ctrl {
        display: grid;
        grid-template-columns: minmax(96px, 130px) 1fr 76px;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgb(var(--glass-tint) / calc(var(--glass-alpha) * 0.5));
        border: 1px solid rgb(var(--glass-rim-color) / 0.22);
        transition: background 0.15s ease;
}

.params-body .ctrl:hover {
        background: rgb(var(--glass-tint) / calc(var(--glass-alpha) * 0.85));
}

.params-body .ctrl .range {
        width: 100%;
}

/* 开关行：名称居左，开关居右 */
.params-body .switch {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgb(var(--glass-tint) / calc(var(--glass-alpha) * 0.5));
        border: 1px solid rgb(var(--glass-rim-color) / 0.22);
}

.params-body .switch:hover {
        background: rgb(var(--glass-tint) / calc(var(--glass-alpha) * 0.85));
}

/* 下拉行 */
.params-body .ctrl-select {
        grid-template-columns: minmax(96px, 130px) 1fr;
}

.params-body .select {
        width: 100%;
}

/* 弹窗里的滑轨 / 滑块：玻璃质感 */
.params-body input[type="range"].range {
        height: 5px;
        border-radius: 999px;
        background: rgb(var(--glass-rim-color) / 0.3);
}

.params-body input[type="range"].range::-webkit-slider-thumb {
        width: 17px;
        height: 17px;
        background: var(--accent);
        border: 2px solid rgb(255 255 255 / 0.92);
        box-shadow: 0 1px 6px rgb(8 22 48 / 0.4);
}

.params-body input[type="range"].range::-moz-range-thumb {
        width: 15px;
        height: 15px;
        background: var(--accent);
        border: 2px solid rgb(255 255 255 / 0.92);
        box-shadow: 0 1px 6px rgb(8 22 48 / 0.4);
}

/* --------------------------------------------------------------------------
   §8 杂项翻新：读数卡 / 标签 / 实验卡 / 导航项
   -------------------------------------------------------------------------- */
.ro {
        background: rgb(var(--glass-tint) / 0.5);
        border: 1px solid rgb(var(--glass-rim-color) / 0.4);
}

[data-theme="dark"] .ro {
        background: rgb(var(--glass-tint) / 0.08);
        border-color: rgb(var(--glass-rim-color) / 0.12);
}

.tag {
        background: rgb(var(--glass-tint) / 0.42);
        border: 1px solid rgb(var(--glass-rim-color) / 0.45);
}

[data-theme="dark"] .tag {
        background: rgb(var(--glass-tint) / 0.09);
        border-color: rgb(var(--glass-rim-color) / 0.14);
}

/* 首页真玻璃：hero / 实验卡片挂 .glass（data-lod），style.css 的实底规则
   （后加载）会盖住 .glass 的底色与阴影 —— 在此以更高特异性恢复完整质感。
   卡片为 data-lod="window"（纯 CSS 窗面：雨天挂水珠纹理与下淌雨痕、雪天结霜），
   hero 为 data-lod="full"（DOM 水珠 + 飞雪 + 跟随鼠标的光透镜）。 */
.card.glass {
        background: linear-gradient(
                158deg,
                rgb(var(--glass-tint) / calc(var(--glass-alpha) * 1.15)) 0%,
                rgb(var(--glass-tint) / calc(var(--glass-alpha) * 0.6)) 42%,
                rgb(var(--glass-tint) / calc(var(--glass-alpha) * 0.88)) 100%
        );
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate))
                brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate))
                brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
        border: 0;
        color: var(--glass-text);
        box-shadow:
                inset 0 0 0 1px rgb(var(--glass-rim-color) / var(--glass-rim)),
                inset 0 var(--glass-edge-inset) calc(var(--glass-edge-inset) * 1.6)
                        calc(var(--glass-edge-inset) * -0.5)
                        rgb(var(--glass-rim-color) / calc(var(--glass-rim) * 0.5)),
                inset 0 calc(var(--glass-edge-inset) * -1.1) calc(var(--glass-edge-inset) * 2.4)
                        calc(var(--glass-edge-inset) * -1.6)
                        rgb(var(--glass-inner-shadow-color) / calc(var(--glass-inner-shadow) * var(--glass-thickness-scale))),
                var(--glass-shadow-1),
                var(--glass-shadow-2),
                var(--glass-shadow-3);
        transition: transform 0.18s var(--glass-pop, ease), box-shadow 0.18s ease,
                background var(--dur-theme, 900ms) var(--glass-ease, ease);
}

.card.glass:hover {
        transform: translateY(-2px);
        box-shadow:
                inset 0 0 0 1px rgb(var(--glass-rim-color) / min(1, var(--glass-rim) + 0.15)),
                var(--glass-shadow-1),
                var(--glass-shadow-2),
                var(--glass-shadow-3),
                0 14px 30px -12px rgb(var(--glass-shadow-color) / var(--glass-shadow-alpha));
}

.hero.glass {
        /* style.css 的 .hero 几乎零内边距，玻璃面板需要留白 */
        padding: clamp(18px, 3vw, 30px);
}

.nav-item {
        border-radius: 10px;
        transition: background 0.15s ease, box-shadow 0.15s ease;
}

.nav-item.active {
        background: linear-gradient(
                158deg,
                rgb(var(--accent-rgb) / 0.16) 0%,
                rgb(var(--accent-rgb) / 0.07) 100%
        );
        box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.3);
}

/* --------------------------------------------------------------------------
   §9 动效减量化 / 小屏适配
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
        .bg-orbs--animated .orb {
                animation: none;
        }

        .layout,
        body.is-backdrop-blurred .layout {
                transition: none;
                transform: none;
        }
}

/* 窄屏：参数弹窗更贴近全屏，按钮行允许换行 */
@media (max-width: 640px) {
        .stage-controls {
                gap: 8px;
        }

        .btn-params {
                margin-left: 0;
                width: 100%;
                justify-content: center;
        }

        .params-body .ctrl {
                grid-template-columns: 1fr;
                gap: 6px;
        }

        .params-body .ctrl .ctrl-val {
                text-align: left;
        }
}

/* 顶栏天气按钮：手动预览态描一圈强调色，提示「非实时天气」 */
#weather-toggle.is-manual {
        box-shadow:
                inset 0 0 0 1px rgb(var(--accent-rgb) / 0.55),
                0 0 0 3px rgb(var(--accent-rgb) / 0.14);
}

/* 弹窗内开关轨道在玻璃底上的可见度增强 */
.params-body .switch-track {
        background: rgb(var(--glass-rim-color) / 0.35);
        box-shadow: inset 0 0 0 1px rgb(var(--glass-rim-color) / 0.35);
}

.params-body .switch-input:checked + .switch-track {
        background: var(--accent);
        box-shadow: none;
}

/* --------------------------------------------------------------------------
   §10 天气 × 可读性兜底
   雨天 window 级窗面会铺满水珠纹理与雨痕（::before/::after），白天亮天空上
   卡片小字会被冲淡 —— 雨天白天给实验卡片补一层更实的玻璃底；夜晚天空很暗、
   深底浅字对比天然足够，维持原透明度不动。
   -------------------------------------------------------------------------- */
html[data-weather="rain"][data-time="day"] .card.glass[data-lod="window"],
html[data-weather="thunder"][data-time="day"] .card.glass[data-lod="window"] {
        --glass-alpha: 0.5;
        --rain-opacity: 0.45; /* 水珠纹理稍收敛，给卡片小字让路 */
}

/* 窄屏：天气按钮收窄（图标+省略文字），给搜索框让位 */
@media (max-width: 640px) {
        #weather-toggle {
                max-width: 92px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding-left: 0.7em;
                padding-right: 0.7em;
        }
}