:root,
        :root[data-palette="lotus"] {
            --page-bg: #f1f7f5;
            --surface-bg: #ffffff;
            --surface-raised: #e6f0ed;
            --ink: #183a36;
            --muted-ink: #627b75;
            --line: #cfddd8;
            --theme-accent: #397f70;
            --reader-font: "DM Sans";
        }
        :root.dark[data-palette="lotus"] {
            --page-bg: #101b19;
            --surface-bg: #182622;
            --surface-raised: #223530;
            --ink: #edf5f1;
            --muted-ink: #a9beb8;
            --line: #354a44;
            --theme-accent: #83b9a9;
        }
        :root[data-palette="sunrise"] {
            --page-bg: #fff8ed;
            --surface-bg: #fffdf8;
            --surface-raised: #f8ead2;
            --ink: #49351f;
            --muted-ink: #806b50;
            --line: #ead7b8;
            --theme-accent: #b86b27;
        }
        :root.dark[data-palette="sunrise"] {
            --page-bg: #20180f;
            --surface-bg: #2b2117;
            --surface-raised: #3b2d1e;
            --ink: #fff2dd;
            --muted-ink: #c9ae87;
            --line: #51402b;
            --theme-accent: #e9a95b;
        }
        :root[data-palette="meadow"] {
            --page-bg: #f4f8ef;
            --surface-bg: #ffffff;
            --surface-raised: #eaf1df;
            --ink: #2b3c25;
            --muted-ink: #68785d;
            --line: #d5dfca;
            --theme-accent: #668b43;
        }
        :root.dark[data-palette="meadow"] {
            --page-bg: #151c13;
            --surface-bg: #20291c;
            --surface-raised: #2d3926;
            --ink: #f0f5e9;
            --muted-ink: #b2c19f;
            --line: #3d4b34;
            --theme-accent: #a4c47d;
        }
        :root[data-palette="rose"] {
            --page-bg: #fbf3f3;
            --surface-bg: #fffdfd;
            --surface-raised: #f3e4e5;
            --ink: #452d34;
            --muted-ink: #80656c;
            --line: #e6d1d5;
            --theme-accent: #a85065;
        }
        :root.dark[data-palette="rose"] {
            --page-bg: #201619;
            --surface-bg: #2d2024;
            --surface-raised: #3b2a30;
            --ink: #faedf0;
            --muted-ink: #c5a8b0;
            --line: #503941;
            --theme-accent: #df91a5;
        }

        body.app-shell {
            background-color: var(--page-bg) !important;
            background-image: radial-gradient(ellipse at 50% -15%, color-mix(in srgb, var(--theme-accent) 14%, transparent), transparent 60%);
            color: var(--ink) !important;
            font-family: var(--reader-font), "Noto Sans Devanagari", sans-serif !important;
        }
        .app-shell .themed-surface {
            background-color: var(--surface-bg) !important;
            border-color: var(--line) !important;
            box-shadow: 0 24px 70px -42px color-mix(in srgb, var(--ink) 36%, transparent);
        }
        .app-shell .themed-field {
            background-color: var(--surface-raised) !important;
            border-color: var(--line) !important;
            color: var(--ink) !important;
        }
        .app-shell .themed-secondary { background-color: var(--surface-raised) !important; }
        .app-shell .themed-muted { color: var(--muted-ink) !important; }
        .app-shell .themed-border { border-color: var(--line) !important; }
        .app-shell select option { background: var(--surface-bg); color: var(--ink); }
        .app-shell header { border-color: var(--line) !important; }
        .app-shell button:focus-visible,
        .app-shell select:focus-visible,
        .app-shell textarea:focus-visible,
        .app-shell input:focus-visible {
            outline: 2px solid var(--theme-accent);
            outline-offset: 3px;
        }
        .font-choice[aria-pressed="true"] {
            border-color: var(--theme-accent) !important;
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent) 28%, transparent);
        }
        .font-choice:hover { border-color: var(--theme-accent) !important; }
        .history-chevron { transition: transform 150ms ease; }
        .history-toggle[aria-expanded="true"] .history-chevron { transform: rotate(180deg); }
        .recital-dialog {
            width: min(32rem, calc(100% - 2rem));
            max-height: min(80vh, 42rem);
            padding: 0;
            border: 1px solid var(--line);
            color: var(--ink);
            background: var(--surface-bg);
        }
        .recital-dialog::backdrop {
            background: rgb(0 0 0 / 45%);
            backdrop-filter: blur(2px);
        }
        .recite-token {
            display: inline-block;
            margin: 0.25rem 0.375rem;
            font-weight: 600;
            white-space: nowrap;
        }

        .accent-text-red { color: #ef4444; }
        .accent-text-orange { color: #f97316; }
        .accent-text-yellow { color: #eab308; }
        .accent-text-green { color: #22c55e; }
        .accent-text-blue { color: #3b82f6; }
        .accent-text-indigo { color: #6366f1; }
        .accent-text-violet { color: #a855f7; }

        .accent-bg-red { background-color: #ef4444; }
        .accent-bg-orange { background-color: #f97316; }
        .accent-bg-yellow { background-color: #eab308; }
        .accent-bg-green { background-color: #22c55e; }
        .accent-bg-blue { background-color: #3b82f6; }
        .accent-bg-indigo { background-color: #6366f1; }
        .accent-bg-violet { background-color: #a855f7; }