/* ===== Brand Colors ===== */
:root {
    --fli-brand: #2563eb;
    --fli-brand-light: #60a5fa;
    --fli-brand-dark: #1d4ed8;
    --fli-brand-gradient: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    --fli-success: #10b981;
    --fli-warning: #f59e0b;
    --fli-danger: #ef4444;
    --fli-info: #06b6d4;
}

/* ===== CSS Variables ===== */
:root, [data-bs-theme="light"] {
    --fli-sidebar-bg: #0f172a;
    --fli-sidebar-text: #94a3b8;
    --fli-sidebar-active: var(--fli-brand);
    --fli-sidebar-hover: rgba(255,255,255,0.06);
    --fli-sidebar-width: 260px;
    --fli-sidebar-collapsed-width: 68px;
    --fli-topbar-bg: #ffffff;
    --fli-topbar-border: #e2e8f0;
    --fli-body-bg: #f8fafc;
    --fli-card-bg: #ffffff;
    --fli-text: #0f172a;
    --fli-text-muted: #64748b;
    --fli-primary: var(--fli-brand);
    --fli-border: #e2e8f0;
    --fli-shadow: 0 1px 3px rgba(0,0,0,0.08);
    --fli-shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
}

[data-bs-theme="dark"] {
    --fli-sidebar-bg: #020617;
    --fli-sidebar-text: #94a3b8;
    --fli-sidebar-active: var(--fli-brand);
    --fli-sidebar-hover: rgba(255,255,255,0.06);
    --fli-topbar-bg: #0f172a;
    --fli-topbar-border: #1e293b;
    --fli-body-bg: #020617;
    --fli-card-bg: #0f172a;
    --fli-text: #e2e8f0;
    --fli-text-muted: #94a3b8;
    --fli-primary: var(--fli-brand-light);
    --fli-shadow: 0 1px 3px rgba(0,0,0,0.3);
    --fli-shadow-lg: 0 4px 12px rgba(0,0,0,0.4);
    --fli-border: #334155;
}

/* ===== Base ===== */
html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--fli-body-bg);
    color: var(--fli-text);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

a, .btn-link { color: var(--fli-primary); }

.btn-primary {
    background-color: var(--fli-primary);
    border-color: var(--fli-primary);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

/* ===== Layout ===== */
.fli-layout {
    display: flex;
    min-height: 100vh;
    /* Paint a sidebar-coloured vertical band the width of the sidebar onto the
       layout itself. .fli-sidebar is position: fixed and SHOULD cover this
       gutter, but on long pages a transform/filter/contain on a descendant can
       silently break the fixed positioning — at which point the sidebar's own
       background stops short and the body's off-white shows through. With this
       gradient the gutter is always the right colour, so the symptom can't
       surface even if a deep descendant ever introduces a containing-block. */
    background: linear-gradient(to right,
        var(--fli-sidebar-bg) 0,
        var(--fli-sidebar-bg) var(--fli-sidebar-width),
        transparent var(--fli-sidebar-width));
}

.sidebar-collapsed .fli-layout {
    background: linear-gradient(to right,
        var(--fli-sidebar-bg) 0,
        var(--fli-sidebar-bg) var(--fli-sidebar-collapsed-width),
        transparent var(--fli-sidebar-collapsed-width));
}

@media (max-width: 767.98px) {
    /* On mobile the sidebar is offscreen by default (translateX(-100%)) and the
       main content takes the full viewport width — no gutter to paint. */
    .fli-layout,
    .sidebar-collapsed .fli-layout {
        background: none;
    }
}

.fli-sidebar {
    width: var(--fli-sidebar-width);
    min-width: var(--fli-sidebar-width);
    background: var(--fli-sidebar-bg);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1040;
    transition: width 0.2s ease, min-width 0.2s ease;
    overflow: hidden;
}

.sidebar-collapsed .fli-sidebar {
    width: var(--fli-sidebar-collapsed-width);
    min-width: var(--fli-sidebar-collapsed-width);
}

.fli-main {
    flex: 1;
    margin-left: var(--fli-sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.2s ease;
}

.sidebar-collapsed .fli-main {
    margin-left: var(--fli-sidebar-collapsed-width);
}

/* ===== Sidebar Header ===== */
.fli-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    min-height: 60px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.fli-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    white-space: nowrap;
    overflow: hidden;
}

.fli-logo img, .fli-logo i { flex-shrink: 0; }

.sidebar-collapsed .fli-logo-text { display: none; }
.sidebar-collapsed .fli-logo img { display: none; }

.fli-sidebar-toggle {
    background: none;
    border: none;
    color: var(--fli-sidebar-text);
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.fli-sidebar-toggle:hover { color: #fff; background: var(--fli-sidebar-hover); }
.sidebar-collapsed .fli-sidebar-header { justify-content: center; }
.sidebar-collapsed .fli-sidebar-toggle { margin: 0; }

/* ===== Sidebar Body ===== */
.fli-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.fli-sidebar-body::-webkit-scrollbar { width: 4px; }
.fli-sidebar-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* ===== Sidebar Footer ===== */
.fli-sidebar-footer {
    padding: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.fli-theme-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    color: var(--fli-sidebar-text);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
}

.fli-theme-toggle:hover { background: var(--fli-sidebar-hover); color: #fff; }
.fli-theme-toggle i { font-size: 1.1rem; flex-shrink: 0; width: 20px; text-align: center; }
.fli-theme-toggle svg { flex-shrink: 0; width: 20px; text-align: center; }

/* ===== Dual Sidebar (Icon Rail + Panel) ===== */
.fli-dual-nav {
    display: flex;
    height: 100%;
    width: 100%;
}

/* Icon Rail */
.fli-rail {
    width: 56px;
    min-width: 56px;
    background: rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0;
    border-right: 1px solid rgba(255,255,255,0.06);
}

.fli-rail-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 0.75rem;
    border-radius: 10px;
    transition: background 0.15s;
}

.fli-rail-logo:hover { background: rgba(255,255,255,0.08); }
.fli-rail-logo img { width: 28px; height: 28px; }

.fli-rail-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    padding: 0 6px;
}

.fli-rail-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    padding: 0 6px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 0.5rem;
    margin-top: 0.5rem;
}

.fli-rail-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--fli-sidebar-text);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.15rem;
    transition: all 0.15s;
    position: relative;
}

.fli-rail-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.fli-rail-btn.active {
    background: rgba(99,102,241,0.15);
    color: #818cf8;
}
.fli-rail-btn.active::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: currentColor;
    border-radius: 0 2px 2px 0;
}

/* Per-section active colors matching feature page gradients */
.fli-rail-btn.active[data-section="links"]     { color: #2563eb; background: rgba(37,99,235,0.12); }
.fli-rail-btn.active[data-section="pages"]     { color: #10b981; background: rgba(16,185,129,0.12); }
.fli-rail-btn.active[data-section="contacts"]  { color: #ec4899; background: rgba(236,72,153,0.12); }
.fli-rail-btn.active[data-section="money"]     { color: #059669; background: rgba(5,150,105,0.12); }
.fli-rail-btn.active[data-section="organizer"] { color: #f59e0b; background: rgba(245,158,11,0.12); }
.fli-rail-btn.active[data-section="projects"]  { color: #06b6d4; background: rgba(6,182,212,0.12); }
.fli-rail-btn.active[data-section="support"]   { color: #2ec4b6; background: rgba(46,196,182,0.12); }
.fli-rail-btn.active[data-section="organize"]  { color: #6366f1; background: rgba(99,102,241,0.12); }
.fli-rail-btn.active[data-section="docs"]      { color: #7c3aed; background: rgba(124,58,237,0.12); }
.fli-rail-btn.active[data-section="admin"]     { color: #dc2626; background: rgba(220,38,38,0.12); }
}

/* Rail tooltips */
.fli-rail-btn[title]:hover::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: #1e293b;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    z-index: 1060;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    pointer-events: none;
}

/* Content Panel */
.fli-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.fli-panel-header {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.fli-panel-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.4);
}

.fli-panel-search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0.6rem;
    padding: 0.35rem 0.6rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    transition: border-color 0.2s;
}
.fli-panel-search:focus-within { border-color: rgba(99,102,241,0.5); }
.fli-panel-search i { color: rgba(255,255,255,0.3); font-size: 0.75rem; flex-shrink: 0; }
.fli-panel-search input { background: none; border: none; outline: none; color: #fff; font-size: 0.8rem; flex: 1; min-width: 0; }
.fli-panel-search input::placeholder { color: rgba(255,255,255,0.25); }
.fli-panel-search button { background: none; border: none; color: rgba(255,255,255,0.4); cursor: pointer; padding: 0; font-size: 0.7rem; }

.fli-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0.5rem;
}

.fli-panel-body::-webkit-scrollbar { width: 3px; }
.fli-panel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.fli-panel-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.65rem;
    color: var(--fli-sidebar-text);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.82rem;
    transition: all 0.12s;
    white-space: nowrap;
    overflow: hidden;
    margin: 1px 0;
}

.fli-panel-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.fli-panel-link.active {
    background: rgba(99,102,241,0.12);
    color: #fff;
    font-weight: 600;
    border-left: 2px solid #818cf8;
    padding-left: calc(0.65rem - 2px);
}
.fli-panel-link i { font-size: 0.95rem; flex-shrink: 0; width: 18px; text-align: center; }

.fli-panel-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 0.4rem 0.5rem;
}

/* Panel Footer — User */
.fli-panel-footer {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 0.5rem;
}

.fli-panel-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--fli-sidebar-text);
    transition: background 0.15s;
}

.fli-panel-user:hover { background: rgba(255,255,255,0.06); color: #fff; }

.fli-panel-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bs-primary);
}

.fli-panel-avatar-initials {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700; flex-shrink: 0;
}

.fli-panel-user-info { display: flex; flex-direction: column; min-width: 0; }
.fli-panel-user-name { font-size: 0.8rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fli-panel-user-role { font-size: 0.65rem; color: rgba(255,255,255,0.4); }

/* ===== Navigation Search (legacy — kept for compat) ===== */
.fli-nav-search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    transition: border-color 0.2s;
}

.fli-nav-search:focus-within {
    border-color: rgba(99,102,241,0.5);
}

.fli-nav-search i {
    color: rgba(255,255,255,0.3);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.fli-nav-search input {
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 0.8rem;
    flex: 1;
    min-width: 0;
}

.fli-nav-search input::placeholder { color: rgba(255,255,255,0.25); }

.fli-nav-search button {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    padding: 0;
    font-size: 0.75rem;
}

.fli-nav-search button:hover { color: #fff; }

.sidebar-collapsed .fli-nav-search { display: none; }

/* ===== Navigation ===== */
.fli-nav { padding: 0 0.5rem; }

.fli-nav-section {
    padding: 1rem 0.75rem 0.3rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.35);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: color .2s;
}
.fli-nav-section:hover { color: rgba(255,255,255,0.55); }
.fli-nav-section::after {
    content: '\25BE'; /* small down triangle */
    font-size: .7rem;
    transition: transform .2s;
}
.fli-nav-section.collapsed::after {
    transform: rotate(-90deg);
}
.fli-nav-section.collapsed + .fli-nav-group {
    display: none;
}

.sidebar-collapsed .fli-nav-section { text-align: center; padding: 0.8rem 0 0.2rem; cursor: default; }
.sidebar-collapsed .fli-nav-section .fli-nav-label { display: none; }
.sidebar-collapsed .fli-nav-section::after { content: '•'; color: rgba(255,255,255,0.2); transform: none; }

.fli-nav-group { margin-bottom: 0.25rem; transition: all .2s; }

.fli-nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    color: var(--fli-sidebar-text);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: all 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    margin: 1px 0;
}

.fli-nav-link:hover { background: var(--fli-sidebar-hover); color: #fff; }
.fli-nav-link.active {
    background: rgba(99,102,241,0.12);
    color: #fff !important;
    border-left: 3px solid var(--fli-brand, #6366f1);
    padding-left: calc(0.75rem - 3px);
    font-weight: 600;
}
.fli-nav-link i { font-size: 1.1rem; flex-shrink: 0; width: 20px; text-align: center; }
.fli-nav-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.sidebar-collapsed .fli-nav-link {
    justify-content: center;
    padding: 0.6rem;
    position: relative;
    border-left: none;
    padding-left: 0.6rem;
}
.sidebar-collapsed .fli-nav-label { display: none; }

/* Tooltips on hover in collapsed mode */
.sidebar-collapsed .fli-nav-link[title]:hover::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: #1e293b;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1060;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    pointer-events: none;
}

/* Logout button */
.fli-logout-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    background: none;
    border: none;
    color: var(--fli-sidebar-text);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
}

.fli-logout-btn:hover { color: #fff; }
.fli-logout-btn i { font-size: 1.1rem; flex-shrink: 0; width: 20px; text-align: center; }

/* ===== Topbar ===== */
.fli-topbar-search .input-group-text {
    background: #fff;
    color: #6b7280;
}
.fli-topbar-search .form-control {
    background: #fff;
}
[data-bs-theme="dark"] .fli-topbar-search .input-group-text {
    background: #1f2937;
    color: #9ca3af;
    border-color: #374151;
}
[data-bs-theme="dark"] .fli-topbar-search .form-control {
    background: #1f2937;
    color: #e5e7eb;
    border-color: #374151;
}
[data-bs-theme="dark"] .fli-topbar-search .form-control::placeholder { color: #6b7280; }

.fli-topbar {
    height: 60px;
    min-height: 60px;
    background: var(--fli-topbar-bg);
    border-bottom: 1px solid var(--fli-topbar-border);
    display: flex;
    align-items: center;
    /* Tight, even spacing between every action — replaces the per-button
       margin-right: .75rem the bell + drop components used to ship. */
    gap: .35rem;
    /* Right padding bumped to 2.5rem so the user-component chevron
       has visible breathing room from the viewport edge. The left
       padding stays at 1.5rem; the asymmetry is intentional — the
       quickbar on the left starts with icon buttons that have their
       own internal padding, so they don't need as much edge space. */
    padding: 0 2.5rem 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.fli-topbar-spacer { flex: 1; }

/* ===== Topbar action buttons — unified visual language ============
   Every interactive item to the right of the search input (Bug, Drop,
   Bell, Sage, avatar dropdown) renders at the same 34×34 footprint
   with the same ghost-hover treatment so they read as a single
   action cluster instead of a row of mismatched chips.

   Earlier revision used `display: inline-flex` on the wrappers + a
   `::before` pseudo-separator on the avatar component. That broke two
   things: (1) the pseudo became a *flex child* of `.fli-topbar-user`
   (because inline-flex made the wrapper a flex container) and pushed
   the avatar button right, which (2) shifted the dropdown's
   `position-absolute end-0` anchor past the viewport's right edge —
   so the dropdown got clipped. This revision drops both — wrappers
   are already flex items of `.fli-topbar` by virtue of its
   `display: flex`, no further flex declarations needed. */

/* NotificationBell + DropToast ship with inline `margin-right` on
   their wrapper divs that fights the new topbar gap. Clobber those
   inline margins so `gap: .35rem` is the single source of truth. */
.fli-topbar > .position-relative { margin: 0 !important; }

/* Bell + Drop both render as <button class="btn btn-link"> inside a
   `.position-relative` wrapper. Scope the ghost-circle treatment to
   that exact selector so dropdown panels (which reuse btn-link with
   their own padding/typography) keep their native styling. */
.fli-topbar > .position-relative > .btn-link {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    color: var(--fli-text-muted) !important;
    background: transparent;
    transition: background-color .15s, color .15s;
    padding: 0 !important;
    margin: 0 !important;
}
.fli-topbar > .position-relative > .btn-link:hover {
    background: var(--fli-bg-soft, rgba(99,102,241,.08));
    color: var(--fli-text) !important;
}
[data-bs-theme="dark"] .fli-topbar > .position-relative > .btn-link:hover {
    background: rgba(255,255,255,.06);
}
.fli-topbar > .position-relative > .btn-link > i { font-size: 1.1rem; line-height: 1; }

/* Bell + Drop badges (unread counts). Bootstrap's stock
   `top-0 start-100 translate-middle` puts the badge half-outside
   the button corner — too far from the icon when the button is
   34×34 with a 17px icon. Going the other way (top: 4px right: 4px)
   put the badge ON the bell. Splitting the difference: anchor at
   the button's exact top-right corner with a tiny 2px nudge inward
   so the badge sits just above-and-right of the bell's tip,
   visually attached without occluding the icon. */
.fli-topbar > .position-relative > .btn-link > .badge.position-absolute {
    top: 2px !important;
    right: 2px !important;
    left: auto !important;
    transform: none !important;
}

/* DropToast renders a "Set up device" inline label next to the
   paper-plane icon when the device is unnamed — that text label
   breaks the circular footprint. Hide it on the topbar; the rename
   prompt still appears prominently as a card at the top of the
   dropdown when the user clicks. The selector excludes
   `.position-absolute` (overlay) and `.badge` (count) spans so
   unread indicators stay visible. */
.fli-topbar > .position-relative > .btn-link > span:not(.position-absolute):not(.badge) {
    display: none;
}

/* Bug trigger — keeps its red pill identity (it's a deliberate admin
   signal) but height aligned to 34px to match the cluster. */
.fli-bug-trigger {
    height: 34px;
    padding: 0 14px !important;
    margin-right: 0 !important;
    border-radius: 999px !important;
    line-height: 1;
}

/* Sage button — already 34×34 in the library default. Round the
   shadow slightly so it doesn't feel "floaty" next to the flat ghost
   buttons around it. */
.fli-topbar .sage-widget-topbar-button {
    box-shadow: 0 2px 4px rgba(99,102,241,.25);
}
.fli-topbar .sage-widget-topbar-button:hover {
    box-shadow: 0 3px 8px rgba(99,102,241,.4);
}

/* The Sage library ships `margin: 0` on its `.sage-widget--topbar`
   wrapper. The Sage CSS loads *after* app.css in App.razor (line 21
   vs 15), so cascade order would normally let `margin: 0` win — but
   `!important` here beats the un-important Sage declaration. Bumped
   from .35rem → 1rem because the soft purple shadow on the Sage
   button + the avatar's hover pill were making them visually kiss
   even with a 5.6px gap. 16px is the smallest value where the two
   read as clearly separate at typical screen distances. */
.fli-topbar .sage-widget--topbar { margin-right: 1rem !important; }

/* User-component breathing room — bumped from .75rem to 1rem to
   match the Sage margin-right above. The component also sets
   `style="margin-left:1rem"` inline so the gap survives even if
   app.css fails to load (e.g. a stale service-worker cache during
   a deploy). */
.fli-topbar > .fli-topbar-user { margin-left: 1rem !important; }

/* Avatar trigger — natural-width button (image + name + chevron),
   NO hover background, NO focus ring around the image.
   Earlier revisions tried both:
     - hover ring on the <img> → conflicted with Sage's purple shadow
     - hover bg-pill on the whole button → its rounded-pill left edge
       sat right next to the avatar circle and read as a "third
       circle" between Sage and the avatar
   The cleanest answer is no decoration on the trigger at all. The
   chevron already signals "this opens something"; the name colour
   shifting on hover (via Bootstrap's btn-link default) is enough
   feedback. Strip Bootstrap's focus shadow specifically inside the
   topbar to kill the residual blue ring after a click. */
.fli-topbar .fli-topbar-user > button {
    border-radius: 0;
    padding: 0;
    background: transparent !important;
    box-shadow: none !important;
}
.fli-topbar .fli-topbar-user > button:focus,
.fli-topbar .fli-topbar-user > button:focus-visible {
    outline: none;
    box-shadow: none !important;
}
.fli-topbar .fli-topbar-user > button:hover .small {
    color: var(--bs-primary) !important;
}


.fli-mobile-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--fli-text);
    cursor: pointer;
    padding: 0.25rem;
}

/* ===== Content ===== */
.fli-content {
    flex: 1;
    padding: 1.5rem;
}

/* ===== Mobile Overlay ===== */
.fli-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1035;
}

/* ===== Mobile Responsive ===== */
@media (max-width: 767.98px) {
    /* Always use full sidebar width on mobile, even if collapsed on desktop */
    .fli-sidebar,
    .sidebar-collapsed .fli-sidebar {
        width: var(--fli-sidebar-width) !important;
        min-width: var(--fli-sidebar-width) !important;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .mobile-menu-open .fli-sidebar,
    .mobile-menu-open.sidebar-collapsed .fli-sidebar {
        transform: translateX(0);
    }

    .mobile-menu-open .fli-overlay {
        display: block;
    }

    .fli-main,
    .sidebar-collapsed .fli-main {
        margin-left: 0 !important;
    }

    .fli-content {
        padding: 1rem;
    }

    /* Ensure panel is visible inside the dual-nav on mobile */
    .fli-panel {
        display: flex !important;
    }

    /* Auto-close sidebar when a panel link is tapped */
    .fli-panel-link {
        /* handled via JS fliCloseMobile() on Blazor navigation */
    }

    /* Scrollable tabs on mobile — single row instead of wrapping */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ===== Cards ===== */
.card {
    border: 1px solid var(--fli-border);
    background: var(--fli-card-bg);
    box-shadow: var(--fli-shadow);
    border-radius: 0.5rem;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--fli-border);
}

/* ===== Brand Components ===== */
.btn-primary {
    background: var(--fli-brand);
    border-color: var(--fli-brand);
}

.btn-primary:hover {
    background: var(--fli-brand-dark);
    border-color: var(--fli-brand-dark);
}

.btn-outline-primary {
    color: var(--fli-brand);
    border-color: var(--fli-brand);
}

.btn-outline-primary:hover {
    background: var(--fli-brand);
    border-color: var(--fli-brand);
}

.badge.bg-primary { background: var(--fli-brand) !important; }
.badge.bg-success { background: var(--fli-success) !important; }
.badge.bg-warning { background: var(--fli-warning) !important; }
.badge.bg-danger { background: var(--fli-danger) !important; }
.badge.bg-info { background: var(--fli-info) !important; }

/* ===== Tables =====
   Branded (purple) thead is now opt-in via the `.fli-branded` class on
   the table — was previously universal on every .table > thead, but
   that fought any component (e.g. PSC.Blazor.Components.Projects
   tables) that wants its own header styling. The !important on the
   color was the load-bearing problem: even with higher-specificity
   component selectors, !important was always winning.

   Migration: any existing FastLinkIt page that wants the branded
   header should add `fli-branded` to its <table> tag — search for
   "<table" in the host project to audit. Tables without the class
   get Bootstrap's neutral defaults plus whatever the consuming
   component / page provides.
*/
.table {
    color: var(--fli-text);
}

.table.fli-branded > thead {
    background: var(--fli-brand);
    color: #fff;
}

.table.fli-branded > thead th {
    color: #fff;
    border: none;
    font-weight: 600;
}

/* .table-light is Bootstrap's built-in pale-gray header variant — we
   override it to the brand purple. Kept for backwards compatibility
   with any host page that added .table-light expecting the branded
   look; new tables should use .fli-branded above. */
.table-light {
    --bs-table-bg: var(--fli-brand);
    --bs-table-color: #fff;
    --bs-table-border-color: transparent;
}

/* Default header background for every other table on the platform.
   Bootstrap's transparent <thead> on a transparent body made the
   header row indistinguishable from the data rows — a complaint
   surfaced from contacts / dashboard / admin pages where columns
   like "NAME / EMAIL / STATUS" floated above the rows with no
   separator. The tertiary-bg token auto-adapts to dark mode so we
   don't need a separate [data-bs-theme="dark"] override. The
   :not(.fli-branded) guard preserves the existing purple-header
   opt-in. tbody:first-child guard avoids hitting tables that don't
   declare an explicit <thead> (a few legacy ones use only <tbody>). */
.table:not(.fli-branded) > thead {
    background: var(--fli-brand);
}

.table:not(.fli-branded) > thead > tr > th {
    /* Override --bs-table-bg explicitly — Bootstrap's per-cell
       `background-color: var(--bs-table-bg)` would otherwise mask
       the thead bg, especially under .table-striped where the
       inset box-shadow uses --bs-table-bg-state.
       Brand-blue background + white text picked deliberately to
       match the user-requested treatment in both light and dark
       modes — fli-brand is a fixed colour so it doesn't need a
       separate dark-mode override. Sort-arrow icons / hover states
       inherit the white from `color`. */
    --bs-table-bg: var(--fli-brand);
    background: var(--fli-brand);
    color: #fff;
    border-bottom: none;
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding-top: .65rem;
    padding-bottom: .65rem;
}

/* Links + sort arrows inside the new blue header inherit white. */
.table:not(.fli-branded) > thead > tr > th a,
.table:not(.fli-branded) > thead > tr > th .bi { color: #fff; }
.table:not(.fli-branded) > thead > tr > th a:hover { color: rgba(255, 255, 255, .85); }

/* Sticky-header tables (Projects detail, Inbox) keep the new bg
   while staying pinned. Without this they'd lose the bg when the
   sticky positioning takes over. */
.table:not(.fli-branded) > thead.psc-sticky > tr > th,
.table:not(.fli-branded) > thead > tr.psc-sticky > th {
    background: var(--fli-brand);
}

.table > tbody > tr {
    background: transparent;
    transition: background 0.15s ease;
}

.table-hover > tbody > tr:hover {
    --bs-table-hover-bg: transparent;
    background: rgba(37, 99, 235, 0.06) !important;
}

[data-bs-theme="dark"] .table-hover > tbody > tr:hover {
    background: rgba(96, 165, 250, 0.08) !important;
}

.table > tbody > tr > td {
    border-color: var(--fli-border);
}

/* ===== Forms ===== */
.form-control, .form-select {
    border-color: var(--fli-border);
    /* background-color (not the `background` shorthand!) so we don't wipe
       Bootstrap's background-image: data-URI used by .form-select for the
       dropdown chevron. The shorthand was the cause of the platform-wide
       missing-arrow-on-select bug — the chevron lives on background-image,
       and `background: <color>` resets every background-* sub-property. */
    background-color: var(--fli-card-bg);
    color: var(--fli-text);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Per-control padding kept separate from the shared rule above so
   .form-select preserves the right-side breathing room Bootstrap
   reserves for the chevron. A uniform `padding: .5rem .75rem` sat
   the chevron on top of the value (e.g. the "Rows per page: 50"
   pickers across the platform showed the value clipped under the
   arrow). The chevron lives at right:0 inside the control's own
   .75rem padding-right by default, so we need ~2rem of right pad
   on .form-select to keep the value clear. */
.form-control { padding: 0.5rem 0.75rem; }
.form-select { padding: 0.5rem 2rem 0.5rem 0.75rem; min-width: 5.5rem; }

.form-control:focus, .form-select:focus {
    border-color: var(--fli-brand);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.form-control-sm { padding: 0.35rem 0.6rem; font-size: 0.8rem; }
.form-select-sm  { padding: 0.35rem 1.75rem 0.35rem 0.6rem; font-size: 0.8rem; min-width: 4.5rem; }

.form-label {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--fli-text);
    margin-bottom: 0.35rem;
}

.form-text {
    font-size: 0.78rem;
    color: var(--fli-text-muted);
    margin-top: 0.3rem;
}

.form-floating > label {
    color: var(--fli-text-muted);
}

.input-group-text {
    background: var(--fli-body-bg);
    border-color: var(--fli-border);
    color: var(--fli-text-muted);
    font-size: 0.85rem;
}

textarea.form-control {
    min-height: 80px;
}

.form-check-input:checked {
    background-color: var(--fli-brand);
    border-color: var(--fli-brand);
}

/* ===== Buttons ===== */
.btn {
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 0.375rem;
    padding: 0.45rem 1rem;
    transition: all 0.15s ease;
}

.btn-sm {
    font-size: 0.78rem;
    padding: 0.3rem 0.7rem;
}

.btn-lg {
    font-size: 1rem;
    padding: 0.6rem 1.5rem;
}

/* ===== Page Title ===== */
h1 { font-size: 1.6rem; font-weight: 700; }
h2 { font-size: 1.35rem; font-weight: 600; }
h3 { font-size: 1.15rem; font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }
h5 { font-size: 0.95rem; font-weight: 600; }
h6 { font-size: 0.85rem; font-weight: 600; }
h1, h2, h3, h4, h5, h6 { color: var(--fli-text); }

/* ===== Alerts ===== */
.alert {
    border-radius: 0.5rem;
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
}

/* ===== Stat Cards ===== */
.fli-stat-card {
    text-align: center;
    padding: 1.25rem;
}

.fli-stat-card h2,
.card.text-center h2 {
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: 0.15rem;
    line-height: 1.2;
}

.fli-stat-card small {
    color: var(--fli-text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ===== Dashboard Section ===== */
.fli-section {
    margin-bottom: 1.75rem;
}

.fli-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fli-text-muted);
    margin-bottom: 0.75rem;
}

/* ===== Card Improvements ===== */
.card-header {
    padding: 0.75rem 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-header h5,
.card-header h6 {
    font-size: 0.9rem;
    margin: 0;
}

.card-body {
    padding: 1rem;
}

.card-footer {
    padding: 0.75rem 1rem;
    background: transparent;
    border-top: 1px solid var(--fli-border);
}

/* ===== Tables ===== */
.table {
    font-size: 0.85rem;
    margin-bottom: 0;
}

.table th {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fli-text-muted);
    padding: 0.6rem 0.75rem;
    white-space: nowrap;
}

.table td {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
}

.table-responsive {
    border-radius: 0 0 0.5rem 0.5rem;
}

/* ===== Horizontal scroll affordance =====
   Pure-CSS shadow hint on any .table-responsive wider than its container.
   Two solid "cover" gradients are attached `local` (they scroll WITH the
   content); two radial "shadow" gradients are attached `scroll` (pinned to
   the frame). At an edge the cover sits over the shadow and hides it; once
   you scroll the cover slides away and the shadow on that side is revealed.
   When the table fits, both covers hide both shadows — nothing shows. */
.table-responsive {
    background:
        linear-gradient(to right, var(--fli-card-bg) 22%, rgba(255, 255, 255, 0)) 0 0,
        linear-gradient(to left, var(--fli-card-bg) 22%, rgba(255, 255, 255, 0)) 100% 0,
        radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0)) 0 0,
        radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 48px 100%, 48px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll;
}

[data-bs-theme="dark"] .table-responsive {
    background:
        linear-gradient(to right, var(--fli-card-bg) 22%, rgba(15, 23, 42, 0)) 0 0,
        linear-gradient(to left, var(--fli-card-bg) 22%, rgba(15, 23, 42, 0)) 100% 0,
        radial-gradient(farthest-side at 0 50%, rgba(148, 163, 184, 0.28), rgba(148, 163, 184, 0)) 0 0,
        radial-gradient(farthest-side at 100% 50%, rgba(148, 163, 184, 0.28), rgba(148, 163, 184, 0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 48px 100%, 48px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* ===== Badges ===== */
.badge {
    font-weight: 500;
    font-size: 0.72rem;
    padding: 0.3em 0.6em;
    border-radius: 0.25rem;
}

/* ===== Brand Gradient Banner ===== */
.fli-brand-banner {
    background: var(--fli-brand-gradient);
    color: white;
    padding: 1.75rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
}

/* ===== Page Header ===== */
.fli-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fli-page-header h1 {
    font-size: 1.5rem;
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .fli-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .fli-page-header h1 {
        font-size: 1.3rem;
    }

    .fli-page-header .btn {
        font-size: .8rem;
        padding: .3rem .6rem;
    }
}

/* ===== Filter Bar ===== */
.card > .card-body > .row.g-3 {
    align-items: flex-start;
}

/* ===== Empty State ===== */
.fli-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--fli-text-muted);
}

.fli-empty h4 {
    color: var(--fli-text-muted);
    font-weight: 500;
}

/* ===== Pagination ===== */
.pagination {
    gap: 0.2rem;
}

.page-link {
    color: var(--fli-brand);
    border-color: var(--fli-border);
    background: var(--fli-card-bg);
    font-size: 0.85rem;
    padding: 0.35rem 0.7rem;
    border-radius: 0.3rem !important;
}

.page-item.active .page-link {
    background: var(--fli-brand);
    border-color: var(--fli-brand);
}

/* ===== Toast ===== */
.toast-container {
    z-index: 1100 !important;
}

/* ===== Blazor Error UI ===== */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after { content: "An error has occurred."; }

.darker-border-checkbox.form-check-input { border-color: #929292; }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===== Row Gaps ===== */
.row.mb-4 { margin-bottom: 1.25rem !important; }
.mb-4 { margin-bottom: 1.25rem !important; }
.mb-3 { margin-bottom: 0.85rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }

/* ===== Card Grid (stat cards) ===== */
.row > .col > .card.h-100,
.row > [class*="col-"] > .card.h-100,
.row.g-3 > [class*="col-"] > .card,
.row.g-4 > [class*="col-"] > .card {
    height: 100%;
}

/* ===== Action Button Group ===== */
.d-flex.gap-2 > .btn,
.d-flex.gap-3 > .btn,
.d-flex.gap-2 > a.btn,
.d-flex.gap-3 > a.btn {
    white-space: nowrap;
}

/* ===== Responsive Tables ===== */
@media (max-width: 767.98px) {
    .table th, .table td {
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    h1 { font-size: 1.35rem; }
    h2 { font-size: 1.15rem; }

    .d-flex.gap-2 {
        flex-wrap: wrap;
    }
}

/* ===== Smooth Transitions ===== */
.card, .btn, .form-control, .form-select, .badge, .alert {
    transition: all 0.15s ease;
}

/* ===== Link Styling ===== */
a {
    transition: color 0.15s ease;
}

/* ===== Validation ===== */
.validation-message {
    font-size: 0.78rem;
    margin-top: 0.25rem;
}

/* ===== Edit Form Sections ===== */
.card + .card {
    margin-top: 0;
}

/* ===== Account Manage Pages ===== */
.nav-pills .nav-link {
    font-size: 0.85rem;
    padding: 0.45rem 0.85rem;
    border-radius: 0.375rem;
    color: var(--fli-text);
}

.nav-pills .nav-link.active {
    background: var(--fli-brand);
}

/* Account nav as list-group inside card */
.card > .list-group-flush .list-group-item {
    background: var(--fli-card-bg);
    color: var(--fli-text);
    font-size: .875rem;
    padding: .6rem 1rem;
    border-color: var(--fli-border);
}

.card > .list-group-flush .list-group-item:hover {
    background: var(--bs-tertiary-bg);
}

.card > .list-group-flush .list-group-item.active {
    background: var(--fli-brand);
    color: #fff;
    border-color: var(--fli-brand);
}

.card > .list-group-flush .list-group-item i {
    width: 1.2rem;
    text-align: center;
    opacity: .7;
}

.card > .list-group-flush .list-group-item.active i {
    opacity: 1;
}

/* ===== Create Forms ===== */
.fli-form-page {
    max-width: 800px;
    margin: 0 auto;
}

.fli-form-page .card {
    margin-bottom: 1rem;
    overflow: hidden;
    height: auto;
}

.fli-form-page .card-header {
    padding: 0.65rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--fli-brand);
    color: #fff;
    border-bottom: none;
}

.fli-form-page .card-header h5 {
    color: #fff;
    margin: 0;
}

.fli-form-page .card-header i {
    color: rgba(255,255,255,0.8);
    font-size: 1rem;
}

.fli-form-page .card-body {
    padding: 1.25rem;
    background: var(--fli-card-bg);
}

.fli-form-page .card-body .row {
    --bs-gutter-x: 0.75rem;
}

.fli-form-actions {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.75rem;
    justify-content: center;
}

.fli-form-actions .btn {
    min-width: 120px;
}

/* ===== Dashboard Table ===== */
.fli-dashboard-table th {
    cursor: pointer;
    user-select: none;
}

.fli-dashboard-table th:hover {
    color: rgba(255,255,255,0.8) !important;
}

/* ===== Transparent Table (dark mode friendly) ===== */
.fli-table {
    --bs-table-bg: transparent;
}
.fli-table tbody tr {
    transition: background-color 0.15s;
}
.fli-table tbody tr:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
}

/* ===== Stats Cards ===== */
.fli-stats .card .card-body {
    background: transparent;
}

/* ===== Error Pages ===== */
.fli-error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60vh;
    padding: 2rem;
}

.fli-error-code {
    font-size: 8rem;
    font-weight: 800;
    line-height: 1;
    background: var(--fli-brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.fli-error-icon {
    font-size: 4rem;
    color: var(--fli-warning);
    margin-bottom: 1rem;
}

.fli-error-page h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.fli-error-message {
    font-size: 1rem;
    color: var(--fli-text-muted);
    max-width: 400px;
    margin-bottom: 1.5rem;
}

.fli-error-detail {
    font-size: 0.8rem;
    margin-bottom: 1.5rem;
}

.fli-error-actions {
    display: flex;
    gap: 0.75rem;
}

/* ===== Skeleton Loading ===== */
@keyframes fli-shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.fli-skeleton {
    background: linear-gradient(90deg, var(--fli-border) 25%, rgba(255,255,255,0.3) 50%, var(--fli-border) 75%);
    background-size: 800px 100%;
    animation: fli-shimmer 1.5s infinite ease-in-out;
    border-radius: 0.25rem;
    display: inline-block;
}

.fli-skeleton-text {
    height: 0.85rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

.fli-skeleton-text-sm {
    height: 0.7rem;
    width: 60%;
    margin-bottom: 0.4rem;
}

.fli-skeleton-circle {
    border-radius: 50%;
}

.fli-skeleton-card {
    padding: 1rem;
}

.fli-skeleton-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.fli-skeleton-row > * {
    flex: 1;
}

/* ===== Loading Container ===== */
.fli-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--fli-text-muted);
}

.fli-loading .spinner-border {
    color: var(--fli-brand);
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.75rem;
}

.fli-loading p {
    font-size: 0.85rem;
    margin: 0;
}

/* ===== Hover & Animation Effects ===== */
.card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
    box-shadow: var(--fli-shadow-lg);
}

/* Clickable cards (stat cards, link cards) */
a.card, .card[style*="cursor"] {
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

a.card:hover, .card[style*="cursor"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--fli-shadow-lg);
}

/* Badge hover */
.badge {
    transition: opacity 0.15s ease;
}

/* Button hover lift */
.btn-primary:hover, .btn-outline-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.btn-primary:active, .btn-outline-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Nav link animations */
.fli-nav-link {
    transition: all 0.15s ease, padding-left 0.15s ease;
}

.fli-nav-link:hover {
    padding-left: 1rem;
}

.sidebar-collapsed .fli-nav-link:hover {
    padding-left: 0.6rem;
}

/* Fade-in animation for content */
@keyframes fli-fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.fli-content > * {
    animation: fli-fadeIn 0.25s ease-out;
}

/* Toast slide-in */
@keyframes fli-slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast-container .toast {
    animation: fli-slideIn 0.3s ease-out;
}

/* Alert fade-in */
.alert {
    animation: fli-fadeIn 0.2s ease-out;
}

/* Table row fade */
.table tbody tr {
    animation: fli-fadeIn 0.15s ease-out;
}

/* Input focus grow */
.form-control:focus, .form-select:focus {
    transform: scale(1.005);
}

/* Stat card number pulse on load */
@keyframes fli-countUp {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.fli-stat-card h2,
.card.text-center h2 {
    animation: fli-countUp 0.4s ease-out;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 3px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
}

/* ===== Selection ===== */
::selection {
    background: rgba(37, 99, 235, 0.2);
}

/* ============================================================
   LANDING PAGE
   ============================================================ */

/* ===== Landing Layout ===== */
.fli-landing {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== Landing Nav ===== */
.fli-landing-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.fli-landing-nav-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fli-landing-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
}

.fli-landing-brand:hover { color: #fff; }

.fli-landing-nav-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fli-landing-nav-link {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.4rem 0.75rem;
    border-radius: 0.375rem;
    transition: color 0.15s;
}

.fli-landing-nav-link:hover { color: #fff; }

/* Nav dropdown */
.fli-nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.fli-nav-dropdown-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.fli-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    min-width: 240px;
    background: #1e293b;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.75rem;
    padding: 0.5rem 0;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
    transform: translateX(-50%) translateY(4px);
    z-index: 1000;
}

.fli-nav-dropdown:hover .fli-nav-dropdown-menu,
.fli-nav-dropdown:focus-within .fli-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.fli-nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1.25rem;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.fli-nav-dropdown-item:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

.fli-nav-dropdown-item i {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.fli-nav-dropdown-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 0.35rem 0.75rem;
}

.fli-nav-dropdown-label {
    display: block;
    padding: 0.4rem 1rem 0.15rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.3);
}

/* ===== Mobile hamburger button ===== */
.fli-mobile-menu-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    line-height: 1;
}

/* ===== Mobile menu backdrop ===== */
.fli-mobile-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1090;
}

.fli-mobile-menu-backdrop.open {
    display: block;
}

/* ===== Mobile slide-out menu ===== */
.fli-mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;
    background: #0f172a;
    z-index: 1100;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: -8px 0 30px rgba(0,0,0,0.5);
}

.fli-mobile-menu.open {
    transform: translateX(0);
}

@media (min-width: 992px) {
    .fli-mobile-menu,
    .fli-mobile-menu-backdrop { display: none !important; }
}

.fli-mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.fli-mobile-menu-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
}

.fli-mobile-menu-close:hover { color: #fff; }

.fli-mobile-menu-body {
    flex: 1;
    padding: 0.75rem 0;
    overflow-y: auto;
}

.fli-mobile-menu-section {
    color: rgba(255,255,255,0.4);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.25rem 0.25rem;
    margin: 0;
}

.fli-mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.6rem 1.25rem;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
}

.fli-mobile-menu-link:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}

.fli-mobile-menu-link i {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.6;
}

.fli-mobile-menu-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* ===== Shortcode Bar (all public pages) ===== */
.fli-shortcode-bar {
    position: fixed;
    top: 57px;
    left: 0;
    right: 0;
    z-index: 1040;
    background: rgba(249,250,251,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(99,102,241,0.15);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

[data-bs-theme="dark"] .fli-shortcode-bar {
    background: rgba(30,41,59,0.92);
    border-bottom-color: rgba(99,102,241,0.2);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.fli-shortcode-bar-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0.4rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    position: relative;
}

.fli-shortcode-bar-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #6366f1, transparent);
    opacity: 0.3;
}

[data-bs-theme="dark"] .fli-shortcode-bar-glow {
    opacity: 0.5;
}

.fli-shortcode-bar-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #4b5563;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

[data-bs-theme="dark"] .fli-shortcode-bar-label {
    color: rgba(255,255,255,0.7);
}

.fli-shortcode-bar-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #818cf8;
    box-shadow: 0 0 6px #818cf8;
    animation: fliPulse 2s ease-in-out infinite;
}

@keyframes fliPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

.fli-shortcode-bar-field {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    padding: 0.2rem 0.2rem 0.2rem 0.625rem;
    gap: 0.25rem;
    transition: border-color 0.25s, box-shadow 0.25s;
}

[data-bs-theme="dark"] .fli-shortcode-bar-field {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.25);
}

.fli-shortcode-bar-field:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}

.fli-shortcode-bar-icon {
    color: #6366f1;
    font-size: 0.9rem;
    line-height: 1;
    flex-shrink: 0;
}

.fli-shortcode-bar-prefix {
    font-size: 0.8rem;
    font-weight: 600;
    color: #9ca3af;
    white-space: nowrap;
    user-select: none;
}

[data-bs-theme="dark"] .fli-shortcode-bar-prefix {
    color: rgba(255,255,255,0.55);
}

.fli-shortcode-bar-input {
    background: none;
    border: none;
    outline: none;
    color: #111827;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 0;
    width: 7rem;
}

[data-bs-theme="dark"] .fli-shortcode-bar-input {
    color: #f1f5f9;
}

.fli-shortcode-bar-input::placeholder { color: #9ca3af; }

[data-bs-theme="dark"] .fli-shortcode-bar-input::placeholder { color: rgba(255,255,255,0.45); }

.fli-shortcode-bar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 0.8rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s, box-shadow 0.15s;
}

.fli-shortcode-bar-btn:hover:not(:disabled) {
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(99,102,241,0.4);
}

.fli-shortcode-bar-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.fli-shortcode-bar-status {
    font-size: 0.85rem;
    line-height: 1;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.fli-shortcode-bar-field.valid { border-color: #22c55e; }
.fli-shortcode-bar-field.invalid { border-color: #ef4444; }

@keyframes fliSpin { to { transform: rotate(360deg); } }
.fli-spin { display: inline-block; animation: fliSpin 0.8s linear infinite; }

/* Adjust main content to account for nav + bar */
.fli-landing-main { padding-top: 6rem; }

@media (max-width: 991.98px) {
    .fli-shortcode-bar-inner { padding: 0.35rem 1rem; gap: 0.5rem; }
    .fli-shortcode-bar-input { width: 5rem; }
    .fli-landing-main { padding-top: 2rem; }
    .fli-landing-main:has(> .fli-hero:first-child) { padding-top: 6rem; }
}

/* ===== Try a Short Link ===== */
.fli-try-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 3.5rem 1.5rem;
    position: relative;
    overflow: hidden;
}

.fli-try-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(99,102,241,0.12) 0%, transparent 60%);
    pointer-events: none;
}

.fli-try-card {
    display: flex;
    align-items: center;
    gap: 3rem;
    max-width: 960px;
    margin: 0 auto;
    position: relative;
}

.fli-try-left { flex: 1; color: #fff; }

.fli-try-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(99,102,241,0.15);
    border: 1px solid rgba(99,102,241,0.25);
    color: #a5b4fc;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    margin-bottom: 0.75rem;
}

.fli-try-title {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    /* Section background is a fixed dark gradient regardless of theme;
       Bootstrap's default --bs-heading-color is dark in light mode, which
       makes the h2 invisible against the navy backdrop. Lock it to white. */
    color: #fff;
}

.fli-try-desc {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.fli-try-stats {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.fli-try-stat {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}

.fli-try-stat i { color: #6366f1; font-size: 0.9rem; }

.fli-try-right { flex: 0 0 380px; }

.fli-try-input-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 1rem;
    overflow: hidden;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.fli-try-input-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.fli-try-dots { display: flex; gap: 5px; }
.fli-try-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
}
.fli-try-dots span:first-child { background: #ef4444; }
.fli-try-dots span:nth-child(2) { background: #f59e0b; }
.fli-try-dots span:last-child { background: #22c55e; }

.fli-try-input-url {
    flex: 1;
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    font-weight: 500;
}

.fli-try-input-body { padding: 1.25rem; }

.fli-try-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.fli-try-input-row {
    display: flex;
    align-items: center;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.625rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.2s;
}

.fli-try-input-row:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99,102,241,0.2);
}

.fli-try-prefix {
    color: rgba(255,255,255,0.35);
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    margin-right: 0.25rem;
    user-select: none;
}

.fli-try-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    min-width: 0;
}

.fli-try-input::placeholder { color: rgba(255,255,255,0.2); }

.fli-try-go-btn {
    width: 100%;
    padding: 0.625rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: none;
    border-radius: 0.625rem;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
}

.fli-try-go-btn:hover { opacity: 0.9; transform: translateY(-1px); }

.fli-try-hint {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
    text-align: center;
}

.fli-try-hint a { color: #818cf8; text-decoration: none; }
.fli-try-hint a:hover { text-decoration: underline; }

.fli-try-example {
    background: none;
    border: none;
    color: #818cf8;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .fli-try-card {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    .fli-try-right { flex: none; width: 100%; max-width: 380px; }
    .fli-try-stats { justify-content: center; }
    .fli-try-title { font-size: 1.4rem; }
}

/* ===== Hero ===== */
.fli-hero {
    margin-top: -6rem;
    padding: 9rem 1.5rem 5rem;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: background 0.6s ease;
    background: var(--fli-brand-gradient);
}

/* Per-feature hero gradients */
.fli-hero[data-theme="links"]    { background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%); }
.fli-hero[data-theme="qrcodes"]  { background: linear-gradient(135deg, #7209b7 0%, #3a0ca3 100%); }
.fli-hero[data-theme="pages"]    { background: linear-gradient(135deg, #f72585 0%, #b5179e 100%); }
.fli-hero[data-theme="contacts"] { background: linear-gradient(135deg, #06d6a0 0%, #0b8a6e 100%); }
.fli-hero[data-theme="mailing"]  { background: linear-gradient(135deg, #f77f00 0%, #d62828 100%); }
.fli-hero[data-theme="bookings"] { background: linear-gradient(135deg, #4cc9f0 0%, #4361ee 100%); }
.fli-hero[data-theme="payments"] { background: linear-gradient(135deg, #7209b7 0%, #560bad 100%); }
.fli-hero[data-theme="shops"]    { background: linear-gradient(135deg, #e63946 0%, #a4133c 100%); }
.fli-hero[data-theme="support"]  { background: linear-gradient(135deg, #2ec4b6 0%, #264653 100%); }
.fli-hero[data-theme="api"]      { background: linear-gradient(135deg, #495057 0%, #212529 100%); }

.fli-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(255,255,255,0.05) 0%, transparent 40%);
    pointer-events: none;
}

.fli-hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
}

.fli-hero-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1.25rem;
    color: #fff;
}

.fli-hero-subtitle {
    font-size: 1.15rem;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 2rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.fli-hero-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.fli-hero-actions .btn-lg {
    padding: 0.7rem 2rem;
    font-size: 1rem;
    font-weight: 600;
}

.fli-hero-actions .btn-outline-light {
    border-color: rgba(255,255,255,0.4);
    color: #fff;
}

.fli-hero-actions .btn-outline-light:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.6);
    color: #fff;
    transform: translateY(-1px);
}

.fli-hero-note {
    margin-top: 1.25rem;
    font-size: 0.82rem;
    opacity: 0.65;
}

/* Hero background illustration panels */
.fli-hero-bg-left,
.fli-hero-bg-right {
    position: absolute;
    top: 50%;
    width: 240px;
    height: 200px;
    max-width: 240px;
    max-height: 200px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.5s ease, transform 0.5s ease;
    contain: layout size;
}

.fli-hero-bg-left {
    left: 8%;
    transform: translateY(-50%) translateX(-100px) rotate(-8deg);
}

.fli-hero-bg-right {
    right: 8%;
    transform: translateY(-50%) translateX(100px) rotate(8deg);
}

.fli-hero-bg-left.visible {
    opacity: 0.5;
    transform: translateY(-50%) translateX(0) rotate(-6deg);
}

.fli-hero-bg-right.visible {
    opacity: 0.5;
    transform: translateY(-50%) translateX(0) rotate(6deg);
}

.fli-hero-bg-left svg,
.fli-hero-bg-right svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 8px 30px rgba(0,0,0,0.15));
}

/* Hero learn-more link */
.fli-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255,255,255,0.85);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
    transition: opacity 0.3s ease, color 0.2s ease;
}

.fli-hero-link:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fli-hero-link .bi-arrow-right {
    transition: transform 0.2s ease;
}

.fli-hero-link:hover .bi-arrow-right {
    transform: translateX(3px);
}

/* Animated hero rotating text */
.fli-hero-rotate-wrap {
    display: inline-block;
    position: relative;
    min-width: 280px;
    text-align: left;
}

.fli-hero-rotate {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    padding: 0 0.35em;
    border-radius: 0.15em;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hero subtitle fade transition */
.fli-hero-subtitle {
    transition: opacity 0.3s ease;
}

/* Feature pills */
.fli-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.fli-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;
}

.fli-hero-pill:hover {
    color: #fff;
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-1px);
}

.fli-hero-pill.active {
    color: #fff;
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.45);
    box-shadow: 0 0 12px rgba(255,255,255,0.1);
}

/* ===== Landing Sections ===== */
/* Links in hero/gradient sections should inherit white text color */
header[style*="color:#fff"] a:not(.btn),
header[style*="color: #fff"] a:not(.btn),
section[style*="color:#fff"] a:not(.btn),
section[style*="color: #fff"] a:not(.btn) {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    opacity: 0.95;
}

header[style*="color:#fff"] a:not(.btn):hover,
header[style*="color: #fff"] a:not(.btn):hover,
section[style*="color:#fff"] a:not(.btn):hover,
section[style*="color: #fff"] a:not(.btn):hover {
    opacity: 1;
}

.fli-landing-section {
    padding: 5rem 1.5rem;
}

.fli-landing-section--alt {
    background: var(--fli-body-bg);
}

.fli-landing-container {
    max-width: 1100px;
    margin: 0 auto;
}

.fli-section-heading {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.fli-section-subheading {
    font-size: 1.05rem;
    color: var(--fli-text-muted);
}

/* ===== Feature Cards ===== */
.fli-feature-card {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--fli-card-bg);
    border: 1px solid var(--fli-border);
    border-radius: 0.75rem;
    height: 100%;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fli-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fli-shadow-lg);
}

.fli-feature-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--fli-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 1.25rem;
}

.fli-feature-icon--qr {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.fli-feature-icon--page {
    background: rgba(16, 185, 129, 0.1);
    color: var(--fli-success);
}

.fli-feature-icon--planner {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.fli-feature-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.fli-feature-card p {
    color: var(--fli-text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}

/* ===== Detail Sections ===== */
.fli-detail-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--fli-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.fli-detail-icon--analytics {
    background: rgba(245, 158, 11, 0.1);
    color: var(--fli-warning);
}

.fli-detail-icon--qr {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.fli-detail-lead {
    font-size: 1.05rem;
    color: var(--fli-text-muted);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

/* ===== Check List ===== */
.fli-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fli-check-list li {
    /* `position: relative` + absolute icon (NOT flex) so inline body
       content — text, <strong>, <code> — flows as one paragraph. With
       `display: flex`, every text node between inline elements became
       its own flex item, breaking <code>-heavy bullets like the ones on
       /features/email-mailing into a narrow vertical column. */
    position: relative;
    padding: 0.45rem 0 0.45rem 1.6rem;
    font-size: 0.92rem;
    line-height: 1.5;
}

.fli-check-list i {
    color: var(--fli-success);
    font-size: 1rem;
    position: absolute;
    left: 0;
    /* Optical centre of the bi-check-circle aligns with the first line
       of text at this offset given the 0.45rem top padding above. */
    top: 0.65rem;
}

/* Keep bold labels together — never break a label like "Source tags"
   into "Source / tags". The em-dash + description after the strong still
   wraps naturally on the next line if needed. */
.fli-check-list li strong {
    white-space: nowrap;
}

/* ===== Scenario cards (Worked examples sections on feature pages) =====
   Each card shows one Goal → Steps → Result walkthrough. Vertical
   structure matches the user's reading flow; the colored icon at the
   top is purely decorative — color choice follows the platform's
   feature-page accent vocabulary (links/contacts/mailing/etc.). */
.fli-scenario-card {
    background: var(--fli-card-bg);
    border: 1px solid var(--fli-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: var(--fli-shadow-md);
    display: flex;
    flex-direction: column;
}

.fli-scenario-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.fli-scenario-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.35;
}

.fli-scenario-section {
    margin-bottom: 0.875rem;
}

.fli-scenario-section:last-child {
    margin-bottom: 0;
}

.fli-scenario-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fli-text-muted);
    background: var(--fli-body-bg);
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    margin-bottom: 0.4rem;
}

.fli-scenario-label--result {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
}

.fli-scenario-section p {
    margin-bottom: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--fli-text);
}

.fli-scenario-section ol {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.92rem;
    line-height: 1.55;
}

.fli-scenario-section ol li {
    margin-bottom: 0.4rem;
}

.fli-scenario-section ol li:last-child {
    margin-bottom: 0;
}

.fli-scenario-section code {
    font-size: 0.85em;
    background: var(--fli-body-bg);
    padding: 0.1em 0.35em;
    border-radius: 0.25rem;
    color: var(--fli-text);
}

/* ===== Mock Visuals ===== */
.fli-detail-visual {
    display: flex;
    justify-content: center;
}

/* Link shortener mock */
.fli-mock-card {
    background: var(--fli-card-bg);
    border: 1px solid var(--fli-border);
    border-radius: 0.75rem;
    padding: 1.5rem 2rem;
    width: 100%;
    max-width: 380px;
    box-shadow: var(--fli-shadow-lg);
}

.fli-mock-url {
    margin-bottom: 0.5rem;
}

.fli-mock-url-long {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--fli-text-muted);
    background: var(--fli-body-bg);
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.25rem;
}

.fli-mock-arrow {
    text-align: center;
    font-size: 1.5rem;
    color: var(--fli-brand);
    padding: 0.5rem 0;
}

.fli-mock-url-short {
    font-family: monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--fli-brand);
    background: rgba(37, 99, 235, 0.08);
    padding: 0.6rem 0.75rem;
    border-radius: 0.375rem;
    margin-top: 0.25rem;
}

/* Stats mock */
.fli-mock-stats {
    background: var(--fli-card-bg);
    border: 1px solid var(--fli-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    width: 100%;
    max-width: 380px;
    box-shadow: var(--fli-shadow-lg);
}

.fli-mock-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--fli-border);
}

.fli-mock-stat:last-of-type { border-bottom: none; }

.fli-mock-stat-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fli-brand);
}

.fli-mock-stat-label {
    font-size: 0.82rem;
    color: var(--fli-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fli-mock-bars {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.fli-mock-bar {
    height: 28px;
    background: rgba(37, 99, 235, 0.12);
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding-left: 0.6rem;
    transition: width 0.8s ease;
}

.fli-mock-bar span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fli-brand);
}

/* Bio page mock */
.fli-mock-bio {
    background: var(--fli-card-bg);
    border: 1px solid var(--fli-border);
    border-radius: 0.75rem;
    padding: 2rem 1.5rem;
    width: 100%;
    max-width: 300px;
    box-shadow: var(--fli-shadow-lg);
    text-align: center;
}

.fli-mock-bio-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--fli-brand-gradient);
    margin: 0 auto 0.75rem;
}

.fli-mock-bio-name {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.fli-mock-bio-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    margin-bottom: 0.5rem;
    background: rgba(37, 99, 235, 0.08);
    border-radius: 0.5rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--fli-brand);
}

/* Planner mock */
.fli-mock-planner {
    background: var(--fli-card-bg);
    border: 1px solid var(--fli-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--fli-shadow-lg);
}

.fli-mock-planner-header {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.25rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--fli-text-muted);
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--fli-border);
}

.fli-mock-planner-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0.35rem;
    min-height: 120px;
    margin-bottom: 0.75rem;
}

.fli-mock-slot {
    background: rgba(37, 99, 235, 0.1);
    border-left: 3px solid var(--fli-brand);
    border-radius: 0.35rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--fli-brand);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fli-mock-slot--alt {
    background: rgba(245, 158, 11, 0.1);
    border-left-color: #f59e0b;
    color: #d97706;
}

.fli-mock-planner-link {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fli-brand);
    padding: 0.5rem;
    background: rgba(37, 99, 235, 0.05);
    border-radius: 0.5rem;
}

.fli-detail-icon--planner {
    color: #f59e0b;
}

/* Contacts feature */
.fli-feature-icon--contacts {
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
}

.fli-detail-icon--contacts {
    color: #ec4899;
}

.fli-mock-contacts {
    background: var(--fli-card-bg);
    border: 1px solid var(--fli-border);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: var(--fli-shadow-lg);
}

.fli-mock-contact-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--fli-border);
}

.fli-mock-contact-row:last-child {
    border-bottom: none;
}

.fli-mock-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.fli-mock-contact-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Mailing feature */
.fli-feature-icon--mailing {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}

.fli-detail-icon--mailing {
    color: #0ea5e9;
}

.fli-mock-mailing {
    background: var(--fli-card-bg);
    border: 1px solid var(--fli-border);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: var(--fli-shadow-lg);
}

.fli-mock-mailing-header {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #fff;
    padding: 0.875rem 1.25rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.fli-mock-mailing-field {
    padding: 0.625rem 1.25rem;
    border-bottom: 1px solid var(--fli-border);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fli-mock-mailing-body {
    padding: 1rem 1.25rem;
    font-size: 0.85rem;
    min-height: 60px;
    border-bottom: 1px solid var(--fli-border);
}

.fli-mock-mailing-footer {
    padding: 0.75rem 1.25rem;
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    background: rgba(0, 0, 0, 0.02);
}

.fli-mock-mailing-stat {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Organizer feature */
.fli-feature-icon--organizer {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.fli-feature-icon--payments {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
}

.fli-feature-icon--tickets {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.fli-feature-icon--integrations {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.fli-feature-icon--fundraising {
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
}

.fli-feature-icon--drop {
    background: rgba(6, 182, 212, 0.1);
    color: #06b6d4;
}

.fli-feature-icon--embed {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.fli-detail-icon--fundraising {
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
}

.fli-detail-icon--organizer {
    color: #a855f7;
}

.fli-detail-icon--payments {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
}

.fli-detail-icon--tickets {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.fli-detail-icon--integrations {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.fli-detail-icon--stripe {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.fli-detail-icon--wordpress {
    background: rgba(33, 117, 155, 0.1);
    color: #21759b;
}

.fli-detail-icon--joomla {
    background: rgba(244, 67, 33, 0.1);
    color: #f44321;
}

.fli-detail-icon--drupal {
    background: rgba(6, 120, 190, 0.1);
    color: #0678be;
}

.fli-detail-icon--ghost {
    background: rgba(21, 23, 26, 0.1);
    color: #15171a;
}

.fli-detail-icon--shopify {
    background: rgba(150, 191, 72, 0.1);
    color: #7ab55c;
}

.fli-detail-icon--wix {
    background: rgba(12, 110, 252, 0.1);
    color: #0c6efc;
}

.fli-mock-organizer {
    background: var(--fli-card-bg);
    border: 1px solid var(--fli-border);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: var(--fli-shadow-lg);
}

.fli-mock-organizer-header {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #fff;
    padding: 0.875rem 1.25rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.fli-mock-organizer-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-bottom: 1px solid var(--fli-border);
}

.fli-mock-org-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0.5rem;
    border-right: 1px solid var(--fli-border);
}

.fli-mock-org-stat:last-child {
    border-right: none;
}

.fli-mock-org-stat-num {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.fli-mock-org-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fli-text-muted);
    margin-top: 0.25rem;
}

.fli-mock-organizer-list {
    padding: 0;
}

.fli-mock-booking-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--fli-border);
    font-size: 0.85rem;
}

.fli-mock-booking-row:last-child {
    border-bottom: none;
}

.fli-mock-booking-row .text-muted {
    margin-left: auto;
}

/* Feature page FAQ */
.fli-faq details {
    border: 1px solid var(--fli-border);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    transition: background 0.15s;
}

.fli-faq details[open] {
    background: rgba(37, 99, 235, 0.03);
}

.fli-faq summary {
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.fli-faq summary::-webkit-details-marker {
    display: none;
}

.fli-faq summary::before {
    content: "\F282";
    font-family: "bootstrap-icons";
    margin-right: 0.5rem;
    font-size: 0.75rem;
    transition: transform 0.2s;
    display: inline-block;
}

.fli-faq details[open] summary::before {
    transform: rotate(90deg);
}

.fli-faq details p {
    margin: 0.75rem 0 0;
    color: var(--fli-text-muted);
    line-height: 1.7;
}

/* Feature page hero shared */
.fli-feature-hero {
    padding: 7rem 1.5rem 4rem;
    text-align: center;
    color: #fff;
}

.fli-feature-hero h1 {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 1rem;
}

.fli-feature-hero p {
    font-size: 1.15rem;
    opacity: 0.9;
    max-width: 640px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .fli-feature-hero h1 { font-size: 1.75rem; }
    .fli-feature-hero p { font-size: 1rem; }
}

/* ===== Directory ===== */
.fli-directory-hero {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
    padding: 2.5rem 1.5rem 2rem;
    text-align: center;
    color: #fff;
}

.fli-directory-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.fli-directory-subtitle {
    font-size: 1rem;
    opacity: 0.7;
}

.fli-directory-card {
    transition: transform 0.15s, box-shadow 0.15s;
    color: inherit;
}

.fli-directory-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.fli-directory-avatar img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.fli-directory-initial {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--fli-brand-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ===== Directory Badges ===== */
.fli-dir-badge {
    display: inline-flex;
    align-items: center;
    font-size: .75rem;
    font-weight: 600;
    padding: 0.2em 0.55em;
    border-radius: 0.25rem;
    line-height: 1.4;
}

.fli-dir-badge-category {
    background: #4338ca;
    color: #fff;
}

.fli-dir-badge-location {
    background: #0f766e;
    color: #fff;
}

.fli-dir-badge-warning {
    background: #b45309;
    color: #fff;
    font-size: .7rem;
}

/* ===== Directory Detail Panel ===== */
.fli-dir-detail-toggle {
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.fli-dir-detail-toggle:hover {
    color: var(--bs-primary);
}

.fli-dir-details {
    border-top: 1px solid var(--bs-border-color);
    padding: 0.75rem 1rem;
    font-size: .85rem;
}

.fli-dir-detail-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.15rem 0;
}

.fli-dir-detail-row i {
    color: var(--bs-secondary-color);
    width: 1rem;
    flex-shrink: 0;
    text-align: center;
}

.fli-dir-detail-row a {
    color: var(--bs-link-color);
    text-decoration: none;
    word-break: break-all;
}

.fli-dir-detail-row a:hover {
    text-decoration: underline;
}

.fli-dir-detail-hours {
    border-top: 1px dashed var(--bs-border-color);
    padding-top: 0.5rem;
}

.fli-dir-detail-map {
    width: 100%;
    height: 180px;
    border-radius: 0.375rem;
    border: 1px solid var(--bs-border-color);
}

/* ===== Directory Categories ===== */
.fli-dir-categories {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fli-dir-cat-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fli-text-muted);
    padding: 0 0.5rem 0.5rem;
    margin: 0;
}

.fli-dir-cat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--fli-text);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
}

.fli-dir-cat-item:hover {
    background: var(--fli-hover-bg, rgba(37,99,235,0.06));
}

[data-bs-theme="dark"] .fli-dir-cat-item:hover {
    background: rgba(96,165,250,0.08);
}

.fli-dir-cat-item.active {
    background: var(--fli-brand);
    color: #fff;
}

.fli-dir-cat-item.active .fli-dir-cat-count {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.fli-dir-cat-item.active .fli-dir-cat-icon {
    color: #fff;
}

.fli-dir-cat-child {
    padding-left: 1.75rem;
    font-size: 0.8rem;
}

.fli-dir-cat-icon {
    width: 1.25rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--fli-text-muted);
    flex-shrink: 0;
}

.fli-dir-cat-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fli-dir-cat-count {
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--bs-tertiary-bg);
    color: var(--fli-text-muted);
    padding: 0.1rem 0.5rem;
    border-radius: 1rem;
    flex-shrink: 0;
}

.fli-dir-cat-more {
    color: var(--fli-text-muted);
    font-size: 0.8rem;
}

.fli-dir-cat-more:hover {
    color: var(--fli-text);
}

/* ===== CTA Section ===== */
.fli-landing-cta {
    background: var(--fli-brand-gradient);
    color: #fff;
    padding: 5rem 1.5rem;
}

.fli-landing-cta h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #fff;
}

.fli-landing-cta p {
    font-size: 1.05rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* ===== Landing Footer ===== */
.fli-landing-footer {
    background: #0f172a;
    color: rgba(255,255,255,0.6);
    padding: 2rem 1.5rem;
}

.fli-landing-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.fli-landing-footer-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}

.fli-landing-footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    width: 100%;
}

.fli-landing-footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fli-landing-footer-col h6 {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fli-landing-footer-col a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.15s;
}

.fli-landing-footer-col a:hover { color: #fff; }

.fli-landing-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.fli-landing-footer-links a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.15s;
}

.fli-landing-footer-links a:hover { color: #fff; }

.fli-landing-footer-social {
    display: flex;
    gap: 16px;
    justify-content: center;
    width: 100%;
    margin-bottom: 16px;
}
.fli-landing-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: #94a3b8;
    transition: all .2s;
}
.fli-landing-footer-social a:hover {
    background: rgba(255,255,255,.2);
    color: #fff;
}

.fli-landing-footer-copy {
    width: 100%;
    text-align: center;
    font-size: 0.78rem;
    margin: 0.75rem 0 0;
    opacity: 0.5;
}

/* ===== Landing Responsive ===== */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .fli-hero-bg-left,
    .fli-hero-bg-right {
        width: 170px;
        height: 140px;
    }

    .fli-hero-bg-left { left: 2%; }
    .fli-hero-bg-right { right: 2%; }
}
@media (max-width: 991.98px) {
    .fli-hero {
        padding: 7.5rem 1rem 3.5rem;
    }

    .fli-hero-title {
        font-size: 2rem;
    }

    .fli-hero-subtitle {
        font-size: 1rem;
    }

    .fli-hero-bg-left,
    .fli-hero-bg-right {
        display: none;
    }

    .fli-hero-link {
        justify-content: center;
    }

    .fli-hero-rotate-wrap {
        min-width: 0;
        display: block;
        text-align: center;
    }

    .fli-hero-pills {
        gap: 0.35rem;
    }

    .fli-hero-pill {
        font-size: 0.75rem;
        padding: 0.3rem 0.65rem;
    }

    .fli-landing-section {
        padding: 3rem 1rem;
    }

    .fli-section-heading {
        font-size: 1.5rem;
    }

    .fli-landing-cta h2 {
        font-size: 1.5rem;
    }

    .fli-mock-card,
    .fli-mock-stats,
    .fli-mock-bio {
        max-width: 100%;
    }

    .fli-landing-footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.25rem;
    }

    .fli-landing-footer-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        text-align: left;
    }

    /* Reorder: Features(1) | Company(3) / More(2) | Get Started(4) */
    .fli-landing-footer-col:nth-child(1) { order: 1; }
    .fli-landing-footer-col:nth-child(2) { order: 3; }
    .fli-landing-footer-col:nth-child(3) { order: 2; }
    .fli-landing-footer-col:nth-child(4) { order: 4; }

    .fli-landing-footer-links {
        justify-content: center;
        width: 100%;
        gap: 0.5rem 1rem;
    }
}

/* ===== Quick Action Bar (Topbar) =====
   Five icon shortcuts on the left of the topbar, split into two
   groups (links/QR and contacts) by a 1px divider. Earlier rules
   set base opacity to .55 which read as "disabled" in dark mode and
   gave the user the feeling the cluster wasn't interactive. Bumping
   base opacity, adding a real hover background, and giving each
   button its own border-radius makes them feel like proper buttons. */
.fli-quickbar {
    gap: 2px;
    display: flex;
    align-items: center;
    padding: 0 4px;
}

.fli-quickbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: var(--fli-text-muted);
    text-decoration: none;
    font-size: 1rem;
    opacity: .85;
    transition: opacity .15s, color .15s, background-color .15s;
}

.fli-quickbar-btn:hover {
    opacity: 1;
    color: var(--bs-primary);
    background: var(--fli-bg-soft, rgba(99,102,241,.08));
}
[data-bs-theme="dark"] .fli-quickbar-btn:hover {
    background: rgba(255,255,255,.06);
}

.fli-quickbar-divider {
    width: 1px;
    height: 22px;
    background: var(--fli-topbar-border);
    margin: 0 8px;
    opacity: .4;
}

/* ===== From Subscription (Account/Manage) ===== */
.fli-subscription .card { height: auto !important; }

/* ===== From Dashboard ===== */
.fli-dashboard-card {
    transition: box-shadow 0.15s, border-color 0.15s;
}
.fli-dashboard-card:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.1);
}

/* ===== From Files ===== */
.fli-drop-zone {
    position: relative;
    border: 2px dashed var(--bs-border-color);
    border-radius: .5rem;
    padding: 2rem;
    text-align: center;
    color: var(--bs-secondary-color);
    transition: border-color .15s, background .15s;
}
.fli-drop-zone--active, .fli-drop-zone:hover {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .04);
}
.fli-drop-zone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ===== From CreatePage ===== */
.fli-create-page .card.mb-4 { height: auto !important; }

/* ===== From MailingList ===== */
/* (Uses .fli-dashboard-card from Dashboard section above) */

/* ===== From Media ===== */
/* (Drop zone styles shared with Files section above) */
.fli-media-card .fli-media-delete {
    opacity: 0;
    transition: opacity 0.15s;
}
.fli-media-card:hover .fli-media-delete {
    opacity: 1;
}

/* ===== From Planner ===== */
td.p-0.position-relative:not(.bg-light):not([style*="background"]):hover {
    background: rgba(var(--bs-primary-rgb), 0.06) !important;
    cursor: pointer;
}
td.bg-light { cursor: not-allowed; }
.planner-grid-scroll thead th {
    background: var(--bs-table-bg, var(--bs-body-bg, #fff));
}

/* ===== From DesignTemplate ===== */
.fli-design-template .card.mb-4 { height: auto !important; }

/* Template designer drop indicators */
.drop-indicator-zone { min-height: 6px; position: relative; }
.drop-indicator-zone-end { min-height: 32px; margin-top: .25rem; }
.drop-indicator {
    height: 3px; background: var(--bs-primary); border-radius: 2px;
    margin: 2px 0; position: relative;
}
.drop-indicator::before, .drop-indicator::after {
    content: ''; position: absolute; top: -3px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--bs-primary);
}
.drop-indicator::before { left: -2px; }
.drop-indicator::after { right: -2px; }

/* ===== From LanguagePicker ===== */
.fli-lang-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
}
.fli-lang-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    z-index: 1051;
    margin-top: .35rem;
    min-width: 150px;
    overflow: hidden;
}

.fli-sidebar-footer .fli-lang-dropdown {
    top: auto;
    bottom: 100%;
    left: 0;
    right: auto;
    margin-top: 0;
    margin-bottom: .35rem;
}
.fli-lang-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .75rem;
    border: none;
    background: none;
    color: var(--bs-body-color);
    cursor: pointer;
    font-size: .85rem;
    transition: background .1s;
}
.fli-lang-item:hover {
    background: var(--bs-tertiary-bg);
}
.fli-lang-item.active {
    background: var(--bs-primary);
    color: #fff;
}

/* ===== From NotificationBell ===== */
.fli-notification-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
}
.fli-notification-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    width: 360px;
    max-width: 90vw;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    z-index: 1051;
    margin-top: .5rem;
}
@media (max-width: 576px) {
    .fli-notification-dropdown {
        position: fixed;
        right: 8px;
        left: 8px;
        top: 56px;
        width: auto;
        max-width: none;
    }
}
.fli-notification-item {
    padding: .625rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    cursor: pointer;
    transition: background .1s;
}
.fli-notification-item:hover {
    background: var(--bs-tertiary-bg);
}
.fli-notification-unread {
    background: rgba(var(--bs-primary-rgb), 0.04);
}

/* ===== Chart Toolbar ===== */
.fli-chart-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: .35rem .75rem;
    background: var(--fli-bg);
    border-bottom: 1px solid var(--fli-border);
}

.btn-xs {
    padding: .15rem .3rem;
    font-size: .7rem;
    line-height: 1.3;
    border-radius: .25rem;
}

.btn-xs .bi {
    font-size: .75rem;
}

/* ===== Ticket Messages ===== */
.fli-ticket-body {
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.6;
    font-size: .9rem;
}

.fli-ticket-body p { margin-bottom: .5rem; }
.fli-ticket-body p:last-child { margin-bottom: 0; }
.fli-ticket-body img { max-width: 100%; height: auto; border-radius: .25rem; }

/* Dark mode: force readable text in ticket messages (email HTML often has inline color:#000) */
[data-bs-theme="dark"] .fli-ticket-body,
[data-bs-theme="dark"] .fli-ticket-body * {
    color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .fli-ticket-body a { color: var(--bs-link-color) !important; }

:root {
    --fli-ticket-note-bg: #fff9e6;
}

[data-bs-theme="dark"] {
    --fli-ticket-note-bg: rgba(255, 193, 7, 0.1);
}

/* ===== Image Lightbox ===== */
.fli-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1070;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.fli-lightbox-content {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    cursor: default;
}

.fli-lightbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 0;
    margin-bottom: .5rem;
}

.fli-lightbox-img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: .5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ===== Bug Report ===== */
.fli-bug-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 20px;
    background: rgba(220, 53, 69, 0.08);
    color: #dc3545;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    margin-right: .5rem;
}

.fli-bug-trigger:hover {
    background: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.5);
    transform: scale(1.03);
}

.fli-bug-trigger i {
    font-size: .85rem;
}

.fli-bug-trigger-label {
    display: none;
}

@media (min-width: 576px) {
    .fli-bug-trigger-label {
        display: inline;
    }
}

.fli-bug-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1060;
}

.fli-bug-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    max-width: 92vw;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    padding: 1.5rem;
    z-index: 1061;
}

/* ===== From TagInput ===== */
.fli-tag-input .list-group.position-absolute {
    z-index: 1050;
}
.card:has(.fli-tag-input) {
    overflow: visible;
}
.card-body:has(.fli-tag-input) {
    overflow: visible;
}

/* ===== Mega-menu for Features nav ===== */
.fli-nav-megamenu-wrap { position: relative; }

.fli-nav-megamenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #fff;
    border: 1px solid var(--fli-border, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(15,23,42,0.18), 0 2px 8px rgba(15,23,42,0.06);
    width: min(920px, 92vw);
    max-width: 92vw;
    padding: 1.25rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s, visibility 0.18s, transform 0.18s;
    z-index: 1000;
}

.fli-nav-megamenu-wrap:hover .fli-nav-megamenu,
.fli-nav-megamenu-wrap:focus-within .fli-nav-megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.fli-nav-megamenu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.fli-nav-megamenu-col {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fli-nav-megamenu-heading {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid #f1f5f9;
}

.fli-nav-megamenu-heading i {
    margin-right: 0.35rem;
    color: #94a3b8;
}

.fli-nav-megamenu-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    color: #1e293b;
    transition: background 0.12s ease;
}

.fli-nav-megamenu-item:hover,
.fli-nav-megamenu-item:focus {
    background: #f8fafc;
    color: #1e293b;
}

.fli-nav-megamenu-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.fli-nav-megamenu-item > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fli-nav-megamenu-item strong {
    font-size: 0.88rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
}

.fli-nav-megamenu-item small {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.35;
    margin-top: 0.1rem;
}

.fli-nav-megamenu-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 1px 6px;
    border-radius: 4px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #fff;
    margin-left: 0.3rem;
    vertical-align: middle;
}

/* Featured spotlight card in the last column */
.fli-nav-megamenu-featured {
    margin-top: 0.5rem;
    padding: 0.85rem;
    background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 100%);
    color: #fff;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.fli-nav-megamenu-featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fde68a;
    margin-bottom: 0.35rem;
}

.fli-nav-megamenu-featured-title {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.35rem;
}

.fli-nav-megamenu-featured-text {
    font-size: 0.72rem;
    line-height: 1.45;
    opacity: 0.82;
    margin-bottom: 0.6rem;
}

.fli-nav-megamenu-featured-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    padding: 0.35rem 0.7rem;
    background: rgba(255,255,255,0.12);
    border-radius: 6px;
    transition: background 0.15s ease;
}

.fli-nav-megamenu-featured-cta:hover {
    background: rgba(255,255,255,0.22);
    color: #fff;
}

/* Responsive: collapse to 2 columns on narrower laptops and iPad landscape.
   Anchor the menu to the trigger's LEFT edge (not centered) so it can't overflow
   past the right side of the viewport on iPad landscape (~1024px) — that was
   clipping the "Featured" card in the 4th grid slot. */
@media (max-width: 1199.98px) {
    .fli-nav-megamenu {
        width: min(720px, calc(100vw - 32px));
        left: 0;
        transform: translateY(4px);
    }
    .fli-nav-megamenu-wrap:hover .fli-nav-megamenu,
    .fli-nav-megamenu-wrap:focus-within .fli-nav-megamenu {
        transform: translateY(0);
    }
    .fli-nav-megamenu-grid { grid-template-columns: repeat(2, 1fr); }
}

/* On the landing navbar mobile row (iPhone/narrow viewport), hide the language
   picker's text label so only the flag renders — the extra "English" text was
   overflowing to a second row with the hamburger on 375-414px iPhones. */
@media (max-width: 991.98px) {
    .fli-landing-nav .fli-lang-picker .fli-nav-label { display: none; }
    .fli-landing-nav .fli-theme-toggle { padding: .4rem .6rem; }
}

/* Dark mode support via Bootstrap data-bs-theme */
[data-bs-theme="dark"] .fli-nav-megamenu {
    background: #1e293b;
    border-color: #334155;
}
[data-bs-theme="dark"] .fli-nav-megamenu-heading {
    color: #cbd5e1;
    border-bottom-color: #334155;
}
[data-bs-theme="dark"] .fli-nav-megamenu-item { color: #e2e8f0; }
[data-bs-theme="dark"] .fli-nav-megamenu-item:hover { background: #0f172a; }
[data-bs-theme="dark"] .fli-nav-megamenu-item strong { color: #f1f5f9; }
[data-bs-theme="dark"] .fli-nav-megamenu-item small { color: #94a3b8; }

/* ===== Forms builder (FormEditor + SurveyBuilder) =====
   The form-fields designer needs more horizontal room than the standard
   .fli-form-page (800px) layout — let it span the full content width. The
   meta cards (Form details, Notifications) get a bit more breathing room
   too, which matches the rest of the create flows. */
.fli-form-builder { width: 100%; }

/* SurveyBuilder dark-mode overrides. The library hardcodes light backgrounds
   and dark text in its scoped CSS, so when the host flips to dark mode the
   inspector inputs render white-on-white. We override against the actual
   class names (the scope-id attribute is on the source selector, not the
   element, so plain class selectors match). Specificity is bumped via the
   `.sb-root` chain to win over the library's `::deep .field-input` rule. */
[data-bs-theme="dark"] .sb-root {
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .sb-root .sb-toolbar {
    background: var(--bs-tertiary-bg);
    border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .sb-root .sb-tabs {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .sb-root .sb-tab {
    color: var(--bs-body-color);
    border-right-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .sb-root .sb-tab:hover { background: var(--bs-tertiary-bg); }

[data-bs-theme="dark"] .sb-root .sb-btn,
[data-bs-theme="dark"] .sb-root .sb-btn-icon,
[data-bs-theme="dark"] .sb-root .sb-upload {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .sb-root .sb-btn:hover,
[data-bs-theme="dark"] .sb-root .sb-btn-icon:hover:not(:disabled),
[data-bs-theme="dark"] .sb-root .sb-upload:hover { background: var(--bs-tertiary-bg); }

[data-bs-theme="dark"] .sb-root .sb-btn-ghost { background: transparent; border-color: transparent; }
[data-bs-theme="dark"] .sb-root .sb-btn-ghost:hover { background: var(--bs-tertiary-bg); }

[data-bs-theme="dark"] .sb-root .sb-count { color: var(--bs-secondary-color); }

[data-bs-theme="dark"] .sb-root .sb-palette-panel {
    background: var(--bs-tertiary-bg);
    border-right-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .sb-root .sb-canvas-panel { background: var(--bs-body-bg); }

[data-bs-theme="dark"] .sb-root .sb-inspector-panel {
    background: var(--bs-tertiary-bg);
    border-left-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .sb-root .sb-preview { background: var(--bs-tertiary-bg); }

[data-bs-theme="dark"] .sb-root .sb-preview-frame {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

/* Palette items */
[data-bs-theme="dark"] .sb-root .palette-header,
[data-bs-theme="dark"] .sb-root .palette-hint { color: var(--bs-secondary-color); }

[data-bs-theme="dark"] .sb-root .palette-item {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .sb-root .palette-item:hover {
    background: rgba(67, 97, 238, .15);
    border-color: #4361ee;
}

[data-bs-theme="dark"] .sb-root .palette-item-icon {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

/* Canvas + dropped element chrome */
[data-bs-theme="dark"] .sb-root .canvas-empty,
[data-bs-theme="dark"] .sb-root .canvas-intro { color: var(--bs-secondary-color); }

[data-bs-theme="dark"] .sb-root .canvas-intro { border-color: var(--bs-border-color); }

[data-bs-theme="dark"] .sb-root .chrome {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .sb-root .chrome:hover { border-color: var(--bs-emphasis-color); }
[data-bs-theme="dark"] .sb-root .chrome-icon {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .sb-root .chrome-title { color: var(--bs-body-color); }
[data-bs-theme="dark"] .sb-root .chrome-type,
[data-bs-theme="dark"] .sb-root .chrome-flag,
[data-bs-theme="dark"] .sb-root .chrome-description { color: var(--bs-secondary-color); }

[data-bs-theme="dark"] .sb-root .chrome-name {
    background: rgba(67, 97, 238, .18);
    color: #93b6ff;
}

/* Property inspector */
[data-bs-theme="dark"] .sb-root .inspector-header,
[data-bs-theme="dark"] .sb-root .inspector-empty { color: var(--bs-secondary-color); }

[data-bs-theme="dark"] .sb-root .inspector-subject {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .sb-root .inspector-subject-icon {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .sb-root .inspector-subject-label { color: var(--bs-body-color); }

[data-bs-theme="dark"] .sb-root .inspector-breadcrumb { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .sb-root .inspector-breadcrumb-sep { color: var(--bs-border-color); }

/* Inspector form fields — this is the "white text in input" bug fix */
[data-bs-theme="dark"] .sb-root .field-label,
[data-bs-theme="dark"] .sb-root .field-hint { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .sb-root .field-hint code {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .sb-root .field-input,
[data-bs-theme="dark"] .sb-root .field-textarea {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .sb-root .field-input:focus,
[data-bs-theme="dark"] .sb-root .field-textarea:focus {
    border-color: #4361ee;
    box-shadow: 0 0 0 3px rgba(67, 97, 238, .25);
}
[data-bs-theme="dark"] .sb-root .field-check { color: var(--bs-body-color); }

/* String list editor + slider/image choices share these classes */
[data-bs-theme="dark"] .sb-root .strings {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .sb-root .strings-header { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .sb-root .strings-count,
[data-bs-theme="dark"] .sb-root .strings-empty { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .sb-root .string-input {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .sb-root .string-btn {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .sb-root .string-btn:hover:not(:disabled) {
    background: rgba(67, 97, 238, .15);
    border-color: #4361ee;
}
[data-bs-theme="dark"] .sb-root .strings-add {
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .sb-root .strings-add:hover {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-emphasis-color);
}

/* Radio/Checkbox/Dropdown CHOICES editor (ChoicesEditor.razor — different
   class names than StringListEditor's .strings*, hence its own block).
   The outer .choices container was rendering bright white in dark mode
   because the library hardcodes background:#fff. */
[data-bs-theme="dark"] .sb-root .choices {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .sb-root .choices-header { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .sb-root .choices-count,
[data-bs-theme="dark"] .sb-root .choices-empty { color: var(--bs-secondary-color); }

[data-bs-theme="dark"] .sb-root .choice-row {
    background: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .sb-root .choice-input {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .sb-root .choice-input:focus {
    border-color: #4361ee;
}

[data-bs-theme="dark"] .sb-root .choice-btn {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .sb-root .choice-btn:hover:not(:disabled) {
    background: rgba(67, 97, 238, .15);
    border-color: #4361ee;
}

[data-bs-theme="dark"] .sb-root .choices-add {
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .sb-root .choices-add:hover {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-emphasis-color);
}

/* Image picker editor (.image-row, .image-thumb*) */
[data-bs-theme="dark"] .sb-root .image-row { background: var(--bs-secondary-bg); }
[data-bs-theme="dark"] .sb-root .image-thumb { border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .sb-root .image-thumb-empty {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

/* ===== Drip-sequence template picker (/mailing/sequences/create) =====
   Step-1 wizard cards. Each card is a button so the whole tile is
   click-and-keyboard-friendly; we drop the default button chrome and
   restyle from scratch. The blank "Start from scratch" variant uses a
   dashed border and muted icon to read as a different category of choice. */
.fli-sequence-picker {
    max-width: 1200px;
    margin: 0 auto;
}

.fli-template-card {
    display: flex;
    gap: .9rem;
    padding: 1rem 1.1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
    cursor: pointer;
    text-align: left;
    color: inherit;
}
.fli-template-card:hover,
.fli-template-card:focus-visible {
    border-color: var(--bs-primary);
    box-shadow: 0 4px 16px -8px rgba(67, 97, 238, .35);
    transform: translateY(-1px);
    outline: none;
}

.fli-template-card-icon {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .5rem;
    background: rgba(67, 97, 238, .12);
    color: #4361ee;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.fli-template-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.fli-template-card-title {
    font-weight: 600;
    color: var(--bs-body-color);
    line-height: 1.25;
}

.fli-template-card-tagline {
    font-size: .82rem;
    color: var(--bs-secondary-color);
    line-height: 1.4;
}

.fli-template-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: .35rem;
    font-size: .72rem;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* "Start from scratch" variant — dashed border, neutral icon. */
.fli-template-card-blank {
    border-style: dashed;
    background: transparent;
}
.fli-template-card-blank:hover,
.fli-template-card-blank:focus-visible {
    border-color: var(--bs-secondary);
    box-shadow: 0 4px 16px -8px rgba(108, 117, 125, .35);
}

.fli-template-card-icon-blank {
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

/* Feature-page hero icon — circular gradient badge centered above the
   title in the dark hero block. Without explicit styling this class
   rendered as a bare 16px line icon floating against the dark navy
   background (visually gone). The gradient + size lift it to "feature
   chip" status. Per-page accent comes from a `style="--fli-hero-icon:
   linear-gradient(...)"` override on the wrapper, falling back to the
   shop default so every existing usage keeps working without a copy
   change. The shadow uses the same purple-tinted glow as the active
   state on the stylish mailing tabs — keeps the platform's accent
   vocabulary consistent. */
.fli-feature-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    border-radius: 22px;
    background: var(--fli-hero-icon, linear-gradient(135deg, #7c3aed, #6366f1));
    color: #fff;
    font-size: 2.25rem;
    box-shadow: 0 18px 36px -18px rgba(124, 58, 237, .55), inset 0 1px 0 rgba(255, 255, 255, .15);
}

.fli-feature-hero-icon i { line-height: 1; }

/* ===== Stylish segmented tabs (Builder / HTML / Markdown / Preview) =====
   Used by /mailing/compose and /mailing/templates editor in place of plain
   nav-tabs. The default Bootstrap nav-tabs draws thin grey separators that
   read as document tabs (think "tabs across the top of a Word doc"); for a
   tool-style picker (this is closer to a segmented control / mode switcher)
   a pill row reads better. Active pill gets the brand gradient + a small
   shadow lift, hover state nudges towards primary so the affordance is
   obvious. Drop the `fli-mailing-tabs` class onto the same <ul.nav> and
   it overrides the bordered-tab look without touching the markup. */
.fli-mailing-tabs.nav-tabs {
    border-bottom: 0;
    gap: .25rem;
    padding: .25rem;
    background: var(--bs-tertiary-bg);
    border-radius: .625rem;
    display: inline-flex;
    flex-wrap: wrap;
}

.fli-mailing-tabs .nav-item .nav-link {
    border: 0;
    border-radius: .5rem;
    padding: .4rem .85rem;
    color: var(--bs-secondary-color);
    background: transparent;
    font-size: .85rem;
    font-weight: 500;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.fli-mailing-tabs .nav-item .nav-link:hover:not(.active) {
    color: var(--bs-primary);
    background: var(--bs-secondary-bg);
}

.fli-mailing-tabs .nav-item .nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, var(--bs-primary), #6366f1);
    box-shadow: 0 6px 14px -8px rgba(99, 102, 241, .55);
}

.fli-mailing-tabs .nav-item .nav-link:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

[data-bs-theme="dark"] .fli-mailing-tabs.nav-tabs {
    background: rgba(255, 255, 255, .04);
}

[data-bs-theme="dark"] .fli-mailing-tabs .nav-item .nav-link.active {
    box-shadow: 0 6px 18px -10px rgba(99, 102, 241, .8);
}