/* ===== Vivaline 配色系统（4 套 × 明/暗） =====
   用法：<html data-pal="mist">，切换由 pal.js 读写 localStorage。 */

/* ---------- 0. white 素白（最初的纯白底） ---------- */
html[data-pal="white"]{
  --paper:#ffffff; --paper-2:rgba(255,255,255,.72); --paper-3:rgba(255,255,255,.50);
  --ink:#0f141a; --ink-2:#46515d; --ink-3:#56616d;
  --rule:rgba(15,20,26,.10); --rule-2:rgba(15,20,26,.055);
  --accent:#35507a; --accent-2:#6f88ad;
  --glass:rgba(255,255,255,.55); --glass-hi:rgba(255,255,255,.82);
  --shadow:0 18px 50px -24px rgba(15,22,34,.22);
  --tint1:rgba(0,0,0,0); --tint2:rgba(0,0,0,0);
  --tint3:rgba(0,0,0,0); --tint4:rgba(0,0,0,0);
  --c-official:#2c6157; --c-official-soft:rgba(44,97,87,.10);
  --c-recalled:#6d4a68; --c-recalled-soft:rgba(109,74,104,.10);
  --c-model:#3a5c80;    --c-model-soft:rgba(58,92,128,.10);
  --mesh-light:none;
  --mesh-dark:linear-gradient(180deg,#0b0e12 0%,#0b0e12 100%);
  --grain-op:.40; --grain-size:150px; --card-blur:28px; --card-sat:190%;
  --cw1:.55; --cw2:.26; --cw3:.36; --card-border:rgba(255,255,255,.90); --card-shadow:0 24px 60px -32px rgba(15,22,34,.26),0 2px 6px -2px rgba(15,22,34,.06),inset 0 1px 0 rgba(255,255,255,.95); --card-radius:6px; --rule-style:solid; --rule-w:1px; --head-ls:.12em;}
html[data-pal="white"][data-mode="dark"]{
  --paper:#0b0e12; --paper-2:rgba(255,255,255,.05); --paper-3:rgba(255,255,255,.03);
  --ink:#e9eef4; --ink-2:#a3aeba; --ink-3:#8b96a2;
  --rule:rgba(233,238,244,.12); --rule-2:rgba(233,238,244,.055);
  --accent:#9aa4d8; --accent-2:#7e88bd;
  --glass:rgba(18,22,28,.55); --glass-hi:rgba(255,255,255,.10);
  --shadow:0 22px 60px -28px rgba(0,0,0,.80);
  --tint1:rgba(0,0,0,0); --tint2:rgba(0,0,0,0);
  --tint3:rgba(0,0,0,0); --tint4:rgba(0,0,0,0);
  --c-official:#8fc4b6; --c-official-soft:rgba(143,196,182,.12);
  --c-recalled:#cfa6c7; --c-recalled-soft:rgba(207,166,199,.12);
  --c-model:#9dbcdd;    --c-model-soft:rgba(157,188,221,.12);
  --grain-op:.40; --grain-size:150px; --card-blur:28px; --card-sat:190%;
  --cw1d:.42; --cw2d:.30; --cw3d:.38; --card-border-d:rgba(255,255,255,.12); --card-shadow-d:0 24px 60px -32px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.10); --card-radius:6px; --rule-style:solid; --rule-w:1px; --head-ls:.12em;}

/* ---------- 1. mist 雾蓝（默认） ---------- */
html[data-pal="mist"]{
  --paper:#eef1f5; --paper-2:rgba(255,255,255,.42); --paper-3:rgba(255,255,255,.24);
  --ink:#0f141a; --ink-2:#46515d; --ink-3:#59636f;
  --rule:rgba(15,20,26,.10); --rule-2:rgba(15,20,26,.055);
  --accent:#35507a; --accent-2:#6f88ad;
  --glass:rgba(255,255,255,.46); --glass-hi:rgba(255,255,255,.72);
  --shadow:0 18px 50px -24px rgba(15,22,34,.28);
  --tint1:rgba(108,142,190,.26); --tint2:rgba(168,150,196,.22);
  --tint3:rgba(126,168,186,.20); --tint4:rgba(120,140,190,.16);
  --c-official:#2c6157; --c-official-soft:rgba(44,97,87,.10);
  --c-recalled:#6d4a68; --c-recalled-soft:rgba(109,74,104,.10);
  --c-model:#3a5c80;    --c-model-soft:rgba(58,92,128,.10);
  --mesh-light:
radial-gradient(120% 95% at 4% -10%, rgba(196,214,240,.95) 0%, rgba(196,214,240,0) 62%),
        radial-gradient(100% 85% at 104% 4%, rgba(210,196,232,.90) 0%, rgba(210,196,232,0) 60%),
        radial-gradient(115% 90% at 42% 108%, rgba(186,214,222,.95) 0%, rgba(186,214,222,0) 64%),
        radial-gradient(80% 70% at 82% 58%, rgba(224,232,246,.85) 0%, rgba(224,232,246,0) 68%),
        linear-gradient(160deg,#e8eff9 0%,#e3ebf7 44%,#e4edf6 72%,#e9f1f8 100%);
  --mesh-dark:
radial-gradient(120% 95% at 6% -10%, rgba(56,92,140,.55) 0%, rgba(56,92,140,0) 60%),
        radial-gradient(100% 85% at 102% 6%, rgba(92,64,128,.45) 0%, rgba(92,64,128,0) 60%),
        radial-gradient(115% 90% at 40% 106%, rgba(30,80,86,.45) 0%, rgba(30,80,86,0) 64%),
        linear-gradient(160deg,#0c1117 0%,#090d12 46%,#0b1016 100%);
  --grain-op:.5; --grain-size:140px; --card-blur:34px; --card-sat:200%;
  --cw1:.62; --cw2:.30; --cw3:.42; --card-border:rgba(255,255,255,.85); --card-shadow:0 30px 70px -34px rgba(38,62,102,.42),0 2px 6px -2px rgba(38,62,102,.10),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35); --card-radius:4px; --rule-style:solid; --rule-w:1px; --head-ls:.14em;}
html[data-pal="mist"][data-mode="dark"]{
  --paper:#0b0e12; --paper-2:rgba(255,255,255,.05); --paper-3:rgba(255,255,255,.03);
  --ink:#e9eef4; --ink-2:#a3aeba; --ink-3:#8b96a2;
  --rule:rgba(233,238,244,.12); --rule-2:rgba(233,238,244,.055);
  --accent:#9dbae0; --accent-2:#7e9dc4;
  --glass:rgba(22,27,34,.52); --glass-hi:rgba(255,255,255,.10);
  --shadow:0 22px 60px -28px rgba(0,0,0,.8);
  --tint1:rgba(70,104,158,.30); --tint2:rgba(120,96,150,.24); --tint3:rgba(64,110,132,.24);
  --c-official:#8fc4b6; --c-official-soft:rgba(143,196,182,.12);
  --c-recalled:#cfa6c7; --c-recalled-soft:rgba(207,166,199,.12);
  --c-model:#9dbcdd;    --c-model-soft:rgba(157,188,221,.12);
  --grain-op:.5; --grain-size:140px; --card-blur:34px; --card-sat:200%;
  --cw1d:.62; --cw2d:.46; --cw3d:.52; --card-border-d:rgba(255,255,255,.14); --card-shadow-d:0 30px 70px -34px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.4); --card-radius:4px; --rule-style:solid; --rule-w:1px; --head-ls:.14em;}

/* ---------- 2. haze 雾灰蓝 ---------- */
html[data-pal="haze"]{
  --paper:#eceef7; --paper-2:rgba(255,255,255,.44); --paper-3:rgba(255,255,255,.24);
  --ink:#12131c; --ink-2:#4a4d66; --ink-3:#5c6280;
  --rule:rgba(18,19,28,.10); --rule-2:rgba(18,19,28,.055);
  --accent:#474f7c; --accent-2:#7a82ad;
  --glass:rgba(255,255,255,.46); --glass-hi:rgba(255,255,255,.74);
  --shadow:0 18px 50px -24px rgba(20,22,40,.28);
  --tint1:rgba(122,130,190,.26); --tint2:rgba(170,152,206,.22);
  --tint3:rgba(120,158,190,.20); --tint4:rgba(130,140,200,.16);
  --c-official:#2f5f66; --c-official-soft:rgba(47,95,102,.10);
  --c-recalled:#6a4a74; --c-recalled-soft:rgba(106,74,116,.10);
  --c-model:#3b5482;    --c-model-soft:rgba(59,84,130,.10);
  --mesh-light:
radial-gradient(150% 120% at 12% -20%, rgba(206,210,246,.98) 0%, rgba(206,210,246,0) 72%),
        radial-gradient(130% 110% at 96% 118%, rgba(196,206,238,.85) 0%, rgba(196,206,238,0) 70%),
        radial-gradient(70% 60% at 70% 40%, rgba(220,214,244,.55) 0%, rgba(220,214,244,0) 72%),
        linear-gradient(160deg,#eceff9 0%,#e8ecf8 50%,#eaeef9 100%);
  --mesh-dark:
radial-gradient(150% 120% at 10% -20%, rgba(64,74,136,.55) 0%, rgba(64,74,136,0) 70%),
        radial-gradient(130% 110% at 96% 118%, rgba(70,56,110,.45) 0%, rgba(70,56,110,0) 70%),
        linear-gradient(160deg,#0b0c15 0%,#090a12 50%,#0a0c16 100%);
  --grain-op:.36; --grain-size:180px; --card-blur:46px; --card-sat:220%;
  --cw1:.50; --cw2:.22; --cw3:.32; --card-border:rgba(255,255,255,.80); --card-shadow:0 34px 80px -38px rgba(30,34,70,.40),0 2px 6px -2px rgba(30,34,70,.08),inset 0 1px 0 rgba(255,255,255,.9); --card-radius:10px; --rule-style:dotted; --rule-w:1px; --head-ls:.2em;}
html[data-pal="haze"][data-mode="dark"]{
  --paper:#0a0b14; --paper-2:rgba(255,255,255,.05); --paper-3:rgba(255,255,255,.03);
  --ink:#e8eaf6; --ink-2:#a3a7c2; --ink-3:#9aa0bd;
  --rule:rgba(232,234,246,.12); --rule-2:rgba(232,234,246,.055);
  --accent:#9aa4d8; --accent-2:#7e88bd;
  --glass:rgba(20,22,36,.52); --glass-hi:rgba(255,255,255,.10);
  --shadow:0 22px 60px -28px rgba(0,0,0,.8);
  --tint1:rgba(80,88,150,.30); --tint2:rgba(120,96,160,.24); --tint3:rgba(64,100,140,.24);
  --c-official:#8fc4b6; --c-official-soft:rgba(143,196,182,.12);
  --c-recalled:#cfa6c7; --c-recalled-soft:rgba(207,166,199,.12);
  --c-model:#9dbcdd;    --c-model-soft:rgba(157,188,221,.12);
  --grain-op:.36; --grain-size:180px; --card-blur:46px; --card-sat:220%;
  --cw1d:.50; --cw2d:.30; --cw3d:.40; --card-border-d:rgba(255,255,255,.12); --card-shadow-d:0 34px 80px -38px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.10); --card-radius:10px; --rule-style:dotted; --rule-w:1px; --head-ls:.2em;}

/* ---------- 3. mauve 藕荷 ---------- */
html[data-pal="mauve"]{
  --paper:#eeeaf0; --paper-2:rgba(255,255,255,.44); --paper-3:rgba(255,255,255,.24);
  --ink:#141218; --ink-2:#4c4754; --ink-3:#5f5869;
  --rule:rgba(20,18,24,.10); --rule-2:rgba(20,18,24,.055);
  --accent:#5f4a6a; --accent-2:#8a7596;
  --glass:rgba(255,255,255,.46); --glass-hi:rgba(255,255,255,.74);
  --shadow:0 18px 50px -24px rgba(28,18,34,.28);
  --tint1:rgba(150,130,180,.26); --tint2:rgba(178,150,176,.22);
  --tint3:rgba(140,160,180,.20); --tint4:rgba(150,130,180,.16);
  --c-official:#2f6156; --c-official-soft:rgba(47,97,86,.10);
  --c-recalled:#6d4a68; --c-recalled-soft:rgba(109,74,104,.12);
  --c-model:#42557c;    --c-model-soft:rgba(66,85,124,.10);
  --mesh-light:
radial-gradient(130% 110% at 88% 112%, rgba(232,198,222,.95) 0%, rgba(232,198,222,0) 66%),
        radial-gradient(110% 90% at 4% -8%, rgba(216,204,236,.90) 0%, rgba(216,204,236,0) 64%),
        radial-gradient(80% 70% at 60% 50%, rgba(238,222,238,.60) 0%, rgba(238,222,238,0) 70%),
        linear-gradient(200deg,#f2ecf4 0%,#eee8f2 46%,#f1eaf1 100%);
  --mesh-dark:
radial-gradient(130% 110% at 88% 112%, rgba(110,60,90,.55) 0%, rgba(110,60,90,0) 66%),
        radial-gradient(110% 90% at 4% -8%, rgba(84,58,104,.48) 0%, rgba(84,58,104,0) 64%),
        linear-gradient(200deg,#110c15 0%,#0d0a12 46%,#0f0c14 100%);
  --grain-op:.66; --grain-size:120px; --card-blur:28px; --card-sat:180%;
  --cw1:.70; --cw2:.48; --cw3:.60; --card-border:rgba(255,255,255,.90); --card-shadow:0 24px 54px -30px rgba(60,30,60,.34),0 2px 6px -2px rgba(60,30,60,.08),inset 0 1px 0 rgba(255,255,255,.98); --card-radius:16px; --rule-style:solid; --rule-w:1px; --head-ls:.10em;}
html[data-pal="mauve"][data-mode="dark"]{
  --paper:#0e0b13; --paper-2:rgba(255,255,255,.05); --paper-3:rgba(255,255,255,.03);
  --ink:#ece8f2; --ink-2:#a8a0b6; --ink-3:#9b93a8;
  --rule:rgba(236,232,242,.12); --rule-2:rgba(236,232,242,.055);
  --accent:#c2a8d2; --accent-2:#a68cb8;
  --glass:rgba(24,18,32,.52); --glass-hi:rgba(255,255,255,.10);
  --shadow:0 22px 60px -28px rgba(0,0,0,.8);
  --tint1:rgba(120,80,140,.30); --tint2:rgba(150,100,140,.24); --tint3:rgba(90,90,140,.24);
  --c-official:#8fc4b6; --c-official-soft:rgba(143,196,182,.12);
  --c-recalled:#e0b6d3; --c-recalled-soft:rgba(224,182,211,.12);
  --c-model:#a9b8dd;    --c-model-soft:rgba(169,184,221,.12);
  --grain-op:.66; --grain-size:120px; --card-blur:28px; --card-sat:180%;
  --cw1d:.66; --cw2d:.48; --cw3d:.58; --card-border-d:rgba(255,255,255,.16); --card-shadow-d:0 24px 54px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.14); --card-radius:16px; --rule-style:solid; --rule-w:1px; --head-ls:.10em;}

/* ---------- 4. quartz 石英灰 ---------- */
html[data-pal="quartz"]{
  --paper:#f0f2f4; --paper-2:rgba(255,255,255,.46); --paper-3:rgba(255,255,255,.24);
  --ink:#101417; --ink-2:#46525a; --ink-3:#59656d;
  --rule:rgba(16,20,23,.10); --rule-2:rgba(16,20,23,.055);
  --accent:#3c565f; --accent-2:#6d8a94;
  --glass:rgba(255,255,255,.48); --glass-hi:rgba(255,255,255,.75);
  --shadow:0 18px 50px -24px rgba(12,20,24,.26);
  --tint1:rgba(120,150,160,.24); --tint2:rgba(160,168,160,.20);
  --tint3:rgba(120,140,160,.18); --tint4:rgba(130,150,160,.14);
  --c-official:#2b5f57; --c-official-soft:rgba(43,95,87,.10);
  --c-recalled:#6a4a66; --c-recalled-soft:rgba(106,74,102,.10);
  --c-model:#3a5568;    --c-model-soft:rgba(58,85,104,.10);
  --mesh-light:
radial-gradient(100% 80% at 0% 0%, rgba(186,214,220,.95) 0%, rgba(186,214,220,0) 58%),
        radial-gradient(100% 80% at 100% 100%, rgba(196,208,214,.95) 0%, rgba(196,208,214,0) 58%),
        radial-gradient(60% 50% at 50% 50%, rgba(232,240,242,.35) 0%, rgba(232,240,242,0) 70%),
        linear-gradient(160deg,#eef4f5 0%,#e9f0f1 50%,#edf3f4 100%);
  --mesh-dark:
radial-gradient(100% 80% at 0% 0%, rgba(34,78,86,.58) 0%, rgba(34,78,86,0) 58%),
        radial-gradient(100% 80% at 100% 100%, rgba(40,66,76,.55) 0%, rgba(40,66,76,0) 58%),
        linear-gradient(160deg,#090f11 0%,#070c0e 50%,#090e10 100%);
  --grain-op:.2; --grain-size:90px; --card-blur:16px; --card-sat:160%;
  --cw1:.80; --cw2:.62; --cw3:.72; --card-border:rgba(255,255,255,.95); --card-shadow:0 16px 40px -26px rgba(16,28,34,.34),0 1px 3px -1px rgba(16,28,34,.10),inset 0 1px 0 rgba(255,255,255,.9); --card-radius:0px; --rule-style:solid; --rule-w:2px; --head-ls:.24em;}
html[data-pal="quartz"][data-mode="dark"]{
  --paper:#0a0f12; --paper-2:rgba(255,255,255,.05); --paper-3:rgba(255,255,255,.03);
  --ink:#e7edf0; --ink-2:#a1adb4; --ink-3:#93a0a7;
  --rule:rgba(231,237,240,.12); --rule-2:rgba(231,237,240,.055);
  --accent:#9fc0c8; --accent-2:#82a5ad;
  --glass:rgba(16,24,28,.52); --glass-hi:rgba(255,255,255,.10);
  --shadow:0 22px 60px -28px rgba(0,0,0,.8);
  --tint1:rgba(60,110,120,.28); --tint2:rgba(100,120,110,.22); --tint3:rgba(50,100,110,.22);
  --c-official:#8fc4b6; --c-official-soft:rgba(143,196,182,.12);
  --c-recalled:#cfa6c7; --c-recalled-soft:rgba(207,166,199,.12);
  --c-model:#a9c3d6;    --c-model-soft:rgba(169,195,214,.12);
  --grain-op:.2; --grain-size:90px; --card-blur:16px; --card-sat:160%;
  --cw1d:.78; --cw2d:.62; --cw3d:.70; --card-border-d:rgba(255,255,255,.18); --card-shadow-d:0 16px 40px -26px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.16); --card-radius:0px; --rule-style:solid; --rule-w:2px; --head-ls:.24em;}


/* ---------- 5. 配色性格：同一套骨架，四种气质 ---------- */
/* 纸面颗粒：mist 细腻，haze 极淡大颗粒，mauve 明显暖噪点，quartz 近乎无颗粒 */
body::after{
  opacity:var(--grain-op,.5)!important;
  background-size:var(--grain-size,140px) var(--grain-size,140px)!important;
}
/* 玻璃卡：透明度／模糊／饱和度／圆角／描边／阴影全部随配色变化 */
.glass{
  background:rgba(255,255,255,var(--cw1,.62))!important;
  -webkit-backdrop-filter:blur(var(--card-blur,34px)) saturate(var(--card-sat,200%))!important;
  backdrop-filter:blur(var(--card-blur,34px)) saturate(var(--card-sat,200%))!important;
  border-radius:var(--card-radius,4px)!important;
  border-color:var(--card-border,var(--glass-hi))!important;
  box-shadow:var(--card-shadow,var(--shadow))!important;
}
[data-mode="dark"] .glass{
  background:rgba(14,18,26,var(--cw1d,.30))!important;
  border-color:var(--card-border-d,rgba(255,255,255,.12))!important;
  box-shadow:var(--card-shadow-d,var(--shadow))!important;
}
/* 分隔线：mist/mauve 细实线，haze 细点线，quartz 2px 实线 */
.shot{border-bottom-style:var(--rule-style,solid)!important;border-bottom-width:var(--rule-w,1px)!important}
.entry{border-top-style:var(--rule-style,solid)!important;border-top-width:var(--rule-w,1px)!important}
/* 小标题字距：haze 疏、quartz 更疏、mauve 收 */
.sec-h b{letter-spacing:var(--head-ls,.14em)!important}

/* ---------- 配色切换小控件 ---------- */
.palsw{
  position:fixed;left:16px;bottom:16px;z-index:45;
  display:flex;align-items:center;gap:7px;
  padding:8px 12px 8px 10px;border-radius:999px;
  background:var(--glass);border:1px solid var(--glass-hi);
  box-shadow:0 14px 34px -20px rgba(15,22,34,.5);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  font:400 11px/1 -apple-system,"PingFang SC",system-ui,sans-serif;color:var(--ink-3);
  letter-spacing:.16em;max-width:calc(100vw - 32px);flex-wrap:wrap;
}
.palsw .plb{white-space:nowrap;margin-right:2px}
.palsw button{
  width:16px;height:16px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.7);background:var(--pc,#888);
  box-shadow:0 1px 2px rgba(15,22,34,.18);
  transition:transform .2s ease, box-shadow .2s ease;
}
.palsw button:hover{transform:scale(1.18)}
.palsw button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink), 0 1px 2px rgba(15,22,34,.2)}
.palsw button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:620px){.palsw{left:12px;bottom:12px;padding:7px 10px 7px 9px}}
@media print{.palsw{display:none!important}}
@media(prefers-reduced-motion:reduce){.palsw button{transition:none}}

/* ---------- 回到顶部 ---------- */
.totop{
  position:fixed;right:20px;bottom:20px;z-index:46;
  width:38px;height:38px;padding:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--glass-hi);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 12px 30px -18px rgba(15,22,34,.45);
  color:var(--ink-2);font:400 17px/1 -apple-system,"PingFang SC",system-ui,sans-serif;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .26s ease,transform .26s ease,color .2s ease,border-color .2s ease,visibility .26s;
}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.totop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:620px){.totop{width:36px;height:36px;font-size:16px}}
@media print{.totop{display:none!important}}
@media(prefers-reduced-motion:reduce){.totop{transition:none}}