/* Optional palettes and their shared surface treatment leave Quran content untouched. */
.appearance-choices { display:flex; flex-wrap:wrap; gap:14px; margin:0; padding:0; border:0; }
.appearance-group { display:flex; flex-wrap:wrap; gap:10px; width:100%; min-width:0; padding:12px; border:1px solid #b8c9c4; border-radius:10px; }
.appearance-group h3,.appearance-group h4 { flex-basis:100%; margin:0; font-size:15px; line-height:1.4; }
.appearance-group > label { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 14px; border:1px solid #9ebcb7; border-radius:9px; background:#fff; color:#1c1e21; cursor:pointer; }
.appearance-group > label:has(input:checked) { border:2px solid var(--palette-accent,#0866ff); background:var(--palette-soft,#eaf2ff); color:var(--palette-dark,#123a78); }
.appearance-swatch { flex:none; width:24px; height:24px; border:1px solid #798797; border-radius:50%; background:#fff; box-shadow:inset -7px 0 #17477e; }
.appearance-choices label:has(input[value="original"]) .appearance-swatch { background:#0e464b; box-shadow:inset -7px 0 #d7b66b; }
.appearance-choices label:has(input[value="sage"]) .appearance-swatch { background:#f5faf7; box-shadow:inset -7px 0 #146345; }
.appearance-choices label:has(input[value="sand"]) .appearance-swatch { background:#fff8ed; box-shadow:inset -7px 0 #784615; }
.appearance-choices label:has(input[value="slate"]) .appearance-swatch { background:#f3f5f5; box-shadow:inset -7px 0 #0b5964; }
.appearance-choices label:has(input[value="midnight"]) .appearance-swatch { background:#103e46; box-shadow:inset -7px 0 #e6c583; }
.appearance-choices label:has(input[value="images-one"]) .appearance-swatch { background:#063955; box-shadow:inset -7px 0 #e4b455; }
.appearance-choices label:has(input[value="sunset-mosque"]) .appearance-swatch { background:#e97986; box-shadow:inset -7px 0 #f6c874; }
.appearance-choices label:has(input[value="galaxy-dawn"]) .appearance-swatch { background:#21145c; box-shadow:inset -7px 0 #f591b3; }
.appearance-choices label:has(input[value="coastal-sunset"]) .appearance-swatch { background:#176071; box-shadow:inset -7px 0 #f6a65a; }
.appearance-choices label:has(input[value="moonlit-valley"]) .appearance-swatch { background:#0b3857; box-shadow:inset -7px 0 #f6d49b; }
.appearance-choices label:has(input[value="nebula-horizon"]) .appearance-swatch { background:#403a78; box-shadow:inset -7px 0 #f8c5a9; }
.appearance-choices label:has(input[value="light-spectrum"]) .appearance-swatch { background:#171150; box-shadow:inset -7px 0 #06cdeb; }
.appearance-choices label:has(input[value="sunset-flowers"]) .appearance-swatch { background:#754471; box-shadow:inset -7px 0 #ffb95c; }
.appearance-choices input { width:18px; height:18px; margin:0; accent-color:var(--palette-accent,#0866ff); }
.appearance-choices label:focus-within { outline:2px solid var(--palette-accent,#0866ff); outline-offset:2px; }
.appearance-note { margin:8px 0 0; font-size:13px; line-height:1.5; }
.post-settings-appearance { padding:4px 16px 14px; border-bottom:1px solid #d9e1df; }
.post-settings-dialog[open] { display:flex; flex-direction:column; }
.post-settings-dialog .post-settings-controls { flex:1 1 auto; min-height:0; max-height:none; }
.post-settings-appearance h3 { margin:8px 0; font-size:16px; }
.post-settings-appearance .appearance-note { color:#476069; }
.profile-appearance { margin-top:18px; }
.profile-appearance h2 { margin:0 0 8px; }
.profile-appearance .appearance-note { color:var(--muted); }
.images-one-overlay-control { display:none; margin-top:12px; }
.appearance-choices .images-one-overlay-control { flex-basis:100%; min-width:0; }
.images-one-overlay-control input { display:block; width:100%; accent-color:#075668; }
html[data-appearance="images-one"] .images-one-overlay-control,
html[data-appearance="sunset-mosque"] .images-one-overlay-control,
html[data-appearance="galaxy-dawn"] .images-one-overlay-control,
html[data-appearance="coastal-sunset"] .images-one-overlay-control,
html[data-appearance="moonlit-valley"] .images-one-overlay-control,
html[data-appearance="nebula-horizon"] .images-one-overlay-control,
html[data-appearance="light-spectrum"] .images-one-overlay-control,
html[data-appearance="sunset-flowers"] .images-one-overlay-control,
.appearance-choices:has(input[value="images-one"]:checked) .images-one-overlay-control,
 .appearance-choices:has(input[value="sunset-mosque"]:checked) .images-one-overlay-control,
.appearance-choices:has(input[value="galaxy-dawn"]:checked) .images-one-overlay-control,
.appearance-choices:has(input[value="coastal-sunset"]:checked) .images-one-overlay-control,
.appearance-choices:has(input[value="moonlit-valley"]:checked) .images-one-overlay-control,
.appearance-choices:has(input[value="nebula-horizon"]:checked) .images-one-overlay-control,
.appearance-choices:has(input[value="light-spectrum"]:checked) .images-one-overlay-control,
.appearance-choices:has(input[value="sunset-flowers"]:checked) .images-one-overlay-control { display:block; }

html[data-appearance="white"] { --palette-page:#f4f6fa; --palette-surface:#fff; --palette-accent:#17477e; --palette-hover:#12385f; --palette-soft:#e9f1fb; --palette-dark:#12385f; --palette-border:#ccd6e3; }
html[data-appearance="sage"] { --palette-page:#f3f7f4; --palette-surface:#fff; --palette-accent:#146345; --palette-hover:#104b35; --palette-soft:#e5f3ea; --palette-dark:#104b35; --palette-border:#c3d9ca; }
html[data-appearance="sand"] { --palette-page:#faf4e9; --palette-surface:#fffdf8; --palette-accent:#784615; --palette-hover:#5d350f; --palette-soft:#f5e7cf; --palette-dark:#5d350f; --palette-border:#d9c4a7; }
html[data-appearance="slate"] { --palette-page:#f3f5f5; --palette-surface:#fff; --palette-accent:#0b5964; --palette-hover:#08434a; --palette-soft:#dceff0; --palette-dark:#17353f; --palette-border:#bfd2d5; }
html[data-appearance="midnight"] { --palette-page:#082d35; --palette-surface:#103e46; --palette-accent:#e6c583; --palette-hover:#f6dea9; --palette-soft:#174b52; --palette-dark:#fff5dc; --palette-border:#e6c583; }
html[data-appearance="images-one"] { --palette-page:#071e30; --palette-surface:#fffdfa; --palette-accent:#075668; --palette-hover:#034653; --palette-soft:#e5f1ef; --palette-dark:#123e50; --palette-border:#b8c9c4; }
html[data-appearance="sunset-mosque"] { --palette-page:#f9eced; --palette-surface:#fff8f3; --palette-accent:#743154; --palette-hover:#54203c; --palette-soft:#f6dfe9; --palette-dark:#53223c; --palette-border:#d8aabd; }
html[data-appearance="galaxy-dawn"] { --palette-page:#14123d; --palette-surface:#fffdfa; --palette-accent:#39306e; --palette-hover:#282152; --palette-soft:#eeeafa; --palette-dark:#211b55; --palette-border:#b9b0d6; }
html[data-appearance="coastal-sunset"] { --palette-page:#253436; --palette-surface:#fffdfa; --palette-accent:#176071; --palette-hover:#104957; --palette-soft:#e5f1ef; --palette-dark:#154554; --palette-border:#b8c9c4; }
html[data-appearance="moonlit-valley"] { --palette-page:#0e2617; --palette-surface:#fffdfa; --palette-accent:#135374; --palette-hover:#0c3e59; --palette-soft:#e4eef4; --palette-dark:#103e58; --palette-border:#a6beca; }
html[data-appearance="nebula-horizon"] { --palette-page:#322d50; --palette-surface:#fffdfa; --palette-accent:#583a78; --palette-hover:#402b60; --palette-soft:#f3eaf3; --palette-dark:#482d68; --palette-border:#c4b2d0; }
html[data-appearance="light-spectrum"] { --palette-page:#091644; --palette-surface:#fffdfa; --palette-accent:#135778; --palette-hover:#0b3f5c; --palette-soft:#e5f1f8; --palette-dark:#163f68; --palette-border:#a7becd; }
html[data-appearance="sunset-flowers"] { --palette-page:#372a46; --palette-surface:#fffdfa; --palette-accent:#714052; --palette-hover:#563047; --palette-soft:#f8e9ed; --palette-dark:#613348; --palette-border:#d3afb7; }

html[data-appearance] body { background:var(--palette-page); color:#1c1e21; font-family:'Segoe UI',Tahoma,Arial,sans-serif; }
html[data-appearance] .site { background:var(--palette-page); }
html[data-appearance] .shell::before { background-image:none; }
html[data-appearance] .sidebar { background:var(--palette-surface); border-inline-end:1px solid var(--palette-border); color:#1c1e21; }
html[data-appearance] .sidebar .brand,
html[data-appearance] .sidebar .brand small,
html[data-appearance] .sidebar-footer,
html[data-appearance] .sidebar-footer small { color:#1c1e21; text-shadow:none; }
html[data-appearance] .sidebar .brand .desktop-tagline { color:#54616e; }
html[data-appearance] .sidebar .brand-mark,
html[data-appearance] .identity .brand-mark { display:none; background-image:none; }
html[data-appearance] .sidebar nav { background:none; }
html[data-appearance] .sidebar nav>* { color:#344054; }
html[data-appearance] .sidebar nav .active { color:var(--palette-dark); background:var(--palette-soft); border:1px solid var(--palette-border); box-shadow:none; }
html[data-appearance] .sidebar nav>*:hover,
html[data-appearance] .sidebar nav>*:focus-visible { color:var(--palette-dark); background:var(--palette-soft); outline-color:var(--palette-accent); }
html[data-appearance] .sidebar-footer { border-top:1px solid var(--palette-border); }
html[data-appearance] .sidebar-footer small { color:#54616e; }
html[data-appearance] .topbar { color:#1c1e21; background:var(--palette-surface); box-shadow:0 1px 2px #0002; }
html[data-appearance] .account { background:#e4e6eb; border:1px solid #c4c9d1; box-shadow:none; }
html[data-appearance] .account svg { fill:#344054; }
html[data-appearance] .account:focus-visible { outline-color:var(--palette-accent); }
html[data-appearance] .notification svg { stroke:#54616e; filter:none; }
html[data-appearance] .query input,
html[data-appearance] .query select { background:var(--palette-page); color:#1c1e21; border-color:#c5cad2; box-shadow:none; }
html[data-appearance] .query button { background:var(--palette-accent); color:#fff; border:1px solid var(--palette-accent); box-shadow:none; }
html[data-appearance] .mobile-menu { background:#e4e6eb; color:#1c1e21; border:1px solid #c5cad2; box-shadow:none; }
html[data-appearance] .card { background:var(--palette-surface); border-color:var(--palette-border); color:#1c1e21; box-shadow:0 1px 3px #0002; }
html[data-appearance] .topic-card > .medallion { background-color:transparent; border-radius:0; color:var(--palette-dark); }
html[data-appearance] .tabs button { background:var(--palette-page); color:#344054; border:1px solid var(--palette-border); }
html[data-appearance] .tabs button[aria-selected=true] { background:var(--palette-soft); color:var(--palette-dark); border-color:var(--palette-accent); box-shadow:none; }
:root:not([data-appearance]) .site .card .tabs button[aria-selected=true] { background:linear-gradient(#006b5d,#005c51); color:#fff; }
html[data-appearance] .bookmark { color:#54616e; }
html[data-appearance] .post-feedback button.post-feedback-item[aria-pressed=true] { color:var(--palette-accent); }
html[data-appearance] .empty-page { background:var(--palette-surface); color:#1c1e21; border-color:var(--palette-border); }
html[data-appearance] .empty-page p { color:#54616e; }
html[data-appearance] .post-settings-dialog,
html[data-appearance] .account-menu { background:var(--palette-surface); border-color:var(--palette-border); }

html[data-appearance] body:has(.profile-shell) { background:var(--palette-page); color:#1c1e21; }
html[data-appearance] .profile-header { border-color:var(--palette-border); }
html[data-appearance] .profile-shell { --gold:var(--palette-accent); --light:#1c1e21; --muted:#54616e; --line:var(--palette-border); --surface:var(--palette-surface); --ink:#fff; }
html[data-appearance] .profile-shell .brand,
html[data-appearance] .profile-shell .back { color:#1c1e21; }
html[data-appearance] .intro { background:var(--palette-surface); box-shadow:0 1px 3px #0002; }
html[data-appearance] .intro::before,
html[data-appearance] .intro::after { display:none; }
html[data-appearance] .intro #account-status { background:var(--palette-page); border-color:var(--palette-border); }
html[data-appearance] .identity,
html[data-appearance] .panel { box-shadow:0 1px 3px #0002; }
html[data-appearance] .profile-shell button { background:var(--palette-accent); color:#fff; border-color:var(--palette-accent); }
html[data-appearance] .profile-shell button:hover { background:var(--palette-hover); }
html[data-appearance] .profile-shell button:focus-visible,
html[data-appearance] .profile-shell a:focus-visible { outline-color:var(--palette-accent); }
html[data-appearance] .profile-shell .mark-actions button[aria-pressed=false],
html[data-appearance] .profile-shell #avatar-form button,
html[data-appearance] .profile-shell #sign-out { background:var(--palette-soft); color:var(--palette-dark); }
html[data-appearance] .post-mark { border-color:var(--palette-border); }
html[data-appearance] .profile-shell .appearance-choices label { color:#1c1e21; background:var(--palette-surface); }
html[data-appearance] .profile-shell .appearance-choices label:has(input:checked) { background:var(--palette-soft); color:var(--palette-dark); }
@media(max-width:1000px) {
  html[data-appearance] .topbar { background-image:none; }
  html[data-appearance] .sidebar { background:var(--palette-surface); }
  html[data-appearance] .sidebar .brand,
  html[data-appearance] .sidebar .brand small,
  html[data-appearance] .sidebar nav>* { color:#344054; }
  html[data-appearance] .sidebar nav .active { color:var(--palette-dark); background:var(--palette-soft); }
  html[data-appearance] .identity small { color:#54616e; }
}
html[data-appearance] .admin-hero { background:var(--palette-surface); }
html[data-appearance] .admin-hero #admin-status { background:var(--palette-page); border-color:var(--palette-border); color:#1c1e21; }
html[data-appearance] .admin-list li { background:var(--palette-page); border-color:var(--palette-border); }
/* Keep the ink on the painted surface, not on the page's palette. */
html:is([data-appearance="images-one"],[data-appearance="galaxy-dawn"]) .profile-shell .brand,
html:is([data-appearance="images-one"],[data-appearance="galaxy-dawn"]) .profile-shell .back { color:#fff; }
html:is([data-appearance="images-one"],[data-appearance="galaxy-dawn"]) .profile-shell .brand span { color:#fff; }
html:is([data-appearance="images-one"],[data-appearance="galaxy-dawn"]) .profile-shell footer { color:#fff; }
html:is([data-appearance="images-one"],[data-appearance="galaxy-dawn"]) .intro #account-status { color:#fff; }
html:is([data-appearance="images-one"],[data-appearance="galaxy-dawn"]) .admin-hero #admin-status { color:#fff; }
html:is([data-appearance="images-one"],[data-appearance="galaxy-dawn"]) .admin-list li { --light:#fff; --muted:#fff; color:#fff; }
html:is([data-appearance="images-one"],[data-appearance="galaxy-dawn"]) .admin-list .first-member { color:#fff; }
html[data-appearance="coastal-sunset"] .profile-shell .brand,
html[data-appearance="coastal-sunset"] .profile-shell .back,
html[data-appearance="coastal-sunset"] .profile-shell .brand span,
html[data-appearance="coastal-sunset"] .profile-shell footer,
html[data-appearance="coastal-sunset"] .intro #account-status,
html[data-appearance="coastal-sunset"] .admin-hero #admin-status,
html[data-appearance="coastal-sunset"] .admin-list li,
html[data-appearance="coastal-sunset"] .admin-list .first-member { color:#fff; }
html[data-appearance="coastal-sunset"] .admin-list li { --light:#fff; --muted:#fff; }
html[data-appearance="moonlit-valley"] .profile-shell .brand,
html[data-appearance="moonlit-valley"] .profile-shell .back,
html[data-appearance="moonlit-valley"] .profile-shell .brand span,
html[data-appearance="moonlit-valley"] .profile-shell footer,
html[data-appearance="moonlit-valley"] .intro #account-status,
html[data-appearance="moonlit-valley"] .admin-hero #admin-status,
html[data-appearance="moonlit-valley"] .admin-list li,
html[data-appearance="moonlit-valley"] .admin-list .first-member { color:#fff; }
html[data-appearance="moonlit-valley"] .admin-list li { --light:#fff; --muted:#fff; }
html[data-appearance="nebula-horizon"] .profile-shell .brand,
html[data-appearance="nebula-horizon"] .profile-shell .back,
html[data-appearance="nebula-horizon"] .profile-shell .brand span,
html[data-appearance="nebula-horizon"] .profile-shell footer,
html[data-appearance="nebula-horizon"] .intro #account-status,
html[data-appearance="nebula-horizon"] .admin-hero #admin-status,
html[data-appearance="nebula-horizon"] .admin-list li,
html[data-appearance="nebula-horizon"] .admin-list .first-member { color:#fff; }
html[data-appearance="nebula-horizon"] .admin-list li { --light:#fff; --muted:#fff; }
html[data-appearance="light-spectrum"] .profile-shell .brand,
html[data-appearance="light-spectrum"] .profile-shell .back,
html[data-appearance="light-spectrum"] .profile-shell .brand span,
html[data-appearance="light-spectrum"] .profile-shell footer,
html[data-appearance="light-spectrum"] .intro #account-status,
html[data-appearance="light-spectrum"] .admin-hero #admin-status,
html[data-appearance="light-spectrum"] .admin-list li,
html[data-appearance="light-spectrum"] .admin-list .first-member { color:#fff; }
html[data-appearance="light-spectrum"] .admin-list li { --light:#fff; --muted:#fff; }
html[data-appearance="sunset-flowers"] .profile-shell .brand,
html[data-appearance="sunset-flowers"] .profile-shell .back,
html[data-appearance="sunset-flowers"] .profile-shell .brand span,
html[data-appearance="sunset-flowers"] .profile-shell footer,
html[data-appearance="sunset-flowers"] .intro #account-status,
html[data-appearance="sunset-flowers"] .admin-hero #admin-status,
html[data-appearance="sunset-flowers"] .admin-list li,
html[data-appearance="sunset-flowers"] .admin-list .first-member { color:#fff; }
html[data-appearance="sunset-flowers"] .admin-list li { --light:#fff; --muted:#fff; }
html[data-appearance="images-one"] .admin-hero>p:not(.eyebrow) { color:#1c1e21; }
html[data-appearance] .profile-shell #admin-preview-controls { color:#fff; }
html[data-appearance] .profile-shell #admin-preview-controls p,
html[data-appearance] .profile-shell #admin-preview-controls a { color:#fff; }
/* Keep the legal pages' existing type metrics when a palette is selected. */
html[data-appearance] body:has(> main:not(.site):not(.profile-shell)) { font-family:system-ui,sans-serif; }

/* Midnight teal and gold: matches the supplied dark account reference without changing layout. */
html[data-appearance="midnight"] body { background:radial-gradient(ellipse at 50% -14%,#2a6267 0,#103f48 38%,#062b32 82%); color:#fff5dc; }
html[data-appearance="midnight"] .site { background:radial-gradient(circle at 50% 5%,#245c65,#07323b 52%,#062633); }
html[data-appearance="midnight"] .sidebar { background:linear-gradient(165deg,#073b44,#062934); border-inline-end-color:#d8b46f; color:#fff5dc; }
html[data-appearance="midnight"] .sidebar .brand,
html[data-appearance="midnight"] .sidebar .brand small,
html[data-appearance="midnight"] .sidebar-footer,
html[data-appearance="midnight"] .sidebar-footer small { color:#fff5dc; text-shadow:0 2px 5px #001; }
html[data-appearance="midnight"] .sidebar .brand-mark { display:block; }
html[data-appearance="midnight"] .sidebar nav>* { color:#fff; }
html[data-appearance="midnight"] .sidebar nav .active { color:#fff; background:linear-gradient(90deg,#005d62,#075533); border-color:#b9e0c4; }
html[data-appearance="midnight"] .topbar { color:#fff; background:transparent; }
html[data-appearance="midnight"] .account,
html[data-appearance="midnight"] .mobile-menu { background:#004856; color:#fff; border-color:#d4a756; }
html[data-appearance="midnight"] .account svg { fill:currentColor; }
html[data-appearance="midnight"] .notification svg { stroke:currentColor; }
html[data-appearance="midnight"] .query input,
html[data-appearance="midnight"] .query select { background:#07343d; color:#fff5dc; border-color:#e3c786; }
html[data-appearance="midnight"] .query button { background:#0c605b; color:#fff5dc; border-color:#d6b36a; }
html[data-appearance="midnight"] .card,
html[data-appearance="midnight"] .empty-page { background:#0d3d45; color:#fff5dc; border-color:#c5a766; }
html[data-appearance="midnight"] .tabs button { background:#0b353d; color:#fff5dc; border-color:#c5a766; }
html[data-appearance="midnight"] .tabs button[aria-selected=true] { background:#174b52; color:#fff5dc; border-color:#e6c583; }
html[data-appearance="midnight"] .bookmark,
html[data-appearance="midnight"] .empty-page p { color:#d3e1dc; }
html[data-appearance="midnight"] .post-settings-dialog,
html[data-appearance="midnight"] .account-menu { background:#103e46; border-color:rgba(230,197,131,.38); color:#fff5dc; }
html[data-appearance="midnight"] body:has(.profile-shell) { background:radial-gradient(ellipse at 50% -14%,#2a6267 0,#103f48 38%,#062b32 82%); color:#fff5dc; }
html[data-appearance="midnight"] .profile-shell { --gold:#e6c583; --light:#fff5dc; --muted:#d3e1dc; --line:rgba(230,197,131,.38); --surface:#103e46; --ink:#082e35; }
html[data-appearance="midnight"] .profile-header { border-color:rgba(232,218,180,.23); }
html[data-appearance="midnight"] .profile-shell .brand,
html[data-appearance="midnight"] .profile-shell .back { color:var(--light); }
html[data-appearance="midnight"] .intro { background:linear-gradient(152deg,rgba(35,91,94,.96),rgba(12,55,64,.98) 60%,rgba(8,46,53,.99)); }
html[data-appearance="midnight"] .intro::before { display:block; }
html[data-appearance="midnight"] .intro::after { display:block; }
html[data-appearance="midnight"] .intro #account-status { background:rgba(4,39,46,.42); border-color:rgba(211,225,220,.18); color:var(--light); }
html[data-appearance="midnight"] .profile-shell button { background:var(--gold); color:var(--ink); border-color:var(--gold); }
html[data-appearance="midnight"] .profile-shell button:hover { background:#f6dea9; border-color:#f6dea9; }
html[data-appearance="midnight"] .profile-shell .mark-actions button[aria-pressed=false],
html[data-appearance="midnight"] .profile-shell #avatar-form button,
html[data-appearance="midnight"] .profile-shell #sign-out { background:transparent; color:var(--light); }
html[data-appearance="midnight"] .post-mark { border-color:rgba(211,225,220,.3); }
html[data-appearance="midnight"] .profile-shell .appearance-choices label { background:#103e46; color:#fff5dc; border-color:rgba(230,197,131,.38); }
html[data-appearance="midnight"] .profile-shell .appearance-choices label:has(input:checked) { background:#174b52; color:#fff5dc; border-color:#e6c583; }
html[data-appearance="midnight"] .admin-hero { background:linear-gradient(145deg,rgba(35,91,94,.96),rgba(8,46,53,.98)); }
html[data-appearance="midnight"] .admin-hero #admin-status,
html[data-appearance="midnight"] .admin-list li { background:#103e46; border-color:rgba(211,225,220,.3); color:#fff5dc; }
/* Dark feed and menu: light ink outside the light comment/dialog bubbles. */
html[data-appearance="midnight"] .site .card .comment-preview { color:#1c1e21; }
html[data-appearance="midnight"] .site .card .empty-comment.live-comment .comment-preview { color:#fff; }
html[data-appearance="midnight"] .site .card .comment-empty { color:#fff; }
html[data-appearance="midnight"] .site .card .empty-comment.live-comment .comment-author,
html[data-appearance="midnight"] .site .card .empty-comment.live-comment .comment-time,
html[data-appearance="midnight"] .site .card .empty-comment.live-comment .comment-source { color:#fff; }
html[data-appearance="midnight"] .site .card .post-feedback { color:#fff; }
html[data-appearance="midnight"] .site .card .actions button.report { color:#fff; }
html[data-appearance="midnight"] .site .card .tajweed-text { color:#fff; }
html[data-appearance="midnight"] .site .card .tajweed-end { color:#fff; }
html[data-appearance="midnight"] .post-settings-appearance .appearance-note { color:#fff; }
html[data-appearance="midnight"] .account-menu :is(a,button):is(:hover,:focus-visible) { color:#1c1e21; }
html[data-appearance="midnight"] body:has(> main:not(.site):not(.profile-shell)) { color:#fff5dc !important; }
html[data-appearance="midnight"] body > main:not(.site):not(.profile-shell) { background:#103e46; }
html[data-appearance="midnight"] body > main:not(.site):not(.profile-shell) a { color:#e6c583 !important; }

/* Surface relief: paint-only, shared across every appearance. */
:root:not([data-appearance]) {
  --relief-shadow:#00172088;
  --relief-light:#ffffff30;
  --relief-well-dark:#394f6170;
  --relief-well-light:#ffffffb8;
}
html[data-appearance] {
  --relief-shadow:#657f9c50;
  --relief-light:#fff;
  --relief-well-dark:#657f9c55;
  --relief-well-light:#ffffffed;
}
html[data-appearance="midnight"] { --relief-shadow:#00172088; --relief-light:#ffffff30; --relief-well-dark:#394f6170; --relief-well-light:#ffffffb8; }
html[data-appearance="sage"] { --relief-shadow:#60817159; --relief-well-dark:#60817160; }
html[data-appearance="sand"] { --relief-shadow:#8b70485b; --relief-well-dark:#8b704866; }
html[data-appearance="slate"] { --relief-shadow:#6077805b; --relief-well-dark:#60778066; }
.site .card, html[data-appearance] .site .card,
.site .empty-page, .site .topbar, .site .sidebar,
.profile-shell .intro, html[data-appearance] .profile-shell .intro,
.profile-shell .identity, .profile-shell .panel,
.profile-shell .admin-hero, .profile-shell .admin-list li,
.site .comment-preview, .comments-dialog,
.post-settings-dialog, .account-menu, .post-share-dialog,
.post-comment-remove-dialog,
body > main:not(.site):not(.profile-shell) {
  box-shadow:-4px -4px 12px var(--relief-light), 8px 9px 18px var(--relief-shadow), inset 0 1px #ffffff45;
}
html[data-appearance] body > main:not(.site):not(.profile-shell) { background:var(--palette-surface); }
:root:not([data-appearance]) body > main:not(.site):not(.profile-shell) { background:#fff; }
.site .query input, .site .query select, .site textarea,
.profile-shell select, .comments-dialog textarea,
.profile-shell #account-status, .comments-bubble {
  box-shadow:inset 3px 3px 6px var(--relief-well-dark), inset -3px -3px 6px var(--relief-well-light);
}
.site button:not(.verse-trigger):not(:disabled),
.site .query button:not(:disabled), .site .post-feedback-item:not(:disabled),
.profile-shell button:not(:disabled), .profile-shell .primary,
.profile-shell .reading-link, .post-settings-dialog button:not(:disabled),
.comments-dialog button:not(:disabled), .post-share-dialog button:not(:disabled),
.post-comment-remove-dialog button:not(:disabled),
#comment-options button:not(:disabled), .appearance-choices label {
  box-shadow:inset 3px 3px 6px #001b2455, inset -2px -2px 6px #ffffff88;
}
.site .tabs button[aria-selected=true], html[data-appearance] .site .tabs button[aria-selected=true],
.site .sidebar nav .active, html[data-appearance] .site .sidebar nav .active {
  box-shadow:inset 3px 3px 6px #001b2455, inset -2px -2px 6px #ffffff88;
}

/* Icon-action capsules: paint only; preserve each control footprint. */
.post-comments-dialog .post-comments-compose-body>div {
  box-shadow:inset 3px 3px 6px var(--relief-well-dark), inset -3px -3px 6px var(--relief-well-light);
}
.post-comments-dialog .post-comments-compose-body textarea { box-shadow:none; }
.post-comments-dialog #post-comments-compose {
  background:var(--icon-pill-surface);
  border-radius:999px;
  box-shadow:0 0 0 1px var(--icon-pill-rim), 0 2px 5px var(--icon-pill-shadow), inset 0 1px var(--icon-pill-light);
}
:root {
  --icon-pill-surface:#f2f8f6;
  --icon-pill-rim:#c6d9d2;
  --icon-pill-shadow:#42635a55;
  --icon-pill-light:#fff;
}
html[data-appearance] {
  --icon-pill-surface:var(--palette-soft);
  --icon-pill-rim:var(--palette-border);
  --icon-pill-shadow:var(--relief-shadow);
}
html[data-appearance="midnight"] {
  --icon-pill-rim:#c5a766;
  --icon-pill-light:#ffffff30;
}
html[data-appearance="midnight"] .comments-dialog {
  --icon-pill-surface:#f2f8f6;
  --icon-pill-rim:#c6d9d2;
  --icon-pill-shadow:#42635a55;
  --icon-pill-light:#fff;
}
.site .post-feedback button.post-feedback-item:not(:disabled),
.post-comments-dialog .post-feedback button.post-feedback-item:not(:disabled),
.post-feedback .post-feedback-reaction,
.site .actions button.like:not(:disabled),
.site .actions button.reply:not(:disabled),
.site .actions button.more:not(:disabled),
.post-comments-dialog .post-comment-line button.owner-more:not(:disabled),
.post-comments-dialog .post-comment-actions button:not(:disabled),
.post-comments-dialog #post-comments-sort-trigger:not(:disabled) {
  background:var(--icon-pill-surface);
  border-radius:999px;
  box-shadow:0 0 0 3px var(--icon-pill-surface), 0 0 0 4px var(--icon-pill-rim),
             0 3px 7px var(--icon-pill-shadow), inset 0 1px var(--icon-pill-light);
}
.site .post-feedback button.post-feedback-item:active,
.post-comments-dialog .post-feedback button.post-feedback-item:active,
.site .actions button:active,
.post-comments-dialog .post-comment-line button.owner-more:active,
.post-comments-dialog .post-comment-actions button:active,
.post-comments-dialog #post-comments-sort-trigger:active {
  box-shadow:0 0 0 3px var(--icon-pill-surface), 0 0 0 4px var(--icon-pill-rim),
             inset 2px 2px 4px var(--icon-pill-shadow);
}
.site .actions button:hover, .site .actions button:focus-visible { text-decoration:none; }
.site .actions button.report, .comments-dialog .thread-actions button {
  box-shadow:none;
}
.site .mobile-menu { border-radius:999px; }
html[data-appearance="midnight"] .site .post-feedback .post-feedback-item,
html[data-appearance="midnight"] .site .actions button:not(.report) { color:#fff5dc; }

/* Sidebar navigation typography and breathing room. */
.site .sidebar nav { gap:12px; }
.site .sidebar nav>a {
  padding-block:13px;
  font-weight:600;
  line-height:1.35;
}
@media(max-width:1000px) {
  .site .sidebar nav>a {
    padding-block:clamp(9px,2.5cqw,13px);
    font-size:clamp(14px,3cqw,17px);
  }
}
/* Sidebar navigation relief: paint only. */
html[data-appearance] .site .sidebar nav {
  --nav-relief-surface:var(--palette-soft);
  --nav-relief-hover:var(--palette-soft);
}
html[data-appearance="midnight"] .site .sidebar nav {
  --nav-relief-surface:#124c50;
  --nav-relief-hover:#17645a;
}
.site .sidebar nav>a:not(.active) {
  background:var(--nav-relief-surface,linear-gradient(145deg,#104349,#082f38));
  box-shadow:-2px -2px 5px var(--relief-light), 3px 4px 7px var(--relief-shadow), inset 0 1px #ffffff29;
}
.site .sidebar nav>a.active,
html[data-appearance] .site .sidebar nav>a.active {
  box-shadow:-2px -2px 5px var(--relief-light), 3px 4px 8px var(--relief-shadow),
             inset 0 1px #ffffff55, inset 2px 2px 5px #001b2444;
}
.site .sidebar nav>a:not(.active):is(:hover,:focus-visible) {
 background:var(--nav-relief-hover,#18634f);
}

/* Phone navigation rail and expansion. */
@media(max-width:1000px) {
 .site .shell { position:relative; }
 .site .mobile-menu { z-index:11; }
 .site .sidebar .nav-icon { display:inline-block; min-width:1em; text-align:center; }
}
@media(max-width:600px) {
 .site .shell { display:grid; grid-template-columns:36px minmax(0,1fr); }
 .site .content { grid-column:2; grid-row:1; min-width:0; }
 .site .sidebar {
   display:block;
   position:fixed;
   top:8px;
   left:1px;
   width:34px;
   height:calc(100dvh - 16px);
   max-height:calc(100dvh - 16px);
   padding:2px;
   overflow-x:hidden;
   overflow-y:auto;
   border-radius:18px;
   box-shadow:inset 0 1px #ffffff55;
   transition:width .4s cubic-bezier(.2,.8,.2,1), border-radius .4s ease;
 }
 .site .sidebar.open { width:min(140px,calc(100vw - 16px)); height:calc(100dvh - 16px); display:flex; flex-direction:column; padding:10px 6px; border-radius:18px; box-shadow:0 10px 28px #001b2499, inset 0 1px #ffffff55; }
 .site .mobile-menu {
   position:fixed;
   top:10px;
   left:3px;
   width:30px;
   height:30px;
   min-width:30px;
   min-height:30px;
   font-size:17px;
 }
 .site .sidebar .brand { display:none; }
 .site .sidebar.open .brand { display:block; padding-top:38px; font-size:20px; line-height:1.25; flex-shrink:0; }
 .site .sidebar nav { min-height:calc(100dvh - 84px); margin-top:0; padding:56px 0 4px; gap:9px; align-content:space-evenly; }
 .site .sidebar.open nav { min-height:0; width:100%; margin-top:4px; padding:0; gap:2px; align-content:start; flex-shrink:0; }
 .site .sidebar nav>a { display:block; min-height:44px; padding:10px 0; text-align:center; }
 .site .sidebar:not(.open) .nav-label { display:none; }
 .site .sidebar.open nav>a { width:100%; min-height:44px; padding:9px 5px; font-size:14px; text-align:right; white-space:normal; }
 .site .sidebar.open nav>a .nav-icon { width:28px; min-width:28px; }
 .site .sidebar.open nav>a .nav-label { display:inline-block; margin-inline-start:6px; max-width:calc(100% - 34px); white-space:normal; }
 .site .sidebar.open .nav-label { display:inline; }
 .site .sidebar.open .sidebar-footer { display:grid; position:relative; margin-top:auto; flex-shrink:0; font-size:18px; }
 .site .sidebar.open .sidebar-footer small { font-size:12px; }
 html:not([data-appearance]) .site .sidebar.open .brand,
 html:not([data-appearance]) .site .sidebar.open .sidebar-footer { color:#f4db9f; }
 html:not([data-appearance]) .site .sidebar.open .sidebar-footer small { color:#fff; }
 .site .sidebar nav>a:focus-visible { outline:2px solid #f6dc9b; outline-offset:1px; }
 .site .sidebar .nav-icon { min-width:18px; font-size:17px; line-height:1; vertical-align:middle; }
}
@media(max-width:600px) and (prefers-reduced-motion:reduce) {
 .site .sidebar { transition:none; }
}

/* Owner artwork is decorative only; cards and Quran remain live elements. */
html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) { --icon-pill-surface:#f2f8f6; }
@media(min-width:1001px) {
 html[data-appearance="images-one"] body:has(> .site) {
  background-image:linear-gradient(rgb(7 30 48 / var(--images-one-overlay,0)),rgb(7 30 48 / var(--images-one-overlay,0))),url('assets/images-one-desktop.webp');
  background-position:center top,center top;
  background-size:100% 100%,cover;
  background-attachment:fixed,fixed;
  background-repeat:no-repeat;
 }
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site { background:transparent; }
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .shell::before { background-image:none; }
}
html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site :is(.topbar,.sidebar nav,.sidebar nav>a:not(.active),.sidebar nav>a.active,.query input,.query select,.query button,.account,.mobile-menu,.empty-page) {
 background:transparent;
 box-shadow:none;
}
html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar {
 background:transparent;
 box-shadow:none;
}
@media(max-width:600px) {
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar.open { background:var(--palette-hover); }
}
html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .card { background:#fff; color:#133959; box-shadow:none; }
html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .card .comment-preview { background:#fff; color:#133959; }
html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .card .tabs button { background:linear-gradient(#f0f5f7,#d9e5ed); color:#104269; }
html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .card .tabs button[aria-selected=true] { background:linear-gradient(#006b5d,#005c51); color:#fff; }
html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar nav {
 --nav-relief-surface:transparent;
 --nav-relief-hover:transparent;
}
html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site :is(.topbar,.sidebar,.empty-page,.query input,.query select,.query button,.sidebar nav>a,.sidebar .brand,.sidebar .brand small,.sidebar .brand .desktop-tagline,.sidebar .sidebar-footer,.sidebar .sidebar-footer small,.identity small) {
 color:#fff5db;
}
html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site :is(.query select,.query select:disabled) {
 background:transparent;
 color:#fff5db;
 opacity:1;
 color-scheme:dark;
}
html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .query select option {
 background:#071e30;
 color:#fff5db;
}
html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .query input::placeholder { color:#fff5db; }
html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .header-search-icon svg { stroke:#fff5db; }
html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .account svg { fill:#fff5db; }
html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .notification svg { stroke:#fff5db; }
html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .empty-page p {
 color:#fff5db;
 text-shadow:0 1px 3px #001a21;
}
html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .topic-card > .medallion { color:#201b14; }
html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar nav>a:is(:hover,:focus-visible) { background:transparent; }
@media(max-width:1000px) {
 html[data-appearance="images-one"] .site {
  background-color:#071e30;
  background-image:linear-gradient(rgb(7 30 48 / var(--images-one-overlay,0)),rgb(7 30 48 / var(--images-one-overlay,0))),url('assets/images-one-mobile.webp');
  background-position:center top,center top;
  background-size:100% 100%,100% auto;
  background-repeat:no-repeat;
 }
}

/* Images-one desktop sidebar: separate links and live-text ornament. */
@media(min-width:1001px) {
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar nav>a:not(.active) {
  background:linear-gradient(115deg,rgb(4 36 50 / .84),rgb(5 47 56 / .68));
  box-shadow:inset 0 0 0 1px rgb(226 205 149 / .55);
 }
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar nav>a.active {
  background:linear-gradient(115deg,rgb(0 99 92 / .94),rgb(3 68 76 / .9));
  border-color:#e4c680;
  box-shadow:inset 0 0 0 1px rgb(255 249 217 / .35);
 }
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar nav>a:is(:hover,:focus-visible) {
  background:linear-gradient(115deg,rgb(4 98 96 / .96),rgb(6 72 82 / .9));
 }
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar nav .nav-icon {
  vertical-align:middle;
  color:#f0d393;
 }
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar nav .nav-label { vertical-align:middle; }
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar .brand,
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar .sidebar-footer {
  background:transparent;
  text-shadow:0 1px 2px #00161c;
 }
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar .sidebar-footer { border-top-color:transparent; }
}

/* Images-one desktop lettering: decorative ink, not controls. */
@media(min-width:1001px) {
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar .brand { position:relative; }
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar .brand,
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar .sidebar-footer {
  isolation:isolate;
  font-family:'Noto Naskh Arabic','Segoe UI',Tahoma,sans-serif;
  font-weight:700;
  color:#f4db9f;
  text-shadow:0 1px 1px #001920;
 }
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar .brand::before,
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar .sidebar-footer::before {
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  z-index:-1;
  pointer-events:none;
  background:
   linear-gradient(90deg,transparent,#e7c98799,transparent) center top / calc(100% - 32px) 1px no-repeat,
   linear-gradient(90deg,transparent,#e7c98777,transparent) center bottom / calc(100% - 32px) 1px no-repeat,
   linear-gradient(130deg,rgb(2 25 37 / .93),rgb(7 55 63 / .82) 52%,rgb(2 26 38 / .93));
  clip-path:polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px));
 }
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar .brand::before { top:78px; bottom:0; }
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar .sidebar-footer::before { top:15px; bottom:6px; }
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar .brand::after,
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar .sidebar-footer::after {
  content:"";
  position:absolute;
  left:calc(50% - 4px);
  width:8px;
  height:8px;
  background:#e7c987;
  border:1px solid #072b37;
  transform:rotate(45deg);
  pointer-events:none;
 }
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar .brand::after { bottom:-4px; }
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar .sidebar-footer::after { top:11px; }
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar .brand .desktop-tagline {
  background:linear-gradient(90deg,transparent,rgb(231 204 147 / .55),transparent) center top / 70% 1px no-repeat;
  color:#fff1cc;
  font-family:'Segoe UI',Tahoma,sans-serif;
  font-weight:500;
 }
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar .sidebar-footer { font-size:22px; }
 html:is([data-appearance="images-one"],[data-appearance="sunset-mosque"],[data-appearance="galaxy-dawn"],[data-appearance="coastal-sunset"],[data-appearance="moonlit-valley"],[data-appearance="nebula-horizon"],[data-appearance="light-spectrum"],[data-appearance="sunset-flowers"]) .site .sidebar .sidebar-footer small {
  color:#e8dcb9;
  font-family:'Segoe UI',Tahoma,sans-serif;
  font-weight:400;
 }
}

/* A second, independently selectable image pair; only the artwork and palette change. */
@media(min-width:1001px) {
 html[data-appearance="sunset-mosque"] body:has(> .site) {
  background-image:linear-gradient(rgb(45 20 39 / var(--images-one-overlay,0)),rgb(45 20 39 / var(--images-one-overlay,0))),url('assets/sunset-mosque-desktop.webp');
  background-position:center top,center top;
  background-size:100% 100%,cover;
  background-attachment:fixed,fixed;
  background-repeat:no-repeat;
 }
}
html[data-appearance="sunset-mosque"] .site { background:transparent; }

@media(max-width:1000px) {
 html[data-appearance="sunset-mosque"] .site {
  background-color:#6d2c2e;
  background-image:linear-gradient(rgb(45 20 39 / var(--images-one-overlay,0)),rgb(45 20 39 / var(--images-one-overlay,0))),url('assets/sunset-mosque-mobile.webp');
  background-position:center top,center top;
  background-size:100% 100%,100% auto;
  background-repeat:no-repeat;
 }
}

/* Owner-supplied starry mountain pair, without changing card geometry. */
@media(min-width:1001px) {
 html[data-appearance="galaxy-dawn"] body:has(> .site) {
  background-image:linear-gradient(rgb(20 18 61 / var(--images-one-overlay,0)),rgb(20 18 61 / var(--images-one-overlay,0))),url('assets/galaxy-dawn-desktop.webp');
  background-position:center top,center top;
  background-size:100% 100%,cover;
  background-attachment:fixed,fixed;
  background-repeat:no-repeat;
 }
}
html[data-appearance="galaxy-dawn"] .site { background:transparent; }
@media(max-width:1000px) {
 html[data-appearance="galaxy-dawn"] .site {
  background-color:#241f43;
  background-image:linear-gradient(rgb(20 18 61 / var(--images-one-overlay,0)),rgb(20 18 61 / var(--images-one-overlay,0))),url('assets/galaxy-dawn-mobile.webp');
  background-position:center top,center top;
  background-size:100% 100%,100% auto;
  background-repeat:no-repeat;
 }
}

/* Owner-supplied coastal sunset pair, without moving page content. */
@media(min-width:1001px) {
 html[data-appearance="coastal-sunset"] body:has(> .site) {
  background-image:linear-gradient(rgb(37 52 54 / var(--images-one-overlay,0)),rgb(37 52 54 / var(--images-one-overlay,0))),url('assets/coastal-sunset-desktop.webp');
  background-position:center top,center top;
  background-size:100% 100%,cover;
  background-attachment:fixed,fixed;
  background-repeat:no-repeat;
 }
}
html[data-appearance="coastal-sunset"] .site { background:transparent; }
@media(max-width:1000px) {
 html[data-appearance="coastal-sunset"] .site {
  background-color:#453f3a;
  background-image:linear-gradient(rgb(37 52 54 / var(--images-one-overlay,0)),rgb(37 52 54 / var(--images-one-overlay,0))),url('assets/coastal-sunset-mobile.webp');
  background-position:center top,center top;
  background-size:100% 100%,100% auto;
  background-repeat:no-repeat;
 }
}

/* Owner-supplied moonlit valley; page geometry remains unchanged. */
@media(min-width:1001px) {
 html[data-appearance="moonlit-valley"] body:has(> .site) {
  background-image:linear-gradient(rgb(12 35 57 / var(--images-one-overlay,0)),rgb(12 35 57 / var(--images-one-overlay,0))),url('assets/moonlit-valley-desktop.webp');
  background-position:center top,center top;
  background-size:100% 100%,cover;
  background-attachment:fixed,fixed;
  background-repeat:no-repeat;
 }
}
html[data-appearance="moonlit-valley"] .site { background:transparent; }
@media(max-width:1000px) {
 html[data-appearance="moonlit-valley"] .site {
  background-color:#0e2617;
  background-image:linear-gradient(rgb(12 35 57 / var(--images-one-overlay,0)),rgb(12 35 57 / var(--images-one-overlay,0))),url('assets/moonlit-valley-mobile.webp');
  background-position:center top,center top;
  background-size:100% 100%,100% auto;
  background-repeat:no-repeat;
 }
}

/* Owner-supplied nebula horizon; page geometry remains unchanged. */
@media(min-width:1001px) {
 html[data-appearance="nebula-horizon"] body:has(> .site) {
  background-image:linear-gradient(rgb(35 29 58 / var(--images-one-overlay,0)),rgb(35 29 58 / var(--images-one-overlay,0))),url('assets/nebula-horizon-desktop.webp');
  background-position:center top,center top;
  background-size:100% 100%,cover;
  background-attachment:fixed,fixed;
  background-repeat:no-repeat;
 }
}
html[data-appearance="nebula-horizon"] .site { background:transparent; }
@media(max-width:1000px) {
 html[data-appearance="nebula-horizon"] .site {
  background-color:#322d50;
  background-image:linear-gradient(rgb(35 29 58 / var(--images-one-overlay,0)),rgb(35 29 58 / var(--images-one-overlay,0))),url('assets/nebula-horizon-mobile.webp');
  background-position:center top,center top;
  background-size:100% 100%,100% auto;
  background-repeat:no-repeat;
 }
}

/* Owner-supplied light spectrum; page geometry remains unchanged. */
@media(min-width:1001px) {
 html[data-appearance="light-spectrum"] body:has(> .site) {
  background-image:linear-gradient(rgb(8 20 47 / var(--images-one-overlay,0)),rgb(8 20 47 / var(--images-one-overlay,0))),url('assets/light-spectrum-desktop.webp');
  background-position:center top,center top;
  background-size:100% 100%,cover;
  background-attachment:fixed,fixed;
  background-repeat:no-repeat;
 }
}
html[data-appearance="light-spectrum"] .site { background:transparent; }
@media(max-width:1000px) {
 html[data-appearance="light-spectrum"] .site {
  background-color:#091644;
  background-image:linear-gradient(rgb(8 20 47 / var(--images-one-overlay,0)),rgb(8 20 47 / var(--images-one-overlay,0))),url('assets/light-spectrum-mobile.webp');
  background-position:center top,center top;
  background-size:100% 100%,100% auto;
  background-repeat:no-repeat;
 }
}

/* Owner-supplied sunset flowers; page geometry remains unchanged. */
@media(min-width:1001px) {
 html[data-appearance="sunset-flowers"] body:has(> .site) {
  background-image:linear-gradient(rgb(51 31 57 / var(--images-one-overlay,0)),rgb(51 31 57 / var(--images-one-overlay,0))),url('assets/sunset-flowers-desktop.webp');
  background-position:center top,center top;
  background-size:100% 100%,cover;
  background-attachment:fixed,fixed;
  background-repeat:no-repeat;
 }
}
html[data-appearance="sunset-flowers"] .site { background:transparent; }
@media(max-width:1000px) {
 html[data-appearance="sunset-flowers"] .site {
  background-color:#372a46;
  background-image:linear-gradient(rgb(51 31 57 / var(--images-one-overlay,0)),rgb(51 31 57 / var(--images-one-overlay,0))),url('assets/sunset-flowers-mobile.webp');
  background-position:center top,center top;
  background-size:100% 100%,100% auto;
  background-repeat:no-repeat;
 }
}

/* Foreground reading time beside the existing sidebar footer. */
@media(min-width:1001px) {
 .site .sidebar .brand { top:-8px; position:relative; }
}
.site .sidebar .member-time {
 position:absolute;
 bottom:110px;
 left:12px;
 right:12px;
 padding:8px 5px;
 border:1px solid #b79b63;
 border-radius:10px;
 background:#062b35e8;
 color:#fff1cc;
 font-size:13px;
 text-align:center;
}
.site .sidebar .member-time span { display:block; direction:ltr; font-variant-numeric:tabular-nums; font-size:18px; }
@media(max-width:1000px) {
 .site .sidebar .member-time { position:relative; bottom:auto; left:auto; right:auto; margin-top:12px; }
}
@media(max-width:600px) {
 .site .sidebar:not(.open) .member-time { display:none; }
 .site .sidebar.open .member-time { position:relative; bottom:auto; left:auto; right:auto; width:100%; margin-top:auto; flex-shrink:0; font-size:11px; padding:4px; }
 .site .sidebar.open .member-time span { font-size:15px; }
 .site .sidebar.open .sidebar-footer { margin-top:0; }
}