/* ============================================================
   毛玻璃皮肤（所有页面共用）
   取值**逐项对齐**「星辉阁 · 工具导航」（宿主页）：
     · glass 底：浅 rgba(255,255,255,.55) / 深 rgba(30,41,59,.55)
     · 悬浮底： .78
     · 边框：  浅 rgba(255,255,255,.65) / 深 rgba(255,255,255,.09)
     · 模糊：  blur(26px) saturate(180%)
     · 背景光斑：与宿主同一组 5 个 radial-gradient（浅 #eef2f7 / 深 #0b1220）
   内嵌到宿主里时（<html data-embed="1">）本页背景变透明，
   让宿主自己的光斑透过来被玻璃糊掉 —— 这样内嵌后和宿主是同一块玻璃质感。
   ============================================================ */

:root {
    --glass-bg:        rgba(255, 255, 255, .55);
    --glass-bg-soft:   rgba(255, 255, 255, .40);
    --glass-bg-hover:  rgba(255, 255, 255, .78);
    --glass-bg-strong: rgba(255, 255, 255, .72);
    --glass-border:    rgba(255, 255, 255, .65);
    --glass-line:      rgba(148, 163, 184, .30);
    --glass-blur:      26px;
    --glass-sat:       180%;
    --glass-shadow:    0 4px 20px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .55);
    --glass-shadow-sm: 0 3px 12px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .45);
    --glass-base:      #eef2f7;
}

html[data-theme="dark"] {
    --glass-bg:        rgba(30, 41, 59, .55);
    --glass-bg-soft:   rgba(30, 41, 59, .38);
    --glass-bg-hover:  rgba(30, 41, 59, .78);
    --glass-bg-strong: rgba(30, 41, 59, .78);
    --glass-border:    rgba(255, 255, 255, .09);
    --glass-line:      rgba(148, 163, 184, .20);
    --glass-shadow:    0 4px 20px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
    --glass-shadow-sm: 0 3px 12px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .04);
    --glass-base:      #0b1220;
}

html { background-color: var(--glass-base); }
body { background-color: transparent; }

/* 背景彩色光斑：与宿主同一组（玻璃要透出这个才像玻璃） */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 18%,  rgba(99, 102, 241, .55), transparent 42%),
        radial-gradient(circle at 92% 10%, rgba(236, 72, 153, .42), transparent 42%),
        radial-gradient(circle at 85% 88%, rgba(34, 211, 238, .45), transparent 42%),
        radial-gradient(circle at 15% 92%, rgba(251, 191, 36, .38), transparent 42%),
        radial-gradient(circle at 50% 50%, rgba(168, 85, 247, .22), transparent 55%),
        var(--glass-base);
    transition: background .4s;
}
html[data-theme="dark"] body::before {
    background:
        radial-gradient(circle at 8% 18%,  rgba(79, 70, 229, .55), transparent 42%),
        radial-gradient(circle at 92% 10%, rgba(190, 24, 93, .45), transparent 42%),
        radial-gradient(circle at 85% 88%, rgba(14, 116, 144, .5), transparent 42%),
        radial-gradient(circle at 15% 92%, rgba(180, 83, 9, .4), transparent 42%),
        radial-gradient(circle at 50% 50%, rgba(126, 34, 206, .28), transparent 55%),
        #0b1220;
}

/* 内嵌到宿主里：自己不再画背景，把宿主的背景让出来 */
html[data-embed="1"] { background-color: transparent; }
html[data-embed="1"] body::before { display: none; }

/* ---------- 卡片 / 面板 ---------- */
.card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/* ---------- 输入框 / 按钮 / 小控件 ---------- */
.input-box,
.filter-trigger,
.btn-secondary,
.mini-btn,
.fav-search .input-box {
    background: var(--glass-bg-soft);
    border-color: var(--glass-line);
    backdrop-filter: blur(14px) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(14px) saturate(var(--glass-sat));
}
.input-box:focus { background: var(--glass-bg-hover); }
.btn-primary {
    background: linear-gradient(180deg, rgba(37, 99, 235, .96), rgba(29, 78, 216, .96));
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 8px 22px rgba(37, 99, 235, .42), inset 0 1px 0 rgba(255, 255, 255, .28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ---------- 列表 / 表格 / 徽标 ---------- */
.datagrid-container,
.item-table,
.channel-table {
    background: var(--glass-bg-soft);
    border-color: var(--glass-border);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}
.item-table th,
.channel-table th {
    background: var(--glass-bg-soft);
    backdrop-filter: blur(10px) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(10px) saturate(var(--glass-sat));
}
.item-table tbody tr,
.channel-table tbody tr { border-color: var(--glass-line); }
.item-table tbody tr:hover,
.channel-table tbody tr:hover { background: var(--glass-bg-hover); }

.stats-bar,
.pagination-modern,
.batch-cell,
.batch-row,
.history-chip,
.channel-item,
.cell-kv,
.hist-items .item-chip,
.hist-items .plat-chip,
.v-badge,
.id-badge,
.cat-cell,
.env-cell,
.cmd-cell {
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
}

.stats-bar {
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-sm);
    border-radius: 12px;
    padding: 8px 12px;
}

.batch-cell,
.batch-row {
    background: var(--glass-bg-soft);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow-sm);
}

/* ---------- 弹窗 / 灯箱 ---------- */
.modal-box {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    box-shadow: 0 24px 64px rgba(15, 23, 42, .28), inset 0 1px 0 rgba(255, 255, 255, .28);
}
html[data-theme="dark"] .modal-box {
    box-shadow: 0 24px 64px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.tag-modal-box {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(30px) saturate(190%);
    -webkit-backdrop-filter: blur(30px) saturate(190%);
}

/* ---------- 不支持 backdrop-filter 的老浏览器：退回不透明 ---------- */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .card, .modal-box, .tag-modal-box, .input-box, .filter-trigger,
    .mini-btn, .btn-secondary, .stats-bar, .datagrid-container,
    .batch-cell, .batch-row, .history-chip, .channel-item {
        background: var(--card-bg);
    }
}