/* ============================================================
   SOCHOUSE — LIGHT THEME
   ============================================================
   Semua rule di file ini di-scope ke html[data-theme="light"].
   Kalau user pakai dark mode, file ini sama sekali tidak berpengaruh.
   ============================================================ */

html[data-theme="light"] {
    color-scheme: light;

    /* ===== Core palette overrides ===== */
    --bg: #f0f2f7;
    --bg-elevated: #ffffff;
    --bg-hover: rgba(0, 0, 0, 0.04);

    --border: #e4e7ee;
    --border-strong: #d1d6e0;

    --text: #0a0c10;
    --text-muted: #4a5568;
    --text-dim: #6b7280;
    --text-faint: #9ca3af;

    --accent: #3b6fe0;
    --accent-hover: #2d5dcc;
    --accent-soft: rgba(59, 111, 224, 0.10);

    --like: #e11d6b;
    --like-soft: rgba(225, 29, 107, 0.08);

    --danger: #dc2626;
    --danger-soft: rgba(220, 38, 38, 0.08);

    --verified: #1a8cd8;
    --gold: #b8934a;
    --gold-soft: rgba(184, 147, 74, 0.12);
}

/* ============================================================
   GLOBAL
   ============================================================ */
html[data-theme="light"],
html[data-theme="light"] body {
    background: var(--bg);
    color: var(--text);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #c9d0dc;
    border-color: var(--bg);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #a8b2c2; }
html[data-theme="light"] ::selection { background: rgba(59, 111, 224, 0.22); color: #0a0c10; }

/* ============================================================
   LAYOUT CHROME
   ============================================================ */

/* Dynamic island */
html[data-theme="light"] .masthead {
    background: #ffffff;
    border-color: #e4e7ee;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.03),
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 20px 60px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
html[data-theme="light"] .masthead .brand,
html[data-theme="light"] .masthead .brand:hover,
html[data-theme="light"] .masthead .brand:focus-visible {
    color: #0a0c10;
}
html[data-theme="light"] .island-icon { color: #4a5568; }
html[data-theme="light"] .island-icon:hover,
html[data-theme="light"] .island-icon:focus-visible {
    background: rgba(0, 0, 0, 0.05);
    color: #0a0c10;
}
html[data-theme="light"] .island-icon svg { stroke: currentColor; }

/* Bottom nav */
html[data-theme="light"] .bottom-nav {
    background: rgba(255, 255, 255, 0.94);
    border-top-color: #e4e7ee;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
}
html[data-theme="light"] .bottom-nav-item { color: #9ca3af; }
html[data-theme="light"] .bottom-nav-item:hover,
html[data-theme="light"] .bottom-nav-item:focus-visible { color: #4a5568; }
html[data-theme="light"] .bottom-nav-item.is-active { color: var(--accent); }
html[data-theme="light"] .bottom-nav-item.is-active::after { background: var(--accent); }
html[data-theme="light"] .bottom-nav-item-search .bottom-nav-icon {
    background: #ffffff;
    color: #0a0c10;
    border-color: #ffffff;
    box-shadow:
        0 0 0 2px rgba(10, 12, 16, 0.10),
        0 6px 20px rgba(0, 0, 0, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.10);
}
html[data-theme="light"] .bottom-nav-item-search .bottom-nav-icon svg { stroke: #0a0c10; }
html[data-theme="light"] .bottom-nav-item-search.is-active .bottom-nav-icon {
    background: #0a0c10;
}
html[data-theme="light"] .bottom-nav-item-search.is-active .bottom-nav-icon svg { stroke: #ffffff; }

/* FAB */
html[data-theme="light"] .fab {
    box-shadow: 0 8px 24px rgba(59, 111, 224, 0.35), 0 2px 6px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .fab-menu-item {
    background: #ffffff;
    border-color: #e4e7ee;
    color: #0a0c10;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .fab-menu-item:hover,
html[data-theme="light"] .fab-menu-item:focus-visible {
    border-color: var(--accent);
    background: #f5f7fa;
}
html[data-theme="light"] .fab-backdrop { background: rgba(0, 0, 0, 0.25); }
html[data-theme="light"] .fab-rank {
    background: #ffffff;
    border-color: rgba(184, 147, 74, 0.35);
    color: var(--gold);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .fab-rank:hover {
    background: rgba(184, 147, 74, 0.10);
    border-color: var(--gold);
}
html[data-theme="light"] .fab-rank.is-active {
    background: var(--gold);
    color: #ffffff;
    border-color: var(--gold);
}

/* ============================================================
   CARDS / ALERTS / TYPOGRAPHY
   ============================================================ */
html[data-theme="light"] .card {
    background: var(--bg-elevated);
    border-color: var(--border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
}
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4 { color: var(--text); }
html[data-theme="light"] .lede { color: var(--text-muted); }
html[data-theme="light"] .eyebrow { color: var(--text-dim); }

html[data-theme="light"] .alert-success {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(22, 163, 74, 0.30);
    color: #15803d;
}
html[data-theme="light"] .alert-error {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(220, 38, 38, 0.28);
    color: #b91c1c;
}

/* ============================================================
   FORMS
   ============================================================ */
html[data-theme="light"] .field > label { color: var(--text-muted); }
html[data-theme="light"] .field input[type="text"],
html[data-theme="light"] .field input[type="email"],
html[data-theme="light"] .field input[type="url"],
html[data-theme="light"] .field input[type="password"],
html[data-theme="light"] .field textarea,
html[data-theme="light"] .input-select {
    background: #ffffff;
    border-color: var(--border-strong);
    color: var(--text);
}
html[data-theme="light"] .field input:focus,
html[data-theme="light"] .field textarea:focus,
html[data-theme="light"] .input-select:focus {
    background: #ffffff;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
html[data-theme="light"] .field input::placeholder,
html[data-theme="light"] .field textarea::placeholder { color: #a8b2c2; }
html[data-theme="light"] .field-help { color: var(--text-dim); }
html[data-theme="light"] .field-error { color: #dc2626; }

html[data-theme="light"] .input-prefix {
    background: #ffffff;
    border-color: var(--border-strong);
}
html[data-theme="light"] .input-prefix > span { color: var(--text-dim); }

html[data-theme="light"] .input-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1.41 0 6 4.59 10.59 0 12 1.41 6 7.41 0 1.41z'/%3E%3C/svg%3E");
}
html[data-theme="light"] .input-select option {
    background: #ffffff;
    color: var(--text);
}

/* ============================================================
   BUTTONS
   ============================================================ */
html[data-theme="light"] .button {
    box-shadow: 0 1px 2px rgba(59, 111, 224, 0.15);
}
html[data-theme="light"] .button-link {
    color: var(--text-muted);
}
html[data-theme="light"] .button-link:hover,
html[data-theme="light"] .button-link:focus-visible {
    color: var(--text);
    background: var(--bg-hover);
}

/* ============================================================
   FEED
   ============================================================ */
html[data-theme="light"] .feed-header { border-color: transparent; }
html[data-theme="light"] .feed-title { color: var(--text); }
html[data-theme="light"] .feed-tab { color: var(--text-dim); }
html[data-theme="light"] .feed-tab:hover,
html[data-theme="light"] .feed-tab:focus-visible { color: var(--text); }
html[data-theme="light"] .feed-tab-active { color: var(--text); }
html[data-theme="light"] .feed-tab-active::after { background: var(--accent); }
html[data-theme="light"] .feed-tabs { border-bottom-color: var(--border); }
html[data-theme="light"] .feed-icon-btn { color: var(--text-dim); }
html[data-theme="light"] .feed-icon-btn:hover,
html[data-theme="light"] .feed-icon-btn:focus-visible {
    background: var(--bg-hover);
    color: var(--text);
}

/* ============================================================
   POST CARD
   ============================================================ */
html[data-theme="light"] .post-list {
    background: transparent;
}
html[data-theme="light"] .post-card {
    background: var(--bg-elevated);
    border-color: var(--border);
}
html[data-theme="light"] .post-card:hover {
    border-color: var(--border-strong);
}
html[data-theme="light"] .post-avatar {
    background: linear-gradient(135deg, #e4e7ee, #f5f7fa);
    color: var(--accent);
}
html[data-theme="light"] a.post-avatar.post-avatar-has-story img {
    border-color: var(--bg-elevated);
}
html[data-theme="light"] a.post-avatar.post-avatar-has-story .post-avatar-initial {
    background: var(--bg-elevated);
    border-color: var(--bg-elevated);
}
html[data-theme="light"] .post-author { color: var(--text); }
html[data-theme="light"] .post-author:hover,
html[data-theme="light"] .post-author:focus-visible { color: var(--accent); }
html[data-theme="light"] .post-username { color: var(--text-dim); }
html[data-theme="light"] .post-username:hover { color: var(--accent); }
html[data-theme="light"] .post-time { color: var(--text-dim); }
html[data-theme="light"] .post-username-sep { color: var(--text-faint); }
html[data-theme="light"] .post-body { color: var(--text); }
html[data-theme="light"] .post-media {
    background: #f5f7fa;
    border-color: var(--border);
}
html[data-theme="light"] .post-carousel {
    background: #f5f7fa;
    border-color: var(--border);
}
html[data-theme="light"] .post-carousel-dots {
    background: rgba(255, 255, 255, 0.75);
}
html[data-theme="light"] .post-carousel-dot {
    background: rgba(10, 12, 16, 0.30);
}
html[data-theme="light"] .post-carousel-dot.is-active { background: #0a0c10; }
html[data-theme="light"] .post-carousel-counter {
    background: rgba(255, 255, 255, 0.85);
    color: #0a0c10;
    border-color: rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .post-edited { color: var(--text-faint); }
html[data-theme="light"] .post-action {
    color: var(--text-dim);
}
html[data-theme="light"] .post-action:hover,
html[data-theme="light"] .post-action:focus-visible {
    color: var(--accent);
    background: var(--accent-soft);
}
html[data-theme="light"] .post-action-active { color: var(--like); }
html[data-theme="light"] .post-action-active:hover,
html[data-theme="light"] .post-action-active:focus-visible {
    color: var(--like);
    background: var(--like-soft);
}

/* Post meta badges */
html[data-theme="light"] .post-meta-carousel-badge {
    background: rgba(107, 114, 128, 0.12);
    border-color: rgba(107, 114, 128, 0.20);
    color: var(--text-dim);
}
html[data-theme="light"] .post-meta-poll-badge {
    background: rgba(180, 83, 9, 0.10);
    color: #b45309;
}

/* Post detail */
html[data-theme="light"] .post-detail {
    background: var(--bg-elevated);
    border-color: var(--border);
}
html[data-theme="light"] .post-detail .post-card-name { color: var(--text); }
html[data-theme="light"] .post-detail .post-card-name a { color: var(--text); }
html[data-theme="light"] .post-detail .post-card-avatar {
    background: linear-gradient(135deg, #e4e7ee, #f5f7fa);
    color: var(--accent);
}
html[data-theme="light"] .post-detail-image {
    background: #f5f7fa;
    border-color: var(--border);
}
html[data-theme="light"] .post-detail-time { color: var(--text-dim); }
html[data-theme="light"] .post-detail .post-card-actions { border-top-color: var(--border); }
html[data-theme="light"] .post-card-actions .post-action-btn { color: var(--text-dim); }
html[data-theme="light"] .post-card-actions .post-action-btn:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

/* ============================================================
   COMMENTS
   ============================================================ */
html[data-theme="light"] #comments {
    background: var(--bg-elevated);
    border-color: var(--border);
}
html[data-theme="light"] .comment-item { border-color: var(--border); }
html[data-theme="light"] .comment-avatar {
    background: linear-gradient(135deg, #e4e7ee, #f5f7fa);
    color: var(--accent);
}
html[data-theme="light"] .comment-author { color: var(--text); }
html[data-theme="light"] .comment-author:hover { color: var(--accent); }
html[data-theme="light"] .comment-handle,
html[data-theme="light"] .comment-time { color: var(--text-dim); }
html[data-theme="light"] .comment-content { color: var(--text); }
html[data-theme="light"] .comment-delete-btn { color: var(--text-dim); }
html[data-theme="light"] .comment-delete-btn:hover { color: var(--danger); background: var(--danger-soft); }
html[data-theme="light"] .comments-empty svg { color: var(--text-faint); }
html[data-theme="light"] .comments-empty-title { color: var(--text-muted); }
html[data-theme="light"] .comments-empty-sub { color: var(--text-dim); }

html[data-theme="light"] .comment-composer {
    background: rgba(255, 255, 255, 0.94);
    border-top-color: var(--border);
}
html[data-theme="light"] .comment-composer.is-reply-mode {
    background: rgba(245, 247, 250, 0.98);
    border-top-color: var(--accent);
}
html[data-theme="light"] .comment-composer-avatar {
    background: linear-gradient(135deg, #e4e7ee, #f5f7fa);
    color: var(--accent);
}
html[data-theme="light"] .comment-composer-inner textarea {
    background: #ffffff;
    border-color: var(--border-strong);
    color: var(--text);
}
html[data-theme="light"] .comment-composer-inner textarea::placeholder { color: #a8b2c2; }
html[data-theme="light"] .comment-composer-inner textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
html[data-theme="light"] .comment-composer-counter { color: var(--text-dim); }

html[data-theme="light"] .comment-action { color: var(--text-dim); }
html[data-theme="light"] .comment-action:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-muted);
}

html[data-theme="light"] .comment-reply-context {
    background: #ffffff;
    border-color: var(--border);
    color: var(--text-muted);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .comment-reply-context strong { color: var(--accent); }
html[data-theme="light"] .comment-reply-context-close { color: var(--text-dim); }
html[data-theme="light"] .comment-reply-context-close:hover {
    color: var(--text);
    background: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .comment-login-bar {
    background: var(--accent);
    box-shadow: 0 8px 24px rgba(59, 111, 224, 0.25);
}

/* ============================================================
   POLL
   ============================================================ */
html[data-theme="light"] .poll {
    background: #ffffff;
    border-color: var(--border);
}
html[data-theme="light"] .poll-question { color: var(--text); }
html[data-theme="light"] .poll-option {
    background: #f5f7fa;
    border-color: var(--border-strong);
    color: var(--text);
}
html[data-theme="light"] .poll-option:hover { border-color: var(--accent); }
html[data-theme="light"] .poll-option-result {
    background: #f5f7fa;
    border-color: var(--border-strong);
}
html[data-theme="light"] .poll-option-voted {
    background: var(--accent-soft);
    border-color: var(--accent);
}
html[data-theme="light"] .poll-option-bar { background: rgba(59, 111, 224, 0.16); }
html[data-theme="light"] .poll-option-voted .poll-option-bar { background: rgba(59, 111, 224, 0.26); }
html[data-theme="light"] .poll-option-content { color: var(--text); }
html[data-theme="light"] .poll-option-percent { color: var(--text-dim); }
html[data-theme="light"] .poll-option-voted .poll-option-percent { color: var(--accent); }
html[data-theme="light"] .poll-meta { color: var(--text-dim); }
html[data-theme="light"] .poll-option-disabled {
    background: #f5f7fa;
    border-color: var(--border-strong);
    color: var(--text-dim);
}
html[data-theme="light"] .poll-radio-mock { border-color: var(--border-strong); }
html[data-theme="light"] .poll-login-cta {
    background: var(--accent);
    box-shadow: 0 4px 14px rgba(59, 111, 224, 0.22);
}

/* ============================================================
   PROFILE — MAIN
   ============================================================ */
html[data-theme="light"] .profile-page {
    /* Accent lebih gelap biar kontras di bg putih */
    --profile-color: #3b6fe0;
    --profile-color-light: #5b8def;
    --profile-color-lighter: #b3cdfb;
    --profile-color-dark: #2d5dcc;
    --profile-color-darker: #1e448f;
    --profile-color-soft: rgba(59, 111, 224, 0.10);
    --profile-color-glow: rgba(59, 111, 224, 0.24);
    --profile-color-wash: rgba(59, 111, 224, 0.05);
}
html[data-theme="light"] .profile-cover-fade {
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.75) 25%,
        rgba(255, 255, 255, 0.35) 55%,
        rgba(255, 255, 255, 0.08) 82%,
        rgba(255, 255, 255, 0) 100%
    );
}
html[data-theme="light"] .profile-name { color: var(--text); text-shadow: none; }
html[data-theme="light"] .profile-username { color: var(--text-muted); text-shadow: none; }
html[data-theme="light"] .profile-pronouns { color: var(--text-muted); text-shadow: none; }
html[data-theme="light"] .profile-avatar {
    background: linear-gradient(135deg, #e4e7ee, #f5f7fa);
    color: var(--profile-color);
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.95),
        0 0 0 4.5px rgba(0, 0, 0, 0.10);
}
html[data-theme="light"] .profile-icon-btn {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.10);
    color: #0a0c10;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
html[data-theme="light"] .profile-icon-btn:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 0.20);
}
html[data-theme="light"] .profile-icon-btn-follow {
    background: var(--profile-color);
    border-color: var(--profile-color);
    color: #ffffff;
}
html[data-theme="light"] .profile-icon-btn-following {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.15);
    color: #0a0c10;
}
html[data-theme="light"] .profile-icon-btn-dm {
    background: #3b6fe0;
    border-color: #3b6fe0;
    color: #ffffff;
}
html[data-theme="light"] .profile-verify-btn { color: var(--gold) !important; }
html[data-theme="light"] .profile-verify-glyph { color: var(--gold); }
html[data-theme="light"] .profile-verify-plus { color: var(--gold); }

/* Note bubble */
html[data-theme="light"] .profile-note-bubble,
html[data-theme="light"] .story-note-bubble,
html[data-theme="light"] .post-note-bubble {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.10);
    color: var(--text);
    box-shadow:
        0 6px 18px -4px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.02);
}
html[data-theme="light"] .profile-note-bubble:hover,
html[data-theme="light"] .story-note-bubble:hover,
html[data-theme="light"] .post-note-bubble:hover {
    background: #f5f7fa;
}
html[data-theme="light"] .profile-note-tail { border-top-color: #ffffff; }
html[data-theme="light"] .story-note-tail { border-top-color: #ffffff; }
html[data-theme="light"] .post-note-tail { border-top-color: #ffffff; }
html[data-theme="light"] .story-note-text { color: var(--text); }
html[data-theme="light"] .profile-note-text { color: var(--text); }
html[data-theme="light"] .post-note-text { color: var(--text); }

/* Profile body */
html[data-theme="light"] .profile-bio { color: var(--text); border-left-color: var(--profile-color); }
html[data-theme="light"] .profile-joined { color: var(--text-dim); }
html[data-theme="light"] .profile-spotify {
    background: #ffffff;
    border-color: var(--border);
}
html[data-theme="light"] .profile-stat-number { color: var(--text); }
html[data-theme="light"] .profile-stat-label { color: var(--text-muted); }

/* Wealth */
html[data-theme="light"] .profile-wealth {
    background-color: #ffffff;
    background-image:
        radial-gradient(ellipse 80% 100% at 100% 0%, var(--profile-color-soft, rgba(59,111,224,0.10)) 0%, transparent 65%),
        radial-gradient(ellipse 70% 90% at 100% 0%, var(--profile-color-glow, rgba(59,111,224,0.14)) 0%, transparent 55%);
    border-color: var(--profile-color-soft, rgba(59,111,224,0.20));
}
html[data-theme="light"] .profile-wealth-value { color: var(--text); }
html[data-theme="light"] .profile-wealth-rank { color: var(--text); }
html[data-theme="light"] .profile-wealth-stat {
    background: #f5f7fa;
    border-color: var(--border);
}
html[data-theme="light"] .profile-wealth-stat-value { color: var(--text); }
html[data-theme="light"] .profile-wealth-stat-label { color: var(--text-dim); }
html[data-theme="light"] .profile-wealth-arrow {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-muted);
}
html[data-theme="light"] .profile-wealth:hover .profile-wealth-arrow {
    background: var(--profile-color);
    color: #ffffff;
}
html[data-theme="light"] .profile-wealth-family {
    background-image:
        radial-gradient(ellipse 80% 100% at 100% 0%, rgba(184, 147, 74, 0.10) 0%, transparent 65%),
        radial-gradient(ellipse 70% 90% at 100% 0%, rgba(184, 147, 74, 0.14) 0%, transparent 55%);
    border-color: rgba(184, 147, 74, 0.22);
}
html[data-theme="light"] .profile-wealth-family-mark {
    background: #f5f7fa;
    color: var(--text-muted);
}
html[data-theme="light"] .profile-wealth-cta-icon {
    background: rgba(184, 147, 74, 0.12);
    color: var(--gold);
}
html[data-theme="light"] .profile-wealth-cta-title { color: var(--text); }
html[data-theme="light"] .profile-wealth-cta-sub { color: var(--text-muted); }
html[data-theme="light"] .wealth-dot { background: rgba(0, 0, 0, 0.15); }
html[data-theme="light"] .wealth-dot.is-active { background: rgba(0, 0, 0, 0.55); }

/* Couple */
html[data-theme="light"] .profile-couple {
    background: #fdf9f2;
    border-color: rgba(184, 147, 74, 0.28);
}
html[data-theme="light"] .profile-couple-label { color: var(--gold); }
html[data-theme="light"] .profile-couple-cover-fade {
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.75) 25%,
        rgba(255, 255, 255, 0.35) 55%,
        rgba(255, 255, 255, 0.08) 82%,
        rgba(255, 255, 255, 0) 100%
    );
}
html[data-theme="light"] .profile-couple-name { color: var(--text); text-shadow: none; }
html[data-theme="light"] .profile-couple-handle { color: var(--text-muted); text-shadow: none; }
html[data-theme="light"] .profile-couple-cta {
    background: #ffffff;
    border-color: var(--border-strong);
}
html[data-theme="light"] .profile-couple-cta-incoming {
    background: var(--accent-soft);
    border-color: var(--accent);
}
html[data-theme="light"] .profile-couple-cta-text { color: var(--text-muted); }
html[data-theme="light"] .profile-couple-hint {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-dim);
}
html[data-theme="light"] .profile-couple-rule-hint {
    background: rgba(180, 83, 9, 0.08);
    border-color: rgba(180, 83, 9, 0.22);
    color: #92400e;
}
html[data-theme="light"] .profile-couple-rule-hint strong { color: #b45309; }
html[data-theme="light"] .profile-couple-rule-hint svg { color: #b45309; }

/* Content tabs + slider */
html[data-theme="light"] .profile-content-tabs {
    background: var(--bg-elevated);
    border-color: var(--border);
}
html[data-theme="light"] .profile-content-tab { color: var(--text-dim); }
html[data-theme="light"] .profile-content-tab:hover {
    color: var(--text);
    background: var(--bg-hover);
}
html[data-theme="light"] .profile-content-tab.is-active {
    color: var(--profile-color);
    background: var(--profile-color-soft);
}
html[data-theme="light"] .carousel-grid {
    background: var(--bg-elevated);
    border-color: var(--border);
}
html[data-theme="light"] .carousel-grid-item { background: #f5f7fa; }
html[data-theme="light"] .carousel-grid-fallback {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ee 100%);
    color: var(--text-muted);
}
html[data-theme="light"] .carousel-grid-count {
    background: rgba(255, 255, 255, 0.85);
    color: #0a0c10;
    border-color: rgba(0, 0, 0, 0.06);
}

/* Profile edit */
html[data-theme="light"] .profile-edit-page { background: var(--bg); }
html[data-theme="light"] .edit-header {
    background: rgba(240, 242, 247, 0.92);
    border-bottom-color: var(--border);
}
html[data-theme="light"] .edit-back { color: var(--text-muted); }
html[data-theme="light"] .edit-back:hover {
    background: var(--bg-hover);
    color: var(--text);
}
html[data-theme="light"] .edit-title { color: var(--text); }
html[data-theme="light"] .edit-card {
    background: var(--bg-elevated);
    border-color: var(--border);
}
html[data-theme="light"] .edit-section-title { color: var(--text-dim); }
html[data-theme="light"] .edit-cover-wrap { background: linear-gradient(135deg, #e4e7ee, #f5f7fa); }
html[data-theme="light"] .edit-cover-overlay {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
}
html[data-theme="light"] .edit-cover-btn {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.10);
    color: #0a0c10;
}
html[data-theme="light"] .edit-avatar { background: linear-gradient(135deg, #e4e7ee, #f5f7fa); }
html[data-theme="light"] .edit-avatar-wrap { background: var(--bg-elevated); }
html[data-theme="light"] .edit-media-help { color: var(--text-dim); }
html[data-theme="light"] .pronoun-option {
    background: #ffffff;
    border-color: var(--border-strong);
    color: var(--text-muted);
}
html[data-theme="light"] .pronoun-option:hover {
    border-color: var(--edit-color);
    color: var(--text);
}
html[data-theme="light"] .pronoun-option-checked {
    border-color: var(--edit-color);
    background: rgba(59, 111, 224, 0.08);
    color: var(--edit-color);
}
html[data-theme="light"] .theme-picker {
    background: #f5f7fa;
    border-color: var(--border-strong);
}
html[data-theme="light"] .theme-picker-hex {
    background: #ffffff;
    border-color: var(--border-strong);
}
html[data-theme="light"] .theme-picker-hex input[type="text"] { color: var(--text); }
html[data-theme="light"] .char-counter { color: var(--text-faint); }
html[data-theme="light"] .edit-save-bar {
    background: rgba(240, 242, 247, 0.94);
    border-top-color: var(--border);
}
html[data-theme="light"] .edit-cancel {
    border-color: var(--border-strong);
    color: var(--text-muted);
}
html[data-theme="light"] .edit-cancel:hover {
    border-color: var(--text-dim);
    color: var(--text);
}
html[data-theme="light"] .edit-card-danger {
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.04), rgba(255, 255, 255, 1) 60%) !important;
    border-color: rgba(220, 38, 38, 0.28) !important;
}
html[data-theme="light"] .edit-danger-desc { color: var(--text-muted); }
html[data-theme="light"] .edit-danger-details { border-top-color: rgba(220, 38, 38, 0.18); }
html[data-theme="light"] .edit-danger-summary {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.22);
    color: #dc2626;
}
html[data-theme="light"] .edit-danger-form {
    background: #fef2f2;
    border-color: rgba(220, 38, 38, 0.20);
}
html[data-theme="light"] .edit-danger-form input[type="text"],
html[data-theme="light"] .edit-danger-form input[type="password"] {
    background: #ffffff;
    border-color: var(--border-strong);
    color: var(--text);
}

/* Settings page */
html[data-theme="light"] .settings-page-header {
    background: linear-gradient(180deg, rgba(240, 242, 247, 0.98) 0%, rgba(240, 242, 247, 0.92) 70%, rgba(240, 242, 247, 0) 100%);
}
html[data-theme="light"] .settings-page-back { color: var(--text); }
html[data-theme="light"] .settings-page-back:hover { background: var(--bg-hover); }
html[data-theme="light"] .settings-page-title { color: var(--text); }
html[data-theme="light"] .settings-user-card {
    background: linear-gradient(135deg, rgba(59, 111, 224, 0.10), rgba(255, 255, 255, 0.5));
    border-color: rgba(59, 111, 224, 0.22);
}
html[data-theme="light"] .settings-user-avatar {
    background: linear-gradient(135deg, #e4e7ee, #f5f7fa);
    color: var(--text-muted);
}
html[data-theme="light"] .settings-user-name { color: var(--text); }
html[data-theme="light"] .settings-user-handle { color: var(--text-muted); }
html[data-theme="light"] .settings-user-edit { background: rgba(59, 111, 224, 0.14); color: var(--accent); }
html[data-theme="light"] .settings-staff-card {
    background:
        radial-gradient(ellipse 100% 120% at 100% 0%, rgba(34, 197, 94, 0.08), transparent 60%),
        linear-gradient(135deg, rgba(34, 197, 94, 0.04), rgba(255, 255, 255, 1));
    border-color: rgba(22, 163, 74, 0.28);
}
html[data-theme="light"] .settings-staff-label { color: #15803d; }
html[data-theme="light"] .settings-staff-name { color: var(--text); }
html[data-theme="light"] .settings-staff-meta { color: var(--text-muted); }
html[data-theme="light"] .settings-staff-meta strong { color: #15803d; }
html[data-theme="light"] .settings-staff-cta {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(22, 163, 74, 0.20);
}
html[data-theme="light"] .settings-staff-cta:hover { background: rgba(22, 163, 74, 0.08); }
html[data-theme="light"] .settings-staff-cta-title { color: var(--text); }
html[data-theme="light"] .settings-staff-cta-sub { color: var(--text-muted); }
html[data-theme="light"] .settings-section-title { color: var(--text-dim); }
html[data-theme="light"] .settings-list {
    background: var(--bg-elevated);
    border-color: var(--border);
}
html[data-theme="light"] .settings-row {
    border-bottom-color: var(--border);
}
html[data-theme="light"] .settings-row:hover { background: var(--bg-hover); }
html[data-theme="light"] .settings-row-label { color: var(--text); }
html[data-theme="light"] .settings-row-value { color: var(--text-muted); }
html[data-theme="light"] .settings-row-arrow { color: var(--text-faint); }
html[data-theme="light"] .settings-row:hover .settings-row-arrow { color: var(--accent); }
html[data-theme="light"] .settings-row-danger:hover { background: rgba(220, 38, 38, 0.06); }

/* ============================================================
   DM (LIST + CHAT)
   ============================================================ */
html[data-theme="light"] body.dm-body {
    background: #ffffff;
    color: var(--text);
}
html[data-theme="light"] .dm-chat {
    background: #ffffff;
}
html[data-theme="light"] .dm-chat::before {
    background:
        radial-gradient(ellipse 70% 45% at 15% 10%, rgba(59, 111, 224, 0.08) 0%, transparent 62%),
        radial-gradient(ellipse 60% 40% at 90% 80%, rgba(168, 85, 247, 0.06) 0%, transparent 62%),
        radial-gradient(ellipse 80% 55% at 50% 50%, rgba(20, 184, 166, 0.04) 0%, transparent 72%);
}

/* DM list */
html[data-theme="light"] .dm-list {
    background: var(--bg-elevated);
    border-color: var(--border);
}
html[data-theme="light"] .dm-item { border-bottom-color: var(--border); }
html[data-theme="light"] .dm-item:hover { background: var(--bg-hover); }
html[data-theme="light"] .dm-item-unread { background: rgba(59, 111, 224, 0.05); }
html[data-theme="light"] .dm-item-avatar {
    background: linear-gradient(135deg, #e4e7ee, #f5f7fa);
    color: var(--accent);
}
html[data-theme="light"] .dm-item-name { color: var(--text); }
html[data-theme="light"] .dm-item-preview { color: var(--text-muted); }
html[data-theme="light"] .dm-item-you { color: var(--text-faint); }
html[data-theme="light"] .dm-item-time { color: var(--text-faint); }
html[data-theme="light"] .dm-tabs { border-bottom-color: var(--border); }
html[data-theme="light"] .dm-tab { color: var(--text-dim); }
html[data-theme="light"] .dm-tab:hover { color: var(--text); background: var(--bg-hover); }
html[data-theme="light"] .dm-tab.is-active { background: var(--accent); color: #ffffff; }

/* DM chat header */
html[data-theme="light"] .dm-chat-header {
    background: rgba(255, 255, 255, 0.94);
    border-bottom-color: var(--border);
}
html[data-theme="light"] .dm-chat-back { color: var(--accent); }
html[data-theme="light"] .dm-chat-back:hover { background: rgba(59, 111, 224, 0.10); }
html[data-theme="light"] .dm-chat-avatar {
    background: linear-gradient(135deg, #e4e7ee, #f5f7fa);
    color: var(--text-muted);
}
html[data-theme="light"] .dm-chat-name { color: var(--text); }
html[data-theme="light"] .dm-chat-status { color: var(--text-dim); }

/* DM bubbles */
html[data-theme="light"] .dm-messages {
    background: #ffffff;
}
html[data-theme="light"] .dm-messages::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.10); }
html[data-theme="light"] .dm-date > span {
    color: var(--text-dim);
    background: rgba(0, 0, 0, 0.04);
    border: 0.5px solid rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .dm-bubble-row.is-theirs .dm-bubble {
    background: linear-gradient(180deg, #f0f2f7 0%, #e8ecf2 100%);
    color: #0a0c10;
    border: 0.5px solid rgba(0, 0, 0, 0.06);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.03);
}
html[data-theme="light"] .dm-bubble-row.is-mine .dm-bubble {
    background: linear-gradient(180deg, #3b6fe0 0%, #2d5dcc 100%);
    color: #ffffff;
    border: 0.5px solid rgba(255, 255, 255, 0.10);
    box-shadow:
        0 2px 6px rgba(59, 111, 224, 0.20),
        0 1px 2px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .dm-bubble-reply {
    background: rgba(0, 0, 0, 0.04);
    border-left-color: rgba(0, 0, 0, 0.30);
}
html[data-theme="light"] .dm-bubble-row.is-mine .dm-bubble-reply {
    background: rgba(255, 255, 255, 0.18);
    border-left-color: rgba(255, 255, 255, 0.85);
}
html[data-theme="light"] .dm-bubble-row.is-theirs .dm-bubble-reply {
    background: rgba(0, 0, 0, 0.05);
    border-left-color: rgba(0, 0, 0, 0.35);
}
html[data-theme="light"] .dm-bubble-reply:hover { background: rgba(0, 0, 0, 0.08); }
html[data-theme="light"] .dm-bubble-row.is-mine .dm-bubble-reply:hover { background: rgba(255, 255, 255, 0.28); }

html[data-theme="light"] .dm-bubble-row.is-deleted .dm-bubble {
    background: rgba(0, 0, 0, 0.03) !important;
    color: rgba(0, 0, 0, 0.40) !important;
    border: 1px dashed rgba(0, 0, 0, 0.12) !important;
}
html[data-theme="light"] .dm-bubble-edited { color: rgba(0, 0, 0, 0.45); }
html[data-theme="light"] .dm-bubble-row.is-mine .dm-bubble-edited { color: rgba(255, 255, 255, 0.75); }

html[data-theme="light"] .dm-read-receipt { color: #3b6fe0; }

/* DM composer */
html[data-theme="light"] .dm-composer {
    background: rgba(255, 255, 255, 0.94);
    border-top-color: var(--border);
}
html[data-theme="light"] .dm-composer textarea {
    background: #f0f2f7;
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text);
}
html[data-theme="light"] .dm-composer textarea::placeholder { color: #9ca3af; }
html[data-theme="light"] .dm-composer textarea:focus {
    background: #ffffff;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
html[data-theme="light"] .dm-attach-btn {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-muted);
}
html[data-theme="light"] .dm-attach-btn:hover {
    background: rgba(0, 0, 0, 0.09);
    color: var(--text);
}
html[data-theme="light"] .dm-send:disabled {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-faint);
}

/* DM bubble menu trigger */
html[data-theme="light"] .dm-bubble-menu-trigger {
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.45);
}
html[data-theme="light"] .dm-bubble-menu-trigger:hover {
    background: rgba(0, 0, 0, 0.10);
    color: var(--text);
}

/* DM sheets & modals */
html[data-theme="light"] .dm-actions-panel,
html[data-theme="light"] .dm-edit-panel {
    background: #ffffff;
    border-color: var(--border);
}
html[data-theme="light"] .dm-actions-handle { background: rgba(0, 0, 0, 0.15); }
html[data-theme="light"] .dm-action-item { color: var(--text); }
html[data-theme="light"] .dm-action-item:hover { background: rgba(0, 0, 0, 0.05); }
html[data-theme="light"] .dm-edit-title { color: var(--text); }
html[data-theme="light"] .dm-edit-panel textarea {
    background: #f5f7fa;
    border-color: var(--border-strong);
    color: var(--text);
}
html[data-theme="light"] .dm-edit-cancel {
    border-color: var(--border-strong);
    color: var(--text);
}
html[data-theme="light"] .dm-edit-cancel:hover { background: rgba(0, 0, 0, 0.04); }

/* DM context menu */
html[data-theme="light"] .dm-ctx-backdrop { background: rgba(255, 255, 255, 0.55); }
html[data-theme="light"] .dm-ctx-emoji-row,
html[data-theme="light"] .dm-ctx-action-row {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.18),
        0 2px 8px rgba(0, 0, 0, 0.10);
}
html[data-theme="light"] .dm-ctx-action { color: var(--text); }
html[data-theme="light"] .dm-ctx-action:hover { background: rgba(0, 0, 0, 0.06); }
html[data-theme="light"] .dm-ctx-emoji:hover { background: rgba(0, 0, 0, 0.06); }

/* Typing indicator */
html[data-theme="light"] .dm-typing-indicator {
    background: #f0f2f7;
    border-color: rgba(0, 0, 0, 0.06);
    color: var(--text-muted);
}

/* Reply bar */
html[data-theme="light"] .dm-reply-bar {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--border);
}
html[data-theme="light"] .dm-reply-bar-label { color: var(--accent); }
html[data-theme="light"] .dm-reply-bar-label strong { color: var(--text); }
html[data-theme="light"] .dm-reply-bar-excerpt { color: var(--text-muted); }
html[data-theme="light"] .dm-reply-bar-close { background: rgba(0, 0, 0, 0.05); color: var(--text-dim); }
html[data-theme="light"] .dm-reply-bar-close:hover { background: rgba(0, 0, 0, 0.09); color: var(--text); }

/* Reaction badges */
html[data-theme="light"] .dm-reaction-badge {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .dm-reaction-badge.is-mine {
    background: rgba(59, 111, 224, 0.14);
    border-color: rgba(59, 111, 224, 0.35);
}
html[data-theme="light"] .dm-reaction-count { color: var(--text-muted); }

/* DM info sheet (group) */
html[data-theme="light"] .gc-info-panel { background: #ffffff; border-color: var(--border); }
html[data-theme="light"] .gc-info-handle { background: rgba(0, 0, 0, 0.15); }
html[data-theme="light"] .gc-info-name { color: var(--text); }
html[data-theme="light"] .gc-info-handle { color: var(--text-muted); }
html[data-theme="light"] .gc-info-desc { color: var(--text-muted); }
html[data-theme="light"] .gc-info-avatar { background: #f5f7fa; color: var(--text-muted); }
html[data-theme="light"] .gc-info-hero { border-bottom-color: var(--border); }
html[data-theme="light"] .gc-info-section-label { color: var(--text-dim); }
html[data-theme="light"] .gc-member-row:hover { background: rgba(0, 0, 0, 0.03); }
html[data-theme="light"] .gc-member-avatar { background: #f5f7fa; color: var(--text-muted); }
html[data-theme="light"] .gc-member-name { color: var(--text); }
html[data-theme="light"] .gc-member-handle { color: var(--text-muted); }
html[data-theme="light"] .gc-info-invite-url { background: #f5f7fa; border-color: var(--border); }
html[data-theme="light"] .gc-info-invite-url code { color: var(--text-muted); }
html[data-theme="light"] .gc-add-row:hover { background: rgba(0, 0, 0, 0.03); }
html[data-theme="light"] .gc-info-members-section,
html[data-theme="light"] .gc-info-add-section { border-bottom-color: var(--border); }
html[data-theme="light"] .gc-member-menu-btn { background: rgba(0, 0, 0, 0.05); color: var(--text-dim); }
html[data-theme="light"] .gc-member-menu-btn:hover { background: rgba(0, 0, 0, 0.10); color: var(--text); }
html[data-theme="light"] .gc-member-action {
    background: #ffffff;
    border-color: var(--border);
    color: var(--text-muted);
}
html[data-theme="light"] .gc-member-action:hover { background: #f5f7fa; border-color: var(--border-strong); color: var(--text); }

/* Sticker panel */
html[data-theme="light"] .sticker-panel-inner {
    background: rgba(255, 255, 255, 0.96);
    border-color: var(--border);
}
html[data-theme="light"] .sticker-panel-head { border-bottom-color: var(--border); }
html[data-theme="light"] .sticker-panel-tab { color: var(--text-muted); }
html[data-theme="light"] .sticker-panel-tab.is-active {
    background: rgba(168, 85, 247, 0.14);
    color: #a855f7;
}
html[data-theme="light"] .sticker-panel-close { background: rgba(0, 0, 0, 0.05); color: var(--text-dim); }
html[data-theme="light"] .sticker-item {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .sticker-item:hover { background: rgba(0, 0, 0, 0.06); }

/* Sticker action sheet */
html[data-theme="light"] .sticker-action-panel {
    background: #ffffff;
    border-color: var(--border);
}
html[data-theme="light"] .sticker-action-handle { background: rgba(0, 0, 0, 0.15); }
html[data-theme="light"] .sticker-action-btn.is-cancel {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-muted);
}
html[data-theme="light"] .sticker-action-btn.is-cancel:hover { background: rgba(0, 0, 0, 0.09); }

/* ============================================================
   GROUP CHAT (basic — inherits many from DM)
   ============================================================ */
html[data-theme="light"] .dm-nav-back,
html[data-theme="light"] .dm-nav-name,
html[data-theme="light"] .dm-nav-avatar {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .dm-sender-name { color: #a855f7; }

/* ============================================================
   MODALS
   ============================================================ */
html[data-theme="light"] .composer-modal { background: var(--bg); }
html[data-theme="light"] .composer-header {
    background: var(--bg);
    border-bottom-color: var(--border);
}
html[data-theme="light"] .composer-close { color: var(--text-muted); }
html[data-theme="light"] .composer-close:hover {
    background: var(--bg-hover);
    color: var(--text);
}
html[data-theme="light"] .composer-title { color: var(--text); }
html[data-theme="light"] .composer-textarea { color: var(--text); }
html[data-theme="light"] .composer-textarea::placeholder { color: #a8b2c2; }
html[data-theme="light"] .composer-help { color: var(--text-dim); }
html[data-theme="light"] .composer-file-label,
html[data-theme="light"] .composer-checkbox {
    border-color: var(--border-strong);
    color: var(--text-muted);
    background: transparent;
}
html[data-theme="light"] .composer-file-label:hover,
html[data-theme="light"] .composer-checkbox:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
html[data-theme="light"] .composer-poll {
    background: #f5f7fa;
    border-color: var(--border-strong);
}
html[data-theme="light"] .composer-field-label { color: var(--text-dim); }
html[data-theme="light"] .composer-input {
    background: #ffffff;
    border-color: var(--border-strong);
    color: var(--text);
}
html[data-theme="light"] .composer-input::placeholder { color: #a8b2c2; }
html[data-theme="light"] .composer-poll-remove {
    border-color: var(--border-strong);
    color: var(--text-muted);
}
html[data-theme="light"] .composer-poll-remove:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: var(--danger-soft);
}
html[data-theme="light"] .composer-poll-add {
    border-color: var(--border-strong);
    color: var(--text-muted);
}
html[data-theme="light"] .composer-poll-add:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
html[data-theme="light"] .composer-tab {
    border-color: var(--border-strong);
    color: var(--text-muted);
}
html[data-theme="light"] .composer-tab:has(input:checked) {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* Carousel composer */
html[data-theme="light"] .carousel-head {
    border-color: var(--border);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.05) 0%, rgba(236, 72, 153, 0.04) 100%);
}
html[data-theme="light"] .carousel-head-title { color: var(--text); }
html[data-theme="light"] .carousel-head-help { color: var(--text-dim); }
html[data-theme="light"] .carousel-dropzone {
    background: #f5f7fa;
    border-color: var(--border-strong);
}
html[data-theme="light"] .carousel-dropzone:hover,
html[data-theme="light"] .carousel-dropzone:focus-within {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.04);
}
html[data-theme="light"] .carousel-dropzone-label { color: var(--text); }
html[data-theme="light"] .carousel-dropzone-help { color: var(--text-dim); }

/* Avatar modal */
html[data-theme="light"] dialog.avatar-modal::backdrop { background: rgba(0, 0, 0, 0.72); }

/* Note viewer */
html[data-theme="light"] .note-viewer-backdrop {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
}
html[data-theme="light"] .note-viewer-bubble {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.10);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.02),
        0 24px 80px -12px rgba(0, 0, 0, 0.20),
        0 12px 40px -8px rgba(0, 0, 0, 0.10);
}
html[data-theme="light"] .note-viewer-text { color: var(--text); }
html[data-theme="light"] .note-viewer-author { color: var(--text-muted); border-bottom-color: var(--border); }
html[data-theme="light"] .note-viewer-actions { border-top-color: var(--border); }
html[data-theme="light"] .note-action-btn {
    border-color: var(--border-strong);
    color: var(--text-muted);
}
html[data-theme="light"] .note-action-btn:hover {
    color: var(--text);
    border-color: var(--text-dim);
}

/* Share sheet */
html[data-theme="light"] .share-sheet-panel {
    background: #ffffff;
    border-color: var(--border);
}
html[data-theme="light"] .share-sheet-handle { background: rgba(0, 0, 0, 0.15); }
html[data-theme="light"] .share-sheet-header { border-bottom-color: var(--border); }
html[data-theme="light"] .share-sheet-title { color: var(--text); }
html[data-theme="light"] .share-sheet-back,
html[data-theme="light"] .share-sheet-close { color: var(--text-dim); }
html[data-theme="light"] .share-sheet-back:hover,
html[data-theme="light"] .share-sheet-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text);
}
html[data-theme="light"] .share-option:hover { background: rgba(0, 0, 0, 0.04); }
html[data-theme="light"] .share-option:active { background: rgba(0, 0, 0, 0.08); }
html[data-theme="light"] .share-option-title { color: var(--text); }
html[data-theme="light"] .share-option-sub { color: var(--text-muted); }
html[data-theme="light"] .share-dm-search input {
    background: #f5f7fa;
    border-color: var(--border);
    color: var(--text);
}
html[data-theme="light"] .share-dm-search input:focus { border-color: var(--accent); background: #ffffff; }
html[data-theme="light"] .share-dm-item:hover { background: rgba(0, 0, 0, 0.04); }
html[data-theme="light"] .share-dm-item:active { background: rgba(0, 0, 0, 0.08); }
html[data-theme="light"] .share-dm-avatar { background: #f5f7fa; color: var(--text-muted); }
html[data-theme="light"] .share-dm-name { color: var(--text); }
html[data-theme="light"] .share-dm-handle { color: var(--text-muted); }
html[data-theme="light"] .share-dm-arrow { color: var(--text-faint); }
html[data-theme="light"] .share-dm-selected {
    background: var(--accent-soft);
    border-color: rgba(59, 111, 224, 0.22);
}
html[data-theme="light"] .share-dm-selected-label { color: var(--accent); }
html[data-theme="light"] .share-dm-selected-name { color: var(--text); }
html[data-theme="light"] .share-dm-selected-handle { color: var(--text-muted); }
html[data-theme="light"] .share-dm-preview {
    background: rgba(59, 111, 224, 0.05);
    border-color: rgba(59, 111, 224, 0.16);
}
html[data-theme="light"] .share-sheet-body .field textarea {
    background: #f5f7fa;
    border-color: var(--border);
    color: var(--text);
}
html[data-theme="light"] .share-sheet-body .field textarea:focus {
    border-color: var(--accent);
    background: #ffffff;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Group join modal */
html[data-theme="light"] .group-join-backdrop { background: rgba(255, 255, 255, 0.55); }
html[data-theme="light"] .group-join-panel {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.10);
}
html[data-theme="light"] .group-join-title { color: var(--text); }
html[data-theme="light"] .group-join-name { color: var(--text); }
html[data-theme="light"] .group-join-handle { color: var(--text-muted); }
html[data-theme="light"] .group-join-desc { color: var(--text-muted); }
html[data-theme="light"] .group-join-btn.is-cancel {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-muted);
}

/* Account switcher sheet */
html[data-theme="light"] .acc-sheet-backdrop { background: rgba(255, 255, 255, 0.55); }
html[data-theme="light"] .acc-sheet-panel {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(0, 0, 0, 0.10);
}
html[data-theme="light"] .acc-sheet-handle { background: rgba(0, 0, 0, 0.18); }
html[data-theme="light"] .acc-sheet-header { border-bottom-color: var(--border); }
html[data-theme="light"] .acc-sheet-title { color: var(--text); }
html[data-theme="light"] .acc-sheet-x { background: rgba(0, 0, 0, 0.05); color: var(--text-muted); }
html[data-theme="light"] .acc-sheet-x:hover { background: rgba(0, 0, 0, 0.10); color: var(--text); }
html[data-theme="light"] .acc-item {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .acc-item.is-current {
    background: var(--accent-soft);
    border-color: rgba(59, 111, 224, 0.22);
}
html[data-theme="light"] .acc-avatar { background: #f5f7fa; color: var(--text-muted); border-color: rgba(0, 0, 0, 0.08); }
html[data-theme="light"] .acc-name { color: var(--text); }
html[data-theme="light"] .acc-handle { color: var(--text-muted); }
html[data-theme="light"] .acc-action {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
    color: var(--text);
}
html[data-theme="light"] .acc-action:hover { background: rgba(0, 0, 0, 0.06); }

/* APK download FAB */
html[data-theme="light"] .apk-fab-toast {
    background: #ffffff;
    border-color: rgba(22, 163, 74, 0.42);
    color: var(--text);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(22, 163, 74, 0.10);
}

/* ============================================================
   STORY BAR (in feed)
   ============================================================ */
html[data-theme="light"] .story-avatar { background: #e4e7ee; color: var(--accent); }
html[data-theme="light"] .story-avatar-fallback { background: linear-gradient(135deg, #e4e7ee, #f5f7fa); }
html[data-theme="light"] .story-avatar-active {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, #5b8def 0%, #a855f7 50%, #f43f5e 100%) border-box;
}
html[data-theme="light"] .story-avatar-seen {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, #d1d6e0 0%, #e4e7ee 100%) border-box;
}
html[data-theme="light"] .story-avatar-add {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-dim);
}
html[data-theme="light"] .story-label { color: var(--text-muted); }

/* Story viewer stays dark by design — skip */

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
html[data-theme="light"] .notif-list {
    background: var(--bg-elevated);
    border-color: var(--border);
}
html[data-theme="light"] .notif-item { border-bottom-color: var(--border); }
html[data-theme="light"] .notif-item:hover { background: var(--bg-hover); }
html[data-theme="light"] .notif-item-unread { background: rgba(59, 111, 224, 0.05); }
html[data-theme="light"] .notif-item-unread::before { background: var(--accent); }
html[data-theme="light"] .notif-avatar { background: #f5f7fa; color: var(--text-muted); }
html[data-theme="light"] .notif-icon { border-color: var(--bg-elevated); }
html[data-theme="light"] .notif-text { color: var(--text); }
html[data-theme="light"] .notif-text strong { color: var(--text); }
html[data-theme="light"] .notif-preview {
    background: rgba(0, 0, 0, 0.03);
    border-left-color: var(--border-strong);
    color: var(--text-muted);
}
html[data-theme="light"] .notif-time { color: var(--text-dim); }
html[data-theme="light"] .notif-dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(59, 111, 224, 0.15); }

/* ============================================================
   LEADERBOARD
   ============================================================ */
html[data-theme="light"] .lb-header-title { color: var(--text); }
html[data-theme="light"] .lb-header-sub { color: var(--text-muted); }
html[data-theme="light"] .lb-header-eyebrow { color: var(--text-dim); }
html[data-theme="light"] .lb-tab {
    background: #ffffff;
    border-color: var(--border);
    color: var(--text-muted);
}
html[data-theme="light"] .lb-tab:hover { background: #f5f7fa; border-color: var(--border-strong); color: var(--text); }
html[data-theme="light"] .lb-tab.is-active { background: var(--accent); border-color: var(--accent); color: #ffffff; }
html[data-theme="light"] .lb-meta {
    background: #ffffff;
    border-color: var(--border);
}
html[data-theme="light"] .lb-meta-label { color: var(--text-dim); }
html[data-theme="light"] .lb-meta-desc { color: var(--text-muted); }
html[data-theme="light"] .lb-privacy-note {
    background: rgba(59, 111, 224, 0.05);
    border-color: rgba(59, 111, 224, 0.18);
    color: var(--text-muted);
}
html[data-theme="light"] .lb-podium-card {
    background: var(--bg-elevated);
    border-color: var(--border);
}
html[data-theme="light"] .lb-podium-card.is-rank-1 {
    background: linear-gradient(180deg, rgba(184, 147, 74, 0.10), #ffffff 65%);
}
html[data-theme="light"] .lb-podium-avatar { background: #f5f7fa; color: var(--text-muted); border-color: var(--border); }
html[data-theme="light"] .lb-podium-name { color: var(--text); }
html[data-theme="light"] .lb-podium-handle { color: var(--text-dim); }
html[data-theme="light"] .lb-podium-metric { color: var(--text); }
html[data-theme="light"] .lb-list {
    background: var(--bg-elevated);
    border-color: var(--border);
}
html[data-theme="light"] .lb-row { border-bottom-color: var(--border); }
html[data-theme="light"] .lb-row:hover { background: rgba(0, 0, 0, 0.02); }
html[data-theme="light"] .lb-row.is-viewer { background: rgba(59, 111, 224, 0.05); }
html[data-theme="light"] .lb-row-rank { color: var(--text-dim); }
html[data-theme="light"] .lb-row.is-viewer .lb-row-rank { color: var(--accent); }
html[data-theme="light"] .lb-row-avatar { background: #f5f7fa; color: var(--text-muted); }
html[data-theme="light"] .lb-row-name { color: var(--text); }
html[data-theme="light"] .lb-row-handle { color: var(--text-muted); }
html[data-theme="light"] .lb-row-metric { color: var(--text); }
html[data-theme="light"] .lb-viewer-rank {
    background: rgba(59, 111, 224, 0.06);
    border-color: rgba(59, 111, 224, 0.20);
}
html[data-theme="light"] .lb-viewer-rank-label { color: var(--accent); }
html[data-theme="light"] .lb-viewer-rank-value { color: var(--text); }
html[data-theme="light"] .lb-viewer-rank-metric { color: var(--text-muted); }
html[data-theme="light"] .lb-top10-note { color: var(--text-dim); }
html[data-theme="light"] .lb-private-badge {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text-muted);
}
html[data-theme="light"] .lb-metric-unit { color: var(--text-dim); }

/* ============================================================
   MARKETPLACE
   ============================================================ */
html[data-theme="light"] .catalog-title { color: var(--text); }
html[data-theme="light"] .catalog-sub { color: var(--text-muted); }
html[data-theme="light"] .catalog-eyebrow { color: var(--text-dim); }
html[data-theme="light"] .catalog-result-count { color: var(--text-muted); }
html[data-theme="light"] .catalog-result-count strong { color: var(--text); }
html[data-theme="light"] .mkt-search-input {
    background: #ffffff;
    border-color: var(--border-strong);
    color: var(--text);
}
html[data-theme="light"] .mkt-search-input::placeholder { color: #a8b2c2; }
html[data-theme="light"] .mkt-search-input:focus { border-color: var(--accent); }
html[data-theme="light"] .mkt-search-clear { color: var(--text-dim); }
html[data-theme="light"] .mkt-search-clear:hover { background: rgba(0, 0, 0, 0.05); color: var(--text); }
html[data-theme="light"] .mkt-dd-select {
    background: #ffffff;
    border-color: var(--border-strong);
    color: var(--text);
}
html[data-theme="light"] .mkt-dd-select option { background: #ffffff; color: var(--text); }
html[data-theme="light"] .mkt-filter-btn {
    background: #ffffff;
    border-color: var(--border-strong);
    color: var(--text-muted);
}
html[data-theme="light"] .mkt-filter-btn.is-active { background: var(--accent); border-color: var(--accent); color: #ffffff; }
html[data-theme="light"] .mkt-panel { background: #ffffff; border-color: var(--border); }
html[data-theme="light"] .mkt-chip {
    background: #ffffff;
    border-color: var(--border-strong);
    color: var(--text-muted);
}
html[data-theme="light"] .mkt-chip.is-active { background: var(--accent); border-color: var(--accent); color: #ffffff; }
html[data-theme="light"] .mkt-price-input {
    background: #ffffff;
    border-color: var(--border-strong);
    color: var(--text);
}
html[data-theme="light"] .mkt-price-apply { background: var(--border-strong); color: var(--text); }
html[data-theme="light"] .mkt-preset {
    border-color: var(--border-strong);
    color: var(--text-muted);
}
html[data-theme="light"] .mkt-preset.is-active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
html[data-theme="light"] .mkt-active-pill {
    background: rgba(59, 111, 224, 0.10);
    border-color: rgba(59, 111, 224, 0.30);
    color: var(--accent);
}
html[data-theme="light"] .mkt-active-clear { color: var(--text-muted); }

html[data-theme="light"] .asset-row {
    background: var(--bg-elevated);
    border-color: var(--border);
}
html[data-theme="light"] .asset-row:hover { border-color: var(--border-strong); }
html[data-theme="light"] .asset-row-name { color: var(--text); }
html[data-theme="light"] .asset-row-desc { color: var(--text-dim); }
html[data-theme="light"] .asset-row-price { color: var(--text); }
html[data-theme="light"] .asset-row-supply { color: var(--text-muted); }
html[data-theme="light"] .asset-row-bar { background: var(--border); }
html[data-theme="light"] .asset-row-arrow {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-muted);
}
html[data-theme="light"] .asset-row:hover .asset-row-arrow { background: var(--accent); color: #ffffff; }

html[data-theme="light"] .asset-detail-head { background: var(--bg-elevated); border-color: var(--border); }
html[data-theme="light"] .asset-detail-price { color: var(--text); }
html[data-theme="light"] .asset-detail-desc { color: var(--text-muted); }
html[data-theme="light"] .asset-detail-brand { color: var(--text-dim); }
html[data-theme="light"] .asset-balance-bar { background: #f5f7fa; border-color: var(--border); }
html[data-theme="light"] .asset-balance-label { color: var(--text-dim); }
html[data-theme="light"] .asset-balance-value { color: var(--text); }
html[data-theme="light"] .asset-gallery { background: #f5f7fa; border-color: var(--border); }
html[data-theme="light"] .asset-gallery-title { color: var(--text-muted); }
html[data-theme="light"] .asset-gallery-count { color: var(--text-dim); }
html[data-theme="light"] .asset-gallery-empty-icon { background: rgba(59, 111, 224, 0.08); }
html[data-theme="light"] .asset-gallery-empty-title { color: var(--text); }
html[data-theme="light"] .asset-gallery-empty-sub { color: var(--text-muted); }
html[data-theme="light"] .asset-native-input {
    background: #ffffff;
    border-color: var(--border-strong);
    color: var(--text);
}
html[data-theme="light"] .asset-upload-help { color: var(--text-dim); }
html[data-theme="light"] .asset-buy-summary { background: #f5f7fa; border-color: var(--border); }
html[data-theme="light"] .asset-buy-row { color: var(--text-muted); }
html[data-theme="light"] .asset-buy-total { color: var(--text); }

/* ============================================================
   BANK / SCHBANK
   ============================================================ */
html[data-theme="light"] .bank-title { color: var(--text); }
html[data-theme="light"] .bank-eyebrow { color: var(--text-dim); }
html[data-theme="light"] .bank-card { background: var(--bg-elevated); border-color: var(--border); }
html[data-theme="light"] .bank-label { color: var(--text-dim); }
html[data-theme="light"] .bank-balance { color: var(--text); }
html[data-theme="light"] .bank-account { color: var(--text); }
html[data-theme="light"] .bank-ref-input {
    background: #f5f7fa;
    border-color: var(--border-strong);
    color: var(--text-muted);
}
html[data-theme="light"] .bank-ref-copy {
    background: #ffffff;
    border-color: var(--border-strong);
    color: var(--text);
}
html[data-theme="light"] .bank-ref-copy:hover { background: #f5f7fa; }
html[data-theme="light"] .bank-help { color: var(--text-dim); }
html[data-theme="light"] .bank-stat { background: #f5f7fa; }
html[data-theme="light"] .bank-stat dt { color: var(--text-dim); }
html[data-theme="light"] .bank-stat dd { color: var(--text); }
html[data-theme="light"] .bank-tx { border-bottom-color: var(--border); }
html[data-theme="light"] .bank-tx-desc { color: var(--text); }
html[data-theme="light"] .bank-tx-time { color: var(--text-dim); }
html[data-theme="light"] .bank-icon-btn-history,
html[data-theme="light"] .bank-icon-btn-collection,
html[data-theme="light"] .bank-icon-btn-leaderboard {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text);
}
html[data-theme="light"] .bank-icon-btn-history:hover,
html[data-theme="light"] .bank-icon-btn-collection:hover,
html[data-theme="light"] .bank-icon-btn-leaderboard:hover {
    background: rgba(0, 0, 0, 0.10);
}
html[data-theme="light"] .bank-shortcut {
    background: rgba(0, 0, 0, 0.02);
    border-color: var(--border);
}
html[data-theme="light"] .bank-shortcut:hover { background: rgba(0, 0, 0, 0.05); border-color: var(--border-strong); }
html[data-theme="light"] .bank-shortcut-title { color: var(--text); }
html[data-theme="light"] .bank-shortcut-sub { color: var(--text-dim); }
html[data-theme="light"] .bank-networth-label { color: var(--text-muted); }
html[data-theme="light"] .bank-networth-value { color: var(--text); }
html[data-theme="light"] .bank-networth-sub { color: var(--text-faint); }

/* Transfer receipt */
html[data-theme="light"] .receipt { background: var(--bg-elevated); border-color: var(--border); }
html[data-theme="light"] .receipt-head-brand { color: var(--text); }
html[data-theme="light"] .receipt-head-sub { color: var(--text-dim); }
html[data-theme="light"] .receipt-title-label { color: var(--text); }
html[data-theme="light"] .receipt-title-ref { color: var(--text-dim); }
html[data-theme="light"] .receipt-amount-label { color: var(--text-dim); }
html[data-theme="light"] .receipt-amount-value { color: var(--text); }
html[data-theme="light"] .receipt-rule { border-top-color: var(--border); }
html[data-theme="light"] .receipt-parties dt,
html[data-theme="light"] .receipt-details dt { color: var(--text-dim); }
html[data-theme="light"] .receipt-parties dd,
html[data-theme="light"] .receipt-details dd { color: var(--text); }
html[data-theme="light"] .receipt-party-acc { color: var(--text-muted); }
html[data-theme="light"] .receipt-note-label { color: var(--text-dim); }
html[data-theme="light"] .receipt-note-body { color: var(--text-muted); }
html[data-theme="light"] .receipt-foot-text,
html[data-theme="light"] .receipt-foot-meta { color: var(--text-faint); }
html[data-theme="light"] .receipt-action {
    border-color: var(--border-strong);
    color: var(--text);
}
html[data-theme="light"] .receipt-action:hover { background: #f5f7fa; }

/* ============================================================
   FAMILY PAGES
   ============================================================ */
html[data-theme="light"] .family-landing-title { color: var(--text); }
html[data-theme="light"] .family-landing-sub { color: var(--text-muted); }
html[data-theme="light"] .family-eyebrow { color: var(--text-dim); }
html[data-theme="light"] .family-landing-card {
    background: linear-gradient(135deg, rgba(59, 111, 224, 0.08), rgba(255, 255, 255, 0.5));
    border-color: rgba(59, 111, 224, 0.20);
}
html[data-theme="light"] .family-landing-avatar { background: #f5f7fa; color: var(--text-muted); }
html[data-theme="light"] .family-landing-name { color: var(--text); }
html[data-theme="light"] .family-landing-meta { color: var(--text-muted); }
html[data-theme="light"] .family-landing-arrow { background: rgba(0, 0, 0, 0.05); color: var(--text-muted); }
html[data-theme="light"] .family-landing-empty {
    background: var(--bg-elevated);
    border-color: var(--border);
    color: var(--text-muted);
}
html[data-theme="light"] .family-landing-empty-title { color: var(--text); }
html[data-theme="light"] .family-landing-empty-sub { color: var(--text-muted); }
html[data-theme="light"] .family-landing-fee { color: var(--text-dim); }
html[data-theme="light"] .family-section-title { color: var(--text-dim); }
html[data-theme="light"] .family-invite { background: var(--bg-elevated); border-color: var(--border); }
html[data-theme="light"] .family-invite-avatar { background: #f5f7fa; color: var(--text-muted); }
html[data-theme="light"] .family-invite-name { color: var(--text); }
html[data-theme="light"] .family-invite-meta { color: var(--text-muted); }
html[data-theme="light"] .family-hero-name { color: var(--text); }
html[data-theme="light"] .family-hero-handle { color: var(--text-dim); }
html[data-theme="light"] .family-hero-desc { color: var(--text-muted); }
html[data-theme="light"] .family-hero-avatar { background: #f5f7fa; color: var(--text-muted); }
html[data-theme="light"] .family-stat { background: var(--bg-elevated); border-color: var(--border); }
html[data-theme="light"] .family-stat-label { color: var(--text-dim); }
html[data-theme="light"] .family-stat-value { color: var(--text); }
html[data-theme="light"] .family-stat-hint { color: var(--text-dim); }
html[data-theme="light"] .family-stat-rank { color: var(--text); }
html[data-theme="light"] .family-stat-private { color: var(--text-dim); }
html[data-theme="light"] .family-member { background: var(--bg-elevated); border-color: var(--border); }
html[data-theme="light"] .family-member-avatar { background: #f5f7fa; color: var(--text-muted); }
html[data-theme="light"] .family-member-name { color: var(--text); }
html[data-theme="light"] .family-member-handle { color: var(--text-muted); }
html[data-theme="light"] .family-member-remove {
    border-color: var(--border-strong);
    color: var(--text-muted);
}
html[data-theme="light"] .family-invite-form input {
    background: #ffffff;
    border-color: var(--border-strong);
    color: var(--text);
}
html[data-theme="light"] .family-header-btn {
    border-color: var(--border-strong);
    color: var(--text-muted);
}
html[data-theme="light"] .family-fee-box {
    background: linear-gradient(135deg, rgba(184, 147, 74, 0.08), rgba(255, 255, 255, 0.5));
    border-color: rgba(184, 147, 74, 0.28);
}
html[data-theme="light"] .family-fee-box.is-insufficient {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(255, 255, 255, 0.5));
    border-color: rgba(220, 38, 38, 0.28);
}
html[data-theme="light"] .family-fee-label { color: var(--text-muted); }
html[data-theme="light"] .family-fee-value { color: var(--gold); }
html[data-theme="light"] .family-fee-balance { color: var(--text); }
html[data-theme="light"] .family-fee-warn { color: #dc2626; }

/* ============================================================
   SEARCH
   ============================================================ */
html[data-theme="light"] .search-input-wrap {
    background: var(--bg-elevated);
    border-color: var(--border-strong);
}
html[data-theme="light"] .search-input { color: var(--text); }
html[data-theme="light"] .search-input::placeholder { color: #a8b2c2; }
html[data-theme="light"] .search-input-icon { color: var(--text-dim); }
html[data-theme="light"] .search-clear { color: var(--text-dim); }
html[data-theme="light"] .search-clear:hover { background: var(--bg-hover); color: var(--text); }
html[data-theme="light"] .search-empty-icon {
    background: var(--bg-elevated);
    border-color: var(--border);
    color: var(--text-faint);
}
html[data-theme="light"] .search-empty-title { color: var(--text); }
html[data-theme="light"] .search-empty-help { color: var(--text-muted); }
html[data-theme="light"] .user-list { background: var(--bg-elevated); border-color: var(--border); }
html[data-theme="light"] .user-item { border-bottom-color: var(--border); }
html[data-theme="light"] .user-item-link:hover { background: var(--bg-hover); }
html[data-theme="light"] .user-item-avatar { background: #f5f7fa; color: var(--accent); }
html[data-theme="light"] .user-item-name { color: var(--text); }
html[data-theme="light"] .user-item-handle { color: var(--text-muted); }
html[data-theme="light"] .user-row { border-bottom-color: var(--border); }
html[data-theme="light"] .user-row:hover { background: var(--bg-hover); }
html[data-theme="light"] .user-row-avatar { background: #f5f7fa; color: var(--accent); }
html[data-theme="light"] .user-row-name { color: var(--text); }
html[data-theme="light"] .user-row-handle { color: var(--text-muted); }
html[data-theme="light"] .follows-header { border-bottom-color: var(--border); }
html[data-theme="light"] .follows-back { color: var(--text-muted); }
html[data-theme="light"] .follows-back:hover { background: var(--bg-hover); color: var(--text); }
html[data-theme="light"] .follows-header-title { color: var(--text); }
html[data-theme="light"] .follows-header-sub { color: var(--text-dim); }

html[data-theme="light"] .search-section-title { color: var(--text-dim); }
html[data-theme="light"] .group-search-link { background: var(--bg-elevated); border-color: var(--border); }
html[data-theme="light"] .group-search-link:hover { background: #f5f7fa; border-color: var(--border-strong); }
html[data-theme="light"] .group-search-avatar { background: #f5f7fa; color: var(--text-muted); }
html[data-theme="light"] .group-search-name { color: var(--text); }
html[data-theme="light"] .group-search-handle { color: var(--text-muted); }
html[data-theme="light"] .group-search-desc { color: var(--text-dim); }

/* ============================================================
   GROUP CREATE / PREVIEW
   ============================================================ */
html[data-theme="light"] .gc-card { background: var(--bg-elevated); border-color: var(--border); }
html[data-theme="light"] .gc-field > label { color: var(--text-muted); }
html[data-theme="light"] .gc-field input[type="text"],
html[data-theme="light"] .gc-field textarea {
    background: #ffffff;
    border-color: var(--border-strong);
    color: var(--text);
}
html[data-theme="light"] .gc-input-prefix { background: #ffffff; border-color: var(--border-strong); }
html[data-theme="light"] .gc-prefix-at { color: var(--text-dim); }
html[data-theme="light"] .gc-input-prefix > input { color: var(--text); }
html[data-theme="light"] .gc-privacy-opt { background: #ffffff; border-color: var(--border-strong); }
html[data-theme="light"] .gc-privacy-opt.is-active { border-color: var(--accent); background: var(--accent-soft); }
html[data-theme="light"] .gc-privacy-title { color: var(--text); }
html[data-theme="light"] .gc-privacy-sub { color: var(--text-muted); }
html[data-theme="light"] .gc-search input { background: #ffffff; border-color: var(--border-strong); color: var(--text); }
html[data-theme="light"] .gc-members { border-color: var(--border); }
html[data-theme="light"] .gc-member { border-bottom-color: var(--border); }
html[data-theme="light"] .gc-member-avatar { background: #f5f7fa; color: var(--text-muted); }
html[data-theme="light"] .gc-member-name { color: var(--text); }
html[data-theme="light"] .gc-member-handle { color: var(--text-muted); }
html[data-theme="light"] .gc-member-check { border-color: var(--border-strong); }
html[data-theme="light"] .gc-avatar-preview { background: #f5f7fa; border-color: var(--border-strong); color: var(--text-dim); }
html[data-theme="light"] .gc-avatar-label { color: var(--text-muted); }
html[data-theme="light"] .gc-members-title { color: var(--text-muted); }
html[data-theme="light"] .gc-members-hint { color: var(--text-dim); }
html[data-theme="light"] .gc-help { color: var(--text-dim); }

html[data-theme="light"] .gp-avatar { background: #f5f7fa; color: var(--text-muted); }
html[data-theme="light"] .gp-name { color: var(--text); }
html[data-theme="light"] .gp-username { color: var(--text-dim); }
html[data-theme="light"] .gp-meta-item { color: var(--text-muted); }
html[data-theme="light"] .gp-desc { color: var(--text-muted); }

/* ============================================================
   GARAGE / COLLECTION
   ============================================================ */
html[data-theme="light"] .garage-item { border-bottom-color: var(--border); }
html[data-theme="light"] .garage-item-media { background: #f5f7fa; }
html[data-theme="light"] .garage-item-placeholder { color: var(--border-strong); }
html[data-theme="light"] .garage-item-name { color: var(--text); }
html[data-theme="light"] .garage-item-plate { color: var(--text-muted); }
html[data-theme="light"] .garage-tax-amount { color: var(--text-muted); }
html[data-theme="light"] .vehicle-detail { color: var(--text); }
html[data-theme="light"] .vehicle-media { background: #f5f7fa; }
html[data-theme="light"] .vehicle-placeholder { color: var(--border-strong); }
html[data-theme="light"] .vehicle-label { color: var(--text-dim); }
html[data-theme="light"] .vehicle-plate { color: var(--text); }
html[data-theme="light"] .vehicle-plate-note { color: var(--text-muted); }
html[data-theme="light"] .vehicle-tax-amount { color: var(--text); }
html[data-theme="light"] .vehicle-tax-rate { color: var(--text-muted); }
html[data-theme="light"] .vehicle-status-hint { color: var(--text-muted); }
html[data-theme="light"] .vehicle-rule { border-top-color: var(--border); }

html[data-theme="light"] .collection-tabs { border-bottom-color: var(--border); }
html[data-theme="light"] .collection-tab { color: var(--text-dim); }
html[data-theme="light"] .collection-tab:hover { color: var(--text); background: var(--bg-hover); }
html[data-theme="light"] .collection-tab.is-active { background: var(--accent); color: #ffffff; }

/* ============================================================
   VERIFY PAGE
   ============================================================ */
html[data-theme="light"] .verify-page { color: var(--text); }
html[data-theme="light"] .verify-header { background: var(--bg); }
html[data-theme="light"] .verify-back { color: var(--text); }
html[data-theme="light"] .verify-back:hover { background: var(--bg-hover); }
html[data-theme="light"] .verify-title { color: var(--text); }
html[data-theme="light"] .verify-state-title { color: var(--text); }
html[data-theme="light"] .verify-state-sub { color: var(--text-muted); }
html[data-theme="light"] .verify-price { border-top-color: var(--border); border-bottom-color: var(--border); }
html[data-theme="light"] .verify-price-value { color: var(--text); }
html[data-theme="light"] .verify-price-currency { color: var(--text-muted); }
html[data-theme="light"] .verify-price-period { color: var(--text-dim); }
html[data-theme="light"] .verify-card { background: var(--bg-elevated); border-color: var(--border); }
html[data-theme="light"] .verify-user-avatar { background: #f5f7fa; color: var(--text-muted); }
html[data-theme="light"] .verify-user-name { color: var(--text); }
html[data-theme="light"] .verify-user-handle { color: var(--text-muted); }
html[data-theme="light"] .verify-row { border-bottom-color: var(--border); }
html[data-theme="light"] .verify-row-label { color: var(--text-muted); }
html[data-theme="light"] .verify-row-value { color: var(--text); }
html[data-theme="light"] .verify-steps-title { color: var(--text-dim); }
html[data-theme="light"] .verify-step { color: var(--text-muted); }
html[data-theme="light"] .verify-step-num { background: #f5f7fa; color: var(--text-muted); }
html[data-theme="light"] .verify-step strong { color: var(--text); }

/* ============================================================
   REFERRAL LANDING (dark by default, override to light)
   ============================================================ */
html[data-theme="light"] .ref-landing-body {
    background: var(--bg);
    color: var(--text);
}
html[data-theme="light"] .ref-landing-eyebrow { color: var(--text-dim); }
html[data-theme="light"] .ref-landing-avatar { background: #f5f7fa; color: var(--text-muted); }
html[data-theme="light"] .ref-landing-name { color: var(--text); }
html[data-theme="light"] .ref-landing-handle { color: var(--text-muted); }
html[data-theme="light"] .ref-landing-note { color: var(--text-dim); }

/* ============================================================
   TOAST / NOTIFICATIONS UI
   ============================================================ */
html[data-theme="light"] .toast {
    background: #ffffff;
    border-color: var(--border);
    color: var(--text);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
}
html[data-theme="light"] .toast-title { color: var(--text); }
html[data-theme="light"] .toast-body { color: var(--text-muted); }

/* ============================================================
   APK FAB
   ============================================================ */
html[data-theme="light"] .apk-fab-close {
    border-color: #ffffff;
    background: #e4e7ee;
    color: var(--text);
}
html[data-theme="light"] .apk-fab-toast-icon {
    background: rgba(22, 163, 74, 0.15);
    color: #15803d;
}

/* ============================================================
   ADMIN (basic — pages may not be perfect but should be readable)
   ============================================================ */
html[data-theme="light"] .admin-page { background: var(--bg); color: var(--text); }
html[data-theme="light"] .admin-header { border-bottom-color: var(--border); }
html[data-theme="light"] .admin-eyebrow { color: var(--text-dim); }
html[data-theme="light"] .admin-title { color: var(--text); }
html[data-theme="light"] .admin-sub { color: var(--text-muted); }
html[data-theme="light"] .admin-nav-link { color: var(--text-muted); }
html[data-theme="light"] .admin-nav-link:hover { background: #f5f7fa; color: var(--text); border-color: var(--border); }
html[data-theme="light"] .admin-nav-link.is-active { background: var(--accent); color: #ffffff; border-color: var(--accent); }
html[data-theme="light"] .admin-section-title { color: var(--text-dim); }
html[data-theme="light"] .admin-stat,
html[data-theme="light"] .admin-hero,
html[data-theme="light"] .admin-hero-cell,
html[data-theme="light"] .admin-hero-growth,
html[data-theme="light"] .admin-online-panel,
html[data-theme="light"] .admin-list-card,
html[data-theme="light"] .admin-chart-card,
html[data-theme="light"] .admin-insight,
html[data-theme="light"] .admin-table-wrap,
html[data-theme="light"] .admin-empty,
html[data-theme="light"] .admin-form {
    background: var(--bg-elevated);
    border-color: var(--border);
    color: var(--text);
}
html[data-theme="light"] .admin-stat:hover,
html[data-theme="light"] .admin-insight:hover { background: #f5f7fa; border-color: var(--border-strong); }
html[data-theme="light"] .admin-stat-label,
html[data-theme="light"] .admin-hero-cell-label,
html[data-theme="light"] .admin-hero-eyebrow { color: var(--text-dim); }
html[data-theme="light"] .admin-stat-value,
html[data-theme="light"] .admin-hero-cell-value,
html[data-theme="light"] .admin-hero-big-number { color: var(--text); }
html[data-theme="light"] .admin-hero-big-number {
    background: linear-gradient(180deg, #0a0c10 0%, #4a5568 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 24px rgba(59, 111, 224, 0.15);
}
html[data-theme="light"] .admin-hero-big-sub,
html[data-theme="light"] .admin-stat-hint,
html[data-theme="light"] .admin-hero-cell-hint,
html[data-theme="light"] .admin-hero-growth-label,
html[data-theme="light"] .admin-online-handle,
html[data-theme="light"] .admin-list-handle { color: var(--text-dim); }
html[data-theme="light"] .admin-online-item,
html[data-theme="light"] .admin-list-item { background: rgba(0, 0, 0, 0.02); border-color: var(--border); }
html[data-theme="light"] .admin-online-item:hover,
html[data-theme="light"] .admin-list-item:hover { background: rgba(0, 0, 0, 0.04); border-color: var(--border-strong); }
html[data-theme="light"] .admin-online-avatar,
html[data-theme="light"] .admin-list-avatar { background: #f5f7fa; color: var(--text-muted); }
html[data-theme="light"] .admin-online-name,
html[data-theme="light"] .admin-list-name { color: var(--text); }
html[data-theme="light"] .admin-table thead th { background: #f5f7fa; color: var(--text-dim); border-bottom-color: var(--border); }
html[data-theme="light"] .admin-table tbody td { color: var(--text-muted); border-bottom-color: var(--border); }
html[data-theme="light"] .admin-table tbody tr:hover { background: rgba(0, 0, 0, 0.02); }
html[data-theme="light"] .admin-cell-mono { color: var(--text-muted); }
html[data-theme="light"] .admin-link { color: var(--accent); }
html[data-theme="light"] .admin-field > label { color: var(--text-muted); }
html[data-theme="light"] .admin-field input,
html[data-theme="light"] .admin-field textarea,
html[data-theme="light"] .admin-field select {
    background: #ffffff;
    border-color: var(--border-strong);
    color: var(--text);
}
html[data-theme="light"] .admin-hint { color: var(--text-dim); }
html[data-theme="light"] .admin-search input {
    background: #ffffff;
    border-color: var(--border-strong);
    color: var(--text);
}
html[data-theme="light"] .admin-search-clear { color: var(--text-muted); border-color: var(--border); }
html[data-theme="light"] .admin-badge { background: rgba(0, 0, 0, 0.04); color: var(--text-dim); }
html[data-theme="light"] .admin-modal-panel { background: #ffffff; }
html[data-theme="light"] .admin-modal-header { border-bottom-color: var(--border); }
html[data-theme="light"] .admin-modal-title { color: var(--text); }
html[data-theme="light"] .admin-modal-target { background: #f5f7fa; border-color: var(--border); }
html[data-theme="light"] .admin-modal-target-name { color: var(--text); }
html[data-theme="light"] .admin-modal-target-meta { color: var(--text-muted); }
html[data-theme="light"] .admin-modal-label { color: var(--text-muted); }
html[data-theme="light"] .admin-modal-form input[type="text"] {
    background: #ffffff;
    border-color: var(--border-strong);
    color: var(--text);
}
html[data-theme="light"] .admin-modal-btn.is-cancel {
    color: var(--text-muted);
    border-color: var(--border-strong);
}
html[data-theme="light"] .admin-modal-btn.is-cancel:hover { background: rgba(0, 0, 0, 0.04); }
html[data-theme="light"] .staff-card,
html[data-theme="light"] .staff-hero,
html[data-theme="light"] .staff-kpi,
html[data-theme="light"] .staff-chart-card,
html[data-theme="light"] .staff-lb-row,
html[data-theme="light"] .staff-recent-item,
html[data-theme="light"] .staff-add-wrap,
html[data-theme="light"] .staff-link-card,
html[data-theme="light"] .staff-stat,
html[data-theme="light"] .staff-empty-state {
    background: var(--bg-elevated);
    border-color: var(--border);
    color: var(--text);
}
html[data-theme="light"] .staff-title,
html[data-theme="light"] .staff-card-name,
html[data-theme="light"] .staff-kpi-value,
html[data-theme="light"] .staff-stat-value,
html[data-theme="light"] .staff-link-label,
html[data-theme="light"] .staff-lb-name { color: var(--text); }
html[data-theme="light"] .staff-eyebrow,
html[data-theme="light"] .staff-sub,
html[data-theme="light"] .staff-kpi-label,
html[data-theme="light"] .staff-stat-label,
html[data-theme="light"] .staff-link-hint,
html[data-theme="light"] .staff-section-title,
html[data-theme="light"] .staff-card-target-label,
html[data-theme="light"] .staff-card-mini-label { color: var(--text-dim); }
html[data-theme="light"] .staff-link-input {
    background: #ffffff;
    border-color: var(--border-strong);
    color: var(--text);
}
html[data-theme="light"] .staff-card-mini,
html[data-theme="light"] .staff-card-target-form { background: rgba(0, 0, 0, 0.03); border-color: var(--border); }
html[data-theme="light"] .staff-link-display { background: #f5f7fa; border-color: var(--border); }

/* ============================================================
   PAGINATION
   ============================================================ */
html[data-theme="light"] .pagination-link {
    border-color: var(--border-strong);
    color: var(--text-muted);
    background: transparent;
}
html[data-theme="light"] .pagination-link:hover,
html[data-theme="light"] .pagination-link:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
html[data-theme="light"] .pagination-current {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}
html[data-theme="light"] .pagination-ellipsis { color: var(--text-faint); }

/* ============================================================
   MISC
   ============================================================ */
html[data-theme="light"] .empty-state {
    border-color: var(--border-strong);
    background: transparent;
}
html[data-theme="light"] .empty-state p { color: var(--text-muted); }
html[data-theme="light"] .empty-state p:first-child { color: var(--text); }
html[data-theme="light"] .divider { border-top-color: var(--border); }
html[data-theme="light"] .footer {
    border-top-color: var(--border);
    color: var(--text-faint);
}

/* Inline scroll behavior in messages */
html[data-theme="light"] .dm-messages { background: #ffffff; }

/* Group chat specific */
html[data-theme="light"] .dm-body .dm-nav-name,
html[data-theme="light"] .dm-body .dm-nav-back,
html[data-theme="light"] .dm-body .dm-nav-avatar {
    color: var(--text);
}
/* ============================================================
   PATCH v1.1 — Fix hardcoded color yang belum ke-override
   ============================================================
   Beberapa komponen punya inline <style> dengan warna hardcoded
   (#eef2f8, #8b95a9) yang menang atas light-theme.css. Blok ini
   memaksa warna jadi hitam (atau accent) di light mode.
   ============================================================ */

/* ---- Post author name (nama user di post card) ---- */
html[data-theme="light"] .post-author-name,
html[data-theme="light"] .post-collab-line .post-author-name,
html[data-theme="light"] .post-collab-line > a,
html[data-theme="light"] .post-detail .post-card-name,
html[data-theme="light"] .post-detail .post-card-name a {
    color: #0a0c10 !important;
}

/* ---- "N lainnya" di collab line ---- */
html[data-theme="light"] .post-collab-more {
    color: #3b6fe0 !important;
    background: rgba(59, 111, 224, 0.10) !important;
}
html[data-theme="light"] .post-collab-more:hover {
    color: #2d5dcc !important;
    background: rgba(59, 111, 224, 0.18) !important;
}

/* ---- Comment author name ---- */
html[data-theme="light"] .comment-author {
    color: #0a0c10 !important;
}
html[data-theme="light"] .comment-author:hover {
    color: #3b6fe0 !important;
}

/* ---- User names di berbagai list & komponen ---- */
html[data-theme="light"] .user-row-name,
html[data-theme="light"] .user-item-name,
html[data-theme="light"] .dm-item-name,
html[data-theme="light"] .dm-chat-name,
html[data-theme="light"] .notif-text strong,
html[data-theme="light"] .lb-row-name,
html[data-theme="light"] .lb-podium-name,
html[data-theme="light"] .admin-list-name,
html[data-theme="light"] .admin-online-name,
html[data-theme="light"] .follows-header-title,
html[data-theme="light"] .family-hero-name,
html[data-theme="light"] .family-landing-name,
html[data-theme="light"] .family-member-name,
html[data-theme="light"] .family-invite-name,
html[data-theme="light"] .family-stat-value,
html[data-theme="light"] .family-stat-rank,
html[data-theme="light"] .profile-name,
html[data-theme="light"] .profile-couple-name,
html[data-theme="light"] .showcase-name,
html[data-theme="light"] .asset-row-name,
html[data-theme="light"] .asset-detail-price,
html[data-theme="light"] .garage-item-name,
html[data-theme="light"] .verify-user-name,
html[data-theme="light"] .bank-balance,
html[data-theme="light"] .bank-account,
html[data-theme="light"] .verify-state-title {
    color: #0a0c10 !important;
}

/* ---- DM sender name (group & family chat) — tetap ungu khas ---- */
html[data-theme="light"] .dm-sender-name {
    color: #7c3aed !important;
}

/* ---- Note text (story bar + profile + post) ---- */
html[data-theme="light"] .story-note-text,
html[data-theme="light"] .profile-note-text,
html[data-theme="light"] .post-note-text {
    color: #0a0c10 !important;
}

/* ---- DM bubble text (theirs — pastikan hitam, bukan putih) ---- */
html[data-theme="light"] .dm-bubble-row.is-theirs .dm-bubble,
html[data-theme="light"] .dm-bubble-row.is-theirs .dm-bubble * {
    color: #0a0c10;
}
html[data-theme="light"] .dm-bubble-row.is-theirs .dm-bubble-reply-name,
html[data-theme="light"] .dm-bubble-row.is-theirs .dm-bubble-reply-excerpt {
    color: #0a0c10 !important;
    opacity: 0.85;
}

/* ---- Post card: heading apapun jadi hitam ---- */
html[data-theme="light"] [data-post-card] {
    color: #0a0c10;
}

/* ---- Comment sticker / reply body ---- */
html[data-theme="light"] .comment-content,
html[data-theme="light"] .comment-content .mention {
    color: #0a0c10;
}
html[data-theme="light"] .comment-content .mention {
    color: #3b6fe0 !important;
    font-weight: 600;
}
html[data-theme="light"] .comment-content .mention.mention-group {
    color: #7c3aed !important;
    background: rgba(124, 58, 237, 0.10);
}
/* ============================================================
   PATCH v1.2 — Theme preview bulletproof
   ============================================================
   Ganti layout flex jadi absolute positioning biar konsisten
   di mobile maupun desktop.
   ============================================================ */

.theme-option-preview {
    position: relative !important;
    display: block !important;
    height: 76px !important;
    padding: 0 !important;
    border-radius: 10px;
    overflow: hidden;
}

.theme-option-bar,
.theme-option-line {
    position: absolute !important;
    left: 12px !important;
    display: block !important;
    border-radius: 3px;
}

.theme-option-bar {
    top: 14px !important;
    width: 42% !important;
    height: 7px !important;
    margin: 0 !important;
}

.theme-option-line {
    top: 30px !important;
    width: 78% !important;
    height: 5px !important;
    margin: 0 !important;
}

.theme-option-line.short {
    top: 42px !important;
    width: 55% !important;
}

/* Warna spesifik dark preview */
.theme-option-preview-dark {
    background: #0a0c10 !important;
    border-color: #1e232e !important;
}
.theme-option-preview-dark .theme-option-bar  { background: #5b8def !important; }
.theme-option-preview-dark .theme-option-line { background: rgba(255, 255, 255, 0.14) !important; }

/* Warna spesifik light preview */
.theme-option-preview-light {
    background: #f5f7fa !important;
    border-color: #e4e7ee !important;
}
.theme-option-preview-light .theme-option-bar  { background: #3b6fe0 !important; }
.theme-option-preview-light .theme-option-line { background: rgba(0, 0, 0, 0.10) !important; }

/* Mobile: tetap 2 kolom biar compact, atau full width dengan height proporsional */
@media (max-width: 420px) {
    .theme-switcher {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 12px !important;
    }
    .theme-option {
        padding: 10px !important;
        gap: 8px !important;
    }
    .theme-option-preview {
        height: 64px !important;
    }
    .theme-option-bar {
        top: 12px !important;
        height: 6px !important;
    }
    .theme-option-line {
        top: 26px !important;
        height: 4px !important;
    }
    .theme-option-line.short {
        top: 36px !important;
    }
    .theme-option-title {
        font-size: 0.88rem !important;
    }
    .theme-option-sub {
        font-size: 0.68rem !important;
        line-height: 1.3 !important;
    }
    .theme-option-check {
        width: 20px !important;
        height: 20px !important;
        top: 10px !important;
        right: 10px !important;
    }
}
/* ============================================================
   PATCH v1.2 — DM SHOW / FAMILY / GROUP CHAT LIGHT MODE
   ============================================================
   DM show page (dm/show.php, dm/family.php, group/chat.php)
   punya inline <style> dengan hardcoded dark values. Blok ini
   mengoverride dengan specificity lebih tinggi + !important.
   ============================================================ */

/* ---- Root & body overrides (high specificity) ---- */
html[data-theme="light"]:has(.dm-body) {
    background: #f0f2f7 !important;
}
html[data-theme="light"] body.dm-body {
    background: #f0f2f7 !important;
    color: #0a0c10 !important;
}

html[data-theme="light"] .dm-chat {
    background: #f0f2f7 !important;
}
html[data-theme="light"] .dm-chat::before {
    background:
        radial-gradient(ellipse 70% 45% at 15% 10%, rgba(59, 111, 224, 0.10) 0%, transparent 62%),
        radial-gradient(ellipse 60% 40% at 90% 80%, rgba(168, 85, 247, 0.08) 0%, transparent 62%),
        radial-gradient(ellipse 80% 55% at 50% 50%, rgba(20, 184, 166, 0.05) 0%, transparent 72%) !important;
}

/* ---- Nav (floating pill header) ---- */
html[data-theme="light"] .dm-body .dm-nav-back,
html[data-theme="light"] .dm-body .dm-nav-name,
html[data-theme="light"] .dm-body .dm-nav-avatar {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #0a0c10 !important;
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.08),
        0 1px 2px rgba(0, 0, 0, 0.04),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.9),
        inset 0 -0.5px 0 rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .dm-body .dm-nav-back:hover {
    background: rgba(245, 247, 250, 0.96) !important;
}
html[data-theme="light"] .dm-body .dm-nav-avatar-fallback {
    background: linear-gradient(135deg, #e4e7ee, #f5f7fa) !important;
    color: #4a5568 !important;
}

/* ---- Messages area ---- */
html[data-theme="light"] .dm-body .dm-messages {
    background: transparent !important;
}
html[data-theme="light"] .dm-body .dm-messages::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.10) !important;
}

/* ---- Date separator ---- */
html[data-theme="light"] .dm-body .dm-date span {
    color: #6b7280 !important;
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

/* ---- Theirs bubble (left) ---- */
html[data-theme="light"] .dm-body .dm-bubble-row.is-theirs .dm-bubble {
    background: linear-gradient(180deg, #f0f2f7 0%, #e6eaf0 100%) !important;
    color: #0a0c10 !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.03) !important;
    text-shadow: none !important;
}
html[data-theme="light"] .dm-body .dm-bubble-row.is-theirs .dm-bubble * {
    color: #0a0c10;
}

/* ---- Mine bubble (right) — tetap biru brand ---- */
html[data-theme="light"] .dm-body .dm-bubble-row.is-mine .dm-bubble {
    background: linear-gradient(180deg, #3b6fe0 0%, #2d5dcc 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow:
        0 3px 14px rgba(59, 111, 224, 0.22),
        0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .dm-body .dm-bubble-row.is-mine .dm-bubble * {
    color: #ffffff;
}

/* ---- Reply quote ---- */
html[data-theme="light"] .dm-body .dm-bubble-reply {
    background: rgba(0, 0, 0, 0.04) !important;
    border-left-color: rgba(0, 0, 0, 0.25) !important;
}
html[data-theme="light"] .dm-body .dm-bubble-row.is-mine .dm-bubble-reply {
    background: rgba(255, 255, 255, 0.18) !important;
    border-left-color: rgba(255, 255, 255, 0.85) !important;
}
html[data-theme="light"] .dm-body .dm-bubble-row.is-theirs .dm-bubble-reply {
    background: rgba(0, 0, 0, 0.05) !important;
    border-left-color: rgba(0, 0, 0, 0.30) !important;
}
html[data-theme="light"] .dm-body .dm-bubble-row.is-theirs .dm-bubble-reply-name,
html[data-theme="light"] .dm-body .dm-bubble-row.is-theirs .dm-bubble-reply-excerpt {
    color: #0a0c10 !important;
}

/* ---- Deleted bubble ---- */
html[data-theme="light"] .dm-body .dm-bubble-row.is-deleted .dm-bubble {
    background: rgba(0, 0, 0, 0.03) !important;
    color: rgba(0, 0, 0, 0.40) !important;
    border: 1px dashed rgba(0, 0, 0, 0.12) !important;
}

/* ---- Edited marker ---- */
html[data-theme="light"] .dm-body .dm-bubble-row.is-theirs .dm-bubble-edited {
    color: rgba(0, 0, 0, 0.50) !important;
}
html[data-theme="light"] .dm-body .dm-bubble-row.is-mine .dm-bubble-edited {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* ---- Sender name (family/group) — tetap ungu khas ---- */
html[data-theme="light"] .dm-body .dm-sender-name {
    color: #7c3aed !important;
}

/* ---- Sender avatar ---- */
html[data-theme="light"] .dm-body .dm-sender-avatar {
    background: #e4e7ee !important;
    color: #4a5568 !important;
}

/* ---- Read receipt ---- */
html[data-theme="light"] .dm-body .dm-read-receipt {
    color: #3b6fe0 !important;
}

/* ---- Composer ---- */
html[data-theme="light"] .dm-body .dm-composer {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.08),
        0 1px 2px rgba(0, 0, 0, 0.04),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.9) !important;
}
html[data-theme="light"] .dm-body #dm-input {
    color: #0a0c10 !important;
}
html[data-theme="light"] .dm-body #dm-input::placeholder {
    color: #9ca3af !important;
}
html[data-theme="light"] .dm-body .dm-attach-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #4a5568 !important;
}
html[data-theme="light"] .dm-body .dm-attach-btn:hover {
    background: rgba(0, 0, 0, 0.10) !important;
    color: #0a0c10 !important;
}
html[data-theme="light"] .dm-body .dm-send:disabled {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #9ca3af !important;
}
html[data-theme="light"] .dm-body .dm-send:not(:disabled) {
    background: #3b6fe0 !important;
    color: #ffffff !important;
}

/* ---- Bubble menu trigger ---- */
html[data-theme="light"] .dm-body .dm-bubble-menu-trigger {
    background: rgba(0, 0, 0, 0.04) !important;
    color: rgba(0, 0, 0, 0.45) !important;
}
html[data-theme="light"] .dm-body .dm-bubble-menu-trigger:hover {
    background: rgba(0, 0, 0, 0.10) !important;
    color: #0a0c10 !important;
}

/* ---- Reply trigger ---- */
html[data-theme="light"] .dm-body .dm-bubble-reply-trigger {
    background: rgba(0, 0, 0, 0.05) !important;
    color: rgba(0, 0, 0, 0.45) !important;
}
html[data-theme="light"] .dm-body .dm-bubble-reply-trigger:hover {
    background: #3b6fe0 !important;
    color: #ffffff !important;
}
html[data-theme="light"] .dm-body .dm-sticker-reply-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    color: rgba(0, 0, 0, 0.50) !important;
}
html[data-theme="light"] .dm-body .dm-sticker-reply-btn:hover {
    background: #3b6fe0 !important;
    color: #ffffff !important;
}

/* ---- Reply bar (above composer) ---- */
html[data-theme="light"] .dm-reply-bar {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #0a0c10 !important;
}
html[data-theme="light"] .dm-reply-bar-label { color: #3b6fe0 !important; }
html[data-theme="light"] .dm-reply-bar-label strong { color: #0a0c10 !important; }
html[data-theme="light"] .dm-reply-bar-excerpt { color: #4a5568 !important; }
html[data-theme="light"] .dm-reply-bar-close {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #4a5568 !important;
}
html[data-theme="light"] .dm-reply-bar-close:hover {
    background: rgba(0, 0, 0, 0.10) !important;
    color: #0a0c10 !important;
}

/* ---- Empty state ---- */
html[data-theme="light"] .dm-body .dm-empty {
    color: #6b7280 !important;
}
html[data-theme="light"] .dm-body .dm-empty p {
    color: #0a0c10 !important;
}
html[data-theme="light"] .dm-body .dm-empty-hint {
    color: #9ca3af !important;
}

/* ---- Voice note bubble ---- */
html[data-theme="light"] .dm-body .dm-voice-play {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #0a0c10 !important;
}
html[data-theme="light"] .dm-body .dm-bubble-row.is-mine .dm-voice-play {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}
html[data-theme="light"] .dm-body .dm-voice-duration {
    color: currentColor;
}

/* ---- Image viewer ---- */
html[data-theme="light"] .dm-body .dm-image-viewer-backdrop {
    background: rgba(255, 255, 255, 0.88) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
}

/* ---- Context menu (long-press) ---- */
html[data-theme="light"] .dm-body .dm-ctx-backdrop {
    background: rgba(0, 0, 0, 0.20) !important;
}
html[data-theme="light"] .dm-body .dm-ctx-emoji-row,
html[data-theme="light"] .dm-body .dm-ctx-action-row {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.18),
        0 2px 8px rgba(0, 0, 0, 0.10) !important;
}
html[data-theme="light"] .dm-body .dm-ctx-action {
    color: #0a0c10 !important;
}
html[data-theme="light"] .dm-body .dm-ctx-action:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .dm-body .dm-ctx-emoji:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}

/* ---- Edit modal ---- */
html[data-theme="light"] .dm-body .dm-edit-panel {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
}
html[data-theme="light"] .dm-body .dm-edit-title {
    color: #0a0c10 !important;
}
html[data-theme="light"] .dm-body .dm-edit-textarea,
html[data-theme="light"] .dm-body .dm-edit-panel textarea {
    background: #f5f7fa !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
    color: #0a0c10 !important;
}
html[data-theme="light"] .dm-body .dm-edit-cancel {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #4a5568 !important;
}
html[data-theme="light"] .dm-body .dm-edit-cancel:hover {
    background: rgba(0, 0, 0, 0.10) !important;
    color: #0a0c10 !important;
}
html[data-theme="light"] .dm-body .dm-edit-save {
    background: #3b6fe0 !important;
    color: #ffffff !important;
}

/* ---- Typing indicator ---- */
html[data-theme="light"] .dm-typing-indicator {
    background: #f0f2f7 !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
    color: #4a5568 !important;
}

/* ---- Reaction badges ---- */
html[data-theme="light"] .dm-body .dm-reaction-badge {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .dm-body .dm-reaction-badge.is-mine {
    background: rgba(59, 111, 224, 0.14) !important;
    border-color: rgba(59, 111, 224, 0.35) !important;
}
html[data-theme="light"] .dm-body .dm-reaction-count {
    color: #4a5568 !important;
}

/* ---- Sticker panel ---- */
html[data-theme="light"] .sticker-panel-inner {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
}
html[data-theme="light"] .sticker-panel-head {
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .sticker-panel-tab {
    color: #6b7280 !important;
}
html[data-theme="light"] .sticker-panel-tab.is-active {
    background: rgba(168, 85, 247, 0.12) !important;
    color: #7c3aed !important;
}
html[data-theme="light"] .sticker-panel-close {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #4a5568 !important;
}
html[data-theme="light"] .sticker-item {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .sticker-item:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}

/* ---- Sticker action sheet (save/delete) ---- */
html[data-theme="light"] .sticker-action-panel {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
}
html[data-theme="light"] .sticker-action-handle {
    background: rgba(0, 0, 0, 0.15) !important;
}
html[data-theme="light"] .sticker-action-btn.is-cancel {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #4a5568 !important;
}

/* ---- Scroll FAB (group chat) ---- */
html[data-theme="light"] .dm-scroll-fab {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #0a0c10 !important;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.10),
        0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* ---- Group info sheet ---- */
html[data-theme="light"] .gc-info-panel {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
}
html[data-theme="light"] .gc-info-handle {
    background: rgba(0, 0, 0, 0.15) !important;
}
html[data-theme="light"] .gc-info-name {
    color: #0a0c10 !important;
}
html[data-theme="light"] .gc-info-handle,
html[data-theme="light"] .gc-info-section-label {
    color: #6b7280 !important;
}
html[data-theme="light"] .gc-info-desc {
    color: #4a5568 !important;
}
html[data-theme="light"] .gc-info-avatar {
    background: #f5f7fa !important;
    color: #4a5568 !important;
}
html[data-theme="light"] .gc-member-avatar {
    background: #f5f7fa !important;
    color: #4a5568 !important;
}
html[data-theme="light"] .gc-member-name {
    color: #0a0c10 !important;
}
html[data-theme="light"] .gc-member-handle {
    color: #6b7280 !important;
}

/* ---- DM list page ---- */
html[data-theme="light"] .dm-tabs {
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .dm-list {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .dm-item {
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .dm-item-name {
    color: #0a0c10 !important;
}
html[data-theme="light"] .dm-item-preview {
    color: #4a5568 !important;
}
html[data-theme="light"] .dm-item-time {
    color: #9ca3af !important;
}
html[data-theme="light"] .dm-item-avatar {
    background: linear-gradient(135deg, #e4e7ee, #f5f7fa) !important;
    color: #3b6fe0 !important;
}
html[data-theme="light"] .dm-item-menu {
    color: #9ca3af !important;
}
html[data-theme="light"] .dm-item-menu:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #0a0c10 !important;
}
/* ============================================================
   PATCH v1.3 — DM bubble kontras (biar kebedain jelas)
   ============================================================
   Sebelumnya: bubble theirs abu-abu di atas bg abu-abu → invisible.
   Sekarang  : bubble theirs PUTIH solid + border tegas.
                bubble mine  BIRU solid + shadow lebih jelas.
   ============================================================ */

/* ---- Background halaman DM dibikin lebih gelap dikit biar bubble "pop" ---- */
html[data-theme="light"]:has(.dm-body) {
    background: #e8ebf0 !important;
}
html[data-theme="light"] body.dm-body {
    background: #e8ebf0 !important;
}
html[data-theme="light"] .dm-chat {
    background: #e8ebf0 !important;
}
html[data-theme="light"] .dm-body .dm-messages {
    background: transparent !important;
}

/* ============================================================
   BUBBLE THEIRS (kiri) — PUTIH SOLID
   ============================================================ */
html[data-theme="light"] .dm-body .dm-bubble-row.is-theirs .dm-bubble {
    background: #ffffff !important;
    background-image: none !important;
    color: #0a0c10 !important;
    border: 1px solid #d1d6e0 !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.08),
        0 1px 2px rgba(0, 0, 0, 0.05) !important;
    text-shadow: none !important;
}
html[data-theme="light"] .dm-body .dm-bubble-row.is-theirs .dm-bubble * {
    color: #0a0c10;
}

/* ============================================================
   BUBBLE MINE (kanan) — BIRU SOLID
   ============================================================ */
html[data-theme="light"] .dm-body .dm-bubble-row.is-mine .dm-bubble {
    background: linear-gradient(180deg, #3b6fe0 0%, #2d5dcc 100%) !important;
    background-image: linear-gradient(180deg, #3b6fe0 0%, #2d5dcc 100%) !important;
    color: #ffffff !important;
    border: 1px solid #2d5dcc !important;
    box-shadow:
        0 3px 10px rgba(59, 111, 224, 0.28),
        0 1px 3px rgba(0, 0, 0, 0.10) !important;
    text-shadow: none !important;
}
html[data-theme="light"] .dm-body .dm-bubble-row.is-mine .dm-bubble * {
    color: #ffffff;
}

/* ============================================================
   REPLY QUOTE (di dalam bubble)
   ============================================================ */
html[data-theme="light"] .dm-body .dm-bubble-row.is-theirs .dm-bubble-reply {
    background: rgba(59, 111, 224, 0.06) !important;
    border-left: 3px solid #3b6fe0 !important;
}
html[data-theme="light"] .dm-body .dm-bubble-row.is-theirs .dm-bubble-reply-name {
    color: #3b6fe0 !important;
}
html[data-theme="light"] .dm-body .dm-bubble-row.is-theirs .dm-bubble-reply-excerpt {
    color: #4a5568 !important;
    opacity: 1 !important;
}

html[data-theme="light"] .dm-body .dm-bubble-row.is-mine .dm-bubble-reply {
    background: rgba(255, 255, 255, 0.22) !important;
    border-left: 3px solid rgba(255, 255, 255, 0.9) !important;
}
html[data-theme="light"] .dm-body .dm-bubble-row.is-mine .dm-bubble-reply-name,
html[data-theme="light"] .dm-body .dm-bubble-row.is-mine .dm-bubble-reply-excerpt {
    color: #ffffff !important;
    opacity: 0.95 !important;
}

/* ============================================================
   VOICE NOTE di bubble
   ============================================================ */
html[data-theme="light"] .dm-body .dm-bubble-row.is-theirs .dm-voice-play {
    background: #3b6fe0 !important;
    color: #ffffff !important;
    border: none !important;
}
html[data-theme="light"] .dm-body .dm-bubble-row.is-mine .dm-voice-play {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    border: none !important;
}
html[data-theme="light"] .dm-body .dm-bubble-row.is-theirs .dm-voice-wave::before {
    background: repeating-linear-gradient(to right,
        #3b6fe0 0, #3b6fe0 2px,
        transparent 2px, transparent 5px) !important;
    opacity: 0.4 !important;
}
html[data-theme="light"] .dm-body .dm-bubble-row.is-mine .dm-voice-wave::before {
    background: repeating-linear-gradient(to right,
        #ffffff 0, #ffffff 2px,
        transparent 2px, transparent 5px) !important;
    opacity: 0.6 !important;
}
html[data-theme="light"] .dm-body .dm-bubble-row.is-theirs .dm-voice-duration {
    color: #4a5568 !important;
}
html[data-theme="light"] .dm-body .dm-bubble-row.is-mine .dm-voice-duration {
    color: #ffffff !important;
    opacity: 0.9 !important;
}

/* ============================================================
   IMAGE / STICKER di dalam bubble — tetap netral
   ============================================================ */
html[data-theme="light"] .dm-body .dm-bubble-row.is-theirs .dm-bubble.dm-bubble-image {
    padding: 4px !important;
    background: #ffffff !important;
    border-color: #d1d6e0 !important;
}
html[data-theme="light"] .dm-body .dm-bubble-row.is-mine .dm-bubble.dm-bubble-image {
    padding: 4px !important;
    background: #3b6fe0 !important;
    border-color: #2d5dcc !important;
}

/* Sticker: hapus padding dan border total (biar gak ada kotak) */
html[data-theme="light"] .dm-body .dm-bubble-row[data-type="sticker"] .dm-bubble {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ============================================================
   POST SHARE card di dalam bubble
   ============================================================ */
html[data-theme="light"] .dm-body .dm-bubble-row.is-theirs .dm-share-card {
    background: #f5f7fa !important;
    border-color: #d1d6e0 !important;
}
html[data-theme="light"] .dm-body .dm-bubble-row.is-theirs .dm-share-label {
    color: #3b6fe0 !important;
}
html[data-theme="light"] .dm-body .dm-bubble-row.is-theirs .dm-share-caption {
    color: #0a0c10 !important;
}

html[data-theme="light"] .dm-body .dm-bubble-row.is-mine .dm-share-card {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.30) !important;
}
html[data-theme="light"] .dm-body .dm-bubble-row.is-mine .dm-share-label,
html[data-theme="light"] .dm-body .dm-bubble-row.is-mine .dm-share-caption {
    color: #ffffff !important;
}

/* ============================================================
   REACTION BADGES — ditaruh di luar bubble, jadi harus kontras
   ============================================================ */
html[data-theme="light"] .dm-body .dm-reaction-badge {
    background: #ffffff !important;
    border: 1px solid #d1d6e0 !important;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.10),
        0 0 0 1px rgba(255, 255, 255, 0.5) !important;
}
html[data-theme="light"] .dm-body .dm-reaction-badge.is-mine {
    background: rgba(59, 111, 224, 0.12) !important;
    border-color: #3b6fe0 !important;
}
html[data-theme="light"] .dm-body .dm-reaction-count {
    color: #0a0c10 !important;
    font-weight: 800 !important;
}

/* ============================================================
   DATE SEPARATOR — bikin lebih jelas
   ============================================================ */
html[data-theme="light"] .dm-body .dm-date span {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #4a5568 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* ============================================================
   TYPING INDICATOR
   ============================================================ */
html[data-theme="light"] .dm-typing-indicator {
    background: #ffffff !important;
    border: 1px solid #d1d6e0 !important;
    color: #4a5568 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}
#dm-history-loader {
    padding: 14px !important;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #8b95a9;
    letter-spacing: 0.02em;
}
html[data-theme="light"] #dm-history-loader {
    color: #6b7280;
}
/* Fix tampilan mobile untuk theme switcher */
.theme-option-preview {
    flex-shrink: 0 !important;
    width: 110px !important;
    height: 72px !important;
    box-sizing: border-box !important;
}

.theme-option-label {
    min-width: 0 !important;
}