/* Light mode. Beta H Pixel is designed dark, so every surface, border and ink
   colour used by the shell, the community pages and the index gallery is
   re-declared here instead of being hunted down one rule at a time.
   This file is linked last on purpose: equal-specificity rules win by order. */

:root {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
  color: var(--lt-ink, #16211c);
  background: var(--lt-bg, #f2f5f2);

  /* Shared light palette */
  --lt-bg: #f2f5f2;
  --lt-panel: #ffffff;
  --lt-raised: #eef2ee;
  --lt-soft: #e6ebe6;
  --lt-line: #dbe2db;
  --lt-line-strong: #c4cec5;
  --lt-ink: #16211c;
  --lt-muted: #5c6a61;
  --lt-accent: #00795a;
  --lt-accent-solid: #00b483;
  --lt-accent-wash: #d9f5ea;
  --lt-danger: #b3263f;
  --lt-shadow: 0 10px 26px rgb(20 40 30 / 10%);

  /* Design tokens shared with the dark shell */
  --shell-surface: var(--lt-panel);
  --shell-hover: var(--lt-raised);
  --shell-accent: var(--lt-accent);
  --shell-text: var(--lt-ink);
  --shell-muted: var(--lt-muted);
  --surface: var(--lt-panel);
  --surface-hover: var(--lt-raised);
  --accent: var(--lt-accent);
  --text: var(--lt-ink);
  --muted-text: var(--lt-muted);
  --site-accent: var(--lt-accent);
  --site-text: var(--lt-ink);
  --site-muted: var(--lt-muted);
  --site-surface: var(--lt-panel);
  --site-border: var(--lt-line);
  --community-bg: var(--lt-bg);
  --community-panel: var(--lt-panel);
  --community-raised: var(--lt-raised);
  --community-line: var(--lt-line);
  --community-ink: var(--lt-ink);
  --community-muted: var(--lt-muted);
  --community-accent: var(--lt-accent);
  --muted: var(--lt-muted);
}

/* ── Application shell ─────────────────────────────────────────────── */
html[data-theme="light"] body.bh-app-page { color: var(--lt-ink); background: var(--lt-bg); }
html[data-theme="light"] .bh-main { background: var(--lt-bg); color: var(--lt-ink); }
html[data-theme="light"] .bh-sidebar { border-color: var(--lt-line); background: var(--lt-panel); }
html[data-theme="light"] .bh-side-link { color: #33413a; }
html[data-theme="light"] .bh-side-link svg { stroke: #5f7169; }
html[data-theme="light"] .bh-side-link:hover,
html[data-theme="light"] .bh-side-link:focus-visible { color: var(--lt-ink); background: var(--lt-raised); }
html[data-theme="light"] .bh-side-link.is-active { color: #00543c; background: var(--lt-accent-wash); box-shadow: inset 4px 0 var(--lt-accent); }
html[data-theme="light"] .bh-side-divider { background: var(--lt-line); }
html[data-theme="light"] .bh-sidebar-bottom { border-color: var(--lt-line); }
html[data-theme="light"] .bh-account { border-color: var(--lt-line); background: var(--lt-raised); color: var(--lt-ink); }
html[data-theme="light"] .bh-account img { border-color: var(--lt-line); }
html[data-theme="light"] .bh-account-copy strong { color: var(--lt-ink); }
html[data-theme="light"] .bh-account-copy small,
html[data-theme="light"] .bh-account-chevron { color: var(--lt-muted); }
html[data-theme="light"] .bh-login { color: #04241a; background: var(--lt-accent-solid); }
html[data-theme="light"] .bh-page-toolbar,
html[data-theme="light"] .bh-main > header.he { border-color: var(--lt-line); background: rgb(255 255 255 / 92%); }
html[data-theme="light"] .bh-page-title { color: var(--lt-ink); }
html[data-theme="light"] .bh-mobile-nav { border-color: var(--lt-line-strong); background: rgb(255 255 255 / 96%); box-shadow: 0 -6px 22px rgb(20 40 30 / 12%); }
html[data-theme="light"] .bh-mobile-link { color: var(--lt-muted); }
html[data-theme="light"] .bh-mobile-link.is-active { color: #00543c; background: var(--lt-accent-wash); }
html[data-theme="light"] .bh-main > header.he .search,
html[data-theme="light"] .bh-main .main-toolbar .search { border-color: var(--lt-line-strong); background: var(--lt-panel); }
html[data-theme="light"] .bh-main > header.he .search:focus-within,
html[data-theme="light"] .bh-main .main-toolbar .search:focus-within { border-color: var(--lt-accent); background: var(--lt-panel); box-shadow: 0 0 0 3px rgb(0 122 90 / 12%); }
html[data-theme="light"] .bh-main > header.he .search input,
html[data-theme="light"] .bh-main .main-toolbar .search input { color: var(--lt-ink); }
html[data-theme="light"] .bh-main > header.he #suggestionBox,
html[data-theme="light"] .bh-main .main-toolbar #suggestionBox { border-color: var(--lt-line); background: var(--lt-panel); box-shadow: var(--lt-shadow); }
html[data-theme="light"] .bh-main :is(.search-suggestion-message, .bh-main #suggestionBox p) { color: var(--lt-ink); }
html[data-theme="light"] .bh-main :is(.search-suggestion-message a, .search-suggestion-link) { color: var(--lt-accent); }
html[data-theme="light"] .bh-main .language-picker-wrap { border-color: var(--lt-line-strong); background: var(--lt-panel); }
html[data-theme="light"] .bh-main .language-picker-wrap select { background: var(--lt-panel); color: var(--lt-ink); }
html[data-theme="light"] .bh-main .community-topbar { background: rgb(255 255 255 / 92%); }
html[data-theme="light"] .bh-main .community-topbar-title,
html[data-theme="light"] .bh-main .community-topbar a { color: var(--lt-ink); }

/* ── Panels, cards, forms ──────────────────────────────────────────── */
html[data-theme="light"] .bh-main :is(.profile-card, .settings-card, .community-form, .shop-card, .inventory-card, .membership-card, .shop-intro, .support-card) {
  border-color: var(--lt-line);
  background: var(--lt-panel);
  color: var(--lt-ink);
  box-shadow: var(--lt-shadow);
}
html[data-theme="light"] .bh-main :is(.community-content, .community-shell, .shop-shell, .support-shell, .settings-page) { color: var(--lt-ink); }
html[data-theme="light"] .bh-main :is(.community-kicker, .profile-handle, .profile-bio, .community-post-card p, .post-card-meta, .membership-card > p, .membership-card ul, .support-disabled, .shop-intro p:not(.community-kicker), .profile-stats > button, .profile-stats > div, .post-detail-actions, .post-author, .comment-author, .membership-price, .membership-expiry, .membership-note, .item-state, .settings-section-heading p, .settings-note p, .settings-about p, .community-publish-form label) { color: var(--lt-muted); }
html[data-theme="light"] .bh-main :is(.community-post-card h2, .community-post-card h3, .profile-title-row h1, .section-heading h2, .settings-card h2, .settings-card h3, .membership-card h2, .support-card h1) { color: var(--lt-ink); }
html[data-theme="light"] .bh-main .community-button { border-color: var(--lt-line-strong); background: var(--lt-raised); color: var(--lt-ink); }
html[data-theme="light"] .bh-main .community-button:hover { border-color: var(--lt-accent); }
html[data-theme="light"] .bh-main .community-button.primary { border-color: transparent; background: var(--lt-accent-solid); color: #04241a; }
html[data-theme="light"] .bh-main .community-button.quiet { background: transparent; }
html[data-theme="light"] .bh-main .community-post-card a,
html[data-theme="light"] .bh-main .settings-information-links a { color: var(--lt-accent); }
html[data-theme="light"] .bh-main :is(input, select, textarea) { border-color: var(--lt-line-strong); background-color: var(--lt-panel); color: var(--lt-ink); }
html[data-theme="light"] .bh-main :is(input, select, textarea)::placeholder { color: #8b978f; }
html[data-theme="light"] .bh-main .community-status { color: #33465c; }
html[data-theme="light"] .bh-main .community-status[data-kind="error"] { color: var(--lt-danger); }
html[data-theme="light"] .bh-main .settings-note { border-inline-start-color: var(--lt-accent); background: var(--lt-accent-wash); }
html[data-theme="light"] .bh-main .settings-icon { background: var(--lt-accent-wash); color: var(--lt-accent); }
html[data-theme="light"] .bh-main .section-heading h2,
html[data-theme="light"] .bh-main .feed-heading h2,
html[data-theme="light"] .bh-main .index-about h2 { color: var(--lt-ink); }
html[data-theme="light"] .bh-main .community-feed-grid .community-post-card { border-color: var(--lt-line); background: var(--lt-panel); }
html[data-theme="light"] .bh-main .community-feed-grid .visual-post-content h2 { color: var(--lt-ink); }
html[data-theme="light"] .bh-main .community-feed-grid .visual-post-content p,
html[data-theme="light"] .bh-main .community-feed-grid .visual-post-author { color: var(--lt-muted); }
html[data-theme="light"] .bh-main .support-disabled { border-color: var(--lt-line-strong); background: var(--lt-soft); color: var(--lt-muted); }
html[data-theme="light"] .bh-main .support-disabled strong { color: var(--lt-ink); }
html[data-theme="light"] .bh-main .post-author small,
html[data-theme="light"] .bh-main .comment-author small { color: var(--lt-muted); }
html[data-theme="light"] .bh-main .comment-row { border-color: var(--lt-line); }
html[data-theme="light"] .bh-main .main-toolbar { background: rgb(255 255 255 / 92%); }

/* ── Community pages ───────────────────────────────────────────────── */
html[data-theme="light"] .community-page { color: var(--lt-ink); background: radial-gradient(ellipse at 50% 0, #dcefe4 0, transparent 42%), var(--lt-bg); }
html[data-theme="light"] .community-header { border-color: var(--lt-line); background: rgb(255 255 255 / 90%); }
html[data-theme="light"] .community-header nav > a { color: #3d4b43; }
html[data-theme="light"] .community-header nav > a:hover { color: var(--lt-accent); }
html[data-theme="light"] .community-brand { color: var(--lt-ink); }
html[data-theme="light"] .community-kicker { color: var(--lt-accent); }
html[data-theme="light"] .community-status { color: #33465c; }
html[data-theme="light"] .community-status[data-kind="error"] { color: var(--lt-danger); }
html[data-theme="light"] .profile-card { border-color: var(--lt-line); background: var(--lt-panel); box-shadow: var(--lt-shadow); }
html[data-theme="light"] .profile-avatar-frame img { background: var(--lt-soft); }
html[data-theme="light"] .profile-handle { color: var(--lt-muted); }
html[data-theme="light"] .profile-bio { color: #3f4d45; }
html[data-theme="light"] .community-button { border-color: var(--lt-line-strong); background: var(--lt-raised); color: var(--lt-ink); }
html[data-theme="light"] .community-button:hover { border-color: var(--lt-accent); }
html[data-theme="light"] .community-button.primary { background: var(--lt-accent-solid); color: #04241a; }
html[data-theme="light"] .post-author { color: var(--lt-ink); }
html[data-theme="light"] .post-author > img { background: var(--lt-soft); }
html[data-theme="light"] .post-author small,
html[data-theme="light"] .comment-author small { color: var(--lt-muted); }
html[data-theme="light"] .comment-author { color: var(--lt-ink); }
html[data-theme="light"] .post-author:hover strong,
html[data-theme="light"] .comment-author:hover strong { color: var(--lt-accent); }
html[data-theme="light"] .profile-progression { border-color: var(--lt-line); background: var(--lt-panel); }
html[data-theme="light"] .level-badge { color: var(--lt-accent); }
html[data-theme="light"] .level-badge strong { color: var(--lt-ink); }
html[data-theme="light"] .profile-xp-label { color: var(--lt-muted); }
html[data-theme="light"] .profile-xp-label strong { color: var(--lt-ink); }
html[data-theme="light"] .xp-progress-track { background: var(--lt-soft); }
html[data-theme="light"] .profile-xp > p,
html[data-theme="light"] .points-balance { color: var(--lt-muted); }
html[data-theme="light"] .points-balance strong { color: var(--lt-ink); }
html[data-theme="light"] .membership-badge { border-color: #9ad9c0; background: var(--lt-accent-wash); color: #00624a; }
html[data-theme="light"] .notification-panel { border-color: var(--lt-line); background: var(--lt-panel); box-shadow: var(--lt-shadow); }
html[data-theme="light"] .notification-item { color: var(--lt-ink); }
html[data-theme="light"] .notification-item:hover,
html[data-theme="light"] .notification-item.is-unread { background: var(--lt-raised); }
html[data-theme="light"] .notification-item time { color: var(--lt-muted); }
html[data-theme="light"] .community-sidebar { border-color: var(--lt-line); background: var(--lt-panel); }
html[data-theme="light"] .community-nav-link { color: #33413a; }
html[data-theme="light"] .community-nav-link svg { stroke: #5f7169; }
html[data-theme="light"] .community-nav-link[aria-current="page"] { color: #00543c; background: var(--lt-accent-wash); }
html[data-theme="light"] .community-sidebar-bottom { border-color: var(--lt-line); }
html[data-theme="light"] .community-topbar { border-color: var(--lt-line); background: rgb(255 255 255 / 92%); }
html[data-theme="light"] .community-topbar-title > span { color: var(--lt-muted); }
html[data-theme="light"] .feed-skeleton { background: linear-gradient(105deg, #e6ebe6 20%, #f3f6f3 38%, #e6ebe6 56%); background-size: 220% 100%; }
html[data-theme="light"] .community-post-card h2,
html[data-theme="light"] .community-post-card h3,
html[data-theme="light"] .post-card-content h2,
html[data-theme="light"] .post-card-content h3,
html[data-theme="light"] .visual-post-content h3 { color: var(--lt-ink); }
html[data-theme="light"] .post-card-content p { color: var(--lt-muted); }
html[data-theme="light"] .visual-post-author { color: #3f4d45; }
html[data-theme="light"] .visual-post-author img { background: var(--lt-soft); }
html[data-theme="light"] .visual-post-actions { color: var(--lt-muted); }
html[data-theme="light"] .post-like-button:hover,
html[data-theme="light"] .post-comments-link:hover { color: var(--lt-ink); background: var(--lt-raised); }
html[data-theme="light"] .post-like-summary { color: #3f4d45; }
html[data-theme="light"] .community-empty-state { color: var(--lt-muted); }
html[data-theme="light"] .community-dialog { border-color: var(--lt-line); background: var(--lt-panel); color: var(--lt-ink); box-shadow: var(--lt-shadow); }
html[data-theme="light"] .community-dialog input,
html[data-theme="light"] .community-dialog textarea { border-color: var(--lt-line-strong); background: var(--lt-panel); color: var(--lt-ink); }
html[data-theme="light"] .community-dialog label { color: var(--lt-ink); }
html[data-theme="light"] .community-dialog small { color: var(--lt-muted); }
html[data-theme="light"] .dialog-close { color: var(--lt-muted); }
html[data-theme="light"] .community-dialog .edit-file-label { color: var(--lt-accent); }
html[data-theme="light"] .community-dialog .crop-zoom { color: var(--lt-muted); }
html[data-theme="light"] .community-form { border-color: var(--lt-line); background: var(--lt-panel); }
html[data-theme="light"] .community-form input,
html[data-theme="light"] .community-form textarea,
html[data-theme="light"] .community-form select { border-color: var(--lt-line-strong); background: var(--lt-panel); color: var(--lt-ink); }
html[data-theme="light"] .community-form small { color: var(--lt-muted); }
html[data-theme="light"] .community-preview { background: var(--lt-soft); }
html[data-theme="light"] .community-publish-form label { color: var(--lt-ink); }
html[data-theme="light"] .community-publish-form input,
html[data-theme="light"] .community-publish-form textarea,
html[data-theme="light"] .community-publish-form select { border-color: var(--lt-line-strong); background: var(--lt-panel); color: var(--lt-ink); }
html[data-theme="light"] .comment-row > p { background: var(--lt-panel); }
html[data-theme="light"] .comment-form input,
html[data-theme="light"] .comment-reply-form input,
html[data-theme="light"] .comment-row form input { border-color: var(--lt-line-strong); background: var(--lt-panel); color: var(--lt-ink); }
html[data-theme="light"] .comment-row[data-profile-theme="true"] > p { border-color: var(--lt-line-strong); background: var(--lt-panel); box-shadow: none; }
html[data-theme="light"] .comment-row[style*="--comment-cosmetic-border"] > p { background: var(--lt-panel); box-shadow: none; }

/* ── Post page ─────────────────────────────────────────────────────── */
html[data-theme="light"] .post-stage { border-color: var(--lt-line); background: radial-gradient(ellipse at 50% 45%, #e7ede8, #f6f8f6 76%); }
html[data-theme="light"] .post-detail-video { background: var(--lt-soft); }
html[data-theme="light"] .post-info { border-color: var(--lt-line); background: var(--lt-panel); box-shadow: var(--lt-shadow); }
html[data-theme="light"] .post-info > p:not(.community-kicker, .community-status) { color: #3f4d45; }
html[data-theme="light"] .post-owner-row .post-author { color: var(--lt-ink); }
html[data-theme="light"] .post-author > img { background: var(--lt-soft); }
html[data-theme="light"] .post-created-at { color: var(--lt-muted); }

/* ── Leaderboard, rewards, settings details ────────────────────────── */
html[data-theme="light"] .community-leaderboard { border-color: var(--lt-line); background: var(--lt-panel); box-shadow: var(--lt-shadow); }
html[data-theme="light"] .leaderboard-tabs button { border-color: var(--lt-line-strong); background: transparent; color: var(--lt-ink); }
html[data-theme="light"] .leaderboard-tabs button[aria-selected="true"] { border-color: var(--lt-accent); background: var(--lt-accent-wash); }
html[data-theme="light"] .leaderboard-reward { color: var(--lt-accent); }
html[data-theme="light"] .leaderboard-row { background: var(--lt-raised); }
html[data-theme="light"] .leaderboard-rank { color: var(--lt-accent); }
html[data-theme="light"] .leaderboard-activity { color: var(--lt-muted); }
html[data-theme="light"] .reward-card { border-color: var(--lt-line); background: var(--lt-panel); color: var(--lt-ink); }
html[data-theme="light"] .reward-card h3 { color: var(--lt-ink); }
html[data-theme="light"] .reward-card p { color: var(--lt-muted); }
html[data-theme="light"] .reward-card.is-complete { border-color: var(--lt-accent); }
html[data-theme="light"] .profile-rewards { border-color: var(--lt-line); background: var(--lt-panel); }
html[data-theme="light"] .reward-period,
html[data-theme="light"] .reward-state,
html[data-theme="light"] .reward-progress-label,
html[data-theme="light"] .reward-empty { color: var(--lt-muted); }
html[data-theme="light"] .reward-prize { color: var(--lt-accent); }
html[data-theme="light"] .bh-main :is(.profile-stats strong, .wallet-chip strong) { color: var(--lt-ink); }
html[data-theme="light"] .bh-main .wallet-chip { border-color: var(--lt-line-strong); background: var(--lt-raised); color: var(--lt-muted); }
html[data-theme="light"] .edge-list { border-color: var(--lt-line); background: var(--lt-panel); }
html[data-theme="light"] .settings-field { color: var(--lt-ink); }
html[data-theme="light"] .settings-field select,
html[data-theme="light"] .settings-field input { border-color: var(--lt-line-strong); background: var(--lt-panel); color: var(--lt-ink); }

/* ── Appearance switch on Settings ─────────────────────────────────── */
.theme-switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--community-line, #30372f); border-radius: 999px; background: var(--community-raised, #20251f); }
.theme-switch button { min-height: 40px; padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: 700 14px/1.2 system-ui, sans-serif; cursor: pointer; transition: background .16s, color .16s; }
.theme-switch button:hover { background: rgb(255 255 255 / 8%); }
html[data-theme="light"] .theme-switch button:hover { background: rgb(0 0 0 / 5%); }
.theme-switch button[aria-pressed="true"] { background: var(--community-accent, #73e6a7); color: #06231a; }
/* On a light page the accent flips to the deep green, so the selected pill has
   to flip with it — #06231a on #00795a only reaches 3.07:1. */
html[data-theme="light"] .theme-switch button[aria-pressed="true"] { background: var(--lt-accent); color: #fff; }
.settings-form { display: grid; gap: 16px; }
.settings-form[hidden] { display: none; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.settings-actions[hidden] { display: none; }
.settings-field[hidden] { display: none; }
.settings-code-hint { margin: 0; color: var(--community-muted, #a7afa2); font-size: .85rem; }
.settings-danger { border-color: #7a3541 !important; }

/* ── Reward period tabs ────────────────────────────────────────────── */
html[data-theme="light"] .reward-tabs { border-bottom-color: var(--lt-line); }
html[data-theme="light"] .reward-tabs button { color: var(--lt-muted); }
html[data-theme="light"] .reward-tabs button.active { border-bottom-color: var(--lt-accent); color: var(--lt-ink); }

/* ── Legal and contact pages ───────────────────────────────────────── */
html[data-theme="light"] .legal-page,
html[data-theme="light"] .contact-page { color: var(--lt-ink); }
html[data-theme="light"] .legal-page { border-color: var(--lt-line); background: var(--lt-panel); box-shadow: var(--lt-shadow); }
html[data-theme="light"] :is(.legal-page, .contact-page) :is(h1, h2, h3) { color: var(--lt-ink); }
html[data-theme="light"] .legal-page :is(p, li), html[data-theme="light"] .contact-page p { color: var(--lt-muted); }
html[data-theme="light"] :is(.legal-page, .contact-page) a { color: var(--lt-accent); }
html[data-theme="light"] :is(.legal-page, .contact-page) a:hover { color: #00543c; }
html[data-theme="light"] .legal-eyebrow { color: var(--lt-accent) !important; }
html[data-theme="light"] .about-hero { border-color: #a9dcc6; background: radial-gradient(ellipse at 95% 0, #d5f2e6 0, transparent 46%), linear-gradient(130deg, #e8f4ed, #f1f6f2); }
html[data-theme="light"] .legal-section { border-top-color: var(--lt-line); }
html[data-theme="light"] .feature-card { border-color: var(--lt-line); background: var(--lt-raised); }
html[data-theme="light"] .about-cta { border-color: #a9dcc6; background: linear-gradient(120deg, #dbf3e8, var(--lt-raised)); }
html[data-theme="light"] .last-updated { color: var(--lt-muted) !important; }
html[data-theme="light"] .legal-button { border-color: var(--lt-line-strong); background: var(--lt-raised); color: var(--lt-ink) !important; }
html[data-theme="light"] .legal-button:hover { border-color: var(--lt-accent); }
html[data-theme="light"] .legal-button.primary { border-color: transparent; background: var(--lt-accent-solid); color: #04241a !important; }
html[data-theme="light"] .contact-card { border-color: var(--lt-line); background: var(--lt-panel); box-shadow: var(--lt-shadow); }
html[data-theme="light"] .form-field label { color: var(--lt-ink); }
html[data-theme="light"] .contact-card :is(input, select, textarea) { border-color: var(--lt-line-strong); background: var(--lt-panel); color: var(--lt-ink); }
html[data-theme="light"] .contact-card :is(input, select, textarea)::placeholder { color: #8b978f; }
html[data-theme="light"] .contact-card select option { background: var(--lt-panel); color: var(--lt-ink); }
html[data-theme="light"] .contact-status { color: var(--lt-accent); }
html[data-theme="light"] .contact-status[data-kind="error"] { color: var(--lt-danger); }
html[data-theme="light"] .site-footer .footer-nav a[aria-current="page"] { color: var(--lt-accent); }

/* ── Index gallery and footer ──────────────────────────────────────── */
html[data-theme="light"] body.index-page { color: var(--lt-ink); background: var(--lt-bg); }
/* The discovery hero stays a dark photo band in light mode, so everything on
   it keeps the dark palette — the page green only reaches 3.07:1 there. */
html[data-theme="light"] .discovery-hero { --accent: #00e6a0; }
html[data-theme="light"] .main-toolbar { background: rgb(255 255 255 / 92%); }
html[data-theme="light"] .main-toolbar .search { border-color: var(--lt-line-strong); background: var(--lt-panel); }
html[data-theme="light"] .main-toolbar .search:hover,
html[data-theme="light"] .main-toolbar .search:focus-within { border-color: var(--lt-accent); background: var(--lt-panel); box-shadow: 0 0 0 3px rgb(0 122 90 / 12%); }
html[data-theme="light"] .main-toolbar .search input { color: var(--lt-ink); }
html[data-theme="light"] #suggestionBox { border-color: var(--lt-line); background: var(--lt-panel); box-shadow: var(--lt-shadow); }
html[data-theme="light"] .search-suggestion-message { color: var(--lt-ink); }
html[data-theme="light"] .search-suggestion-message a,
html[data-theme="light"] .search-suggestion-link { color: var(--lt-accent); }
html[data-theme="light"] .feed-intro h1 { color: var(--lt-ink); }
html[data-theme="light"] .feed-intro p:not(.community-kicker) { color: var(--lt-muted); }
html[data-theme="light"] .feature-info { border-color: var(--lt-line); background: var(--lt-panel); }
html[data-theme="light"] .feature-info h2 { color: var(--lt-ink); }
html[data-theme="light"] .feature-info p { color: var(--lt-muted); }
html[data-theme="light"] .site-footer { border-color: var(--lt-line); background: var(--lt-panel); color: var(--lt-muted); }
html[data-theme="light"] .brand-text strong { color: var(--lt-ink); }
html[data-theme="light"] .brand-text small { color: var(--lt-muted); }
html[data-theme="light"] .footer-nav a { color: var(--lt-muted); }
html[data-theme="light"] .footer-nav a:hover { color: var(--lt-accent); }
html[data-theme="light"] .footer-meta { color: var(--lt-muted); }
html[data-theme="light"] .footer-meta a { color: var(--lt-accent); }
html[data-theme="light"] .footer-meta .small { color: var(--lt-muted); }
html[data-theme="light"] #scrollTopBtn { border-color: var(--lt-line-strong); background: var(--lt-panel); color: var(--lt-ink); box-shadow: var(--lt-shadow); }
html[data-theme="light"] .floating-login-btn { border-color: var(--lt-line-strong); background: var(--lt-panel); color: var(--lt-ink); }
html[data-theme="light"] .gallery-login-card { border-color: var(--lt-line); background: var(--lt-panel); color: var(--lt-ink); }
html[data-theme="light"] .gallery-login-actions a,
html[data-theme="light"] .gallery-login-actions button { border-color: var(--lt-accent-solid); background: var(--lt-accent-solid); color: #04241a; }
html[data-theme="light"] .gallery-login-actions button { border-color: var(--lt-line-strong); background: transparent; color: var(--lt-ink); }
html[data-theme="light"] .gallery-item.image-failed { background: var(--lt-soft); }
html[data-theme="light"] .gallery-item.image-failed::after { color: var(--lt-muted); }

/* Auth, legal and support pages that carry their own dark surfaces. */
html[data-theme="light"] .auth-shell,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .legal-card,
html[data-theme="light"] .support-card { border-color: var(--lt-line); background: var(--lt-panel); color: var(--lt-ink); }
html[data-theme="light"] body.auth-page { background: var(--lt-bg); color: var(--lt-ink); }
html[data-theme="light"] .support-card > p:not(.community-kicker) { color: var(--lt-muted); }

/* The post composer's drop zone is a near-black slab in the dark palette. */
html[data-theme="light"] .post-image-drop { border-color: var(--lt-line-strong); background: var(--lt-bg); }
html[data-theme="light"] .post-image-drop[data-dragging="true"] { border-color: var(--lt-accent); background: rgb(0 121 90 / 9%); }
html[data-theme="light"] .post-image-drop input[type="file"] { border-color: var(--lt-line); background: var(--lt-panel); color: var(--lt-ink); }

/* The admin console ships its own dark palette and never follows the switch. */
html[data-theme="light"]:has(body.admin-page) { color-scheme: dark; background: #0e1211; color: #f2f7f5; }
html[data-theme="light"] body.admin-page { color-scheme: dark; background: #0e1211; color: #f2f7f5; }

/* The mode flips atomically: a transitioned var()-based background can be left
   showing the previous mode's value, so theme.js blanks them for one beat. */
html.theme-swap *,
html.theme-swap *::before,
html.theme-swap *::after { transition: none !important; }

/* ── The square brand mark reads as a circle ────────────────────────── */.bh-brand img,
.mobile-brand img,
.community-brand img,
.footer-brand img,
.admin-brand img,
.logo img {
  border-radius: 50%;
  object-fit: cover;
}

/* ── Profile card in light mode ────────────────────────────────────── */
/* The cover shows the member's artwork exactly as it ships: no veil, no
   filter, no faded copy — what they picked renders in its real colours in
   both modes. Only the divider follows the page, and only a cover with
   nothing chosen on it gets a wash of the light palette. */
html[data-theme="light"] .profile-cover,
html[data-theme="light"] .profile-card .profile-cover {
  border-bottom-color: var(--lt-line);
}

html[data-theme="light"] .profile-cover:not([data-background]):not([data-background-visual]):not([style*="--profile-cosmetic-image"]),
html[data-theme="light"] .profile-card .profile-cover:not([data-background]):not([data-background-visual]):not([style*="--profile-cosmetic-image"]) {
  background-image:
    radial-gradient(circle at 74% 6%, rgb(148 226 190 / 72%) 0, transparent 46%),
    radial-gradient(ellipse at 12% 100%, rgb(186 214 246 / 45%) 0, transparent 52%),
    linear-gradient(112deg, #e3f2e9 0%, #f2f7f4 50%, #dcefe4 100%) !important;
}

/* shop.css grows the blurred backdrop 16px past the cover and drops a shadow
   off the sharp copy. app-shell.css switches the clip off because the avatar
   hangs out of the cover — so on a white card that spill lands as a dark band
   across the top of .profile-main. The artwork itself stays untouched; it just
   stops painting outside its own box. */
html[data-theme="light"] .profile-cover[style*="--profile-cosmetic-image"]::before {
  inset: 0;
  transform: none;
}
html[data-theme="light"] .profile-cover[style*="--profile-cosmetic-image"]::after {
  filter: none;
}

html[data-theme="light"] .profile-stats,
html[data-theme="light"] .profile-stats > button,
html[data-theme="light"] .profile-stats > div {
  border-color: var(--lt-line) !important;
}

html[data-theme="light"] .profile-avatar-frame,
html[data-theme="light"] .profile-avatar-frame.user-identity-avatar {
  box-shadow: 0 10px 26px rgb(20 40 30 / 16%);
}

html[data-theme="light"] .profile-avatar-frame img,
html[data-theme="light"] .profile-avatar-frame.user-identity-avatar > img:not(.avatar-cosmetic-asset) {
  background-color: var(--lt-soft) !important;
}

/* ── Comments in light mode ────────────────────────────────────────── */
/* shop.css lays a near-black gradient over every comment row, which reads as a
   grey smear once the card underneath turns white. The dark veil is swapped
   for a white one, so the row goes quiet while any wallpaper the author chose
   still shows through — lightened rather than erased. */
html[data-theme="light"] .comment-row {
  border-color: var(--lt-line);
  background-color: var(--lt-raised) !important;
  background-image: linear-gradient(rgb(255 255 255 / 66%), rgb(255 255 255 / 56%)), var(--comment-style-cosmetic-image, none), var(--comment-effect-cosmetic-image, none) !important;
}
html[data-theme="light"] .bh-main .comment-row > p { color: var(--lt-ink); }
html[data-theme="light"] .comment-head > small { color: var(--lt-muted); }
html[data-theme="light"] .comment-author .user-identity-name { color: var(--lt-ink); }
html[data-theme="light"] .comment-replies { border-inline-start-color: var(--lt-line-strong); }

/* A member's styled bubble keeps its accent stripe, but loses the dark fill. */
html[data-theme="light"] .comment-row[data-comment-style] > p,
html[data-theme="light"] .comment-row[data-comment-visual] > p {
  background: var(--lt-panel) !important;
  box-shadow: none !important;
  color: var(--lt-ink) !important;
}

/* ── Notification popover in light mode ────────────────────────────── */
/* community.css paints this panel for a near-black card: a white-on-white
   heading, a near-white member name and near-black pills. Each of them is
   re-tinted here; the panel itself already moved to the light palette. */
html[data-theme="light"] .notification-heading { border-bottom-color: var(--lt-line); }
html[data-theme="light"] .notification-heading h2 { color: var(--lt-ink); }
html[data-theme="light"] .notification-unread-total {
  border-color: #9ad9c0;
  background: var(--lt-accent-wash);
  color: #00624a;
}
html[data-theme="light"] .notification-mark-all,
html[data-theme="light"] .notification-retry,
html[data-theme="light"] .notification-clear-read { color: var(--lt-accent); }
html[data-theme="light"] .notification-mark-all:hover,
html[data-theme="light"] .notification-retry:hover,
html[data-theme="light"] .notification-clear-read:hover { color: #00543c; }
html[data-theme="light"] .notification-status,
html[data-theme="light"] .notification-status:not(:empty):not([data-kind="error"]) { color: var(--lt-muted); }
html[data-theme="light"] .notification-status[data-kind="error"] { color: var(--lt-danger); }
html[data-theme="light"] .notification-item:hover,
html[data-theme="light"] .notification-item:focus-visible {
  border-color: var(--lt-line-strong);
  background: var(--lt-raised);
  outline: none;
}
html[data-theme="light"] .notification-item.is-unread { background: var(--lt-accent-wash); }
html[data-theme="light"] .notification-item.is-unread:hover { background: #cdefe2; }
html[data-theme="light"] .notification-kind-icon { background: var(--lt-accent-wash); color: var(--lt-accent); }
html[data-theme="light"] .notification-kind-icon.kind-like { background: #fde9ed; color: #a92b4c; }
html[data-theme="light"] .notification-kind-icon.kind-comment { background: #e6f1fb; color: #1f5f96; }
html[data-theme="light"] .notification-kind-icon.kind-follow { background: var(--lt-accent-wash); color: var(--lt-accent); }
html[data-theme="light"] .notification-avatar,
html[data-theme="light"] .notification-thumbnail {
  border-color: var(--lt-line);
  background: var(--lt-soft);
}
html[data-theme="light"] .notification-message { color: var(--lt-muted); }
html[data-theme="light"] .notification-message strong { color: var(--lt-ink); }
html[data-theme="light"] .notification-copy time { color: var(--lt-muted); }
html[data-theme="light"] .notification-excerpt { color: var(--lt-muted); }
html[data-theme="light"] .notification-name[data-name-effect="name_neon"] { color: var(--lt-accent); text-shadow: none; }
html[data-theme="light"] .notification-empty-mark {
  border-color: var(--lt-line-strong);
  background: var(--lt-accent-wash);
  color: var(--lt-accent);
}
html[data-theme="light"] .notification-status:has(.notification-empty-mark) strong { color: var(--lt-ink); }
html[data-theme="light"] .notification-status:has(.notification-empty-mark) > span:last-child { color: var(--lt-muted); }
html[data-theme="light"] .notification-count { background: var(--lt-accent-solid); color: #04241a; }
html[data-theme="light"] .notification-skeleton,
html[data-theme="light"] .notification-skeleton i,
html[data-theme="light"] .notification-skeleton span,
html[data-theme="light"] .notification-skeleton b {
  background-color: #e6ebe6;
  background-image: linear-gradient(100deg, #e6ebe6 20%, #f5f8f5 45%, #e6ebe6 70%) !important;
}
html[data-theme="light"] .notification-list,
html[data-theme="light"] .notification-panel { scrollbar-color: var(--lt-line-strong) transparent; }