/* 
==============================================
LET IT OUT - DARK MODE STYLES
==============================================
*/

/* --- Page canvas: match home / quiz landing (#050505), not generic body.dark-mode (#080808 in style.css) --- */
html:has(body.page-letitout.dark-mode) {
    background-color: #050505;
}

body.page-letitout.dark-mode {
    background-color: #050505 !important;
    color: #fffcf1;
}

/* --- Header & Footer: dark mode overrides (when theme toggle is on) --- */
body.page-letitout.dark-mode header {
    background-color: #050505 !important;
    box-shadow: 0 1px 0 rgba(255, 252, 241, 0.07) !important;
    min-height: 70px !important;
}
/* Dark footer — match dark page + global .pr-footer-std contrast */
body.page-letitout.dark-mode footer.pr-footer-std {
    background: #050505 !important;
    border-top: 1px solid rgba(255, 252, 241, 0.07) !important;
    box-shadow: none !important;
}
body.page-letitout.dark-mode footer.pr-footer-std p {
    color: rgba(255, 252, 241, 0.35) !important;
}
body.page-letitout.dark-mode footer.pr-footer-std a {
    color: rgba(255, 252, 241, 0.45) !important;
}
body.page-letitout.dark-mode footer.pr-footer-std a:hover,
body.page-letitout.dark-mode footer.pr-footer-std a:focus {
    color: #f10000 !important;
}
body.page-letitout.dark-mode footer.pr-footer-std .pr-footer-dot {
    opacity: 0.3 !important;
}
body.page-letitout.dark-mode .copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.page-letitout.dark-mode .nav-links a,
body.page-letitout.dark-mode .nav-links a.nav-dropdown-trigger {
    color: rgba(255, 255, 255, 0.9) !important;
}
body.page-letitout.dark-mode .nav-hamburger,
body.page-letitout.dark-mode button.hamburger.nav-hamburger {
    color: rgba(255, 255, 255, 0.95) !important;
}
body.page-letitout.dark-mode .nav-hamburger svg rect,
body.page-letitout.dark-mode button.hamburger.nav-hamburger svg rect {
    fill: rgba(255, 255, 255, 0.95) !important;
}
body.page-letitout.dark-mode .menu-overlay nav {
    background: #050505 !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.4);
}
body.page-letitout.dark-mode .menu-overlay .menu-nav-title {
    color: rgba(255, 255, 255, 0.95) !important;
}
body.page-letitout.dark-mode .menu-overlay .menu-nav-subtitle {
    color: rgba(255, 255, 255, 0.7) !important;
}
body.page-letitout.dark-mode .menu-overlay .menu-nav-link:hover .menu-nav-title,
body.page-letitout.dark-mode .menu-overlay .menu-nav-link:focus .menu-nav-title,
body.page-letitout.dark-mode .menu-overlay .menu-nav-link.active .menu-nav-title {
    color: #f10000 !important;
}
body.page-letitout.dark-mode .menu-overlay .menu-nav-link:hover .menu-nav-subtitle,
body.page-letitout.dark-mode .menu-overlay .menu-nav-link:focus .menu-nav-subtitle,
body.page-letitout.dark-mode .menu-overlay .menu-nav-link.active .menu-nav-subtitle {
    color: #f10000 !important;
}
body.page-letitout.dark-mode .menu-overlay .close-btn,
body.page-letitout.dark-mode .menu-overlay .close-btn.hamburger {
    color: rgba(255, 255, 255, 0.95) !important;
}
body.page-letitout.dark-mode .menu-overlay .close-btn svg rect {
    fill: rgba(255, 255, 255, 0.95) !important;
}
body.page-letitout.dark-mode .copyright p {
    color: rgba(255, 255, 255, 0.8) !important;
}
body.page-letitout.dark-mode .copyright a {
    color: rgba(255, 255, 255, 0.9) !important;
}
body.page-letitout.dark-mode .copyright a:hover,
body.page-letitout.dark-mode .copyright a:focus {
    color: #f10000 !important;
}
body.page-letitout.dark-mode .copyright a:visited {
    color: rgba(255, 255, 255, 0.9) !important;
}

.dark-mode .center-logo,
.dark-mode .copyright p {
    color: #ffffff;
}

.dark-mode .copyright a {
    color: #ffffff !important;
}

.dark-mode .copyright a:hover,
.dark-mode .copyright a:focus {
    color: #f10000 !important;
}

.dark-mode .copyright a:visited {
    color: #ffffff !important;
}

.dark-mode .nav-links a {
    color: #ffffff;
}

.dark-mode .center-logo {
    color: #f10000; /* Brand red */
}

/* --- Navigation Dropdown Menu (match Pattern Analysis #050505) --- */
.dark-mode .nav-dropdown-menu {
    background: #050505 !important;
    border: 1px solid #333333;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.dark-mode .nav-dropdown-menu a {
    color: #ffffff !important;
}

.dark-mode .nav-dropdown-menu a:hover {
    background: #333333 !important;
    color: #f10000 !important;
}

.dark-mode .hamburger i {
    color: #ffffff;
}

/* --- Mobile Menu Drawer (match Pattern Analysis #050505) --- */
.dark-mode .menu-overlay nav {
    background: #050505 !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.4);
}

.dark-mode .menu-overlay .menu-nav-title {
    color: #ffffff;
}

.dark-mode .menu-overlay .menu-nav-subtitle {
    color: #888;
}

.dark-mode .menu-overlay .menu-nav-link:hover .menu-nav-title,
.dark-mode .menu-overlay .menu-nav-link:focus .menu-nav-title,
.dark-mode .menu-overlay .menu-nav-link.active .menu-nav-title {
    color: #f10000;
}

.dark-mode .menu-overlay .menu-nav-link:hover .menu-nav-subtitle,
.dark-mode .menu-overlay .menu-nav-link:focus .menu-nav-subtitle,
.dark-mode .menu-overlay .menu-nav-link.active .menu-nav-subtitle {
    color: #f10000;
}

.dark-mode .menu-overlay .close-btn {
    color: #ffffff;
}

/* --- Main Content: Segmented Control --- */
.dark-mode .letitout-title {
    color: #ffffff !important;
}

.dark-mode .letitout-segmented-control {
    background: var(--letitout-surface, #080808);
    border: 1px solid var(--letitout-border-soft, rgba(255, 252, 241, 0.08));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.dark-mode .segment-btn {
    color: #ffffff;
}

.dark-mode .segment-btn.active {
    background: #f10000; /* Keep brand red */
    color: #fff !important;
}

/* --- Main Content: Post Form (Write tab) --- */
.dark-mode .letitout-post-card {
    background-color: var(--letitout-surface, #080808);
    border-color: var(--letitout-border-subtle, rgba(255, 252, 241, 0.1));
}

.dark-mode .letitout-post-card-header h2 {
    color: #ffffff;
}

.dark-mode .letitout-post-card-header .new-question-btn {
    color: #f10000; /* Keep brand red */
}

.dark-mode .letitout-post-card-body textarea {
    background-color: var(--letitout-page-bg, #050505);
    color: #fffcf1;
    border-color: var(--letitout-border-subtle, rgba(255, 252, 241, 0.1));
}

.dark-mode .letitout-post-card-body textarea::placeholder {
    color: #808080;
}

.dark-mode .letitout-post-card-footer .char-count {
    color: #808080;
}

.dark-mode .letitout-post-card-actions .action-btn {
    background-color: #333333;
    color: #ffffff;
    border-color: #444444;
}

.dark-mode .letitout-post-card-submit .submit-btn {
    background-color: #f10000; /* Keep brand red */
    color: #fff;
}

.dark-mode .letitout-post-card-submit .submit-btn:disabled {
    background-color: #5a1e26;
    color: #a0a0a0;
}

.dark-mode .release-text {
    color: #ffffff;
}

.dark-mode .letitout-info-text {
    color: #b0b0b0;
}

.dark-mode .letitout-quiz-funnel-text {
    color: #b0b0b0;
}

.dark-mode .letitout-quiz-funnel-cta {
    color: #f10000;
}

.dark-mode .letitout-quiz-funnel-cta:hover {
    color: #e02020;
}

/* --- Wall empty CTA --- */
.dark-mode .wall-empty-cta-btn {
    background: #f10000;
    color: #fff;
}

.dark-mode .wall-empty-cta-btn:hover,
.dark-mode .wall-empty-cta-btn:focus {
    background: #ff2222;
}

/* --- Main Content: Post Cards (Wall tab) --- */
.dark-mode .post-card-container {
    background-color: transparent;
}
.dark-mode .post-card {
    background-color: var(--letitout-surface, #080808);
    border: 1px solid var(--letitout-border-subtle, rgba(255, 252, 241, 0.1));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    color: #fffcf1;
}
.dark-mode .post-card .post-content-area .emotion-tag.emotion-tag-small {
    background-color: #2a2a2a !important;
    color: #f0f0f0 !important;
    border: 1px solid #444 !important;
}
.dark-mode .post-card:hover,
.dark-mode .post-card:focus {
    box-shadow: none !important;
    transform: none !important;
    background: var(--letitout-surface, #080808) !important;
    border: 1px solid var(--letitout-border-subtle, rgba(255, 252, 241, 0.1)) !important;
    cursor: default !important;
}

.dark-mode .post-card-content {
    color: #fffcf1;
}

.dark-mode .post-card-footer {
    border-top-color: rgba(255, 252, 241, 0.08);
}

.dark-mode .post-card-footer .post-meta,
.dark-mode .post-card-footer .post-actions .felt-this-count {
    color: #808080;
}

.dark-mode .post-card-footer .post-actions .action-icon,
.dark-mode .post-card-footer .post-actions .more-options-btn {
    color: #fffcf1;
}

.dark-mode .post-card-footer .post-actions .action-icon.felt {
    color: #f10000; /* Keep brand red */
}

/* --- Modals: darker scrim + elevated panel (match .wall-location-modal-content) --- */
.dark-mode .letitout-emotion-modal-overlay,
.dark-mode .letitout-situation-modal-overlay,
.dark-mode .letitout-city-modal-overlay,
.dark-mode .wall-location-modal-overlay {
    background: var(--letitout-modal-scrim, rgba(0, 0, 0, 0.78)) !important;
}

.dark-mode .wall-filter-modal {
    background: var(--letitout-modal-scrim, rgba(0, 0, 0, 0.78)) !important;
}

.dark-mode .letitout-emotion-modal,
.dark-mode .modal-bottom-sheet,
.dark-mode .letitout-situation-modal,
.dark-mode .letitout-city-modal,
.dark-mode .wall-filter-modal .letitout-emotion-modal,
.dark-mode .wall-location-modal .letitout-emotion-modal,
.dark-mode #report-modal.letitout-emotion-modal,
.dark-mode .report-modal {
    background: var(--letitout-modal-panel-bg, #121212) !important;
    color: #fffcf1;
    border: 1px solid var(--letitout-modal-panel-border, rgba(255, 252, 241, 0.12));
    box-shadow: var(
        --letitout-modal-panel-shadow,
        0 16px 48px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 252, 241, 0.06)
    );
}

.dark-mode .letitout-emotion-modal-title {
    color: #ffffff !important;
}

.dark-mode .letitout-emotion-modal-close {
    color: #ffffff;
}

.dark-mode .report-modal-subtitle,
.dark-mode .filter-option label {
    color: #ffffff;
}

.dark-mode .report-reasons-container .reason-btn {
    background-color: #333333;
    color: #ffffff;
}

.dark-mode .report-reasons-container .reason-btn.selected {
    background-color: #f10000;
    color: #fff;
}

.dark-mode .letitout-emotion-modal-btn.done {
    background-color: #f10000;
}

.dark-mode .letitout-emotion-modal-btn.done:disabled {
    background-color: #5a1e26;
    color: #a0a0a0;
}

.dark-mode .filter-actions .btn-primary {
    background-color: #f10000;
}

.dark-mode .filter-actions .btn-secondary {
    color: #ffffff;
}

/*
==============================================
DARK MODE - FIXES & ADDITIONS
==============================================
*/

/* --- Post Card (Wall) --- */
.dark-mode .post-card {
    background-color: var(--letitout-surface, #080808);
    border: 1px solid var(--letitout-border-subtle, rgba(255, 252, 241, 0.1));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    color: #fffcf1;
}

/* --- Write form: match quiz LP “The Loop” stepped cards (.pattern-loop-stage) --- */
.dark-mode .letitout-form {
    background: var(--letitout-loop-panel-bg, rgba(255, 252, 241, 0.02));
    border: 1px solid var(--letitout-loop-panel-border, rgba(255, 252, 241, 0.08));
    border-radius: 12px;
    box-shadow: var(--letitout-loop-panel-shadow, 0 6px 28px rgba(0, 0, 0, 0.22));
    color: #fffcf1;
}

.dark-mode .post-card:hover,
.dark-mode .post-card:focus {
    box-shadow: none !important;
    transform: none !important;
    background: var(--letitout-surface, #080808) !important;
    border: 1px solid var(--letitout-border-subtle, rgba(255, 252, 241, 0.1)) !important;
    cursor: default !important;
}

/* --- Post Card & Form Elements --- */
.dark-mode .post-content,
.dark-mode .my-post-message,
.dark-mode .original-post-message,
.dark-mode .reply-content {
    color: #ffffff;
}

.dark-mode .post-meta,
.dark-mode .post-city-line,
.dark-mode .my-post-timestamp,
.dark-mode .original-post-timestamp,
.dark-mode .reply-timestamp {
    color: #888;
}

.dark-mode .letitout-form textarea {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 252, 241, 0.1);
    color: rgba(255, 252, 241, 0.92);
}
.dark-mode .letitout-form textarea:hover,
.dark-mode .letitout-form textarea:focus {
    border-color: #666;
    box-shadow: none;
}
.dark-mode .letitout-form textarea::placeholder {
    color: #8a8a8a;
    opacity: 1;
}

.dark-mode .letitout-form .letitout-emotion-error,
.dark-mode .letitout-form .letitout-situation-error {
    color: #ff8a8a;
}

.dark-mode .letitout-form .char-counter {
    color: #888;
}


.dark-mode .char-counter-inside {
    background-color: rgba(30, 30, 30, 0.85);
    color: #888;
}

.dark-mode .letitout-prompt-bar .letitout-subtitle {
    color: #ffffff !important;
}

.dark-mode .letitout-mvp-title {
    color: #e8e8e8;
}

.dark-mode .letitout-mvp-subtitle {
    color: #a0a0a0;
}

.dark-mode .letitout-shuffle-btn {
    color: #f10000;
}
.dark-mode .letitout-reset-btn {
    color: #ffffff;
}


/* --- Emotion, Situation & City Tags (same grey pill as light) --- */
.dark-mode .emotion-tag,
.dark-mode .situation-tag,
.dark-mode .city-tag {
    background-color: var(--letitout-pill-tag-bg, #e8e8e8);
    border-color: var(--letitout-pill-tag-border, #cfcfcf);
    color: var(--letitout-pill-tag-text, #141414);
}
.dark-mode .emotion-tag.selected {
    background: var(--letitout-pill-tag-selected-bg, #d2d2d2);
    color: var(--letitout-pill-tag-text, #141414);
    border-color: var(--letitout-pill-tag-selected-border, #9a9a9a);
}

.dark-mode .letitout-selected-tags .emotion-tag,
.dark-mode .letitout-selected-situation .situation-tag,
.dark-mode .letitout-selected-city .city-tag {
    background-color: var(--letitout-pill-tag-bg, #e8e8e8);
    color: var(--letitout-pill-tag-text, #141414);
    border-color: var(--letitout-pill-tag-border, #cfcfcf);
}

.dark-mode .letitout-selected-tags .emotion-tag .remove-tag,
.dark-mode .letitout-selected-situation .situation-tag .remove-tag,
.dark-mode .letitout-selected-city .city-tag .remove-tag {
    color: var(--letitout-pill-tag-remove, #5a5a5a);
    opacity: 0.85;
}

.dark-mode .letitout-selected-tags .emotion-tag .remove-tag:hover,
.dark-mode .letitout-selected-situation .situation-tag .remove-tag:hover,
.dark-mode .letitout-selected-city .city-tag .remove-tag:hover {
    opacity: 1;
}

/* --- Buttons --- */
.dark-mode .felt-it-btn {
    color: #ffffff;
    border-color: #555;
    background-color: #3a3a3a;
}
.dark-mode .felt-it-btn:hover {
    background-color: #4a4a4a;
    border-color: #666;
}
.dark-mode .felt-it-btn.felt {
    background-color: rgba(241, 0, 0, 0.2);
    border-color: var(--letitout-primary, #f10000);
    color: #ffffff;
}
.dark-mode .share-love-btn {
    background-color: transparent;
    color: var(--letitout-primary, #f10000);
    border: 1px solid var(--letitout-primary, #f10000);
}
.dark-mode .share-love-btn:hover {
    background-color: rgba(241, 0, 0, 0.12);
    color: var(--letitout-primary, #f10000);
    border-color: var(--letitout-primary, #f10000);
}
.dark-mode .letitout-submit {
    background-color: #f10000;
}

.dark-mode .letitout-submit-btn {
    background-color: #f10000;
    color: #fff;
}
.dark-mode .letitout-submit-btn:hover:not(:disabled) {
    background-color: #7a0010;
}
.dark-mode .letitout-submit-btn:disabled {
    background-color: #4a4a4a;
    color: #888;
}

/* --- Context Menu --- */
.dark-mode .options-menu {
    background-color: #3a3a3a;
    border: 1px solid #555;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.dark-mode .options-menu a {
    color: #ffffff;
}
.dark-mode .options-menu a:hover {
    background-color: #4a4a4a;
}

/* --- Wall Page Filters (raised panel #080808 vs canvas #050505 — matches index strips) --- */
.dark-mode .wall-controls {
    background-color: var(--letitout-surface, #080808);
    border: 1px solid var(--letitout-border-subtle, rgba(255, 252, 241, 0.1));
    box-shadow: none;
}

.dark-mode .wall-search-filter-row {
    background-color: transparent;
}

.dark-mode .wall-location-btn,
.dark-mode .wall-filter-btn,
.dark-mode .wall-sort-trigger {
    background-color: rgba(255, 252, 241, 0.06);
    color: #fffcf1;
    border: 1px solid rgba(255, 252, 241, 0.12);
}

.dark-mode .wall-about-sentence-btn {
    color: #e8e8e8;
}

.dark-mode .wall-about-sentence-btn:hover,
.dark-mode .wall-about-sentence-btn:focus {
    background: #252525;
}

.dark-mode .wall-about-chip-head-row:hover,
.dark-mode .wall-about-chip-head-row:focus {
    background: #252525;
}

.dark-mode .wall-about-chip-heading {
    color: #a0a0a0;
}

.dark-mode .wall-about-default {
    color: #e8e8e8;
}

.dark-mode .wall-about-inline-label {
    color: #a0a0a0;
}

.dark-mode .wall-about-brand {
    color: #fffcf1; /* match .dark-mode .wall-location-btn (“Global”) */
}

.dark-mode .wall-about-default-suffix {
    color: #e8e8e8;
}

.dark-mode .wall-about-inline-collapse:hover,
.dark-mode .wall-about-inline-collapse:focus {
    background: #252525;
}

.dark-mode .wall-about-chevron {
    color: #f10000;
}

.dark-mode .wall-filter-chip {
    background: rgba(255, 252, 241, 0.06);
    border-color: rgba(255, 252, 241, 0.12);
    color: #e8e8e8;
}

.dark-mode .wall-filter-chip:hover,
.dark-mode .wall-filter-chip:focus {
    background: #252525;
    border-color: #666;
}

.dark-mode .wall-search-input {
    background-color: rgba(255, 252, 241, 0.06);
    color: #fffcf1;
    border: 1px solid rgba(255, 252, 241, 0.12);
}
.dark-mode .wall-search-button {
    background-color: rgba(255, 252, 241, 0.1);
    color: #fffcf1;
    border: 1px solid rgba(255, 252, 241, 0.14);
}
.dark-mode .wall-sort-list {
    background: var(--letitout-surface-inset, #0a0a0a);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    border: 1px solid var(--letitout-border-subtle, rgba(255, 252, 241, 0.1));
}
.dark-mode .wall-sort-label-dropdown {
    color: #ffffff;
    font-weight: 700;
}
.dark-mode .wall-sort-option {
    color: #ffffff;
}
.dark-mode .wall-sort-option:hover,
.dark-mode .wall-sort-option:focus {
    background: #3a3a3a;
}
.dark-mode .wall-sort-option.selected {
    color: #f10000;
    background: #2f2f2f;
}

/* View Toggle - Dark Mode */
.dark-mode .wall-view-toggle {
    background: rgba(255, 252, 241, 0.05);
    border: 1px solid rgba(255, 252, 241, 0.08);
}

.dark-mode .wall-view-btn {
    color: #a0a0a0;
}

.dark-mode .wall-view-btn:hover {
    background: #3a3a3a;
    color: #e0e0e0;
}

.dark-mode .wall-view-btn.active {
    background: #2f2f2f;
    color: #f10000;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Single-Card Nav - Dark Mode */
.dark-mode .wall-single-nav-btn {
    background: transparent;
    border: none;
    color: #888;
}

.dark-mode .wall-single-nav-btn:hover:not(:disabled) {
    color: #f10000;
    background: rgba(241, 0, 0, 0.12);
}

.dark-mode .wall-single-card-progress {
    color: #a0a0a0;
}

/* Modal panel shells consolidated above; footer/header borders below */
.dark-mode .letitout-emotion-modal-header,
.dark-mode .letitout-situation-modal-header,
.dark-mode .letitout-city-modal-header {
    border-bottom-color: var(--letitout-border-soft, rgba(255, 252, 241, 0.08));
}

.dark-mode .letitout-emotion-modal-title,
.dark-mode .letitout-situation-modal-title,
.dark-mode .letitout-city-modal-title {
    color: #ffffff;
}

.dark-mode .wall-filter-modal-hint {
    color: #a0a0a0;
}

.dark-mode .wall-filter-modal .letitout-emotion-modal-footer.wall-filter-modal-footer {
    background-color: var(--letitout-modal-panel-bg, #121212);
    border-top-color: var(--letitout-border-soft, rgba(255, 252, 241, 0.08));
}

/* Explore stories modal: dark pills + brand red when selected (overrides global light-grey emotion pills) */
.dark-mode .wall-filter-modal .emotion-subtag:not(.selected) {
    background-color: #2a2a2a !important;
    color: #f0f0f0 !important;
    border-color: #444 !important;
}

.dark-mode .wall-filter-modal .emotion-subtag:hover:not(.selected):not(.wall-unified-filter-tag--max) {
    background-color: #363636 !important;
    border-color: #555 !important;
    color: #ffffff !important;
}

.dark-mode .wall-filter-modal .emotion-subtag.selected,
.dark-mode .wall-filter-modal .emotion-subtag.selected:hover {
    background-color: var(--letitout-primary, #f10000) !important;
    color: #ffffff !important;
    border-color: var(--letitout-primary, #f10000) !important;
}

.dark-mode .wall-filter-modal .emotion-subtag.selected .emotion-subtag-count {
    color: rgba(255, 255, 255, 0.92) !important;
    opacity: 1;
}

.dark-mode .wall-filter-modal button.emotion-subtag.wall-unified-filter-tag--max:not(.selected) {
    background-color: #222222 !important;
    color: #6a6a6a !important;
    border-color: #383838 !important;
}

.dark-mode .letitout-emotion-modal-close,
.dark-mode .letitout-situation-modal-close,
.dark-mode .letitout-city-modal-close {
    color: #888;
}
.dark-mode .letitout-emotion-modal-close:hover,
.dark-mode .letitout-situation-modal-close:hover,
.dark-mode .letitout-city-modal-close:hover {
    background: #3a3a3a !important;
    color: #fffcf1 !important;
    border-color: #555 !important;
    outline: none !important;
}


/* --- Modal Content --- */
.dark-mode .city-search-input,
.dark-mode .emotion-search-input {
    background-color: #050505;
    color: #ffffff;
    border-color: #333;
    box-shadow: none;
}
.dark-mode .city-search-input:focus,
.dark-mode .emotion-search-input:focus {
    outline: none;
    border-color: #666;
}
.dark-mode .emotion-category-title {
    color: #ffffff;
}

.dark-mode .emotion-subtag,
.dark-mode .situation-option-btn,
.dark-mode .filter-situation-btn,
.dark-mode .city-suggestion-btn {
    background-color: var(--letitout-pill-tag-bg, #e8e8e8);
    color: var(--letitout-pill-tag-text, #141414);
    border-color: var(--letitout-pill-tag-border, #cfcfcf);
}
.dark-mode .situation-option-btn.selected,
.dark-mode .filter-situation-btn.selected,
.dark-mode .situation-option-btn:hover,
.dark-mode .filter-situation-btn:hover {
    background-color: var(--letitout-pill-tag-selected-bg, #d2d2d2);
    color: var(--letitout-pill-tag-text, #141414);
    border-color: var(--letitout-pill-tag-selected-border, #9a9a9a);
}

.dark-mode .emotion-subtag.selected,
.dark-mode .emotion-subtag:hover,
.dark-mode .city-suggestion-btn.selected,
.dark-mode .city-suggestion-btn:hover {
    background-color: var(--letitout-pill-tag-selected-bg, #d2d2d2);
    color: var(--letitout-pill-tag-text, #141414);
    border-color: var(--letitout-pill-tag-selected-border, #9a9a9a);
}
.dark-mode .emotion-subtag .emotion-subtag-count {
    opacity: 0.85;
}
.dark-mode .emotion-subtag.selected .emotion-subtag-count {
    opacity: 0.95;
}

/* Write tab modals (feelings / situation / city overlays): dark pills + brand red when selected */
.dark-mode .letitout-emotion-modal-overlay .emotion-subtag:not(.selected) {
    background-color: #2a2a2a !important;
    color: #f0f0f0 !important;
    border-color: #444 !important;
}

.dark-mode .letitout-emotion-modal-overlay .emotion-subtag:hover:not(.selected) {
    background-color: #363636 !important;
    border-color: #555 !important;
    color: #ffffff !important;
}

.dark-mode .letitout-emotion-modal-overlay .emotion-subtag.selected,
.dark-mode .letitout-emotion-modal-overlay .emotion-subtag.selected:hover {
    background-color: var(--letitout-primary, #f10000) !important;
    color: #ffffff !important;
    border-color: var(--letitout-primary, #f10000) !important;
}

.dark-mode .letitout-emotion-modal-overlay .emotion-subtag.selected .emotion-subtag-count {
    color: rgba(255, 255, 255, 0.92) !important;
    opacity: 1;
}

.dark-mode .letitout-situation-modal-overlay .situation-option-btn:not(.selected) {
    background-color: #2a2a2a !important;
    color: #f0f0f0 !important;
    border-color: #444 !important;
}

.dark-mode .letitout-situation-modal-overlay .situation-option-btn:hover:not(.selected) {
    background-color: #363636 !important;
    border-color: #555 !important;
    color: #ffffff !important;
}

.dark-mode .letitout-situation-modal-overlay .situation-option-btn.selected,
.dark-mode .letitout-situation-modal-overlay .situation-option-btn.selected:hover {
    background-color: var(--letitout-primary, #f10000) !important;
    color: #ffffff !important;
    border-color: var(--letitout-primary, #f10000) !important;
}

.dark-mode .letitout-city-modal-overlay .city-suggestion-btn:not(.selected) {
    background-color: #2a2a2a !important;
    color: #f0f0f0 !important;
    border-color: #444 !important;
}

.dark-mode .letitout-city-modal-overlay .city-suggestion-btn:hover:not(.selected) {
    background-color: #363636 !important;
    border-color: #555 !important;
    color: #ffffff !important;
}

.dark-mode .letitout-city-modal-overlay .city-suggestion-btn.selected,
.dark-mode .letitout-city-modal-overlay .city-suggestion-btn.selected:hover {
    background-color: var(--letitout-primary, #f10000) !important;
    color: #ffffff !important;
    border-color: var(--letitout-primary, #f10000) !important;
}

.dark-mode .letitout-emotion-modal-footer,
.dark-mode .letitout-situation-modal-footer,
.dark-mode .letitout-city-modal-footer {
    border-top-color: #333;
}
.dark-mode .letitout-situation-modal-btn.cancel {
    background-color: #3a3a3a;
    border-color: #555;
    color: #ffffff;
}
.dark-mode .letitout-situation-modal-btn.done {
    background-color: #f10000;
}
.dark-mode .letitout-situation-modal-btn.done:disabled {
    background-color: #5a1e26;
    color: #a0a0a0;
}
.dark-mode .filter-situation-section {
    border-top-color: #333;
}
/* Post card - situation pill: outline style, matches emotion height, distinct but cohesive */
.dark-mode .post-emotion-tags .situation-tag.situation-tag-small {
    background: #2a2a2a;
    border-color: #444;
    color: #f0f0f0;
}

.dark-mode .letitout-emotion-modal-btn.cancel,
.dark-mode .letitout-city-modal-btn.cancel {
    background-color: #3a3a3a;
    border-color: #555;
    color: #ffffff;
}
.dark-mode .letitout-emotion-modal-btn.cancel:hover,
.dark-mode .letitout-city-modal-btn.cancel:hover {
    background-color: #4a4a4a;
}
.dark-mode .letitout-emotion-modal-btn.clear {
     color: #ffffff;
     background-color: #3a3a3a;
     border: 1px solid #555;
}
.dark-mode .letitout-emotion-modal-btn.clear:hover {
    background-color: #4a4a4a;
}

.dark-mode .city-other-input {
    background-color: #080808;
    color: #ffffff;
    border: 1px solid #333;
}
.dark-mode .city-other-input:focus {
    outline: none;
    border-color: #666;
}
.dark-mode .city-other-btn {
    background-color: #3a3a3a;
    border: 1px solid #555;
    color: #e0e0e0;
}
.dark-mode .city-other-btn:hover {
    background-color: #4a4a4a;
}

/* --- "My Posts" Modal --- */
.dark-mode .letitout-my-posts-modal-overlay {
    background-color: rgba(0, 0, 0, 0.8);
}
.dark-mode .letitout-my-posts-modal {
    background-color: #050505;
    box-shadow: none;
}
.dark-mode .letitout-my-posts-title,
.dark-mode .letitout-my-posts-content .empty-state {
    color: #ffffff;
}
.dark-mode .letitout-my-posts-close {
    color: #fff !important;
}
.dark-mode .letitout-my-posts-tabs {
    background-color: #050505;
}
.dark-mode .letitout-my-posts-tabs button:not(.active) {
    color: #ffffff;
}
.dark-mode .my-post-card,
.dark-mode .original-post-card {
    background-color: #080808;
    border-color: #333;
    color: #ffffff;
}
.dark-mode .my-post-card .emotion-tag,
.dark-mode .original-post-card .emotion-tag,
.dark-mode .my-post-card .situation-tag,
.dark-mode .original-post-card .situation-tag {
    background-color: #2a2a2a;
    color: #f0f0f0;
    border-color: #444;
}
.dark-mode .my-post-reply-line {
    background-color: #3a3a3a;
    color: #ffffff;
}
.dark-mode .my-post-reply-line button {
    color: #f10000;
}
.dark-mode .my-post-reply-line.unread {
    background-color: #5a1e26;
}
.dark-mode .my-post-reply-line .view-messages,
.dark-mode .my-post-reply-line .view-messages-btn {
    color: #e0e0e0;
    text-decoration: none;
}
.dark-mode .reply-card {
    background-color: #2f2f2f;
    border-color: #555;
}

/* --- Misc --- */
.dark-mode .toast-notification {
    background-color: #080808;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.dark-mode .toast-notification.error {
    background-color: #5a1e26;
    color: #fff;
}
.dark-mode .letitout-intro-modal-overlay {
    background: rgba(0, 0, 0, 0.75);
}

.dark-mode .letitout-intro-modal {
    background: linear-gradient(165deg, #080808 0%, #060606 45%, #0c0c0c 100%);
    border-color: rgba(241, 0, 0, 0.22);
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.dark-mode .letitout-intro-title {
    color: #ff6b6b;
}

.dark-mode .letitout-intro-lede {
    color: #f0f0f0;
    font-weight: 700;
}

.dark-mode .letitout-intro-section-lead {
    color: #e4e4e4;
}

.dark-mode .letitout-intro-copy {
    color: #c8c8c8;
}

.dark-mode .letitout-intro-copy--opening {
    color: #e8e8e8;
}

.dark-mode .letitout-intro-copy--write {
    color: #e0e0e0;
}

.dark-mode .letitout-intro-copy--ease {
    color: #a8a8a8;
}

.dark-mode .letitout-intro-copy.letitout-intro-copy--brand {
    color: #ff6b6b;
}

.dark-mode .letitout-intro-copy--insight {
    color: #b8b8b8;
}

.dark-mode .letitout-intro-copy strong {
    color: #f0f0f0;
}

.dark-mode .letitout-intro-age {
    color: #9a9a9a;
}

.dark-mode .letitout-intro-btn {
    background: #f10000;
    color: #fff;
}

.dark-mode .letitout-intro-btn:hover,
.dark-mode .letitout-intro-btn:focus {
    background: #ff3333;
}

/* --- Wall Control Container --- */
.dark-mode .wall-control {
    border: 1px solid var(--letitout-border-soft, rgba(255, 252, 241, 0.08));
}

/* --- Location Filter Modal --- */
.dark-mode .location-filter-modal {
    background-color: #080808;
    border-color: #333;
}
.dark-mode .location-filter-modal .modal-header {
    background-color: #050505;
    border-bottom-color: #333;
}
.dark-mode .location-filter-modal .modal-title {
    color: #ffffff;
}
.dark-mode .location-filter-modal .modal-body {
    background-color: #080808;
    color: #ffffff;
}
.dark-mode .location-filter-modal .location-option {
    background-color: #050505;
    border-color: #333;
    color: #ffffff;
}
.dark-mode .location-filter-modal .location-option:hover {
    background-color: #3a3a3a;
}
.dark-mode .location-filter-modal .location-option.selected {
    background-color: #f10000;
    color: #ffffff;
}

/* --- Sort Dropdown --- */
.dark-mode .wall-sort-container select {
    background-color: #080808 !important;
    color: #ffffff !important;
    border: 1px solid #333 !important;
}

.dark-mode .wall-sort-container select option {
    background-color: #080808;
    color: #ffffff;
}

.dark-mode .wall-sort-container select option:disabled {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.dark-mode .wall-location-modal {
    --letitout-border: #333;
    --letitout-text: #ffffff;
    --letitout-background: #050505;
    background-color: transparent;
    border-bottom: 1px solid #333;
}

.dark-mode .wall-location-modal .wall-location-modal-content {
    background: #080808;
    border: none;
    color: #ffffff;
}
.dark-mode .wall-location-modal .wall-location-modal-header {
    border-bottom: 1px solid #444;
}
.dark-mode .wall-location-modal .wall-location-modal-header h3 {
    color: #ffffff;
}
.dark-mode .wall-location-modal .wall-location-modal-header .close-btn {
    color: #AAA;
}
.dark-mode .wall-location-modal .wall-location-modal-header .close-btn:hover {
    background: #3a3a3a !important;
    color: #fffcf1 !important;
    border-color: #555 !important;
    outline: none !important;
}
.dark-mode .wall-location-modal .wall-location-search-input {
    background-color: #3a3a3a;
    color: #ffffff;
    border: 1px solid #555;
}
.dark-mode .wall-location-modal .location-search-input {
    background-color: #050505;
    border: 1px solid #333;
    color: #ffffff;
}
.dark-mode .wall-location-modal .location-search-input::placeholder {
    color: #888;
}
.dark-mode .wall-location-modal .location-search-input:focus {
    outline: none;
    border-color: #666;
}
.dark-mode .wall-location-modal .wall-location-list .location-option {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
}
.dark-mode .wall-location-modal .wall-location-list .location-option:hover {
    background-color: #4a4a4a !important;
}
.dark-mode .wall-location-modal .location-option.selected {
    background-color: #f10000 !important;
    color: #ffffff !important;
    border-color: #f10000 !important;
}

/* --- Report Post Modal --- */
.dark-mode #report-modal .letitout-emotion-modal-header {
    background-color: transparent;
    border-bottom: 1px solid #333;
}
.dark-mode #report-modal .letitout-emotion-modal-title,
.dark-mode #report-modal .letitout-emotion-modal-close {
    color: #ffffff;
}
.dark-mode #report-modal .letitout-emotion-modal-close:hover {
    background: #3a3a3a !important;
    color: #fffcf1 !important;
    border-color: #555 !important;
    outline: none !important;
}
.dark-mode #report-modal .report-modal-subtitle {
    color: #b0b0b0;
}
.dark-mode #report-modal .report-reasons-container .report-reason {
    background-color: #050505;
    border: 1px solid #333;
    color: #ffffff;
}
.dark-mode #report-modal .report-reasons-container .report-reason:hover {
    background-color: #3a3a3a;
}
.dark-mode #report-modal .report-reasons-container .report-reason.selected {
    border-color: #f10000;
    background-color: #3a1a20;
}
.dark-mode #report-modal .report-reason-title {
    color: #ffffff;
}
.dark-mode #report-modal .report-reason-description {
    color: #888;
}

@media (max-width: 768px) {
    .dark-mode .wall-location-modal .wall-location-modal-content {
        background: #080808 !important;
    }
}

.dark-mode .post-card .felt-it-btn {
    background-color: #3a3a3a;
    color: #ffffff;
    border: 1px solid #555;
}
.dark-mode .post-card .felt-it-btn:hover,
.dark-mode .post-card .felt-it-btn:focus {
    background-color: #4a4a4a;
    color: #ffffff;
    border-color: var(--letitout-primary, #f10000);
}
.dark-mode .post-card .felt-it-btn svg {
    stroke: #ffffff;
}
.dark-mode .post-card .felt-it-btn:hover svg,
.dark-mode .post-card .felt-it-btn:focus svg {
    stroke: var(--letitout-primary, #f10000);
}

.dark-mode .post-card .felt-it-btn.felt {
    background-color: rgba(241, 0, 0, 0.22);
    border-color: var(--letitout-primary, #f10000);
    color: #ffffff;
}

.dark-mode .post-card .felt-it-btn.felt svg {
    stroke: var(--letitout-primary, #f10000);
    fill: var(--letitout-primary, #f10000);
}

.dark-mode .post-card .share-love-btn {
    background-color: transparent;
    color: var(--letitout-primary, #f10000);
    border: 1px solid var(--letitout-primary, #f10000);
}
.dark-mode .post-card .share-love-btn:hover {
    background-color: rgba(241, 0, 0, 0.12);
    border-color: var(--letitout-primary, #f10000);
    color: var(--letitout-primary, #f10000);
}
.dark-mode .post-card .share-love-btn.sent {
    background-color: #080808 !important;
    color: #888 !important;
    border-color: #333 !important;
    cursor: not-allowed;
}

.dark-mode .post-city-line {
    color: #888;
}
.dark-mode .post-meta {
    color: #888;
}

/* --- Send Love (Reply) Modal --- */
.dark-mode .reply-modal-overlay {
    background-color: rgba(0, 0, 0, 0.6);
}
.dark-mode .reply-modal {
    background-color: #080808;
    color: #ffffff;
    border: 1px solid #333;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}
.dark-mode .reply-modal .reply-modal-title {
    color: #ffffff;
}
.dark-mode .reply-modal .reply-modal-microcopy {
    color: #b0b0b0;
}
.dark-mode .reply-modal .reply-textarea {
    background-color: #050505;
    border: 1px solid #333;
    color: #ffffff;
}
.dark-mode .reply-modal .reply-textarea::placeholder {
    color: #888;
}
.dark-mode .reply-modal .reply-textarea:focus {
    border-color: #666;
    outline: none;
}
.dark-mode .reply-modal .char-counter {
    color: #888;
}
.dark-mode .reply-modal .cancel-btn {
    background-color: #3a3a3a;
    color: #ffffff;
    border: 1px solid #555;
}
.dark-mode .reply-modal .send-btn {
    background-color: #f10000;
    color: #ffffff;
    border: 1px solid #f10000;
}
.dark-mode .reply-modal .send-btn:disabled {
    background-color: #5a1e26;
    color: #a0a0a0;
    border-color: #5a1e26;
}

/* --- Toast Notification --- */
.dark-mode .toast-notification.success {
    background-color: #3a3a3a;
    color: #E0F0E0;
    border: 1px solid #555;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* --- Location Tags in Modal --- */
.dark-mode .wall-location-modal .location-option {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
}
.dark-mode .wall-location-modal .location-option:hover {
    background-color: #4a4a4a !important;
}

/* --- Location Modal --- */
.dark-mode .wall-location-modal-content {
    background: #080808;
    border: none;
    color: #ffffff;
}

.dark-mode .wall-location-modal-header {
    border-bottom: 1px solid #444;
}

.dark-mode .wall-location-modal .close-btn {
    color: #AAA;
}
.dark-mode .wall-location-modal .close-btn:hover {
    color: #FFF;
}

.dark-mode .wall-location-search-input {
    background-color: #3a3a3a;
    color: #ffffff;
    border: 1px solid #555;
}

.dark-mode .wall-city-chip {
    background-color: #3a3a3a;
    color: #ffffff;
    border: 1px solid #555;
}
.dark-mode .wall-city-chip:hover {
    background-color: #4a4a4a;
    border-color: #666;
}
.dark-mode .wall-city-chip.selected {
    background-color: #5282E8;
    color: white;
    border-color: #5282E8;
}

.dark-mode .report-modal-cancel:hover {
    background-color: #555;
}

/* --- Premium Modal --- */
.dark-mode .premium-modal {
    background-color: #2c2c2e;
    border: 1px solid #4a4a4a;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

.dark-mode .premium-modal-title {
    color: #f5f5f7;
}

.dark-mode .premium-modal-text {
    color: #b0b0b0;
}

.dark-mode .premium-modal-price {
    color: #f5f5f7;
}

.dark-mode .premium-modal-cancel {
    color: #9e9e9e;
}

.dark-mode .premium-modal-cancel:hover {
    color: #f5f5f7;
}

/* --- Paywall Modal --- */
.dark-mode .paywall-modal {
    background: #2c2c2e;
    border-color: #4a4a4a;
}

.dark-mode .paywall-modal-title {
    color: #ffffff !important;
}

.dark-mode .paywall-modal-subtitle {
    color: #b0b0b0;
}

.dark-mode .paywall-modal-price {
    background-color: transparent;
    color: #ffffff;
    box-shadow: none;
    padding: 0;
    margin-bottom: 1rem;
}

.dark-mode .paywall-modal-info {
    color: #9e9e9e;
}

/* --- Support Modal --- */
.dark-mode .letitout-cta-footer-note {
    color: #9a9a9a;
}

.dark-mode .support-link-btn {
    color: #9e9e9e;
}

.dark-mode .support-link-btn:hover {
    color: #f5f5f7;
}

.dark-mode .support-modal {
    background-color: #2c2c2e;
    border: 1px solid #4a4a4a;
}

.dark-mode .support-modal-title {
    color: #f5f5f7;
}

.dark-mode .support-modal-body {
    color: #b0b0b0;
}

.dark-mode .support-modal-footer {
    color: #e0e0e0;
}

.dark-mode .support-modal-close {
    color: #888;
}

.dark-mode .support-modal-btn {
    /* The red CTA works well on dark backgrounds, no change needed */
}

/* --- Prompt Controls --- */
.dark-mode .prompt-nav-btn {
    color: #f5f5f7;
}

.dark-mode .letitout-subtitle {
    color: #f5f5f7;
}

/* Dark mode: make the replies header (x Message) label white in Inbox/Messages modal */
.dark-mode .letitout-my-posts-modal .replies-header {
  color: #fff !important;
}

/* --- Premium Packs Dark Mode Styles --- */

.dark-mode .premium-packs-cta {
    border-color: #444;
    color: #aaa;
}

.dark-mode .premium-packs-cta:hover {
    background: #3a3a3a;
    border-color: #555;
    color: #e0e0e0;
}

.dark-mode .pack-selector-btn {
    background: #3a3a3a;
    border-color: #555;
    color: #e0e0e0;
}

.dark-mode .pack-selector-btn:hover {
    background: #444;
    border-color: #666;
}

.dark-mode .pack-dropdown {
    background: #080808;
    border-color: #333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode .pack-dropdown-item {
    border-bottom-color: #333;
    color: #ffffff;
}

.dark-mode .pack-dropdown-item:hover {
    background: #3a3a3a;
}

.dark-mode .pack-dropdown-item.selected {
    background: #f10000;
    color: white;
}

.dark-mode .premium-packs-modal {
    background: #080808;
    color: #ffffff;
}

.dark-mode .premium-packs-modal-title {
    color: #ffffff;
}

.dark-mode .premium-packs-modal-subtitle {
    color: #aaa;
}

.dark-mode .premium-packs-modal-close:hover {
    background: #3a3a3a !important;
    color: #fffcf1 !important;
    border-color: #555 !important;
    outline: none !important;
}

.dark-mode .premium-pack-card {
    background: #2a2a2a;
    border-color: #444;
    color: #ffffff;
}

.dark-mode .premium-pack-card:hover {
    background: #333;
    border-color: #555;
}

.dark-mode .premium-pack-title {
    color: #ffffff;
}

.dark-mode .premium-pack-subtitle {
    color: #aaa;
}

.dark-mode .premium-pack-status.locked {
    color: #666;
}

.dark-mode .premium-pack-loading {
    color: #aaa;
}

.dark-mode .premium-pack-loading .spinner {
    border-color: #333;
    border-top-color: #f10000;
}

.dark-mode .premium-pack-error {
    background: #2a1a1a;
    border-color: #4a2a2a;
    color: #f56565;
}

.dark-mode .letitout-confirmation-modal {
  background: #f10000; /* brand red background */
  color: #fffcf1; /* cream text color */
  box-shadow: none;
  border: 1px solid #b30010; /* darker red border */
}
.dark-mode .letitout-confirmation-text {
  color: #fffcf1; /* cream text color */
}
.dark-mode .letitout-confirmation-heart svg {
  filter: none;
}
.dark-mode .letitout-confirmation-note {
  color: #aaa;
}

.dark-mode .letitout-emotion-btn:hover,
.dark-mode .letitout-emotion-btn:focus,
.dark-mode .letitout-situation-btn:hover,
.dark-mode .letitout-situation-btn:focus,
.dark-mode .letitout-city-btn:hover,
.dark-mode .letitout-city-btn:focus {
  background: #232325 !important;
  color: #fff !important;
  border-color: #444 !important;
  outline: none !important;
}

/* Mobile form pills: default + hover like desktop (no text jump — layout locked) */
@media (max-width: 600px) {
  .dark-mode .letitout-form .emotion-btn-row .letitout-emotion-btn,
  .dark-mode .letitout-form .emotion-btn-row .letitout-situation-btn,
  .dark-mode .letitout-form .emotion-btn-row .letitout-city-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
    padding: 0.5rem 0.2rem !important;
    font-weight: 500 !important;
    background: #3a3a3a !important;
    color: #e0e0e0 !important;
    border: 1.5px solid #555 !important;
    border-radius: 6px !important;
    outline: none !important;
  }

  /* Match desktop dark hover / focus */
  .dark-mode .letitout-form .emotion-btn-row .letitout-emotion-btn:hover,
  .dark-mode .letitout-form .emotion-btn-row .letitout-emotion-btn:focus,
  .dark-mode .letitout-form .emotion-btn-row .letitout-situation-btn:hover,
  .dark-mode .letitout-form .emotion-btn-row .letitout-situation-btn:focus,
  .dark-mode .letitout-form .emotion-btn-row .letitout-city-btn:hover,
  .dark-mode .letitout-form .emotion-btn-row .letitout-city-btn:focus {
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
    padding: 0.5rem 0.2rem !important;
    flex: 1 1 0 !important;
    flex-grow: 1 !important;
    min-width: 0 !important;
    background: #232325 !important;
    color: #fff !important;
    border: 1.5px solid #444 !important;
  }

  .dark-mode .letitout-form .emotion-btn-row .letitout-emotion-btn:active,
  .dark-mode .letitout-form .emotion-btn-row .letitout-situation-btn:active,
  .dark-mode .letitout-form .emotion-btn-row .letitout-city-btn:active {
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
    padding: 0.5rem 0.2rem !important;
    flex: 1 1 0 !important;
    flex-grow: 1 !important;
    min-width: 0 !important;
    background: #3a3a3a !important;
    color: #e0e0e0 !important;
    border: 1.5px solid #555 !important;
  }
}

/* Wall Controls - Sort by Filter Button Dark Mode Fix */
.dark-mode .wall-sort-trigger {
    background-color: transparent !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0.5rem 1.5rem 0.5rem 0.7rem !important;
    font-size: 1rem !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: normal !important;
    min-width: 90px !important;
    max-width: 140px !important;
    text-align: left !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: background 0.2s, box-shadow 0.2s !important;
    cursor: pointer !important;
}

.dark-mode .wall-sort-trigger:hover,
.dark-mode .wall-sort-trigger:focus {
    background-color: #3a3a3a !important;
    outline: none !important;
    box-shadow: none !important;
}

.dark-mode .wall-sort-trigger .dropdown-arrow {
    color: #ffffff !important;
    font-size: 0.65em !important;
    margin-left: 0.5rem !important;
}

.dark-mode .wall-sort-list {
    background: #080808 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
    border: 1px solid #333 !important;
    border-radius: 16px !important;
    color: #ffffff !important;
}

.dark-mode .wall-sort-label-dropdown {
    color: #ffffff !important;
    font-weight: normal !important;
    background: none !important;
    border-radius: 0 !important;
    letter-spacing: 0.01em !important;
    cursor: default !important;
}

.dark-mode .wall-sort-option {
    color: #ffffff !important;
    background: #080808 !important;
    border: none !important;
    width: 100% !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s !important;
    border-radius: 8px !important;
    margin: 0.1rem 0 !important;
    outline: none !important;
    padding: 1rem 1.5rem !important;
    font-size: 1.08rem !important;
    font-family: 'DM Sans', 'Inter', Arial, sans-serif !important;
}

.dark-mode .wall-sort-option:hover,
.dark-mode .wall-sort-option:focus {
    background: #3a3a3a !important;
    outline: none !important;
    color: #ffffff !important;
}

.dark-mode .wall-sort-option.selected {
    font-weight: 700 !important;
    color: #f10000 !important;
    background: #2f2f2f !important;
}

/* Mobile dark mode fixes for sort dropdown */
@media (max-width: 768px) {
    .dark-mode .wall-sort-list {
        min-width: 220px !important;
        max-width: 90vw !important;
        width: auto !important;
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
        background: #080808 !important;
        border: 1px solid #333 !important;
    }
    
    .dark-mode .wall-sort-trigger {
        min-width: 120px !important;
        max-width: 180px !important;
        color: #ffffff !important;
    }
    
    .dark-mode .wall-sort-trigger .dropdown-arrow {
        color: #ffffff !important;
        font-size: 0.6em !important;
    }
    
    .dark-mode .wall-sort-option.selected {
        color: #f10000 !important;
        background: #2f2f2f !important;
    }
    
    .dark-mode .wall-sort-option {
        color: #ffffff !important;
        background: #080808 !important;
    }
    
    .dark-mode .wall-sort-option:hover,
    .dark-mode .wall-sort-option:focus {
        background: #3a3a3a !important;
        color: #ffffff !important;
    }
} 

/* Dark Mode Success Message Tooltip */
.dark-mode .success-message,
.dark-mode .reply-success-message,
.dark-mode .sent-message-modal {
    background: #2f2f2f !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    border: 1px solid #444 !important;
}

.dark-mode .success-message:hover,
.dark-mode .reply-success-message:hover,
.dark-mode .sent-message-modal:hover {
    background: #3a3a3a !important;
}

.dark-mode .reply-success-message__sub {
    color: rgba(255, 255, 255, 0.68) !important;
}

/* Mobile Inbox Button - dark mode (header top right) */
@media (max-width: 600px) {
    .dark-mode .letitout-mobile-inbox-btn i {
        color: #ffffff;
    }
}

/* Let It Out — About (?) button: mirrors .theme-toggle-btn dark styling */
.dark-mode .letitout-about-btn {
    color: #d4d4d4;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 600px) {
    .dark-mode .letitout-about-btn {
        background-color: #333333;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        color: #d4d4d4;
    }
}

.dark-mode .letitout-about-overlay {
    background: rgba(0, 0, 0, 0.75);
}

.dark-mode .letitout-about-panel {
    background: linear-gradient(165deg, #080808 0%, #060606 45%, #0c0c0c 100%);
    border-color: rgba(241, 0, 0, 0.22);
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.dark-mode .letitout-about-close {
    background: rgba(255, 255, 255, 0.06);
    color: #a0a0a0;
}

.dark-mode .letitout-about-close:hover,
.dark-mode .letitout-about-close:focus {
    background: rgba(241, 0, 0, 0.2);
    color: #ff8a8a;
}

.dark-mode .letitout-about-inner {
    color: #e8e8e8;
}

.dark-mode .letitout-about-kicker {
    color: #ff6b6b;
}

.dark-mode .letitout-about-kicker-sub {
    color: #a8a8a8;
}

.dark-mode .letitout-about-hero {
    color: #fafafa;
}

.dark-mode .letitout-about-hero.letitout-about-hero--brand {
    color: #f10000;
}

.dark-mode .letitout-about-copy {
    color: #d0d0d0;
}

.dark-mode .letitout-about-copy--opening {
    color: #e8e8e8;
}

.dark-mode .letitout-about-foot.letitout-about-foot--human {
    color: #9a9a9a;
}

.dark-mode .letitout-about-copy strong {
    color: #f0f0f0;
}

.dark-mode .letitout-about-copy--finale strong {
    color: #f0f0f0;
}

.dark-mode .letitout-about-copy--tagline strong {
    color: var(--letitout-primary, #f10000);
}

.dark-mode .letitout-about-copy--ease {
    color: #a8a8a8;
}

.dark-mode .letitout-about-copy--brand {
    color: #ff6b6b;
}

.dark-mode .letitout-about-copy--footnote {
    color: #9a9a9a;
}

.dark-mode .letitout-about-closer {
    border-top-color: rgba(255, 255, 255, 0.12);
}

.dark-mode .letitout-about-closer-text {
    color: #c8c8c8;
}

.dark-mode .letitout-about-closer-text strong {
    color: var(--letitout-primary, #f10000);
}

.dark-mode .letitout-about-purpose-label,
.dark-mode .letitout-about-you-label {
    color: #888;
}

.dark-mode .letitout-about-purpose-value {
    color: #ff6b6b;
}

.dark-mode .letitout-about-you li {
    color: #c8c8c8;
}

.dark-mode .letitout-about-pulse li {
    color: #c8c8c8;
}

.dark-mode .letitout-about-divider {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}

.dark-mode .letitout-about-lead {
    color: #e0e0e0;
}

.dark-mode .letitout-about-truth li {
    color: #b0b0b0;
}

.dark-mode .letitout-about-truth li span {
    color: #ff8a8a;
}

.dark-mode .letitout-about-ritual {
    background: rgba(241, 0, 0, 0.1);
    border-color: rgba(241, 0, 0, 0.28);
}

.dark-mode .letitout-about-ritual-text {
    color: #d4d4d4;
}

.dark-mode .letitout-about-path-title {
    color: #888;
}

.dark-mode .letitout-about-path li {
    color: #c8c8c8;
}

.dark-mode .letitout-about-path strong {
    color: #fff;
}

.dark-mode .letitout-about-foot {
    color: #999;
}

.dark-mode .letitout-about-dismiss {
    background: #f10000;
    color: #fff;
}

.dark-mode .letitout-about-dismiss:hover,
.dark-mode .letitout-about-dismiss:focus {
    background: #ff3333;
}