/* =============================================================================
 * Aloha Service Network — Theme & Layout Overrides
 * -----------------------------------------------------------------------------
 *  Each theme sets the global --asn-* variables AND overrides hardcoded
 *  page-level colors using high-specificity rules with `!important` (color
 *  only — never layout/spacing) so legacy inline <style> blocks fall in line.
 *
 *  Layout density adjusts root font-size and a handful of padding rules.
 * ============================================================================= */

/* ---------------------------------------------------------------------------
 * 1. Default theme variables (these get overridden per-theme below).
 *    These mirror the original :root block in styles.css so the page looks
 *    identical when "Default" is selected.
 * --------------------------------------------------------------------------- */
:root,
html[data-theme="default"] {
  --asn-bg:               #ffffff;
  --asn-surface:          #ffffff;
  --asn-surface-alt:      #f8fafc;
  --asn-surface-muted:    #f1f5f9;
  --asn-text:             #333333;
  --asn-text-strong:      #0f172a;
  --asn-muted:            #555555;
  --asn-border:           #cccccc;
  --asn-border-soft:      #e2e8f0;
  --asn-shadow:           0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  --asn-shadow-strong:    0 0.5rem 1.25rem rgba(0, 0, 0, 0.15);
  --asn-button-bg:        #333333;
  --asn-button-hover:     #555555;
  --asn-button-text:      #ffffff;
  --asn-nav-bg:           #333333;
  --asn-nav-text:         #ffffff;
  --asn-nav-hover:        #555555;
  --asn-footer-bg:        #333333;
  --asn-footer-text:      #ffffff;
  --asn-accent:           #0066cc;
  --asn-accent-hover:     #004a99;
  --asn-input-bg:         #ffffff;
  --asn-input-text:       #333333;
  --asn-input-border:     #cccccc;
  --asn-chip-bg:          #f1f5f9;
  --asn-chip-border:      #cbd5e1;
  --asn-chip-text:        #1f2937;
  --asn-danger:           #e74c3c;
  --asn-danger-hover:     #c0392b;
  --asn-modal-overlay:    rgba(0, 0, 0, 0.72);
}

/* ---------------------------------------------------------------------------
 * 2. Dark Mode
 * --------------------------------------------------------------------------- */
html[data-theme="dark"] {
  --asn-bg:               #0f172a;
  --asn-surface:          #1e293b;
  --asn-surface-alt:      #1a2235;
  --asn-surface-muted:    #273349;
  --asn-text:             #e2e8f0;
  --asn-text-strong:      #f8fafc;
  --asn-muted:            #94a3b8;
  --asn-border:           #475569;
  --asn-border-soft:      #334155;
  --asn-shadow:           0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
  --asn-shadow-strong:    0 0.5rem 1.5rem rgba(0, 0, 0, 0.6);
  --asn-button-bg:        #3b82f6;
  --asn-button-hover:     #2563eb;
  --asn-button-text:      #ffffff;
  --asn-nav-bg:           #020617;
  --asn-nav-text:         #f8fafc;
  --asn-nav-hover:        #1e293b;
  --asn-footer-bg:        #020617;
  --asn-footer-text:      #cbd5e1;
  --asn-accent:           #60a5fa;
  --asn-accent-hover:     #3b82f6;
  --asn-input-bg:         #1e293b;
  --asn-input-text:       #e2e8f0;
  --asn-input-border:     #475569;
  --asn-chip-bg:          #334155;
  --asn-chip-border:      #475569;
  --asn-chip-text:        #e2e8f0;
  --asn-danger:           #ef4444;
  --asn-danger-hover:     #dc2626;
  --asn-modal-overlay:    rgba(0, 0, 0, 0.85);
}

/* ---------------------------------------------------------------------------
 * 3. High Contrast (WCAG AAA-friendly)
 * --------------------------------------------------------------------------- */
html[data-theme="high-contrast"] {
  --asn-bg:               #000000;
  --asn-surface:          #000000;
  --asn-surface-alt:      #111111;
  --asn-surface-muted:    #1a1a1a;
  --asn-text:             #ffffff;
  --asn-text-strong:      #ffffff;
  --asn-muted:            #f0f0f0;
  --asn-border:           #ffffff;
  --asn-border-soft:      #cccccc;
  --asn-shadow:           0 0 0 2px #ffd60a;
  --asn-shadow-strong:    0 0 0 3px #ffd60a;
  --asn-button-bg:        #ffd60a;
  --asn-button-hover:     #ffffff;
  --asn-button-text:      #000000;
  --asn-nav-bg:           #000000;
  --asn-nav-text:         #ffd60a;
  --asn-nav-hover:        #ffd60a;
  --asn-footer-bg:        #000000;
  --asn-footer-text:      #ffd60a;
  --asn-accent:           #ffd60a;
  --asn-accent-hover:     #ffffff;
  --asn-input-bg:         #000000;
  --asn-input-text:       #ffffff;
  --asn-input-border:     #ffffff;
  --asn-chip-bg:          #000000;
  --asn-chip-border:      #ffd60a;
  --asn-chip-text:        #ffd60a;
  --asn-danger:           #ff453a;
  --asn-danger-hover:     #ff6961;
  --asn-modal-overlay:    rgba(0, 0, 0, 0.95);
}

/* ---------------------------------------------------------------------------
 * 4. Solarized (Light)
 * --------------------------------------------------------------------------- */
html[data-theme="solarized"] {
  --asn-bg:               #fdf6e3;
  --asn-surface:          #eee8d5;
  --asn-surface-alt:      #f5efd6;
  --asn-surface-muted:    #e6dfc4;
  --asn-text:             #586e75;
  --asn-text-strong:      #073642;
  --asn-muted:            #93a1a1;
  --asn-border:           #d3cbb1;
  --asn-border-soft:      #e6dfc4;
  --asn-shadow:           0 0.25rem 0.5rem rgba(101, 123, 131, 0.15);
  --asn-shadow-strong:    0 0.5rem 1.25rem rgba(101, 123, 131, 0.25);
  --asn-button-bg:        #268bd2;
  --asn-button-hover:     #2076b3;
  --asn-button-text:      #fdf6e3;
  --asn-nav-bg:           #073642;
  --asn-nav-text:         #fdf6e3;
  --asn-nav-hover:        #586e75;
  --asn-footer-bg:        #073642;
  --asn-footer-text:      #eee8d5;
  --asn-accent:           #cb4b16;
  --asn-accent-hover:     #b34010;
  --asn-input-bg:         #fdf6e3;
  --asn-input-text:       #586e75;
  --asn-input-border:     #d3cbb1;
  --asn-chip-bg:          #eee8d5;
  --asn-chip-border:      #d3cbb1;
  --asn-chip-text:        #073642;
  --asn-danger:           #dc322f;
  --asn-danger-hover:     #b8281f;
  --asn-modal-overlay:    rgba(7, 54, 66, 0.72);
}

/* ---------------------------------------------------------------------------
 * 5. Ocean / Blue
 * --------------------------------------------------------------------------- */
html[data-theme="ocean"] {
  --asn-bg:               #f0f9ff;
  --asn-surface:          #ffffff;
  --asn-surface-alt:      #e0f2fe;
  --asn-surface-muted:    #bae6fd;
  --asn-text:             #0c4a6e;
  --asn-text-strong:      #082f49;
  --asn-muted:            #0369a1;
  --asn-border:           #7dd3fc;
  --asn-border-soft:      #bae6fd;
  --asn-shadow:           0 0.25rem 0.5rem rgba(2, 132, 199, 0.15);
  --asn-shadow-strong:    0 0.5rem 1.25rem rgba(2, 132, 199, 0.25);
  --asn-button-bg:        #0284c7;
  --asn-button-hover:     #0369a1;
  --asn-button-text:      #ffffff;
  --asn-nav-bg:           #082f49;
  --asn-nav-text:         #ffffff;
  --asn-nav-hover:        #0c4a6e;
  --asn-footer-bg:        #082f49;
  --asn-footer-text:      #bae6fd;
  --asn-accent:           #0ea5e9;
  --asn-accent-hover:     #0284c7;
  --asn-input-bg:         #ffffff;
  --asn-input-text:       #0c4a6e;
  --asn-input-border:     #7dd3fc;
  --asn-chip-bg:          #e0f2fe;
  --asn-chip-border:      #7dd3fc;
  --asn-chip-text:        #0c4a6e;
  --asn-danger:           #dc2626;
  --asn-danger-hover:     #b91c1c;
  --asn-modal-overlay:    rgba(8, 47, 73, 0.78);
}

/* ---------------------------------------------------------------------------
 * 6. Forest / Green
 * --------------------------------------------------------------------------- */
html[data-theme="forest"] {
  --asn-bg:               #f7faf3;
  --asn-surface:          #ffffff;
  --asn-surface-alt:      #ecfccb;
  --asn-surface-muted:    #d9f99d;
  --asn-text:             #1a2e05;
  --asn-text-strong:      #052e16;
  --asn-muted:            #4d7c0f;
  --asn-border:           #84cc16;
  --asn-border-soft:      #bef264;
  --asn-shadow:           0 0.25rem 0.5rem rgba(22, 101, 52, 0.15);
  --asn-shadow-strong:    0 0.5rem 1.25rem rgba(22, 101, 52, 0.25);
  --asn-button-bg:        #166534;
  --asn-button-hover:     #14532d;
  --asn-button-text:      #ffffff;
  --asn-nav-bg:           #14532d;
  --asn-nav-text:         #ecfccb;
  --asn-nav-hover:        #166534;
  --asn-footer-bg:        #14532d;
  --asn-footer-text:      #ecfccb;
  --asn-accent:           #65a30d;
  --asn-accent-hover:     #4d7c0f;
  --asn-input-bg:         #ffffff;
  --asn-input-text:       #1a2e05;
  --asn-input-border:     #84cc16;
  --asn-chip-bg:          #ecfccb;
  --asn-chip-border:      #84cc16;
  --asn-chip-text:        #1a2e05;
  --asn-danger:           #b91c1c;
  --asn-danger-hover:     #991b1b;
  --asn-modal-overlay:    rgba(20, 83, 45, 0.78);
}

/* ---------------------------------------------------------------------------
 * 7. Sepia / Warm
 * --------------------------------------------------------------------------- */
html[data-theme="sepia"] {
  --asn-bg:               #f4ecd8;
  --asn-surface:          #faf3df;
  --asn-surface-alt:      #ede0c1;
  --asn-surface-muted:    #e3d4ad;
  --asn-text:             #5b4636;
  --asn-text-strong:      #3e2f23;
  --asn-muted:            #8b6f47;
  --asn-border:           #c9b48d;
  --asn-border-soft:      #d9c9a6;
  --asn-shadow:           0 0.25rem 0.5rem rgba(91, 70, 54, 0.18);
  --asn-shadow-strong:    0 0.5rem 1.25rem rgba(91, 70, 54, 0.25);
  --asn-button-bg:        #8b4513;
  --asn-button-hover:     #6b3410;
  --asn-button-text:      #faf3df;
  --asn-nav-bg:           #3e2f23;
  --asn-nav-text:         #faf3df;
  --asn-nav-hover:        #5b4636;
  --asn-footer-bg:        #3e2f23;
  --asn-footer-text:      #ede0c1;
  --asn-accent:           #b8651d;
  --asn-accent-hover:     #8b4513;
  --asn-input-bg:         #faf3df;
  --asn-input-text:       #5b4636;
  --asn-input-border:     #c9b48d;
  --asn-chip-bg:          #ede0c1;
  --asn-chip-border:      #c9b48d;
  --asn-chip-text:        #5b4636;
  --asn-danger:           #b91c1c;
  --asn-danger-hover:     #991b1b;
  --asn-modal-overlay:    rgba(62, 47, 35, 0.78);
}

/* ===========================================================================
 * Theme application — for any theme other than `default`, we override the
 * hardcoded colors that page-level <style> blocks set. We restrict this to
 * non-default so the existing site looks pixel-identical on the default theme.
 * ============================================================================ */

html[data-theme="dark"] body,
html[data-theme="high-contrast"] body,
html[data-theme="solarized"] body,
html[data-theme="ocean"] body,
html[data-theme="forest"] body,
html[data-theme="sepia"] body {
  background-color: var(--asn-bg) !important;
  background-image: none !important;
  color: var(--asn-text) !important;
}

html[data-theme="dark"] main,
html[data-theme="high-contrast"] main,
html[data-theme="solarized"] main,
html[data-theme="ocean"] main,
html[data-theme="forest"] main,
html[data-theme="sepia"] main {
  background-color: transparent !important;
  color: var(--asn-text) !important;
}

/* Nav */
html[data-theme="dark"] nav,
html[data-theme="high-contrast"] nav,
html[data-theme="solarized"] nav,
html[data-theme="ocean"] nav,
html[data-theme="forest"] nav,
html[data-theme="sepia"] nav {
  background-color: var(--asn-nav-bg) !important;
  color: var(--asn-nav-text) !important;
}

html[data-theme="dark"] .navbar a,
html[data-theme="high-contrast"] .navbar a,
html[data-theme="solarized"] .navbar a,
html[data-theme="ocean"] .navbar a,
html[data-theme="forest"] .navbar a,
html[data-theme="sepia"] .navbar a {
  color: var(--asn-nav-text) !important;
}

html[data-theme="dark"] .navbar a:hover,
html[data-theme="high-contrast"] .navbar a:hover,
html[data-theme="solarized"] .navbar a:hover,
html[data-theme="ocean"] .navbar a:hover,
html[data-theme="forest"] .navbar a:hover,
html[data-theme="sepia"] .navbar a:hover {
  background-color: var(--asn-nav-hover) !important;
}

html[data-theme="dark"] .group-label,
html[data-theme="high-contrast"] .group-label,
html[data-theme="solarized"] .group-label,
html[data-theme="ocean"] .group-label,
html[data-theme="forest"] .group-label,
html[data-theme="sepia"] .group-label {
  color: var(--asn-nav-text) !important;
}

/* Footer */
html[data-theme="dark"] footer,
html[data-theme="high-contrast"] footer,
html[data-theme="solarized"] footer,
html[data-theme="ocean"] footer,
html[data-theme="forest"] footer,
html[data-theme="sepia"] footer {
  background-color: var(--asn-footer-bg) !important;
  color: var(--asn-footer-text) !important;
}

html[data-theme="dark"] footer a,
html[data-theme="high-contrast"] footer a,
html[data-theme="solarized"] footer a,
html[data-theme="ocean"] footer a,
html[data-theme="forest"] footer a,
html[data-theme="sepia"] footer a {
  color: var(--asn-footer-text) !important;
}

/* Buttons (common variants used across the site) */
html[data-theme="dark"] .account-btn,
html[data-theme="dark"] .signout-btn,
html[data-theme="dark"] .signin-btn,
html[data-theme="dark"] .group-btn,
html[data-theme="dark"] .submit-btn,
html[data-theme="dark"] .post-button,
html[data-theme="dark"] .contact-btn,
html[data-theme="dark"] .save-btn,
html[data-theme="dark"] .add-entry-btn,
html[data-theme="dark"] .tab-button,
html[data-theme="dark"] .primary-btn,
html[data-theme="dark"] .secondary-btn,
html[data-theme="dark"] .modal-buttons button,
html[data-theme="dark"] .modal-inline-btn,
html[data-theme="high-contrast"] .account-btn,
html[data-theme="high-contrast"] .signout-btn,
html[data-theme="high-contrast"] .signin-btn,
html[data-theme="high-contrast"] .group-btn,
html[data-theme="high-contrast"] .submit-btn,
html[data-theme="high-contrast"] .post-button,
html[data-theme="high-contrast"] .contact-btn,
html[data-theme="high-contrast"] .save-btn,
html[data-theme="high-contrast"] .add-entry-btn,
html[data-theme="high-contrast"] .tab-button,
html[data-theme="high-contrast"] .primary-btn,
html[data-theme="high-contrast"] .secondary-btn,
html[data-theme="high-contrast"] .modal-buttons button,
html[data-theme="high-contrast"] .modal-inline-btn,
html[data-theme="solarized"] .account-btn,
html[data-theme="solarized"] .signout-btn,
html[data-theme="solarized"] .signin-btn,
html[data-theme="solarized"] .group-btn,
html[data-theme="solarized"] .submit-btn,
html[data-theme="solarized"] .post-button,
html[data-theme="solarized"] .contact-btn,
html[data-theme="solarized"] .save-btn,
html[data-theme="solarized"] .add-entry-btn,
html[data-theme="solarized"] .tab-button,
html[data-theme="solarized"] .primary-btn,
html[data-theme="solarized"] .secondary-btn,
html[data-theme="solarized"] .modal-buttons button,
html[data-theme="solarized"] .modal-inline-btn,
html[data-theme="ocean"] .account-btn,
html[data-theme="ocean"] .signout-btn,
html[data-theme="ocean"] .signin-btn,
html[data-theme="ocean"] .group-btn,
html[data-theme="ocean"] .submit-btn,
html[data-theme="ocean"] .post-button,
html[data-theme="ocean"] .contact-btn,
html[data-theme="ocean"] .save-btn,
html[data-theme="ocean"] .add-entry-btn,
html[data-theme="ocean"] .tab-button,
html[data-theme="ocean"] .primary-btn,
html[data-theme="ocean"] .secondary-btn,
html[data-theme="ocean"] .modal-buttons button,
html[data-theme="ocean"] .modal-inline-btn,
html[data-theme="forest"] .account-btn,
html[data-theme="forest"] .signout-btn,
html[data-theme="forest"] .signin-btn,
html[data-theme="forest"] .group-btn,
html[data-theme="forest"] .submit-btn,
html[data-theme="forest"] .post-button,
html[data-theme="forest"] .contact-btn,
html[data-theme="forest"] .save-btn,
html[data-theme="forest"] .add-entry-btn,
html[data-theme="forest"] .tab-button,
html[data-theme="forest"] .primary-btn,
html[data-theme="forest"] .secondary-btn,
html[data-theme="forest"] .modal-buttons button,
html[data-theme="forest"] .modal-inline-btn,
html[data-theme="sepia"] .account-btn,
html[data-theme="sepia"] .signout-btn,
html[data-theme="sepia"] .signin-btn,
html[data-theme="sepia"] .group-btn,
html[data-theme="sepia"] .submit-btn,
html[data-theme="sepia"] .post-button,
html[data-theme="sepia"] .contact-btn,
html[data-theme="sepia"] .save-btn,
html[data-theme="sepia"] .add-entry-btn,
html[data-theme="sepia"] .tab-button,
html[data-theme="sepia"] .primary-btn,
html[data-theme="sepia"] .secondary-btn,
html[data-theme="sepia"] .modal-buttons button,
html[data-theme="sepia"] .modal-inline-btn {
  background-color: var(--asn-button-bg) !important;
  color: var(--asn-button-text) !important;
  border-color: var(--asn-button-bg) !important;
}

html[data-theme="dark"] .deactivate-btn,
html[data-theme="dark"] .danger-btn,
html[data-theme="high-contrast"] .deactivate-btn,
html[data-theme="high-contrast"] .danger-btn,
html[data-theme="solarized"] .deactivate-btn,
html[data-theme="solarized"] .danger-btn,
html[data-theme="ocean"] .deactivate-btn,
html[data-theme="ocean"] .danger-btn,
html[data-theme="forest"] .deactivate-btn,
html[data-theme="forest"] .danger-btn,
html[data-theme="sepia"] .deactivate-btn,
html[data-theme="sepia"] .danger-btn {
  background-color: var(--asn-danger) !important;
  color: #ffffff !important;
}

/* Cards / containers */
html[data-theme="dark"] .form-container,
html[data-theme="dark"] #contact-form-container,
html[data-theme="dark"] #edit-post-container,
html[data-theme="dark"] .account-settings,
html[data-theme="dark"] .manage-posts-container,
html[data-theme="dark"] .project-list-container,
html[data-theme="dark"] .request-details-container,
html[data-theme="dark"] .collab-details-container,
html[data-theme="dark"] .comments-section,
html[data-theme="dark"] .event-details-container,
html[data-theme="dark"] .giveaway-details-container,
html[data-theme="dark"] .card,
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .modal-content,
html[data-theme="high-contrast"] .form-container,
html[data-theme="high-contrast"] #contact-form-container,
html[data-theme="high-contrast"] #edit-post-container,
html[data-theme="high-contrast"] .account-settings,
html[data-theme="high-contrast"] .manage-posts-container,
html[data-theme="high-contrast"] .project-list-container,
html[data-theme="high-contrast"] .request-details-container,
html[data-theme="high-contrast"] .collab-details-container,
html[data-theme="high-contrast"] .comments-section,
html[data-theme="high-contrast"] .event-details-container,
html[data-theme="high-contrast"] .giveaway-details-container,
html[data-theme="high-contrast"] .card,
html[data-theme="high-contrast"] .post-card,
html[data-theme="high-contrast"] .modal-content,
html[data-theme="solarized"] .form-container,
html[data-theme="solarized"] #contact-form-container,
html[data-theme="solarized"] #edit-post-container,
html[data-theme="solarized"] .account-settings,
html[data-theme="solarized"] .manage-posts-container,
html[data-theme="solarized"] .project-list-container,
html[data-theme="solarized"] .request-details-container,
html[data-theme="solarized"] .collab-details-container,
html[data-theme="solarized"] .comments-section,
html[data-theme="solarized"] .event-details-container,
html[data-theme="solarized"] .giveaway-details-container,
html[data-theme="solarized"] .card,
html[data-theme="solarized"] .post-card,
html[data-theme="solarized"] .modal-content,
html[data-theme="ocean"] .form-container,
html[data-theme="ocean"] #contact-form-container,
html[data-theme="ocean"] #edit-post-container,
html[data-theme="ocean"] .account-settings,
html[data-theme="ocean"] .manage-posts-container,
html[data-theme="ocean"] .project-list-container,
html[data-theme="ocean"] .request-details-container,
html[data-theme="ocean"] .collab-details-container,
html[data-theme="ocean"] .comments-section,
html[data-theme="ocean"] .event-details-container,
html[data-theme="ocean"] .giveaway-details-container,
html[data-theme="ocean"] .card,
html[data-theme="ocean"] .post-card,
html[data-theme="ocean"] .modal-content,
html[data-theme="forest"] .form-container,
html[data-theme="forest"] #contact-form-container,
html[data-theme="forest"] #edit-post-container,
html[data-theme="forest"] .account-settings,
html[data-theme="forest"] .manage-posts-container,
html[data-theme="forest"] .project-list-container,
html[data-theme="forest"] .request-details-container,
html[data-theme="forest"] .collab-details-container,
html[data-theme="forest"] .comments-section,
html[data-theme="forest"] .event-details-container,
html[data-theme="forest"] .giveaway-details-container,
html[data-theme="forest"] .card,
html[data-theme="forest"] .post-card,
html[data-theme="forest"] .modal-content,
html[data-theme="sepia"] .form-container,
html[data-theme="sepia"] #contact-form-container,
html[data-theme="sepia"] #edit-post-container,
html[data-theme="sepia"] .account-settings,
html[data-theme="sepia"] .manage-posts-container,
html[data-theme="sepia"] .project-list-container,
html[data-theme="sepia"] .request-details-container,
html[data-theme="sepia"] .collab-details-container,
html[data-theme="sepia"] .comments-section,
html[data-theme="sepia"] .event-details-container,
html[data-theme="sepia"] .giveaway-details-container,
html[data-theme="sepia"] .card,
html[data-theme="sepia"] .post-card,
html[data-theme="sepia"] .modal-content {
  background-color: var(--asn-surface) !important;
  background-image: none !important;
  color: var(--asn-text) !important;
  border-color: var(--asn-border-soft) !important;
  box-shadow: var(--asn-shadow) !important;
}

/* Form inputs */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="high-contrast"] input[type="text"],
html[data-theme="high-contrast"] input[type="email"],
html[data-theme="high-contrast"] input[type="password"],
html[data-theme="high-contrast"] input[type="number"],
html[data-theme="high-contrast"] input[type="date"],
html[data-theme="high-contrast"] input[type="time"],
html[data-theme="high-contrast"] input[type="datetime-local"],
html[data-theme="high-contrast"] input[type="search"],
html[data-theme="high-contrast"] textarea,
html[data-theme="high-contrast"] select,
html[data-theme="solarized"] input[type="text"],
html[data-theme="solarized"] input[type="email"],
html[data-theme="solarized"] input[type="password"],
html[data-theme="solarized"] input[type="number"],
html[data-theme="solarized"] input[type="date"],
html[data-theme="solarized"] input[type="time"],
html[data-theme="solarized"] input[type="datetime-local"],
html[data-theme="solarized"] input[type="search"],
html[data-theme="solarized"] textarea,
html[data-theme="solarized"] select,
html[data-theme="ocean"] input[type="text"],
html[data-theme="ocean"] input[type="email"],
html[data-theme="ocean"] input[type="password"],
html[data-theme="ocean"] input[type="number"],
html[data-theme="ocean"] input[type="date"],
html[data-theme="ocean"] input[type="time"],
html[data-theme="ocean"] input[type="datetime-local"],
html[data-theme="ocean"] input[type="search"],
html[data-theme="ocean"] textarea,
html[data-theme="ocean"] select,
html[data-theme="forest"] input[type="text"],
html[data-theme="forest"] input[type="email"],
html[data-theme="forest"] input[type="password"],
html[data-theme="forest"] input[type="number"],
html[data-theme="forest"] input[type="date"],
html[data-theme="forest"] input[type="time"],
html[data-theme="forest"] input[type="datetime-local"],
html[data-theme="forest"] input[type="search"],
html[data-theme="forest"] textarea,
html[data-theme="forest"] select,
html[data-theme="sepia"] input[type="text"],
html[data-theme="sepia"] input[type="email"],
html[data-theme="sepia"] input[type="password"],
html[data-theme="sepia"] input[type="number"],
html[data-theme="sepia"] input[type="date"],
html[data-theme="sepia"] input[type="time"],
html[data-theme="sepia"] input[type="datetime-local"],
html[data-theme="sepia"] input[type="search"],
html[data-theme="sepia"] textarea,
html[data-theme="sepia"] select {
  background-color: var(--asn-input-bg) !important;
  color: var(--asn-input-text) !important;
  border-color: var(--asn-input-border) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="high-contrast"] input::placeholder,
html[data-theme="high-contrast"] textarea::placeholder,
html[data-theme="solarized"] input::placeholder,
html[data-theme="solarized"] textarea::placeholder,
html[data-theme="ocean"] input::placeholder,
html[data-theme="ocean"] textarea::placeholder,
html[data-theme="forest"] input::placeholder,
html[data-theme="forest"] textarea::placeholder,
html[data-theme="sepia"] input::placeholder,
html[data-theme="sepia"] textarea::placeholder {
  color: var(--asn-muted) !important;
  opacity: 0.85 !important;
}

/* Modals */
html[data-theme="dark"] .modal,
html[data-theme="high-contrast"] .modal,
html[data-theme="solarized"] .modal,
html[data-theme="ocean"] .modal,
html[data-theme="forest"] .modal,
html[data-theme="sepia"] .modal {
  background-color: var(--asn-modal-overlay) !important;
}

/* Headings inside theme-aware containers */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="high-contrast"] h1,
html[data-theme="high-contrast"] h2,
html[data-theme="high-contrast"] h3,
html[data-theme="high-contrast"] h4,
html[data-theme="solarized"] h1,
html[data-theme="solarized"] h2,
html[data-theme="solarized"] h3,
html[data-theme="solarized"] h4,
html[data-theme="ocean"] h1,
html[data-theme="ocean"] h2,
html[data-theme="ocean"] h3,
html[data-theme="ocean"] h4,
html[data-theme="forest"] h1,
html[data-theme="forest"] h2,
html[data-theme="forest"] h3,
html[data-theme="forest"] h4,
html[data-theme="sepia"] h1,
html[data-theme="sepia"] h2,
html[data-theme="sepia"] h3,
html[data-theme="sepia"] h4 {
  color: var(--asn-text-strong) !important;
}

/* Subtle muted text */
html[data-theme="dark"] .creator,
html[data-theme="dark"] .organizer,
html[data-theme="dark"] .description,
html[data-theme="dark"] .notes,
html[data-theme="high-contrast"] .creator,
html[data-theme="high-contrast"] .organizer,
html[data-theme="solarized"] .creator,
html[data-theme="solarized"] .organizer,
html[data-theme="ocean"] .creator,
html[data-theme="ocean"] .organizer,
html[data-theme="forest"] .creator,
html[data-theme="forest"] .organizer,
html[data-theme="sepia"] .creator,
html[data-theme="sepia"] .organizer {
  color: var(--asn-muted) !important;
}

/* Chips */
html[data-theme="dark"] .entry-chip,
html[data-theme="dark"] .vote-option-chip,
html[data-theme="dark"] .option-chip,
html[data-theme="high-contrast"] .entry-chip,
html[data-theme="high-contrast"] .vote-option-chip,
html[data-theme="high-contrast"] .option-chip,
html[data-theme="solarized"] .entry-chip,
html[data-theme="solarized"] .vote-option-chip,
html[data-theme="solarized"] .option-chip,
html[data-theme="ocean"] .entry-chip,
html[data-theme="ocean"] .vote-option-chip,
html[data-theme="ocean"] .option-chip,
html[data-theme="forest"] .entry-chip,
html[data-theme="forest"] .vote-option-chip,
html[data-theme="forest"] .option-chip,
html[data-theme="sepia"] .entry-chip,
html[data-theme="sepia"] .vote-option-chip,
html[data-theme="sepia"] .option-chip {
  background-color: var(--asn-chip-bg) !important;
  color: var(--asn-chip-text) !important;
  border-color: var(--asn-chip-border) !important;
}

/* Notification items, post cards, list rows etc. */
html[data-theme="dark"] .notification-item,
html[data-theme="dark"] .notification-group-card,
html[data-theme="dark"] .my-group-row,
html[data-theme="dark"] .comment,
html[data-theme="dark"] .post-section-list .post-card,
html[data-theme="dark"] .group-card,
html[data-theme="high-contrast"] .notification-item,
html[data-theme="high-contrast"] .notification-group-card,
html[data-theme="high-contrast"] .my-group-row,
html[data-theme="high-contrast"] .comment,
html[data-theme="high-contrast"] .post-section-list .post-card,
html[data-theme="high-contrast"] .group-card,
html[data-theme="solarized"] .notification-item,
html[data-theme="solarized"] .notification-group-card,
html[data-theme="solarized"] .my-group-row,
html[data-theme="solarized"] .comment,
html[data-theme="solarized"] .post-section-list .post-card,
html[data-theme="solarized"] .group-card,
html[data-theme="ocean"] .notification-item,
html[data-theme="ocean"] .notification-group-card,
html[data-theme="ocean"] .my-group-row,
html[data-theme="ocean"] .comment,
html[data-theme="ocean"] .post-section-list .post-card,
html[data-theme="ocean"] .group-card,
html[data-theme="forest"] .notification-item,
html[data-theme="forest"] .notification-group-card,
html[data-theme="forest"] .my-group-row,
html[data-theme="forest"] .comment,
html[data-theme="forest"] .post-section-list .post-card,
html[data-theme="forest"] .group-card,
html[data-theme="sepia"] .notification-item,
html[data-theme="sepia"] .notification-group-card,
html[data-theme="sepia"] .my-group-row,
html[data-theme="sepia"] .comment,
html[data-theme="sepia"] .post-section-list .post-card,
html[data-theme="sepia"] .group-card {
  background-color: var(--asn-surface) !important;
  color: var(--asn-text) !important;
  border-color: var(--asn-border-soft) !important;
}

/* Detail sections (eyebrow, etc.) */
html[data-theme="dark"] .connectors-section summary,
html[data-theme="dark"] .connector-section summary,
html[data-theme="high-contrast"] .connectors-section summary,
html[data-theme="high-contrast"] .connector-section summary,
html[data-theme="solarized"] .connectors-section summary,
html[data-theme="solarized"] .connector-section summary,
html[data-theme="ocean"] .connectors-section summary,
html[data-theme="ocean"] .connector-section summary,
html[data-theme="forest"] .connectors-section summary,
html[data-theme="forest"] .connector-section summary,
html[data-theme="sepia"] .connectors-section summary,
html[data-theme="sepia"] .connector-section summary {
  background-color: var(--asn-surface-muted) !important;
  color: var(--asn-text) !important;
}

html[data-theme="dark"] .connectors-section,
html[data-theme="dark"] .connector-section,
html[data-theme="high-contrast"] .connectors-section,
html[data-theme="high-contrast"] .connector-section,
html[data-theme="solarized"] .connectors-section,
html[data-theme="solarized"] .connector-section,
html[data-theme="ocean"] .connectors-section,
html[data-theme="ocean"] .connector-section,
html[data-theme="forest"] .connectors-section,
html[data-theme="forest"] .connector-section,
html[data-theme="sepia"] .connectors-section,
html[data-theme="sepia"] .connector-section {
  background-color: var(--asn-surface-alt) !important;
  border-color: var(--asn-border-soft) !important;
}

/* readonly value fields */
html[data-theme="dark"] .readonly-value,
html[data-theme="high-contrast"] .readonly-value,
html[data-theme="solarized"] .readonly-value,
html[data-theme="ocean"] .readonly-value,
html[data-theme="forest"] .readonly-value,
html[data-theme="sepia"] .readonly-value {
  background-color: var(--asn-input-bg) !important;
  color: var(--asn-input-text) !important;
  border-color: var(--asn-input-border) !important;
}

/* ===========================================================================
 * LAYOUT DENSITY
 *   Affects root font-size and a couple of common spacing tokens.
 *   We deliberately avoid changing layout structure — only padding/font-size
 *   that the rest of the CSS picks up via `rem` units.
 * ============================================================================ */

html[data-density="comfortable"] {
  font-size: 100%;
}

html[data-density="compact"] {
  font-size: 92%;
}
html[data-density="compact"] main {
  padding-top: 0.875rem;
  padding-bottom: 1.25rem;
}
html[data-density="compact"] .account-settings,
html[data-density="compact"] .manage-posts-container,
html[data-density="compact"] .form-container,
html[data-density="compact"] .request-details-container,
html[data-density="compact"] .collab-details-container,
html[data-density="compact"] .event-details-container,
html[data-density="compact"] .giveaway-details-container {
  padding: 0.875rem !important;
}
html[data-density="compact"] .notification-item,
html[data-density="compact"] .post-card,
html[data-density="compact"] .my-group-row,
html[data-density="compact"] .notification-group-card,
html[data-density="compact"] .group-card {
  padding: 0.5rem !important;
}
html[data-density="compact"] .modal-content {
  padding: 0.875rem !important;
}

html[data-density="spacious"] {
  font-size: 108%;
}
html[data-density="spacious"] main {
  padding-top: 2.25rem;
  padding-bottom: 2.75rem;
}
html[data-density="spacious"] .account-settings,
html[data-density="spacious"] .manage-posts-container,
html[data-density="spacious"] .form-container,
html[data-density="spacious"] .request-details-container,
html[data-density="spacious"] .collab-details-container,
html[data-density="spacious"] .event-details-container,
html[data-density="spacious"] .giveaway-details-container {
  padding: 2rem !important;
}
html[data-density="spacious"] .notification-item,
html[data-density="spacious"] .post-card,
html[data-density="spacious"] .my-group-row,
html[data-density="spacious"] .notification-group-card,
html[data-density="spacious"] .group-card {
  padding: 1.25rem !important;
}
html[data-density="spacious"] .modal-content {
  padding: 2rem !important;
}

/* ===========================================================================
 * SETTINGS PANEL UI (used by theme.js when injected into myaccount.html)
 * ============================================================================ */

.asn-settings-card {
  text-align: left;
}

.asn-settings-card h2 {
  text-align: center;
  margin-bottom: 0.75rem;
}

.asn-settings-intro {
  text-align: center;
  color: var(--asn-muted);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.asn-settings-block {
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px solid var(--asn-border-soft);
  border-radius: 0.75rem;
  background: var(--asn-surface-alt);
}

.asn-settings-block h3 {
  margin: 0 0 0.35rem;
  color: var(--asn-text-strong);
  font-size: 1.15rem;
}

.asn-settings-hint {
  color: var(--asn-muted);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.asn-option-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
}

@media (min-width: 600px) {
  .asn-option-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.asn-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  width: 100%;
  background: var(--asn-surface);
  color: var(--asn-text);
  border: 2px solid var(--asn-border-soft);
  border-radius: 0.625rem;
  padding: 0.75rem;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}

.asn-option:hover {
  border-color: var(--asn-accent);
}

.asn-option[data-selected="1"] {
  border-color: var(--asn-accent);
  box-shadow: 0 0 0 2px var(--asn-accent) inset;
}

.asn-option:focus-visible {
  outline: 3px solid var(--asn-accent);
  outline-offset: 2px;
}

.asn-option-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.asn-option-title {
  font-weight: 700;
  color: var(--asn-text-strong);
}

.asn-option-blurb {
  font-size: 0.86rem;
  color: var(--asn-muted);
  line-height: 1.35;
}

/* Themed swatch icons — these show the user what they'd be picking */
.asn-swatch {
  display: inline-grid;
  grid-template-rows: 0.6rem 1.4rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.4rem;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--asn-border-soft);
  position: relative;
}
.asn-swatch .asn-swatch-nav {
  background: #333;
}
.asn-swatch .asn-swatch-body {
  background: #fff;
  position: relative;
}
.asn-swatch .asn-swatch-accent {
  position: absolute;
  bottom: 0.3rem;
  right: 0.3rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #0066cc;
}

/* Per-theme swatches */
.asn-swatch-default .asn-swatch-nav { background: #333; }
.asn-swatch-default .asn-swatch-body { background: #fff; }
.asn-swatch-default .asn-swatch-accent { background: #0066cc; }

.asn-swatch-dark .asn-swatch-nav { background: #020617; }
.asn-swatch-dark .asn-swatch-body { background: #1e293b; }
.asn-swatch-dark .asn-swatch-accent { background: #3b82f6; }

.asn-swatch-high-contrast .asn-swatch-nav { background: #000; }
.asn-swatch-high-contrast .asn-swatch-body { background: #000; border-top: 1px solid #ffd60a; }
.asn-swatch-high-contrast .asn-swatch-accent { background: #ffd60a; }

.asn-swatch-solarized .asn-swatch-nav { background: #073642; }
.asn-swatch-solarized .asn-swatch-body { background: #fdf6e3; }
.asn-swatch-solarized .asn-swatch-accent { background: #cb4b16; }

.asn-swatch-ocean .asn-swatch-nav { background: #082f49; }
.asn-swatch-ocean .asn-swatch-body { background: #f0f9ff; }
.asn-swatch-ocean .asn-swatch-accent { background: #0ea5e9; }

.asn-swatch-forest .asn-swatch-nav { background: #14532d; }
.asn-swatch-forest .asn-swatch-body { background: #f7faf3; }
.asn-swatch-forest .asn-swatch-accent { background: #65a30d; }

.asn-swatch-sepia .asn-swatch-nav { background: #3e2f23; }
.asn-swatch-sepia .asn-swatch-body { background: #faf3df; }
.asn-swatch-sepia .asn-swatch-accent { background: #b8651d; }

/* Density preview tiles (three little stacked bars) */
.asn-density-preview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0.35rem;
  border-radius: 0.4rem;
  border: 1px solid var(--asn-border-soft);
  background: var(--asn-surface);
  flex-shrink: 0;
}

.asn-density-preview span {
  display: block;
  background: var(--asn-muted);
  border-radius: 999px;
  height: 0.18rem;
}

.asn-density-preview-compact span     { margin: 0.1rem 0; }
.asn-density-preview-comfortable span { margin: 0.18rem 0; }
.asn-density-preview-spacious span    { margin: 0.28rem 0; }

.asn-settings-status {
  min-height: 1.25rem;
  margin-top: 1rem;
  text-align: center;
  color: var(--asn-accent);
  font-weight: 600;
}