:root {
  color-scheme: light;
  --page: #eef4ef;
  --surface: #fffdf8;
  --surface-glass: rgba(255, 253, 248, 0.92);
  --surface-glass-soft: rgba(255, 253, 248, 0.78);
  --surface-soft: #f8faf5;
  --reader-card: rgba(255, 255, 255, 0.74);
  --field: #ffffff;
  --button-bg: #ffffff;
  --ink: #243036;
  --muted: #65736b;
  --sage: #66816f;
  --sage-dark: #3f5f51;
  --water: #5f8796;
  --gold: #c79b45;
  --line: #dce5dc;
  --line-soft: rgba(220, 229, 220, 0.92);
  --panel-divider: rgba(220, 229, 220, 0.92);
  --highlight: #fff2c2;
  --highlight-strong: #d99d37;
  --word-highlight: rgba(217, 157, 55, 0.36);
  --focus: rgba(95, 135, 150, 0.34);
  --brand-bg: linear-gradient(145deg, #e6f1ef, #fff8e8);
  --primary-text: #ffffff;
  --aura-one: rgba(95, 135, 150, 0.14);
  --aura-two: rgba(199, 155, 69, 0.14);
  --shadow: 0 18px 50px rgba(49, 67, 58, 0.14);
  --radius: 8px;
  font-family: "Segoe UI", "Georgia", system-ui, sans-serif;
}

body[data-theme="morning-manna"] {
  --page: #fbf3df;
  --surface: #fffdf7;
  --surface-glass: rgba(255, 253, 247, 0.93);
  --surface-glass-soft: rgba(255, 253, 247, 0.8);
  --surface-soft: #f6ecd5;
  --reader-card: rgba(255, 255, 252, 0.78);
  --field: #fffaf0;
  --button-bg: #fffaf0;
  --ink: #312b22;
  --muted: #786b56;
  --sage-dark: #6f7e56;
  --water: #6c8492;
  --gold: #b88728;
  --line: #e2d4b7;
  --line-soft: rgba(226, 212, 183, 0.9);
  --panel-divider: rgba(226, 212, 183, 0.9);
  --highlight: #fff0bc;
  --highlight-strong: #b88728;
  --aura-one: rgba(111, 126, 86, 0.16);
  --aura-two: rgba(184, 135, 40, 0.18);
}

body[data-theme="quiet-garden"] {
  --page: #edf6ed;
  --surface: #fffaf2;
  --surface-glass: rgba(255, 250, 242, 0.93);
  --surface-glass-soft: rgba(255, 250, 242, 0.78);
  --surface-soft: #f1f5e8;
  --reader-card: rgba(255, 255, 249, 0.78);
  --field: #fbfff6;
  --button-bg: #fbfff6;
  --ink: #253229;
  --muted: #677469;
  --sage-dark: #496d55;
  --water: #637f83;
  --gold: #b98d50;
  --line: #d8e3d5;
  --line-soft: rgba(216, 227, 213, 0.92);
  --panel-divider: rgba(216, 227, 213, 0.92);
  --highlight: #fff1c9;
  --highlight-strong: #b98d50;
}

body[data-theme="rose-window"] {
  --page: #f8eef0;
  --surface: #fffaf9;
  --surface-glass: rgba(255, 250, 249, 0.93);
  --surface-glass-soft: rgba(255, 250, 249, 0.79);
  --surface-soft: #f5e9eb;
  --reader-card: rgba(255, 255, 255, 0.78);
  --field: #fffafd;
  --button-bg: #fffafd;
  --ink: #302a31;
  --muted: #746674;
  --sage-dark: #8c5264;
  --water: #516c86;
  --gold: #b89248;
  --line: #ead5da;
  --line-soft: rgba(234, 213, 218, 0.92);
  --panel-divider: rgba(234, 213, 218, 0.92);
  --highlight: #ffeac3;
  --highlight-strong: #b89248;
  --aura-one: rgba(81, 108, 134, 0.16);
  --aura-two: rgba(140, 82, 100, 0.16);
}

body[data-theme="desert-dawn"] {
  --page: #f7efe3;
  --surface: #fff9ef;
  --surface-glass: rgba(255, 249, 239, 0.93);
  --surface-glass-soft: rgba(255, 249, 239, 0.8);
  --surface-soft: #f3e6d4;
  --reader-card: rgba(255, 252, 245, 0.78);
  --field: #fff8ef;
  --button-bg: #fff8ef;
  --ink: #312b26;
  --muted: #796a5c;
  --sage-dark: #9c6c3d;
  --water: #4f7880;
  --gold: #bd8846;
  --line: #e5d2bc;
  --line-soft: rgba(229, 210, 188, 0.92);
  --panel-divider: rgba(229, 210, 188, 0.92);
  --highlight: #ffedc9;
  --highlight-strong: #bd8846;
  --aura-one: rgba(79, 120, 128, 0.15);
  --aura-two: rgba(156, 108, 61, 0.17);
}

body[data-theme="ocean-sabbath"] {
  --page: #e8f4f5;
  --surface: #fbfffb;
  --surface-glass: rgba(251, 255, 251, 0.93);
  --surface-glass-soft: rgba(251, 255, 251, 0.79);
  --surface-soft: #edf8f3;
  --reader-card: rgba(255, 255, 255, 0.78);
  --field: #ffffff;
  --button-bg: #ffffff;
  --ink: #203238;
  --muted: #5e7378;
  --sage-dark: #356f7d;
  --water: #78935f;
  --gold: #b99a3b;
  --line: #d5e4e6;
  --line-soft: rgba(213, 228, 230, 0.92);
  --panel-divider: rgba(213, 228, 230, 0.92);
  --highlight: #fff0b7;
  --highlight-strong: #b99a3b;
  --aura-one: rgba(53, 111, 125, 0.17);
  --aura-two: rgba(120, 147, 95, 0.16);
}

body[data-theme="clear-contrast"] {
  --page: #f5f7fb;
  --surface: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.96);
  --surface-glass-soft: rgba(255, 255, 255, 0.85);
  --surface-soft: #eef2f7;
  --reader-card: rgba(255, 255, 255, 0.9);
  --field: #ffffff;
  --button-bg: #ffffff;
  --ink: #121820;
  --muted: #4d5968;
  --sage-dark: #1c4f68;
  --water: #365f7d;
  --gold: #b88720;
  --line: #cfd8e3;
  --line-soft: rgba(207, 216, 227, 0.94);
  --panel-divider: rgba(207, 216, 227, 0.94);
  --highlight: #fff0ad;
  --highlight-strong: #b88720;
}

body[data-theme="tabernacle-gold"] {
  --page: #fbf1d0;
  --surface: #fff9ea;
  --surface-glass: rgba(255, 249, 234, 0.94);
  --surface-glass-soft: rgba(255, 249, 234, 0.82);
  --surface-soft: #f3dfad;
  --reader-card: rgba(255, 252, 242, 0.8);
  --field: #fffdf5;
  --button-bg: #fff9ea;
  --ink: #2f291d;
  --muted: #756649;
  --sage-dark: #9f742c;
  --water: #2f6b75;
  --gold: #c7952f;
  --line: #e4cd91;
  --line-soft: rgba(228, 205, 145, 0.92);
  --panel-divider: rgba(228, 205, 145, 0.92);
  --highlight: #fff0ad;
  --highlight-strong: #c7952f;
  --aura-one: rgba(47, 107, 117, 0.15);
  --aura-two: rgba(199, 149, 47, 0.2);
}

body[data-theme="cedar-scroll"] {
  --page: #efe3d0;
  --surface: #fff9ef;
  --surface-glass: rgba(255, 249, 239, 0.94);
  --surface-glass-soft: rgba(255, 249, 239, 0.82);
  --surface-soft: #ead9bf;
  --reader-card: rgba(255, 252, 245, 0.8);
  --field: #fff8ec;
  --button-bg: #fff8ec;
  --ink: #2f2922;
  --muted: #746655;
  --sage-dark: #76543a;
  --water: #506f57;
  --gold: #bd8c45;
  --line: #dfcbb0;
  --line-soft: rgba(223, 203, 176, 0.92);
  --panel-divider: rgba(223, 203, 176, 0.92);
  --highlight: #ffedc0;
  --highlight-strong: #bd8c45;
  --aura-one: rgba(80, 111, 87, 0.16);
  --aura-two: rgba(118, 84, 58, 0.16);
}

body[data-theme="galilee-sunrise"] {
  --page: #f7e9d8;
  --surface: #fff7ec;
  --surface-glass: rgba(255, 247, 236, 0.94);
  --surface-glass-soft: rgba(255, 247, 236, 0.82);
  --surface-soft: #efd9c2;
  --reader-card: rgba(255, 251, 244, 0.8);
  --field: #fffaf3;
  --button-bg: #fffaf3;
  --ink: #2d2a25;
  --muted: #746759;
  --sage-dark: #b36c45;
  --water: #477f8c;
  --gold: #c58b43;
  --line: #e6cdb8;
  --line-soft: rgba(230, 205, 184, 0.92);
  --panel-divider: rgba(230, 205, 184, 0.92);
  --highlight: #ffe9bd;
  --highlight-strong: #c58b43;
  --aura-one: rgba(71, 127, 140, 0.16);
  --aura-two: rgba(179, 108, 69, 0.17);
}

body[data-theme="jordan-stone"] {
  --page: #edf0eb;
  --surface: #fbfbf4;
  --surface-glass: rgba(251, 251, 244, 0.94);
  --surface-glass-soft: rgba(251, 251, 244, 0.82);
  --surface-soft: #e3e6dc;
  --reader-card: rgba(255, 255, 250, 0.8);
  --field: #fffffb;
  --button-bg: #fffffb;
  --ink: #272d28;
  --muted: #697167;
  --sage-dark: #687568;
  --water: #667f88;
  --gold: #856d48;
  --line: #d5dacd;
  --line-soft: rgba(213, 218, 205, 0.92);
  --panel-divider: rgba(213, 218, 205, 0.92);
  --highlight: #fff0bf;
  --highlight-strong: #a07c40;
  --aura-one: rgba(102, 127, 136, 0.14);
  --aura-two: rgba(133, 109, 72, 0.14);
}

body[data-theme="fig-tree"] {
  --page: #eef3df;
  --surface: #fffff4;
  --surface-glass: rgba(255, 255, 244, 0.94);
  --surface-glass-soft: rgba(255, 255, 244, 0.82);
  --surface-soft: #e4ebce;
  --reader-card: rgba(255, 255, 250, 0.8);
  --field: #fffffa;
  --button-bg: #fffffa;
  --ink: #263122;
  --muted: #68715b;
  --sage-dark: #4f6f3d;
  --water: #6a8371;
  --gold: #a17d45;
  --line: #d9dfc4;
  --line-soft: rgba(217, 223, 196, 0.92);
  --panel-divider: rgba(217, 223, 196, 0.92);
  --highlight: #fff2bf;
  --highlight-strong: #a17d45;
  --aura-one: rgba(79, 111, 61, 0.16);
  --aura-two: rgba(161, 125, 69, 0.15);
}

body[data-theme="candlelight"],
body[data-theme="river-night"],
body[data-theme="midnight-psalm"],
body[data-theme="olive-grove"],
body[data-theme="royal-plum"],
body[data-theme="bethlehem-night"],
body[data-theme="temple-veil"],
body[data-theme="red-sea-dusk"],
body[data-theme="premium-living-river"],
body[data-theme="premium-burning-bush"],
body[data-theme="premium-stained-glass"],
body[data-theme="premium-celestial-scroll"],
body[data-theme="premium-desert-stars"] {
  color-scheme: dark;
  --primary-text: #ffffff;
  --brand-bg: linear-gradient(145deg, var(--surface-soft), var(--field));
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
}

body[data-theme="candlelight"] {
  --page: #251f1a;
  --surface: #332922;
  --surface-glass: rgba(51, 41, 34, 0.94);
  --surface-glass-soft: rgba(46, 38, 31, 0.86);
  --surface-soft: #40342a;
  --reader-card: rgba(64, 52, 42, 0.72);
  --field: #2a231e;
  --button-bg: #3c3028;
  --ink: #f6eee1;
  --muted: #c8b8a4;
  --sage-dark: #8db6a0;
  --water: #e6c777;
  --gold: #e4aa5b;
  --line: #59483d;
  --line-soft: rgba(89, 72, 61, 0.92);
  --panel-divider: rgba(89, 72, 61, 0.92);
  --highlight: #604724;
  --highlight-strong: #e4aa5b;
  --word-highlight: rgba(228, 170, 91, 0.35);
  --aura-one: rgba(141, 182, 160, 0.13);
  --aura-two: rgba(230, 199, 119, 0.14);
}

body[data-theme="river-night"] {
  --page: #111b22;
  --surface: #17252c;
  --surface-glass: rgba(23, 37, 44, 0.94);
  --surface-glass-soft: rgba(20, 32, 39, 0.87);
  --surface-soft: #1d3038;
  --reader-card: rgba(27, 45, 53, 0.74);
  --field: #101a20;
  --button-bg: #20343d;
  --ink: #edf7f7;
  --muted: #a8bdc1;
  --sage-dark: #75a9b4;
  --water: #a0c8ce;
  --gold: #d9b86f;
  --line: #2c4650;
  --line-soft: rgba(44, 70, 80, 0.92);
  --panel-divider: rgba(44, 70, 80, 0.92);
  --highlight: #38462f;
  --highlight-strong: #d9b86f;
  --word-highlight: rgba(217, 184, 111, 0.34);
  --aura-one: rgba(117, 169, 180, 0.15);
  --aura-two: rgba(217, 184, 111, 0.12);
}

body[data-theme="midnight-psalm"] {
  --page: #11131d;
  --surface: #1d2030;
  --surface-glass: rgba(29, 32, 48, 0.94);
  --surface-glass-soft: rgba(25, 27, 42, 0.87);
  --surface-soft: #252940;
  --reader-card: rgba(37, 41, 64, 0.74);
  --field: #151827;
  --button-bg: #252940;
  --ink: #f0f2ff;
  --muted: #b9bdd0;
  --sage-dark: #b6bde8;
  --water: #8fbccc;
  --gold: #d3a85c;
  --line: #3a3f5a;
  --line-soft: rgba(58, 63, 90, 0.92);
  --panel-divider: rgba(58, 63, 90, 0.92);
  --highlight: #3e3426;
  --highlight-strong: #d3a85c;
  --word-highlight: rgba(211, 168, 92, 0.34);
  --aura-one: rgba(143, 188, 204, 0.13);
  --aura-two: rgba(182, 189, 232, 0.12);
}

body[data-theme="olive-grove"] {
  --page: #182018;
  --surface: #202b20;
  --surface-glass: rgba(32, 43, 32, 0.94);
  --surface-glass-soft: rgba(29, 39, 29, 0.86);
  --surface-soft: #2b3829;
  --reader-card: rgba(43, 56, 41, 0.74);
  --field: #172017;
  --button-bg: #2f3d2d;
  --ink: #f0f4e8;
  --muted: #bac7ac;
  --sage-dark: #a9bd7a;
  --water: #8cb9aa;
  --gold: #d8be74;
  --line: #42513d;
  --line-soft: rgba(66, 81, 61, 0.92);
  --panel-divider: rgba(66, 81, 61, 0.92);
  --highlight: #4a4328;
  --highlight-strong: #d8be74;
  --word-highlight: rgba(216, 190, 116, 0.34);
  --aura-one: rgba(169, 189, 122, 0.13);
  --aura-two: rgba(140, 185, 170, 0.12);
}

body[data-theme="royal-plum"] {
  --page: #211927;
  --surface: #302439;
  --surface-glass: rgba(48, 36, 57, 0.94);
  --surface-glass-soft: rgba(41, 31, 49, 0.86);
  --surface-soft: #3b2c45;
  --reader-card: rgba(59, 44, 69, 0.74);
  --field: #251b2c;
  --button-bg: #3b2c45;
  --ink: #f8efff;
  --muted: #cdbbd5;
  --sage-dark: #c39ad6;
  --water: #8fc5c2;
  --gold: #d8b96f;
  --line: #563f64;
  --line-soft: rgba(86, 63, 100, 0.92);
  --panel-divider: rgba(86, 63, 100, 0.92);
  --highlight: #514029;
  --highlight-strong: #d8b96f;
  --word-highlight: rgba(216, 185, 111, 0.34);
  --aura-one: rgba(143, 197, 194, 0.12);
  --aura-two: rgba(195, 154, 214, 0.12);
}

body[data-theme="bethlehem-night"] {
  --page: #151b2b;
  --surface: #20283b;
  --surface-glass: rgba(32, 40, 59, 0.94);
  --surface-glass-soft: rgba(26, 34, 51, 0.86);
  --surface-soft: #2a344b;
  --reader-card: rgba(42, 52, 75, 0.74);
  --field: #141b2b;
  --button-bg: #283249;
  --ink: #f5f1e6;
  --muted: #c2c6ce;
  --sage-dark: #d6c17b;
  --water: #90b6c8;
  --gold: #d6c17b;
  --line: #3b4863;
  --line-soft: rgba(59, 72, 99, 0.92);
  --panel-divider: rgba(59, 72, 99, 0.92);
  --highlight: #463b28;
  --highlight-strong: #d6c17b;
  --word-highlight: rgba(214, 193, 123, 0.34);
  --aura-one: rgba(144, 182, 200, 0.13);
  --aura-two: rgba(214, 193, 123, 0.12);
}

body[data-theme="temple-veil"] {
  --page: #241527;
  --surface: #321f38;
  --surface-glass: rgba(50, 31, 56, 0.94);
  --surface-glass-soft: rgba(44, 26, 49, 0.86);
  --surface-soft: #42284a;
  --reader-card: rgba(66, 40, 74, 0.74);
  --field: #26172b;
  --button-bg: #3e2646;
  --ink: #fff1fb;
  --muted: #d0b9cf;
  --sage-dark: #c18ac8;
  --water: #91c4c2;
  --gold: #d4a65f;
  --line: #5a3863;
  --line-soft: rgba(90, 56, 99, 0.92);
  --panel-divider: rgba(90, 56, 99, 0.92);
  --highlight: #563d28;
  --highlight-strong: #d4a65f;
  --word-highlight: rgba(212, 166, 95, 0.34);
  --aura-one: rgba(193, 138, 200, 0.12);
  --aura-two: rgba(145, 196, 194, 0.11);
}

body[data-theme="red-sea-dusk"] {
  --page: #271b1f;
  --surface: #3b2529;
  --surface-glass: rgba(59, 37, 41, 0.94);
  --surface-glass-soft: rgba(49, 30, 34, 0.86);
  --surface-soft: #4a3034;
  --reader-card: rgba(74, 48, 52, 0.74);
  --field: #2a1a1e;
  --button-bg: #472d31;
  --ink: #fff0e8;
  --muted: #d2b8ae;
  --sage-dark: #d18a73;
  --water: #77a8b2;
  --gold: #d6b069;
  --line: #633f43;
  --line-soft: rgba(99, 63, 67, 0.92);
  --panel-divider: rgba(99, 63, 67, 0.92);
  --highlight: #573827;
  --highlight-strong: #d6b069;
  --word-highlight: rgba(214, 176, 105, 0.34);
  --aura-one: rgba(119, 168, 178, 0.12);
  --aura-two: rgba(209, 138, 115, 0.13);
}

body[data-theme="premium-living-river"] {
  --page: #071b24;
  --surface: #102f38;
  --surface-glass: rgba(16, 47, 56, 0.9);
  --surface-glass-soft: rgba(10, 35, 43, 0.84);
  --surface-soft: #17404a;
  --reader-card: rgba(18, 61, 72, 0.72);
  --field: #082630;
  --button-bg: #173f49;
  --ink: #effdfb;
  --muted: #acd3d0;
  --sage-dark: #73d0c8;
  --water: #89b9e0;
  --gold: #f2d379;
  --line: #285866;
  --line-soft: rgba(40, 88, 102, 0.9);
  --panel-divider: rgba(40, 88, 102, 0.9);
  --highlight: #415337;
  --highlight-strong: #f2d379;
  --word-highlight: rgba(242, 211, 121, 0.34);
  --aura-one: rgba(115, 208, 200, 0.16);
  --aura-two: rgba(242, 211, 121, 0.13);
  --premium-pattern: repeating-linear-gradient(110deg, transparent 0 38px, rgba(115, 208, 200, 0.08) 39px 41px, transparent 42px 78px);
}

body[data-theme="premium-burning-bush"] {
  --page: #1d1410;
  --surface: #3a2018;
  --surface-glass: rgba(58, 32, 24, 0.9);
  --surface-glass-soft: rgba(48, 25, 19, 0.84);
  --surface-soft: #512a1d;
  --reader-card: rgba(77, 40, 29, 0.72);
  --field: #251811;
  --button-bg: #4e281c;
  --ink: #fff3e1;
  --muted: #dfbda2;
  --sage-dark: #ee9d4d;
  --water: #9fc7b0;
  --gold: #f6d37a;
  --line: #704331;
  --line-soft: rgba(112, 67, 49, 0.9);
  --panel-divider: rgba(112, 67, 49, 0.9);
  --highlight: #5d3c22;
  --highlight-strong: #f6d37a;
  --word-highlight: rgba(246, 211, 122, 0.34);
  --aura-one: rgba(238, 157, 77, 0.16);
  --aura-two: rgba(246, 211, 122, 0.12);
  --premium-pattern: repeating-linear-gradient(72deg, transparent 0 26px, rgba(238, 157, 77, 0.08) 27px 29px, transparent 30px 60px), repeating-linear-gradient(118deg, transparent 0 42px, rgba(246, 211, 122, 0.06) 43px 45px, transparent 46px 84px);
}

body[data-theme="premium-stained-glass"] {
  --page: #181827;
  --surface: #2d2746;
  --surface-glass: rgba(45, 39, 70, 0.9);
  --surface-glass-soft: rgba(35, 31, 56, 0.84);
  --surface-soft: #3a335b;
  --reader-card: rgba(58, 51, 91, 0.72);
  --field: #1f1c35;
  --button-bg: #39315a;
  --ink: #f8f3ff;
  --muted: #c8c0d7;
  --sage-dark: #d895c1;
  --water: #7cc7d2;
  --gold: #e0c06d;
  --line: #544a7b;
  --line-soft: rgba(84, 74, 123, 0.9);
  --panel-divider: rgba(84, 74, 123, 0.9);
  --highlight: #514026;
  --highlight-strong: #e0c06d;
  --word-highlight: rgba(224, 192, 109, 0.34);
  --aura-one: rgba(124, 199, 210, 0.12);
  --aura-two: rgba(216, 149, 193, 0.13);
  --premium-pattern: repeating-conic-gradient(from 15deg, rgba(124, 199, 210, 0.08) 0 12deg, transparent 12deg 28deg, rgba(216, 149, 193, 0.07) 28deg 40deg, transparent 40deg 64deg);
}

body[data-theme="premium-celestial-scroll"] {
  --page: #0f1324;
  --surface: #1d2540;
  --surface-glass: rgba(29, 37, 64, 0.9);
  --surface-glass-soft: rgba(22, 29, 51, 0.84);
  --surface-soft: #283353;
  --reader-card: rgba(40, 51, 83, 0.72);
  --field: #141a30;
  --button-bg: #273250;
  --ink: #f8f4e9;
  --muted: #c4c9d8;
  --sage-dark: #d5c88f;
  --water: #9eb9e6;
  --gold: #d5c88f;
  --line: #3e4a70;
  --line-soft: rgba(62, 74, 112, 0.9);
  --panel-divider: rgba(62, 74, 112, 0.9);
  --highlight: #46412b;
  --highlight-strong: #d5c88f;
  --word-highlight: rgba(213, 200, 143, 0.34);
  --aura-one: rgba(158, 185, 230, 0.14);
  --aura-two: rgba(213, 200, 143, 0.12);
  --premium-pattern: repeating-linear-gradient(0deg, transparent 0 34px, rgba(213, 200, 143, 0.06) 35px 36px, transparent 37px 72px), repeating-linear-gradient(90deg, transparent 0 46px, rgba(158, 185, 230, 0.05) 47px 48px, transparent 49px 92px);
}

body[data-theme="premium-desert-stars"] {
  --page: #1f1714;
  --surface: #38261c;
  --surface-glass: rgba(56, 38, 28, 0.9);
  --surface-glass-soft: rgba(45, 31, 24, 0.84);
  --surface-soft: #4b3122;
  --reader-card: rgba(75, 49, 34, 0.72);
  --field: #251b15;
  --button-bg: #493023;
  --ink: #fff1df;
  --muted: #d8bea8;
  --sage-dark: #d7a15b;
  --water: #88b6c5;
  --gold: #e4c375;
  --line: #644531;
  --line-soft: rgba(100, 69, 49, 0.9);
  --panel-divider: rgba(100, 69, 49, 0.9);
  --highlight: #594024;
  --highlight-strong: #e4c375;
  --word-highlight: rgba(228, 195, 117, 0.34);
  --aura-one: rgba(136, 182, 197, 0.12);
  --aura-two: rgba(215, 161, 91, 0.14);
  --premium-pattern: repeating-linear-gradient(112deg, transparent 0 40px, rgba(228, 195, 117, 0.08) 41px 42px, transparent 43px 86px), repeating-linear-gradient(64deg, transparent 0 62px, rgba(136, 182, 197, 0.06) 63px 64px, transparent 65px 126px);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  background:
    linear-gradient(135deg, var(--aura-one), transparent 34%),
    linear-gradient(225deg, var(--aura-two), transparent 31%),
    var(--page);
  color: var(--ink);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: var(--premium-pattern, transparent);
  transform: translate3d(0, 0, 0);
}

body[data-theme^="premium-"]::before {
  opacity: 1;
  animation: premium-drift 28s linear infinite;
}

@keyframes premium-drift {
  from {
    background-position: 0 0, 0 0;
  }

  to {
    background-position: 180px 120px, -160px 96px;
  }
}

button,
input,
select {
  font: inherit;
}

button,
select,
input[type="search"],
input[type="number"] {
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

button {
  min-height: 42px;
  padding: 0 14px;
  background: var(--button-bg);
  color: var(--ink);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

button:hover {
  border-color: var(--sage-dark);
  box-shadow: 0 8px 22px rgba(49, 67, 58, 0.1);
}

button:active {
  transform: translateY(1px);
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.54;
}

select,
input[type="search"],
input[type="number"] {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  background: var(--field);
  color: var(--ink);
}

.app-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(420px, 1fr) minmax(270px, 320px);
  gap: 18px;
  min-height: 100vh;
  padding: 18px;
}

.library-panel,
.control-panel,
.reader-panel {
  min-width: 0;
}

.library-panel,
.control-panel {
  align-self: start;
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  overflow: auto;
  background: var(--surface-glass);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.library-panel {
  padding: 18px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(95, 135, 150, 0.32);
  border-radius: 50% 50% 46% 46%;
  background: var(--brand-bg);
  color: var(--sage-dark);
  font-weight: 800;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--water);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  line-height: 1.15;
}

h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  line-height: 1.12;
}

h3 {
  margin: 0;
  font-size: 1rem;
}

.scripture-picker,
.search-box,
.control-section {
  display: grid;
  gap: 12px;
}

.scripture-picker label,
.search-box label,
.control-section label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.primary-button {
  border-color: transparent;
  background: linear-gradient(135deg, var(--sage-dark), var(--water));
  color: var(--primary-text);
}

.search-box {
  margin-top: 24px;
}

.search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.search-results {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.result-button {
  min-height: 0;
  padding: 10px;
  text-align: left;
  background: var(--surface-soft);
}

.result-ref {
  display: block;
  color: var(--sage-dark);
  font-weight: 800;
  margin-bottom: 4px;
}

.result-text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.9rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.reader-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
}

.reader-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  background: var(--surface-glass);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.chapter-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.reader-surface {
  overflow: auto;
  padding: 18px;
  background: var(--surface-glass-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.chapter-intro {
  max-width: 850px;
  margin: 0 auto 16px;
  color: var(--muted);
  line-height: 1.6;
}

.verses {
  display: grid;
  gap: 10px;
  max-width: 850px;
  margin: 0 auto;
}

.verse-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  padding: 15px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--reader-card);
  line-height: 1.72;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.verse-card.active {
  border-color: var(--highlight-strong);
  background: var(--highlight);
  transform: translateY(-1px);
}

.verse-number {
  color: var(--water);
  font-size: 0.9rem;
  font-weight: 800;
  text-align: right;
}

.verse-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.16rem;
}

.word-current {
  border-radius: 4px;
  background: var(--word-highlight);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--highlight-strong), transparent 78%);
}

.control-panel {
  display: grid;
  gap: 1px;
  background: var(--panel-divider);
}

.control-section {
  padding: 18px;
  background: var(--surface-glass);
}

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.section-heading span {
  color: var(--water);
  font-size: 0.8rem;
  font-weight: 800;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.theme-choice {
  display: grid;
  gap: 8px;
  min-height: 74px;
  padding: 10px;
  text-align: left;
}

.theme-choice.active {
  border-color: var(--highlight-strong);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--highlight-strong), transparent 72%);
}

.theme-choice-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
}

.premium-tag {
  border: 1px solid var(--highlight-strong);
  border-radius: 999px;
  padding: 2px 6px;
  color: var(--highlight-strong);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.theme-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.theme-swatches span {
  display: block;
  height: 16px;
  border: 1px solid color-mix(in srgb, var(--line), transparent 30%);
  border-radius: 999px;
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.music-controls .button-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.button-grid.two-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stop-passage-group {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.triple-select {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
  gap: 8px;
}

.indented-toggle {
  padding-left: 12px;
  border-left: 3px solid var(--line);
}

.range-label span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--sage-dark);
}

.toggle-row {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 10px !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
}

.toggle-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--sage-dark);
}

.empty-state,
.error-state,
.loading-state {
  max-width: 760px;
  margin: 32px auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--reader-card);
  color: var(--muted);
}

.loading-state {
  display: grid;
  gap: 12px;
}

.loading-line {
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--surface-soft), var(--highlight), var(--surface-soft));
  background-size: 220% 100%;
  animation: shimmer 1.4s ease infinite;
}

.loading-line.short {
  width: 62%;
}

@keyframes shimmer {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -220% 0;
  }
}

@media (max-width: 1120px) {
  .app-shell {
    grid-template-columns: minmax(240px, 300px) minmax(420px, 1fr);
  }

  .control-panel {
    position: static;
    grid-column: 1 / -1;
    max-height: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .app-shell {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .library-panel,
  .control-panel {
    position: static;
    max-height: none;
  }

  .control-panel {
    grid-template-columns: 1fr;
  }

  .reader-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .chapter-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  h2 {
    font-size: 1.55rem;
  }

  .search-row,
  .button-grid,
  .music-controls .button-grid,
  .button-grid.two-buttons,
  .triple-select,
  .theme-grid {
    grid-template-columns: 1fr;
  }

  .verse-card {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 13px 12px;
  }

  .verse-text {
    font-size: 1.04rem;
  }
}