/* 雾港渔事 · 主题皮肤
   10 套主题：夜色（默认）/ 深潮 / 素白 / 旧纸 / 潟湖 / 松林 / 黄昏 / 霜蓝 / 极光潮 / 烬火码头
   默认夜色完全沿用 app.css 的原始视觉；其余主题在此覆盖变量与主要表面。 */

html[data-theme="night"] { color-scheme: dark; }

/* ── 深潮黑 ─────────────────────────────────────────────── */
html[data-theme="abyss"] {
  color-scheme: dark;
  --bg: #030608;
  --bg-2: #050b0d;
  --panel: #070d10;
  --panel-2: #0a1417;
  --line: #142225;
  --line-2: #1d3134;
  --text: #e8f2ee;
  --text-dim: #b9cbc4;
  --muted: #7f9992;
  --faint: #58716b;
  --brass: #e3b666;
  --brass-2: #f6d79a;
  --teal: #4aa39a;
  --teal-2: #8ad4c8;
  --coral: #d97a5c;
  --danger: #cf5444;
  --ok: #67d6a3;
  --shadow: 0 18px 50px rgba(0, 0, 0, .6);
  --app-bg: radial-gradient(1000px 600px at 55% -10%, rgba(74, 163, 154, .07), transparent 62%), #030608;
  --chrome-bg: linear-gradient(180deg, #081114, #050b0d);
  --nav-bg: #050b0d;
  --main-bg: #030608;
  --rail-bg: #050d0f;
  --card-bg: linear-gradient(180deg, rgba(10, 21, 24, .94), rgba(6, 13, 15, .94));
  --card-flat: #070f11;
  --panel-head-bg: #0a1518;
  --modal-bg: linear-gradient(180deg, #0b181b, #060f11);
  --toast-bg: linear-gradient(180deg, #0c1b1e, #071113);
  --input-bg: #040a0c;
  --btn-bg: linear-gradient(180deg, #0b1a1d, #061012);
  --accent-bg: linear-gradient(180deg, #e8c079, #c99a44);
  --scene-bg: linear-gradient(180deg, #16292c 0%, #10262a 22%, #0a1d21 54%, #03090b 100%);
  --pier-bg: linear-gradient(165deg, #18211f, #0c1210 58%, #050807);
  --post-bg: linear-gradient(180deg, #232c28, #070b09);
  --moon-bg: radial-gradient(circle at 38% 35%, #f3dfaa, #c69745 48%, rgba(216, 166, 75, .02) 72%);
  --lamp-bg: #f9d785;
  --water-bg: repeating-linear-gradient(180deg, rgba(137, 190, 180, .04) 0 1px, transparent 1px 14px), linear-gradient(180deg, rgba(74, 163, 154, .1), rgba(0, 4, 5, .82));
  --water-banner: linear-gradient(180deg, #234a45 0%, #061012 100%);
  --login-bg: radial-gradient(1100px 640px at 30% 10%, rgba(74, 163, 154, .1), transparent 60%), #020506;
  --login-right-bg: linear-gradient(180deg, rgba(6, 14, 16, .7), rgba(2, 6, 7, .98));
  --scene-ink: #eef6f1;
  --scene-ink-dim: rgba(220, 240, 232, .6);
  --chip-bg: rgba(0, 0, 0, .28);
  --hover-bg: rgba(255, 255, 255, .03);
}

/* ── 素白 ───────────────────────────────────────────────── */
html[data-theme="paper"] {
  color-scheme: light;
  --bg: #f4f1e9;
  --bg-2: #ece8dc;
  --panel: #fffdf8;
  --panel-2: #f7f2e6;
  --line: #ddd5c4;
  --line-2: #c8bfab;
  --text: #232119;
  --text-dim: #4b463a;
  --muted: #6f695b;
  --faint: #8b8474;
  --brass: #9a6b1f;
  --brass-2: #7c5314;
  --teal: #2f6f68;
  --teal-2: #275e58;
  --coral: #b4563b;
  --danger: #a83f32;
  --ok: #2f7a5c;
  --shadow: 0 14px 40px rgba(72, 58, 30, .16);
  --app-bg: radial-gradient(900px 520px at 55% -10%, rgba(79, 145, 138, .08), transparent 62%), #f4f1e9;
  --chrome-bg: linear-gradient(180deg, #fffdf8, #f4efe2);
  --nav-bg: #f0ebdd;
  --main-bg: #f8f5ec;
  --rail-bg: #f3eee1;
  --card-bg: linear-gradient(180deg, #fffefb, #fbf7ec);
  --card-flat: #fffdf8;
  --panel-head-bg: #f5efe1;
  --modal-bg: linear-gradient(180deg, #fffefb, #f8f3e7);
  --toast-bg: linear-gradient(180deg, #fffdf8, #f3eddf);
  --input-bg: #fffefb;
  --btn-bg: linear-gradient(180deg, #fffdf8, #f1ebdd);
  --accent-bg: linear-gradient(180deg, #e8c079, #cd9f4a);
  --scene-bg: linear-gradient(180deg, #e6efea 0%, #d6e5df 24%, #c0d6ce 58%, #eef1e8 100%);
  --pier-bg: linear-gradient(165deg, #c3b294, #a08d6f 58%, #77674f);
  --post-bg: linear-gradient(180deg, #b6a68a, #7d6c53);
  --moon-bg: radial-gradient(circle at 38% 35%, #fff8d8, #f0dfa8 48%, rgba(240, 223, 168, .02) 72%);
  --lamp-bg: #c79536;
  --water-bg: repeating-linear-gradient(180deg, rgba(80, 140, 130, .08) 0 1px, transparent 1px 14px), linear-gradient(180deg, rgba(94, 155, 143, .18), rgba(214, 228, 219, .5));
  --water-banner: linear-gradient(180deg, #cfe0d9 0%, #f4f1e9 100%);
  --login-bg: radial-gradient(1000px 620px at 30% 10%, rgba(79, 145, 138, .12), transparent 60%), #f4f1e9;
  --login-right-bg: linear-gradient(180deg, rgba(255, 253, 248, .82), rgba(244, 241, 233, .97));
  --scene-ink: #24332e;
  --scene-ink-dim: rgba(36, 51, 46, .66);
  --chip-bg: rgba(0, 0, 0, .04);
  --hover-bg: rgba(60, 50, 20, .05);
}

/* ── 旧纸 ───────────────────────────────────────────────── */
html[data-theme="parchment"] {
  color-scheme: light;
  --bg: #e7dac0;
  --bg-2: #ddcfb2;
  --panel: #f6ecd6;
  --panel-2: #efe1c6;
  --line: #cdbb98;
  --line-2: #b8a37c;
  --text: #392d1c;
  --text-dim: #57472f;
  --muted: #77644a;
  --faint: #947f61;
  --brass: #7d531e;
  --brass-2: #623f13;
  --teal: #43695f;
  --teal-2: #35544c;
  --coral: #a85438;
  --danger: #9c4030;
  --ok: #3d6f55;
  --shadow: 0 14px 40px rgba(91, 70, 36, .2);
  --app-bg: radial-gradient(900px 520px at 55% -10%, rgba(125, 83, 30, .08), transparent 62%), #e7dac0;
  --chrome-bg: linear-gradient(180deg, #f4ead4, #e3d5b8);
  --nav-bg: #e0d2b4;
  --main-bg: #eaddc4;
  --rail-bg: #e4d6b8;
  --card-bg: linear-gradient(180deg, #f8efda, #f0e3c8);
  --card-flat: #f6ecd6;
  --panel-head-bg: #efe1c6;
  --modal-bg: linear-gradient(180deg, #f8efda, #eedfc2);
  --toast-bg: linear-gradient(180deg, #f6ecd6, #e9dabc);
  --input-bg: #f9f0dc;
  --btn-bg: linear-gradient(180deg, #f5ead3, #e7d8ba);
  --accent-bg: linear-gradient(180deg, #d9ad63, #b8842f);
  --scene-bg: linear-gradient(180deg, #e3d8bd 0%, #d3c5a3 26%, #c2b28c 60%, #eee4cc 100%);
  --pier-bg: linear-gradient(165deg, #b7a37d, #96815d 58%, #6d5b3f);
  --post-bg: linear-gradient(180deg, #b09a72, #75603f);
  --moon-bg: radial-gradient(circle at 38% 35%, #fff3cf, #ecd9a3 48%, rgba(236, 217, 163, .02) 72%);
  --lamp-bg: #b98a35;
  --water-bg: repeating-linear-gradient(180deg, rgba(110, 140, 110, .07) 0 1px, transparent 1px 14px), linear-gradient(180deg, rgba(120, 140, 110, .18), rgba(210, 196, 162, .55));
  --water-banner: linear-gradient(180deg, #cbbd95 0%, #e7dac0 100%);
  --login-bg: radial-gradient(1000px 620px at 30% 10%, rgba(125, 83, 30, .1), transparent 60%), #e7dac0;
  --login-right-bg: linear-gradient(180deg, rgba(246, 236, 214, .85), rgba(231, 218, 192, .97));
  --scene-ink: #3a2c19;
  --scene-ink-dim: rgba(58, 44, 25, .68);
  --chip-bg: rgba(60, 40, 10, .05);
  --hover-bg: rgba(60, 40, 10, .06);
}

/* ── 潟湖 ───────────────────────────────────────────────── */
html[data-theme="lagoon"] {
  color-scheme: dark;
  --bg: #051019;
  --bg-2: #081823;
  --panel: #0a1b26;
  --panel-2: #0d2330;
  --line: #17323f;
  --line-2: #214352;
  --text: #e2f2f5;
  --text-dim: #b4d2d8;
  --muted: #7ea6ad;
  --faint: #5a7f87;
  --brass: #e8c57d;
  --brass-2: #f7dda6;
  --teal: #4fb6c6;
  --teal-2: #93e0e8;
  --coral: #e08a6c;
  --danger: #cf5d49;
  --ok: #6fd6b4;
  --shadow: 0 18px 50px rgba(0, 0, 0, .5);
  --app-bg: radial-gradient(1000px 620px at 55% -10%, rgba(79, 182, 198, .1), transparent 62%), #051019;
  --chrome-bg: linear-gradient(180deg, #0a1e29, #06121b);
  --nav-bg: #07141d;
  --main-bg: #051019;
  --rail-bg: #071620;
  --card-bg: linear-gradient(180deg, rgba(13, 35, 48, .92), rgba(7, 19, 27, .94));
  --card-flat: #0a1b26;
  --panel-head-bg: #0d2330;
  --modal-bg: linear-gradient(180deg, #0e2533, #071521);
  --toast-bg: linear-gradient(180deg, #0e2533, #071620);
  --input-bg: #06141d;
  --btn-bg: linear-gradient(180deg, #0c2430, #071722);
  --accent-bg: linear-gradient(180deg, #eccd8c, #c9a352);
  --scene-bg: linear-gradient(180deg, #12333f 0%, #0d2b38 24%, #092330 58%, #041018 100%);
  --pier-bg: linear-gradient(165deg, #1b3038, #0e1d23 58%, #061016);
  --post-bg: linear-gradient(180deg, #243d45, #08131a);
  --moon-bg: radial-gradient(circle at 38% 35%, #f3dfaa, #c69745 48%, rgba(216, 166, 75, .02) 72%);
  --lamp-bg: #f9d785;
  --water-bg: repeating-linear-gradient(180deg, rgba(120, 190, 200, .06) 0 1px, transparent 1px 14px), linear-gradient(180deg, rgba(79, 182, 198, .16), rgba(1, 8, 12, .78));
  --water-banner: linear-gradient(180deg, #2b5a66 0%, #06131c 100%);
  --login-bg: radial-gradient(1100px 640px at 30% 10%, rgba(79, 182, 198, .13), transparent 60%), #040d15;
  --login-right-bg: linear-gradient(180deg, rgba(10, 27, 38, .65), rgba(4, 12, 19, .96));
  --scene-ink: #e8f7fa;
  --scene-ink-dim: rgba(214, 240, 244, .62);
  --chip-bg: rgba(0, 0, 0, .24);
  --hover-bg: rgba(255, 255, 255, .03);
}

/* ── 松林 ───────────────────────────────────────────────── */
html[data-theme="pine"] {
  color-scheme: dark;
  --bg: #07110c;
  --bg-2: #0a1710;
  --panel: #0c1b14;
  --panel-2: #10251b;
  --line: #1c3327;
  --line-2: #284536;
  --text: #e6efe4;
  --text-dim: #bdd0be;
  --muted: #86a18a;
  --faint: #617c67;
  --brass: #d9b25f;
  --brass-2: #f2d493;
  --teal: #7cb894;
  --teal-2: #b3e0c2;
  --coral: #cf7d5e;
  --danger: #c25a45;
  --ok: #86d6a4;
  --shadow: 0 18px 50px rgba(0, 0, 0, .5);
  --app-bg: radial-gradient(1000px 620px at 55% -10%, rgba(124, 184, 148, .09), transparent 62%), #07110c;
  --chrome-bg: linear-gradient(180deg, #0d2017, #08150f);
  --nav-bg: #091710;
  --main-bg: #07110c;
  --rail-bg: #091811;
  --card-bg: linear-gradient(180deg, rgba(16, 37, 27, .92), rgba(8, 21, 15, .94));
  --card-flat: #0c1b14;
  --panel-head-bg: #10251b;
  --modal-bg: linear-gradient(180deg, #10281c, #081710);
  --toast-bg: linear-gradient(180deg, #10281c, #081711);
  --input-bg: #071510;
  --btn-bg: linear-gradient(180deg, #0e2419, #08180f);
  --accent-bg: linear-gradient(180deg, #e6c681, #c39d4c);
  --scene-bg: linear-gradient(180deg, #183126 0%, #12291f 24%, #0b2018 58%, #050f0a 100%);
  --pier-bg: linear-gradient(165deg, #1e2f23, #101c14 58%, #070d09);
  --post-bg: linear-gradient(180deg, #27392b, #091109);
  --moon-bg: radial-gradient(circle at 38% 35%, #f3dfaa, #c69745 48%, rgba(216, 166, 75, .02) 72%);
  --lamp-bg: #f9d785;
  --water-bg: repeating-linear-gradient(180deg, rgba(150, 200, 165, .05) 0 1px, transparent 1px 14px), linear-gradient(180deg, rgba(124, 184, 148, .13), rgba(1, 8, 4, .78));
  --water-banner: linear-gradient(180deg, #2c5138 0%, #08130d 100%);
  --login-bg: radial-gradient(1100px 640px at 30% 10%, rgba(124, 184, 148, .12), transparent 60%), #050e09;
  --login-right-bg: linear-gradient(180deg, rgba(12, 27, 19, .68), rgba(5, 13, 9, .96));
  --scene-ink: #edf6ea;
  --scene-ink-dim: rgba(220, 240, 220, .6);
  --chip-bg: rgba(0, 0, 0, .24);
  --hover-bg: rgba(255, 255, 255, .03);
}

/* ── 黄昏 ───────────────────────────────────────────────── */
html[data-theme="dusk"] {
  color-scheme: dark;
  --bg: #140d12;
  --bg-2: #1b1118;
  --panel: #221420;
  --panel-2: #2b1a29;
  --line: #3a2634;
  --line-2: #513646;
  --text: #f6e7d8;
  --text-dim: #dcc2b3;
  --muted: #b3928d;
  --faint: #8a6e70;
  --brass: #eab271;
  --brass-2: #ffd6a1;
  --teal: #7fae9e;
  --teal-2: #b8d9c8;
  --coral: #e78f6d;
  --danger: #d4664f;
  --ok: #8ed3ac;
  --shadow: 0 18px 50px rgba(0, 0, 0, .55);
  --app-bg: radial-gradient(1000px 620px at 55% -10%, rgba(234, 178, 113, .08), transparent 62%), #140d12;
  --chrome-bg: linear-gradient(180deg, #22141c, #160e14);
  --nav-bg: #180f16;
  --main-bg: #140d12;
  --rail-bg: #190f17;
  --card-bg: linear-gradient(180deg, rgba(37, 21, 31, .92), rgba(22, 13, 20, .94));
  --card-flat: #221420;
  --panel-head-bg: #2b1a29;
  --modal-bg: linear-gradient(180deg, #2a1926, #1a0f18);
  --toast-bg: linear-gradient(180deg, #2a1926, #190f17);
  --input-bg: #1b1019;
  --btn-bg: linear-gradient(180deg, #291823, #1b1018);
  --accent-bg: linear-gradient(180deg, #f3c48c, #d09a56);
  --scene-bg: linear-gradient(180deg, #3b2330 0%, #331f2b 24%, #281823 58%, #140b11 100%);
  --pier-bg: linear-gradient(165deg, #3a2a2c, #241a1d 58%, #120c0e);
  --post-bg: linear-gradient(180deg, #453034, #170f11);
  --moon-bg: radial-gradient(circle at 38% 35%, #ffe0b0, #e6a35c 48%, rgba(230, 163, 92, .02) 72%);
  --lamp-bg: #ffcf8a;
  --water-bg: repeating-linear-gradient(180deg, rgba(200, 150, 150, .05) 0 1px, transparent 1px 14px), linear-gradient(180deg, rgba(230, 163, 92, .14), rgba(10, 5, 8, .78));
  --water-banner: linear-gradient(180deg, #5a3b3c 0%, #1b1016 100%);
  --login-bg: radial-gradient(1100px 640px at 30% 10%, rgba(234, 178, 113, .1), transparent 60%), #120b10;
  --login-right-bg: linear-gradient(180deg, rgba(34, 20, 28, .7), rgba(18, 11, 16, .97));
  --scene-ink: #ffeeda;
  --scene-ink-dim: rgba(250, 225, 205, .62);
  --chip-bg: rgba(0, 0, 0, .26);
  --hover-bg: rgba(255, 255, 255, .035);
}

/* ── 霜蓝 ───────────────────────────────────────────────── */
html[data-theme="frost"] {
  color-scheme: light;
  --bg: #eef4f8;
  --bg-2: #e3edf3;
  --panel: #ffffff;
  --panel-2: #f0f6fa;
  --line: #d3e0e8;
  --line-2: #b9ccd8;
  --text: #1a2730;
  --text-dim: #41535e;
  --muted: #647983;
  --faint: #8498a1;
  --brass: #8a6420;
  --brass-2: #6f4e13;
  --teal: #3b7d8c;
  --teal-2: #326b78;
  --coral: #b25c48;
  --danger: #a5453a;
  --ok: #2f7f64;
  --shadow: 0 14px 40px rgba(35, 60, 75, .15);
  --app-bg: radial-gradient(900px 520px at 55% -10%, rgba(59, 125, 140, .08), transparent 62%), #eef4f8;
  --chrome-bg: linear-gradient(180deg, #ffffff, #e9f1f6);
  --nav-bg: #e8f0f5;
  --main-bg: #f2f7fa;
  --rail-bg: #ebf2f6;
  --card-bg: linear-gradient(180deg, #ffffff, #f5f9fc);
  --card-flat: #ffffff;
  --panel-head-bg: #eef5f9;
  --modal-bg: linear-gradient(180deg, #ffffff, #eff6fa);
  --toast-bg: linear-gradient(180deg, #ffffff, #e9f1f6);
  --input-bg: #ffffff;
  --btn-bg: linear-gradient(180deg, #ffffff, #e8f0f5);
  --accent-bg: linear-gradient(180deg, #e8c079, #cd9f4a);
  --scene-bg: linear-gradient(180deg, #e3eef2 0%, #d2e2e9 24%, #bcd3dd 58%, #eef4f6 100%);
  --pier-bg: linear-gradient(165deg, #b7c3c6, #94a4a8 58%, #6f8288);
  --post-bg: linear-gradient(180deg, #aebcc0, #77878c);
  --moon-bg: radial-gradient(circle at 38% 35%, #ffffff, #e7f0f2 48%, rgba(231, 240, 242, .02) 72%);
  --lamp-bg: #b98a35;
  --water-bg: repeating-linear-gradient(180deg, rgba(90, 150, 165, .08) 0 1px, transparent 1px 14px), linear-gradient(180deg, rgba(94, 155, 170, .16), rgba(214, 231, 238, .55));
  --water-banner: linear-gradient(180deg, #c9dde5 0%, #eef4f8 100%);
  --login-bg: radial-gradient(1000px 620px at 30% 10%, rgba(59, 125, 140, .1), transparent 60%), #eef4f8;
  --login-right-bg: linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(238, 244, 248, .97));
  --scene-ink: #22323a;
  --scene-ink-dim: rgba(34, 50, 58, .64);
  --chip-bg: rgba(0, 0, 0, .035);
  --hover-bg: rgba(30, 60, 75, .05);
}

/* ── 极光潮 ─────────────────────────────────────────────── */
html[data-theme="aurora"] {
  color-scheme: dark;
  --bg: #050b16;
  --bg-2: #081123;
  --panel: #0a1324;
  --panel-2: #0e1a30;
  --line: #1a2c48;
  --line-2: #284268;
  --text: #e8f4f4;
  --text-dim: #b6d4d6;
  --muted: #7d9fa8;
  --faint: #5b7f8c;
  --brass: #e6c77f;
  --brass-2: #f8e0a8;
  --teal: #6ee7d8;
  --teal-2: #a7fff2;
  --coral: #a98cf5;
  --danger: #d96b7c;
  --ok: #6ee7b7;
  --shadow: 0 18px 54px rgba(0, 0, 0, .55);
  --app-bg: radial-gradient(1100px 650px at 30% -8%, rgba(110, 231, 216, .12), transparent 58%), radial-gradient(900px 600px at 88% 8%, rgba(169, 140, 245, .14), transparent 62%), #050b16;
  --chrome-bg: linear-gradient(180deg, #0b172c, #050c18);
  --nav-bg: #071021;
  --main-bg: #050b16;
  --rail-bg: #071226;
  --card-bg: linear-gradient(180deg, rgba(14, 26, 48, .94), rgba(7, 14, 27, .96));
  --card-flat: #0a1324;
  --panel-head-bg: #0e1a30;
  --modal-bg: linear-gradient(180deg, #101e38, #07101f);
  --toast-bg: linear-gradient(180deg, #101e38, #081226);
  --input-bg: #071122;
  --btn-bg: linear-gradient(180deg, #101f3a, #08142a);
  --accent-bg: linear-gradient(180deg, #f0d493, #cda95d);
  --scene-bg: linear-gradient(180deg, #122a45 0%, #10223f 24%, #0b1930 58%, #030814 100%);
  --pier-bg: linear-gradient(165deg, #1b2c3b, #0d1a27 58%, #050c14);
  --post-bg: linear-gradient(180deg, #263a4a, #08111d);
  --moon-bg: radial-gradient(circle at 38% 35%, #f7f1d7, #bca66c 48%, rgba(216, 166, 75, .02) 72%);
  --lamp-bg: #9ff4e2;
  --water-bg: repeating-linear-gradient(180deg, rgba(110, 231, 216, .06) 0 1px, transparent 1px 14px), linear-gradient(180deg, rgba(110, 231, 216, .14), rgba(3, 8, 20, .82));
  --water-banner: linear-gradient(180deg, #1b4d5e 0%, #081426 100%);
  --login-bg: radial-gradient(1100px 640px at 30% 10%, rgba(110, 231, 216, .13), transparent 60%), radial-gradient(800px 520px at 80% 30%, rgba(169, 140, 245, .1), transparent 60%), #050b16;
  --login-right-bg: linear-gradient(180deg, rgba(11, 23, 44, .68), rgba(5, 12, 24, .97));
  --scene-ink: #e8f7f4;
  --scene-ink-dim: rgba(214, 240, 236, .62);
  --chip-bg: rgba(0, 0, 0, .25);
  --hover-bg: rgba(255, 255, 255, .035);
}

/* ── 烬火码头 ───────────────────────────────────────────── */
html[data-theme="ember"] {
  color-scheme: dark;
  --bg: #140b08;
  --bg-2: #1b0f0a;
  --panel: #20110b;
  --panel-2: #2a1710;
  --line: #3a2118;
  --line-2: #553226;
  --text: #f7e8d6;
  --text-dim: #d9bfa8;
  --muted: #a98b75;
  --faint: #806756;
  --brass: #f0b46a;
  --brass-2: #ffd39a;
  --teal: #8fb7a2;
  --teal-2: #b8d6c4;
  --coral: #e08a4c;
  --danger: #d95f4a;
  --ok: #9fc27f;
  --shadow: 0 18px 54px rgba(0, 0, 0, .58);
  --app-bg: radial-gradient(1000px 620px at 55% -10%, rgba(224, 138, 76, .12), transparent 62%), #140b08;
  --chrome-bg: linear-gradient(180deg, #24140e, #140b08);
  --nav-bg: #1b0f0a;
  --main-bg: #140b08;
  --rail-bg: #1d100c;
  --card-bg: linear-gradient(180deg, rgba(42, 23, 16, .94), rgba(24, 13, 9, .96));
  --card-flat: #20110b;
  --panel-head-bg: #2a1710;
  --modal-bg: linear-gradient(180deg, #2c1811, #180d09);
  --toast-bg: linear-gradient(180deg, #2c1811, #1b0f0a);
  --input-bg: #180d09;
  --btn-bg: linear-gradient(180deg, #2d1a12, #1a0e0a);
  --accent-bg: linear-gradient(180deg, #f6c67e, #d18e4b);
  --scene-bg: linear-gradient(180deg, #3b251c 0%, #2a1a14 24%, #1d100c 58%, #090504 100%);
  --pier-bg: linear-gradient(165deg, #34231b, #1c110d 58%, #0a0604);
  --post-bg: linear-gradient(180deg, #3c2a20, #120a07);
  --moon-bg: radial-gradient(circle at 38% 35%, #ffdfa6, #d68d4d 48%, rgba(216, 166, 75, .02) 72%);
  --lamp-bg: #ffd39a;
  --water-bg: repeating-linear-gradient(180deg, rgba(224, 138, 76, .06) 0 1px, transparent 1px 14px), linear-gradient(180deg, rgba(224, 138, 76, .13), rgba(10, 5, 4, .82));
  --water-banner: linear-gradient(180deg, #5b3322 0%, #160c08 100%);
  --login-bg: radial-gradient(1100px 640px at 30% 10%, rgba(224, 138, 76, .13), transparent 60%), #140b08;
  --login-right-bg: linear-gradient(180deg, rgba(36, 20, 14, .68), rgba(18, 10, 7, .97));
  --scene-ink: #fbe9d4;
  --scene-ink-dim: rgba(230, 205, 180, .62);
  --chip-bg: rgba(0, 0, 0, .26);
  --hover-bg: rgba(255, 255, 255, .035);
}

/* ── 共用表面覆盖（默认夜色不改动）─────────────────────── */
html[data-theme]:not([data-theme="night"]) body,
html[data-theme]:not([data-theme="night"]) .app { background: var(--app-bg); color: var(--text); }

html[data-theme]:not([data-theme="night"]) .topbar,
html[data-theme]:not([data-theme="night"]) .mobile-nav { background: var(--chrome-bg); }

html[data-theme]:not([data-theme="night"]) .nav { background: var(--nav-bg); }
html[data-theme]:not([data-theme="night"]) .main { background: var(--main-bg); }
html[data-theme]:not([data-theme="night"]) .rail { background: var(--rail-bg); }
html[data-theme]:not([data-theme="night"]) .login { background: var(--login-bg); }
html[data-theme]:not([data-theme="night"]) .login-right { background: var(--login-right-bg); }

html[data-theme]:not([data-theme="night"]) .panel,
html[data-theme]:not([data-theme="night"]) .stat,
html[data-theme]:not([data-theme="night"]) .ach,
html[data-theme]:not([data-theme="night"]) .trophy,
html[data-theme]:not([data-theme="night"]) .rarity-pill,
html[data-theme]:not([data-theme="night"]) .card,
html[data-theme]:not([data-theme="night"]) .species-card,
html[data-theme]:not([data-theme="night"]) .listing,
html[data-theme]:not([data-theme="night"]) .tour-main,
html[data-theme]:not([data-theme="night"]) .cast-dock,
html[data-theme]:not([data-theme="night"]) .bait-select,
html[data-theme]:not([data-theme="night"]) .bite-cue {
  background: var(--card-bg);
  border-color: var(--line);
}

html[data-theme]:not([data-theme="night"]) .tension,
html[data-theme]:not([data-theme="night"]) .catch-bar,
html[data-theme]:not([data-theme="night"]) .slack-bar {
  background: var(--input-bg);
  border-color: var(--line-2);
}
html[data-theme]:not([data-theme="night"]) .shop-item .ico { background: var(--input-bg); border-color: var(--line); }

html[data-theme]:not([data-theme="night"]) .panel-head,
html[data-theme]:not([data-theme="night"]) .basket-bar { background: var(--panel-head-bg); border-color: var(--line); }

html[data-theme]:not([data-theme="night"]) .fish-row { border-bottom-color: var(--line); }
html[data-theme]:not([data-theme="night"]) .boot { background: var(--app-bg); }
html[data-theme]:not([data-theme="night"]) .tour-main { border-color: var(--line); }

html[data-theme]:not([data-theme="night"]) .modal,
html[data-theme]:not([data-theme="night"]) .battle-card,
html[data-theme]:not([data-theme="night"]) .toast {
  background: var(--modal-bg);
  border-color: var(--line-2);
  color: var(--text);
}

html[data-theme]:not([data-theme="night"]) .modal-backdrop { background: rgba(20, 26, 24, .4); }

html[data-theme]:not([data-theme="night"]) input[type=text],
html[data-theme]:not([data-theme="night"]) input[type=email],
html[data-theme]:not([data-theme="night"]) input[type=password],
html[data-theme]:not([data-theme="night"]) input[type=number],
html[data-theme]:not([data-theme="night"]) textarea,
html[data-theme]:not([data-theme="night"]) select,
html[data-theme]:not([data-theme="night"]) .login-tabs { background: var(--input-bg); color: var(--text); border-color: var(--line-2); }

html[data-theme]:not([data-theme="night"]) .btn { background: var(--btn-bg); border-color: var(--line-2); color: var(--text); }
html[data-theme]:not([data-theme="night"]) .btn-primary,
html[data-theme]:not([data-theme="night"]) .btn-cast { background: var(--accent-bg); border-color: var(--brass); color: #1b1207; }
html[data-theme]:not([data-theme="night"]) .btn:hover { border-color: var(--teal); }

html[data-theme]:not([data-theme="night"]) .scene { background: var(--scene-bg); border-color: var(--line); }
html[data-theme]:not([data-theme="night"]) .scene .pier,
html[data-theme]:not([data-theme="night"]) .login-scene .pier { background: var(--pier-bg); }
html[data-theme]:not([data-theme="night"]) .scene .post,
html[data-theme]:not([data-theme="night"]) .login-scene .post { background: var(--post-bg); }
html[data-theme]:not([data-theme="night"]) .scene .moon,
html[data-theme]:not([data-theme="night"]) .login-scene .moon { background: var(--moon-bg); }
html[data-theme]:not([data-theme="night"]) .scene .lamp,
html[data-theme]:not([data-theme="night"]) .login-scene .lamp { background: var(--lamp-bg); }
html[data-theme]:not([data-theme="night"]) .scene .waterline,
html[data-theme]:not([data-theme="night"]) .login-scene .wl { background: var(--water-bg); }
html[data-theme]:not([data-theme="night"]) .scene::before { background: radial-gradient(ellipse at 74% 12%, rgba(216, 166, 75, .12), transparent 30%), radial-gradient(ellipse at 50% 55%, rgba(79, 145, 138, .1), transparent 58%); }
html[data-theme]:not([data-theme="night"]) .scene .fog,
html[data-theme]:not([data-theme="night"]) .login-scene .fog { opacity: .7; }

html[data-theme]:not([data-theme="night"]) .scene-copy h3 { color: var(--scene-ink); text-shadow: 0 2px 14px rgba(0, 0, 0, .18); }
html[data-theme]:not([data-theme="night"]) .scene-copy p { color: var(--scene-ink-dim); }
html[data-theme]:not([data-theme="night"]) .scene-copy .k { color: var(--brass); }

html[data-theme]:not([data-theme="night"]) .water-card { background: var(--card-flat); }
html[data-theme]:not([data-theme="night"]) .water-card .banner { background: var(--water-banner); }

html[data-theme]:not([data-theme="night"]) .hud-item,
html[data-theme]:not([data-theme="night"]) .presence-row,
html[data-theme]:not([data-theme="night"]) .activity-row,
html[data-theme]:not([data-theme="night"]) .chat-msg,
html[data-theme]:not([data-theme="night"]) .chat-msg .who,
html[data-theme]:not([data-theme="night"]) .online-count,
html[data-theme]:not([data-theme="night"]) .cast-dock .next b,
html[data-theme]:not([data-theme="night"]) .bait-select,
html[data-theme]:not([data-theme="night"]) .species-card .nm,
html[data-theme]:not([data-theme="night"]) .fish-row .info b,
html[data-theme]:not([data-theme="night"]) .quest .body .t,
html[data-theme]:not([data-theme="night"]) .table td,
html[data-theme]:not([data-theme="night"]) .catch-desc,
html[data-theme]:not([data-theme="night"]) .battle-hint,
html[data-theme]:not([data-theme="night"]) .battle-sub,
html[data-theme]:not([data-theme="night"]) .bite-cue span,
html[data-theme]:not([data-theme="night"]) .key,
html[data-theme]:not([data-theme="night"]) .quest .body .line,
html[data-theme]:not([data-theme="night"]) .login-copy p,
html[data-theme]:not([data-theme="night"]) .callout,
html[data-theme]:not([data-theme="night"]) .nav-item,
html[data-theme]:not([data-theme="night"]) .nav-item:hover { color: var(--text-dim); }

html[data-theme]:not([data-theme="night"]) .nav-item .ic,
html[data-theme]:not([data-theme="night"]) .nav-group,
html[data-theme]:not([data-theme="night"]) .cast-dock .k,
html[data-theme]:not([data-theme="night"]) .cast-dock .next span,
html[data-theme]:not([data-theme="night"]) .listing .fee,
html[data-theme]:not([data-theme="night"]) .catch-meta .m span,
html[data-theme]:not([data-theme="night"]) .energy-timer { color: var(--faint); }

html[data-theme]:not([data-theme="night"]) .nav-item.active { color: var(--brass-2); }
html[data-theme]:not([data-theme="night"]) .nav-item:hover { background: var(--hover-bg); }

html[data-theme]:not([data-theme="night"]) .chip { border-color: var(--line-2); color: var(--text-dim); background: var(--chip-bg); }
html[data-theme]:not([data-theme="night"]) .check { border-color: var(--line-2); }
html[data-theme]:not([data-theme="night"]) .energy-bar,
html[data-theme]:not([data-theme="night"]) .progress,
html[data-theme]:not([data-theme="night"]) .rarity-pill .bar { background: var(--line); }
html[data-theme]:not([data-theme="night"]) .lvl-ring::after { background: var(--panel); }
html[data-theme]:not([data-theme="night"]) .scene .horizon { background: linear-gradient(90deg, transparent, var(--line-2), transparent); }

html[data-theme]:not([data-theme="night"]) ::-webkit-scrollbar-track { background: var(--bg-2); }
html[data-theme]:not([data-theme="night"]) ::-webkit-scrollbar-thumb { background: var(--line-2); border-color: var(--bg-2); }

/* 主题选择卡片 */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.theme-card {
  display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  color: var(--text); cursor: pointer; transition: border-color .15s, transform .12s;
}
.theme-card:hover { transform: translateY(-2px); border-color: var(--line-2); }
.theme-card.active { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass) inset; }
.theme-card .sw { display: flex; flex-direction: column; gap: 3px; flex: 0 0 34px; }
.theme-card .sw i { display: block; height: 9px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .12); }
.theme-card .sw i:nth-child(2) { height: 7px; }
.theme-card .sw i:nth-child(3) { height: 5px; }
.theme-card .tx b { display: block; font-family: var(--serif); font-size: 15px; font-weight: 500; }
.theme-card .tx span { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.theme-card .tick { margin-left: auto; color: var(--brass); font-size: 14px; opacity: 0; }
.theme-card.active .tick { opacity: 1; }

/* 当前鱼饵始终用金色强调，避免被浅色主题的通用文字色覆盖 */
html[data-theme] .bait-select {
  background: #12211f;
  border-color: var(--brass);
  color: var(--brass-2);
}