/* ============================================================
   液体玻璃主题包 (Liquid Glass Themes)
   用法：
     <html data-glass="aurora" data-theme="dark">
     可选玻璃主题：aurora / peach / mint / violet / ocean / sunset / obsidian / sakura
     data-theme 控制明暗：dark / light
   说明：
     主题色通过 CSS 变量下发，同时兼容解析页原有的
     --bg-color / --card-bg / --text-color / --border-color 等变量，
     因此解析页、首页、汽水页可以共用同一套主题。
   ============================================================ */

/* ---------------- 基础令牌 ---------------- */
:root {
    --glass-blur: 26px;
    --glass-sat: 180%;
    --glass-radius: 22px;
    --glass-radius-sm: 14px;
    --glass-speed: .45s;

    --glass-surface: rgba(255, 255, 255, .10);
    --glass-surface-2: rgba(255, 255, 255, .16);
    --glass-surface-3: rgba(255, 255, 255, .22);
    --glass-stroke: rgba(255, 255, 255, .20);
    --glass-stroke-2: rgba(255, 255, 255, .38);
    --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .30);
    --glass-shadow: 0 10px 36px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .14);
    --glass-shadow-lg: 0 22px 60px rgba(0, 0, 0, .38);

    --accent: #4fd1c5;
    --accent-2: #818cf8;
    --accent-3: #f472b6;

    /* 主题色球（由 JS 按主题/明暗注入，这里给默认值兜底） */
    --c1: var(--accent);
    --c2: var(--accent-2);
    --c3: var(--accent-3);
}

/* ---------------- 背景层（渐变 + 浮动光斑） ---------------- */
html[data-glass] {
    min-height: 100%;
    background: var(--g-bg, #0b1026);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

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

/* 光斑容器（由 glass-theme.js 注入，无 JS 时也不报错） */
.glass-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.glass-bg .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .42;
    will-change: transform;
    mix-blend-mode: screen;
}

.glass-bg .orb-1 {
    width: 52vmax;
    height: 52vmax;
    top: -16vmax;
    left: -12vmax;
    background: var(--accent);
    animation: glassFloat1 30s ease-in-out infinite alternate;
}

.glass-bg .orb-2 {
    width: 46vmax;
    height: 46vmax;
    bottom: -14vmax;
    right: -10vmax;
    background: var(--accent-2);
    animation: glassFloat2 36s ease-in-out infinite alternate;
}

.glass-bg .orb-3 {
    width: 36vmax;
    height: 36vmax;
    top: 38%;
    left: 50%;
    background: var(--accent-3);
    opacity: .28;
    animation: glassFloat3 42s ease-in-out infinite alternate;
}

@keyframes glassFloat1 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(6vmax, 8vmax, 0) scale(1.12); }
}

@keyframes glassFloat2 {
    from { transform: translate3d(0, 0, 0) scale(1.08); }
    to   { transform: translate3d(-8vmax, -6vmax, 0) scale(1); }
}

@keyframes glassFloat3 {
    from { transform: translate3d(0, 0, 0) scale(.95); }
    to   { transform: translate3d(-10vmax, 6vmax, 0) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .glass-bg .orb { animation: none !important; }
    html[data-glass] * { transition-duration: .01ms !important; }
}

/* ---------------- 玻璃表面通用类 ---------------- */
.glass,
html[data-glass] .glass-surface {
    background: var(--glass-surface);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: 1px solid var(--glass-stroke);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow), var(--glass-inner);
    color: var(--glass-text);
}

/* ---------------- 解析页 / 通用组件玻璃化 ---------------- */
html[data-glass] .header,
html[data-glass] .card-form,
html[data-glass] .result-card,
html[data-glass] .card,
html[data-glass] .modal-content,
html[data-glass] .accordion-item,
html[data-glass] .list-group-item,
html[data-glass] .site-info-section {
    background: var(--glass-surface) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: 1px solid var(--glass-stroke) !important;
    border-radius: var(--glass-radius) !important;
    box-shadow: var(--glass-shadow), var(--glass-inner) !important;
    color: var(--glass-text) !important;
    transition: background var(--glass-speed) ease,
                border-color var(--glass-speed) ease,
                box-shadow var(--glass-speed) ease;
}

/* 悬浮高光加强 */
html[data-glass] .card-form:hover,
html[data-glass] .result-card:hover {
    background: var(--glass-surface-2) !important;
    border-color: var(--glass-stroke-2) !important;
    box-shadow: var(--glass-shadow-lg), var(--glass-inner) !important;
}

/* 文本 */
html[data-glass] h1, html[data-glass] h2, html[data-glass] h3,
html[data-glass] h4, html[data-glass] h5, html[data-glass] h6,
html[data-glass] .card-title { color: var(--glass-text) !important; }

html[data-glass] .text-muted,
html[data-glass] .text-secondary,
html[data-glass] small { color: var(--glass-text-muted) !important; }

html[data-glass] hr { border-color: var(--glass-stroke); opacity: 1; }

/* 表单控件 */
html[data-glass] .form-control,
html[data-glass] .form-select,
html[data-glass] input[type="text"],
html[data-glass] input[type="search"],
html[data-glass] input[type="url"],
html[data-glass] textarea {
    background: var(--glass-input-bg) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--glass-stroke) !important;
    border-radius: var(--glass-radius-sm) !important;
    color: var(--glass-text) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .10);
}

html[data-glass] .form-control::placeholder,
html[data-glass] input::placeholder { color: var(--glass-text-muted) !important; }

html[data-glass] .form-control:focus,
html[data-glass] .form-select:focus,
html[data-glass] input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--glass-focus), inset 0 1px 2px rgba(0, 0, 0, .10) !important;
    outline: none;
}

/* 按钮：主色玻璃 */
html[data-glass] .btn-primary {
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--accent) 78%, transparent),
        color-mix(in srgb, var(--accent-2) 78%, transparent)) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid var(--glass-stroke-2) !important;
    border-radius: var(--glass-radius-sm) !important;
    color: var(--glass-btn-text) !important;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 30%, transparent), var(--glass-inner);
}

html[data-glass] .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 42%, transparent), var(--glass-inner);
}

html[data-glass] .btn-outline-secondary,
html[data-glass] .btn-secondary,
html[data-glass] .btn-light {
    background: var(--glass-surface) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid var(--glass-stroke) !important;
    color: var(--glass-text) !important;
}

html[data-glass] .btn-outline-secondary:hover,
html[data-glass] .btn-secondary:hover,
html[data-glass] .btn-light:hover {
    background: var(--glass-surface-2) !important;
}

/* 导航 / 标签 */
html[data-glass] .nav-tabs .nav-link {
    color: var(--glass-text-muted) !important;
    border: 1px solid transparent;
    border-radius: var(--glass-radius-sm) var(--glass-radius-sm) 0 0;
}

html[data-glass] .nav-tabs .nav-link.active {
    background: var(--glass-surface-2) !important;
    border-color: var(--glass-stroke) var(--glass-stroke) transparent !important;
    color: var(--glass-text) !important;
}

html[data-glass] .badge { border: 1px solid var(--glass-stroke); }

/* APlayer 音乐播放器玻璃化 */
html[data-glass] .aplayer {
    background: var(--glass-surface) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: 1px solid var(--glass-stroke) !important;
    border-radius: var(--glass-radius) !important;
    box-shadow: var(--glass-shadow), var(--glass-inner) !important;
    color: var(--glass-text) !important;
}

html[data-glass] .aplayer .aplayer-info .aplayer-music .aplayer-title,
html[data-glass] .aplayer .aplayer-info .aplayer-music .aplayer-author { color: var(--glass-text) !important; }

html[data-glass] .aplayer .aplayer-list ol li { border-top-color: var(--glass-stroke) !important; }
html[data-glass] .aplayer .aplayer-list ol li:hover { background: var(--glass-surface-2) !important; }
html[data-glass] .aplayer .aplayer-list ol li.aplayer-list-light { background: var(--glass-surface-3) !important; }
html[data-glass] .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
    background: var(--glass-stroke) !important;
}

/* 进度条 */
html[data-glass] .progress {
    background: var(--glass-stroke) !important;
    border-radius: 999px;
}

html[data-glass] .progress-bar {
    background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important;
}

/* 滚动条 */
html[data-glass] ::-webkit-scrollbar-thumb {
    background: var(--glass-stroke-2) !important;
    border-radius: 999px;
}

html[data-glass] ::-webkit-scrollbar-track { background: transparent !important; }

/* 兼容解析页原有的变量命名 */
html[data-glass] {
    --primary-color: var(--glass-text);
    --secondary-color: var(--accent);
    --bg-color: var(--g-bg);
    --card-bg: var(--glass-surface);
    --text-color: var(--glass-text);
    --text-muted: var(--glass-text-muted);
    --border-color: var(--glass-stroke);
}

/* 链接 */
html[data-glass] a { color: var(--accent); }
html[data-glass] a:hover { color: var(--accent-2); }

/* ============================================================
   主题 1 · 极光 aurora （暗）
   ============================================================ */
html[data-glass="aurora"][data-theme="dark"] {
    /* نەپىس قاراڭغۇ كۆك — ئۈچ قاتلاملىق گرادىئېنت، چوڭقۇرلۇق ھېسسىيىتى */
    --g-bg: radial-gradient(ellipse 90% 70% at 12% -5%, #12314f 0%, transparent 55%),
            radial-gradient(ellipse 80% 65% at 92% 108%, #231a4d 0%, transparent 58%),
            radial-gradient(ellipse 70% 60% at 55% 50%, #0a2b3a 0%, transparent 62%),
            linear-gradient(155deg, #070d1e 0%, #0a1730 45%, #0b2136 78%, #060b18 100%);
    --accent: #5eead4;
    --accent-2: #818cf8;
    --accent-3: #f472b6;
    --glass-surface: rgba(255, 255, 255, .075);
    --glass-surface-2: rgba(255, 255, 255, .14);
    --glass-surface-3: rgba(255, 255, 255, .22);
    --glass-stroke: rgba(255, 255, 255, .16);
    --glass-stroke-2: rgba(255, 255, 255, .38);
    --glass-text: #f3f8ff;
    --glass-text-muted: rgba(224, 238, 255, .70);
    --glass-input-bg: rgba(255, 255, 255, .065);
    --glass-focus: rgba(94, 234, 212, .30);
    --glass-btn-text: #062024;
    --glass-shadow: 0 14px 44px rgba(0, 0, 0, .38), 0 3px 10px rgba(0, 0, 0, .18);
    --glass-shadow-lg: 0 28px 72px rgba(0, 0, 0, .46);
    --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .24);
}

html[data-glass="aurora"][data-theme="light"] {
    --g-bg: linear-gradient(140deg, #e7fbfa 0%, #e6ecff 45%, #f7e9ff 100%);
    --accent: #0d9488;
    --accent-2: #4f46e5;
    --accent-3: #db2777;
    --glass-surface: rgba(255, 255, 255, .58);
    --glass-surface-2: rgba(255, 255, 255, .74);
    --glass-surface-3: rgba(255, 255, 255, .86);
    --glass-stroke: rgba(255, 255, 255, .85);
    --glass-stroke-2: rgba(13, 148, 136, .38);
    --glass-shadow: 0 10px 34px rgba(31, 62, 110, .16), 0 2px 8px rgba(31, 62, 110, .08);
    --glass-shadow-lg: 0 20px 54px rgba(31, 62, 110, .22);
    --glass-text: #0f2033;
    --glass-text-muted: rgba(15, 32, 51, .62);
    --glass-input-bg: rgba(255, 255, 255, .78);
    --glass-focus: rgba(13, 148, 136, .22);
    --glass-btn-text: #ffffff;
    --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .95);
}

/* ============================================================
   主题 2 · 蜜桃 peach （亮）
   ============================================================ */
html[data-glass="peach"][data-theme="dark"] {
    --g-bg: linear-gradient(140deg, #2a1120 0%, #4a1d2e 45%, #5c2a1f 80%, #2b0f18 100%);
    --accent: #fdba74;
    --accent-2: #f9a8d4;
    --accent-3: #fcd34d;
    --glass-surface: rgba(255, 255, 255, .09);
    --glass-surface-2: rgba(255, 255, 255, .16);
    --glass-surface-3: rgba(255, 255, 255, .23);
    --glass-stroke: rgba(255, 255, 255, .19);
    --glass-stroke-2: rgba(255, 255, 255, .42);
    --glass-text: #fff6f0;
    --glass-text-muted: rgba(255, 233, 220, .70);
    --glass-input-bg: rgba(255, 255, 255, .08);
    --glass-focus: rgba(253, 186, 116, .28);
    --glass-btn-text: #3a1405;
    --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .27);
}

html[data-glass="peach"][data-theme="light"] {
    --g-bg: linear-gradient(140deg, #fff4ec 0%, #ffe6ee 46%, #ffe9d4 100%);
    --accent: #ea580c;
    --accent-2: #db2777;
    --accent-3: #d97706;
    --glass-surface: rgba(255, 255, 255, .60);
    --glass-surface-2: rgba(255, 255, 255, .76);
    --glass-surface-3: rgba(255, 255, 255, .88);
    --glass-stroke: rgba(255, 255, 255, .88);
    --glass-stroke-2: rgba(234, 88, 12, .34);
    --glass-shadow: 0 10px 34px rgba(146, 64, 14, .14), 0 2px 8px rgba(146, 64, 14, .07);
    --glass-shadow-lg: 0 20px 54px rgba(146, 64, 14, .20);
    --glass-text: #40200c;
    --glass-text-muted: rgba(64, 32, 12, .62);
    --glass-input-bg: rgba(255, 255, 255, .80);
    --glass-focus: rgba(234, 88, 12, .20);
    --glass-btn-text: #ffffff;
    --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .96);
}

/* ============================================================
   主题 3 · 薄荷 mint （亮）
   ============================================================ */
html[data-glass="mint"][data-theme="dark"] {
    --g-bg: linear-gradient(140deg, #04211c 0%, #073b31 45%, #06403f 80%, #04201e 100%);
    --accent: #34d399;
    --accent-2: #22d3ee;
    --accent-3: #a3e635;
    --glass-surface: rgba(255, 255, 255, .085);
    --glass-surface-2: rgba(255, 255, 255, .15);
    --glass-surface-3: rgba(255, 255, 255, .22);
    --glass-stroke: rgba(255, 255, 255, .18);
    --glass-stroke-2: rgba(255, 255, 255, .40);
    --glass-text: #eefdf7;
    --glass-text-muted: rgba(214, 250, 236, .68);
    --glass-input-bg: rgba(255, 255, 255, .07);
    --glass-focus: rgba(52, 211, 153, .28);
    --glass-btn-text: #04231a;
    --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .26);
}

html[data-glass="mint"][data-theme="light"] {
    --g-bg: linear-gradient(140deg, #ecfff8 0%, #ddf8ee 46%, #e8fdf6 100%);
    --accent: #059669;
    --accent-2: #0891b2;
    --accent-3: #65a30d;
    --glass-surface: rgba(255, 255, 255, .60);
    --glass-surface-2: rgba(255, 255, 255, .76);
    --glass-surface-3: rgba(255, 255, 255, .88);
    --glass-stroke: rgba(255, 255, 255, .88);
    --glass-stroke-2: rgba(5, 150, 105, .32);
    --glass-shadow: 0 10px 34px rgba(6, 78, 59, .13), 0 2px 8px rgba(6, 78, 59, .07);
    --glass-shadow-lg: 0 20px 54px rgba(6, 78, 59, .19);
    --glass-text: #062b20;
    --glass-text-muted: rgba(6, 43, 32, .62);
    --glass-input-bg: rgba(255, 255, 255, .80);
    --glass-focus: rgba(5, 150, 105, .20);
    --glass-btn-text: #ffffff;
    --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .96);
}

/* ============================================================
   主题 4 · 紫罗兰 violet （暗）
   ============================================================ */
html[data-glass="violet"][data-theme="dark"] {
    --g-bg: linear-gradient(140deg, #150826 0%, #2b1150 44%, #3d1568 78%, #150826 100%);
    --accent: #a78bfa;
    --accent-2: #f0abfc;
    --accent-3: #60a5fa;
    --glass-surface: rgba(255, 255, 255, .09);
    --glass-surface-2: rgba(255, 255, 255, .16);
    --glass-surface-3: rgba(255, 255, 255, .23);
    --glass-stroke: rgba(255, 255, 255, .19);
    --glass-stroke-2: rgba(255, 255, 255, .42);
    --glass-text: #f6f1ff;
    --glass-text-muted: rgba(232, 220, 255, .70);
    --glass-input-bg: rgba(255, 255, 255, .08);
    --glass-focus: rgba(167, 139, 250, .30);
    --glass-btn-text: #1a0833;
    --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .28);
}

html[data-glass="violet"][data-theme="light"] {
    --g-bg: linear-gradient(140deg, #f6f1ff 0%, #ece3ff 46%, #fbeaff 100%);
    --accent: #7c3aed;
    --accent-2: #c026d3;
    --accent-3: #2563eb;
    --glass-surface: rgba(255, 255, 255, .60);
    --glass-surface-2: rgba(255, 255, 255, .76);
    --glass-surface-3: rgba(255, 255, 255, .88);
    --glass-stroke: rgba(255, 255, 255, .88);
    --glass-stroke-2: rgba(124, 58, 237, .32);
    --glass-shadow: 0 10px 34px rgba(76, 29, 149, .15), 0 2px 8px rgba(76, 29, 149, .08);
    --glass-shadow-lg: 0 20px 54px rgba(76, 29, 149, .21);
    --glass-text: #241240;
    --glass-text-muted: rgba(36, 18, 64, .62);
    --glass-input-bg: rgba(255, 255, 255, .80);
    --glass-focus: rgba(124, 58, 237, .20);
    --glass-btn-text: #ffffff;
    --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .96);
}

/* ============================================================
   主题 5 · 深海 ocean （暗）
   ============================================================ */
html[data-glass="ocean"][data-theme="dark"] {
    --g-bg: linear-gradient(140deg, #041428 0%, #062c48 44%, #084a63 78%, #03121f 100%);
    --accent: #38bdf8;
    --accent-2: #22d3ee;
    --accent-3: #60a5fa;
    --glass-surface: rgba(255, 255, 255, .085);
    --glass-surface-2: rgba(255, 255, 255, .15);
    --glass-surface-3: rgba(255, 255, 255, .22);
    --glass-stroke: rgba(255, 255, 255, .18);
    --glass-stroke-2: rgba(255, 255, 255, .40);
    --glass-text: #eef8ff;
    --glass-text-muted: rgba(206, 234, 255, .68);
    --glass-input-bg: rgba(255, 255, 255, .07);
    --glass-focus: rgba(56, 189, 248, .28);
    --glass-btn-text: #041e2e;
    --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .26);
}

html[data-glass="ocean"][data-theme="light"] {
    --g-bg: linear-gradient(140deg, #eaf7ff 0%, #dbeeff 46%, #e6fbfd 100%);
    --accent: #0284c7;
    --accent-2: #0891b2;
    --accent-3: #2563eb;
    --glass-surface: rgba(255, 255, 255, .60);
    --glass-surface-2: rgba(255, 255, 255, .76);
    --glass-surface-3: rgba(255, 255, 255, .88);
    --glass-stroke: rgba(255, 255, 255, .88);
    --glass-stroke-2: rgba(2, 132, 199, .32);
    --glass-shadow: 0 10px 34px rgba(7, 59, 102, .14), 0 2px 8px rgba(7, 59, 102, .07);
    --glass-shadow-lg: 0 20px 54px rgba(7, 59, 102, .20);
    --glass-text: #082b45;
    --glass-text-muted: rgba(8, 43, 69, .62);
    --glass-input-bg: rgba(255, 255, 255, .80);
    --glass-focus: rgba(2, 132, 199, .20);
    --glass-btn-text: #ffffff;
    --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .96);
}

/* ============================================================
   主题 6 · 日落 sunset （暗）
   ============================================================ */
html[data-glass="sunset"][data-theme="dark"] {
    --g-bg: linear-gradient(140deg, #2a0a18 0%, #4d1230 44%, #6b2130 78%, #2a0a18 100%);
    --accent: #fb7185;
    --accent-2: #fb923c;
    --accent-3: #fcd34d;
    --glass-surface: rgba(255, 255, 255, .09);
    --glass-surface-2: rgba(255, 255, 255, .16);
    --glass-surface-3: rgba(255, 255, 255, .23);
    --glass-stroke: rgba(255, 255, 255, .19);
    --glass-stroke-2: rgba(255, 255, 255, .42);
    --glass-text: #fff1f2;
    --glass-text-muted: rgba(255, 219, 224, .70);
    --glass-input-bg: rgba(255, 255, 255, .08);
    --glass-focus: rgba(251, 113, 133, .30);
    --glass-btn-text: #3b0716;
    --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .28);
}

html[data-glass="sunset"][data-theme="light"] {
    --g-bg: linear-gradient(140deg, #fff1f1 0%, #ffe2e5 46%, #ffeada 100%);
    --accent: #e11d48;
    --accent-2: #ea580c;
    --accent-3: #d97706;
    --glass-surface: rgba(255, 255, 255, .60);
    --glass-surface-2: rgba(255, 255, 255, .76);
    --glass-surface-3: rgba(255, 255, 255, .88);
    --glass-stroke: rgba(255, 255, 255, .88);
    --glass-stroke-2: rgba(225, 29, 72, .30);
    --glass-shadow: 0 10px 34px rgba(136, 19, 55, .14), 0 2px 8px rgba(136, 19, 55, .07);
    --glass-shadow-lg: 0 20px 54px rgba(136, 19, 55, .20);
    --glass-text: #43081c;
    --glass-text-muted: rgba(67, 8, 28, .62);
    --glass-input-bg: rgba(255, 255, 255, .80);
    --glass-focus: rgba(225, 29, 72, .20);
    --glass-btn-text: #ffffff;
    --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .96);
}

/* ============================================================
   主题 7 · 暗夜 obsidian （暗）
   ============================================================ */
html[data-glass="obsidian"][data-theme="dark"] {
    --g-bg: linear-gradient(140deg, #08080a 0%, #121218 44%, #1b1b22 78%, #08080a 100%);
    --accent: #cbd5e1;
    --accent-2: #94a3b8;
    --accent-3: #64748b;
    --glass-surface: rgba(255, 255, 255, .065);
    --glass-surface-2: rgba(255, 255, 255, .12);
    --glass-surface-3: rgba(255, 255, 255, .18);
    --glass-stroke: rgba(255, 255, 255, .15);
    --glass-stroke-2: rgba(255, 255, 255, .34);
    --glass-text: #f1f5f9;
    --glass-text-muted: rgba(203, 213, 225, .62);
    --glass-input-bg: rgba(255, 255, 255, .055);
    --glass-focus: rgba(203, 213, 225, .24);
    --glass-btn-text: #0b0b0e;
    --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .22);
}

html[data-glass="obsidian"][data-theme="light"] {
    --g-bg: linear-gradient(140deg, #f8fafc 0%, #eef2f7 46%, #f4f6fa 100%);
    --accent: #334155;
    --accent-2: #475569;
    --accent-3: #64748b;
    --glass-surface: rgba(255, 255, 255, .62);
    --glass-surface-2: rgba(255, 255, 255, .78);
    --glass-surface-3: rgba(255, 255, 255, .90);
    --glass-stroke: rgba(255, 255, 255, .90);
    --glass-stroke-2: rgba(51, 65, 85, .28);
    --glass-shadow: 0 10px 34px rgba(15, 23, 42, .13), 0 2px 8px rgba(15, 23, 42, .07);
    --glass-shadow-lg: 0 20px 54px rgba(15, 23, 42, .19);
    --glass-text: #0f172a;
    --glass-text-muted: rgba(15, 23, 42, .60);
    --glass-input-bg: rgba(255, 255, 255, .82);
    --glass-focus: rgba(51, 65, 85, .18);
    --glass-btn-text: #ffffff;
    --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .96);
}

/* ============================================================
   主题 8 · 樱花 sakura （亮）
   ============================================================ */
html[data-glass="sakura"][data-theme="dark"] {
    --g-bg: linear-gradient(140deg, #26091a 0%, #451230 44%, #5c1a3d 78%, #26091a 100%);
    --accent: #f9a8d4;
    --accent-2: #fda4af;
    --accent-3: #c4b5fd;
    --glass-surface: rgba(255, 255, 255, .09);
    --glass-surface-2: rgba(255, 255, 255, .16);
    --glass-surface-3: rgba(255, 255, 255, .23);
    --glass-stroke: rgba(255, 255, 255, .19);
    --glass-stroke-2: rgba(255, 255, 255, .42);
    --glass-text: #fff1f7;
    --glass-text-muted: rgba(255, 219, 236, .70);
    --glass-input-bg: rgba(255, 255, 255, .08);
    --glass-focus: rgba(249, 168, 212, .30);
    --glass-btn-text: #3d0a24;
    --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .28);
}

html[data-glass="sakura"][data-theme="light"] {
    --g-bg: linear-gradient(140deg, #fff5f9 0%, #ffe4ef 46%, #fdeef6 100%);
    --accent: #db2777;
    --accent-2: #e11d48;
    --accent-3: #7c3aed;
    --glass-surface: rgba(255, 255, 255, .60);
    --glass-surface-2: rgba(255, 255, 255, .76);
    --glass-surface-3: rgba(255, 255, 255, .88);
    --glass-stroke: rgba(255, 255, 255, .88);
    --glass-stroke-2: rgba(219, 39, 119, .30);
    --glass-shadow: 0 10px 34px rgba(131, 24, 67, .14), 0 2px 8px rgba(131, 24, 67, .07);
    --glass-shadow-lg: 0 20px 54px rgba(131, 24, 67, .20);
    --glass-text: #400b25;
    --glass-text-muted: rgba(64, 11, 37, .62);
    --glass-input-bg: rgba(255, 255, 255, .80);
    --glass-focus: rgba(219, 39, 119, .20);
    --glass-btn-text: #ffffff;
    --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .96);
}

/* 浏览器不支持 backdrop-filter 时降级为不透明背景 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html[data-glass] .header,
    html[data-glass] .card-form,
    html[data-glass] .result-card,
    html[data-glass] .card,
    html[data-glass] .modal-content {
        background: color-mix(in srgb, var(--g-bg) 78%, var(--glass-surface)) !important;
    }
}

/* 移动端降 blur 提升性能 */
@media (max-width: 768px) {
    :root { --glass-blur: 18px; }
    .glass-bg .orb { filter: blur(64px); }
}