/* ══════════════════════════════════════════════════════════════
   themes.css — colour themes (dark + light) and a more modern look.
   Generated palettes; selected with <html data-theme="…" data-mode="dark|light">
   (js/theme.js). The default theme (Midnight) keeps the original colours.
   ══════════════════════════════════════════════════════════════ */

html[data-theme="ocean"]:not([data-page="ref"]) {
  --bg-deep: #0a1622;
  --bg-panel: #10202f;
  --bg-panel2: #182836;
  --bg-input: #21303e;
  --bg-hover: #283644;
  --bg-active: #1b4664;
  --border: #222d38;
  --border-l: #364450;
  --text: #e4f0fa;
  --muted: #828e99;
  --faint: #505c67;
  --accent: #38a8ee;
  --accent-d: #308fca;
  --bg-surface: #152433;
  --text-strong: #ffffff;
  --shadow: 0 6px 28px rgba(0,0,0,.45);
}
html[data-theme="ocean"][data-page="ref"] { --bg:#0a1622; --surface:#10202f; --surface2:#182836; --border:#364450; --text:#e4f0fa; --muted:#9eaab5; --tag-bg:#182836; --accent:#6abef2; }
html[data-theme="forest"]:not([data-page="ref"]) {
  --bg-deep: #0c1610;
  --bg-panel: #122019;
  --bg-panel2: #1a2821;
  --bg-input: #233029;
  --bg-hover: #2a3630;
  --bg-active: #1c4b33;
  --border: #242d28;
  --border-l: #38443e;
  --text: #e3f2e8;
  --muted: #828f87;
  --faint: #515c55;
  --accent: #34b877;
  --accent-d: #2c9c65;
  --bg-surface: #17241e;
  --text-strong: #ffffff;
  --shadow: 0 6px 28px rgba(0,0,0,.45);
}
html[data-theme="forest"][data-page="ref"] { --bg:#0c1610; --surface:#122019; --surface2:#1a2821; --border:#38443e; --text:#e3f2e8; --muted:#9eaca3; --tag-bg:#1a2821; --accent:#67ca99; }
html[data-theme="plum"]:not([data-page="ref"]) {
  --bg-deep: #130d1c;
  --bg-panel: #1c1428;
  --bg-panel2: #241c30;
  --bg-input: #2c2437;
  --bg-hover: #332c3e;
  --bg-active: #432f60;
  --border: #2b2533;
  --border-l: #403a4a;
  --text: #eee6fa;
  --muted: #8b8496;
  --faint: #595263;
  --accent: #a875f0;
  --accent-d: #8f63cc;
  --bg-surface: #21192c;
  --text-strong: #ffffff;
  --shadow: 0 6px 28px rgba(0,0,0,.45);
}
html[data-theme="plum"][data-page="ref"] { --bg:#130d1c; --surface:#1c1428; --surface2:#241c30; --border:#403a4a; --text:#eee6fa; --muted:#a8a1b3; --tag-bg:#241c30; --accent:#be98f4; }
html[data-theme="ember"]:not([data-page="ref"]) {
  --bg-deep: #1a0f0d;
  --bg-panel: #251613;
  --bg-panel2: #2d1e1b;
  --bg-input: #342624;
  --bg-hover: #3b2d2b;
  --bg-active: #5c341e;
  --border: #312725;
  --border-l: #483b39;
  --text: #f6e9e2;
  --muted: #938782;
  --faint: #605551;
  --accent: #e8813a;
  --accent-d: #c56e31;
  --bg-surface: #291b18;
  --text-strong: #ffffff;
  --shadow: 0 6px 28px rgba(0,0,0,.45);
}
html[data-theme="ember"][data-page="ref"] { --bg:#1a0f0d; --surface:#251613; --surface2:#2d1e1b; --border:#483b39; --text:#f6e9e2; --muted:#b0a39e; --tag-bg:#2d1e1b; --accent:#eea06b; }
html[data-theme="rose"]:not([data-page="ref"]) {
  --bg-deep: #180d12;
  --bg-panel: #22131a;
  --bg-panel2: #2a1b22;
  --bg-input: #31242a;
  --bg-hover: #382b31;
  --bg-active: #58263e;
  --border: #2f252a;
  --border-l: #45393f;
  --text: #f6e6ee;
  --muted: #92848b;
  --faint: #5f5258;
  --accent: #e2569a;
  --accent-d: #c04983;
  --bg-surface: #26181f;
  --text-strong: #ffffff;
  --shadow: 0 6px 28px rgba(0,0,0,.45);
}
html[data-theme="rose"][data-page="ref"] { --bg:#180d12; --surface:#22131a; --surface2:#2a1b22; --border:#45393f; --text:#f6e6ee; --muted:#afa1a8; --tag-bg:#2a1b22; --accent:#e980b3; }
html[data-theme="graphite"]:not([data-page="ref"]) {
  --bg-deep: #101010;
  --bg-panel: #1a1a1a;
  --bg-panel2: #222222;
  --bg-input: #2a2a2a;
  --bg-hover: #313131;
  --bg-active: #353e56;
  --border: #282828;
  --border-l: #3f3f3f;
  --text: #ececec;
  --muted: #898989;
  --faint: #565656;
  --accent: #7c9cf0;
  --accent-d: #6985cc;
  --bg-surface: #1f1f1f;
  --text-strong: #ffffff;
  --shadow: 0 6px 28px rgba(0,0,0,.45);
}
html[data-theme="graphite"][data-page="ref"] { --bg:#101010; --surface:#1a1a1a; --surface2:#222222; --border:#3f3f3f; --text:#ececec; --muted:#a6a6a6; --tag-bg:#222222; --accent:#9db5f4; }
html[data-theme="paper"]:not([data-page="ref"]) {
  --bg-deep: #f1ede3;
  --bg-panel: #faf7f0;
  --bg-panel2: #f2f0e9;
  --bg-input: #fefdfa;
  --bg-hover: #ebe8e2;
  --bg-active: #d8dfef;
  --border: #e1ded8;
  --border-l: #d0cdc7;
  --text: #1f2933;
  --muted: #72777b;
  --faint: #9ea0a1;
  --accent: #2563eb;
  --accent-d: #1f54c8;
  --bg-surface: #fefdfb;
  --text-strong: #13191f;
  --shadow: 0 6px 24px rgba(40,50,70,.16);
}
html[data-theme="paper"][data-page="ref"] { --bg:#161208; --surface:#0b0801; --surface2:#110f08; --border:#35322c; --text:#cfd9e3; --muted:#949a9f; --tag-bg:#110f08; --accent:#65a3ff; }
html[data-theme="paper"]:not([data-page="ref"]) .editor { background:#030200; color:#cfd9e3; --text:#cfd9e3; --muted:#858a8e; --border-l:#35322c; --border:#24211b; --accent:#65a3ff; }
html[data-theme="snow"]:not([data-page="ref"]) {
  --bg-deep: #eaeff6;
  --bg-panel: #f6f8fb;
  --bg-panel2: #eff1f3;
  --bg-input: #fcfdfe;
  --bg-hover: #e7e9ec;
  --bg-active: #dbdcf7;
  --border: #dddfe2;
  --border-l: #ccced0;
  --text: #1a2230;
  --muted: #6e737d;
  --faint: #9a9ea6;
  --accent: #4f46e5;
  --accent-d: #433cc3;
  --bg-surface: #fdfdfe;
  --text-strong: #10141d;
  --shadow: 0 6px 24px rgba(40,50,70,.16);
}
html[data-theme="snow"][data-page="ref"] { --bg:#0c1118; --surface:#05070a; --surface2:#0d0f11; --border:#303234; --text:#d6deec; --muted:#989ea9; --tag-bg:#0d0f11; --accent:#a79eff; }
html[data-theme="snow"]:not([data-page="ref"]) .editor { background:#020203; color:#d6deec; --text:#d6deec; --muted:#888d97; --border-l:#303234; --border:#1e2023; --accent:#a79eff; }
html[data-theme="mint"]:not([data-page="ref"]) {
  --bg-deep: #e4f1e9;
  --bg-panel: #f2f9f4;
  --bg-panel2: #ebf2ed;
  --bg-input: #fbfdfc;
  --bg-hover: #e3eae5;
  --bg-active: #cee7dc;
  --border: #dae0dc;
  --border-l: #c9cfcb;
  --text: #14291d;
  --muted: #68786f;
  --faint: #95a29a;
  --accent: #0f8a5f;
  --accent-d: #0d7551;
  --bg-surface: #fcfefc;
  --text-strong: #0c1911;
  --shadow: 0 6px 24px rgba(40,50,70,.16);
}
html[data-theme="mint"][data-page="ref"] { --bg:#08150d; --surface:#030a05; --surface2:#0a110c; --border:#2d332f; --text:#cce1d5; --muted:#90a097; --tag-bg:#0a110c; --accent:#35b085; }
html[data-theme="mint"]:not([data-page="ref"]) .editor { background:#000200; color:#cce1d5; --text:#cce1d5; --muted:#7f8f86; --border-l:#2d332f; --border:#1c221e; --accent:#35b085; }
html[data-theme="sky"]:not([data-page="ref"]) {
  --bg-deep: #e2eef9;
  --bg-panel: #f1f7fc;
  --bg-panel2: #eaf0f4;
  --bg-input: #fbfdfe;
  --bg-hover: #e3e8ed;
  --bg-active: #cbe0ed;
  --border: #d9dee3;
  --border-l: #c8cdd1;
  --text: #10263a;
  --muted: #667584;
  --faint: #929fab;
  --accent: #0369a1;
  --accent-d: #035989;
  --bg-surface: #fcfdfe;
  --text-strong: #0a1723;
  --shadow: 0 6px 24px rgba(40,50,70,.16);
}
html[data-theme="sky"][data-page="ref"] { --bg:#091520; --surface:#040a0f; --surface2:#0b1115; --border:#2f3438; --text:#c9dff3; --muted:#8e9fae; --tag-bg:#0b1115; --accent:#53b9f1; }
html[data-theme="sky"]:not([data-page="ref"]) .editor { background:#010203; color:#c9dff3; --text:#c9dff3; --muted:#7f8e9d; --border-l:#2f3438; --border:#1d2227; --accent:#53b9f1; }
html[data-theme="lemon"]:not([data-page="ref"]) {
  --bg-deep: #f5efcf;
  --bg-panel: #fbf8e6;
  --bg-panel2: #f3f1df;
  --bg-input: #fefdf8;
  --bg-hover: #ece9d8;
  --bg-active: #f0dec3;
  --border: #e2dfcf;
  --border-l: #d0cebf;
  --text: #2f2a0d;
  --muted: #7d785f;
  --faint: #a5a18b;
  --accent: #b45309;
  --accent-d: #994708;
  --bg-surface: #fefdf9;
  --text-strong: #1c1908;
  --shadow: 0 6px 24px rgba(40,50,70,.16);
}
html[data-theme="lemon"][data-page="ref"] { --bg:#181200; --surface:#0b0800; --surface2:#121000; --border:#343223; --text:#dcd7ba; --muted:#9d997f; --tag-bg:#121000; --accent:#ee8d43; }
html[data-theme="lemon"]:not([data-page="ref"]) .editor { background:#030200; color:#dcd7ba; --text:#dcd7ba; --muted:#8d886f; --border-l:#343223; --border:#242111; --accent:#ee8d43; }
html[data-theme="lavender"]:not([data-page="ref"]) {
  --bg-deep: #ece6f8;
  --bg-panel: #f7f3fd;
  --bg-panel2: #f0ecf5;
  --bg-input: #fdfbfe;
  --bg-hover: #e8e4ee;
  --bg-active: #e3d5fa;
  --border: #dedbe4;
  --border-l: #cdcad2;
  --text: #241a3f;
  --muted: #746c87;
  --faint: #9e98ad;
  --accent: #7c3aed;
  --accent-d: #6931c9;
  --bg-surface: #fdfcfe;
  --text-strong: #161026;
  --shadow: 0 6px 24px rgba(40,50,70,.16);
}
html[data-theme="lavender"][data-page="ref"] { --bg:#1a1426; --surface:#0d0913; --surface2:#141019; --border:#36333b; --text:#e5dbff; --muted:#a49cb9; --tag-bg:#141019; --accent:#d18fff; }
html[data-theme="lavender"]:not([data-page="ref"]) .editor { background:#030204; color:#e5dbff; --text:#e5dbff; --muted:#948ca7; --border-l:#36333b; --border:#24212a; --accent:#d18fff; }
html[data-theme="slate"]:not([data-page="ref"]) {
  --bg-deep: #11151c;
  --bg-panel: #1a212c;
  --bg-panel2: #222933;
  --bg-input: #2a313b;
  --bg-hover: #313741;
  --bg-active: #394658;
  --border: #292c33;
  --border-l: #3f454e;
  --text: #e4e9f0;
  --muted: #858a91;
  --faint: #555960;
  --accent: #8aa4c8;
  --accent-d: #758baa;
  --bg-surface: #1f2530;
  --text-strong: #ffffff;
  --shadow: 0 6px 28px rgba(0,0,0,.45);
}
html[data-theme="slate"][data-page="ref"] { --bg:#11151c; --surface:#1a212c; --surface2:#222933; --border:#3f454e; --text:#e4e9f0; --muted:#a0a5ac; --tag-bg:#222933; --accent:#a7bbd6; }
html[data-theme="crimson"]:not([data-page="ref"]) {
  --bg-deep: #190c0e;
  --bg-panel: #241316;
  --bg-panel2: #2c1b1e;
  --bg-input: #332426;
  --bg-hover: #3a2b2d;
  --bg-active: #5a2225;
  --border: #302426;
  --border-l: #47393b;
  --text: #f7e6e8;
  --muted: #938486;
  --faint: #605254;
  --accent: #e5484d;
  --accent-d: #c33d41;
  --bg-surface: #28181b;
  --text-strong: #ffffff;
  --shadow: 0 6px 28px rgba(0,0,0,.45);
}
html[data-theme="crimson"][data-page="ref"] { --bg:#190c0e; --surface:#241316; --surface2:#2c1b1e; --border:#47393b; --text:#f7e6e8; --muted:#b0a0a2; --tag-bg:#2c1b1e; --accent:#ec767a; }
html[data-theme="teal"]:not([data-page="ref"]) {
  --bg-deep: #081716;
  --bg-panel: #0f2422;
  --bg-panel2: #172c2a;
  --bg-input: #203331;
  --bg-hover: #273a38;
  --bg-active: #18514b;
  --border: #212e2d;
  --border-l: #354745;
  --text: #e0f3f0;
  --muted: #7f908e;
  --faint: #4d5d5c;
  --accent: #2ec4b6;
  --accent-d: #27a79b;
  --bg-surface: #142826;
  --text-strong: #ffffff;
  --shadow: 0 6px 28px rgba(0,0,0,.45);
}
html[data-theme="teal"][data-page="ref"] { --bg:#081716; --surface:#0f2422; --surface2:#172c2a; --border:#354745; --text:#e0f3f0; --muted:#9badaa; --tag-bg:#172c2a; --accent:#62d3c8; }
html[data-theme="gold"]:not([data-page="ref"]) {
  --bg-deep: #17130a;
  --bg-panel: #221c0f;
  --bg-panel2: #2a2417;
  --bg-input: #312c20;
  --bg-hover: #383327;
  --bg-active: #59471b;
  --border: #2e2b22;
  --border-l: #454035;
  --text: #f6efdc;
  --muted: #928c7e;
  --faint: #5e594d;
  --accent: #e5b53a;
  --accent-d: #c39a31;
  --bg-surface: #262114;
  --text-strong: #ffffff;
  --shadow: 0 6px 28px rgba(0,0,0,.45);
}
html[data-theme="gold"][data-page="ref"] { --bg:#17130a; --surface:#221c0f; --surface2:#2a2417; --border:#454035; --text:#f6efdc; --muted:#afa999; --tag-bg:#2a2417; --accent:#ecc86b; }
html[data-theme="indigo"]:not([data-page="ref"]) {
  --bg-deep: #0c0e24;
  --bg-panel: #141833;
  --bg-panel2: #1c203a;
  --bg-input: #242841;
  --bg-hover: #2c2f47;
  --bg-active: #31386c;
  --border: #24263a;
  --border-l: #3a3d54;
  --text: #e6e9ff;
  --muted: #84869c;
  --faint: #52546a;
  --accent: #7b8cff;
  --accent-d: #6977d9;
  --bg-surface: #191d37;
  --text-strong: #ffffff;
  --shadow: 0 6px 28px rgba(0,0,0,.45);
}
html[data-theme="indigo"][data-page="ref"] { --bg:#0c0e24; --surface:#141833; --surface2:#1c203a; --border:#3a3d54; --text:#e6e9ff; --muted:#a0a3b9; --tag-bg:#1c203a; --accent:#9ca9ff; }
html[data-theme="sunset"]:not([data-page="ref"]) {
  --bg-deep: #1a0e14;
  --bg-panel: #26141d;
  --bg-panel2: #2e1c25;
  --bg-input: #35242d;
  --bg-hover: #3c2c34;
  --bg-active: #63312e;
  --border: #31262c;
  --border-l: #493a41;
  --text: #fbe9ee;
  --muted: #96868c;
  --faint: #62545a;
  --accent: #ff7a59;
  --accent-d: #d9684c;
  --bg-surface: #2a1922;
  --text-strong: #ffffff;
  --shadow: 0 6px 28px rgba(0,0,0,.45);
}
html[data-theme="sunset"][data-page="ref"] { --bg:#1a0e14; --surface:#26141d; --surface2:#2e1c25; --border:#493a41; --text:#fbe9ee; --muted:#b3a3a8; --tag-bg:#2e1c25; --accent:#ff9b82; }
html[data-theme="olive"]:not([data-page="ref"]) {
  --bg-deep: #12140a;
  --bg-panel: #1b1f10;
  --bg-panel2: #232718;
  --bg-input: #2b2f21;
  --bg-hover: #323528;
  --bg-active: #414e1b;
  --border: #2a2c22;
  --border-l: #3f4336;
  --text: #eef2dc;
  --muted: #8b8e7e;
  --faint: #585b4d;
  --accent: #a4c639;
  --accent-d: #8ba830;
  --bg-surface: #202315;
  --text-strong: #ffffff;
  --shadow: 0 6px 28px rgba(0,0,0,.45);
}
html[data-theme="olive"][data-page="ref"] { --bg:#12140a; --surface:#1b1f10; --surface2:#232718; --border:#3f4336; --text:#eef2dc; --muted:#a8ab99; --tag-bg:#232718; --accent:#bbd46a; }
html[data-theme="coffee"]:not([data-page="ref"]) {
  --bg-deep: #15100c;
  --bg-panel: #201914;
  --bg-panel2: #28211c;
  --bg-input: #302924;
  --bg-hover: #36302c;
  --bg-active: #4f3d2c;
  --border: #2c2824;
  --border-l: #443e3a;
  --text: #f3e9df;
  --muted: #8f8780;
  --faint: #5c5550;
  --accent: #c99a6b;
  --accent-d: #ab835b;
  --bg-surface: #241e19;
  --text-strong: #ffffff;
  --shadow: 0 6px 28px rgba(0,0,0,.45);
}
html[data-theme="coffee"][data-page="ref"] { --bg:#15100c; --surface:#201914; --surface2:#28211c; --border:#443e3a; --text:#f3e9df; --muted:#aca49b; --tag-bg:#28211c; --accent:#d6b390; }
html[data-theme="cyber"]:not([data-page="ref"]) {
  --bg-deep: #070b12;
  --bg-panel: #0d1420;
  --bg-panel2: #151c28;
  --bg-input: #1e2430;
  --bg-hover: #252c36;
  --bg-active: #094f5e;
  --border: #20232a;
  --border-l: #343a44;
  --text: #e0f7ff;
  --muted: #7e8d94;
  --faint: #4c575e;
  --accent: #00e5ff;
  --accent-d: #00c3d9;
  --bg-surface: #121924;
  --text-strong: #ffffff;
  --shadow: 0 6px 28px rgba(0,0,0,.45);
}
html[data-theme="cyber"][data-page="ref"] { --bg:#070b12; --surface:#0d1420; --surface2:#151c28; --border:#343a44; --text:#e0f7ff; --muted:#9babb3; --tag-bg:#151c28; --accent:#40ecff; }
html[data-theme="amoled"]:not([data-page="ref"]) {
  --bg-deep: #000000;
  --bg-panel: #0c0c0c;
  --bg-panel2: #151515;
  --bg-input: #1d1d1d;
  --bg-hover: #242424;
  --bg-active: #1f304e;
  --border: #1a1a1a;
  --border-l: #333333;
  --text: #eeeeee;
  --muted: #838383;
  --faint: #4c4c4c;
  --accent: #4f8ef7;
  --accent-d: #4379d2;
  --bg-surface: #111111;
  --text-strong: #ffffff;
  --shadow: 0 6px 28px rgba(0,0,0,.45);
}
html[data-theme="amoled"][data-page="ref"] { --bg:#000000; --surface:#0c0c0c; --surface2:#151515; --border:#333333; --text:#eeeeee; --muted:#a2a2a2; --tag-bg:#151515; --accent:#7baaf9; }
html[data-theme="peach"]:not([data-page="ref"]) {
  --bg-deep: #fbeadf;
  --bg-panel: #fff5ee;
  --bg-panel2: #f7eee7;
  --bg-input: #fffcfa;
  --bg-hover: #f0e6e0;
  --bg-active: #faded2;
  --border: #e6dcd6;
  --border-l: #d4cbc6;
  --text: #3a2418;
  --muted: #857369;
  --faint: #ac9d94;
  --accent: #e2683c;
  --accent-d: #c05833;
  --bg-surface: #fffcfb;
  --text-strong: #23160e;
  --shadow: 0 6px 24px rgba(40,50,70,.16);
}
html[data-theme="peach"][data-page="ref"] { --bg:#200f04; --surface:#110700; --surface2:#170e07; --border:#3a312c; --text:#e9d3c7; --muted:#a8968b; --tag-bg:#170e07; --accent:#e3693d; }
html[data-theme="peach"]:not([data-page="ref"]) .editor { background:#050201; color:#e9d3c7; --text:#e9d3c7; --muted:#98867c; --border-l:#3a312c; --border:#2a201a; --accent:#e3693d; }
html[data-theme="sand"]:not([data-page="ref"]) {
  --bg-deep: #efe6d6;
  --bg-panel: #f8f2e6;
  --bg-panel2: #f1ebdf;
  --bg-input: #fdfbf8;
  --bg-hover: #e9e3d8;
  --bg-active: #eadcc9;
  --border: #dfdacf;
  --border-l: #cec9bf;
  --text: #2f2718;
  --muted: #7b7466;
  --faint: #a49d8f;
  --accent: #a1662f;
  --accent-d: #895728;
  --bg-surface: #fdfcf9;
  --text-strong: #1c170e;
  --shadow: 0 6px 24px rgba(40,50,70,.16);
}
html[data-theme="sand"][data-page="ref"] { --bg:#201707; --surface:#120c00; --surface2:#191307; --border:#3a352b; --text:#dfd7c8; --muted:#a19a8c; --tag-bg:#191307; --accent:#c38851; }
html[data-theme="sand"]:not([data-page="ref"]) .editor { background:#040300; color:#dfd7c8; --text:#dfd7c8; --muted:#918a7c; --border-l:#3a352b; --border:#292419; --accent:#c38851; }
html[data-theme="rosewater"]:not([data-page="ref"]) {
  --bg-deep: #f8e4ec;
  --bg-panel: #fdf1f5;
  --bg-panel2: #f5eaee;
  --bg-input: #fefbfc;
  --bg-hover: #eee3e6;
  --bg-active: #f7d3df;
  --border: #e4d9dc;
  --border-l: #d2c8cb;
  --text: #3b1826;
  --muted: #856a75;
  --faint: #ac969e;
  --accent: #d6336c;
  --accent-d: #b62b5c;
  --bg-surface: #fefcfc;
  --text-strong: #230e17;
  --shadow: 0 6px 24px rgba(40,50,70,.16);
}
html[data-theme="rosewater"][data-page="ref"] { --bg:#251119; --surface:#14080c; --surface2:#1b1014; --border:#3c3235; --text:#f9d6e4; --muted:#b498a3; --tag-bg:#1b1014; --accent:#ff7eb7; }
html[data-theme="rosewater"]:not([data-page="ref"]) .editor { background:#040202; color:#f9d6e4; --text:#f9d6e4; --muted:#a38893; --border-l:#3c3235; --border:#2c2124; --accent:#ff7eb7; }
html[data-theme="aqua"]:not([data-page="ref"]) {
  --bg-deep: #dcf1f1;
  --bg-panel: #eefafa;
  --bg-panel2: #e7f2f2;
  --bg-input: #fafefe;
  --bg-hover: #e0ebeb;
  --bg-active: #cae9ea;
  --border: #d6e1e1;
  --border-l: #c6d0d0;
  --text: #0f2b2d;
  --muted: #647a7b;
  --faint: #90a3a4;
  --accent: #0e8f96;
  --accent-d: #0c7a80;
  --bg-surface: #fbfefe;
  --text-strong: #091a1b;
  --shadow: 0 6px 24px rgba(40,50,70,.16);
}
html[data-theme="aqua"][data-page="ref"] { --bg:#021717; --surface:#000a0a; --surface2:#071212; --border:#293333; --text:#c4e0e2; --muted:#89a0a1; --tag-bg:#071212; --accent:#25a6ad; }
html[data-theme="aqua"]:not([data-page="ref"]) .editor { background:#000202; color:#c4e0e2; --text:#c4e0e2; --muted:#788e8f; --border-l:#293333; --border:#182323; --accent:#25a6ad; }
html[data-theme="sage"]:not([data-page="ref"]) {
  --bg-deep: #e3ebdd;
  --bg-panel: #f3f7ef;
  --bg-panel2: #ecf0e8;
  --bg-input: #fbfdfa;
  --bg-hover: #e4e8e1;
  --bg-active: #dbe6d2;
  --border: #dbded7;
  --border-l: #cacdc6;
  --text: #1f2d1c;
  --muted: #707a6c;
  --faint: #9aa296;
  --accent: #5a8f3c;
  --accent-d: #4c7a33;
  --bg-surface: #fcfdfb;
  --text-strong: #131b11;
  --shadow: 0 6px 24px rgba(40,50,70,.16);
}
html[data-theme="sage"][data-page="ref"] { --bg:#11190b; --surface:#070b03; --surface2:#0e120a; --border:#31342d; --text:#ccdac9; --muted:#919c8d; --tag-bg:#0e120a; --accent:#5e9340; }
html[data-theme="sage"]:not([data-page="ref"]) .editor { background:#020301; color:#ccdac9; --text:#ccdac9; --muted:#818b7d; --border-l:#31342d; --border:#20231c; --accent:#5e9340; }
html[data-theme="cloud"]:not([data-page="ref"]) {
  --bg-deep: #e8eaee;
  --bg-panel: #f5f6f8;
  --bg-panel2: #eeeff1;
  --bg-input: #fcfcfd;
  --bg-hover: #e6e7e9;
  --bg-active: #d7ddf3;
  --border: #dcdddf;
  --border-l: #cbccce;
  --text: #1c1f26;
  --muted: #6e7176;
  --faint: #9a9ca0;
  --accent: #3b5bdb;
  --accent-d: #324dba;
  --bg-surface: #fcfdfd;
  --text-strong: #111317;
  --shadow: 0 6px 24px rgba(40,50,70,.16);
}
html[data-theme="cloud"][data-page="ref"] { --bg:#131519; --surface:#08090b; --surface2:#0f1012; --border:#323335; --text:#dde0e7; --muted:#9da0a5; --tag-bg:#0f1012; --accent:#7f9fff; }
html[data-theme="cloud"]:not([data-page="ref"]) .editor { background:#010202; color:#dde0e7; --text:#dde0e7; --muted:#8c8f94; --border-l:#323335; --border:#212224; --accent:#7f9fff; }

/* ── Reference indexes (grammar / vocabulary / pronunciation): modern look ── */
html[data-page="ref"] header { background: color-mix(in srgb, var(--bg) 86%, transparent) !important; box-shadow: 0 8px 30px rgba(0,0,0,.18); }
html[data-page="ref"] body { background: radial-gradient(1100px 500px at 15% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), var(--bg); background-attachment: fixed; }
html[data-page="ref"] .sidebar-item { border-radius: 10px; margin: 2px 8px; transition: background .15s ease, transform .15s ease, box-shadow .15s ease; }
html[data-page="ref"] .sidebar-item:hover { transform: translateX(2px); }
html[data-page="ref"] .sidebar-item.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
html[data-page="ref"] :is(.card, .g-card, .qc-card, .mp-card, .rv-card, .qc-box, .entry-block, .summary-block, .ipa-box, .pill, .stress-item) { border-radius: 16px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
html[data-page="ref"] :is(.card, .g-card, .qc-card, .mp-card):hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 34px rgba(0,0,0,.28); }
html[data-page="ref"] :is(.search-wrap input, .rv-search-input) { border-radius: 999px; }
html[data-page="ref"] .topic-title, html[data-page="ref"] .detail-title { letter-spacing: -.01em; }

/* ── Light themes ── */
html[data-mode="light"]:not([data-page="ref"]) .editor { filter: invert(1) hue-rotate(180deg); }
html[data-mode="light"]:not([data-page="ref"]) .editor img,
html[data-mode="light"]:not([data-page="ref"]) .editor video,
html[data-mode="light"]:not([data-page="ref"]) .editor iframe,
html[data-mode="light"]:not([data-page="ref"]) .editor canvas { filter: invert(1) hue-rotate(180deg); }
/* reference pages: whole page inverted, media put back */
html[data-mode="light"][data-page="ref"] { filter: invert(1) hue-rotate(180deg); background: #000; }
html[data-mode="light"][data-page="ref"] img,
html[data-mode="light"][data-page="ref"] video,
html[data-mode="light"][data-page="ref"] iframe { filter: invert(1) hue-rotate(180deg); }
/* dialogs, menus and pop-ups stay dark in light themes (they carry their own light-on-dark colours) */
html[data-mode="light"]:not([data-page="ref"]) :is(.modal-overlay, .gm-overlay, #mainMenuModal, .activity-panel, .ctx-menu, .ctx-submenu, .table-ctx-menu, .group-tooltip, .spell-tooltip, .err-tooltip, .topbar-dropdown, .audio-popup, .color-palette-dropdown, .login-screen) {
  --bg-deep:#0f1117; --bg-panel:#161b27; --bg-panel2:#1c2333; --bg-input:#1e2535; --bg-hover:#232c3f; --bg-active:#2a3550;
  --border:#1e2840; --border-l:#2a3550; --text:#e2e8f0; --muted:#8a98b8; --faint:#5b6780; --bg-surface:#1a2030; --text-strong:#fff;
  color: var(--text);
}
html[data-mode="dark"] #mainMenuPanel { background: var(--bg-panel) !important; border-color: var(--border-l) !important; }

/* ── Modern look (all themes) ── */
html { color-scheme: dark; }
html[data-mode="light"] { color-scheme: light; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 40%, transparent); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 65%, transparent); background-clip: padding-box; }
.group-item, .note-item, .topbar-btn, .sidebar-toggle, .icon-btn, .mmenu-btn, .toolbar button { transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.group-item { border-radius: 10px; margin: 2px 4px; }
.group-item.active { background: color-mix(in srgb, var(--accent) 20%, var(--bg-panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.note-item { border-radius: 0 10px 10px 0; margin-right: 8px; }
.note-item.active { background: color-mix(in srgb, var(--accent) 16%, var(--bg-panel2)); }
.topbar { backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--border), 0 6px 18px rgba(0,0,0,.08); }
.topbar-btn { border-radius: 9px; }
.topbar-menu-btn { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 4px 14px color-mix(in srgb, var(--accent) 18%, transparent) !important; border-color: var(--accent) !important; }
.page { border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.14); }
.toolbar { border-radius: 0; }
.modal { border-radius: 20px; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.modal-overlay { backdrop-filter: blur(6px); }
.modal-actions button { border-radius: 10px; transition: transform .15s ease, filter .15s ease; }
.modal-actions button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.mmenu-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.25); }
.ctx-menu { border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.45); }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; }

/* ── Theme picker (settings + reference pages) ── */
.theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.theme-picker .tp-title { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a98b8; margin-top: 4px; }
.tp-card { font-family: inherit; cursor: pointer; border: 2px solid transparent; border-radius: 12px; padding: 7px; display: flex; flex-direction: column; gap: 7px; text-align: left; background: #1c2333; transition: transform .15s ease, border-color .15s ease; }
.tp-card:hover { transform: translateY(-2px); }
.tp-card.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.22); }
.tp-prev { display: flex; height: 40px; border-radius: 7px; overflow: hidden; border: 1px solid rgba(128,128,128,.35); }
.tp-prev i { flex: 1; display: block; }
.tp-prev i:nth-child(1) { flex: 2; }
.tp-name { font-size: 12.5px; font-weight: 700; color: #e2e8f0; }
/* ── Font picker (settings) ── */
.font-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fp-card { cursor: pointer; border: 2px solid transparent; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; text-align: left; background: #1c2333; color: #e2e8f0; transition: transform .15s ease; }
.fp-card:hover { transform: translateY(-2px); }
.fp-card.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.22); }
.fp-aa { font-size: 24px; font-weight: 700; line-height: 1.1; color: #fff; }
.fp-name { font-size: 12.5px; font-weight: 600; color: #c9d1d9; }