/**
 * ============================================================
 *  赛博API中转站 · 全站背景（三个页面共用一份）
 * ============================================================
 *  三个页面（index.php / jiaocheng.php / moxing.php）在 </head> 前各引一行：
 *      <link rel="stylesheet" href="assets/background.css">
 *
 *  ── 设计思路 ──
 *    机甲图整页居中铺满，上面叠一层薄遮罩，内容用「半透明玻璃面板」承托：
 *    · 面板透明度调得比较通透，加上较强的背景模糊（backdrop-filter），
 *      所以背景图的色彩和机甲轮廓能透出来，但细节被糊掉、不会和文字打架
 *    · 遮罩负责把画面整体压到合适的对比度，深浅主题各一层
 *    层次（从下到上）：
 *      背景图 html::after  →  遮罩 body::after  →  品牌光斑 body::before
 *      →  星尘 .stardust   →  内容 .wrap
 *
 *  ── 常用调整 ──
 *    · 想让图更清楚：把 --bg-veil 的 alpha 调小、--glass-bg 调更透明
 *    · 想让字更清楚：把 --bg-veil 的 alpha 调大、--glass-bg 调更不透明
 *    · 取景位置：--bg-position（center center 居中）
 *    · 换图：把新图放 assets/ 覆盖 bg.jpg；柔化版 bg-soft.jpg 可用
 *      _preview/prepare-bg.py 重新生成
 *
 *  ── 怎么关掉背景图、恢复原来的纯渐变 ──
 *    把三个页面里上面那行 <link> 删掉即可。
 * ============================================================
 */

:root {
    /* 背景图与取景 */
    --bg-image: url('bg.jpg');
    --bg-position: center center;
    --bg-brightness: 1.02;
    --bg-saturate: 1.04;

    /* 浅色主题的遮罩：一层白纱把画面提亮。
       因为文字用了最黑，这里可以留薄一点，让机甲图更清楚 */
    --bg-veil: rgba(240, 244, 255, .34);

    /* 文字拉满对比：正文纯黑，次要文字也用深色，压在半透明玻璃上一样清楚 */
    --text: #000000;
    --text-dim: #333c4e;

    /* 玻璃面板：统一走这一套参数，通透但托得住文字 */
    --glass-bg: rgba(255, 255, 255, .46);
    --glass-bg-hover: rgba(255, 255, 255, .64);
    --glass-border: rgba(255, 255, 255, .72);
    --glass-blur: blur(30px) saturate(160%);
    --glass-shadow: 0 12px 34px -16px rgba(40, 60, 120, .38);

    /* 面板里的小格子（输入框、地址行）也跟着玻璃化 */
    --field-bg: rgba(255, 255, 255, .5);
    --field-border: rgba(255, 255, 255, .76);
    --code-bg: rgba(255, 255, 255, .5);
    --row-border: rgba(60, 80, 130, .22);
    --row-hover: rgba(91, 108, 245, .1);

    /* 品牌色光斑浓度 */
    --bg-blob-opacity: .36;
}

html[data-theme="dark"] {
    /* 深色主题：图偏亮，必须压得狠一点 + 面板做厚，
       否则半透明面板会被背景"透"成浅灰，浅色字压上去看不清 */
    --bg-veil: rgba(5, 8, 20, .56);
    --bg-brightness: .62;

    /* 深色下用最白，同样是为了拉满对比 */
    --text: #ffffff;
    --text-dim: #c6cfe4;

    --glass-bg: rgba(10, 14, 30, .6);
    --glass-bg-hover: rgba(17, 23, 44, .74);
    --glass-border: rgba(255, 255, 255, .16);
    --glass-shadow: 0 14px 40px -16px rgba(0, 0, 0, .8);

    --field-bg: rgba(255, 255, 255, .1);
    --field-border: rgba(255, 255, 255, .18);
    --code-bg: rgba(255, 255, 255, .09);
    --row-border: rgba(255, 255, 255, .16);
    --row-hover: rgba(139, 155, 255, .12);

    --bg-blob-opacity: .55;
}

/* ---------- 1) 背景图：整页固定、居中、铺满 ---------- */
html::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
    background: var(--bg-image) var(--bg-position) / cover no-repeat;
    filter: brightness(var(--bg-brightness)) saturate(var(--bg-saturate));
}

/* ---------- 2) 遮罩：把画面压到合适的对比度 ---------- */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background: var(--bg-veil);
}

/* 品牌色光斑调淡（本文件在页面样式之后加载，所以能覆盖页面的 body::before） */
body::before {
    opacity: var(--bg-blob-opacity);
}

/* ============================================================
 *  统一玻璃模式：把还没做玻璃的地方补齐，让整站观感一致
 * ============================================================ */

/* 面板里的小格子（API 地址行、表单输入框）也走玻璃质感 */
.api-item,
.field select,
.field input {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* 模型广场的分组标题原本只有一条下划线，直接压在机甲图上不好读，
   这里给它也垫一块玻璃 */
.grp-head {
    padding: 16px 20px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
}

/* 少量直接压在图上的零散小字（条目计数、图注），加一层柔光保证读得出 */
.count-line,
.chart-cap {
    text-shadow: 0 1px 10px rgba(255, 255, 255, .95), 0 1px 3px rgba(255, 255, 255, .9);
}
html[data-theme="dark"] .count-line,
html[data-theme="dark"] .chart-cap {
    text-shadow: 0 1px 10px rgba(2, 5, 16, .85), 0 1px 3px rgba(2, 5, 16, .9);
}

/* 页头文字直接压在背景图上，加一层柔和描边光晕保证可读性。
   注意：不要给 .brand / .title 加 —— 它们是 background-clip:text 的渐变字，
   text-shadow 会盖在字面上把标题糊成一片白（踩过这个坑）。 */
.tagline,
p.subtitle,
.clock {
    text-shadow: 0 1px 18px rgba(255, 255, 255, .95), 0 1px 5px rgba(255, 255, 255, .95);
}
html[data-theme="dark"] .tagline,
html[data-theme="dark"] p.subtitle,
html[data-theme="dark"] .clock {
    text-shadow: 0 1px 18px rgba(2, 5, 16, .8), 0 1px 5px rgba(2, 5, 16, .9);
}

/* 浅色主题下品牌标题压在花哨的背景上，给它也来一点柔光底衬，
   保证深紫渐变字在任何一块背景上都能读出来 */
.brand,
h1.title {
    filter: drop-shadow(0 2px 10px rgba(255, 255, 255, .9));
}
html[data-theme="dark"] .brand,
html[data-theme="dark"] h1.title {
    filter: drop-shadow(0 2px 12px rgba(2, 5, 16, .8));
}