/* App palettes are restored in the head, before the first paint. */
:root { --app-button:var(--green); --app-on-button:var(--cream); --app-deep:#18392E; --app-on-deep:#FBF9F2; --app-radius:18px; --app-backdrop:#E9E5D8; }
html:not([data-app-theme="classic"]) :is(.topbar,.reader-head,.tabs) { background:var(--cream); }
html:not([data-app-theme="classic"]) :is(.btn-primary,.chat-fab,.chat-send) { background:var(--app-button); color:var(--app-on-button); }
html:not([data-app-theme="classic"]) :is(.card,.panel,.panel-dark,.votd-home,.study-card) { border-radius:var(--app-radius); }
html:not([data-app-theme="classic"]) :is(.panel-dark,.me-head,.chat-head,.welcome,.lock,.sheet) {
  --green:var(--app-deep); --cream:var(--app-on-deep); --muted:var(--app-on-deep);
  background:var(--app-deep); color:var(--app-on-deep);
}
html:not([data-app-theme="classic"]) .votd-home { background:var(--app-deep)!important; color:var(--app-on-deep)!important; }
html:not([data-app-theme="classic"]) .votd-home::after { display:none; }
html:not([data-app-theme="classic"]) :is(.study-card,.care-card) { background:var(--sand); border-color:var(--line); }
html:not([data-app-theme="classic"]) .care-card a { color:var(--green); }
html:not([data-app-theme="classic"]) :is(.icon-btn.on,.tool.on) { background:var(--sand); }
html[data-theme-mode="dark"] :is(mark:not(.note-page *),.v[class*="hl-"]) { color:#18392E; }
html[data-theme-mode="dark"] .v[class*="hl-"] :is(sup,.vn) { color:#18392E; }
html[data-theme-mode="dark"] .v:not([class*="hl-"]) .note-mark { color:var(--text); }
html[data-theme-mode="dark"] .post-tag { color:var(--text); }
html[data-theme-mode="dark"] .switch.on i { background:var(--app-deep); }
html:not([data-app-theme="classic"]) :focus-visible { outline-color:var(--green); }
@media(min-width:600px) { html:not([data-app-theme="classic"]) body { background:var(--app-backdrop); } }

/* Personal papers and ink retain their independent, light document palette. */
html:not([data-app-theme="classic"]) :is(.note-page[data-custom-paper="true"] .note-wrap,.jpage[data-custom-paper="true"],.jt-preview,.entry-card[style*="background:"]) {
  --green:#18392E; --green-2:#21483B; --cream:#FBF9F2; --white:#FFFFFF;
  --sand:#F1EDE0; --sand-2:#EFEBDF; --text:#18392E; --body:#33463D;
  --reading:#1E2B25; --muted:#4F6158; --idle:#5E6E66; --line:#E3DFD2; --line-2:#C9CFC4; --gold:#6B4A12; --gold-bg:#F4E6C6;
  --app-button:#18392E; --app-on-button:#FBF9F2; color:var(--text); color-scheme:light;
}
html:not([data-app-theme="classic"]) .jcover { --cream:#FBF9F2; --green:#18392E; --on-dark-2:#D7E2DA; }
html:not([data-app-theme="classic"]) .jpage:not([data-custom-paper="true"]) .jcover { --cream:var(--app-on-deep); --green:var(--app-deep); }

.appearance-page { padding:26px 20px 0; }
.appearance-intro { display:grid; gap:12px; margin-bottom:26px; }
.appearance-intro .h1 { font-size:36px; }
.appearance-showcase { padding:16px 18px 10px; background:var(--sand); border-radius:20px; margin-bottom:30px; }
.ap-screen-tabs { display:flex; gap:4px; max-width:320px; margin:0 auto 16px; }
.ap-screen-tabs button { flex:1; min-height:40px; border:0; border-radius:999px; background:transparent; color:var(--muted); font-size:12px; font-weight:700; }
.ap-screen-tabs button[aria-pressed="true"] { background:var(--white); color:var(--text); box-shadow:0 1px 4px #0000000d; }
.appearance-preview { max-width:320px; margin:auto; border:1px solid var(--line); border-radius:var(--app-radius); background:var(--cream); color:var(--text); overflow:hidden; box-shadow:0 8px 24px #0000000a; }
.ap-brand { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); font:600 19px var(--serif); }
.ap-content { padding:22px; min-height:352px; }
.ap-kicker { display:block; color:var(--muted); font:700 9px var(--sans); letter-spacing:.14em; text-transform:uppercase; }
.ap-content h2 { font:500 31px/1.15 var(--serif); letter-spacing:-.02em; margin:11px 0 19px; color:var(--text); }
.ap-verse { border-left:2px solid var(--line-2); padding-left:14px; margin:0 0 20px; }
.ap-verse blockquote { font:400 20px/1.4 var(--read); margin:9px 0; }
.ap-hint { color:var(--muted); font-size:10px; }
.ap-demo-button { display:flex; justify-content:center; align-items:center; gap:9px; padding:11px; border-radius:var(--app-radius); background:var(--app-button); color:var(--app-on-button); font-size:11px; font-weight:700; }
.ap-shortcuts { display:flex; justify-content:space-between; gap:8px; margin-top:17px; color:var(--muted); font-size:9px; }
.ap-shortcuts>span { display:flex; align-items:center; gap:5px; }
.ap-nav { display:flex; justify-content:space-around; gap:3px; padding:13px 8px; border-top:1px solid var(--line); color:var(--muted); }
.ap-nav>span { display:grid; justify-items:center; gap:5px; font-size:7px; }
.ap-nav .active { color:var(--green); font-weight:800; }
.ap-reading { font:400 16px/1.8 var(--read); margin:14px 0; }
.ap-reading sup { color:var(--muted); font:600 10px var(--sans); }
.ap-paper { margin:20px 0; padding:20px 12px; background:var(--sand); color:var(--text); border-radius:var(--app-radius); font:italic 16px/1.8 var(--read); }
.ap-preview-caption { text-align:center; font-size:10px; color:var(--muted); margin:12px 0 2px; }
.appearance-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ap-filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.ap-filters .chip { min-height:44px; height:auto; }
.appearance-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.appearance-choice { min-width:0; display:flex; flex-direction:column; align-items:stretch; padding:6px 6px 12px; text-align:left; color:var(--text); background:var(--white); border:2px solid var(--line); border-radius:14px; }
.appearance-choice.selected { border-color:var(--green); }
.ap-thumbnail { display:flex; flex-direction:column; padding:16px 13px 12px; min-height:196px; border-radius:9px; background:var(--cream); color:var(--text); border:1px solid var(--line); }
.ap-mini-brand { font:700 7px var(--sans); letter-spacing:.17em; }
.ap-mini-heading { font:500 23px/1.12 var(--serif); margin:15px 0 9px; letter-spacing:-.02em; }
.ap-mini-line { width:45%; height:2px; background:var(--line-2); margin-bottom:15px; }
.ap-mini-button { display:flex; justify-content:space-between; gap:4px; padding:8px; font-size:8px; font-weight:700; background:var(--app-button); color:var(--app-on-button); border-radius:var(--app-radius); }
.ap-swatches { display:flex; gap:5px; margin-top:13px; }
.ap-swatches i { width:14px; height:14px; border-radius:50%; border:1px solid color-mix(in srgb,var(--text) 20%,transparent); }
.ap-choice-title { display:flex; align-items:flex-start; justify-content:space-between; gap:3px; font-size:12px; font-weight:800; margin:12px 5px 5px; line-height:1.4; }
.ap-selection { flex:0 0 16px; }
.ap-choice-description { font-size:10px; color:var(--muted); margin:0 5px 10px; line-height:1.6; }
.ap-choice-state { font-size:9px; font-weight:700; color:var(--green); margin:auto 5px 0; }
.appearance-note { font-size:12px; color:var(--muted); line-height:1.7; margin:24px 0 5px; }
.appearance-page>.link-btn { display:inline-flex; align-items:center; gap:7px; font-size:12px; }
.appearance-apply { position:sticky; bottom:var(--tabs-h); z-index:10; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; margin-top:22px; background:var(--cream); border-top:1px solid var(--line-2); box-shadow:0 -10px 12px var(--cream); }
.appearance-apply>div { min-width:0; display:grid; gap:3px; }
.appearance-apply strong { font-size:12px; line-height:1.4; }
.appearance-apply .btn { font-size:12px; height:46px; padding:0 15px; flex-shrink:0; }
@media(max-width:360px) { .appearance-page { padding-left:14px; padding-right:14px; } .appearance-grid { gap:8px; } .ap-thumbnail { padding:13px 9px; } .ap-mini-heading { font-size:21px; } }