/* ==========================================================================
   后台面板风格（6 套）—— 独立文件，编辑页 / 账号管理 / 登录页都能引用
   手机贴了防窥膜 / 钢化膜后暗色面板会更暗，所以提供明亮风格。
   原理：各页面的界面色已改成 CSS 变量，这里只需换变量值。
========================================================================== */
/* ===================== 后台面板风格（6 套） =====================
   手机贴了防窥膜 / 钢化膜后暗色面板会更暗，所以提供明亮风格。
   实现：上面所有界面色都改成了 CSS 变量，这里只需换变量值。
   切换入口在设置面板顶部「🎨 面板风格」，存在 localStorage。 */
:root{ --bg:#0b0b10; --fg:#e8e8f0;
  --panel1rgb:26,10,20; --panel2rgb:17,8,16; --cardBgrgb:28,12,22; --grpBgrgb:24,12,20;
  --panel1:#1a0a14; --panel2:#110810; --panelLine:#3a1a2c;
  --grpBg:#180c14; --grpLine:#36203a; --gt:#c98fa8;
  --label:#bda8b4; --muted:#8c7c88; --tip:#7c6a74;
  --inpBg:#120810; --inpLine:#3e2638; --inpFg:#eaeaf5;
  --btnBg:#2a1a26; --btnFg:#dcdcf0; --btnHover:#3a2434;
  --accent:#ff6096; --accent2:#ff87b0; --accent3:#d4205a;
  --scroll:#4a2a3e; --cardBg:#1c0c16; --cardLine:#6a2a48;
  --linkFg:#c8a8b6; --linkHover:#ffd0de; --outFg:#ff9ab0; --foldFg:#ffb3d1; }
/* ① 暗夜粉（默认） */
html[data-theme="dark"]{
  --grpBgrgb:24,12,20;
  --panel1rgb:26,10,20; --panel2rgb:17,8,16; --cardBgrgb:28,12,22; --bg:#0b0b10; --fg:#e8e8f0;
  --panel1:#1a0a14; --panel2:#110810; --panelLine:#3a1a2c;
  --grpBg:#180c14; --grpLine:#36203a; --gt:#c98fa8;
  --label:#bda8b4; --muted:#8c7c88; --tip:#7c6a74;
  --inpBg:#120810; --inpLine:#3e2638; --inpFg:#eaeaf5;
  --btnBg:#2a1a26; --btnFg:#dcdcf0; --btnHover:#3a2434;
  --accent:#ff6096; --accent2:#ff87b0; --accent3:#d4205a;
  --scroll:#4a2a3e; --cardBg:#1c0c16; --cardLine:#6a2a48;
  --linkFg:#c8a8b6; --linkHover:#ffd0de; --outFg:#ff9ab0; --foldFg:#ffb3d1; }
/* ② 明亮白（贴膜 / 户外首选） */
html[data-theme="light"]{
  --grpBgrgb:255,255,255;
  --panel1rgb:255,255,255; --panel2rgb:247,245,250; --cardBgrgb:255,255,255; --bg:#f4f2f7; --fg:#1e1822;
  --panel1:#ffffff; --panel2:#f7f5fa; --panelLine:#ded6e4;
  --grpBg:#ffffff; --grpLine:#e2dae8; --gt:#a03060;
  --label:#4a404f; --muted:#6d6373; --tip:#6d6373;
  --inpBg:#ffffff; --inpLine:#cfc6d6; --inpFg:#17121b;
  --btnBg:#efe9f4; --btnFg:#2a2230; --btnHover:#e2daea;
  --accent:#d4205a; --accent2:#ff5c8a; --accent3:#b81a4c;
  --scroll:#c9bfd2; --cardBg:#ffffff; --cardLine:#d8cee0; 
  --linkFg:#54465a; --linkHover:#8a2a4a; --outFg:#b81a4c; --foldFg:#5c4c60;}
/* ③ 护眼米黄 */
html[data-theme="cream"]{
  --grpBgrgb:255,253,246;
  --panel1rgb:255,253,246; --panel2rgb:248,242,228; --cardBgrgb:255,253,246; --bg:#f6f0e2; --fg:#2b2418;
  --panel1:#fffdf6; --panel2:#f8f2e4; --panelLine:#e2d8c0;
  --grpBg:#fffdf6; --grpLine:#e6ddc6; --gt:#8a5a10;
  --label:#4d4334; --muted:#6f6552; --tip:#6f6552;
  --inpBg:#fffdf6; --inpLine:#dcd0b6; --inpFg:#241e14;
  --btnBg:#f2ebda; --btnFg:#2f281c; --btnHover:#e6dcc6;
  --accent:#c8721a; --accent2:#e89a3c; --accent3:#a85a10;
  --scroll:#cfc4aa; --cardBg:#fffdf6; --cardLine:#e0d6bd; 
  --linkFg:#5c5040; --linkHover:#8a5a10; --outFg:#a85a10; --foldFg:#6b5c48;}
/* ④ 深邃蓝 */
html[data-theme="ocean"]{
  --grpBgrgb:16,28,48;
  --panel1rgb:13,22,38; --panel2rgb:10,17,29; --cardBgrgb:16,28,48; --bg:#070d18; --fg:#dbe6f5;
  --panel1:#0d1626; --panel2:#0a111d; --panelLine:#1e3350;
  --grpBg:#101c30; --grpLine:#1e3350; --gt:#6fa8dc;
  --label:#a8bcd6; --muted:#7b8ea8; --tip:#7b8ea8;
  --inpBg:#0a1424; --inpLine:#25406a; --inpFg:#e6eefb;
  --btnBg:#16273f; --btnFg:#cfdcf0; --btnHover:#1f3455;
  --accent:#3fa9f5; --accent2:#6fc2ff; --accent3:#1a7fd0;
  --scroll:#2a4266; --cardBg:#101c30; --cardLine:#2a4a72; }
/* ⑤ 清新薄荷 */
html[data-theme="mint"]{
  --grpBgrgb:255,255,255;
  --panel1rgb:255,255,255; --panel2rgb:242,251,246; --cardBgrgb:255,255,255; --bg:#eef7f2; --fg:#16261f;
  --panel1:#ffffff; --panel2:#f2fbf6; --panelLine:#cfe6da;
  --grpBg:#ffffff; --grpLine:#d5ebe0; --gt:#167a52;
  --label:#3c4c45; --muted:#647a70; --tip:#647a70;
  --inpBg:#ffffff; --inpLine:#c4ded2; --inpFg:#12211a;
  --btnBg:#e6f4ee; --btnFg:#1c2e26; --btnHover:#d6ece2;
  --accent:#12a06a; --accent2:#3fc48c; --accent3:#0b7c50;
  --scroll:#b6d6c8; --cardBg:#ffffff; --cardLine:#cbe4d8; 
  --linkFg:#3c4c45; --linkHover:#0b7c50; --outFg:#0b7c50; --foldFg:#3f5a4c;}
/* ⑥ 高对比（暗环境 / 贴膜最友好） */
html[data-theme="hi"]{
  --grpBgrgb:13,13,13;
  --panel1rgb:0,0,0; --panel2rgb:10,10,10; --cardBgrgb:0,0,0; --bg:#000000; --fg:#ffffff;
  --panel1:#000000; --panel2:#0a0a0a; --panelLine:#ffffff;
  --grpBg:#0d0d0d; --grpLine:#ffffff; --gt:#ffe14a;
  --label:#ffffff; --muted:#e0e0e0; --tip:#e0e0e0;
  --inpBg:#000000; --inpLine:#ffffff; --inpFg:#ffffff;
  --btnBg:#1c1c1c; --btnFg:#ffffff; --btnHover:#333333;
  --accent:#ffe14a; --accent2:#ffd54a; --accent3:#e0a800;
  --scroll:#888888; --cardBg:#000000; --cardLine:#ffffff; }
/* 高对比下把字号和边框再推一档，暗环境更清楚 */
html[data-theme="hi"] label,
html[data-theme="hi"] .chk{font-size:13px;color:#fff}
html[data-theme="hi"] .grp{border-width:2px}
html[data-theme="hi"] .tip,
html[data-theme="hi"] .mini{color:#f0f0f0}
/* 明亮风格下，舞台（画布区）背景也要跟着变，否则画布外一圈是黑的 */
html[data-theme="light"] .stage,html[data-theme="cream"] .stage,
html[data-theme="mint"] .stage{background:linear-gradient(160deg,#ece8f2,#dcd6e6)}
html[data-theme="light"] .bar,html[data-theme="cream"] .bar,
html[data-theme="mint"] .bar{color:#5d5464}
html[data-theme="ocean"] .stage{background:radial-gradient(circle at 50% 40%,#0e1c30,#050a12 70%)}
/* 明亮风格下弹层与提示条 */
html[data-theme="light"] .elemedit,html[data-theme="cream"] .elemedit,
html[data-theme="mint"] .elemedit{background:var(--cardBg);border-color:var(--cardLine);
  color:var(--fg);box-shadow:0 14px 44px rgba(0,0,0,.28)}
html[data-theme="light"] .float-toast,html[data-theme="cream"] .float-toast,
html[data-theme="mint"] .float-toast{background:var(--cardBg);border-color:var(--cardLine);color:var(--fg)}
/* 风格切换按钮条 */
.themesel{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.themesel button{width:auto;flex:1 1 auto;min-width:74px;padding:7px 6px;font-size:12px;
  border:1px solid var(--inpLine);background:var(--btnBg);color:var(--btnFg);border-radius:9px}
.themesel button.on{border-color:var(--accent);color:#fff;font-weight:700;
  background:linear-gradient(135deg,var(--accent2),var(--accent3))}

/* 明亮风格下，账号管理页 / 登录页的卡片、表格也要跟着变 */
html[data-theme="light"] .card,html[data-theme="cream"] .card,
html[data-theme="mint"] .card{background:var(--grpBg);border-color:var(--grpLine)}
html[data-theme="light"] .topbar,html[data-theme="cream"] .topbar,
html[data-theme="mint"] .topbar{background:var(--panel1);border-bottom-color:var(--panelLine)}
html[data-theme="light"] .login-body,html[data-theme="cream"] .login-body,
html[data-theme="mint"] .login-body{background:linear-gradient(160deg,#ece8f2,#dcd6e6)}
html[data-theme="ocean"] .topbar{background:var(--panel1)}
html[data-theme="hi"] .card,html[data-theme="hi"] .topbar{background:#000;border-color:#fff}

/* 高对比（亮黄 accent）下，渐变按钮上的白字几乎看不清，改成黑字 */
html[data-theme="hi"] button.pri,
html[data-theme="hi"] .zoomic.on,
html[data-theme="hi"] #themesel button.on,
html[data-theme="hi"] .edtop .acts button.on{color:#000 !important}

/* 深邃蓝的渐变（#6fc2ff→#1a7fd0，均值约 #44a1e8）偏亮，
   上面写死 color:#fff 的按钮只有 2.81:1，低于 3.0 可读线 → 改成深色字 */
html[data-theme="ocean"] button.pri,
html[data-theme="ocean"] .zoomic.on,
html[data-theme="ocean"] #themesel button.on,
html[data-theme="ocean"] .edtop .acts button.on{color:#04203a !important}