/* 主站背景调色板（管理员预览用）
* 由 html 上的属性驱动，属性只在管理员本地选择过之后才会出现，普通用户不受影响：
* data-site-bg 背景色：mist / cloud / sky / celadon / stone / lilac / paper
* data-site-fx 背景效果：grid / dots / checker / grain
* data-site-fx-lv 效果强度：1 / 2 / 3
* data-site-fade 顶部渐隐：on（效果只留在首屏）
* 背景画在 #panel 上（主站原本就由它铺底：浅色 #EDF0F2 / 深色 #121212），
* 效果用 background-image 叠在同一层，不新增元素、不改层级。
*/
/* ---------- 背景色：浅色 / 深色各一套，与主站卡片（浅白 / 深 #1F222A）保持对比 ---------- */
html[data-site-bg] #panel { background-color: var(--sbg); }
html[data-site-bg="mist"] { --sbg: #F5F6F8; }
html[data-site-bg="cloud"] { --sbg: #EEF0F3; }
html[data-site-bg="sky"] { --sbg: #EFF3FA; }
html[data-site-bg="celadon"] { --sbg: #EEF4F2; }
html[data-site-bg="stone"] { --sbg: #F2F1EE; }
html[data-site-bg="lilac"] { --sbg: #F2F1F8; }
html[data-site-bg="paper"] { --sbg: #FAFAFA; }
html.theme--dark[data-site-bg="mist"] { --sbg: #0F1012; }
html.theme--dark[data-site-bg="cloud"] { --sbg: #16171A; }
html.theme--dark[data-site-bg="sky"] { --sbg: #0E121A; }
html.theme--dark[data-site-bg="celadon"] { --sbg: #0F1514; }
html.theme--dark[data-site-bg="stone"] { --sbg: #151413; }
html.theme--dark[data-site-bg="lilac"] { --sbg: #121119; }
html.theme--dark[data-site-bg="paper"] { --sbg: #0A0A0A; }
/* ---------- 效果线条颜色与强度 ---------- */
html[data-site-fx] {
--sfx-ink: 20, 26, 38; /* 浅色：墨色 */
--sfx-a: .045;
}
html.theme--dark[data-site-fx] { --sfx-ink: 255, 255, 255; --sfx-a: .045; }
html[data-site-fx-lv="1"] { --sfx-a: .03; }
html[data-site-fx-lv="3"] { --sfx-a: .07; }
html.theme--dark[data-site-fx-lv="1"] { --sfx-a: .03; }
html.theme--dark[data-site-fx-lv="3"] { --sfx-a: .065; }
/* 各效果的图层（柔光单独一层，可以和任意效果叠加） */
html[data-site-fx="grid"] { --sfx-layer:
linear-gradient(to right, rgba(var(--sfx-ink), var(--sfx-a)) 1px, transparent 1px) 0 0 / 64px 64px,
linear-gradient(to bottom, rgba(var(--sfx-ink), var(--sfx-a)) 1px, transparent 1px) 0 0 / 64px 64px; }
html[data-site-fx="dots"] { --sfx-layer:
radial-gradient(circle, rgba(var(--sfx-ink), calc(var(--sfx-a) * 2.2)) 1px, transparent 1.6px) 0 0 / 22px 22px; }
/* 交替色块：两种几乎一样的底色交替铺成大方格 */
html[data-site-fx="checker"] { --sfx-layer:
conic-gradient(rgba(var(--sfx-ink), calc(var(--sfx-a) * .5)) 0 25%, transparent 0 50%, rgba(var(--sfx-ink), calc(var(--sfx-a) * .5)) 0 75%, transparent 0) 0 0 / 160px 160px; }
/* 细颗粒：极淡的噪点，增加一点纸面质感（三档强度各一张图） */
html[data-site-fx="grain"][data-site-fx-lv="1"] { --sfx-layer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px; }
html.theme--dark[data-site-fx="grain"][data-site-fx-lv="1"] { --sfx-layer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px; }
html[data-site-fx="grain"] { --sfx-layer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px; }
html.theme--dark[data-site-fx="grain"] { --sfx-layer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px; }
html[data-site-fx="grain"][data-site-fx-lv="3"] { --sfx-layer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px; }
html.theme--dark[data-site-fx="grain"][data-site-fx-lv="3"] { --sfx-layer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px; }
/* 顶部渐隐：效果只留在首屏，往下逐渐融进底色（与 intro 页 hero 网格一致） */
html[data-site-fade="on"] { --sfx-fade-layer: linear-gradient(to bottom, transparent 0, transparent 120px, var(--sbg, #EDF0F2) 720px) 0 0 / 100% 100% no-repeat; }
html.theme--dark[data-site-fade="on"] { --sfx-fade-layer: linear-gradient(to bottom, transparent 0, transparent 120px, var(--sbg, #121212) 720px) 0 0 / 100% 100% no-repeat; }
html[data-site-fx] #panel {
background: var(--sfx-fade-layer, linear-gradient(transparent, transparent)), var(--sfx-layer, linear-gradient(transparent, transparent)), var(--sbg, #EDF0F2);
}
html.theme--dark[data-site-fx] #panel {
background: var(--sfx-fade-layer, linear-gradient(transparent, transparent)), var(--sfx-layer, linear-gradient(transparent, transparent)), var(--sbg, #121212);
}
/* ================= 调色面板 ================= */
nav#menu.nav .nav__item.nav__item--navstyle.sbg-trigger[aria-expanded="true"] { background: rgba(47, 137, 255, .1); color: #2f89ff; }
.sbg-panel {
position: fixed; z-index: 2000; width: 304px; padding: 14px 14px 12px; border-radius: 16px;
background: rgba(255, 255, 255, .92); color: #141A26;
border: 1px solid rgba(20, 26, 38, .08);
box-shadow: 0 1px 2px rgba(20, 26, 38, .06), 0 16px 40px rgba(20, 26, 38, .14);
-webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
font: 13px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top right; pointer-events: none;
transition: opacity .16s ease, transform .16s ease;
}
.sbg-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
.theme--dark .sbg-panel { background: rgba(28, 30, 36, .94); color: #F2F3F5; border-color: rgba(255, 255, 255, .08); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.sbg-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sbg-panel__title { font-size: 14px; font-weight: 600; }
.sbg-panel__note { font-size: 11.5px; color: #6B7280; }
.theme--dark .sbg-panel__note { color: #8F96A3; }
.sbg-panel__label { margin: 12px 0 8px; font-size: 12px; color: #6B7280; display: flex; justify-content: space-between; }
.theme--dark .sbg-panel__label { color: #8F96A3; }
/* 色块：左上半是浅色版、右下半是深色版 */
.sbg-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sbg-swatch {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; font-size: 11.5px;
}
.sbg-swatch i {
width: 100%; height: 34px; border-radius: 10px; display: block;
background: linear-gradient(135deg, var(--l) 0 50%, var(--d) 50% 100%);
box-shadow: inset 0 0 0 1px rgba(20, 26, 38, .1);
transition: box-shadow .15s ease;
}
.sbg-swatch[aria-pressed="true"] i { box-shadow: inset 0 0 0 1px rgba(20, 26, 38, .1), 0 0 0 2px #fff, 0 0 0 3.5px #3D6FF0; }
.theme--dark .sbg-swatch[aria-pressed="true"] i { box-shadow: 0 0 0 2px #1c1e24, 0 0 0 3.5px #8AB4FF; }
.sbg-swatch span { color: #6B7280; }
.sbg-swatch[aria-pressed="true"] span { color: inherit; font-weight: 600; }
/* 效果：小预览方块 */
.sbg-effects { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sbg-effect {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; font-size: 11.5px;
}
.sbg-effect i {
width: 100%; aspect-ratio: 1; border-radius: 10px; display: block; background-color: #F2F4F7;
box-shadow: inset 0 0 0 1px rgba(20, 26, 38, .1);
}
.theme--dark .sbg-effect i { background-color: #16181C; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.sbg-effect[data-fx="grid"] i { background-image: linear-gradient(to right, rgba(20, 26, 38, .14) 1px, transparent 1px), linear-gradient(to bottom, rgba(20, 26, 38, .14) 1px, transparent 1px); background-size: 12px 12px; }
.sbg-effect[data-fx="dots"] i { background-image: radial-gradient(circle, rgba(20, 26, 38, .3) 1px, transparent 1.5px); background-size: 8px 8px; }
.sbg-effect[data-fx="checker"] i { background-image: conic-gradient(rgba(20, 26, 38, .08) 0 25%, transparent 0 50%, rgba(20, 26, 38, .08) 0 75%, transparent 0); background-size: 20px 20px; }
.sbg-effect[data-fx="grain"] i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.theme--dark .sbg-effect[data-fx="grid"] i { background-image: linear-gradient(to right, rgba(255, 255, 255, .14) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .14) 1px, transparent 1px); }
.theme--dark .sbg-effect[data-fx="dots"] i { background-image: radial-gradient(circle, rgba(255, 255, 255, .3) 1px, transparent 1.5px); }
.theme--dark .sbg-effect[data-fx="grain"] i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.theme--dark .sbg-effect[data-fx="checker"] i { background-image: conic-gradient(rgba(255, 255, 255, .07) 0 25%, transparent 0 50%, rgba(255, 255, 255, .07) 0 75%, transparent 0); }
.sbg-effect span { color: #6B7280; }
.sbg-effect[aria-pressed="true"] i { box-shadow: inset 0 0 0 1px rgba(20, 26, 38, .1), 0 0 0 2px #fff, 0 0 0 3.5px #3D6FF0; }
.theme--dark .sbg-effect[aria-pressed="true"] i { box-shadow: 0 0 0 2px #1c1e24, 0 0 0 3.5px #8AB4FF; }
.sbg-effect[aria-pressed="true"] span { color: inherit; font-weight: 600; }
/* 强度 / 柔光 */
.sbg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.sbg-seg { display: inline-flex; padding: 2px; border-radius: 999px; background: rgba(20, 26, 38, .06); }
.theme--dark .sbg-seg { background: rgba(255, 255, 255, .07); }
.sbg-seg button { height: 24px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: #6B7280; cursor: pointer; font: inherit; font-size: 12px; }
.sbg-seg button[aria-pressed="true"] { background: #fff; color: #141A26; font-weight: 600; box-shadow: 0 1px 2px rgba(20, 26, 38, .12); }
.theme--dark .sbg-seg button[aria-pressed="true"] { background: rgba(255, 255, 255, .16); color: #F2F3F5; box-shadow: none; }
.sbg-seg button:disabled { opacity: .4; cursor: default; }
.sbg-switch { position: relative; width: 34px; height: 20px; border: 0; border-radius: 999px; background: rgba(20, 26, 38, .16); cursor: pointer; padding: 0; transition: background .18s ease; }
.sbg-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .18s ease; }
.sbg-switch[aria-checked="true"] { background: #3D6FF0; }
.sbg-switch[aria-checked="true"]::after { transform: translateX(14px); }
.theme--dark .sbg-switch { background: rgba(255, 255, 255, .18); }
.theme--dark .sbg-switch[aria-checked="true"] { background: #6F94F5; }
.sbg-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(20, 26, 38, .08); }
.theme--dark .sbg-foot { border-top-color: rgba(255, 255, 255, .08); }
.sbg-link { padding: 0; border: 0; background: none; color: #3D6FF0; cursor: pointer; font: inherit; font-size: 12px; }
.theme--dark .sbg-link { color: #8AB4FF; }
.sbg-panel button:focus-visible { outline: 2px solid #3D6FF0; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sbg-panel { transition: none; } }
.sbg-switch:disabled { opacity: .4; cursor: default; }