/* 全局样式 */
* {
    box-sizing: border-box;
}

body {
    /* 黑灰渐变背景 */
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0d0d0d 100%);
    color: #fff;
    overflow: hidden;
    zoom: 1; /* 强制默认 100% 缩放比例 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

/* 主容器 */
#app {
    width: 100%;
    height: 100%;
    max-width: 1400px;
    padding: 1rem;
    margin: 0 auto;
}

/* 16:9 网格布局 */
.aspect-16-9 {
    aspect-ratio: 16 / 9;
    max-height: 90vh;
    width: auto;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 1rem;
}

/* ============================================================
   液态扭曲毛玻璃面板 (Liquid Glass Panel)
   ------------------------------------------------------------
   三层"三明治"结构（通过 isolation:isolate + 绝对定位隔离）：
     - ::after  物理特效层：backdrop-filter 模糊 + SVG 液态折射
     - ::before 质感高光层：微弱白底 + inset 内阴影模拟边缘高光
     - 子元素    内容层：z-index:10 浮在特效层之上，保持清晰
   依赖：HTML 中需内联 SVG 滤镜 #liquid-glass-refraction
   ============================================================ */

/* 玻璃面板主体：建立独立的 stacking context，防止滤镜互相污染 */
.glass {
    position: relative;
    border-radius: 28px;
    isolation: isolate; /* 核心：防止子元素与伪元素的滤镜互相污染 */
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    animation: fadeIn 0.5s ease-out;
    /* 不使用 overflow:hidden，否则会裁剪子元素（如滑动条拇指）并阻止内部滚动 */
    transition: border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* 质感高光层（中间层）：极弱白底 + 内阴影打造玻璃边缘光晕 */
.glass::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.03); /* 极弱白底，增加玻璃厚度感 */
    box-shadow:
        inset 0 0 8px rgba(255, 255, 255, 0.6),   /* 顶/左内边缘高光 */
        inset 0 0 2px rgba(255, 255, 255, 0.3),   /* 次级柔和高光 */
        inset 0 -1px 4px rgba(0, 0, 0, 0.15);     /* 底部微弱阴影，增加立体感 */
    pointer-events: none;
}

/* 核心特效层（最底层）：CSS 模糊（毛玻璃基底） + SVG 扭曲（液态折射） */
.glass::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;

    /* 纯 CSS 毛玻璃效果，不使用 SVG 扭曲（避免条纹） */
    backdrop-filter: blur(30px) saturate(1.4);
    -webkit-backdrop-filter: blur(30px) saturate(1.4);
    /* filter: url(#liquid-glass-refraction); */

    /* 关键：在伪元素自身上裁剪，避免污染外部，
       同时不干扰父元素的子元素溢出（如滑动条拇指） */
    clip-path: inset(0 round 28px);

    pointer-events: none;
}

/* 悬浮反馈：边框高光亮化 + 微弱外发光 */
.glass:hover {
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.3);
}

/* 确保 glass 内部内容浮在玻璃层之上，保持清晰可读 */
.glass > * {
    position: relative;
    z-index: 10;
}

/* 全局面板文字可读性：微弱阴影确保亮/暗背景下均清晰 */
.glass h1, .glass h2, .glass h3, .glass h4, .glass label, .glass span, .glass div {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* ============================================================
   液态扭曲毛玻璃卡片 (Liquid Glass Card)
   ------------------------------------------------------------
   继承 .glass 的三层结构，额外增加固定尺寸 + 悬浮动效。
   用于独立的展示型卡片组件。
   ============================================================ */

/* 卡片主体：固定尺寸 + 悬浮交互 */
.glass-card {
    position: relative;
    width: 350px;
    height: 220px;
    border-radius: 24px;
    isolation: isolate;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s ease;
}

/* 卡片悬浮动效：轻微上浮 + 阴影扩散 */
.glass-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.35);
}

/* 卡片专用伪元素：复用与 .glass 相同的三层结构 */
.glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.03);
    box-shadow:
        inset 0 0 8px rgba(255, 255, 255, 0.6),
        inset 0 0 2px rgba(255, 255, 255, 0.3),
        inset 0 -1px 4px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

.glass-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    filter: url(#liquid-glass-refraction);
    pointer-events: none;
}

/* 内容层：确保绝对清晰和可读性，浮在所有特效层之上 */
.glass-content {
    position: relative;
    z-index: 10;
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 提高文字对比度 */
}

/* 卡片标题 */
.glass-content h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin: 0 0 8px 0;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.25),
        0 0 12px rgba(255, 255, 255, 0.08); /* 双重阴影：暗底对比 + 光晕感 */
}

/* 卡片正文 */
.glass-content p {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    flex: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* 卡片底部按钮区 */
.glass-content .card-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

/* 卡片内嵌按钮：嵌套玻璃感（较弱的毛玻璃 + 半透明底） */
.glass-content .card-btn {
    position: relative;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow:
        inset 0 0 4px rgba(255, 255, 255, 0.15), /* 按钮内高光 */
        0 2px 6px rgba(0, 0, 0, 0.15);
}

/* 按钮 Hover 平滑过渡：增亮 + 边框强化 + 轻微上浮 */
.glass-content .card-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
    box-shadow:
        inset 0 0 6px rgba(255, 255, 255, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 按钮 Active 按压反馈 */
.glass-content .card-btn:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.22);
}

/* 主按钮变体：略强的视觉权重 */
.glass-content .card-btn.primary {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.35);
}

.glass-content .card-btn.primary:hover {
    background: rgba(59, 130, 246, 0.28);
    border-color: rgba(59, 130, 246, 0.5);
}

/* Canvas画布 */
canvas {
    image-rendering: pixelated;
    border-radius: 12px;
}

/* Tooltip - 信息提示框 */
.tooltip {
    pointer-events: none;
    position: absolute;
    z-index: 100;
    background: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* 按钮 - 液态玻璃效果 */
button {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

button:hover {
    background: rgba(255, 255, 255, 0.2);
}

button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
}

button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* 干扰事件按钮特殊样式 */
button.bg-orange-500\/20,
button.bg-red-500\/20,
button.bg-yellow-500\/20 {
    background: rgba(255, 255, 255, 0.04);
}

button.bg-orange-500\/20:hover {
    background: rgba(255, 165, 0, 0.15);
    border-color: rgba(255, 165, 0, 0.3);
}

button.bg-red-500\/20:hover {
    background: rgba(255, 0, 0, 0.15);
    border-color: rgba(255, 0, 0, 0.3);
}

button.bg-yellow-500\/20:hover {
    background: rgba(255, 255, 0, 0.15);
    border-color: rgba(255, 255, 0, 0.3);
}

/* 下拉选择框 */
select {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 10px 14px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' opacity='0.6' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

select:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.4);
}

select option {
    background: #1a1a1a;
    color: #fff;
}

/* 玻璃态滑动条 (developed © Maxuiux) */
.slider-wrapper {
    height: 24px;            /* 固定高度：包住 20px 拇指 + 上下各 2px 余量 */
    display: flex;
    align-items: center;     /* 让轨道在垂直方向居中 */
    overflow: hidden;        /* 裁剪拇指超出容器的部分 */
    border-radius: 999px;
}

.slider-container {
    position: relative;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
}

.slider-progress {
    position: absolute;
    height: 100%;
    background: linear-gradient(117deg, #49a3fc 0%, #3681ee 100%);
    border-radius: 999px;
    width: 0%;
    z-index: 1;
}

.slider-thumb-glass {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 20px;
    border-radius: 999px;
    cursor: pointer;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 8px 0 rgba(0, 30, 63, 0.1), 0 0 2px 0 rgba(0, 9, 20, 0.1);
    overflow: hidden;
    transition: transform 0.15s ease, height 0.15s ease;
}

.slider-thumb-glass-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.1);
}

.slider-thumb-glass-specular {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    box-shadow:
        inset 1px 1px 0 rgba(69, 168, 243, 0.2),
        inset 1px 3px 0 rgba(28, 63, 90, 0.05),
        inset 0 0 22px rgb(255 255 255 / 60%),
        inset -1px -1px 0 rgba(69, 168, 243, 0.12);
}

.slider-thumb-glass-overlay,
.slider-thumb-glass-specular {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.slider-thumb-glass.active {
    background-color: transparent;
    box-shadow: none;
}

.slider-thumb-glass.active .slider-thumb-glass-overlay,
.slider-thumb-glass.active .slider-thumb-glass-specular {
    opacity: 1;
}

.slider-thumb-glass:active {
    transform: translate(-50%, -50%) scaleY(0.98) scaleX(1.1);
}

/* 自定义滚动条 */
.custom-scroll::-webkit-scrollbar {
    width: 6px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 3px;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* 文本样式 */
h1, h2, h3, h4, h5, h6 {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* 分隔线 */
.border-t, .border-l {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Safari/Mozilla回退 */
@supports not (backdrop-filter: blur(1px)) {
    .glass::after, button, select {
        background: rgba(20, 20, 20, 0.6);
    }

    .tooltip {
        background: rgba(10, 10, 10, 0.8);
    }
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}