/* ============================================================
   Xenon Status — Liquid Glass 主题
   设计参考：Apple WWDC25 Liquid Glass（高光 / 阴影 / 透光三层 + 折射）
   ============================================================ */

:root {
    /* 文字 */
    --text:      #f4f7fc;
    --text-dim:  rgba(232, 238, 250, 0.62);
    --text-mute: rgba(232, 238, 250, 0.40);

    /* 状态色（高饱和，便于在玻璃上发光） */
    --up:      #34d399;
    --down:    #fb5e6d;
    --unknown: #fbbf24;
    --accent:  #5b9dff;

    /* 进度等级 */
    --good: #34d399;
    --warn: #fbbf24;
    --crit: #fb5e6d;

    /* 玻璃材质（--glass-alpha / --glass-blur 可由后台设置覆盖） */
    --glass-alpha:     0.07;
    --glass-bg:        rgba(255, 255, 255, var(--glass-alpha));
    --glass-bg-strong: rgba(255, 255, 255, calc(var(--glass-alpha) + 0.05));
    --glass-stroke:    rgba(255, 255, 255, 0.18);
    --glass-blur:      18px;
    /* 外阴影(悬浮) + 内顶高光 + 内底微光 = 玻璃斜面 */
    --glass-shadow:
        0 10px 34px rgba(3, 7, 18, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 -12px 24px rgba(255, 255, 255, 0.05);

    --radius:  22px;
    --radius-sm: 14px;
}

* { box-sizing: border-box; }
/* 始终保留滚动条宽度：切换页面时视口宽度恒定，避免固定背景(cover)缩放/位移 */
html { overflow-y: scroll; }
@supports (scrollbar-gutter: stable) {
    html { overflow-y: auto; scrollbar-gutter: stable; }
}
html, body { margin: 0; padding: 0; }

body {
    min-height: 100vh;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
                 "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    background: #05070f;
    position: relative;
    overflow-x: hidden;
}

/* ---- 背景：深空 + 流动极光光斑 ---- */
body::before {
    content: "";
    position: fixed;
    inset: -20%;
    z-index: -2;
    background:
        radial-gradient(38% 42% at 18% 22%, rgba(91, 157, 255, 0.55), transparent 60%),
        radial-gradient(34% 40% at 82% 18%, rgba(180, 110, 255, 0.50), transparent 62%),
        radial-gradient(42% 46% at 76% 82%, rgba(52, 211, 153, 0.40), transparent 60%),
        radial-gradient(40% 44% at 22% 80%, rgba(255, 110, 160, 0.40), transparent 62%),
        radial-gradient(50% 60% at 50% 50%, rgba(40, 70, 160, 0.28), transparent 70%);
    filter: blur(34px) saturate(140%);
    animation: aurora 26s ease-in-out infinite alternate;
}
/* 细微噪点/暗角，增强真实感与可读性 */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(120% 120% at 50% 0%, transparent 55%, rgba(3, 6, 15, 0.55) 100%);
}
@keyframes aurora {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1.05) rotate(0deg); }
    50%  { transform: translate3d(3%, 2%, 0) scale(1.12) rotate(4deg); }
    100% { transform: translate3d(-2%, 3%, 0) scale(1.06) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}

/* ---- 背景变体：星空 ---- */
body.bg-stars { background: #04060d; }
body.bg-stars::before {
    inset: 0;
    filter: none;
    animation: stars-drift 120s linear infinite;
    background:
        radial-gradient(40% 50% at 50% 0%, rgba(60, 90, 180, 0.22), transparent 70%),
        radial-gradient(1.4px 1.4px at 20% 30%,  rgba(255,255,255,0.9),  transparent 100%),
        radial-gradient(1.4px 1.4px at 70% 65%,  rgba(255,255,255,0.85), transparent 100%),
        radial-gradient(1.6px 1.6px at 40% 80%,  rgba(255,255,255,0.95), transparent 100%),
        radial-gradient(1.2px 1.2px at 85% 20%,  rgba(200,220,255,0.85), transparent 100%),
        radial-gradient(1.2px 1.2px at 15% 70%,  rgba(255,255,255,0.8),  transparent 100%),
        radial-gradient(1px 1px   at 55% 40%,    rgba(255,255,255,0.7),  transparent 100%),
        radial-gradient(1.6px 1.6px at 90% 90%,  rgba(255,255,255,0.9),  transparent 100%),
        radial-gradient(1px 1px   at 30% 50%,    rgba(255,255,255,0.6),  transparent 100%),
        #04060d;
    background-repeat: repeat;
    background-size:
        100% 100%,
        260px 260px, 320px 320px, 300px 300px, 280px 280px,
        340px 340px, 240px 240px, 300px 300px, 360px 360px;
}
body.bg-stars::after {
    background:
        radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.8), transparent 100%),
        radial-gradient(1px 1px at 80% 50%, rgba(255,255,255,0.7), transparent 100%),
        radial-gradient(1.2px 1.2px at 45% 25%, rgba(255,255,255,0.9), transparent 100%),
        radial-gradient(120% 120% at 50% 0%, transparent 55%, rgba(2, 4, 10, 0.6) 100%);
    background-size: 200px 200px, 220px 220px, 180px 180px, 100% 100%;
    animation: twinkle 4.5s ease-in-out infinite alternate;
}
@keyframes stars-drift { from { background-position: 0 0; } to { background-position: 0 1000px, 0 600px, 0 700px, 0 800px, 0 500px, 0 900px, 0 650px, 0 750px, 0 550px; } }
@keyframes twinkle { from { opacity: .5; } to { opacity: 1; } }

/* ---- 背景变体：自定义图片（JS 预加载淡入，非阻塞）---- */
body.bg-image::before {
    inset: 0;
    background: var(--bg-img, #05070f) center center / cover no-repeat fixed;
    filter: none;
    animation: none;
}
/* 有 JS 时：图片层先隐藏，加载完成淡入；底色/遮罩立即可见，不阻塞渲染 */
html.js body.bg-image::before { opacity: 0; transition: opacity .7s ease; }
html.js body.bg-image.bg-loaded::before { opacity: 1; }
/* 图片背景上加暗化遮罩，保证玻璃与文字可读 */
body.bg-image::after {
    background:
        linear-gradient(rgba(5, 7, 15, 0.42), rgba(5, 7, 15, 0.52)),
        radial-gradient(120% 120% at 50% 0%, transparent 50%, rgba(3, 6, 15, 0.6) 100%);
}
@media (prefers-reduced-motion: reduce) {
    body.bg-stars::before, body.bg-stars::after { animation: none; }
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: #8fbcff; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 30px 20px 70px; }

/* ============ 玻璃工具类（混入） ============ */
.glass,
.banner, .card, .panel, .auth-box .panel {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%);
    backdrop-filter: blur(var(--glass-blur)) saturate(165%);
    border: 1px solid var(--glass-stroke);
    box-shadow: var(--glass-shadow);
    border-radius: var(--radius);
}
/* 不支持 backdrop-filter 时的降级：加深底色保证可读 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .banner, .card, .panel, .auth-box .panel { background: rgba(20, 26, 40, 0.92); }
}

/* ---- 头部 ---- */
.site-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 26px;
}
.brand { display: flex; align-items: center; gap: 15px; }
.brand .logo {
    font-size: 30px; line-height: 1; width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--glass-stroke);
    border-radius: 18px;
    box-shadow: var(--glass-shadow);
}
.brand h1 { font-size: 23px; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
.brand .sub { margin: 3px 0 0; color: var(--text-dim); font-size: 13px; }
.admin-link {
    color: var(--text); font-size: 13px; padding: 9px 18px; border-radius: 999px;
    background: var(--glass-bg); border: 1px solid var(--glass-stroke);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
    transition: transform .2s, background .2s;
}
.admin-link:hover { background: var(--glass-bg-strong); transform: translateY(-1px); }

/* ---- 总体横幅 ---- */
.banner {
    padding: 24px 26px; margin-bottom: 28px;
    position: relative; overflow: hidden;
}
/* 镜面流光 */
.banner::after {
    content: ""; position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.10), transparent);
    transform: skewX(-18deg);
    animation: sheen 7s ease-in-out infinite;
}
@keyframes sheen { 0%,60% { left: -60%; } 100% { left: 160%; } }
.banner-main { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; position: relative; }
.banner-sub  { color: var(--text-dim); font-size: 13.5px; margin-top: 5px; position: relative; }

/* 横幅左侧状态光带 */
.banner::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--text-mute); box-shadow: 0 0 22px var(--text-mute);
}
.banner-ok::before      { background: var(--up);      box-shadow: 0 0 24px var(--up); }
.banner-ok .banner-main { color: #7ff0c4; text-shadow: 0 0 24px rgba(52,211,153,.5); }
.banner-partial::before, .banner-unknown::before { background: var(--unknown); box-shadow: 0 0 24px var(--unknown); }
.banner-partial .banner-main, .banner-unknown .banner-main { color: #ffd970; }
.banner-major::before      { background: var(--down); box-shadow: 0 0 24px var(--down); }
.banner-major .banner-main { color: #ff9aa4; text-shadow: 0 0 24px rgba(251,94,109,.5); }
.banner-loading::before    { background: var(--text-mute); }

/* ---- 分组 ---- */
.group { margin-bottom: 30px; }
.group-title {
    font-size: 12.5px; color: var(--text-dim); font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    margin: 0 0 14px; padding-left: 4px;
}
.grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}

/* ---- 卡片 ---- */
.card {
    padding: 18px; position: relative; overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.30);
    box-shadow:
        0 18px 44px rgba(3, 7, 18, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -12px 24px rgba(255, 255, 255, 0.06);
}
/* 静态镜面高光 */
.card::before, .panel::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(130deg, rgba(255, 255, 255, 0.16), transparent 42%);
    opacity: .6;
    transition: opacity .3s ease;
}
.card:hover::before, .panel:hover::before { opacity: .9; }

.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; position: relative; }
.status-dot {
    width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto;
    background: var(--unknown); box-shadow: 0 0 12px var(--unknown);
}
.status-up .status-dot   { background: var(--up);   box-shadow: 0 0 14px var(--up); }
.status-down .status-dot { background: var(--down); box-shadow: 0 0 16px var(--down); animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.85); } }
.card-name { font-weight: 600; font-size: 15.5px; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-type {
    font-size: 11px; color: var(--text-dim);
    border: 1px solid var(--glass-stroke); padding: 2px 9px; border-radius: 999px;
    background: rgba(255,255,255,0.05);
}
.card-body { min-height: 20px; position: relative; }

/* 指标条 */
.metric { margin-bottom: 12px; }
.metric-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; }
.metric-val { color: var(--text); font-variant-numeric: tabular-nums; }
.track {
    height: 8px; border-radius: 99px; overflow: hidden;
    background: rgba(255,255,255,0.10);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.fill { height: 100%; border-radius: 99px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.fill.good { background: linear-gradient(90deg, #2bb98a, var(--good)); box-shadow: 0 0 12px rgba(52,211,153,.55); }
.fill.warn { background: linear-gradient(90deg, #e0a418, var(--warn)); box-shadow: 0 0 12px rgba(251,191,36,.55); }
.fill.crit { background: linear-gradient(90deg, #e0485a, var(--crit)); box-shadow: 0 0 12px rgba(251,94,109,.6); }

/* 键值 */
.kvs { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.kv { display: flex; justify-content: space-between; font-size: 12.5px; }
.kv .k { color: var(--text-dim); }
.kv .v { color: var(--text); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-dim); font-size: 13px; padding: 8px 0; }
.err { color: #ff9aa4; font-size: 12.5px; margin-top: 9px; }

/* 历史状态条 */
.histbar { display: flex; gap: 3px; margin-top: 14px; height: 24px; align-items: flex-end; }
.histbar i {
    flex: 1 1 auto; height: 100%; border-radius: 3px;
    background: linear-gradient(180deg, var(--up), #2bb98a);
    box-shadow: 0 0 6px rgba(52,211,153,.4);
}
.histbar i.down { background: linear-gradient(180deg, var(--down), #e0485a); box-shadow: 0 0 6px rgba(251,94,109,.5); }

/* 卡片底部 */
.card-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 16px; padding-top: 13px;
    border-top: 1px solid rgba(255,255,255,0.10);
    font-size: 12px; position: relative;
}
.state-text { font-weight: 600; }
.status-up .state-text { color: #7ff0c4; }
.status-down .state-text { color: #ff9aa4; }
.status-unknown .state-text { color: #ffd970; }
.seen { color: var(--text-dim); }

/* 页脚 / 骨架 */
.site-foot { text-align: center; color: var(--text-dim); font-size: 12.5px; margin-top: 44px; }
.dot-sep { margin: 0 8px; }
.loading-skeleton { color: var(--text-dim); text-align: center; padding: 48px 0; }

/* ============ 管理后台 ============ */
.adm-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 26px; padding: 10px 12px; gap: 12px; flex-wrap: wrap;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    border: 1px solid var(--glass-stroke);
    border-radius: 999px;
    box-shadow: var(--glass-shadow);
}
.adm-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.adm-nav a { color: var(--text-dim); font-size: 13.5px; padding: 8px 16px; border-radius: 999px; transition: .2s; }
.adm-nav a:hover { color: var(--text); background: rgba(255,255,255,0.07); }
.adm-nav a.active { color: var(--text); background: rgba(255,255,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }

/* 按钮（玻璃药丸） */
.btn {
    display: inline-block; border: none; cursor: pointer; font-family: inherit;
    padding: 10px 20px; border-radius: 999px; font-size: 14px; font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, #6ba6ff, #3f7ef0);
    box-shadow: 0 6px 18px rgba(63,126,240,.45), inset 0 1px 0 rgba(255,255,255,0.5);
    transition: transform .2s, box-shadow .2s, filter .2s;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); color: #fff; box-shadow: 0 10px 24px rgba(63,126,240,.55), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 6px 14px; font-size: 12.5px; }
.btn-ghost {
    background: var(--glass-bg); color: var(--text);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid var(--glass-stroke);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-ghost:hover { background: var(--glass-bg-strong); filter: none; color: var(--text); }
.btn-danger { background: linear-gradient(180deg, #ff7b88, #ef4a5b); box-shadow: 0 6px 18px rgba(239,74,91,.45), inset 0 1px 0 rgba(255,255,255,0.4); }
.btn-danger:hover { box-shadow: 0 10px 24px rgba(239,74,91,.55), inset 0 1px 0 rgba(255,255,255,0.4); }

.panel { padding: 24px; margin-bottom: 22px; position: relative; }
.panel h2 { margin: 0 0 18px; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
.panel h3 { font-weight: 600; }

/* 表格 */
table.list { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.list th, table.list td { text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
table.list th { color: var(--text-dim); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
table.list tbody tr { transition: background .2s; }
table.list tbody tr:hover td { background: rgba(255,255,255,0.05); }
table.list tr:last-child td { border-bottom: none; }
.pill { font-size: 11px; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--glass-stroke); background: rgba(255,255,255,0.05); }
.pill.up { color: #7ff0c4; border-color: rgba(52,211,153,.45); box-shadow: 0 0 12px rgba(52,211,153,.25); }
.pill.down { color: #ff9aa4; border-color: rgba(251,94,109,.45); box-shadow: 0 0 12px rgba(251,94,109,.25); }
.pill.unknown { color: #ffd970; border-color: rgba(251,191,36,.45); }

/* 表单 */
.form-row { margin-bottom: 17px; }
.form-row label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 7px; }
.form-row input[type=text], .form-row input[type=password], .form-row input[type=email],
.form-row input[type=number], .form-row input[type=url], .form-row select, .form-row textarea {
    width: 100%; color: var(--text);
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--glass-stroke); border-radius: var(--radius-sm);
    padding: 11px 14px; font-size: 14px; font-family: inherit;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--text-mute); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
    outline: none; border-color: rgba(91,157,255,.7);
    background: rgba(255,255,255,0.09);
    box-shadow: 0 0 0 3px rgba(91,157,255,.20);
}
.form-row select option { background: #141a28; color: var(--text); }
.form-row .hint { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.actions { display: flex; gap: 12px; align-items: center; margin-top: 10px; flex-wrap: wrap; }

.code {
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--glass-stroke); border-radius: var(--radius-sm);
    padding: 13px 15px; font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
    font-size: 12.5px; color: #a9d3ff; white-space: pre-wrap; word-break: break-all;
}
.alert-msg { padding: 13px 17px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 14px;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--glass-stroke); }
.alert-ok  { background: rgba(52,211,153,.14); border-color: rgba(52,211,153,.4); color: #7ff0c4; }
.alert-err { background: rgba(251,94,109,.14); border-color: rgba(251,94,109,.4); color: #ff9aa4; }

/* 登录 / 安装 */
.auth-box { max-width: 400px; margin: 9vh auto 0; }
.auth-box .panel { padding: 32px; }
.auth-box h1 { font-size: 22px; margin: 0 0 4px; text-align: center; letter-spacing: -0.01em; }
.auth-box .sub { text-align: center; color: var(--text-dim); font-size: 13px; margin: 0 0 24px; }

@media (max-width: 580px) {
    .form-grid, .cols-3 { grid-template-columns: 1fr; }
    .brand h1 { font-size: 19px; }
    .wrap { padding: 22px 14px 60px; }
    .adm-head { border-radius: var(--radius); }
}

/* ============ 后台标签内容切换动画 ============ */
.adm-content { animation: adm-in .4s cubic-bezier(.2,.8,.2,1); transition: opacity .2s ease, transform .2s ease; }
.adm-content.fade-out { opacity: 0; transform: translateY(12px); }
@keyframes adm-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* 表单整页跳转时的跨文档淡入淡出（支持的浏览器） */
@view-transition { navigation: auto; }

/* ============ 自定义玻璃下拉框 ============ */
.xselect { position: relative; }
.xselect-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    text-align: left; cursor: pointer; font-family: inherit; font-size: 14px; color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-stroke); border-radius: var(--radius-sm);
    padding: 11px 14px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.xselect-trigger:hover { background: rgba(255, 255, 255, 0.10); }
.xselect.open .xselect-trigger { border-color: rgba(91,157,255,.7); box-shadow: 0 0 0 3px rgba(91,157,255,.20); }
.xselect-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xselect-caret { color: var(--text-dim); font-size: 11px; transition: transform .25s ease; }
.xselect.open .xselect-caret { transform: rotate(180deg); }
.xselect-menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 45;
    padding: 6px;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid var(--glass-stroke); border-radius: var(--radius-sm);
    box-shadow: var(--glass-shadow);
    max-height: 0; overflow: hidden; opacity: 0;
    transform: translateY(-8px) scale(.98); transform-origin: top center;
    pointer-events: none;
    transition: opacity .2s ease, transform .22s cubic-bezier(.2,.8,.2,1), max-height .22s ease;
}
.xselect.open .xselect-menu { max-height: 320px; overflow: auto; opacity: 1; transform: none; pointer-events: auto; }
.xselect-opt {
    padding: 9px 12px; border-radius: 9px; font-size: 13.5px; cursor: pointer; color: var(--text);
    transition: background .15s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xselect-opt:hover { background: rgba(255, 255, 255, 0.10); }
.xselect-opt.sel { background: rgba(91, 157, 255, 0.20); }
html[data-theme="light"] .xselect-trigger { background: rgba(255,255,255,0.7); border-color: rgba(20,30,60,0.16); }
html[data-theme="light"] .xselect-trigger:hover { background: rgba(255,255,255,0.9); }
html[data-theme="light"] .xselect-opt:hover { background: rgba(20,30,60,0.06); }
html[data-theme="light"] .xselect-opt.sel { background: rgba(47,111,237,0.14); }

/* ============ 自定义文件选择 ============ */
.xfile { display: flex; align-items: center; gap: 12px; }
.xfile .btn { flex: 0 0 auto; }
.xfile-name { color: var(--text-dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 无 JS 回退：直接美化原生文件按钮 */
.form-row input[type="file"] {
    width: 100%; color: var(--text-dim); font-size: 13px; cursor: pointer;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-stroke); border-radius: var(--radius-sm);
    padding: 8px 10px; font-family: inherit;
}
.form-row input[type="file"]::file-selector-button {
    margin-right: 12px; padding: 8px 16px; border: none; border-radius: 999px;
    font-family: inherit; font-size: 13px; font-weight: 600; color: #fff; cursor: pointer;
    background: linear-gradient(180deg, #6ba6ff, #3f7ef0);
    box-shadow: 0 4px 12px rgba(63,126,240,.4), inset 0 1px 0 rgba(255,255,255,.5);
    transition: filter .2s ease;
}
.form-row input[type="file"]::file-selector-button:hover { filter: brightness(1.08); }

/* ============ 主题切换浮动按钮 ============ */
.theme-toggle {
    position: fixed; right: 20px; bottom: 20px; z-index: 60;
    width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 21px; line-height: 1; padding: 0;
    color: var(--text);
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-stroke);
    -webkit-backdrop-filter: blur(16px) saturate(165%);
    backdrop-filter: blur(16px) saturate(165%);
    box-shadow: var(--glass-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}
.theme-toggle:hover { transform: translateY(-2px) scale(1.06); }
.theme-toggle:active { transform: scale(.96); }

/* ============================================================
   白天（浅色）主题
   ============================================================ */
html[data-theme="light"] {
    --text:      #16203a;
    --text-dim:  rgba(22, 32, 58, 0.66);
    --text-mute: rgba(22, 32, 58, 0.45);

    --up:      #0e9d68;
    --down:    #e23b4e;
    --unknown: #b97e08;
    --accent:  #2f6fed;
    --good: #0e9d68; --warn: #b97e08; --crit: #e23b4e;

    /* 玻璃略减白、靠阴影+边框定义，避免泛白 */
    --glass-bg:        rgba(255, 255, 255, calc(var(--glass-alpha) + 0.40));
    --glass-bg-strong: rgba(255, 255, 255, calc(var(--glass-alpha) + 0.56));
    --glass-stroke:    rgba(255, 255, 255, 0.7);
    --glass-shadow:
        0 14px 36px rgba(34, 54, 108, 0.22),
        0 2px 8px rgba(34, 54, 108, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* 浅色基底：更有色彩、略深的冷色，让玻璃面板浮出，避免全屏泛白 */
html[data-theme="light"] body { background: #c5d0e8; }

/* 浅色：极光（柔和粉彩光斑，仅限极光背景，避免覆盖图片/星空） */
html[data-theme="light"] body.bg-aurora::before {
    background:
        radial-gradient(40% 46% at 14% 18%, rgba(74, 120, 246, 0.62), transparent 60%),
        radial-gradient(38% 44% at 86% 14%, rgba(158, 104, 246, 0.55), transparent 62%),
        radial-gradient(46% 50% at 82% 86%, rgba(26, 196, 162, 0.52), transparent 60%),
        radial-gradient(44% 48% at 14% 84%, rgba(246, 110, 168, 0.52), transparent 62%);
    filter: blur(48px) saturate(150%);
}
html[data-theme="light"] body::after {
    background: radial-gradient(125% 125% at 50% 0%, transparent 50%, rgba(110, 132, 180, 0.5) 100%);
}
/* 浅色：星空 -> 改为明亮柔光（深空在浅色下不协调） */
html[data-theme="light"] body.bg-stars { background: #e9edf6; }
html[data-theme="light"] body.bg-stars::before {
    background:
        radial-gradient(45% 55% at 50% 0%, rgba(150, 180, 255, 0.45), transparent 70%),
        radial-gradient(40% 45% at 85% 80%, rgba(150, 230, 200, 0.4), transparent 66%),
        radial-gradient(40% 45% at 15% 85%, rgba(255, 170, 210, 0.4), transparent 66%),
        #e9edf6;
    background-size: auto;
    filter: blur(40px) saturate(130%);
    animation: none;
}
html[data-theme="light"] body.bg-stars::after { background: none; animation: none; }
/* 浅色：图片背景 -> 较亮遮罩，保证深色文字可读 */
/* 图片背景（浅色）：上下边缘稍亮（页眉/页脚文字可读），中部通透（图片鲜明） */
html[data-theme="light"] body.bg-image::after {
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.05) 18%,
        rgba(255, 255, 255, 0.05) 82%, rgba(255, 255, 255, 0.32));
}
/* 浅色 + 图片时，玻璃外的零散文字加轻微亮描边，避免压在亮图上看不清 */
html[data-theme="light"] body.bg-image .site-foot { text-shadow: 0 1px 4px rgba(255, 255, 255, 0.6); }

/* 浅色：细节对比度修正 */
html[data-theme="light"] a:hover { color: #1d4fd0; }
html[data-theme="light"] .track { background: rgba(20, 30, 60, 0.10); box-shadow: inset 0 1px 2px rgba(0,0,0,0.12); }
html[data-theme="light"] .card-foot { border-top-color: rgba(20, 30, 60, 0.12); }
html[data-theme="light"] .group-title { color: var(--text-dim); }
html[data-theme="light"] table.list th,
html[data-theme="light"] table.list td { border-bottom-color: rgba(20, 30, 60, 0.10); }
html[data-theme="light"] table.list tbody tr:hover td { background: rgba(20, 30, 60, 0.04); }
html[data-theme="light"] .card-type { background: rgba(20, 30, 60, 0.05); }
html[data-theme="light"] .form-row input[type=text],
html[data-theme="light"] .form-row input[type=password],
html[data-theme="light"] .form-row input[type=email],
html[data-theme="light"] .form-row input[type=number],
html[data-theme="light"] .form-row input[type=url],
html[data-theme="light"] .form-row select,
html[data-theme="light"] .form-row textarea {
    background: rgba(255, 255, 255, 0.7); border-color: rgba(20, 30, 60, 0.16);
}
html[data-theme="light"] .form-row select option { background: #fff; color: var(--text); }
html[data-theme="light"] .code { background: rgba(20, 30, 60, 0.06); color: #15489c; border-color: rgba(20,30,60,0.12); }
html[data-theme="light"] .adm-nav a:hover { background: rgba(20, 30, 60, 0.06); }
html[data-theme="light"] .adm-nav a.active { background: rgba(20, 30, 60, 0.10); }
/* 浅色：横幅主标题用更深的状态色 */
html[data-theme="light"] .banner-ok .banner-main { color: #0c8055; text-shadow: none; }
html[data-theme="light"] .banner-partial .banner-main,
html[data-theme="light"] .banner-unknown .banner-main { color: #a8740a; }
html[data-theme="light"] .banner-major .banner-main { color: #c92a3c; text-shadow: none; }
html[data-theme="light"] .state-text,
html[data-theme="light"] .status-up .state-text { color: #0c8055; }
html[data-theme="light"] .status-down .state-text { color: #c92a3c; }
html[data-theme="light"] .status-unknown .state-text { color: #a8740a; }
html[data-theme="light"] .err { color: #c92a3c; }
html[data-theme="light"] .pill.up { color: #0c8055; }
html[data-theme="light"] .pill.down { color: #c92a3c; }
html[data-theme="light"] .pill.unknown { color: #a8740a; }
/* 浅色：静态高光稍调整 */
html[data-theme="light"] .card::before,
html[data-theme="light"] .panel::before {
    background: linear-gradient(130deg, rgba(255, 255, 255, 0.4), transparent 44%);
}