/* Elara's application shell. Scoped so marketing and authentication stay independent. */
.elara-app {
    --elara-bg: #110e12;
    --elara-surface: #1b151b;
    --elara-raised: #251b23;
    --elara-line: #46313e;
    --elara-ink: #f8edf2;
    --elara-muted: #c5b2bf;
    --elara-accent: #efb4bf;
    background: radial-gradient(ellipse at 5% 0%, #321624 0, transparent 42rem), var(--elara-bg);
    color: var(--elara-ink);
    color-scheme: dark;
}
.elara-app .main-wrapper { background: var(--elara-bg); }
.elara-app .content-wrapper { min-width: 0; }
.elara-app .border, .elara-app .border-left, .elara-app .border-right,
.elara-app .border-top, .elara-app .border-bottom, .elara-app hr { border-color: var(--elara-line) !important; }
.elara-app .text-dark-r, .elara-app .text-dark { color: var(--elara-ink) !important; }
.elara-app .text-muted, .elara-app small.form-text { color: var(--elara-muted) !important; }
.elara-app a { color: var(--elara-accent); }
.elara-app a:hover { color: #ffe0e6; }
.elara-app a:focus-visible, .elara-app button:focus-visible,
.elara-app input:focus-visible, .elara-app select:focus-visible,
.elara-app textarea:focus-visible, .elara-app [tabindex]:focus-visible {
    outline: 3px solid #f2bdcc; outline-offset: 3px;
}
.elara-app .elara-skip-link { position: fixed; top: -6rem; left: 1rem; z-index: 2000; padding: .8rem 1.2rem; background: #f2bdcc; color: #24131d; border-radius: 12px; }
.elara-app .elara-skip-link:focus { top: 1rem; }
.elara-app .elara-app-brand { display: inline-flex; align-items: center; margin: 0 0 1.75rem 1rem; }
.elara-app .elara-app-brand img { width: 132px; height: 40px; object-fit: contain; }
.elara-app .side-menu { padding-top: .5rem; }
.elara-app .side-menu .user-details { background: var(--elara-surface); border: 1px solid var(--elara-line); border-radius: 16px; padding: .8rem .3rem; }
.elara-app .user-side-menu .nav-link { color: var(--elara-muted); border-radius: 13px; margin-bottom: .3rem; min-height: 48px; transition: background .18s, color .18s; }
.elara-app .user-side-menu .nav-link:hover, .elara-app .user-side-menu .nav-link.active { background: #3b2130; color: #ffe1e8; }
.elara-app .user-side-menu .nav-link.active { box-shadow: inset 3px 0 0 var(--elara-accent); }
.elara-app .btn-primary { background: #edb1bd; border-color: #edb1bd; color: #2d1420; font-weight: 700; }
.elara-app .btn-primary:hover, .elara-app .btn-primary:focus { background: #ffced7; border-color: #ffced7; color: #2d1420; }
.elara-app .btn-primary:disabled, .elara-app .btn-primary.disabled { opacity: .55; }
.elara-app .btn-outline-primary { color: var(--elara-accent); border-color: #9c647a; }
.elara-app .btn-outline-primary:hover { background: #3b2130; color: #ffe1e8; border-color: #c891a7; }
.elara-app .card, .elara-app .list-group-item, .elara-app .modal-content,
.elara-app .dropdown-menu, .elara-app .neutral-bg { background-color: var(--elara-surface); color: var(--elara-ink); border-color: var(--elara-line); }
.elara-app .dropdown-item { color: var(--elara-ink); }
.elara-app .dropdown-item:hover, .elara-app .dropdown-item:focus { background: #3b2130; }
.elara-app .form-control, .elara-app .custom-select, .elara-app .input-group-text,
.elara-app .selectize-input, .elara-app .selectize-dropdown {
    color: var(--elara-ink); background-color: #171217; border-color: #664658; border-radius: 10px;
}
.elara-app .form-control:focus, .elara-app .custom-select:focus { background-color: #211820; color: var(--elara-ink); border-color: #e0a2b8; box-shadow: 0 0 0 .2rem #e0a2b824; }
.elara-app .form-control::placeholder { color: #af98a7; opacity: 1; }
.elara-app .form-control:disabled, .elara-app .form-control[readonly] { background-color: #2a232a; opacity: .8; }
.elara-app label { font-weight: 600; }
.elara-app .settings-menu-wrapper { padding-top: .6rem; }
.elara-app .settings-menu .list-group { padding: .6rem; gap: .25rem; }
.elara-app .settings-menu .list-group-item { border: 0; border-radius: 10px; min-height: 48px; padding: .85rem .75rem; }
.elara-app .settings-menu .list-group-item:hover { background: var(--elara-raised); }
.elara-app .settings-menu .list-group-item.active { background: #3b2130; color: #ffe1e8; font-weight: 700; }
.elara-app .settings-content { min-width: 0; width: 100%; background: linear-gradient(160deg, #21161f88, transparent 32rem); padding-bottom: 2rem; }
.elara-app .elara-settings-heading { padding: .75rem .4rem .25rem; }
.elara-app .settings-content .form-group { margin-bottom: 1.5rem; }
.elara-app .settings-content .table-wrapper { overflow-x: auto; }
.elara-app .settings-content .table-wrapper > div { min-width: 360px; }
.elara-app .inline-border-tabs .nav-link { color: var(--elara-muted); border-radius: 0; }
.elara-app .inline-border-tabs .nav-link.active { color: #ffdce7; background-color: #3b2130; border-color: var(--elara-accent); }
.elara-app .elara-empty-state { margin: 1.5rem 1rem; padding: 2.5rem 1.5rem; text-align: center; border: 1px solid var(--elara-line); border-radius: 20px; background: radial-gradient(ellipse at top, #3a2030, var(--elara-surface)); }
.elara-app .elara-empty-state .elara-empty-icon { display: inline-flex; padding: 1rem; border-radius: 50%; background: #f2bdcc14; color: #f2bdcc; margin-bottom: 1rem; }
.elara-app .elara-empty-state p { max-width: 32rem; margin: .7rem auto 1.4rem; color: var(--elara-muted); line-height: 1.7; }
.elara-app .post-box { background: var(--elara-surface); }
.elara-app .suggestions-wrapper { background: linear-gradient(180deg, #21151e88, transparent); }
.elara-app .mobile-bottom-nav { background: #1b151bf5; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 30px #0004; }
.elara-app .mobile-bottom-nav .nav-link { color: var(--elara-muted); border-radius: 13px; }
.elara-app .mobile-bottom-nav .nav-link.active { color: #ffdce7; background: #3b2130; }
.elara-app .pagination .page-link { background: var(--elara-surface); color: var(--elara-ink); border-color: var(--elara-line); }
.elara-app .pagination .active .page-link { background: #734253; border-color: #b5758b; }
@media (min-width: 768px) {
    .elara-app .main-wrapper > div:first-child { background: #160f17; }
    .elara-app .side-menu { position: sticky; top: 1.25rem; }
}
@media (max-width: 767px) {
    .elara-app .content-wrapper { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
    .elara-app .settings-content { min-height: auto !important; }
    .elara-app .settings-menu-wrapper { border-bottom: 1px solid var(--elara-line); padding-bottom: .5rem; }
    .elara-app .settings-nav.show { max-height: 65vh; overflow-y: auto; }
    .elara-app .elara-empty-state { margin: 1rem; padding: 2rem 1rem; }
    .elara-app .modal-dialog { margin-bottom: calc(1rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
    .elara-app *, .elara-app *::before, .elara-app *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* The base theme marks these utilities important; preserve contrast in both themes. */
.elara-app .neutral-bg { background-color: var(--elara-surface) !important; }
.elara-app .h-pill-primary:hover, .elara-app .h-pill-primary.active,
.elara-app .nav-link.active, .elara-app .text-primary { color: #ffdce7 !important; }
.elara-app .inline-border-tabs .nav-link.active { border-color: var(--elara-accent) !important; }
.elara-app .search-back-button { color: var(--elara-muted) !important; }

.elara-app .elara-feed-heading { gap: 1rem; padding: 1.5rem; border-bottom: 1px solid var(--elara-line); background: linear-gradient(120deg, #3b1d2c77, transparent); }
.elara-app .elara-eyebrow { color: var(--elara-accent); letter-spacing: .25em; font-size: .65rem; font-weight: 700; }
.elara-app .elara-feed-heading h1 { font-size: 1.6rem; margin: .35rem 0 0; letter-spacing: -.03em; }