/* ============================================================
   I AM STILL ALIVE — DARK MODE + QUICK-ACCESS SIDEBAR
   ------------------------------------------------------------
   Dark theme derived from the brand palette (THEME_GUIDE.md):
   deep navy surfaces (never flat grey), teal/sky accents kept,
   high contrast text, warm + hopeful — not a cold admin UI.
   Loaded after style.css. Toggled via html[data-theme="dark"]
   (JS also sets data-bs-theme="dark" so Bootstrap 5.3 follows).
   ============================================================ */

/* ------------------------------------------------------------
   1. DARK TOKENS
   ------------------------------------------------------------ */
html[data-theme="dark"] {
    color-scheme: dark;

    /* Surfaces — navy family, warm not grey */
    --iasa-bg:          #0A1430;            /* page base */
    --iasa-bg-2:        #0E1B3F;            /* raised section */
    --iasa-surface:     #13224A;            /* cards / panels */
    --iasa-surface-2:   #182A57;            /* hover / elevated */
    --iasa-border:      rgba(124, 190, 240, 0.16);

    /* Text — tuned for WCAG AA+ contrast on the navy base */
    --iasa-text:        #EAF1FF;            /* ~15:1 on bg */
    --iasa-muted:       #A9BAD9;            /* ~7:1 on bg  */
    --iasa-heading:     #F2F7FF;
    --iasa-link:        #7FD9F2;            /* bright cyan link */

    /* Re-point light-mode tokens that are used as colors-on-light */
    --iasa-footer-bg:   #0E1B3F;
    --iasa-shadow:      0 8px 24px rgba(2, 8, 24, 0.55);
    --iasa-shadow-soft: 0 2px 16px rgba(40, 186, 237, 0.10);

    /* Glass */
    --iasa-glass-bg:     rgba(13, 24, 54, 0.62);
    --iasa-glass-bg-2:   rgba(19, 34, 74, 0.55);
    --iasa-glass-border: rgba(127, 217, 242, 0.20);
    --iasa-glass-hilite: rgba(234, 241, 255, 0.06);
}

/* ------------------------------------------------------------
   1b. SUNSET TOKENS  (Auto mode, dawn/dusk windows)
   ------------------------------------------------------------
   Warm dusk palette — orange / pink / violet sky — but text and
   surfaces stay readable. Mirrors the dark token block so the
   shared component overrides below ("dark, sunset") just work.
   ------------------------------------------------------------ */
html[data-theme="sunset"] {
    color-scheme: dark;

    /* Surfaces — warm twilight plum/aubergine, never flat grey */
    --iasa-bg:          #2a1a3a;            /* page base (deep violet) */
    --iasa-bg-2:        #361f44;            /* raised section */
    --iasa-surface:     #43264f;            /* cards / panels */
    --iasa-surface-2:   #54305f;            /* hover / elevated */
    --iasa-border:      rgba(255, 198, 150, 0.20);

    /* Text — tuned for readable contrast on the warm base */
    --iasa-text:        #FFF1E6;            /* warm near-white */
    --iasa-muted:       #E7C3B6;            /* soft peach-grey */
    --iasa-heading:     #FFF7EF;
    --iasa-link:        #FFC08A;            /* warm amber link */

    --iasa-footer-bg:   #361f44;
    --iasa-shadow:      0 8px 24px rgba(24, 8, 30, 0.50);
    --iasa-shadow-soft: 0 2px 16px rgba(255, 150, 110, 0.12);

    /* Glass */
    --iasa-glass-bg:     rgba(58, 30, 64, 0.62);
    --iasa-glass-bg-2:   rgba(78, 42, 86, 0.55);
    --iasa-glass-border: rgba(255, 198, 150, 0.24);
    --iasa-glass-hilite: rgba(255, 241, 230, 0.07);
}

/* Light-mode glass tokens (sidebar / switcher reuse them) */
html[data-theme="light"], html:not([data-theme]) {
    --iasa-bg:          #ffffff;
    --iasa-heading:     var(--iasa-navy);
    --iasa-link:        var(--iasa-magenta);
    --iasa-border:      rgba(12, 32, 77, 0.12);
    --iasa-surface:     #ffffff;
    --iasa-surface-2:   #f4f8fc;
    --iasa-glass-bg:     rgba(255, 255, 255, 0.60);
    --iasa-glass-bg-2:   rgba(255, 255, 255, 0.45);
    --iasa-glass-border: rgba(12, 32, 77, 0.14);
    --iasa-glass-hilite: rgba(255, 255, 255, 0.65);
}

/* Smooth cross-fade when switching themes */
html.iasa-theme-anim body,
html.iasa-theme-anim body * {
    transition: background-color .35s ease, color .25s ease,
                border-color .35s ease, box-shadow .35s ease !important;
}

/* ------------------------------------------------------------
   2. DARK BASE — page, typography, common surfaces
   ------------------------------------------------------------ */
html[data-theme="dark"] body {
    background:
        radial-gradient(1200px 700px at 85% -10%, rgba(45, 134, 173, 0.28), transparent 60%),
        radial-gradient(900px 600px at -10% 110%, rgba(92, 44, 144, 0.18), transparent 55%),
        var(--iasa-bg) !important;
    color: var(--iasa-text);
}

html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .font-head {
    color: var(--iasa-heading);
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] label,
html[data-theme="dark"] span:not(.badge):not([class*="btn"]) {
    color: inherit;
}

html[data-theme="dark"] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.home_btns):not(.about_btns) {
    color: var(--iasa-link);
}
html[data-theme="dark"] a:not(.btn):hover { filter: brightness(1.12); }

/* Common light utilities flipped */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light          { background-color: var(--iasa-surface) !important; }
html[data-theme="dark"] .text-dark         { color: var(--iasa-text) !important; }
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary    { color: var(--iasa-muted) !important; }
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end        { border-color: var(--iasa-border) !important; }
html[data-theme="dark"] hr                 { border-color: var(--iasa-border); opacity: 1; }

/* Cards, modals, dropdowns, offcanvas, list groups */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button {
    background-color: var(--iasa-surface);
    color: var(--iasa-text);
    border-color: var(--iasa-border);
}
html[data-theme="dark"] .card { box-shadow: var(--iasa-shadow); }
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer { border-color: var(--iasa-border); background-color: transparent; }

html[data-theme="dark"] .dropdown-menu {
    background-color: var(--iasa-surface-2);
    border: 1px solid var(--iasa-border);
    box-shadow: var(--iasa-shadow);
}
html[data-theme="dark"] .dropdown-item { color: var(--iasa-text); }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: rgba(40, 186, 237, 0.14);
    color: #ffffff;
}

/* Forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]) {
    background-color: var(--iasa-bg-2);
    color: var(--iasa-text);
    border-color: var(--iasa-border);
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] input::placeholder { color: var(--iasa-muted); opacity: .85; }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--iasa-bg-2);
    color: var(--iasa-text);
    border-color: var(--iasa-sky);
    box-shadow: 0 0 0 .2rem rgba(40, 186, 237, 0.22);
}
html[data-theme="dark"] input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--iasa-bg-2) inset;
    -webkit-text-fill-color: var(--iasa-text);
}

/* Tables */
html[data-theme="dark"] .table {
    --bs-table-bg: var(--iasa-surface);
    --bs-table-color: var(--iasa-text);
    --bs-table-border-color: var(--iasa-border);
    --bs-table-striped-bg: rgba(40, 186, 237, 0.05);
    --bs-table-striped-color: var(--iasa-text);
    --bs-table-hover-bg: rgba(40, 186, 237, 0.10);
    --bs-table-hover-color: #ffffff;
    color: var(--iasa-text);
    border-color: var(--iasa-border);
}
html[data-theme="dark"] .table thead th { color: var(--iasa-heading); }

/* Pagination, badges, alerts, breadcrumbs */
html[data-theme="dark"] .page-link {
    background-color: var(--iasa-surface);
    border-color: var(--iasa-border);
    color: var(--iasa-link);
}
html[data-theme="dark"] .page-link:hover { background-color: var(--iasa-surface-2); }
html[data-theme="dark"] .alert {
    background-color: var(--iasa-surface-2);
    color: var(--iasa-text);
    border-color: var(--iasa-border);
}
html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-item a { color: var(--iasa-muted); }

/* Header / navbar / footer */
html[data-theme="dark"] .navbar .nav-link { color: var(--iasa-text); }
html[data-theme="dark"] .navbar-toggler { border-color: var(--iasa-border); }
html[data-theme="dark"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28234, 241, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer {
    background-color: var(--iasa-footer-bg) !important;
    color: var(--iasa-text);
}

/* Summernote / flatpickr / jQuery-UI / toastr surfaces */
html[data-theme="dark"] .note-editor,
html[data-theme="dark"] .note-editor .note-toolbar,
html[data-theme="dark"] .note-editor .note-editing-area .note-editable {
    background-color: var(--iasa-bg-2);
    color: var(--iasa-text);
    border-color: var(--iasa-border);
}
html[data-theme="dark"] .flatpickr-calendar {
    background: var(--iasa-surface-2);
    color: var(--iasa-text);
    box-shadow: var(--iasa-shadow);
}
html[data-theme="dark"] .flatpickr-day { color: var(--iasa-text); }
html[data-theme="dark"] .flatpickr-day.flatpickr-disabled { color: var(--iasa-muted); }
html[data-theme="dark"] .ui-widget-content {
    background: var(--iasa-surface-2);
    color: var(--iasa-text);
    border-color: var(--iasa-border);
}
html[data-theme="dark"] #toast-container > div { opacity: .98; box-shadow: var(--iasa-shadow); }

/* Soften pure-white imagery edges, keep photos natural */
html[data-theme="dark"] img { filter: none; }

/* Scrollbars (style.css already brands them; deepen track) */
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--iasa-bg-2); }

/* ------------------------------------------------------------
   2b. SUNSET COMPONENT OVERRIDES — reuse the dark rules via tokens
   ------------------------------------------------------------
   These mirror the dark component block above but are token-driven,
   so the warm SUNSET palette is applied to the same surfaces and is
   never left unreadable. (A later stage sweeps bespoke pages; this
   keeps the common Bootstrap/component layer correct for sunset.)
   The selector list is grouped so dark + sunset stay in lockstep.
   ------------------------------------------------------------ */
html[data-theme="sunset"] body {
    background:
        radial-gradient(1200px 700px at 85% -10%, rgba(255, 150, 95, 0.22), transparent 60%),
        radial-gradient(900px 600px at -10% 110%, rgba(140, 60, 130, 0.22), transparent 55%),
        var(--iasa-bg) !important;
    color: var(--iasa-text);
}
html[data-theme="sunset"] h1, html[data-theme="sunset"] h2,
html[data-theme="sunset"] h3, html[data-theme="sunset"] h4,
html[data-theme="sunset"] h5, html[data-theme="sunset"] h6,
html[data-theme="sunset"] .font-head { color: var(--iasa-heading); }

html[data-theme="sunset"] p,
html[data-theme="sunset"] li,
html[data-theme="sunset"] label,
html[data-theme="sunset"] span:not(.badge):not([class*="btn"]) { color: inherit; }

html[data-theme="sunset"] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.home_btns):not(.about_btns) { color: var(--iasa-link); }
html[data-theme="sunset"] a:not(.btn):hover { filter: brightness(1.12); }

html[data-theme="sunset"] .bg-white,
html[data-theme="sunset"] .bg-light          { background-color: var(--iasa-surface) !important; }
html[data-theme="sunset"] .text-dark         { color: var(--iasa-text) !important; }
html[data-theme="sunset"] .text-muted,
html[data-theme="sunset"] .text-secondary    { color: var(--iasa-muted) !important; }
html[data-theme="sunset"] .border,
html[data-theme="sunset"] .border-top,
html[data-theme="sunset"] .border-bottom,
html[data-theme="sunset"] .border-start,
html[data-theme="sunset"] .border-end        { border-color: var(--iasa-border) !important; }
html[data-theme="sunset"] hr                 { border-color: var(--iasa-border); opacity: 1; }

html[data-theme="sunset"] .card,
html[data-theme="sunset"] .modal-content,
html[data-theme="sunset"] .offcanvas,
html[data-theme="sunset"] .list-group-item,
html[data-theme="sunset"] .accordion-item,
html[data-theme="sunset"] .accordion-button {
    background-color: var(--iasa-surface);
    color: var(--iasa-text);
    border-color: var(--iasa-border);
}
html[data-theme="sunset"] .card { box-shadow: var(--iasa-shadow); }
html[data-theme="sunset"] .modal-header,
html[data-theme="sunset"] .modal-footer,
html[data-theme="sunset"] .card-header,
html[data-theme="sunset"] .card-footer { border-color: var(--iasa-border); background-color: transparent; }

html[data-theme="sunset"] .dropdown-menu {
    background-color: var(--iasa-surface-2);
    border: 1px solid var(--iasa-border);
    box-shadow: var(--iasa-shadow);
}
html[data-theme="sunset"] .dropdown-item { color: var(--iasa-text); }
html[data-theme="sunset"] .dropdown-item:hover,
html[data-theme="sunset"] .dropdown-item:focus {
    background-color: rgba(255, 170, 110, 0.16);
    color: #ffffff;
}

html[data-theme="sunset"] .form-control,
html[data-theme="sunset"] .form-select,
html[data-theme="sunset"] .input-group-text,
html[data-theme="sunset"] textarea,
html[data-theme="sunset"] select,
html[data-theme="sunset"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]) {
    background-color: var(--iasa-bg-2);
    color: var(--iasa-text);
    border-color: var(--iasa-border);
}
html[data-theme="sunset"] .form-control::placeholder,
html[data-theme="sunset"] textarea::placeholder,
html[data-theme="sunset"] input::placeholder { color: var(--iasa-muted); opacity: .85; }
html[data-theme="sunset"] .form-control:focus,
html[data-theme="sunset"] .form-select:focus {
    background-color: var(--iasa-bg-2);
    color: var(--iasa-text);
    border-color: var(--iasa-link);
    box-shadow: 0 0 0 .2rem rgba(255, 170, 110, 0.22);
}
html[data-theme="sunset"] input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--iasa-bg-2) inset;
    -webkit-text-fill-color: var(--iasa-text);
}

html[data-theme="sunset"] .table {
    --bs-table-bg: var(--iasa-surface);
    --bs-table-color: var(--iasa-text);
    --bs-table-border-color: var(--iasa-border);
    --bs-table-striped-bg: rgba(255, 170, 110, 0.06);
    --bs-table-striped-color: var(--iasa-text);
    --bs-table-hover-bg: rgba(255, 170, 110, 0.12);
    --bs-table-hover-color: #ffffff;
    color: var(--iasa-text);
    border-color: var(--iasa-border);
}
html[data-theme="sunset"] .table thead th { color: var(--iasa-heading); }

html[data-theme="sunset"] .page-link {
    background-color: var(--iasa-surface);
    border-color: var(--iasa-border);
    color: var(--iasa-link);
}
html[data-theme="sunset"] .page-link:hover { background-color: var(--iasa-surface-2); }
html[data-theme="sunset"] .alert {
    background-color: var(--iasa-surface-2);
    color: var(--iasa-text);
    border-color: var(--iasa-border);
}
html[data-theme="sunset"] .breadcrumb-item,
html[data-theme="sunset"] .breadcrumb-item a { color: var(--iasa-muted); }

html[data-theme="sunset"] .navbar .nav-link { color: var(--iasa-text); }
html[data-theme="sunset"] .navbar-toggler { border-color: var(--iasa-border); }
html[data-theme="sunset"] footer,
html[data-theme="sunset"] .footer {
    background-color: var(--iasa-footer-bg) !important;
    color: var(--iasa-text);
}

html[data-theme="sunset"] .note-editor,
html[data-theme="sunset"] .note-editor .note-toolbar,
html[data-theme="sunset"] .note-editor .note-editing-area .note-editable {
    background-color: var(--iasa-bg-2);
    color: var(--iasa-text);
    border-color: var(--iasa-border);
}
html[data-theme="sunset"] .flatpickr-calendar {
    background: var(--iasa-surface-2);
    color: var(--iasa-text);
    box-shadow: var(--iasa-shadow);
}
html[data-theme="sunset"] .flatpickr-day { color: var(--iasa-text); }
html[data-theme="sunset"] .ui-widget-content {
    background: var(--iasa-surface-2);
    color: var(--iasa-text);
    border-color: var(--iasa-border);
}
html[data-theme="sunset"] ::-webkit-scrollbar-track { background: var(--iasa-bg-2); }

/* ------------------------------------------------------------
   3. QUICK-ACCESS SIDEBAR — glassmorphism, hover-reveal
   ------------------------------------------------------------ */
.iasa-edge-hotzone {
    position: fixed;
    inset: 0 auto 0 0;
    width: 16px;
    z-index: 1059;
}

/* subtle handle so users discover the sidebar */
.iasa-edge-handle {
    position: fixed;
    left: 6px;
    top: 50%;
    translate: 0 -50%;
    width: 6px;
    height: 88px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--iasa-sky), var(--iasa-blue));
    opacity: .45;
    z-index: 1058;
    cursor: pointer;
    transition: opacity .25s ease, width .25s ease, left .25s ease;
}
.iasa-edge-handle:hover, .iasa-edge-handle:focus-visible { opacity: .9; width: 8px; }
body.iasa-sidebar-open .iasa-edge-handle { opacity: 0; pointer-events: none; }

.iasa-sidebar {
    position: fixed;
    top: 16px;
    bottom: 16px;
    left: 14px;
    width: 264px;
    display: flex;
    flex-direction: column;
    padding: 22px 14px 18px;
    border-radius: 24px;
    z-index: 1060;

    /* glassmorphism */
    background: linear-gradient(160deg, var(--iasa-glass-hilite), transparent 38%), var(--iasa-glass-bg);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid var(--iasa-glass-border);
    box-shadow: 0 18px 48px rgba(4, 12, 34, 0.38), inset 0 1px 0 var(--iasa-glass-hilite);

    transform: translateX(calc(-100% - 26px));
    visibility: hidden;
    transition: transform .42s cubic-bezier(.22, .9, .26, 1), visibility 0s linear .45s;
    will-change: transform;
}
body.iasa-sidebar-open .iasa-sidebar {
    transform: translateX(0);
    visibility: visible;
    transition: transform .42s cubic-bezier(.22, .9, .26, 1), visibility 0s;
}

.iasa-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 10px 16px;
    border-bottom: 1px solid var(--iasa-glass-border);
    margin-bottom: 14px;
}
.iasa-sidebar__brand img { height: 34px; width: auto; }
.iasa-sidebar__brand-name {
    font-family: var(--iasa-font-body);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.15;
    color: var(--iasa-heading);
}
.iasa-sidebar__brand-tag {
    display: block;
    font-family: var(--iasa-font-script);
    font-size: 11.5px;
    font-weight: 400;
    color: var(--iasa-muted);
}

.iasa-sidebar__nav { display: flex; flex-direction: column; gap: 6px; }

.iasa-sidebar__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 14px;
    font-family: var(--iasa-font-ui);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--iasa-text) !important;
    text-decoration: none !important;
    border: 1px solid transparent;
    transition: background-color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.iasa-sidebar__link i {
    width: 20px;
    text-align: center;
    font-size: 15px;
    color: var(--iasa-sky);
    transition: color .22s ease, transform .22s ease;
}
.iasa-sidebar__link:hover {
    background: var(--iasa-glass-bg-2);
    border-color: var(--iasa-glass-border);
    transform: translateX(3px);
}
.iasa-sidebar__link:hover i { transform: scale(1.12); }
.iasa-sidebar__link.is-active {
    background: var(--iasa-grad-pill);
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(0, 47, 159, 0.35);
}
.iasa-sidebar__link.is-active i { color: #ffffff; }

.iasa-sidebar__foot {
    margin-top: auto;
    padding: 12px 10px 0;
    border-top: 1px solid var(--iasa-glass-border);
    font-family: var(--iasa-font-script);
    font-size: 12.5px;
    color: var(--iasa-muted);
    text-align: center;
}

@media (max-width: 575.98px) {
    .iasa-sidebar { width: min(78vw, 264px); }
}
@media (prefers-reduced-motion: reduce) {
    .iasa-sidebar, .iasa-sidebar__link, .iasa-edge-handle { transition: none; }
    html.iasa-theme-anim body, html.iasa-theme-anim body * { transition: none !important; }
}

/* ------------------------------------------------------------
   4. FLOATING THEME SWITCHER — bottom right
   ------------------------------------------------------------ */
.iasa-theme-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1061;
    font-family: var(--iasa-font-ui);
}
.iasa-theme-fab__btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--iasa-glass-border);
    background: linear-gradient(160deg, var(--iasa-glass-hilite), transparent 45%), var(--iasa-glass-bg);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    color: var(--iasa-heading);
    font-size: 17px;
    box-shadow: 0 8px 22px rgba(4, 12, 34, 0.30);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.iasa-theme-fab__btn:hover { transform: scale(1.07); box-shadow: 0 10px 26px rgba(4, 12, 34, 0.40); }

.iasa-theme-fab__menu {
    position: absolute;
    right: 0;
    bottom: 56px;
    min-width: 196px;
    padding: 8px;
    border-radius: 16px;
    background: linear-gradient(160deg, var(--iasa-glass-hilite), transparent 40%), var(--iasa-glass-bg);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid var(--iasa-glass-border);
    box-shadow: 0 16px 40px rgba(4, 12, 34, 0.35);
    opacity: 0;
    translate: 0 8px;
    visibility: hidden;
    transition: opacity .22s ease, translate .22s ease, visibility 0s linear .25s;
}
.iasa-theme-fab.is-open .iasa-theme-fab__menu {
    opacity: 1;
    translate: 0 0;
    visibility: visible;
    transition: opacity .22s ease, translate .22s ease, visibility 0s;
}
.iasa-theme-fab__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--iasa-text);
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
    transition: background-color .18s ease;
}
.iasa-theme-fab__item i { width: 18px; text-align: center; color: var(--iasa-sky); }
.iasa-theme-fab__item:hover { background: rgba(40, 186, 237, 0.14); }
.iasa-theme-fab__item.is-active {
    background: var(--iasa-grad-pill);
    color: #fff;
}
.iasa-theme-fab__item.is-active i { color: #fff; }
.iasa-theme-fab__item .fa-check { margin-left: auto; font-size: 11px; opacity: 0; }
.iasa-theme-fab__item.is-active .fa-check { opacity: 1; }

/* ------------------------------------------------------------
   5. SETTINGS — "App appearance" card choices
   ------------------------------------------------------------ */
.iasa-appearance-grid { display: grid; gap: 10px; }
.iasa-appearance-opt {
    display: flex; align-items: flex-start; gap: 12px; width: 100%;
    text-align: left; cursor: pointer;
    padding: 13px 15px; border-radius: 14px;
    border: 1.5px solid #cdd7e1;
    background: rgba(255,255,255,0.82);
    transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease, background .18s ease;
}
.iasa-appearance-opt:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(12,32,77,.10); }
.iasa-appearance-opt .iasa-appearance-ico {
    flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center; font-size: 17px; color: #fff;
}
.iasa-appearance-opt[data-iasa-appearance="classic"] .iasa-appearance-ico { background: linear-gradient(140deg,#7ec8f5,#2f7ddb); }
.iasa-appearance-opt[data-iasa-appearance="dark"]    .iasa-appearance-ico { background: linear-gradient(140deg,#28406f,#0a1130); }
.iasa-appearance-opt[data-iasa-appearance="auto"]    .iasa-appearance-ico { background: linear-gradient(140deg,#f29368,#6a3a78); }
.iasa-appearance-opt .iasa-appearance-txt { flex: 1 1 auto; }
.iasa-appearance-opt .iasa-appearance-name { font-weight: 700; font-size: 14px; color: #0C204D; display: flex; align-items: center; gap: 8px; }
.iasa-appearance-opt .iasa-appearance-desc { font-size: 12.5px; color: #5f6c7b; margin-top: 2px; }
.iasa-appearance-opt .iasa-appearance-check { margin-left: auto; color: #2f7ddb; opacity: 0; font-size: 14px; }
.iasa-appearance-opt.is-active {
    border-color: #2f7ddb;
    box-shadow: 0 0 0 3px rgba(47,125,219,.14);
    background: rgba(231,242,255,0.9);
}
.iasa-appearance-opt.is-active .iasa-appearance-check { opacity: 1; }

/* token-driven so the card reads correctly in dark + sunset too */
html[data-theme="dark"] .iasa-appearance-opt,
html[data-theme="sunset"] .iasa-appearance-opt {
    background: var(--iasa-surface);
    border-color: var(--iasa-border);
}
html[data-theme="dark"] .iasa-appearance-opt .iasa-appearance-name,
html[data-theme="sunset"] .iasa-appearance-opt .iasa-appearance-name { color: var(--iasa-heading); }
html[data-theme="dark"] .iasa-appearance-opt .iasa-appearance-desc,
html[data-theme="sunset"] .iasa-appearance-opt .iasa-appearance-desc { color: var(--iasa-muted); }
html[data-theme="dark"] .iasa-appearance-opt.is-active,
html[data-theme="sunset"] .iasa-appearance-opt.is-active {
    background: var(--iasa-surface-2);
    border-color: var(--iasa-link);
    box-shadow: 0 0 0 3px var(--iasa-glass-border);
}
html[data-theme="dark"] .iasa-appearance-opt .iasa-appearance-check,
html[data-theme="sunset"] .iasa-appearance-opt .iasa-appearance-check { color: var(--iasa-link); }

/* IASA Dawn — warm sunrise/sunset chip in the App appearance card */
.iasa-appearance-opt[data-iasa-appearance="dawn"] .iasa-appearance-ico { background: linear-gradient(140deg,#ffd089,#f2768f); }

/* ------------------------------------------------------------
   6. LIQUID-GLASS TOGGLE SWITCH (reusable, any on/off control)
   Apple "Liquid Glass" inspired — a frosted translucent pill with a
   bright refraction edge + specular sheen, a glossy glass thumb, and a
   green liquid glow when ON. Markup:
     <label class="iasa-switch">
       <input type="checkbox" ...>
       <span class="iasa-switch__track"></span>
       <span class="iasa-switch__thumb"></span>
     </label>
   ------------------------------------------------------------ */
.iasa-switch { position: relative; display: inline-block; width: 54px; height: 32px; flex: 0 0 auto; vertical-align: middle; }
.iasa-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 3; }

/* the frosted glass pill */
.iasa-switch__track {
    position: absolute; inset: 0; border-radius: 999px; pointer-events: none; overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.45), rgba(190,200,215,.26)),
        rgba(150,162,180,.22);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow:
        inset 0 1px 1.5px rgba(255,255,255,.85),
        inset 0 -3px 7px rgba(40,60,90,.18),
        inset 0 0 8px rgba(255,255,255,.25),
        0 1px 2px rgba(20,30,50,.14);
    transition: background .32s ease, box-shadow .32s ease, border-color .32s ease;
}
/* specular sheen sweeping the top of the glass (refraction highlight) */
.iasa-switch__track::after {
    content: ""; position: absolute; left: 8%; right: 8%; top: 1.5px; height: 46%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,0));
    opacity: .9; pointer-events: none;
}
/* glossy glass thumb (orb) */
.iasa-switch__thumb {
    position: absolute; top: 2.5px; left: 2.5px; width: 27px; height: 27px; border-radius: 50%;
    pointer-events: none; z-index: 2;
    background:
        radial-gradient(120% 120% at 32% 26%, rgba(255,255,255,.98), rgba(255,255,255,.6) 38%, rgba(224,231,242,.86) 62%, rgba(204,213,228,.92) 100%);
    box-shadow:
        0 2px 6px rgba(20,30,50,.32),
        0 1px 2px rgba(20,30,50,.20),
        inset 0 1.5px 1px rgba(255,255,255,.95),
        inset 0 -2px 3px rgba(120,135,160,.30);
    transition: transform .34s cubic-bezier(.34,.12,.2,1), background .32s ease, box-shadow .32s ease;
}
/* ON — green liquid glass + outer glow */
.iasa-switch input:checked ~ .iasa-switch__track {
    background:
        linear-gradient(180deg, rgba(176,255,190,.55), rgba(52,199,89,.40)),
        rgba(52,199,89,.46);
    border-color: rgba(190,255,205,.78);
    box-shadow:
        inset 0 1px 1.5px rgba(255,255,255,.85),
        inset 0 -3px 8px rgba(0,90,30,.30),
        inset 0 0 10px rgba(180,255,200,.45),
        0 0 12px rgba(52,199,89,.45),
        0 1px 2px rgba(0,60,20,.20);
}
.iasa-switch input:checked ~ .iasa-switch__thumb {
    transform: translateX(22px);
    background:
        radial-gradient(120% 120% at 32% 26%, rgba(255,255,255,1), rgba(238,255,242,.72) 40%, rgba(214,245,222,.92) 100%);
    box-shadow:
        0 2px 7px rgba(0,70,25,.32),
        0 1px 2px rgba(0,70,25,.22),
        inset 0 1.5px 1px rgba(255,255,255,.98),
        inset 0 -2px 3px rgba(70,160,100,.30);
}
.iasa-switch input:focus-visible ~ .iasa-switch__track {
    box-shadow: 0 0 0 3px rgba(52,199,89,.40), inset 0 1px 1.5px rgba(255,255,255,.85);
}
.iasa-switch input:disabled { cursor: default; }
.iasa-switch input:disabled ~ .iasa-switch__track { opacity: .55; }

/* dark / sunset surfaces — deepen the OFF glass so the pill stays legible */
html[data-theme="dark"] .iasa-switch__track,
html[data-theme="sunset"] .iasa-switch__track {
    background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.06)), rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.30);
    box-shadow:
        inset 0 1px 1.5px rgba(255,255,255,.45),
        inset 0 -3px 7px rgba(0,0,0,.40),
        0 1px 2px rgba(0,0,0,.30);
}
html[data-theme="dark"] .iasa-switch input:checked ~ .iasa-switch__track,
html[data-theme="sunset"] .iasa-switch input:checked ~ .iasa-switch__track {
    background: linear-gradient(180deg, rgba(176,255,190,.45), rgba(52,199,89,.42)), rgba(52,199,89,.40);
    border-color: rgba(190,255,205,.55);
    box-shadow:
        inset 0 1px 1.5px rgba(255,255,255,.55),
        inset 0 0 10px rgba(150,255,180,.40),
        0 0 14px rgba(52,199,89,.50);
}

/* ------------------------------------------------------------
   7. THEME SWITCHER RELOCATED INTO THE HEADER (beside Home)
   ------------------------------------------------------------ */
.iasa-theme-fab--nav { position: relative; right: auto; bottom: auto; z-index: 1062; }
.iasa-theme-fab--nav .iasa-theme-fab__btn {
    width: 44px; height: 44px; border-radius: 14px; font-size: 16px;
    box-shadow: 0 6px 16px rgba(12,32,77,.16), inset 0 1px 0 rgba(255,255,255,.85);
}
.iasa-theme-fab--nav .iasa-theme-fab__btn:hover { transform: translateY(-2px); }
.iasa-theme-fab--nav .iasa-theme-fab__menu { right: 0; left: auto; top: calc(100% + 10px); bottom: auto; }

/* ------------------------------------------------------------
   8. NOTIFICATION BELL — "Pulse Beacon" backlight
   A red glow breathes behind the bell tile ONLY while there are
   unread alerts (.iasa-bell-unread, set server-side from NOTIF_UNREAD).
   No unread => no glow, perfectly calm.
   ------------------------------------------------------------ */
.iasa-bell-beacon { position: relative; z-index: 0; }
.iasa-bell-beacon.iasa-bell-unread::before {
    content: ""; position: absolute; inset: -12px; border-radius: 24px; z-index: -1; pointer-events: none;
    background: radial-gradient(circle, rgba(236,109,109,.68), rgba(236,109,109,0) 70%);
    filter: blur(6px);
    animation: iasaBellPulse 1.8s ease-in-out infinite;
}
@keyframes iasaBellPulse {
    0%, 100% { transform: scale(.82); opacity: .45; }
    50%      { transform: scale(1.18); opacity: 1; }
}
/* deeper, slightly stronger halo on dark / sunset skies */
html[data-theme="dark"] .iasa-bell-beacon.iasa-bell-unread::before,
html[data-theme="sunset"] .iasa-bell-beacon.iasa-bell-unread::before {
    background: radial-gradient(circle, rgba(255,120,120,.75), rgba(255,120,120,0) 70%);
}
@media (prefers-reduced-motion: reduce) {
    .iasa-bell-beacon.iasa-bell-unread::before { animation: none; opacity: .85; }
}