/*
 * LinksFlow UI — the redesigned user dashboard (Claude Design: "LinksFlow Redesign").
 *
 * A skin over AltumCode's own markup: no view is replaced, so every feature keeps working.
 * Loaded only on the logged-in app and the sign-in pages (see src/Ui.php). Every rule is
 * scoped to html.lf-ui, which the inline boot script in <head> sets, together with:
 *   data-lf-wrapper = app | basic      which AltumCode wrapper renders the page
 *   data-lf-palette = a | b            A = teal primary, orange brand accent; B = the reverse
 * Light / dark follows AltumCode's own switch: body[data-theme-style].
 *
 * Sections: 1 font · 2 tokens · 3 Bootstrap bridge · 4 base · 5 app shell · 6 sidebar ·
 * 7 mobile top bar · 8 components · 9 forms · 10 tables and lists · 11 page headers ·
 * 12 dashboard · 13 statistics · 14 account · 15 footer · 16 LinksFlow features ·
 * 17 sign-in pages · 18 density · 19 print and motion
 */

/* ===================================================================== 1. Font */

@font-face {
    font-family: "LF Plus Jakarta Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2-variations"), url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "LF Plus Jakarta Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url(fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2-variations"), url(fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===================================================================== 2. Tokens (linksflow-tokens.css) */

html.lf-ui {
    --lf-font: "LF Plus Jakarta Sans", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --lf-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --lf-brand-1: #F8AC03;
    --lf-brand-2: #F15A2B;
    --lf-brand-gradient: linear-gradient(90deg, #F8AC03 0%, #F15A2B 100%);

    --lf-type-short: #8B5CF6;   --lf-type-short-soft: rgba(139, 92, 246, .12);
    --lf-type-biolink: #3B82F6; --lf-type-biolink-soft: rgba(59, 130, 246, .12);
    --lf-type-vcard: #10B981;   --lf-type-vcard-soft: rgba(16, 185, 129, .12);
    --lf-type-file: #06B6D4;    --lf-type-file-soft: rgba(6, 182, 212, .12);
    --lf-type-event: #F43F5E;   --lf-type-event-soft: rgba(244, 63, 94, .12);
    --lf-type-static: #F59E0B;  --lf-type-static-soft: rgba(245, 158, 11, .14);

    --lf-r-xs: 4px; --lf-r-sm: 6px; --lf-r: 8px; --lf-r-lg: 12px; --lf-r-xl: 16px; --lf-r-pill: 999px;
    --lf-sidebar-w: 260px; --lf-frame-x: 24px; --lf-frame-y: 48px;
    --lf-dir-x: 1;

    /* Neutrals — light */
    --lf-shell: #F3F5F8; --lf-bg: #FFFFFF; --lf-surface: #FFFFFF; --lf-surface-2: #F8FAFC; --lf-surface-3: #F1F5F9;
    --lf-hover: #F4F6F9; --lf-border: #E6EAF0; --lf-border-strong: #CBD5E1;
    --lf-text: #0F172A; --lf-text-2: #475569; --lf-text-3: #64748B; --lf-text-4: #94A3B8;
    --lf-overlay: rgba(15, 23, 42, .40);
    --lf-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --lf-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 10px -4px rgba(15, 23, 42, .08);
    --lf-shadow-md: 0 10px 24px -6px rgba(15, 23, 42, .14), 0 2px 6px -2px rgba(15, 23, 42, .06);
    --lf-shadow-lg: 0 24px 56px -12px rgba(15, 23, 42, .25), 0 6px 16px -6px rgba(15, 23, 42, .10);
    --lf-success: #16A34A; --lf-success-soft: rgba(22, 163, 74, .10);
    --lf-warning: #EA580C; --lf-warning-soft: rgba(234, 88, 12, .10);
    --lf-danger: #DC2626;  --lf-danger-soft: rgba(220, 38, 38, .08);
    --lf-info: #0284C7;    --lf-info-soft: rgba(2, 132, 199, .10);
    --lf-skeleton: #EDF0F4;
    --lf-tooltip-bg: #0F172A; --lf-tooltip-text: #F8FAFC;
    --lf-switch-off: #CBD5E1;

    /* Palette A — teal primary, orange accent */
    --lf-primary: #0D9488; --lf-primary-hover: #0F766E; --lf-on-primary: #FFFFFF;
    --lf-primary-soft: rgba(20, 184, 166, .12); --lf-primary-text: #0F766E;
    --lf-secondary: #F15A2B; --lf-secondary-soft: rgba(241, 90, 43, .10); --lf-secondary-text: #C2410C;
    --lf-chart-1: #14B8A6; --lf-chart-2: #F97316;
    --lf-nav-active-bg: rgba(20, 184, 166, .10); --lf-nav-active-text: #0F766E;
    --lf-focus: 0 0 0 3px rgba(20, 184, 166, .30);
}

html.lf-ui[dir="rtl"] { --lf-dir-x: -1; }

/* Neutrals — dark */
html.lf-ui body[data-theme-style="dark"] {
    --lf-shell: #07090E; --lf-bg: #0C1018; --lf-surface: #111620; --lf-surface-2: #151B27; --lf-surface-3: #1B2230;
    --lf-hover: #171E2A; --lf-border: #1F2735; --lf-border-strong: #2E3A4D;
    --lf-text: #F1F5F9; --lf-text-2: #CBD5E1; --lf-text-3: #94A3B8; --lf-text-4: #64748B;
    --lf-overlay: rgba(2, 6, 12, .65);
    --lf-shadow-xs: 0 1px 2px rgba(0, 0, 0, .30);
    --lf-shadow-sm: 0 1px 2px rgba(0, 0, 0, .30), 0 4px 12px -4px rgba(0, 0, 0, .40);
    --lf-shadow-md: 0 12px 28px -6px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .02);
    --lf-shadow-lg: 0 28px 64px -12px rgba(0, 0, 0, .70);
    --lf-success: #4ADE80; --lf-success-soft: rgba(74, 222, 128, .12);
    --lf-warning: #FB923C; --lf-warning-soft: rgba(251, 146, 60, .12);
    --lf-danger: #F87171;  --lf-danger-soft: rgba(248, 113, 113, .12);
    --lf-info: #38BDF8;    --lf-info-soft: rgba(56, 189, 248, .12);
    --lf-skeleton: #1A2130;
    --lf-tooltip-bg: #F1F5F9; --lf-tooltip-text: #0F172A;
    --lf-switch-off: #334155;
    --lf-type-short-soft: rgba(139, 92, 246, .18); --lf-type-biolink-soft: rgba(59, 130, 246, .18);
    --lf-type-vcard-soft: rgba(16, 185, 129, .16); --lf-type-file-soft: rgba(6, 182, 212, .16);
    --lf-type-event-soft: rgba(244, 63, 94, .16);  --lf-type-static-soft: rgba(245, 158, 11, .16);

    --lf-primary: #2DD4BF; --lf-primary-hover: #5EEAD4; --lf-on-primary: #04201D;
    --lf-primary-soft: rgba(45, 212, 191, .14); --lf-primary-text: #5EEAD4;
    --lf-secondary: #FB7A4B; --lf-secondary-soft: rgba(251, 122, 75, .14); --lf-secondary-text: #FDBA74;
    --lf-chart-1: #2DD4BF; --lf-chart-2: #FB923C;
    --lf-nav-active-bg: rgba(45, 212, 191, .10); --lf-nav-active-text: #5EEAD4;
    --lf-focus: 0 0 0 3px rgba(45, 212, 191, .35);
}

/* Palette B — orange primary, teal secondary */
html.lf-ui[data-lf-palette="b"] {
    --lf-primary: #D2451A; --lf-primary-hover: #B83C16; --lf-on-primary: #FFFFFF;
    --lf-primary-soft: rgba(241, 90, 43, .10); --lf-primary-text: #C2410C;
    --lf-secondary: #0D9488; --lf-secondary-soft: rgba(20, 184, 166, .12); --lf-secondary-text: #0F766E;
    --lf-chart-1: #F15A2B; --lf-chart-2: #14B8A6;
    --lf-nav-active-bg: rgba(241, 90, 43, .09); --lf-nav-active-text: #C2410C;
    --lf-focus: 0 0 0 3px rgba(241, 90, 43, .30);
}

html.lf-ui[data-lf-palette="b"] body[data-theme-style="dark"] {
    --lf-primary: #FF7A45; --lf-primary-hover: #FF9466; --lf-on-primary: #1F0900;
    --lf-primary-soft: rgba(255, 122, 69, .14); --lf-primary-text: #FFA37A;
    --lf-secondary: #2DD4BF; --lf-secondary-soft: rgba(45, 212, 191, .14); --lf-secondary-text: #5EEAD4;
    --lf-chart-1: #FF7A45; --lf-chart-2: #2DD4BF;
    --lf-nav-active-bg: rgba(255, 122, 69, .10); --lf-nav-active-text: #FFA37A;
    --lf-focus: 0 0 0 3px rgba(255, 122, 69, .35);
}

/* ===================================================================== 3. Bootstrap / AltumCode variable bridge
   AltumCode's own CSS and its charts read these variables, so mapping them recolours
   everything that is not restyled explicitly below. */

html.lf-ui body {
    --primary: var(--lf-primary);
    --secondary: var(--lf-text-3);
    --success: var(--lf-success);
    --danger: var(--lf-danger);
    --warning: var(--lf-warning);
    --info: var(--lf-info);
    --white: var(--lf-surface);
    --light: var(--lf-surface-2);
    --dark: var(--lf-text);
    --gray: var(--lf-text-3);
    --gray-50: var(--lf-surface-2);
    --gray-100: var(--lf-surface-3);
    --gray-200: var(--lf-border);
    --gray-300: var(--lf-border-strong);
    --gray-400: var(--lf-text-4);
    --gray-500: var(--lf-text-4);
    --gray-600: var(--lf-text-3);
    --gray-700: var(--lf-text-2);
    --gray-800: var(--lf-text);
    --gray-900: var(--lf-text);
    --primary-50: var(--lf-primary-soft);
    --primary-100: var(--lf-primary-soft);
    --primary-800: var(--lf-primary-hover);
    --primary-900: var(--lf-primary-text);
    --border-radius: var(--lf-r);
    --input-border-color: var(--lf-border-strong);
    --input-color: var(--lf-text);
    --input-placeholder-color: var(--lf-text-4);
    --input-padding-y: .5rem;
    --input-padding-x: .75rem;
    --input-font-size: 14px;
    --font-family-sans-serif: var(--lf-font);
}

/* ===================================================================== 4. Base */

html.lf-ui body {
    font-family: var(--lf-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--lf-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11";
}

html.lf-ui body .tooltip,
html.lf-ui body .popover,
html.lf-ui body button,
html.lf-ui body input,
html.lf-ui body select,
html.lf-ui body textarea { font-family: var(--lf-font); }

html.lf-ui h1, html.lf-ui .h1,
html.lf-ui h2, html.lf-ui .h2,
html.lf-ui h3, html.lf-ui .h3,
html.lf-ui h4, html.lf-ui .h4,
html.lf-ui h5, html.lf-ui .h5,
html.lf-ui h6, html.lf-ui .h6 {
    font-family: var(--lf-font);
    color: var(--lf-text);
    font-weight: 700;
    letter-spacing: -0.015em;
}

html.lf-ui .h3, html.lf-ui h3 { font-size: 1.375rem; }
html.lf-ui .h4, html.lf-ui h4 { font-size: 1.25rem; }
html.lf-ui .h5, html.lf-ui h5 { font-size: 1rem; }
html.lf-ui .h6, html.lf-ui h6 { font-size: .9375rem; }

html.lf-ui a { color: var(--lf-primary-text); }
html.lf-ui a:hover { color: var(--lf-primary-hover); }

html.lf-ui .text-muted { color: var(--lf-text-3) !important; }
html.lf-ui .text-primary { color: var(--lf-primary-text) !important; }
html.lf-ui .text-secondary { color: var(--lf-text-3) !important; }
html.lf-ui .text-dark { color: var(--lf-text) !important; }
html.lf-ui .text-success { color: var(--lf-success) !important; }
html.lf-ui .text-danger { color: var(--lf-danger) !important; }
html.lf-ui .text-gray-500, html.lf-ui .text-gray-600 { color: var(--lf-text-3) !important; }
html.lf-ui .text-gray-700, html.lf-ui .text-gray-800 { color: var(--lf-text-2) !important; }

html.lf-ui .bg-white { background-color: var(--lf-surface) !important; }
html.lf-ui .bg-light, html.lf-ui .bg-gray-50 { background-color: var(--lf-surface-2) !important; }
html.lf-ui .bg-gray-100 { background-color: var(--lf-surface-3) !important; }
html.lf-ui .bg-gray-200 { background-color: var(--lf-border) !important; }
html.lf-ui .bg-primary { background-color: var(--lf-primary) !important; }
html.lf-ui .bg-primary-100, html.lf-ui .bg-primary-50 { background-color: var(--lf-primary-soft) !important; }

html.lf-ui .border, html.lf-ui .border-top, html.lf-ui .border-bottom, html.lf-ui .border-left, html.lf-ui .border-right,
html.lf-ui .border-gray-50, html.lf-ui .border-gray-100, html.lf-ui .border-gray-200 { border-color: var(--lf-border) !important; }
html.lf-ui hr { border-color: var(--lf-border); }
html.lf-ui hr.border-gray-100 { border-color: var(--lf-border) !important; }

html.lf-ui code { color: var(--lf-secondary-text); font-family: var(--lf-font-mono); font-size: .8125rem; }
html.lf-ui pre { font-family: var(--lf-font-mono); }
html.lf-ui ::selection { background: var(--lf-primary-soft); }

html.lf-ui .rounded-2x { border-radius: var(--lf-r-lg) !important; }
html.lf-ui .rounded-3x { border-radius: var(--lf-r-xl) !important; }

html.lf-ui :focus-visible { outline: none; box-shadow: var(--lf-focus); }

/* Thin scrollbars that follow the theme */
html.lf-ui body * { scrollbar-color: var(--lf-border-strong) transparent; }
html.lf-ui body *::-webkit-scrollbar-thumb { background: var(--lf-border-strong); }

/* AltumCode animates every icon inside a link on hover; the redesign keeps icons still */
html.lf-ui .app-sidebar a i[class*="fa-"],
html.lf-ui .app-sidebar a:hover i[class*="fa-"],
html.lf-ui .table-custom a i[class*="fa-"],
html.lf-ui .table-custom a:hover i[class*="fa-"] { transform: none; }

/* ===================================================================== 5. App shell
   Sidebar flush on the shell colour, content in an inset panel 8px away (no dead gutter). */

html.lf-ui[data-lf-wrapper="app"] body.app {
    background: var(--lf-shell);
    min-height: 100vh;
}

html.lf-ui[data-lf-wrapper="app"] .app-overlay {
    background: var(--lf-overlay);
    opacity: 1;
    z-index: 1032;
}

html.lf-ui[data-lf-wrapper="app"] .app-container { min-height: 100vh; }

html.lf-ui[data-lf-wrapper="app"] .app-content {
    min-width: 0;
    background: var(--lf-bg);
}

html.lf-ui[data-lf-wrapper="app"] .app-content .container {
    max-width: 1240px;
}

/* Page area: AltumCode's pt-lg-5 / pl-lg-5 / pr-lg-5 wrapper */
html.lf-ui[data-lf-wrapper="app"] .app-content > .pt-lg-5 {
    padding: 20px 4px 0;
}

html.lf-ui[data-lf-wrapper="app"] .app-content > .px-lg-5 { padding: 0 4px; }

@media (min-width: 992px) {
    html.lf-ui[data-lf-wrapper="app"] .app-content {
        margin: var(--lf-frame-y) var(--lf-frame-x) var(--lf-frame-y) calc(var(--lf-sidebar-w) + var(--lf-frame-x) * 2);
        min-height: calc(100vh - var(--lf-frame-y) * 2);
        border: 1px solid var(--lf-border);
        border-radius: var(--lf-r-xl);
        box-shadow: var(--lf-shadow-xs);
    }

    html.lf-ui[data-lf-wrapper="app"][dir="rtl"] .app-content {
        margin: var(--lf-frame-y) calc(var(--lf-sidebar-w) + var(--lf-frame-x) * 2) var(--lf-frame-y) var(--lf-frame-x);
    }

    html.lf-ui[data-lf-wrapper="app"] .app-content > .pt-lg-5 {
        padding: clamp(28px, 2.6vw, 40px) clamp(20px, 3vw, 48px) 0 !important;
    }

    html.lf-ui[data-lf-wrapper="app"] .app-content > .px-lg-5 {
        padding: 0 clamp(20px, 3vw, 48px) !important;
    }
}

/* ===================================================================== 6. Sidebar */

html.lf-ui[data-lf-wrapper="app"] .app-sidebar {
    min-width: var(--lf-sidebar-w);
    max-width: var(--lf-sidebar-w);
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--lf-shell);
    top: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-105%);
    transition: transform .25s ease;
    z-index: 1035;
}

html.lf-ui[data-lf-wrapper="app"][dir="rtl"] .app-sidebar {
    left: auto;
    right: 0;
    margin: 0;
    border: 0;
    transform: translateX(105%);
}

/* Off-canvas drawer below desktop */
html.lf-ui[data-lf-wrapper="app"] body.app-sidebar-opened .app-sidebar {
    transform: none;
    margin: 0;
    width: 300px;
    max-width: 86%;
    min-width: 0;
    background: var(--lf-surface);
    border-inline-end: 1px solid var(--lf-border);
    box-shadow: var(--lf-shadow-lg);
}

@media (min-width: 992px) {
    html.lf-ui[data-lf-wrapper="app"] .app-sidebar,
    html.lf-ui[data-lf-wrapper="app"][dir="rtl"] .app-sidebar {
        transform: none;
        margin: 0;
    }

    /* Floating sidebar card with room above and beside it, like AltumCode's own layout */
    html.lf-ui[data-lf-wrapper="app"] .app-sidebar {
        top: var(--lf-frame-y);
        bottom: var(--lf-frame-y);
        left: var(--lf-frame-x);
        height: auto;
        background: var(--lf-surface);
        border: 1px solid var(--lf-border);
        border-radius: var(--lf-r-xl);
        box-shadow: var(--lf-shadow-xs);
    }

    html.lf-ui[data-lf-wrapper="app"][dir="rtl"] .app-sidebar { left: auto; right: var(--lf-frame-x); }
}

html.lf-ui .app-sidebar-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2px;
    height: auto;
    min-height: 76px;
    margin: 0;
    padding: 28px 16px 16px;
    padding-inline-start: 26px;
}

html.lf-ui .app-sidebar-title-with-sso {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding-inline-start: 26px;
}

html.lf-ui .app-sidebar-title-with-sso .app-sidebar-title-spacer { display: none; }

html.lf-ui .app-sidebar-logo {
    flex: 0 1 auto;
    text-align: start;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    min-width: 0;
}

/* Text logo: the brand gradient wordmark */
html.lf-ui .app-sidebar-logo,
html.lf-ui .app-sidebar-logo span:not(.navbar-logo) {
    background: var(--lf-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html.lf-ui .app-sidebar-logo:has(img) { background: none; color: inherit; }

html.lf-ui .app-sidebar-logo img,
html.lf-ui .app-sidebar-logo .navbar-logo {
    max-height: var(--lf-logo-desktop, 34px);   /* Admin -> LinksFlow -> Design: logo height on desktop */
    height: var(--lf-logo-desktop, 34px);
    width: auto;
    max-width: 100%;              /* never wider than the room next to the theme button */
    object-fit: contain;          /* a tall setting never squashes or cuts a wide logo */
    object-position: left center;
}

/* Header icon buttons (theme toggle and Search added by linksflow-ui.js) */
html.lf-ui .lf-sidebar-spacer { flex: 1 1 auto; }

html.lf-ui .lf-icon-button,
html.lf-ui .app-sidebar-sso-button {
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--lf-r);
    background: transparent;
    color: var(--lf-text-3);
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    transition: background .15s, color .15s;
}

html.lf-ui .lf-icon-button:hover,
html.lf-ui .app-sidebar-sso-button:hover { background: var(--lf-hover); color: var(--lf-text); }

html.lf-ui .lf-icon-button .fa-sun { color: var(--lf-brand-1); }

html.lf-ui .lf-sidebar-search {
    padding: 6px 16px 18px;
}

html.lf-ui .lf-search-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-r);
    background: var(--lf-surface-2);
    color: var(--lf-text-3);
    font-size: 13px;
    cursor: pointer;
    text-align: start;
    transition: border-color .15s;
}

html.lf-ui body.app-sidebar-opened .lf-search-button { background: var(--lf-surface-2); }
html.lf-ui .lf-search-button:hover { border-color: var(--lf-border-strong); }
html.lf-ui .lf-search-button i { font-size: 12px; }
html.lf-ui .lf-search-button > span:not(.lf-kbd) { flex: 1; }
html.lf-ui .lf-search-button .lf-kbd { flex: none; }

html.lf-ui .lf-kbd {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--lf-r-xs);
    border: 1px solid var(--lf-border);
    background: var(--lf-surface);
    color: var(--lf-text-3);
    font-family: var(--lf-font);
    line-height: 1.3;
}

/* Navigation */
html.lf-ui .app-sidebar > .overflow-auto {
    padding: 4px 0 16px;
    scrollbar-width: thin;
}

html.lf-ui .app-sidebar-links { align-items: stretch; gap: 4px; }

html.lf-ui .app-sidebar-links > li {
    width: auto;
    padding: 0 16px;
}

html.lf-ui .app-sidebar-links > li > a {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--lf-r);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--lf-text-2);
    background: transparent;
    transition: background .15s, color .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.lf-ui .app-sidebar-links > li > a > i[class*="fa-"] {
    flex: none;
    width: 16px;
    margin: 0 !important;
    font-size: 14px;
    text-align: center;
    color: var(--lf-text-3);
}

html.lf-ui .app-sidebar-links > li > a:hover,
html.lf-ui[data-lf-wrapper="app"] body[data-theme-style="dark"] .app-sidebar-links > li > a:hover {
    background: var(--lf-hover);
    color: var(--lf-text);
}

html.lf-ui .app-sidebar-links > li.active > a:not(.default),
html.lf-ui body[data-theme-style="dark"] .app-sidebar-links > li.active > a:not(.default) {
    background: var(--lf-nav-active-bg);
    color: var(--lf-nav-active-text);
    font-weight: 600;
}

html.lf-ui .app-sidebar-links > li.active > a:not(.default) > i[class*="fa-"] { color: var(--lf-primary); }

/* Dashboard row also holds the notifications bell */
html.lf-ui .app-sidebar-links > li.d-flex > a:first-child { flex: 1 1 auto; min-width: 0; }

html.lf-ui .app-sidebar-links > li > a.default {
    flex: none;
    width: 40px !important;
    justify-content: center;
    padding: 0;
    color: var(--lf-text-3);
    margin-inline-start: 4px !important;
}

html.lf-ui .app-sidebar-links > li > a.default:hover { background: var(--lf-hover); color: var(--lf-text); }
html.lf-ui .app-sidebar-links .fa-layers-counter { background: var(--lf-brand-2) !important; box-shadow: 0 0 0 2px var(--lf-shell); }

html.lf-ui .app-sidebar-links > .divider-wrapper {
    width: auto;
    padding: 0 28px;
    margin: 14px 0;
}

html.lf-ui .app-sidebar-links > .divider-wrapper > .divider { border-top: 1px solid var(--lf-border); }

/* Account block, pinned under the menu */
html.lf-ui .app-sidebar-footer {
    padding: 12px 16px 18px;
}

html.lf-ui .app-sidebar > .linksflow-upgrade + .app-sidebar-footer { border-top: 0; }

html.lf-ui .app-sidebar-footer > a {
    position: relative;
    padding: 8px;
    padding-inline-end: 28px;
    border: 0;
    border-radius: var(--lf-r);
    color: var(--lf-text);
    font-size: 14px;
    transition: background .15s;
}

html.lf-ui .app-sidebar-footer > a:hover { background: var(--lf-hover); color: var(--lf-text); }

html.lf-ui .app-sidebar-footer > a::after {
    content: "\f077";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    color: var(--lf-text-4);
    position: absolute;
    inset-inline-end: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    margin: 0;
    display: block;
    width: auto;
    height: auto;
}

html.lf-ui .app-sidebar-avatar {
    width: 32px;
    height: 32px;
    margin-inline-end: 10px !important;
    margin-right: 0;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--lf-border);
}

html.lf-ui[dir="ltr"] .app-sidebar-avatar { margin-right: 10px !important; }

html.lf-ui .app-sidebar-footer-text { color: var(--lf-text); line-height: 1.25; }
html.lf-ui .app-sidebar-footer-text > span { font-size: 13px; font-weight: 600; }
html.lf-ui .app-sidebar-footer-text > small { font-size: 12px; color: var(--lf-text-3); }

html.lf-ui .app-sidebar-footer .dropdown-menu { min-width: 236px; }

/* Wrapper that holds the Upgrade card and the account block (added by linksflow-ui.js) */
html.lf-ui .lf-sidebar-bottom {
    flex: none;
    border-top: 1px solid var(--lf-border);
    padding-top: 4px;
}

/* ===================================================================== 7. Mobile top bar (app_menu) */

html.lf-ui[data-lf-wrapper="app"] .app-content > .container:has(> .navbar) {
    max-width: none;
    padding: 0;
    position: sticky;   /* the bar's own parent, so the bar stays on screen while scrolling */
    top: 0;
    z-index: 1020;
}

@media (min-width: 992px) {
    html.lf-ui[data-lf-wrapper="app"] .app-content > .container:has(> .navbar) { position: static; }
}

html.lf-ui[data-lf-wrapper="app"] .app-content .navbar.d-lg-none {
    position: sticky;
    top: 0;
    z-index: 1020;
    height: 56px;
    margin: 0 0 4px !important;
    padding: 0 8px 0 16px;
    border: 0 !important;
    border-bottom: 1px solid var(--lf-border) !important;
    border-radius: 0 !important;
    background: var(--lf-surface) !important;
}

html.lf-ui[data-lf-wrapper="app"] .app-content .navbar.d-lg-none > .container {
    padding: 0;
    max-width: none;
    flex-wrap: nowrap;
    gap: 4px;
}

html.lf-ui .navbar-brand {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.035em;
    background: var(--lf-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    margin-inline-end: auto;
}

html.lf-ui .navbar-brand:has(img) { background: none; }
html.lf-ui .navbar-brand .navbar-logo { max-height: 26px; height: 26px; }

html.lf-ui .navbar-custom-toggler {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--lf-r);
    color: var(--lf-text-2);
    background: transparent;
    border: 0;
}

html.lf-ui .navbar-custom-toggler:hover { background: var(--lf-hover); }

html.lf-ui .lf-topbar-actions { display: flex; align-items: center; gap: 2px; }
html.lf-ui .lf-topbar-actions .lf-icon-button { width: 40px; height: 40px; }

/* ===================================================================== 8. Components */

/* Cards */
html.lf-ui .card {
    background: var(--lf-surface);
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-r-lg);
    box-shadow: var(--lf-shadow-xs);
    color: var(--lf-text);
}

html.lf-ui .card-body { padding: 20px; }
html.lf-ui .card-header, html.lf-ui .card-footer { background: var(--lf-surface-2); border-color: var(--lf-border); }
html.lf-ui .card-body.p-5 { padding: 32px !important; }

/* Buttons */
html.lf-ui .btn {
    font-family: var(--lf-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    padding: .5rem .875rem;
    border-radius: var(--lf-r);
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, filter .15s;
}

html.lf-ui .btn-sm { font-size: 13px; padding: .375rem .75rem; border-radius: var(--lf-r); }
html.lf-ui .btn-lg { font-size: 15px; padding: .625rem 1.125rem; border-radius: var(--lf-r); }
html.lf-ui .btn.rounded-pill { border-radius: var(--lf-r-pill) !important; }
html.lf-ui .btn:focus, html.lf-ui .btn.focus { box-shadow: var(--lf-focus); }

html.lf-ui .btn-primary,
html.lf-ui .btn-primary:not(:disabled):not(.disabled):active,
html.lf-ui .btn-primary:not(:disabled):not(.disabled).active {
    background: var(--lf-primary);
    border-color: var(--lf-primary);
    color: var(--lf-on-primary);
    box-shadow: var(--lf-shadow-xs);
}

html.lf-ui .btn-primary:hover,
html.lf-ui .btn-primary:focus { background: var(--lf-primary-hover); border-color: var(--lf-primary-hover); color: var(--lf-on-primary); }
html.lf-ui .btn-primary.disabled, html.lf-ui .btn-primary:disabled { background: var(--lf-primary); border-color: var(--lf-primary); color: var(--lf-on-primary); opacity: .55; }

html.lf-ui .btn-outline-primary {
    background: var(--lf-surface);
    border-color: var(--lf-border);
    color: var(--lf-primary-text);
    box-shadow: var(--lf-shadow-xs);
}

html.lf-ui .btn-outline-primary:hover,
html.lf-ui .btn-outline-primary:not(:disabled):not(.disabled):active,
html.lf-ui .btn-outline-primary:not(:disabled):not(.disabled).active {
    background: var(--lf-primary-soft);
    border-color: var(--lf-primary);
    color: var(--lf-primary-text);
}

html.lf-ui .btn-light,
html.lf-ui .btn-outline-secondary,
html.lf-ui .btn-white {
    background: var(--lf-surface);
    border: 1px solid var(--lf-border);
    color: var(--lf-text);
    box-shadow: var(--lf-shadow-xs);
}

html.lf-ui .btn-light:hover,
html.lf-ui .btn-light:focus,
html.lf-ui .btn-light:not(:disabled):not(.disabled):active,
html.lf-ui .btn-light:not(:disabled):not(.disabled).active,
html.lf-ui .show > .btn-light.dropdown-toggle,
html.lf-ui .btn-outline-secondary:hover,
html.lf-ui .btn-white:hover {
    background: var(--lf-hover);
    border-color: var(--lf-border-strong);
    color: var(--lf-text);
}

html.lf-ui .btn-light.disabled, html.lf-ui .btn-light:disabled { opacity: .5; background: var(--lf-surface); color: var(--lf-text-3); }

html.lf-ui .btn-secondary,
html.lf-ui .btn-gray-100,
html.lf-ui .btn-gray-200 {
    background: var(--lf-surface-3);
    border-color: var(--lf-surface-3);
    color: var(--lf-text);
}

html.lf-ui .btn-secondary:hover,
html.lf-ui .btn-secondary:not(:disabled):not(.disabled):active,
html.lf-ui .show > .btn-secondary.dropdown-toggle { background: var(--lf-border); border-color: var(--lf-border); color: var(--lf-text); }

html.lf-ui .btn-dark { background: var(--lf-text); border-color: var(--lf-text); color: var(--lf-surface); }
html.lf-ui .btn-dark:hover { background: var(--lf-text-2); border-color: var(--lf-text-2); color: var(--lf-surface); }

html.lf-ui .btn-danger { background: var(--lf-danger); border-color: var(--lf-danger); color: #FFFFFF; }
html.lf-ui .btn-danger:hover { filter: brightness(.94); background: var(--lf-danger); border-color: var(--lf-danger); color: #FFFFFF; }
html.lf-ui .btn-outline-danger { background: var(--lf-surface); border-color: var(--lf-border); color: var(--lf-danger); }
html.lf-ui .btn-outline-danger:hover { background: var(--lf-danger-soft); border-color: var(--lf-danger); color: var(--lf-danger); }
html.lf-ui .btn-success { background: var(--lf-success); border-color: var(--lf-success); }

html.lf-ui .btn-link { color: var(--lf-text-3); font-weight: 600; box-shadow: none; }
html.lf-ui .btn-link:hover { color: var(--lf-text); text-decoration: none; }
html.lf-ui .btn-link.text-secondary:hover { color: var(--lf-text) !important; }

/* Icon-only buttons in rows (copy, kebab) */
html.lf-ui .table-custom .btn-link,
html.lf-ui .custom-row .btn-link {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--lf-r);
}

html.lf-ui .table-custom .btn-link:hover,
html.lf-ui .custom-row .btn-link:hover { background: var(--lf-surface-3); }

/* Square icon buttons in page headers (export, filters, bulk) */
html.lf-ui .btn.dropdown-toggle-simple:not(.btn-primary):not(.btn-link):not(:has(span)),
html.lf-ui #bulk_enable {
    min-width: 40px;
    padding-left: .625rem;
    padding-right: .625rem;
}

/* Tab-style buttons (account menu, statistics tabs, other AltumCode tab grids) */
html.lf-ui .btn-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    background: var(--lf-surface);
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-r);
    color: var(--lf-text-2);
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--lf-shadow-xs);
}

html.lf-ui .btn-custom i[class*="fa-"] { color: var(--lf-text-3); margin: 0 !important; }

html.lf-ui .btn-custom:hover {
    background: var(--lf-hover);
    border-color: var(--lf-border-strong);
    color: var(--lf-text);
}

html.lf-ui .btn-custom.active {
    background: var(--lf-primary-soft);
    border-color: color-mix(in srgb, var(--lf-primary) 55%, transparent);
    color: var(--lf-primary-text);
}

html.lf-ui .btn-custom.active i[class*="fa-"] { color: var(--lf-primary-text); }

html.lf-ui .btn-group-custom { background: var(--lf-surface-3); border-radius: var(--lf-r); padding: 3px; }
html.lf-ui .btn-group-custom .btn { border-radius: var(--lf-r-sm) !important; color: var(--lf-text-3); font-size: 13px; }
html.lf-ui .btn-group-custom .btn.active { background: var(--lf-surface); color: var(--lf-text); box-shadow: var(--lf-shadow-xs); }

/* Dropdowns */
html.lf-ui .dropdown-menu {
    background: var(--lf-surface);
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-r-lg);
    box-shadow: var(--lf-shadow-md);
    padding: 6px;
    color: var(--lf-text);
    font-size: 14px;
    min-width: 11rem;
}

html.lf-ui .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--lf-r-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--lf-text);
}

html.lf-ui .dropdown-item i[class*="fa-"] { color: var(--lf-text-3); margin: 0 !important; width: 16px; text-align: center; }

html.lf-ui .dropdown-item:hover,
html.lf-ui .dropdown-item:focus { background: var(--lf-hover); color: var(--lf-text); }

html.lf-ui .dropdown-item.active,
html.lf-ui .dropdown-item:active { background: var(--lf-nav-active-bg); color: var(--lf-nav-active-text); }
html.lf-ui .dropdown-item.active i[class*="fa-"], html.lf-ui .dropdown-item:active i[class*="fa-"] { color: var(--lf-primary-text); }

html.lf-ui .dropdown-item.disabled, html.lf-ui .dropdown-item:disabled { color: var(--lf-text-4); }

/* "Delete" items in row menus */
html.lf-ui .dropdown-item[data-target$="_delete_modal"],
html.lf-ui .dropdown-item[data-target="#link_delete_modal"] { color: var(--lf-danger); }
html.lf-ui .dropdown-item[data-target$="_delete_modal"] i[class*="fa-"] { color: var(--lf-danger); }
html.lf-ui .dropdown-item[data-target$="_delete_modal"]:hover { background: var(--lf-danger-soft); color: var(--lf-danger); }

html.lf-ui .dropdown-divider { border-color: var(--lf-border); margin: 6px 4px; }
html.lf-ui .dropdown-header { color: var(--lf-text); padding: 8px 10px; }

html.lf-ui .filters-dropdown { width: 19rem; padding: 6px 0; }
html.lf-ui .filters-dropdown .form-group.px-4 { padding-left: 16px !important; padding-right: 16px !important; }

/* Modals */
html.lf-ui .modal-backdrop { background: var(--lf-overlay); }
html.lf-ui .modal-backdrop.show { opacity: 1; }

html.lf-ui .modal-content {
    background: var(--lf-surface);
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-r-xl);
    box-shadow: var(--lf-shadow-lg);
    color: var(--lf-text);
    padding: 8px;
}

html.lf-ui .modal-header { border-bottom: 0; padding: 16px 16px 8px; }
html.lf-ui .modal-title { font-size: 18px; font-weight: 700; color: var(--lf-text); }
html.lf-ui .modal-body { padding: 8px 16px 16px; }
html.lf-ui .modal-footer { border-top: 1px solid var(--lf-border); }
html.lf-ui .modal-header .close, html.lf-ui .close { color: var(--lf-text-3); text-shadow: none; opacity: 1; }
html.lf-ui .close:hover { color: var(--lf-text); }

/* Badges */
html.lf-ui .badge {
    font-family: var(--lf-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    padding: 3px 8px;
    border-radius: var(--lf-r-pill);
}

html.lf-ui .badge-light { background: var(--lf-surface); color: var(--lf-text-2); border: 1px solid var(--lf-border); }
html.lf-ui .badge-primary { background: var(--lf-primary-soft); color: var(--lf-primary-text); }
html.lf-ui .badge-secondary { background: var(--lf-surface-3); color: var(--lf-text-2); }
html.lf-ui .badge-success { background: var(--lf-success-soft); color: var(--lf-success); }
html.lf-ui .badge-danger { background: var(--lf-danger-soft); color: var(--lf-danger); }
html.lf-ui .badge-warning { background: var(--lf-warning-soft); color: var(--lf-warning); }
html.lf-ui .badge-info { background: var(--lf-info-soft); color: var(--lf-info); }
html.lf-ui .badge-dark { background: var(--lf-text); color: var(--lf-surface); }

/* Alerts */
html.lf-ui .alert {
    border-radius: var(--lf-r-lg);
    border: 1px solid transparent;
    font-size: 14px;
    padding: 12px 16px;
}

html.lf-ui .alert-success { background: var(--lf-success-soft); border-color: color-mix(in srgb, var(--lf-success) 25%, transparent); color: var(--lf-text); }
html.lf-ui .alert-danger { background: var(--lf-danger-soft); border-color: color-mix(in srgb, var(--lf-danger) 25%, transparent); color: var(--lf-text); }
html.lf-ui .alert-warning { background: var(--lf-warning-soft); border-color: color-mix(in srgb, var(--lf-warning) 25%, transparent); color: var(--lf-text); }
html.lf-ui .alert-info, html.lf-ui .alert-primary { background: var(--lf-info-soft); border-color: color-mix(in srgb, var(--lf-info) 25%, transparent); color: var(--lf-text); }
html.lf-ui .alert-light, html.lf-ui .alert-secondary { background: var(--lf-surface-2); border-color: var(--lf-border); color: var(--lf-text); }

/* Navs */
html.lf-ui .nav-pills .nav-link {
    border-radius: var(--lf-r);
    color: var(--lf-text-2);
    font-size: 14px;
    font-weight: 600;
    padding: 7px 12px;
}

html.lf-ui .nav-pills .nav-link:hover { background: var(--lf-hover); color: var(--lf-text); }
html.lf-ui .nav-pills .nav-link.active, html.lf-ui .nav-pills .show > .nav-link { background: var(--lf-nav-active-bg); color: var(--lf-nav-active-text); }

html.lf-ui .nav-tabs { border-bottom: 1px solid var(--lf-border); }
html.lf-ui .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--lf-text-3); font-weight: 600; }
html.lf-ui .nav-tabs .nav-link:hover { color: var(--lf-text); border-color: transparent; }
html.lf-ui .nav-tabs .nav-link.active { background: transparent; color: var(--lf-primary-text); border-bottom-color: var(--lf-primary); }

html.lf-ui .nav-wrapper-switch-buttons .nav-link,
html.lf-ui .nav-wrapper-switch-buttons-primary .nav-link { border-radius: var(--lf-r-sm); color: var(--lf-text-3); font-weight: 600; }
html.lf-ui .nav-wrapper-switch-buttons .nav-link.active,
html.lf-ui .nav-wrapper-switch-buttons-primary .nav-link.active { background: var(--lf-surface); color: var(--lf-text); box-shadow: var(--lf-shadow-xs); }

/* Pagination */
html.lf-ui .pagination { gap: 6px; flex-wrap: wrap; }

html.lf-ui .page-link {
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--lf-border) !important;
    border-radius: var(--lf-r) !important;
    background: var(--lf-surface);
    color: var(--lf-text);
    font-size: 13px;
    font-weight: 600;
    margin: 0 !important;
}

html.lf-ui .page-link:hover { background: var(--lf-hover); color: var(--lf-text); border-color: var(--lf-border-strong) !important; }
html.lf-ui .page-item.active .page-link { background: var(--lf-primary); border-color: var(--lf-primary) !important; color: var(--lf-on-primary); }
html.lf-ui .page-item.disabled .page-link { color: var(--lf-text-4); background: var(--lf-surface); }

/* Tooltips */
html.lf-ui .tooltip { font-size: 12px; }
html.lf-ui .tooltip-inner { background: var(--lf-tooltip-bg); color: var(--lf-tooltip-text); border-radius: var(--lf-r); padding: 6px 10px; font-weight: 500; box-shadow: var(--lf-shadow-md); max-width: 260px; }
html.lf-ui .bs-tooltip-top .arrow::before, html.lf-ui .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: var(--lf-tooltip-bg); }
html.lf-ui .bs-tooltip-bottom .arrow::before, html.lf-ui .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--lf-tooltip-bg); }
html.lf-ui .bs-tooltip-left .arrow::before, html.lf-ui .bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: var(--lf-tooltip-bg); }
html.lf-ui .bs-tooltip-right .arrow::before, html.lf-ui .bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: var(--lf-tooltip-bg); }

html.lf-ui .popover { background: var(--lf-surface); border-color: var(--lf-border); border-radius: var(--lf-r-lg); box-shadow: var(--lf-shadow-md); }
html.lf-ui .popover-body { color: var(--lf-text); }

/* Progress */
html.lf-ui .progress { height: 6px; background: var(--lf-surface-3); border-radius: var(--lf-r-pill); }
html.lf-ui .progress-bar { background-color: var(--lf-primary); border-radius: var(--lf-r-pill); }

/* Breadcrumbs */
html.lf-ui .custom-breadcrumbs { font-size: 13px; color: var(--lf-text-3); margin-bottom: 12px; }
html.lf-ui .custom-breadcrumbs > li > a { color: var(--lf-text-3); }
html.lf-ui .custom-breadcrumbs > li > a:hover { color: var(--lf-text); }
html.lf-ui .custom-breadcrumbs > li.active { color: var(--lf-text); font-weight: 600; }
html.lf-ui .custom-breadcrumbs > li > i[class*="fa-"] { color: var(--lf-text-4); }

/* Spinners and skeleton */
html.lf-ui .spinner-border { color: var(--lf-text-4); border-width: 2px; }

/* Spotlight (⌘K) */
html.lf-ui .spotlight-wrapper { background: var(--lf-overlay); backdrop-filter: blur(2px); }
html.lf-ui body[data-theme-style="dark"] .spotlight-wrapper { background: var(--lf-overlay); }

html.lf-ui .spotlight-modal {
    max-width: 640px;
    width: calc(100% - 32px);
    padding: 16px;
    border-radius: var(--lf-r-xl);
    background: var(--lf-surface);
    border: 1px solid var(--lf-border);
    box-shadow: var(--lf-shadow-lg);
}

html.lf-ui #spotlight_search { height: 44px; font-size: 15px; }
html.lf-ui .spotlight-results a { background: transparent !important; border: 1px solid transparent; margin: 4px 0 !important; padding: 10px 12px !important; border-radius: var(--lf-r) !important; }
html.lf-ui .spotlight-results a:hover, html.lf-ui .spotlight-results a:focus { background: var(--lf-hover) !important; border-color: var(--lf-border); }

/* Empty states (partials/no_data.php) */
html.lf-ui svg[style*="175px"] { max-height: 140px; opacity: .9; }

/* ===================================================================== 9. Forms */

html.lf-ui label,
html.lf-ui .col-form-label { font-size: 13px; font-weight: 600; color: var(--lf-text); }

html.lf-ui label.small, html.lf-ui label small, html.lf-ui .custom-control-label small { font-weight: 500; }

html.lf-ui .form-text,
html.lf-ui small.form-text { font-size: 12px; color: var(--lf-text-3) !important; }

html.lf-ui .form-control,
html.lf-ui .custom-select,
html.lf-ui .select2-container--default .select2-selection--single,
html.lf-ui .select2-container--default .select2-selection--multiple {
    min-height: 40px;
    border: 1px solid var(--lf-border-strong);
    border-radius: var(--lf-r);
    background-color: var(--lf-surface);
    color: var(--lf-text);
    font-size: 14px;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}

html.lf-ui .form-control { height: 40px; padding: .5rem .75rem; }
html.lf-ui textarea.form-control,
html.lf-ui select.form-control[multiple],
html.lf-ui select.form-control[size] { height: auto; padding: 10px 12px; }
html.lf-ui .form-control-sm, html.lf-ui .custom-select-sm { min-height: 34px; height: 34px; font-size: 13px; }
html.lf-ui .form-control-lg { height: 46px; font-size: 15px; }
html.lf-ui .form-control[type="color"] { padding: 4px; }
html.lf-ui .form-control-plaintext { color: var(--lf-text); }

html.lf-ui .form-control::placeholder { color: var(--lf-text-4); }

html.lf-ui .form-control:focus,
html.lf-ui .custom-select:focus,
html.lf-ui .select2-container--open .select2-selection,
html.lf-ui .select2-container--focus .select2-selection {
    border-color: var(--lf-primary);
    box-shadow: var(--lf-focus);
    background-color: var(--lf-surface);
    color: var(--lf-text);
    outline: none;
}

html.lf-ui .form-control:disabled, html.lf-ui .form-control[readonly], html.lf-ui .custom-select:disabled {
    background-color: var(--lf-surface-2);
    color: var(--lf-text-3);
}

html.lf-ui .form-control.is-invalid, html.lf-ui .custom-select.is-invalid { border-color: var(--lf-danger); }
html.lf-ui .invalid-feedback { color: var(--lf-danger); font-size: 12px; }

html.lf-ui .custom-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748B' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: right .75rem center;
    padding-right: 2.25rem;
}

html.lf-ui[dir="rtl"] .custom-select { background-position: left .75rem center; padding-right: .75rem; padding-left: 2.25rem; }

/* Select2 puts .form-control on its box, so the box's padding and the text's padding used to add up
   and push the text down. One source of spacing, content centred vertically. */
html.lf-ui .select2-container--default .select2-selection--single,
html.lf-ui .select2-container--default .select2-selection--single.form-control {
    display: flex;
    align-items: center;
    height: 40px;
    min-height: 40px;
    padding: 0 !important;
    position: relative;
}

html.lf-ui .select2-container--default .select2-selection--single .select2-selection__rendered {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 2.25rem 0 .75rem !important;
    line-height: 1.4;
    color: var(--lf-text);
}

html.lf-ui[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0 .75rem 0 2.25rem !important; }

html.lf-ui .select2-container--default .select2-selection--single .select2-selection__arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    height: auto;
    width: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

html.lf-ui .select2-container--default .select2-selection--single .select2-selection__arrow b { position: static; margin: 0; }
html.lf-ui .select2-container--default .select2-selection--single.form-control-sm,
html.lf-ui .select2-container--default .select2-selection--single.custom-select-sm { height: 34px; min-height: 34px; }

html.lf-ui .select2-container--default .select2-selection--multiple.form-control { height: auto; padding: 4px 8px !important; display: flex; align-items: center; flex-wrap: wrap; }

/* Inputs, buttons and add-ons in one row share the 40px height */
html.lf-ui .input-group > .input-group-prepend > .input-group-text,
html.lf-ui .input-group > .input-group-append > .input-group-text,
html.lf-ui .input-group > .input-group-prepend > .btn,
html.lf-ui .input-group > .input-group-append > .btn { min-height: 40px; display: inline-flex; align-items: center; }
html.lf-ui .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--lf-text-3) transparent transparent transparent; }

html.lf-ui .select2-dropdown {
    background: var(--lf-surface);
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-r-lg);
    box-shadow: var(--lf-shadow-md);
    /* no overflow: hidden: a clipped box around a scrolling list is one of the triggers of the iPhone blank list (1.6.19) */
}
/* Short lists (up to 6 options, e.g. the domain picker) are not a scroll box at all: on iPhones a freshly
   opened scroll box could stay blank for seconds the first time (1.6.20). Longer lists still scroll. */
html.lf-ui .select2-container--default .select2-results > .select2-results__options:not(:has(> :nth-child(7))) { max-height: none; overflow: visible; }

html.lf-ui .select2-results { padding: 6px; }
html.lf-ui .select2-results__option { color: var(--lf-text); font-size: 14px; border-radius: var(--lf-r-sm); margin: 2px 0; }
html.lf-ui .select2-results__option--highlighted,
html.lf-ui .select2-results__option:hover { background: var(--lf-hover) !important; color: var(--lf-text) !important; }
html.lf-ui .select2-results__option--selected,
html.lf-ui .select2-results__option[aria-selected="true"] { background: var(--lf-nav-active-bg) !important; color: var(--lf-nav-active-text) !important; }
html.lf-ui .select2-search--dropdown .select2-search__field { border: 1px solid var(--lf-border-strong); border-radius: var(--lf-r); background: var(--lf-surface); color: var(--lf-text); padding: 6px 10px; }

html.lf-ui .input-group-text {
    background: var(--lf-surface-2);
    border: 1px solid var(--lf-border-strong);
    color: var(--lf-text-3);
    font-size: 14px;
    border-radius: var(--lf-r);
}

html.lf-ui .input-group > .form-control:not(:first-child),
html.lf-ui .input-group > .custom-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
html.lf-ui .input-group > .form-control:not(:last-child),
html.lf-ui .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
html.lf-ui .input-group-prepend .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
html.lf-ui .input-group-append .input-group-text, html.lf-ui .input-group-append .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Checkboxes, radios, switches */
html.lf-ui .custom-control-label::before {
    background-color: var(--lf-surface);
    border: 1.5px solid var(--lf-border-strong);
    box-shadow: none;
}

html.lf-ui .custom-checkbox .custom-control-label::before { border-radius: 5px; }

html.lf-ui .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--lf-primary);
    border-color: var(--lf-primary);
}

html.lf-ui .custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--lf-focus); }
html.lf-ui .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--lf-primary); }
html.lf-ui .custom-control-label { font-weight: 500; color: var(--lf-text); font-size: 14px; }

/* Switch: 36 × 20 track, 16px knob (design) */
html.lf-ui .custom-switch { padding-left: 46px; min-height: 20px; }
html.lf-ui[dir="rtl"] .custom-switch { padding-left: 0; padding-right: 46px; }

html.lf-ui .custom-switch .custom-control-label::before {
    left: -46px;
    top: 50%;
    margin-top: -10px;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    border: 0;
    background-color: var(--lf-switch-off);
}

html.lf-ui .custom-switch .custom-control-label::after {
    left: -44px;
    top: 50%;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .25);
    transition: transform .18s ease;
}

html.lf-ui[dir="rtl"] .custom-switch .custom-control-label::before { left: auto; right: -46px; }
html.lf-ui[dir="rtl"] .custom-switch .custom-control-label::after { left: auto; right: -44px; }

html.lf-ui .custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: #FFFFFF; transform: translateX(16px); }
html.lf-ui[dir="rtl"] .custom-switch .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(-16px); }
html.lf-ui .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--lf-primary); }
html.lf-ui .custom-switch .custom-control-input:disabled ~ .custom-control-label::before { opacity: .5; }

/* Switch with no text (link rows): keep it compact */
html.lf-ui .custom-switch .custom-control-label:empty { width: 0; height: 20px; display: inline-block; vertical-align: middle; }

/* Radio "boxes" (billing type, link types, QR types) */
html.lf-ui .custom-radio-box input[type="radio"] + div,
html.lf-ui .custom-radio-box input[type="checkbox"] + div {
    border: 1px solid var(--lf-border) !important;
    border-radius: var(--lf-r-lg) !important;
    background: var(--lf-surface);
    transition: border-color .15s, background .15s;
}

html.lf-ui .custom-radio-box input[type="radio"]:hover + div,
html.lf-ui .custom-radio-box input[type="checkbox"]:hover + div { border-color: var(--lf-border-strong) !important; }

html.lf-ui .custom-radio-box input[type="radio"]:checked + div,
html.lf-ui .custom-radio-box input[type="checkbox"]:checked + div {
    border-color: var(--lf-primary) !important;
    background: var(--lf-primary-soft);
}

html.lf-ui .custom-radio-box .custom-radio-box-main-icon { color: var(--lf-text-3); }
html.lf-ui .custom-radio-box input:checked + div .custom-radio-box-main-icon { color: var(--lf-primary-text); }

/* Range sliders */
html.lf-ui .form-control-range::-webkit-slider-thumb { background: var(--lf-primary); }
html.lf-ui .form-control-range::-moz-range-thumb { background: var(--lf-primary); }

/* File input */
html.lf-ui .altum-file-input { border: 1px dashed var(--lf-border-strong); border-radius: var(--lf-r-lg); background: var(--lf-surface-2); color: var(--lf-text-2); }
html.lf-ui .altum-file-input::file-selector-button { background: var(--lf-surface); color: var(--lf-text); border: 1px solid var(--lf-border); border-radius: var(--lf-r); font-weight: 600; }

/* Password show / hide eye in labels */
html.lf-ui [data-password-toggle-view] label a { color: var(--lf-text-3); }

/* ===================================================================== 10. Tables and lists */

html.lf-ui .table { color: var(--lf-text); }
html.lf-ui .table td, html.lf-ui .table th { border-color: var(--lf-border); }

html.lf-ui .table-custom-container {
    background: var(--lf-surface);
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-r-lg);
    box-shadow: var(--lf-shadow-xs);
}

html.lf-ui .table-custom { background: transparent; margin: 0; }

html.lf-ui .table-custom thead th {
    background: var(--lf-surface-2);
    color: var(--lf-text-2);
    font-size: 13px;
    font-weight: 500;
    padding: 10px 20px;
    border-top: 0;
    border-bottom: 1px solid var(--lf-border);
    white-space: nowrap;
}

html.lf-ui body[data-theme-style="dark"] .table-custom thead th { color: var(--lf-text-2); }
html.lf-ui .table-custom thead tr:first-child th:first-child { border-top-left-radius: var(--lf-r-lg); }
html.lf-ui .table-custom thead tr:first-child th:last-child { border-top-right-radius: var(--lf-r-lg); }

html.lf-ui .table-custom td {
    padding: 13px 20px;
    vertical-align: middle;
    font-size: 14px;
}

html.lf-ui .table-custom tbody tr td { border-top: 1px solid var(--lf-border); }
html.lf-ui .table-custom tbody tr:first-child td { border-top: 0; }
html.lf-ui .table-custom tbody tr { transition: background .12s; }
html.lf-ui .table-custom tbody tr:hover { background: var(--lf-surface-2); }

html.lf-ui .table-custom tbody td a:not(.btn):not(.badge):not(.text-muted):not(.dropdown-item) { color: var(--lf-text); font-weight: 600; }
html.lf-ui .table-custom tbody td a:not(.btn):not(.badge):not(.text-muted):not(.dropdown-item):hover { color: var(--lf-primary-text); }
html.lf-ui .table-custom tbody td a.text-muted { color: var(--lf-text-3) !important; font-weight: 400; }
html.lf-ui .table-custom tbody td .small, html.lf-ui .table-custom tbody td small { font-size: 13px; }

/* Disabled link rows (switch off) */
html.lf-ui .table-custom tbody tr:has(.custom-switch input[onchange*="is_enabled_toggle"]:not(:checked)) > td:not(:last-child) { opacity: .55; }

/* Project and clicks chips sit side by side (AltumCode stacks them in one cell) */
html.lf-ui .table-custom td > .mx-2 { display: inline-flex; vertical-align: middle; margin: 2px 4px !important; }
html.lf-ui .table-custom td > .mx-2:empty { display: none; }

/* Clicks badge: a small grey chip with the bar icon */
html.lf-ui .table-custom .badge-light:has(.fa-chart-bar) {
    background: var(--lf-surface-3);
    border-color: transparent;
    color: var(--lf-text);
    border-radius: var(--lf-r-sm);
    font-variant-numeric: tabular-nums;
    padding: 4px 8px;
}

html.lf-ui .table-custom .badge-light .fa-chart-bar { color: var(--lf-text-3); }

/* Project pill: dot in the project's colour (AltumCode sets the colour on the badge text) */
html.lf-ui .table-custom a[href*="project_id="] .badge-light {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--lf-surface);
    border: 1px solid var(--lf-border);
    font-weight: 500;
}

html.lf-ui .table-custom a[href*="project_id="] .badge-light::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Type icon of a link: soft tile in the link type's colour */
html.lf-ui .link-type-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    border-radius: 10px !important;
    background: var(--lf-surface-3) !important;
    font-size: 14px;
}

html.lf-ui .link-type-icon i { color: var(--lf-text-2) !important; }
html.lf-ui img.link-type-icon { object-fit: cover; background: var(--lf-surface) !important; box-shadow: 0 0 0 1px var(--lf-border); }

html.lf-ui .link-type-icon:has(.fa-link) { background: var(--lf-type-short-soft) !important; }
html.lf-ui .link-type-icon:has(.fa-link) i { color: var(--lf-type-short) !important; }
html.lf-ui .link-type-icon:has(.fa-hashtag) { background: var(--lf-type-biolink-soft) !important; }
html.lf-ui .link-type-icon:has(.fa-hashtag) i { color: var(--lf-type-biolink) !important; }
html.lf-ui .link-type-icon:has(.fa-id-card) { background: var(--lf-type-vcard-soft) !important; }
html.lf-ui .link-type-icon:has(.fa-id-card) i { color: var(--lf-type-vcard) !important; }
html.lf-ui .link-type-icon:has(.fa-file) { background: var(--lf-type-file-soft) !important; }
html.lf-ui .link-type-icon:has(.fa-file) i { color: var(--lf-type-file) !important; }
html.lf-ui .link-type-icon:has(.fa-calendar) { background: var(--lf-type-event-soft) !important; }
html.lf-ui .link-type-icon:has(.fa-calendar) i { color: var(--lf-type-event) !important; }
html.lf-ui .link-type-icon:has(.fa-file-code) { background: var(--lf-type-static-soft) !important; }
html.lf-ui .link-type-icon:has(.fa-file-code) i { color: var(--lf-type-static) !important; }

html.lf-ui .icon-favicon-small { width: 14px; height: 14px; border-radius: 3px; }

/* Readable created / updated dates (linksflow-ui.js) */
html.lf-ui .lf-dates { display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 1.35; color: var(--lf-text-2); white-space: nowrap; }
html.lf-ui .lf-dates .lf-dates-updated { color: var(--lf-text-3); }
html.lf-ui .lf-dates-cell > span[data-toggle="tooltip"],
html.lf-ui .lf-dates-cell > span[data-original-title] { display: none; }

/* AltumCode's card rows (QR codes, projects, pixels …) */
html.lf-ui .custom-row {
    background: var(--lf-surface);
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-r-lg);
    padding: 14px 20px;
    box-shadow: var(--lf-shadow-xs);
}

html.lf-ui .custom-row-inactive { background: var(--lf-surface-2); opacity: .7; }
html.lf-ui .table-avatar { border-radius: 10px; }

/* Bulk select bar */
html.lf-ui #bulk_group .btn { height: 40px; }
html.lf-ui #bulk_counter { background: var(--lf-primary); color: var(--lf-on-primary); border-radius: var(--lf-r-pill); padding: 1px 7px; font-size: 12px; margin-inline-start: 4px; }

/* ===================================================================== 11. Page headers
   AltumCode: <h1 class="h4"><i class="fas fa-fw fa-xs …"></i> Title</h1> → icon tile + title */

html.lf-ui[data-lf-wrapper="app"] main h1.h4,
html.lf-ui[data-lf-wrapper="app"] main h1.h3 { font-size: 22px; letter-spacing: -0.02em; line-height: 1.25; }

/* Only titles that start with an icon become a flex row (plain titles such as the link editor keep their ellipsis) */
html.lf-ui[data-lf-wrapper="app"] main h1.h4:has(> i[class*="fa-"]:first-child),
html.lf-ui[data-lf-wrapper="app"] main h1.h3:has(> i[class*="fa-"]:first-child) {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

html.lf-ui[data-lf-wrapper="app"] main h1.h4 > i[class*="fa-"]:first-child,
html.lf-ui[data-lf-wrapper="app"] main h1.h3 > i[class*="fa-"]:first-child {
    flex: none;
    width: 44px;
    height: 44px;
    margin: 0 !important;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    background: var(--lf-primary-soft);
    color: var(--lf-primary-text) !important;
}

html.lf-ui[data-lf-wrapper="app"] main h1 > i.fa-link:first-child { background: var(--lf-type-short-soft); color: var(--lf-type-short) !important; }
html.lf-ui[data-lf-wrapper="app"] main h1 > i.fa-hashtag:first-child { background: var(--lf-type-biolink-soft); color: var(--lf-type-biolink) !important; }
html.lf-ui[data-lf-wrapper="app"] main h1 > i.fa-id-card:first-child { background: var(--lf-type-vcard-soft); color: var(--lf-type-vcard) !important; }
html.lf-ui[data-lf-wrapper="app"] main h1 > i.fa-file:first-child { background: var(--lf-type-file-soft); color: var(--lf-type-file) !important; }
html.lf-ui[data-lf-wrapper="app"] main h1 > i.fa-calendar:first-child { background: var(--lf-type-event-soft); color: var(--lf-type-event) !important; }
html.lf-ui[data-lf-wrapper="app"] main h1 > i.fa-file-code:first-child { background: var(--lf-type-static-soft); color: var(--lf-type-static) !important; }

/* Info icon next to page titles */
html.lf-ui main .fa-info-circle.text-muted { color: var(--lf-text-4) !important; font-size: 13px; }

/* The header row: give it the design's spacing */
html.lf-ui[data-lf-wrapper="app"] main .row.mb-4:has(> .col-12 > h1) { margin-bottom: 24px !important; align-items: center; }
html.lf-ui[data-lf-wrapper="app"] main .col-12.col-lg.d-flex.align-items-end:has(> h1) { align-items: center !important; }
html.lf-ui[data-lf-wrapper="app"] main .gap-3 { gap: 8px !important; }

/* The "Watch demo" button (LinksFlow Videos) */
html.lf-ui [data-linksflow-video].btn-light { height: 40px; display: inline-flex; align-items: center; gap: 8px; }
html.lf-ui [data-linksflow-video].btn-light:hover { border-color: #FF0033; }
html.lf-ui [data-linksflow-video] .fa-youtube { color: #FF0033 !important; font-size: 18px; margin: 0 !important; }

/* Header buttons line up at 40px */
html.lf-ui[data-lf-wrapper="app"] main .d-print-none > div > .btn,
html.lf-ui[data-lf-wrapper="app"] main .d-print-none > div > .dropdown > .btn,
html.lf-ui[data-lf-wrapper="app"] main .d-print-none > div > div > .btn { height: 40px; display: inline-flex; align-items: center; justify-content: center; }

/* ===================================================================== 12. Dashboard */

/* Greeting header (linksflow-ui.js) */
html.lf-ui .lf-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
}

html.lf-ui .lf-page-head h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; text-wrap: pretty; }
html.lf-ui .lf-page-head p { margin: 4px 0 0; font-size: 14px; color: var(--lf-text-2); }
html.lf-ui .lf-page-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
html.lf-ui .lf-page-head-actions .btn { height: 38px; display: inline-flex; align-items: center; gap: 8px; }

/* Link type counters */
html.lf-ui .index-widget-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    border-radius: 10px !important;
    padding: 0 !important;
    font-size: 15px;
    background: var(--lf-surface-3) !important;
    color: var(--lf-text-2) !important;
}

html.lf-ui .index-widget-icon:has(.fa-link) { background: var(--lf-type-short-soft) !important; color: var(--lf-type-short) !important; }
html.lf-ui .index-widget-icon:has(.fa-hashtag) { background: var(--lf-type-biolink-soft) !important; color: var(--lf-type-biolink) !important; }
html.lf-ui .index-widget-icon:has(.fa-id-card) { background: var(--lf-type-vcard-soft) !important; color: var(--lf-type-vcard) !important; }
html.lf-ui .index-widget-icon:has(.fa-file) { background: var(--lf-type-file-soft) !important; color: var(--lf-type-file) !important; }
html.lf-ui .index-widget-icon:has(.fa-calendar) { background: var(--lf-type-event-soft) !important; color: var(--lf-type-event) !important; }
html.lf-ui .index-widget-icon:has(.fa-file-code) { background: var(--lf-type-static-soft) !important; color: var(--lf-type-static) !important; }
html.lf-ui .index-widget-icon i { font-size: 15px; }

html.lf-ui .card.flex-row:has(.index-widget-icon) {
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 80px;
    padding: 16px 20px;
    transition: border-color .15s, box-shadow .15s;
}

html.lf-ui .card.flex-row:has(.index-widget-icon):hover { border-color: var(--lf-border-strong); box-shadow: var(--lf-shadow-sm); }
html.lf-ui .card.flex-row:has(.index-widget-icon) > .pl-3 { padding: 0 !important; }
html.lf-ui .card.flex-row:has(.index-widget-icon) > .card-body { flex: 0 1 auto; padding: 0; }
html.lf-ui .card.flex-row:has(.index-widget-icon) .h6 { font-size: 15px; font-weight: 600; color: var(--lf-text); margin: 0; }
html.lf-ui .lf-stat-number { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-inline-end: 4px; vertical-align: -1px; }

/* Section rhythm: AltumCode uses 3rem gaps, the design 24px */
html.lf-ui[data-lf-wrapper="app"] main .container > .mb-5 { margin-bottom: 40px !important; }
html.lf-ui[data-lf-wrapper="app"] main .container > .mb-5 > .card.mt-5 { margin-top: 48px !important; }

/* Chart card */
html.lf-ui .chart-container { height: clamp(240px, 26vw, 320px); }
html.lf-ui .lf-chart-head { display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
html.lf-ui .lf-chart-title { font-size: 13px; font-weight: 600; color: var(--lf-text-2); }
html.lf-ui .lf-chart-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: 6px; }
html.lf-ui .lf-chart-total strong { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
html.lf-ui .lf-chart-total span { font-size: 14px; color: var(--lf-text-2); }
html.lf-ui .lf-chart-head-legend .lf-chart-legend { margin-top: 0; }
html.lf-ui .lf-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 13px; color: var(--lf-text-2); }
html.lf-ui .lf-chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
html.lf-ui .lf-chart-legend b { font-weight: 700; color: var(--lf-text); font-variant-numeric: tabular-nums; }
html.lf-ui .lf-chart-legend i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
html.lf-ui #pageviews_chart_help { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 12px; color: var(--lf-text-3) !important; }

/* Recent links card (linksflow-ui.js wraps the dashboard's links list) */
html.lf-ui .lf-card-section {
    background: var(--lf-surface);
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-r-lg);
    box-shadow: var(--lf-shadow-xs);
    margin-bottom: 40px;
}

html.lf-ui[data-lf-wrapper] main .lf-card-section > .row:first-child { margin: 0 !important; padding: 16px 20px 16px 24px; align-items: center; }
html.lf-ui .lf-card-section > .row:first-child > .mb-3 { margin-bottom: 0 !important; }
html.lf-ui .lf-card-section > .row:first-child > [class*="col"] { padding: 0; margin: 0 !important; }
html.lf-ui .lf-card-section > .row:first-child h1 { font-size: 16px !important; gap: 0 !important; }
html.lf-ui .lf-card-section > .row:first-child h1 > i:first-child { display: none !important; }
html.lf-ui .lf-card-section > .row:first-child .ml-2:has(.fa-info-circle) { display: none; }
html.lf-ui .lf-card-section .table-custom-container { border: 0; border-top: 1px solid var(--lf-border); border-radius: 0 0 var(--lf-r-lg) var(--lf-r-lg); box-shadow: none; }
html.lf-ui .lf-card-section .table-custom thead tr:first-child th { border-radius: 0 !important; }
html.lf-ui .lf-card-section > .mt-3:last-child { margin: 0 !important; padding: 12px 20px; border-top: 1px solid var(--lf-border); }
html.lf-ui .lf-card-section > .mt-3:last-child:empty { display: none; }
html.lf-ui .lf-card-section > .card { border: 0; box-shadow: none; border-top: 1px solid var(--lf-border); border-radius: 0 0 var(--lf-r-lg) var(--lf-r-lg); }
html.lf-ui .lf-view-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; height: 40px; }
html.lf-ui .lf-view-all i { font-size: 11px; transform: scaleX(var(--lf-dir-x)); }

/* ===================================================================== 13. Statistics */

html.lf-ui main h2.small.text-uppercase { font-size: 11px !important; letter-spacing: .07em; color: var(--lf-text-3) !important; }
html.lf-ui #daterangepicker.btn { height: 40px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

html.lf-ui .daterangepicker { background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-r-lg); box-shadow: var(--lf-shadow-md); color: var(--lf-text); font-family: var(--lf-font); }
html.lf-ui .daterangepicker .calendar-table { background: var(--lf-surface); border-color: var(--lf-surface); }
html.lf-ui .daterangepicker td.available:hover, html.lf-ui .daterangepicker th.available:hover { background: var(--lf-hover); }
html.lf-ui .daterangepicker td.in-range { background: var(--lf-primary-soft); color: var(--lf-text); }
html.lf-ui .daterangepicker td.active, html.lf-ui .daterangepicker td.active:hover { background: var(--lf-primary); color: var(--lf-on-primary); }
html.lf-ui .daterangepicker .ranges li.active { background: var(--lf-primary); color: var(--lf-on-primary); }
html.lf-ui .daterangepicker .ranges li:hover { background: var(--lf-hover); }

/* Data preview cards: bar rows in the chart colour */
html.lf-ui .card .progress-bar { background-color: var(--lf-chart-1); }

/* ===================================================================== 14. Account */

/* AltumCode shows the account menu as a grid of tab buttons: four per row, like the design */
@media (min-width: 992px) {
    html.lf-ui main .row.d-lg-flex > .col-lg-4:has(> .btn-custom) { flex: 0 0 25%; max-width: 25%; }
}

html.lf-ui main .row.d-lg-flex:has(> .col-lg-4 > .btn-custom) { margin-left: -4px !important; margin-right: -4px !important; }
html.lf-ui main .row.d-lg-flex > .col-lg-4:has(> .btn-custom) { padding: 4px !important; }
html.lf-ui main .btn-custom[href$="account-delete"] { color: var(--lf-danger); }
html.lf-ui main .btn-custom[href$="account-delete"] i { color: var(--lf-danger); }
html.lf-ui main .btn-custom[href$="account-delete"].active { background: var(--lf-danger-soft); border-color: color-mix(in srgb, var(--lf-danger) 45%, transparent); }

/* Section titles inside cards */
html.lf-ui .card-body > h2.h5:first-child,
html.lf-ui .card-body > h2.h4:first-child { font-size: 16px; margin-bottom: 4px; }

/* Pricing / plans */
html.lf-ui .pricing-plan { border-radius: var(--lf-r-xl); }
html.lf-ui .pricing-header { background: var(--lf-surface-2); border-color: var(--lf-border); }
html.lf-ui body[data-theme-style="dark"] .pricing-header { background: var(--lf-surface-2); }
html.lf-ui .pricing-name { color: var(--lf-text); }
html.lf-ui .pricing-tag { background: var(--lf-secondary-soft); color: var(--lf-secondary-text); border-radius: var(--lf-r-pill); }
html.lf-ui .pricing-features li { color: var(--lf-text-2); }

/* API docs code blocks */
html.lf-ui pre, html.lf-ui .shiki { border-radius: var(--lf-r-lg); }

/* ===================================================================== 15. Footer */

html.lf-ui[data-lf-wrapper="app"] .app-footer {
    margin: 40px 0 24px;
    padding: 24px;
    background: var(--lf-surface-2);
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-r-xl);
    color: var(--lf-text-2);
    font-size: 13px;
}

html.lf-ui .app-footer .footer-heading,
html.lf-ui .app-footer .footer-heading span {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.035em;
    background: var(--lf-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

html.lf-ui .app-footer .footer-heading:has(img) { background: none; }
html.lf-ui .app-footer .footer-logo { height: 28px; max-height: 28px; }

html.lf-ui .app-footer a:not(.dropdown-item):not(.btn) { color: var(--lf-text-2) !important; }
html.lf-ui .app-footer a:not(.dropdown-item):not(.btn):hover { color: var(--lf-text) !important; text-decoration: none; }
html.lf-ui .app-footer .row > [class*="col"] ul > li.font-weight-600 { font-size: 11px; font-weight: 700 !important; letter-spacing: .07em; text-transform: uppercase; color: var(--lf-text-3); margin-bottom: 10px !important; }
html.lf-ui .app-footer .row > [class*="col"] ul { font-size: 13px; }
html.lf-ui .app-footer .text-muted.font-size-small { font-size: 13px; line-height: 1.55; }
html.lf-ui .app-footer .footer-social-wrapper { width: 32px; height: 32px; }

/* Bottom bar (linksflow-ui.js moves the copyright and the switches here) */
html.lf-ui .lf-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--lf-border);
}

html.lf-ui .lf-footer-bottom > .text-center { text-align: start !important; margin: 0 !important; font-size: 12px; color: var(--lf-text-3) !important; }

html.lf-ui .lf-footer-tools {
    display: inline-flex !important;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-r-lg);
    background: var(--lf-surface);
    box-shadow: var(--lf-shadow-xs);
}

html.lf-ui .lf-footer-tools > div { margin: 0 !important; }

html.lf-ui .lf-footer-tools .btn-link {
    height: 32px;
    min-width: 32px;
    padding: 0 8px !important;
    border-radius: var(--lf-r);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--lf-text-2) !important;
}

html.lf-ui .lf-footer-tools .btn-link:hover { background: var(--lf-hover); color: var(--lf-text) !important; }
html.lf-ui .lf-footer-tools .fa-sun { color: var(--lf-brand-1) !important; }
html.lf-ui .lf-footer-tools .lf-design-trigger { padding: 0 10px !important; font-size: 13px; }
html.lf-ui .lf-footer-tools .lf-design-trigger i { color: var(--lf-text-2) !important; }

/* ===================================================================== 16. LinksFlow features */

/* Upgrade card (UpgradeButton.php, Free plan) */
html.lf-ui .lf-upgrade-card-wrapper { padding: 12px 12px 4px; }

html.lf-ui .lf-upgrade-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--lf-r-lg);
    border: 1px solid var(--lf-border);
    background: var(--lf-surface);
    color: var(--lf-text) !important;
    text-decoration: none !important;
    transition: border-color .15s, box-shadow .15s;
}

html.lf-ui .lf-upgrade-card:hover { border-color: var(--lf-border-strong); box-shadow: var(--lf-shadow-sm); }

html.lf-ui .lf-upgrade-card-icon {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: var(--lf-r);
    background: var(--lf-brand-gradient);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 12px;
}

html.lf-ui .lf-upgrade-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
html.lf-ui .lf-upgrade-card-title { font-size: 13px; font-weight: 700; }
html.lf-ui .lf-upgrade-card-subtitle { font-size: 12px; color: var(--lf-text-3); }
html.lf-ui .lf-upgrade-card-arrow { font-size: 12px; color: var(--lf-text-4); transform: scaleX(var(--lf-dir-x)) !important; }

/* Ad-free allowance (Allowance.php → views/dashboard/allowance_card_ui.php) */
html.lf-ui .lf-allowance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    padding: 14px 18px;
    background: var(--lf-surface);
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-r-lg);
    box-shadow: var(--lf-shadow-xs);
    margin-bottom: 24px !important;
    --lf-allowance-color: var(--lf-success);
    --lf-allowance-soft: var(--lf-success-soft);
}

html.lf-ui .lf-allowance[data-linksflow-allowance="low"] { --lf-allowance-color: var(--lf-warning); --lf-allowance-soft: var(--lf-warning-soft); }
html.lf-ui .lf-allowance[data-linksflow-allowance="exhausted"] { --lf-allowance-color: var(--lf-danger); --lf-allowance-soft: var(--lf-danger-soft); border-color: color-mix(in srgb, var(--lf-danger) 30%, var(--lf-border)); }

html.lf-ui .lf-allowance-main { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
html.lf-ui .lf-allowance-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
html.lf-ui .lf-allowance-title { font-size: 13px; font-weight: 600; color: var(--lf-text); }
html.lf-ui .lf-allowance-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--lf-r-pill); background: var(--lf-allowance-soft); color: var(--lf-allowance-color); }
html.lf-ui .lf-allowance-count { margin-inline-start: auto; font-size: 13px; color: var(--lf-text-3); font-variant-numeric: tabular-nums; }
html.lf-ui .lf-allowance-count strong { color: var(--lf-text); font-weight: 700; }
html.lf-ui .lf-allowance-bar { height: 6px; border-radius: var(--lf-r-pill); background: var(--lf-surface-3); overflow: hidden; }
html.lf-ui .lf-allowance-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--lf-allowance-color); transition: width .4s ease; }
html.lf-ui .lf-allowance-message { font-size: 12px; color: var(--lf-text-3); text-wrap: pretty; }
html.lf-ui .lf-allowance[data-linksflow-allowance="exhausted"] .lf-allowance-message { color: var(--lf-danger); }
html.lf-ui .lf-allowance-plan { margin-inline-start: 6px; color: var(--lf-text-4); }
html.lf-ui .lf-allowance-plan::before { content: "·"; margin-inline-end: 6px; }

html.lf-ui .lf-allowance-upgrade {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
    background: var(--lf-surface);
    border: 1px solid var(--lf-border);
    color: var(--lf-text) !important;
    box-shadow: var(--lf-shadow-xs);
}

html.lf-ui .lf-allowance-upgrade:hover { background: var(--lf-hover); border-color: var(--lf-border-strong); }
html.lf-ui .lf-allowance-upgrade i { margin: 0 !important; font-size: 11px; }
html.lf-ui .lf-allowance[data-linksflow-allowance="exhausted"] .lf-allowance-upgrade,
html.lf-ui .lf-allowance[data-linksflow-allowance="low"] .lf-allowance-upgrade { background: var(--lf-primary); border-color: var(--lf-primary); color: var(--lf-on-primary) !important; }

/* Shop block analytics and editor (Shop feature) keep their own layout; only colours follow the theme */
html.lf-ui .linksflow-shop-stat, html.lf-ui [class*="linksflow-shop"] .card { border-radius: var(--lf-r-lg); }

/* Welcome / demo video modal (Videos.php) */
html.lf-ui [id^="linksflow_video"] .modal-content { overflow: hidden; }

/* ===================================================================== 17. Sign-in pages (basic_wrapper) */

html.lf-ui[data-lf-wrapper="basic"] body { background: var(--lf-shell) !important; }
html.lf-ui[data-lf-wrapper="basic"] body.login-background,
html.lf-ui[data-lf-wrapper="basic"] body.register-background { background-image: none; }

html.lf-ui[data-lf-wrapper="basic"] main > .container .card {
    border-radius: var(--lf-r-xl) !important;
    box-shadow: var(--lf-shadow-sm);
}

html.lf-ui[data-lf-wrapper="basic"] main > .container .card-body.p-5 { padding: clamp(24px, 5vw, 40px) !important; }
html.lf-ui[data-lf-wrapper="basic"] main h1.h5 { font-size: 22px; letter-spacing: -0.02em; }
html.lf-ui[data-lf-wrapper="basic"] .navbar-logo { max-height: 40px; }
html.lf-ui[data-lf-wrapper="basic"] .btn-block { height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; }
html.lf-ui[data-lf-wrapper="basic"] .btn-light.btn-block img { width: 18px; height: 18px; margin: 0 !important; }

/* ===================================================================== 18. Density (Admin -> LinksFlow -> Design) */

html.lf-ui[data-lf-density="compact"] .table-custom td { padding: 9px 16px; }
html.lf-ui[data-lf-density="compact"] .table-custom thead th { padding: 8px 16px; }
html.lf-ui[data-lf-density="compact"] .card-body { padding: 16px; }
html.lf-ui[data-lf-density="compact"] .app-sidebar-links > li > a { height: 32px; }

/* ===================================================================== 19. Responsive, print, motion */

@media (max-width: 991.98px) {
    html.lf-ui[data-lf-wrapper="app"] .app-content > .pt-lg-5 { padding: 16px 4px 0; }
    html.lf-ui[data-lf-wrapper="app"] .app-footer { margin-top: 24px; padding: 20px; }
    html.lf-ui .lf-page-head h1 { font-size: 22px; }
}

@media (max-width: 575.98px) {
    /* Link lists become stacked rows with 40px hit targets */
    html.lf-ui .table-custom td { padding: 12px 14px; }
    html.lf-ui .table-custom .btn-link { width: 40px; height: 40px; }
    html.lf-ui .lf-page-head-actions, html.lf-ui .lf-page-head-actions > div, html.lf-ui .lf-page-head-actions .dropdown, html.lf-ui .lf-page-head-actions .btn { width: 100%; justify-content: center; }

    /* Tables become a card list: each row wraps, actions stay reachable without sideways scrolling */
    html.lf-ui[data-lf-wrapper="app"] .table-custom thead { display: none; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom,
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody { display: block; width: 100%; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
        padding: 14px;
        border-top: 1px solid var(--lf-border);
    }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:first-child { border-top: 0; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        min-width: 0;
        max-width: 100%;
    }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr td.d-none { display: none !important; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr td:nth-child(2) { flex: 1 1 calc(100% - 40px); }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr td:last-child { margin-inline-start: auto; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr td > .mx-2:first-child { margin-inline-start: 0 !important; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom-container { overflow: visible; }
    html.lf-ui .lf-allowance-upgrade { width: 100%; justify-content: center; }
    html.lf-ui .lf-footer-bottom { justify-content: center; }
    html.lf-ui .lf-footer-bottom > .text-center { text-align: center !important; }
}

@media print {
    html.lf-ui[data-lf-wrapper="app"] .app-content { margin: 0; border: 0; box-shadow: none; }
    html.lf-ui .lf-sidebar-search, html.lf-ui .lf-footer-tools { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    html.lf-ui *, html.lf-ui *::before, html.lf-ui *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===================================================================== 20. Page layouts (linksflow-ui-pages.js)
   Blocks the page script builds from AltumCode's own elements. */

html.lf-ui .lf-hidden { display: none !important; }

html.lf-ui .lf-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--lf-text-3); margin-bottom: 10px; }
html.lf-ui .lf-crumbs a { color: var(--lf-text-3); }
html.lf-ui .lf-crumbs a:hover { color: var(--lf-text); }
html.lf-ui .lf-crumbs i { font-size: 10px; color: var(--lf-text-4); }
html.lf-ui .lf-crumbs span { color: var(--lf-text); font-weight: 600; }

html.lf-ui .lf-yes { color: var(--lf-success); font-size: 12px; }
html.lf-ui .lf-no { color: var(--lf-text-4); font-size: 12px; }

/* Segmented controls: AltumCode's frequency switch and the summary toggle */
html.lf-ui .btn-group-custom,
html.lf-ui .lf-segmented {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: var(--lf-r);
    background: var(--lf-surface-3);
    border: 1px solid var(--lf-border);
}

html.lf-ui .btn-group-custom .btn,
html.lf-ui .lf-segmented button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--lf-r-sm) !important;
    background: transparent;
    color: var(--lf-text-3);
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
    cursor: pointer;
}

html.lf-ui .btn-group-custom .btn.active,
html.lf-ui .lf-segmented button.active { background: var(--lf-surface); color: var(--lf-text); box-shadow: var(--lf-shadow-xs); }
html.lf-ui .lf-segmented { display: flex; width: 100%; }
html.lf-ui .lf-segmented button { flex: 1; justify-content: center; }
html.lf-ui .lf-save { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: var(--lf-r-pill); background: var(--lf-success-soft); color: var(--lf-success); }

/* ---- Plan page */
html.lf-ui .lf-plans-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
html.lf-ui .lf-plans-title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
html.lf-ui .lf-plans-subtitle { margin: 4px 0 0; font-size: 14px; color: var(--lf-text-2); }
html.lf-ui .lf-plans-subtitle br { display: none; }
html.lf-ui .lf-plans-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html.lf-ui .lf-plans-tools .dropdown { margin: 0 !important; }
html.lf-ui .lf-plans-tools #currency_switch { height: 38px; padding: 0 12px !important; border-radius: var(--lf-r) !important; font-size: 13px; }

html.lf-ui .lf-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; margin-bottom: 24px; }

html.lf-ui .lf-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px 20px 20px;
    background: var(--lf-surface);
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-r-lg);
    box-shadow: var(--lf-shadow-xs);
}

html.lf-ui .lf-plan-card.is-featured { border-color: var(--lf-primary); box-shadow: 0 0 0 1px var(--lf-primary), var(--lf-shadow-sm); }

html.lf-ui .lf-plan-card .lf-plan-tag {
    position: absolute;
    top: -11px;
    left: 16px;
    right: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    margin: 0;
    border-radius: var(--lf-r-pill);
    background: var(--lf-text);
    color: var(--lf-surface);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transform: none;
    width: auto;
}

html.lf-ui .lf-plan-card.is-featured .lf-plan-tag:not([style*="background"]) { background: var(--lf-brand-2); color: #FFFFFF; }
html.lf-ui .lf-plan-card .lf-plan-tag i { font-size: 10px; }

html.lf-ui .lf-plan-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 24px; }
html.lf-ui .lf-plan-name { font-size: 15px; font-weight: 700; margin-inline-end: auto; }
html.lf-ui .lf-plan-top .badge { font-size: 11px; padding: 2px 7px; margin: 0 !important; }
html.lf-ui .lf-plan-yours { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--lf-r-pill); background: var(--lf-surface-3); color: var(--lf-text-2); }

html.lf-ui .lf-plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
html.lf-ui .lf-plan-price .pricing-price { display: inline-flex; align-items: baseline; gap: 4px; margin: 0; padding: 0; }
html.lf-ui .lf-plan-price .pricing-price-amount { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--lf-text); font-variant-numeric: tabular-nums; }
html.lf-ui .lf-plan-price .pricing-price-currency,
html.lf-ui .lf-plan-price .pricing-price-currency-symbol { font-size: 12px; font-weight: 600; color: var(--lf-text-3); position: static; margin: 0; }
html.lf-ui .lf-plan-period { font-size: 13px; color: var(--lf-text-3); }
html.lf-ui .lf-plan-billed { font-size: 12px; color: var(--lf-text-3); min-height: 18px; margin-top: 2px; }

html.lf-ui .lf-plan-features { list-style: none; margin: 14px 0 18px; padding: 14px 0 0; border-top: 1px solid var(--lf-border); display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--lf-text); }
html.lf-ui .lf-plan-features li { display: flex; align-items: baseline; gap: 8px; }
html.lf-ui .lf-plan-features li.is-off { color: var(--lf-text-3); }
html.lf-ui .lf-plan-features strong { font-weight: 700; }
html.lf-ui .lf-plan-features .text-gray-500 { display: none; }

html.lf-ui .lf-plan-button { margin-top: auto; width: 100%; height: 40px; display: inline-flex; align-items: center; justify-content: center; }

/* Comparison table */
html.lf-ui .lf-compare { background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-r-lg); box-shadow: var(--lf-shadow-xs); margin-bottom: 24px; overflow: hidden; }
html.lf-ui .lf-compare-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; padding: 16px 20px; }
html.lf-ui .lf-compare-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
html.lf-ui .lf-compare-head span { font-size: 12px; color: var(--lf-text-3); }
html.lf-ui .lf-compare-scroll { overflow-x: auto; }
html.lf-ui .lf-compare-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13px; }
html.lf-ui .lf-compare-table th,
html.lf-ui .lf-compare-table td { padding: 10px 16px; border-top: 1px solid var(--lf-border); text-align: center; vertical-align: middle; }
html.lf-ui .lf-compare-table thead th { background: var(--lf-surface-2); font-size: 12px; font-weight: 600; color: var(--lf-text-2); }
html.lf-ui .lf-compare-table thead th:first-child,
html.lf-ui .lf-compare-table tbody th { text-align: start; font-weight: 500; color: var(--lf-text-2); }
html.lf-ui .lf-compare-table tbody th,
html.lf-ui .lf-compare-table thead th:first-child { position: sticky; left: 0; background: var(--lf-surface); z-index: 1; min-width: 200px; }
html.lf-ui .lf-compare-table thead th:first-child { background: var(--lf-surface-2); }
html.lf-ui .lf-compare-plan { display: block; color: var(--lf-text); font-weight: 600; font-size: 13px; }
html.lf-ui .lf-compare-price { display: block; font-size: 11px; font-weight: 500; color: var(--lf-text-3); }
html.lf-ui .lf-compare-table .is-featured { background: color-mix(in srgb, var(--lf-primary) 6%, transparent); }
html.lf-ui .lf-compare-table thead th.is-featured { background: color-mix(in srgb, var(--lf-primary) 9%, var(--lf-surface-2)); }
html.lf-ui .lf-compare-table td strong { font-weight: 600; color: var(--lf-text); }
html.lf-ui .lf-compare-group th { padding: 16px 16px 6px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .07em; text-transform: uppercase; color: var(--lf-text-3) !important; background: var(--lf-surface) !important; text-align: start !important; }
html.lf-ui .lf-compare-group th i { margin-inline-end: 6px; font-size: 11px; }
html.lf-ui .lf-compare-table .lf-tip { color: var(--lf-text-4); font-size: 11px; margin-inline-start: 4px; cursor: help; }
html.lf-ui .lf-compare-table tfoot td { padding: 14px 10px; }
html.lf-ui .lf-compare-table tfoot .btn { width: 100%; height: 36px; display: inline-flex; align-items: center; justify-content: center; }

/* "Why" cards under plans and payment (AltumCode .index-icon-container) */
html.lf-ui .lf-page-plans .mt-6.row,
html.lf-ui .lf-page-pay ~ .row,
html.lf-ui main .row:has(> [data-aos] .index-icon-container) { margin-top: 8px !important; }
html.lf-ui main .card:has(.index-icon-container) .card-body { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: start; padding: 16px 18px; }
html.lf-ui main .card:has(.index-icon-container) .index-icon-container { grid-row: span 2; width: 40px; height: 40px; margin: 0 !important; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--lf-primary-soft); }
html.lf-ui main .card:has(.index-icon-container) .index-icon-container i { color: var(--lf-primary-text) !important; font-size: 15px; }
html.lf-ui main .card:has(.index-icon-container) h2 { font-size: 14px; font-weight: 700; margin: 0 0 2px !important; }
html.lf-ui main .card:has(.index-icon-container) small { font-size: 13px; line-height: 1.5; }
html.lf-ui main .card:has(.index-icon-container).up-animation:hover { transform: none; }

/* FAQ: one card with rows */
html.lf-ui main .mt-7 > h2.h4 { font-size: 18px; margin-top: 32px; }
html.lf-ui .lf-faq { background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-r-lg); box-shadow: var(--lf-shadow-xs); overflow: hidden; margin-top: 12px !important; }
html.lf-ui .lf-faq > .card { border: 0; border-top: 1px solid var(--lf-border); border-radius: 0; box-shadow: none; margin: 0; }
html.lf-ui .lf-faq > .card:first-child { border-top: 0; }
html.lf-ui .lf-faq > .card > .card-body { padding: 4px 20px; }
html.lf-ui .lf-faq h3 .btn { font-size: 14px; font-weight: 600 !important; color: var(--lf-text) !important; padding: 12px 0 !important; box-shadow: none !important; align-items: center; }
html.lf-ui .lf-faq [data-icon] i { color: var(--lf-text-3) !important; font-size: 15px; }
html.lf-ui .lf-faq .collapse, html.lf-ui .lf-faq .collapsing { font-size: 13px; padding-bottom: 14px; margin-top: 0 !important; }

/* ---- Billing step */
html.lf-ui .lf-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
html.lf-ui .lf-checkout > .card { margin: 0; }
html.lf-ui .lf-checkout .lf-summary { position: sticky; top: 24px; }
@media (max-width: 991.98px) { html.lf-ui .lf-checkout { grid-template-columns: 1fr; } html.lf-ui .lf-checkout .lf-summary { position: static; } }

html.lf-ui .lf-summary,
html.lf-ui .lf-pay-summary { background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-r-lg); box-shadow: var(--lf-shadow-xs); padding: 16px 18px; }
html.lf-ui .lf-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
html.lf-ui .lf-summary-head span { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lf-text-3); }
html.lf-ui .lf-summary-head a { font-size: 13px; font-weight: 600; }
html.lf-ui .lf-summary-plan { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
html.lf-ui .lf-summary-plan-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--lf-primary-soft); color: var(--lf-primary-text); }
html.lf-ui .lf-summary-plan-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
html.lf-ui .lf-summary-plan small { display: block; font-size: 12px; color: var(--lf-text-3); }
html.lf-ui .lf-summary-tag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--lf-r-pill); background: var(--lf-secondary-soft); color: var(--lf-secondary-text); }
html.lf-ui .lf-summary .lf-plan-features { margin: 14px 0; }
html.lf-ui .lf-summary-total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 14px; border-top: 1px solid var(--lf-border); font-size: 14px; font-weight: 600; }
html.lf-ui .lf-summary-amount strong { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
html.lf-ui .lf-summary-amount small { font-size: 12px; color: var(--lf-text-3); font-weight: 500; }
html.lf-ui .lf-summary-note { display: block; margin-top: 4px; font-size: 12px; color: var(--lf-text-3); }
html.lf-ui .lf-secure-note { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--lf-text-3); }
html.lf-ui .lf-secure-note i { font-size: 10px; margin-inline-end: 4px; }
html.lf-ui .lf-page-billing form [type="submit"] .lf-arrow { font-size: 12px; margin-inline-start: 4px; transform: scaleX(var(--lf-dir-x)); }

/* ---- Payment step */
html.lf-ui .lf-step-title { display: flex; align-items: center; gap: 10px; font-size: 15px !important; font-weight: 700; margin-bottom: 12px !important; }
html.lf-ui .lf-step-title > i { display: none; }
html.lf-ui .lf-step-title.mt-5 { margin-top: 28px !important; }
html.lf-ui .lf-step { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--lf-text); color: var(--lf-surface); font-size: 12px; font-weight: 700; }

/* Radio dot in the option cards (frequency, method, type) */
html.lf-ui .lf-pay-form .custom-radio-box > input + .card > .card-body { position: relative; padding: 14px 16px 14px 46px; min-height: 60px; }
html.lf-ui .lf-pay-form .custom-radio-box > input + .card > .card-body::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 1.5px solid var(--lf-border-strong); background: var(--lf-surface); transition: border .15s; }
html.lf-ui .lf-pay-form .custom-radio-box > input:checked + .card > .card-body::before { border: 5px solid var(--lf-primary); }
html.lf-ui[dir="rtl"] .lf-pay-form .custom-radio-box > input + .card > .card-body { padding: 14px 46px 14px 16px; }
html.lf-ui[dir="rtl"] .lf-pay-form .custom-radio-box > input + .card > .card-body::before { left: auto; right: 16px; }
html.lf-ui .lf-pay-form .custom-radio-box .card-title { font-size: 14px; font-weight: 600; }
html.lf-ui .lf-pay-form .custom-radio-box-main-text { font-size: 16px; font-weight: 700; }
html.lf-ui .lf-pay-form .custom-radio-box-main-icon { width: 32px; height: 32px; border-radius: var(--lf-r); display: inline-flex; align-items: center; justify-content: center; background: var(--lf-surface-3); }
html.lf-ui .lf-pay-form .payment-price-savings, html.lf-ui .lf-pay-form [id$="_price_savings"] { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: var(--lf-r-pill); background: var(--lf-success-soft); color: var(--lf-success); }

/* "What you'll get" under the steps */
html.lf-ui .lf-pay-features { margin-top: 28px !important; margin-bottom: 0 !important; }
html.lf-ui .lf-pay-features > h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 15px !important; font-weight: 700; margin-bottom: 12px !important; }
html.lf-ui .lf-pay-features > h2 > i { color: var(--lf-text-3); }
html.lf-ui .lf-pay-features-count { font-size: 12px; font-weight: 500; color: var(--lf-text-3); }
html.lf-ui .lf-link-button { margin-inline-start: auto; border: 0; background: none; color: var(--lf-primary-text); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; }
html.lf-ui .lf-link-button i { font-size: 10px; }
html.lf-ui .lf-pay-features ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px 24px; font-size: 13px; }
html.lf-ui .lf-pay-features ul li { margin: 0 !important; }
html.lf-ui .lf-pay-features ul li > i:first-child { margin-right: 8px !important; }
html.lf-ui .lf-pay-features ul .collapse { display: contents; }
html.lf-ui .lf-pay-features ul > .d-flex:has(> [data-toggle="collapse"]) { display: none !important; }
html.lf-ui .lf-pay-features.is-collapsed ul li:nth-of-type(n+13) { display: none !important; }
html.lf-ui .lf-pay-features.is-collapsed ul .collapse li { display: none !important; }

/* Order summary on the right */
html.lf-ui .lf-pay-summary { padding: 16px 18px; }
html.lf-ui .lf-pay-summary > .card-body,
html.lf-ui .lf-pay-summary > .card-footer { padding: 0; background: transparent !important; border: 0; }
html.lf-ui .lf-pay-summary > .card-body { font-size: 13px; }
html.lf-ui .lf-pay-summary > .card-footer { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--lf-border); font-size: 14px; }
html.lf-ui .lf-pay-summary #summary_total { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--lf-text); }
html.lf-ui .lf-pay-checkout { margin-top: 16px; }
html.lf-ui .lf-pay-checkout .btn { height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; }
html.lf-ui .lf-pay-checkout .btn .d-none { display: none !important; }
html.lf-ui .lf-pay-checkout .btn .lf-lock { font-size: 12px; }
html.lf-ui .lf-pay-checkout .text-muted.text-center { margin-top: 10px !important; font-size: 12px; line-height: 1.5; }
html.lf-ui .lf-pay-secure { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--lf-text-2, var(--lf-muted)); text-align: center; }
html.lf-ui .lf-pay-secure:empty { display: none; }
html.lf-ui .lf-pay-secure > i { color: var(--lf-success, #16a34a); font-size: 11px; margin-top: 3px; }
html.lf-ui .lf-pay-secure > span { font-weight: 600; color: var(--lf-text-2); }
html.lf-ui .lf-pay-secure-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html.lf-ui .lf-pay-secure-accepts { display: block; font-weight: 400; color: var(--lf-text-3); }
html.lf-ui .lf-page-pay .sticky { top: 24px; }

/* ---- Empty states */
html.lf-ui .lf-empty { padding: 40px 16px !important; gap: 18px; text-align: center; }
html.lf-ui .lf-empty-card { border-radius: var(--lf-r-lg); }
html.lf-ui .lf-empty-art { display: flex; justify-content: center; margin: 0; }
html.lf-ui .lf-empty-tile {
    width: 48px; height: 48px; border-radius: 14px; background: var(--lf-surface);
    box-shadow: 0 0 0 1px var(--lf-border), var(--lf-shadow-sm);
    display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
html.lf-ui .lf-empty-tile:nth-child(1) { transform: rotate(-8deg); }
html.lf-ui .lf-empty-tile:nth-child(2) { position: relative; margin-inline-start: -6px; margin-top: -8px; }
html.lf-ui .lf-empty-tile:nth-child(3) { margin-inline-start: -6px; transform: rotate(8deg); }
html.lf-ui .lf-empty-tile.is-flat { width: 40px; height: 40px; border-radius: 12px; transform: none; color: var(--lf-text-3); font-size: 16px; background: var(--lf-surface-3); box-shadow: none; }
html.lf-ui .lf-empty-art.is-chips { gap: 6px; flex-wrap: wrap; }
html.lf-ui .lf-empty-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--lf-r-pill); background: var(--lf-surface); box-shadow: 0 0 0 1px var(--lf-border), var(--lf-shadow-sm); font-size: 13px; font-weight: 600; color: var(--lf-text); }
html.lf-ui .lf-empty-chip:nth-child(1) { transform: rotate(-6deg); }
html.lf-ui .lf-empty-chip:nth-child(2) { margin-top: -10px; }
html.lf-ui .lf-empty-chip:nth-child(3) { transform: rotate(6deg); }
html.lf-ui .lf-empty-chip span { width: 7px; height: 7px; border-radius: 50%; }
html.lf-ui .lf-empty .lf-empty-title { margin: 0 !important; font-size: 18px; font-weight: 700; color: var(--lf-text) !important; }
html.lf-ui .lf-empty .lf-empty-desc { margin: -12px auto 0 !important; max-width: 440px; font-size: 14px !important; line-height: 1.55; color: var(--lf-text-2) !important; text-wrap: pretty; }
html.lf-ui .lf-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
html.lf-ui .lf-empty-actions .btn { height: 40px; display: inline-flex; align-items: center; gap: 8px; }
html.lf-ui .lf-empty-actions .btn i { font-size: 12px; margin: 0 !important; }
html.lf-ui .lf-empty.is-small { padding: 32px 16px !important; gap: 10px; }
html.lf-ui .lf-empty.is-small .lf-empty-title { font-size: 15px; }
html.lf-ui .lf-empty.is-small .lf-empty-desc { margin-top: -6px !important; font-size: 13px !important; max-width: 340px; }

/* ---- Account pages */
html.lf-ui .lf-account-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
html.lf-ui .lf-account-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--lf-border); }
html.lf-ui .lf-account-avatar.is-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--lf-secondary-soft); color: var(--lf-secondary-text); font-size: 15px; font-weight: 700; box-shadow: none; }
html.lf-ui .lf-account-head h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
html.lf-ui .lf-account-meta { margin-top: 3px; font-size: 13px; color: var(--lf-text-3); }
html.lf-ui .lf-account-tabs { margin-bottom: 20px !important; }

/* Section cards: title + description in a header row */
html.lf-ui .lf-section-card { margin-bottom: 20px; }
html.lf-ui .lf-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 16px 20px; border-bottom: 1px solid var(--lf-border); }
html.lf-ui .lf-card-head h2 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
html.lf-ui .lf-card-head p { flex-basis: 100%; order: 3; margin: 0; font-size: 13px; color: var(--lf-text-3); text-wrap: pretty; }
html.lf-ui .lf-card-head:has(.lf-card-icon) p { padding-inline-start: 54px; margin-top: -4px; }
html.lf-ui .lf-card-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--lf-surface-3); color: var(--lf-text-2); font-size: 15px; }
html.lf-ui .lf-card-icon i { margin: 0 !important; }
html.lf-ui .lf-section-card > .card-body { padding: 20px; }

html.lf-ui .lf-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 4px 16px; align-items: start; }
html.lf-ui .lf-field-grid > .form-group:has(.altum-file-input, textarea, .custom-control, [data-file-image-input-wrapper], .input-group),
html.lf-ui .lf-field-grid > .form-group[data-file-image-input-wrapper],
html.lf-ui .lf-field-grid > .custom-control { grid-column: 1 / -1; }
html.lf-ui .lf-field-grid > script { display: none; }

/* Labels without the AltumCode icons, like the design */
html.lf-ui .lf-section-card label > i.text-muted:first-child,
html.lf-ui .lf-acc-body label > i.text-muted:first-child { display: none; }

/* 2FA as one row with a switch */
html.lf-ui .lf-twofa .lf-card-head { border-bottom: 0; }
html.lf-ui .lf-twofa.is-open .lf-card-head { border-bottom: 1px solid var(--lf-border); }
html.lf-ui .lf-twofa > .card-body:not(:has(> :not(.lf-hidden):not(script))) { display: none; }
html.lf-ui .lf-twofa:not(.is-open) > .card-body { display: none; }
html.lf-ui .lf-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--lf-r-pill); background: var(--lf-surface-3); color: var(--lf-text-3); }
html.lf-ui .lf-badge.is-on { background: var(--lf-success-soft); color: var(--lf-success); }

/* Switch control used by the page script */
html.lf-ui .lf-switch { position: relative; flex: none; width: 36px; height: 20px; margin: 0; cursor: pointer; }
html.lf-ui .lf-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
html.lf-ui .lf-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--lf-switch-off); transition: background .18s; }
html.lf-ui .lf-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(15, 23, 42, .25); transition: transform .18s; }
html.lf-ui .lf-switch input:checked + span { background: var(--lf-primary); }
html.lf-ui .lf-switch input:checked + span::after { transform: translateX(16px); }
html.lf-ui .lf-switch input:focus-visible + span { box-shadow: var(--lf-focus); }

/* Sticky save bar */
html.lf-ui .lf-savebar { position: sticky; bottom: 12px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; padding: 12px 14px; background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-r-lg); box-shadow: var(--lf-shadow-md); }
html.lf-ui .lf-savebar > span { flex: 1; min-width: 160px; font-size: 13px; color: var(--lf-text-3); }
html.lf-ui .lf-savebar .btn { height: 40px; }

/* Preferences accordions */
html.lf-ui .lf-card-plain { background: transparent; border: 0; box-shadow: none; }
html.lf-ui .lf-card-plain > .card-body { padding: 0; }
html.lf-ui .lf-acc { background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-r-lg); box-shadow: var(--lf-shadow-xs); margin-bottom: 12px; overflow: hidden; }
html.lf-ui .lf-acc-head { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 0; background: transparent; text-align: start; color: var(--lf-text); cursor: pointer; }
html.lf-ui .lf-acc-head:hover { background: var(--lf-surface-2); }
html.lf-ui .lf-acc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
html.lf-ui .lf-acc-text strong { font-size: 15px; font-weight: 700; }
html.lf-ui .lf-acc-text small { font-size: 13px; color: var(--lf-text-3); }
html.lf-ui .lf-acc-chevron { color: var(--lf-text-3); font-size: 12px; transition: transform .2s; }
html.lf-ui .lf-acc-head[aria-expanded="true"] .lf-acc-chevron { transform: rotate(180deg); }
html.lf-ui .lf-acc-body { border-top: 1px solid var(--lf-border); padding: 6px 18px 4px; }
html.lf-ui .lf-acc-body > .form-group,
html.lf-ui .lf-acc-body > div > .form-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: center; padding: 12px 0; margin: 0; border-bottom: 1px solid var(--lf-border); }
html.lf-ui .lf-acc-body .form-group:last-child { border-bottom: 0; }
html.lf-ui .lf-acc-body .form-group > label { grid-column: 1; margin: 0; }
html.lf-ui .lf-acc-body .form-group > .form-text,
html.lf-ui .lf-acc-body .form-group > small { grid-column: 1; margin: 2px 0 0; }
html.lf-ui .lf-acc-body .form-group > :not(label):not(small):not(.form-text):not(.invalid-feedback) { grid-column: 2; grid-row: 1 / span 2; }
html.lf-ui .lf-acc-body .form-group.custom-control { display: block; padding-top: 14px; padding-bottom: 14px; }
@media (max-width: 767.98px) {
    html.lf-ui .lf-acc-body > .form-group, html.lf-ui .lf-acc-body > div > .form-group { grid-template-columns: 1fr; }
    html.lf-ui .lf-acc-body .form-group > :not(label):not(small):not(.form-text):not(.invalid-feedback) { grid-column: 1; grid-row: auto; margin-top: 6px; }
}

/* ---- Account → Plan */
html.lf-ui .lf-plan-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px 20px; margin-bottom: 20px; background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-r-lg); box-shadow: var(--lf-shadow-xs); }
html.lf-ui .lf-card-icon.is-primary { background: var(--lf-primary-soft); color: var(--lf-primary-text); }
html.lf-ui .lf-card-icon.is-danger { background: var(--lf-danger-soft); color: var(--lf-danger); }
html.lf-ui .lf-plan-hero-text { flex: 1; min-width: 200px; }
html.lf-ui .lf-plan-hero-text h2 { margin: 0; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
html.lf-ui .lf-plan-hero-meta { margin: 3px 0 0 !important; font-size: 13px; color: var(--lf-text-3) !important; }
html.lf-ui .lf-plan-hero .btn { height: 38px; display: inline-flex; align-items: center; gap: 6px; }
html.lf-ui .lf-panel { background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-r-lg); box-shadow: var(--lf-shadow-xs); margin-bottom: 20px; overflow: hidden; }
html.lf-ui .lf-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--lf-border); }
html.lf-ui .lf-panel-head h2 { margin: 0; font-size: 15px; font-weight: 700; }
html.lf-ui .lf-panel-head span { font-size: 12px; color: var(--lf-text-3); }
html.lf-ui .lf-limit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
html.lf-ui .lf-limit { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--lf-border); border-inline-end: 1px solid var(--lf-border); }
html.lf-ui .lf-limit-icon { flex: none; width: 30px; height: 30px; border-radius: var(--lf-r); display: inline-flex; align-items: center; justify-content: center; background: var(--lf-surface-3); color: var(--lf-text-2); font-size: 12px; }
html.lf-ui .lf-limit strong { display: block; font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--lf-primary-text); }
html.lf-ui .lf-limit small { display: block; font-size: 12px; color: var(--lf-text-3); }
html.lf-ui .lf-limit.is-off strong { color: var(--lf-text-4); }
html.lf-ui .lf-feature-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
html.lf-ui .lf-feature-cols > div { padding: 16px 20px; border-inline-end: 1px solid var(--lf-border); }
html.lf-ui .lf-feature-cols > div:last-child { border-inline-end: 0; }
html.lf-ui .lf-feature-cols h3 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lf-text-3); }
html.lf-ui .lf-feature-cols h3 i { margin-inline-end: 4px; }
html.lf-ui .lf-feature-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
html.lf-ui .lf-feature-cols li { display: flex; align-items: baseline; gap: 8px; }
html.lf-ui .lf-feature-cols li.is-off { color: var(--lf-text-3); }
html.lf-ui .lf-higher { margin-inline-start: auto; flex: none; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: var(--lf-r-pill); background: var(--lf-secondary-soft); color: var(--lf-secondary-text); }
html.lf-ui .lf-panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--lf-border); font-size: 13px; color: var(--lf-text-3); }
html.lf-ui .lf-panel-foot:empty { display: none; }
html.lf-ui .lf-panel-foot .btn { height: 34px; display: inline-flex; align-items: center; gap: 6px; }

/* ---- Redeem code */
html.lf-ui .lf-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; }
html.lf-ui .lf-choice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--lf-border); border-radius: var(--lf-r-lg); background: var(--lf-surface); color: var(--lf-text); text-align: start; cursor: pointer; transition: border-color .15s, background .15s; }
html.lf-ui .lf-choice:hover { border-color: var(--lf-border-strong); }
html.lf-ui .lf-choice.is-selected { border-color: var(--lf-primary); background: var(--lf-primary-soft); }
html.lf-ui .lf-choice-icon { flex: none; width: 32px; height: 32px; border-radius: var(--lf-r); display: inline-flex; align-items: center; justify-content: center; background: var(--lf-surface-3); color: var(--lf-text-2); }
html.lf-ui .lf-choice.is-selected .lf-choice-icon { background: var(--lf-primary); color: var(--lf-on-primary); }
html.lf-ui .lf-choice-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
html.lf-ui .lf-choice-text strong { font-size: 14px; }
html.lf-ui .lf-choice-text small { font-size: 11px; font-weight: 600; color: var(--lf-success); }
html.lf-ui .lf-radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--lf-border-strong); background: var(--lf-surface); }
html.lf-ui .lf-choice.is-selected .lf-radio { border: 5px solid var(--lf-primary); }
html.lf-ui .lf-submit-right { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; height: 40px; }
html.lf-ui form:has(> .lf-submit-right) { display: flex; flex-direction: column; }
html.lf-ui .alert i.fa-triangle-exclamation { margin-inline-end: 6px; }

/* ---- Delete account */
html.lf-ui .lf-danger-card { border-color: color-mix(in srgb, var(--lf-danger) 45%, var(--lf-border)) !important; }
html.lf-ui .lf-danger-card .lf-card-head { display: none; }
html.lf-ui .lf-danger-head { display: flex; gap: 14px; margin-bottom: 18px; }
html.lf-ui .lf-danger-head strong { font-size: 16px; }
html.lf-ui .lf-danger-head p { margin: 2px 0 10px; font-size: 13px; color: var(--lf-text-2); }
html.lf-ui .lf-delete-counts { display: flex; flex-wrap: wrap; gap: 8px; }
html.lf-ui .lf-delete-counts span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--lf-border); border-radius: var(--lf-r); background: var(--lf-surface-2); font-size: 12px; color: var(--lf-text-2); }
html.lf-ui .lf-delete-counts strong { font-size: 12px; color: var(--lf-text); }
html.lf-ui .lf-ack { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 0; font-size: 13px; font-weight: 500; color: var(--lf-text); cursor: pointer; }
html.lf-ui .lf-ack input { margin-top: 3px; accent-color: var(--lf-danger); width: 16px; height: 16px; }
html.lf-ui .lf-danger-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 18px -20px -20px; padding: 14px 20px; border-top: 1px solid var(--lf-border); background: var(--lf-surface-2); }
html.lf-ui .lf-danger-foot .btn { height: 40px; display: inline-flex; align-items: center; gap: 8px; }
html.lf-ui .lf-danger-foot .btn-danger:disabled { opacity: .45; }

/* ---- API key and endpoints (Account → API, API documentation) */
html.lf-ui main a.card:has(.api-widget-icon), html.lf-ui main .card:has(.api-widget-icon) { transition: border-color .15s, box-shadow .15s; }
html.lf-ui main .card:has(.api-widget-icon):hover { border-color: var(--lf-primary); box-shadow: var(--lf-shadow-sm); }
html.lf-ui .api-widget-icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; display: inline-flex; align-items: center; justify-content: center; background: var(--lf-primary-soft) !important; color: var(--lf-primary-text) !important; }
html.lf-ui .api-widget-icon i { color: var(--lf-primary-text) !important; }
html.lf-ui .lf-mono { font-family: var(--lf-font-mono); font-size: 13px; letter-spacing: .02em; }
html.lf-ui .lf-api-hint { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
html.lf-ui .lf-api-hint i { font-size: 10px; }
html.lf-ui .lf-api-hint code { padding: 1px 6px; border-radius: var(--lf-r-xs); background: var(--lf-surface-3); color: var(--lf-text-2); font-size: 11px; }
html.lf-ui .lf-subhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin: 24px 0 10px; }
html.lf-ui .lf-subhead h2 { margin: 0; font-size: 15px; font-weight: 700; }
html.lf-ui .lf-subhead span { font-size: 12px; color: var(--lf-text-3); }
html.lf-ui .lf-endpoint-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; margin-bottom: 24px; }
html.lf-ui .lf-endpoint { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-r-lg); box-shadow: var(--lf-shadow-xs); color: var(--lf-text) !important; text-decoration: none !important; transition: border-color .15s; }
html.lf-ui .lf-endpoint:hover { border-color: var(--lf-primary); }
html.lf-ui .lf-endpoint-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--lf-primary-soft); color: var(--lf-primary-text); font-size: 13px; }
html.lf-ui .lf-endpoint-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
html.lf-ui .lf-endpoint-text strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.lf-ui .lf-endpoint-text code { font-size: 11px; color: var(--lf-text-3); background: none; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.lf-ui .lf-endpoint-chevron { flex: none; font-size: 11px; color: var(--lf-text-4); transform: scaleX(var(--lf-dir-x)); }

/* ---- Account logs */
html.lf-ui .lf-logs td { padding: 10px 16px; font-size: 13px; }
html.lf-ui .lf-logs thead th { padding: 10px 16px; }
html.lf-ui .lf-log-group td { padding: 12px 16px 6px !important; font-size: 11px !important; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lf-text-3); background: var(--lf-surface); }
html.lf-ui .lf-logs tbody tr.lf-log-group:hover { background: transparent; }
html.lf-ui .lf-log-event { display: flex; align-items: center; gap: 10px; min-width: 200px; }
html.lf-ui .lf-log-event > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
html.lf-ui .lf-log-event strong { font-size: 13px; font-weight: 600; }
html.lf-ui .lf-log-event code { font-size: 11px; color: var(--lf-text-3); background: none; padding: 0; }
html.lf-ui .lf-log-icon { flex: none; width: 28px; height: 28px; border-radius: var(--lf-r); display: inline-flex; align-items: center; justify-content: center; background: var(--lf-success-soft); color: var(--lf-success); font-size: 12px; }
html.lf-ui .lf-log-icon.is-danger { background: var(--lf-danger-soft); color: var(--lf-danger); }
html.lf-ui .lf-ip { display: inline-flex; align-items: center; gap: 7px; max-width: 230px; height: 26px; padding: 0 9px; border: 1px solid var(--lf-border); border-radius: var(--lf-r-sm); background: var(--lf-surface-2); color: var(--lf-text-2); font-family: var(--lf-font-mono); font-size: 12px; cursor: pointer; }
html.lf-ui .lf-ip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.lf-ui .lf-ip i { flex: none; font-size: 10px; color: var(--lf-text-4); }
html.lf-ui .lf-ip:hover { border-color: var(--lf-border-strong); color: var(--lf-text); }
html.lf-ui .lf-ip.is-copied { border-color: var(--lf-success); color: var(--lf-success); }
html.lf-ui .lf-log-device, html.lf-ui .lf-log-location { color: var(--lf-text-2); white-space: nowrap; }
html.lf-ui .lf-log-device i, html.lf-ui .lf-log-location i { color: var(--lf-text-3); font-size: 11px; margin-inline-end: 4px; }
html.lf-ui .lf-log-when { text-align: end; color: var(--lf-text-3); white-space: nowrap; }
html.lf-ui .lf-log-foot { margin: 10px 4px 0; font-size: 13px; color: var(--lf-text-3); }
html.lf-ui .lf-log-foot a { font-weight: 600; }
html.lf-ui .lf-log-foot i { margin-inline-end: 4px; }

/* ---- Create / update forms */
html.lf-ui .lf-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 22px -20px -20px; padding: 14px 20px; border-top: 1px solid var(--lf-border); background: var(--lf-surface-2); border-radius: 0 0 var(--lf-r-lg) var(--lf-r-lg); }
html.lf-ui .lf-form-foot .btn { height: 40px; display: inline-flex; align-items: center; gap: 8px; }
html.lf-ui .lf-form-foot .btn:not([type="submit"]):first-child:not(:only-of-type) { margin-inline-end: auto; }
html.lf-ui .lf-form-foot a.btn-light + button[type="submit"] { margin-inline-start: 0; }

/* Option groups (AltumCode .btn-group-toggle radios: pixel type, billing type, handler type …) */
html.lf-ui .btn-group-toggle > [class*="col"] > label.btn,
html.lf-ui .btn-group-toggle > label.btn:not(.btn-custom) {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    height: 44px;
    padding: 0 40px 0 14px;
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-r-lg);
    background: var(--lf-surface);
    color: var(--lf-text);
    font-size: 14px !important;
    font-weight: 600;
    text-align: start;
    box-shadow: none;
}
html.lf-ui .btn-group-toggle > [class*="col"] > label.btn::after,
html.lf-ui .btn-group-toggle > label.btn:not(.btn-custom)::after { content: ""; position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 1.5px solid var(--lf-border-strong); background: var(--lf-surface); }
html.lf-ui[dir="rtl"] .btn-group-toggle > [class*="col"] > label.btn::after { right: auto; left: 14px; }
html.lf-ui .btn-group-toggle > [class*="col"] > label.btn:hover { border-color: var(--lf-border-strong); background: var(--lf-surface); }
html.lf-ui .btn-group-toggle > [class*="col"] > label.btn.active,
html.lf-ui .btn-group-toggle > label.btn:not(.btn-custom).active { border-color: var(--lf-primary); background: var(--lf-primary-soft); color: var(--lf-text); }
html.lf-ui .btn-group-toggle > [class*="col"] > label.btn.active::after,
html.lf-ui .btn-group-toggle > label.btn:not(.btn-custom).active::after { border: 5px solid var(--lf-primary); }
html.lf-ui .btn-group-toggle > [class*="col"] > label.btn i { width: 18px; text-align: center; }
html.lf-ui .btn-group-toggle.row { margin: -4px !important; }
html.lf-ui .btn-group-toggle.row > [class*="col"] { padding: 4px !important; }

/* Project colour swatches */
html.lf-ui .lf-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 6px; }
html.lf-ui .lf-swatch { width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: 0 0 0 2px var(--lf-surface), 0 0 0 3px transparent; transition: box-shadow .15s; }
html.lf-ui .lf-swatch:hover { box-shadow: 0 0 0 2px var(--lf-surface), 0 0 0 3px var(--lf-border-strong); }
html.lf-ui .lf-swatch.is-selected { box-shadow: 0 0 0 2px var(--lf-surface), 0 0 0 4px var(--lf-text); }
html.lf-ui .lf-swatch-custom { display: inline-flex; margin-inline-start: 6px; }
html.lf-ui .lf-swatch-custom .pcr-button { width: 34px !important; height: 34px !important; border-radius: var(--lf-r) !important; border: 1px solid var(--lf-border-strong) !important; }
html.lf-ui .lf-swatch-hex { font-family: var(--lf-font-mono); font-size: 12px; color: var(--lf-text-3); padding: 6px 10px; border: 1px solid var(--lf-border); border-radius: var(--lf-r); }

/* Check lists inside forms (project email reports) */
html.lf-ui .lf-form-card .custom-checkbox { padding: 10px 12px 10px 40px; border: 1px solid var(--lf-border); border-radius: var(--lf-r-lg); }
html.lf-ui .lf-form-card .custom-checkbox .custom-control-label::before,
html.lf-ui .lf-form-card .custom-checkbox .custom-control-label::after { left: -28px; }
html.lf-ui[data-lf-wrapper="app"] .card.lf-form-card { max-width: 780px; }

/* ---- Title block with an icon tile (tools, API docs) */
html.lf-ui .lf-hero-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
html.lf-ui .lf-hero-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; background: var(--lf-primary-soft); color: var(--lf-primary-text); }
html.lf-ui .lf-hero-text { flex: 1; min-width: 0; }
html.lf-ui .lf-hero-text h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
html.lf-ui .lf-hero-text p { margin: 3px 0 0; font-size: 14px; color: var(--lf-text-2); }

/* ---- Tools */
html.lf-ui .lf-tools { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
html.lf-ui .lf-tools-rail { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; }
html.lf-ui .lf-tools-rail hr { margin: 8px 10px; border-color: var(--lf-border); }
html.lf-ui .lf-rail-item { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: var(--lf-r); color: var(--lf-text) !important; font-size: 14px; font-weight: 500; text-decoration: none !important; }
html.lf-ui .lf-rail-item i { width: 16px; text-align: center; font-size: 13px; color: var(--lf-text-3); }
html.lf-ui .lf-rail-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.lf-ui .lf-rail-item em { font-style: normal; font-size: 12px; color: var(--lf-text-3); }
html.lf-ui .lf-rail-item:hover { background: var(--lf-hover); }
html.lf-ui .lf-rail-item.is-active { background: var(--lf-primary-soft); color: var(--lf-primary-text) !important; font-weight: 700; }
html.lf-ui .lf-rail-item.is-active i, html.lf-ui .lf-rail-item.is-active em { color: var(--lf-primary-text); }
html.lf-ui .lf-tools-search .form-group { position: relative; margin-bottom: 24px; }
html.lf-ui .lf-tools-search .form-group > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--lf-text-3); font-size: 14px; pointer-events: none; }
html.lf-ui[dir="rtl"] .lf-tools-search .form-group > i { left: auto; right: 16px; }
html.lf-ui .lf-tools-search input { height: 46px; padding-inline-start: 44px; border-radius: var(--lf-r-lg); font-size: 15px; }
html.lf-ui .lf-tools-popular { margin-bottom: 24px !important; }
html.lf-ui .lf-tools-popular > .mt-5 { margin-top: 0 !important; }
html.lf-ui .lf-tools-popular-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px !important; font-size: 17px; font-weight: 700; color: var(--lf-text); text-transform: none; letter-spacing: -0.01em; }
html.lf-ui .lf-tools-popular-title span { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #F59E0B, #F15A2B); color: #fff; font-size: 13px; }
html.lf-ui .lf-tools-popular-title span i { margin: 0 !important; color: #fff !important; }
html.lf-ui #popular_tools, html.lf-ui #tools [data-category-tools] { margin: -6px !important; }
html.lf-ui #popular_tools > div, html.lf-ui #tools [data-category-tools] > div { padding: 6px !important; }
html.lf-ui #tools [data-category-tools] { margin: 4px -6px 16px !important; }

html.lf-ui .card.lf-tool { align-items: center; border-radius: var(--lf-r-lg); box-shadow: none; transition: border-color .15s, box-shadow .15s; }
html.lf-ui .card.lf-tool:hover { border-color: var(--lf-border-strong); box-shadow: var(--lf-shadow-sm); }
html.lf-ui .card.lf-tool .tool-icon-wrapper { padding: 0 0 0 16px; }
html.lf-ui[dir="rtl"] .card.lf-tool .tool-icon-wrapper { padding: 0 16px 0 0; }
html.lf-ui .card.lf-tool .tool-icon { width: 40px; height: 40px; border-radius: 10px !important; }
html.lf-ui .card.lf-tool .card-body { padding: 14px 16px; }
html.lf-ui .card.lf-tool .card-body .font-weight-600 { font-size: 15px; font-weight: 700 !important; color: var(--lf-text); }
html.lf-ui .card.lf-tool .card-body p { font-size: 13px !important; margin: 2px 0 0 !important; }
html.lf-ui .lf-tool-meta { display: flex; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--lf-text-3); }
html.lf-ui .lf-tool-meta i { font-size: 10px; margin-inline-end: 3px; }

html.lf-ui .card.lf-tool-cat { margin: 0 0 12px !important; background: var(--lf-surface); border: 1px solid var(--lf-border); color: var(--lf-text); border-radius: var(--lf-r-lg); box-shadow: none; }
html.lf-ui .card.lf-tool-cat .card-body { padding: 14px 16px; }
html.lf-ui .card.lf-tool-cat .tool-icon { width: 38px; height: 38px; border-radius: 10px !important; flex: none; }
html.lf-ui .card.lf-tool-cat .tool-icon i { color: #fff !important; }
html.lf-ui .card.lf-tool-cat .text-truncate.ml-3 { margin-inline-start: 12px !important; }
html.lf-ui .card.lf-tool-cat strong { font-size: 16px; font-weight: 700; }
html.lf-ui .card.lf-tool-cat p { color: var(--lf-text-2); font-size: 13px !important; }
html.lf-ui .lf-pill { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 99px; background: var(--lf-surface-3); color: var(--lf-text-2); font-size: 11px; font-weight: 600; vertical-align: 2px; }
html.lf-ui .lf-show-tools { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 99px; background: var(--lf-surface-3); color: var(--lf-text-2) !important; font-size: 13px; font-weight: 600; text-decoration: none !important; white-space: nowrap; }
html.lf-ui .lf-show-tools i { font-size: 10px; transition: transform .2s; }
html.lf-ui .lf-show-tools .lf-hide-label { display: none; }
html.lf-ui .lf-show-tools[aria-expanded="true"] .lf-show-label { display: none; }
html.lf-ui .lf-show-tools[aria-expanded="true"] .lf-hide-label { display: inline; }
html.lf-ui .lf-show-tools[aria-expanded="true"] i { transform: rotate(180deg); }
html.lf-ui .card.lf-tool-cat:hover .lf-show-tools { background: var(--lf-hover); color: var(--lf-text) !important; }
html.lf-ui #tools .lf-filtered { display: none !important; }
@media (max-width: 991.98px) {
    html.lf-ui .lf-tools { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    html.lf-ui .lf-tools-rail { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
    html.lf-ui .lf-tools-rail hr { display: none; }
    html.lf-ui .lf-rail-item { flex: none; border: 1px solid var(--lf-border); border-radius: 99px; height: 34px; }
    html.lf-ui .lf-rail-item.is-active { border-color: var(--lf-primary); }
}
@media (max-width: 575.98px) {
    html.lf-ui .card.lf-tool-cat p { display: none; }
    html.lf-ui .lf-show-tools .lf-show-label, html.lf-ui .lf-show-tools .lf-hide-label { display: none !important; }
}

/* ---- API documentation */
html.lf-ui .lf-utc-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 99px; background: var(--lf-surface-3); color: var(--lf-text-2); font-size: 12px; font-weight: 600; }
html.lf-ui .lf-docs { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; }
html.lf-ui .lf-docs-rail { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; }
html.lf-ui .lf-docs-rail-title { padding: 0 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lf-text-3); }
html.lf-ui .lf-docs-main > .card, html.lf-ui .lf-docs-main > div { margin-bottom: 20px !important; }
html.lf-ui .lf-docs-main > .card > .card-body { padding: 22px 24px; }
html.lf-ui .lf-docs-keys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
html.lf-ui .lf-docs-keys-grid label { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
html.lf-ui .lf-value { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 6px 0 12px; background: var(--lf-surface-2); border: 1px solid var(--lf-border); border-radius: var(--lf-r); }
html.lf-ui .lf-value code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; padding: 0; color: var(--lf-text); font-family: var(--lf-font-mono); font-size: 13px; }
html.lf-ui .lf-copy { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--lf-border); border-radius: 8px; background: var(--lf-surface); color: var(--lf-text-2); font-size: 12px; font-weight: 600; cursor: pointer; }
html.lf-ui .lf-copy:hover { color: var(--lf-text); border-color: var(--lf-border-strong); }
html.lf-ui .lf-copy.is-copied { color: var(--lf-success, #16A34A); border-color: currentColor; }
html.lf-ui .lf-copy.is-dark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #CBD5E1; }
html.lf-ui .lf-copy.is-dark:hover { color: #fff; border-color: rgba(255,255,255,.3); }
html.lf-ui .lf-docs-head { margin-bottom: 14px !important; }
html.lf-ui .lf-docs-head h2, html.lf-ui .lf-docs-res-title { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
html.lf-ui .lf-docs-head p { margin: 0; font-size: 14px; color: var(--lf-text-2) !important; }
html.lf-ui .lf-docs-head code { padding: 2px 6px; border-radius: 6px; background: var(--lf-primary-soft); color: var(--lf-primary-text); font-size: 12px; }
html.lf-ui .lf-num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--lf-surface-3); color: var(--lf-text-2); font-size: 12px; font-weight: 600; }
html.lf-ui .lf-docs-codes { display: flex; flex-direction: column; gap: 14px; }
html.lf-ui .lf-code { background: #0B1220; border: 1px solid #0B1220; border-radius: var(--lf-r-lg); overflow: hidden; margin-bottom: 14px; }
html.lf-ui .lf-docs-codes .lf-code { margin-bottom: 0; }
html.lf-ui .lf-code-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 6px 10px 6px 14px; border-bottom: 1px solid rgba(255,255,255,.08); font-family: var(--lf-font-mono); font-size: 11px; font-weight: 600; color: #94A3B8; }
html.lf-ui .lf-code pre { margin: 0; padding: 16px; color: #E2E8F0; font-family: var(--lf-font-mono); font-size: 13px; line-height: 1.7; white-space: pre; overflow-x: auto; }
html.lf-ui .lf-code .c, html.lf-ui .lf-code .k { color: #7DD3FC; }
html.lf-ui .lf-code .v { color: #5EEAD4; }
html.lf-ui .lf-code .s { color: #FDE68A; }
html.lf-ui .lf-code .m { color: #F9A8D4; }
html.lf-ui .lf-code .n { color: #C4B5FD; }
html.lf-ui .lf-docs-label { margin: 18px 0 8px; font-size: 13px; font-weight: 600; }
html.lf-ui .lf-status { border: 1px solid var(--lf-border); border-radius: var(--lf-r-lg); overflow: hidden; }
html.lf-ui .lf-status-row { display: grid; grid-template-columns: 48px 150px 1fr; align-items: center; gap: 14px; padding: 11px 14px; font-size: 14px; }
html.lf-ui .lf-status-row + .lf-status-row { border-top: 1px solid var(--lf-border); }
html.lf-ui .lf-status-row strong { font-weight: 600; }
html.lf-ui .lf-status-row span { color: var(--lf-text-2); }
html.lf-ui .lf-code-pill { display: inline-flex; justify-content: center; padding: 3px 0; border-radius: 6px; font-family: var(--lf-font-mono); font-size: 11px; font-weight: 700; background: var(--lf-surface-3); }
html.lf-ui .lf-code-pill.is-ok { background: rgba(22,163,74,.12); color: #15803D; }
html.lf-ui .lf-code-pill.is-warn { background: rgba(234,88,12,.12); color: #C2410C; }
html.lf-ui .lf-code-pill.is-bad { background: rgba(220,38,38,.10); color: #DC2626; }
html.lf-ui .lf-docs-res-title { margin: 6px 0 14px; }
html.lf-ui .lf-docs-resources .lf-endpoint-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
@media (max-width: 991.98px) {
    html.lf-ui .lf-docs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    html.lf-ui .lf-docs-rail { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
    html.lf-ui .lf-docs-rail-title { display: none; }
    html.lf-ui .lf-docs-rail .lf-rail-item { flex: none; border: 1px solid var(--lf-border); border-radius: 99px; height: 34px; }
}
@media (max-width: 767.98px) {
    html.lf-ui .lf-docs-keys-grid { grid-template-columns: 1fr; }
    html.lf-ui .lf-status-row { grid-template-columns: 48px 1fr; }
    html.lf-ui .lf-status-row span { grid-column: 2; margin-top: -10px; font-size: 13px; }
    html.lf-ui .lf-hero-head { flex-wrap: wrap; }
}

/* API documentation resource pages: code samples on dark, method pills */
html.lf-ui main.lf-apidocs .accordion > .card { margin-bottom: 10px; border-radius: var(--lf-r-lg) !important; border: 1px solid var(--lf-border) !important; overflow: hidden; }
html.lf-ui main.lf-apidocs .accordion .card-header { background: var(--lf-surface) !important; border: 0; padding: 14px 16px !important; }
html.lf-ui main.lf-apidocs .accordion .card-header a { color: var(--lf-text); font-weight: 600; }
html.lf-ui main.lf-apidocs .card.bg-gray-100.border-0 { background: #0B1220 !important; border-radius: var(--lf-r-lg); }
html.lf-ui main.lf-apidocs .card.bg-gray-100.border-0 > .card-body { color: #E2E8F0; font-family: var(--lf-font-mono); font-size: 13px; line-height: 1.7; overflow-x: auto; }
html.lf-ui main.lf-apidocs .card.bg-gray-100.border-0 .text-primary { color: #5EEAD4 !important; }
html.lf-ui main.lf-apidocs .card.bg-gray-100.border-0 .text-muted { color: #CBD5E1 !important; }
html.lf-ui main.lf-apidocs pre[data-shiki], html.lf-ui main.lf-apidocs pre.shiki { background: #0B1220 !important; color: #E2E8F0; padding: 16px; border-radius: var(--lf-r-lg); font-size: 13px; line-height: 1.6; }

/* ---- Statistics (data preview) */
html.lf-ui main.lf-stats .card.flex-row:has(.index-widget-icon) { justify-content: flex-start; }
html.lf-ui .card.lf-preview > .card-body:first-child { position: relative; padding: 18px 18px 6px; }
html.lf-ui .card.lf-preview h3.h5 { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
html.lf-ui .card.lf-preview h3.h5 + .lf-preview-col { position: absolute; top: 20px; right: 18px; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lf-text-3); }
html.lf-ui[dir="rtl"] .card.lf-preview .lf-preview-col { right: auto; left: 18px; }
html.lf-ui .card.lf-preview h3 + .lf-preview-col + p:empty, html.lf-ui .card.lf-preview h3 + p:empty { display: none; }
html.lf-ui .lf-bar-row { position: relative; margin-top: 4px !important; height: 30px; display: flex; align-items: center; }
html.lf-ui .lf-bar-row > .d-flex { position: relative; z-index: 1; flex: 1; min-width: 0; align-items: center; margin: 0 !important; padding: 0 0 0 8px; font-size: 13.5px; }
html.lf-ui[dir="rtl"] .lf-bar-row > .d-flex { padding: 0 8px 0 0; }
html.lf-ui .lf-bar-row > .d-flex > .text-truncate a { color: var(--lf-text); }
html.lf-ui .lf-bar-row > .d-flex > .text-truncate a:hover { color: var(--lf-primary-text); }
html.lf-ui .lf-bar-row > .d-flex > div:last-child { flex: none; display: flex; align-items: baseline; }
html.lf-ui .lf-bar-row > .d-flex > div:last-child small { font-size: 11px; }
html.lf-ui .lf-bar-row > .d-flex > div:last-child span { min-width: 30px; text-align: end; margin-inline-start: 12px !important; font-weight: 700; font-variant-numeric: tabular-nums; }
html.lf-ui .lf-bar-row > .progress { position: absolute; top: 0; bottom: 0; left: 0; right: 90px; height: auto !important; background: transparent; border-radius: 8px; }
html.lf-ui[dir="rtl"] .lf-bar-row > .progress { left: 90px; right: 0; }
html.lf-ui .lf-bar-row > .progress > .progress-bar { background: color-mix(in srgb, var(--lf-bar, var(--lf-chart-1)) 14%, transparent); border-radius: 8px; }
html.lf-ui .lf-bar-row .icon-favicon, html.lf-ui .lf-bar-row .icon-favicon-small { width: 16px; height: 16px; }
html.lf-ui .card.lf-preview > .card-body.small { padding: 8px 18px 16px !important; }
html.lf-ui .lf-view-all { font-size: 12.5px; font-weight: 600; color: var(--lf-primary-text) !important; text-decoration: none !important; }
html.lf-ui .lf-view-all i { font-size: 10px; margin-inline-start: 2px; transform: scaleX(var(--lf-dir-x)); }
html.lf-ui .lf-donut-row { display: flex; align-items: center; gap: 16px; margin: 4px 0 10px; }
html.lf-ui .lf-donut { flex: none; width: 76px; height: 76px; border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 25px, #000 26px); mask: radial-gradient(circle, transparent 25px, #000 26px); }
html.lf-ui .lf-donut-row strong { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
html.lf-ui .lf-donut-row span { font-size: 12.5px; color: var(--lf-text-3); }

/* ---- List titles with a count, QR list */
html.lf-ui .lf-h1-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
html.lf-ui .lf-h1-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.lf-ui .lf-h1-sub { font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--lf-text-3); margin-top: 2px; }
html.lf-ui .qr-code-avatar { width: 40px !important; height: 40px !important; padding: 4px; border: 1px solid var(--lf-border); border-radius: 10px; background: #fff; object-fit: contain; }
html.lf-ui .lf-qr-kind.is-dynamic { flex: none; display: inline-flex; align-items: center; height: 18px; margin-inline-end: 6px; padding: 0 7px; border-radius: 99px; background: var(--lf-primary-soft); color: var(--lf-primary-text); font-size: 10.5px; font-weight: 700; }
html.lf-ui .lf-qr-kind.is-static { font-size: 12px; }

/* ---- Confirm modals (delete, reset) */
html.lf-ui .modal.lf-confirm .modal-dialog { max-width: 440px; }
html.lf-ui .modal.lf-confirm .modal-body { position: relative; padding: 22px 22px 0 74px; }
html.lf-ui[dir="rtl"] .modal.lf-confirm .modal-body { padding: 22px 74px 0 22px; }
html.lf-ui .lf-confirm-icon { position: absolute; left: 22px; top: 22px; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
html.lf-ui[dir="rtl"] .lf-confirm-icon { left: auto; right: 22px; }
html.lf-ui .lf-confirm-icon.is-danger { background: var(--lf-danger-soft); color: var(--lf-danger); }
html.lf-ui .lf-confirm-icon.is-warning { background: color-mix(in srgb, var(--lf-warning, #EA580C) 14%, transparent); color: var(--lf-warning, #EA580C); }
html.lf-ui .modal.lf-confirm .modal-body > .d-flex { margin-bottom: 4px !important; }
html.lf-ui .modal.lf-confirm .modal-title { font-size: 17px; }
html.lf-ui .modal.lf-confirm .modal-body > p { font-size: 14px; margin-bottom: 0; }
html.lf-ui .lf-confirm-foot { display: flex; justify-content: flex-end; gap: 8px; margin: 20px -22px 0 -74px !important; padding: 14px 22px; border-top: 1px solid var(--lf-border); background: var(--lf-surface-2); }
html.lf-ui[dir="rtl"] .lf-confirm-foot { margin: 20px -74px 0 -22px !important; }
html.lf-ui .lf-confirm-foot .btn { height: 38px; padding: 0 16px; }

/* ---- Export menu */
html.lf-ui .lf-export-menu { min-width: 220px; }
html.lf-ui .lf-export-menu .dropdown-header { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lf-text-3); padding: 6px 12px 4px; }
html.lf-ui .lf-export-menu .dropdown-item { display: flex; align-items: center; gap: 4px; }
html.lf-ui .lf-pro-pill { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 99px; background: var(--lf-secondary-soft); color: var(--lf-secondary-text); font-size: 10.5px; font-weight: 700; }
html.lf-ui .lf-pro-pill i { font-size: 9px; margin: 0 !important; color: inherit !important; }

/* Filters button with applied filters: soft primary instead of black */
html.lf-ui .filters-button.btn-dark { background: var(--lf-primary-soft); border-color: color-mix(in srgb, var(--lf-primary) 40%, transparent); color: var(--lf-primary-text); }
html.lf-ui .filters-button.btn-dark i { color: inherit !important; }

/* Dark tooltips (locked features, help) */
html.lf-ui .tooltip-inner { background: #0B1220; color: #F1F5F9; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; text-align: start; max-width: 260px; box-shadow: var(--lf-shadow-md); }
html.lf-ui .tooltip.bs-tooltip-top .arrow::before, html.lf-ui .tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: #0B1220; }
html.lf-ui .tooltip.bs-tooltip-bottom .arrow::before, html.lf-ui .tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: #0B1220; }
html.lf-ui .tooltip.bs-tooltip-left .arrow::before { border-left-color: #0B1220; }
html.lf-ui .tooltip.bs-tooltip-right .arrow::before { border-right-color: #0B1220; }
html.lf-ui body[data-theme-style="dark"] .tooltip-inner { background: #F8FAFC; color: #0F172A; }
html.lf-ui body[data-theme-style="dark"] .tooltip.bs-tooltip-top .arrow::before { border-top-color: #F8FAFC; }
html.lf-ui body[data-theme-style="dark"] .tooltip.bs-tooltip-bottom .arrow::before { border-bottom-color: #F8FAFC; }

/* ---- Copy toast */
html.lf-ui .lf-toast { position: fixed; z-index: 1090; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 10px 14px; border-radius: 12px; background: #0B1220; color: #F1F5F9; font-size: 13.5px; font-weight: 600; box-shadow: var(--lf-shadow-lg); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; }
html.lf-ui[dir="rtl"] .lf-toast { right: auto; left: 24px; }
html.lf-ui .lf-toast.is-visible { opacity: 1; transform: none; }
html.lf-ui .lf-toast > i { color: #22C55E; font-size: 16px; }
html.lf-ui .lf-toast code { padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,.08); color: #CBD5E1; font-family: var(--lf-font-mono); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
html.lf-ui body[data-theme-style="dark"] .lf-toast { background: #F8FAFC; color: #0F172A; }
html.lf-ui body[data-theme-style="dark"] .lf-toast code { background: rgba(15,23,42,.06); color: #334155; }
@media (max-width: 575.98px) { html.lf-ui .lf-toast { left: 16px; right: 16px; bottom: 16px; } }

/* ---- Spotlight (design: "⌘K spotlight") */
html.lf-ui .spotlight-modal.lf-spotlight { max-width: 580px; padding: 0; overflow: hidden; margin-top: 12vh; }
html.lf-ui .lf-spot-bar { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--lf-border); }
html.lf-ui .lf-spot-bar > i { color: var(--lf-text-3); font-size: 14px; }
html.lf-ui .lf-spot-bar #spotlight_search { flex: 1; height: 52px; border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0; font-size: 15px; }
html.lf-ui .lf-spot-bar #spotlight_search::-webkit-search-cancel-button { display: none; }
html.lf-ui .lf-spot-bar .lf-kbd { cursor: pointer; }
html.lf-ui .lf-spot-label { padding: 12px 18px 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lf-text-3); }
html.lf-ui .lf-spotlight .spotlight-results { margin: 0 !important; padding: 4px 8px 8px; max-height: 50vh; overflow-y: auto; }
html.lf-ui .lf-spotlight .spotlight-results a { margin: 1px 0 !important; padding: 8px 10px 8px 52px !important; border: 0 !important; }
html.lf-ui[dir="rtl"] .lf-spotlight .spotlight-results a { padding: 8px 52px 8px 10px !important; }
html.lf-ui .lf-spotlight .spotlight-results a::before { content: "\f15c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--lf-surface-3); color: var(--lf-text-2); font-size: 12px; }
html.lf-ui[dir="rtl"] .lf-spotlight .spotlight-results a::before { left: auto; right: 12px; }
html.lf-ui .lf-spotlight .spotlight-results a span { font-size: 14px; font-weight: 600; }
html.lf-ui .lf-spotlight .spotlight-results a .small { font-size: 12px; }
html.lf-ui .lf-spotlight .spotlight-results a .fa-arrow-right { font-size: 11px !important; opacity: 0; }
html.lf-ui .lf-spotlight .spotlight-results a:hover .fa-arrow-right, html.lf-ui .lf-spotlight .spotlight-results a:focus .fa-arrow-right { opacity: 1; }
html.lf-ui .lf-spotlight .spotlight-results a:hover, html.lf-ui .lf-spotlight .spotlight-results a:focus { background: var(--lf-hover) !important; }
html.lf-ui .lf-spotlight #spotlight_no_data { margin: 4px 16px 16px !important; }
html.lf-ui .lf-spot-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--lf-border); background: var(--lf-surface-2); font-size: 12px; color: var(--lf-text-3); }
html.lf-ui .lf-spot-foot kbd { padding: 1px 5px; border-radius: 4px; border: 1px solid var(--lf-border); background: var(--lf-surface); color: var(--lf-text-2); font-size: 11px; box-shadow: none; font-family: inherit; }
@media (max-width: 575.98px) { html.lf-ui .lf-spot-foot { display: none; } }

/* ---- Loading skeletons (dashboard counters and chart load asynchronously) */
@keyframes lf-shimmer { 0% { background-position: -240px 0; } 100% { background-position: 240px 0; } }
html.lf-ui [id$="_links_total"]:has(> .spinner-border),
html.lf-ui #pageviews_chart_loading::before {
    background: linear-gradient(90deg, var(--lf-surface-3) 0, var(--lf-hover) 40px, var(--lf-surface-3) 80px) var(--lf-surface-3);
    background-size: 480px 100%;
    animation: lf-shimmer 1.4s linear infinite;
}
html.lf-ui [id$="_links_total"]:has(> .spinner-border) { width: 110px; height: 14px; border-radius: 6px; }
html.lf-ui [id$="_links_total"] > .spinner-border,
html.lf-ui #pageviews_chart_loading > .spinner-border { display: none; }
html.lf-ui #pageviews_chart_loading { position: relative; }
html.lf-ui #pageviews_chart_loading::before {
    content: "";
    position: absolute;
    inset: 16px 8px 8px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 450 200' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='70' height='18' rx='5'/%3E%3Crect x='0' y='26' width='110' height='8' rx='4'/%3E%3Cg%3E%3Crect x='10' y='110' width='18' height='90' rx='3'/%3E%3Crect x='40' y='80' width='18' height='120' rx='3'/%3E%3Crect x='70' y='95' width='18' height='105' rx='3'/%3E%3Crect x='100' y='70' width='18' height='130' rx='3'/%3E%3Crect x='130' y='125' width='18' height='75' rx='3'/%3E%3Crect x='160' y='132' width='18' height='68' rx='3'/%3E%3Crect x='190' y='115' width='18' height='85' rx='3'/%3E%3Crect x='220' y='90' width='18' height='110' rx='3'/%3E%3Crect x='250' y='88' width='18' height='112' rx='3'/%3E%3Crect x='280' y='65' width='18' height='135' rx='3'/%3E%3Crect x='310' y='118' width='18' height='82' rx='3'/%3E%3Crect x='340' y='58' width='18' height='142' rx='3'/%3E%3Crect x='370' y='82' width='18' height='118' rx='3'/%3E%3Crect x='400' y='35' width='18' height='165' rx='3'/%3E%3Crect x='430' y='55' width='18' height='145' rx='3'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 450 200' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='70' height='18' rx='5'/%3E%3Crect x='0' y='26' width='110' height='8' rx='4'/%3E%3Cg%3E%3Crect x='10' y='110' width='18' height='90' rx='3'/%3E%3Crect x='40' y='80' width='18' height='120' rx='3'/%3E%3Crect x='70' y='95' width='18' height='105' rx='3'/%3E%3Crect x='100' y='70' width='18' height='130' rx='3'/%3E%3Crect x='130' y='125' width='18' height='75' rx='3'/%3E%3Crect x='160' y='132' width='18' height='68' rx='3'/%3E%3Crect x='190' y='115' width='18' height='85' rx='3'/%3E%3Crect x='220' y='90' width='18' height='110' rx='3'/%3E%3Crect x='250' y='88' width='18' height='112' rx='3'/%3E%3Crect x='280' y='65' width='18' height='135' rx='3'/%3E%3Crect x='310' y='118' width='18' height='82' rx='3'/%3E%3Crect x='340' y='58' width='18' height='142' rx='3'/%3E%3Crect x='370' y='82' width='18' height='118' rx='3'/%3E%3Crect x='400' y='35' width='18' height='165' rx='3'/%3E%3Crect x='430' y='55' width='18' height='145' rx='3'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
@media (prefers-reduced-motion: reduce) { html.lf-ui [id$="_links_total"]:has(> .spinner-border), html.lf-ui #pageviews_chart_loading::before { animation: none; } }

/* Empty chart: faint grid lines behind "No data yet" */
html.lf-ui #pageviews_chart_no_data { background: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, var(--lf-border) 47px, var(--lf-border) 48px); border-bottom: 1px solid var(--lf-border-strong); }
html.lf-ui #pageviews_chart_no_data > div { background: radial-gradient(closest-side, var(--lf-surface) 70%, transparent); }

/* ---- List toolbar: icon buttons joined into one group */
html.lf-ui .lf-toolgroup { display: inline-flex; align-items: center; padding: 3px; gap: 2px; border: 1px solid var(--lf-border); border-radius: var(--lf-r-lg); background: var(--lf-surface); }
html.lf-ui .lf-toolgroup .btn { height: 32px !important; width: 34px; padding: 0; border: 0 !important; background: transparent; box-shadow: none !important; border-radius: 8px; color: var(--lf-text-2); }
html.lf-ui .lf-toolgroup .btn:hover { background: var(--lf-hover); color: var(--lf-text); }
html.lf-ui .lf-toolgroup .btn.filters-button.btn-dark, html.lf-ui .lf-toolgroup .btn.is-open, html.lf-ui .lf-toolgroup #bulk_enable.d-none + #bulk_group { background: var(--lf-primary-soft); color: var(--lf-primary-text); }
html.lf-ui .lf-toolgroup #bulk_group { display: none !important; }
html.lf-ui .lf-toolgroup #bulk_enable.d-none { display: inline-flex !important; background: var(--lf-primary-soft); color: var(--lf-primary-text); }
html.lf-ui a.lf-templates-btn.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; border: 1px solid color-mix(in srgb, var(--lf-secondary) 55%, transparent); background: color-mix(in srgb, var(--lf-secondary) 6%, var(--lf-surface)); color: var(--lf-text) !important; font-weight: 600; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lf-secondary) 8%, transparent); }
html.lf-ui a.lf-templates-btn.btn:hover { background: color-mix(in srgb, var(--lf-secondary) 12%, var(--lf-surface)); }
html.lf-ui a.lf-templates-btn.btn > i { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; margin: 0 !important; background: linear-gradient(135deg, #F59E0B, #F15A2B); color: #fff !important; font-size: 11px; }

/* ---- Inline filters panel */
html.lf-ui .lf-filters-panel { display: none; margin-bottom: 16px; }
html.lf-ui .lf-filters-panel.is-open { display: block; animation: lf-fade-down .18s ease-out; }
@keyframes lf-fade-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
html.lf-ui .lf-filters-panel > .card-body { padding: 18px; }
html.lf-ui .lf-filters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 14px 14px; }
html.lf-ui .lf-filters-grid > .form-group, html.lf-ui .lf-filters-grid #filters_datetime > .form-group { margin: 0; padding: 0 !important; }
html.lf-ui .lf-filters-grid #filters_datetime { display: contents; }
html.lf-ui .lf-filters-grid #filters_datetime[style*="none"] > .form-group, html.lf-ui .lf-filters-grid #filters_datetime.d-none > .form-group { display: none; }
html.lf-ui .lf-filters-grid label.small { font-size: 12.5px !important; font-weight: 600; color: var(--lf-text-2); margin-bottom: 6px; }
html.lf-ui .lf-filters-grid .form-control-sm, html.lf-ui .lf-filters-grid .custom-select-sm { height: 38px; font-size: 14px; }
html.lf-ui .lf-filters-search { grid-column: 1 / -1; position: relative; }
html.lf-ui .lf-filters-search-icon { position: absolute; left: 12px; bottom: 13px; color: var(--lf-text-3); font-size: 12px; pointer-events: none; }
html.lf-ui[dir="rtl"] .lf-filters-search-icon { left: auto; right: 12px; }
html.lf-ui .lf-filters-search input { padding-inline-start: 34px; }
html.lf-ui .lf-filters-foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 0; padding: 0 !important; }
html.lf-ui .lf-filters-foot .btn { height: 36px; }
html.lf-ui .lf-filters-reset { color: var(--lf-text-2) !important; font-weight: 600; text-decoration: none !important; }

/* ---- Bulk selection bar */
html.lf-ui .lf-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; padding: 8px 10px 8px 16px; border-radius: var(--lf-r-lg); background: var(--lf-primary-soft); border: 1px solid color-mix(in srgb, var(--lf-primary) 22%, transparent); }
html.lf-ui .lf-bulk-count { font-size: 14px; }
html.lf-ui .lf-bulk-all { font-size: 13.5px; font-weight: 600; color: var(--lf-primary-text) !important; }
html.lf-ui .lf-bulk-actions { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 8px; }
html.lf-ui .lf-bulk-actions .btn { height: 34px; display: inline-flex; align-items: center; gap: 6px; background-color: var(--lf-surface); }
html.lf-ui .lf-bulk-actions .btn.btn-link { background: transparent; color: var(--lf-text-2); text-decoration: none; font-weight: 600; }
html.lf-ui .lf-bulk-actions .btn.disabled { opacity: .5; pointer-events: none; }
html.lf-ui .lf-bulk-actions .btn i.mr-2 { margin: 0 !important; }
html.lf-ui .lf-hero-text { flex: 1 1 220px; }
@media (max-width: 767.98px) { html.lf-ui .lf-utc-pill { margin-inline-start: 58px; } }
html.lf-ui .lf-row-name { display: flex; align-items: center; gap: 12px; }
html.lf-ui .lf-row-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--lf-primary-soft); color: var(--lf-primary-text); font-size: 13px; }
html.lf-ui .lf-row-text { min-width: 0; font-weight: 600; }
html.lf-ui .dropdown-item[download]::before, html.lf-ui .dropdown-item[onclick^="convert_svg_qr_code"]::before { content: "\f019"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; width: 16px; margin-inline-end: 8px; color: var(--lf-text-3); display: inline-block; text-align: center; }

/* ---- Payment page (design LF 5 · 21a–21c) */
html.lf-ui .lf-pay-form .lf-opt > input + .card { height: 100%; }
html.lf-ui .lf-pay-form .lf-opt > input + .card > .card-body { flex-wrap: nowrap !important; align-items: center !important; gap: 12px; min-height: 68px; padding-top: 14px; padding-bottom: 14px; }
html.lf-ui .lf-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
html.lf-ui .lf-opt-text .card-title { font-size: 14.5px !important; font-weight: 700 !important; color: var(--lf-text); }
html.lf-ui .lf-opt-sub { font-size: 12.5px; color: var(--lf-text-3); line-height: 1.35; }
html.lf-ui .lf-opt-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
html.lf-ui .lf-opt-side > .d-flex { align-items: baseline !important; gap: 4px; }
html.lf-ui .lf-opt-frequency .lf-cur { font-size: 11px; font-weight: 600; color: var(--lf-text-3); }
html.lf-ui .lf-opt-frequency .custom-radio-box-main-text { font-size: 19px !important; font-weight: 700; letter-spacing: -0.02em; color: var(--lf-text); }
html.lf-ui .lf-opt-side .payment-price-savings { padding: 0 !important; background: none !important; }
html.lf-ui .lf-opt-side .payment-price-savings .badge { font-size: 11px; font-weight: 700; padding: 3px 8px; background: var(--lf-success-soft); color: var(--lf-success); }
html.lf-ui .lf-opt-side [id$="_discount_case_wrapper"] { font-size: 11px; }
html.lf-ui .lf-opt-tile { flex: none; width: 36px !important; height: 36px !important; border-radius: 10px !important; }
html.lf-ui .lf-opt-tile.is-card { background: color-mix(in srgb, #3B82F6 14%, var(--lf-surface)) !important; color: #3B82F6; }
html.lf-ui .lf-opt-processor .card-body > .mr-3 { margin-right: 0 !important; }
html.lf-ui .lf-opt-type .custom-radio-box-main-icon { background: transparent !important; color: var(--lf-text-2); }
html.lf-ui .lf-pay-form .row.mx-n2 > .lf-opt { padding: 6px !important; }
html.lf-ui .lf-pay-form .row.mx-n2:has(> .lf-opt) { margin: -6px !important; }

/* "What you'll get": header inside the card */
html.lf-ui .lf-pay-features > .card { border-radius: var(--lf-r-lg); }
html.lf-ui .lf-pay-features > .card > h2 { display: flex; align-items: center; gap: 12px; margin: 0 !important; padding: 16px 18px 4px; font-size: 15px !important; font-weight: 700; }
html.lf-ui .lf-feat-icon { flex: none; color: var(--lf-text-2); font-size: 15px; }
html.lf-ui .lf-feat-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
html.lf-ui .lf-feat-text .lf-pay-features-count { font-size: 12.5px; font-weight: 500; }
html.lf-ui .lf-pay-features > .card > h2 .lf-link-button { margin-inline-start: auto; }
html.lf-ui .lf-pay-features > .card > .card-body { padding-top: 10px; }

/* Order summary */
html.lf-ui .lf-pay-summary { overflow: hidden; padding-bottom: 0 !important; }
html.lf-ui .lf-pay-summary .lf-summary-plan { padding-bottom: 14px; border-bottom: 1px solid var(--lf-border); }
html.lf-ui .lf-pay-summary .lf-summary-plan-name strong { font-size: 16px; }
html.lf-ui .lf-pay-summary > .card-body .d-flex.justify-content-between.mb-3 > :last-child span.text-right:not(.text-muted),
html.lf-ui .lf-pay-summary > .card-body .d-flex.justify-content-between.mb-3 > span:last-child,
html.lf-ui .lf-pay-summary #summary_plan_price,
html.lf-ui .lf-pay-summary .tax-value, html.lf-ui .lf-pay-summary .discount-value { font-weight: 700; color: var(--lf-text); }
html.lf-ui .lf-pay-summary > .card-body .d-flex.justify-content-between.mb-3 > .text-muted:first-child { color: var(--lf-text-2) !important; }
html.lf-ui .lf-pay-summary > .card-body > div:first-child { padding-top: 14px; }
html.lf-ui .lf-code-button.btn { height: 40px; border: 1px dashed var(--lf-border-strong) !important; background: transparent !important; color: var(--lf-text-2) !important; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; }
html.lf-ui .lf-code-button.btn:hover { border-color: var(--lf-primary) !important; color: var(--lf-primary-text) !important; }
html.lf-ui .lf-code-button i { font-size: 11px; }
html.lf-ui .lf-pay-summary > .card-footer { margin: 16px -18px 0 !important; padding: 16px 18px 0 !important; background: var(--lf-surface-2) !important; border-top: 1px solid var(--lf-border) !important; }
html.lf-ui .lf-pay-summary > .card-footer .d-flex { align-items: baseline; }
html.lf-ui .lf-pay-summary > .card-footer .text-muted:first-child { color: var(--lf-text) !important; font-size: 15px; }
html.lf-ui .lf-pay-summary > .card-footer .lf-cur { font-size: 12px; font-weight: 600; margin-inline-end: 4px; }
html.lf-ui .lf-pay-summary #summary_total { font-size: 26px; letter-spacing: -0.03em; }
html.lf-ui .lf-pay-summary > .lf-pay-checkout { margin: 0 -18px !important; padding: 14px 18px 16px; background: var(--lf-surface-2); }
html.lf-ui .lf-pay-summary > .card-body .d-flex.justify-content-between.mb-3 > div span.text-right { font-weight: 700; color: var(--lf-text); }
html.lf-ui .lf-pay-summary > .card-body .d-flex.justify-content-between.mb-3 > div small.text-right { font-weight: 400; }
html.lf-ui .lf-pay-summary > .card-body #summary_plan_price + .text-muted { color: var(--lf-text) !important; font-weight: 700; }
@media (min-width: 1200px) {
    html.lf-ui .lf-pay-form > .row > .col-xl-8 { flex: 1 1 0; max-width: none; }
    html.lf-ui .lf-pay-form > .row > .col-xl-4 { flex: 0 0 400px; max-width: 400px; }
}

/* ---- Roomier layout (1.6.6): the links header sits flush on its table */
html.lf-ui[data-lf-wrapper="app"] body main .container .lf-card-section > .row.mb-4:first-child { margin-bottom: 0 !important; }

/* Short laptop screens: keep the whole menu visible without scrolling */
@media (min-width: 992px) and (max-height: 860px) {
    html.lf-ui .app-sidebar-title { min-height: 56px; padding-top: 16px; padding-bottom: 10px; }
    html.lf-ui .lf-sidebar-search { padding-bottom: 10px; }
    html.lf-ui .app-sidebar-links { gap: 0; }
    html.lf-ui .app-sidebar-links > li > a { height: 33px; }
    html.lf-ui .app-sidebar > .overflow-auto { padding-bottom: 8px; }
    html.lf-ui .app-sidebar-links > li > a.default { width: 33px !important; }
    html.lf-ui .app-sidebar-links > .divider-wrapper { margin: 6px 0; }
    html.lf-ui .app-sidebar-footer { padding: 8px 16px 12px; }
}

/* Medium-height screens (e.g. 1440×900): slightly tighter menu rows so the menu still fits */
@media (min-width: 992px) and (min-height: 861px) and (max-height: 960px) {
    html.lf-ui .app-sidebar-links { gap: 0; }
    html.lf-ui .app-sidebar > .overflow-auto { padding-bottom: 8px; }
}

/* Status switch in list rows: AltumCode's own size (28 × 16 track, 12px knob) */
html.lf-ui .table-custom .custom-switch { padding-left: 36px; min-height: 16px; }
html.lf-ui[dir="rtl"] .table-custom .custom-switch { padding-left: 0; padding-right: 36px; }
html.lf-ui .table-custom .custom-switch .custom-control-label::before { left: -36px; width: 28px; height: 16px; margin-top: -8px; }
html.lf-ui .table-custom .custom-switch .custom-control-label::after { left: -34px; width: 12px; height: 12px; margin-top: -6px; }
html.lf-ui[dir="rtl"] .table-custom .custom-switch .custom-control-label::before { left: auto; right: -36px; }
html.lf-ui[dir="rtl"] .table-custom .custom-switch .custom-control-label::after { left: auto; right: -34px; }
html.lf-ui .table-custom .custom-switch .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(12px); }
html.lf-ui[dir="rtl"] .table-custom .custom-switch .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(-12px); }
html.lf-ui .table-custom .custom-switch .custom-control-label:empty { height: 16px; }

/* Sidebar frame like AltumCode: 48px above and below, 24px from the left, wide gap to the content */
html.lf-ui[data-lf-wrapper="app"] { --lf-frame-gap: 48px; }
@media (min-width: 992px) {
    html.lf-ui[data-lf-wrapper="app"] .app-content {
        margin: var(--lf-frame-y) var(--lf-frame-x) var(--lf-frame-y) calc(var(--lf-sidebar-w) + var(--lf-frame-x) + var(--lf-frame-gap));
    }
    html.lf-ui[data-lf-wrapper="app"][dir="rtl"] .app-content {
        margin: var(--lf-frame-y) calc(var(--lf-sidebar-w) + var(--lf-frame-x) + var(--lf-frame-gap)) var(--lf-frame-y) var(--lf-frame-x);
    }
}

/* ---- Old-UI geometry (1.6.8): no big white panel; pages sit on the background like AltumCode,
        same distance from the sidebar and same width (1140px), cards stay white */
@media (min-width: 992px) {
    html.lf-ui[data-lf-wrapper="app"] .app-content,
    html.lf-ui[data-lf-wrapper="app"][dir] .app-content {
        --lf-bg: var(--lf-shell);
        margin: 0 0 0 calc(var(--lf-sidebar-w) + var(--lf-frame-x));
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }
    html.lf-ui[data-lf-wrapper="app"][dir="rtl"] .app-content { margin: 0 calc(var(--lf-sidebar-w) + var(--lf-frame-x)) 0 0; }
    html.lf-ui[data-lf-wrapper="app"] .app-content > .pt-lg-5 { padding: var(--lf-frame-y) 48px 0 !important; }
    html.lf-ui[data-lf-wrapper="app"] .app-content > .px-lg-5 { padding: 0 48px !important; }
    html.lf-ui[data-lf-wrapper="app"] .app-content .container { max-width: 1140px; }
}

/* Dashboard chart: about the old height; total and legend share one line */
html.lf-ui .chart-container { height: clamp(210px, 14vw, 240px); }
html.lf-ui .lf-chart-head { margin-bottom: 10px; }
html.lf-ui .lf-chart-head > div:has(> .lf-chart-total) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; width: 100%; }
html.lf-ui .lf-chart-head > div:has(> .lf-chart-total) > .lf-chart-title { flex-basis: 100%; }
html.lf-ui .lf-chart-head > div:has(> .lf-chart-total) > .lf-chart-legend { margin-top: 6px; margin-inline-start: auto; }
html.lf-ui .lf-chart-total strong { font-size: 26px; }

/* Link counters: AltumCode's size and layout (66px tall, icon on the left, 48px down to the chart) */
html.lf-ui .card.flex-row:has(.index-widget-icon) { justify-content: flex-start; gap: 20px; min-height: 66px; padding: 12px 16px; }
html.lf-ui .card.flex-row:has(.index-widget-icon) .h6 { font-size: 16px; font-weight: 500; }
html.lf-ui .lf-stat-number { font-size: 18px; vertical-align: 0; }
html.lf-ui[data-lf-wrapper="app"] main .container > .mb-5:has(.index-widget-icon) { margin-bottom: 48px !important; }

/* Sidebar menu rows: AltumCode's rhythm (about 52px from one item to the next) */
html.lf-ui .app-sidebar-links { gap: 8px; }
html.lf-ui .app-sidebar-links > li > a { height: 44px; }
html.lf-ui .app-sidebar-links > li > a.default { width: 44px !important; }
html.lf-ui .app-sidebar-links > .divider-wrapper { margin: 12px 0; }
@media (min-width: 992px) and (max-height: 999px) {
    html.lf-ui .app-sidebar-links { gap: 6px; }
    html.lf-ui .app-sidebar-links > li > a { height: 42px; }
    html.lf-ui .app-sidebar-links > li > a.default { width: 42px !important; }
    html.lf-ui .app-sidebar-links > .divider-wrapper { margin: 8px 0; }
    html.lf-ui .app-sidebar-title { padding-top: 20px; min-height: 64px; }
    html.lf-ui .lf-sidebar-search { padding-bottom: 12px; }
    html.lf-ui .app-sidebar > .overflow-auto { padding-bottom: 6px; }
}
@media (min-width: 992px) and (max-height: 860px) {
    html.lf-ui .app-sidebar-links { gap: 2px; }
    html.lf-ui .app-sidebar-links > li > a { height: 36px; }
    html.lf-ui .app-sidebar-links > li > a.default { width: 36px !important; }
    html.lf-ui .app-sidebar-links > .divider-wrapper { margin: 6px 0; }
    html.lf-ui .app-sidebar-title { padding-top: 16px; min-height: 56px; }
    html.lf-ui .lf-sidebar-search { padding-bottom: 8px; }
}
@media (min-width: 992px) and (max-height: 999px) { html.lf-ui .app-sidebar > .overflow-auto { padding-bottom: 0; } }
@media (min-width: 992px) and (min-height: 861px) and (max-height: 930px) {
    html.lf-ui .app-sidebar-links { gap: 4px; }
    html.lf-ui .app-sidebar-links > .divider-wrapper { margin: 6px 0; }
    html.lf-ui .app-sidebar-links > li > a { height: 40px; }
    html.lf-ui .app-sidebar-links > li > a.default { width: 40px !important; }
}
@media (min-width: 992px) and (max-height: 860px) {
    html.lf-ui .app-sidebar-links { gap: 0; }
    html.lf-ui .app-sidebar-links > li > a { height: 34px; }
    html.lf-ui .app-sidebar-links > li > a.default { width: 34px !important; }
}

/* List rows: AltumCode's spacing (20px above and below each row, 16px link names) */
html.lf-ui .table-custom td { padding: 19px 20px; }
html.lf-ui .table-custom thead th { padding: 16px 20px; font-size: 14px; }
html.lf-ui .table-custom tbody td a:not(.btn):not(.badge):not(.text-muted):not(.dropdown-item) { font-size: 16px; font-weight: 500; }
html.lf-ui .table-custom tbody td .small, html.lf-ui .table-custom tbody td small { font-size: 14px; }

/* Dashboard links header: "Links" with its icon, like AltumCode */
html.lf-ui .lf-card-section > .row:first-child h1 { font-size: 20px !important; gap: 8px !important; }
html.lf-ui .lf-card-section > .row:first-child h1 > i:first-child { display: inline-flex !important; width: 32px; height: 32px; font-size: 14px; border-radius: 9px; }
html.lf-ui .lf-card-section > .row:first-child .ml-2:has(.fa-info-circle) { display: inline-flex; }
html.lf-ui[data-lf-density="compact"] .table-custom td { padding: 9px 16px; }

/* Dashboard: "View all links" button under the list */
html.lf-ui .lf-view-all-foot { display: flex; justify-content: center; padding: 16px 20px 18px; border-top: 1px solid var(--lf-border); }
html.lf-ui .lf-view-all-button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; font-size: 14px; font-weight: 600; border: 1px solid var(--lf-border) !important; background: var(--lf-surface) !important; color: var(--lf-primary-text) !important; border-radius: var(--lf-r); }
html.lf-ui .lf-view-all-button:hover { background: var(--lf-primary-soft) !important; border-color: var(--lf-primary) !important; }
html.lf-ui .lf-view-all-button i { font-size: 12px; transform: scaleX(var(--lf-dir-x)); }
html.lf-ui .lf-card-section .table-custom-container:has(+ .lf-view-all-foot) { border-radius: 0; }
/* The dashboard shows 12 links and "View all links", so its page numbers (empty or not) are not needed */
html.lf-ui .lf-card-section:has(.lf-view-all-foot) > .mt-3:last-child { display: none; }

/* Footer social icons (Admin -> Settings -> Socials): readable icons, Instagram / LinkedIn / Facebook / X first */
html.lf-ui .footer-social-wrapper, html.lf-ui .app-footer .footer-social-wrapper { width: 38px; height: 38px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: transform .15s; }
html.lf-ui .footer-social-wrapper i { font-size: 16px; width: auto; }
html.lf-ui a:hover > .footer-social-wrapper { transform: translateY(-2px); }
html.lf-ui a:has(> .footer-social-wrapper) { order: 9; }
html.lf-ui a[href*="instagram.com"]:has(> .footer-social-wrapper) { order: 1; }
html.lf-ui a[href*="linkedin.com"]:has(> .footer-social-wrapper) { order: 2; }
html.lf-ui a[href*="facebook.com"]:has(> .footer-social-wrapper) { order: 3; }
html.lf-ui a[href*="x.com"]:has(> .footer-social-wrapper) { order: 4; }
html.lf-ui body[data-theme-style="dark"] .footer-social-wrapper i { filter: brightness(1.5); }

/* ===================================================================== Mobile and tablet (1.6.8) */

/* Link counters: one row of three from tablet up (AltumCode puts the third on its own line) */
@media (min-width: 576px) {
    html.lf-ui main .row:has(> .col-sm-6.col-xl-4 .index-widget-icon) > div { flex: 1 1 30%; max-width: none; }
}

@media (max-width: 575.98px) {
    /* Counters: three small tiles side by side instead of three full-width boxes */
    html.lf-ui main .row:has(> div .index-widget-icon) { flex-wrap: wrap; }
    html.lf-ui main .row:has(> div .index-widget-icon) > div { flex: 1 1 30%; max-width: none; padding: 5px !important; }
    html.lf-ui .card.flex-row:has(.index-widget-icon) { flex-direction: column !important; align-items: center; gap: 8px; min-height: 0; padding: 12px 6px; text-align: center; }
    html.lf-ui .card.flex-row:has(.index-widget-icon) .h6 { font-size: 13px; line-height: 1.3; white-space: normal; }
    html.lf-ui .card.flex-row:has(.index-widget-icon) .lf-stat-number { display: block; margin: 0 0 2px; font-size: 20px; }
    html.lf-ui .index-widget-icon { width: 34px !important; height: 34px !important; min-width: 34px; }
    html.lf-ui[data-lf-wrapper="app"] main .container > .mb-5:has(.index-widget-icon) { margin-bottom: 24px !important; }
    html.lf-ui[data-lf-wrapper="app"] main .container > .mb-5 > .card.mt-5 { margin-top: 24px !important; }

    /* Dashboard links header: title, then Create link + the three tools on one line */
    html.lf-ui .lf-card-section > .row:first-child { padding: 14px 14px 12px !important; }
    html.lf-ui .lf-card-section > .row:first-child > .col-12:first-child { margin-bottom: 10px !important; }
    html.lf-ui .lf-card-section > .row:first-child > .d-print-none { flex-wrap: nowrap; gap: 8px !important; }
    html.lf-ui .lf-card-section > .row:first-child > .d-print-none > div:has(> .lf-view-all) { display: none; }
    html.lf-ui .lf-card-section > .row:first-child > .d-print-none > div:has(.btn-primary) { flex: 1 1 auto; min-width: 0; }
    html.lf-ui .lf-card-section > .row:first-child > .d-print-none > div:has(.btn-primary) .dropdown,
    html.lf-ui .lf-card-section > .row:first-child > .d-print-none > div:has(.btn-primary) .btn-primary { width: 100%; justify-content: center; }
    html.lf-ui .lf-card-section > .row:first-child h1 { font-size: 18px !important; }
    html.lf-ui .lf-view-all-foot { padding: 14px; }
    html.lf-ui .lf-view-all-button { width: 100%; justify-content: center; }

    /* Long QR / link addresses shrink with "…" instead of pushing the page sideways */
    html.lf-ui .table-custom tbody td > .d-flex,
    html.lf-ui .table-custom tbody td > .d-flex > .d-flex.flex-column,
    html.lf-ui .table-custom tbody td > .d-flex > .d-flex.flex-column > div { min-width: 0; max-width: 100%; }
    html.lf-ui .table-custom tbody td .d-flex.align-items-center:has(> small.text-truncate) { min-width: 0; max-width: 100%; }
    html.lf-ui .table-custom tbody td .d-flex.align-items-center:has(> small.text-truncate) > small.text-truncate { flex: 0 1 auto; min-width: 0; }

    /* Footer social icons: a little smaller so all four fit beside each other with room */
    html.lf-ui .footer-social-wrapper, html.lf-ui .app-footer .footer-social-wrapper { width: 40px; height: 40px; }
}

/* Tablets and small laptops: same row height feel, a little less side padding so every column fits */
@media (min-width: 576px) and (max-width: 1199.98px) {
    html.lf-ui .table-custom td { padding: 18px 12px; }
    html.lf-ui .table-custom thead th { padding: 14px 12px; }
    html.lf-ui .table-custom td:first-child, html.lf-ui .table-custom thead th:first-child { padding-inline-start: 18px; }
    html.lf-ui .table-custom td:last-child, html.lf-ui .table-custom thead th:last-child { padding-inline-end: 18px; }
    html.lf-ui .table-custom tbody td a:not(.btn):not(.badge):not(.text-muted):not(.dropdown-item) { font-size: 15px; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    html.lf-ui[data-lf-wrapper="app"] .app-content > .pt-lg-5 { padding: 20px 12px 0; }
}
@media (min-width: 576px) and (max-width: 1199.98px) {
    /* The name column takes the space that is left and shortens long names / URLs with "…" */
    html.lf-ui .table-custom tbody td:has(.text-truncate):not(:last-child) { max-width: 0; width: 100%; white-space: nowrap; }
    html.lf-ui .table-custom tbody td:has(.text-truncate):not(:last-child) .text-truncate,
    html.lf-ui .table-custom tbody td:has(.text-truncate):not(:last-child) .d-flex,
    html.lf-ui .table-custom tbody td:has(.text-truncate):not(:last-child) .d-flex > div { min-width: 0; max-width: 100%; }
}
/* Link icons never shrink when a name is shortened */
html.lf-ui .table-custom tbody td > .d-flex > :first-child:not(.d-flex.flex-column) { flex-shrink: 0; }
/* Small laptops (sidebar visible, 992–1199px): a little less side padding so lists get more room */
@media (min-width: 992px) and (max-width: 1199.98px) {
    html.lf-ui[data-lf-wrapper="app"] .app-content > .pt-lg-5 { padding-left: 24px !important; padding-right: 24px !important; }
    html.lf-ui[data-lf-wrapper="app"] .app-content > .px-lg-5 { padding-left: 24px !important; padding-right: 24px !important; }
}

/* Sidebar menu (1.6.10): the same roomy spacing on every screen height, like AltumCode
   (42px rows + 4px between = 46px per item). On short screens the menu scrolls instead of squeezing. */
@media (min-width: 992px) {
    html.lf-ui .app-sidebar-links,
    html.lf-ui[data-lf-wrapper] .app-sidebar-links { gap: 4px; }
    html.lf-ui .app-sidebar-links > li > a,
    html.lf-ui[data-lf-wrapper] .app-sidebar-links > li > a { height: 42px; }
    html.lf-ui .app-sidebar-links > li > a.default,
    html.lf-ui[data-lf-wrapper] .app-sidebar-links > li > a.default { width: 42px !important; }
    html.lf-ui .app-sidebar-links > .divider-wrapper,
    html.lf-ui[data-lf-wrapper] .app-sidebar-links > .divider-wrapper { margin: 10px 0; }
    html.lf-ui[data-lf-wrapper] .app-sidebar > .overflow-auto { padding-bottom: 12px; }
}

/* Dashboard chart: the travelling dot layer (1.6.13) */
html.lf-ui .chart-container > canvas.lf-chart-dot { position: absolute; pointer-events: none; z-index: 1; }

/* Mobile top bar as in the old UI (1.6.16): a white pill with room above it, a bigger logo and menu button */
@media (max-width: 991.98px) {
    html.lf-ui[data-lf-wrapper="app"] .app-content > .container:has(> .navbar) { top: 10px; }
    /* keep the space above the pill inside the page, so no strip of the grey page background shows above it */
    html.lf-ui[data-lf-wrapper="app"] .app-content:has(> .container > .navbar.d-lg-none) { display: flow-root; }
    html.lf-ui[data-lf-wrapper="app"] .app-content .navbar.d-lg-none {
        height: 68px;
        margin: 24px 15px 28px !important;
        padding: 0 10px 0 17px;
        border: 1px solid var(--lf-border) !important;
        border-radius: 20px !important;
        background: var(--lf-surface) !important;
        box-shadow: 0 6px 18px -12px rgba(15, 23, 42, .18);
    }
    html.lf-ui[data-lf-wrapper="app"] .navbar.d-lg-none .navbar-brand .navbar-logo { height: var(--lf-logo-mobile, 35px); max-height: var(--lf-logo-mobile, 35px); max-width: calc(100vw - 150px); object-fit: contain; object-position: left center; }   /* Admin -> LinksFlow -> Design: logo height on mobile */
    html.lf-ui[data-lf-wrapper="app"] .navbar.d-lg-none .navbar-custom-toggler { width: 50px; height: 44px; font-size: 20px; color: var(--lf-text); }
    html.lf-ui[data-lf-wrapper="app"] .navbar.d-lg-none .navbar-custom-toggler i { font-size: 22px; width: auto; }
    html.lf-ui[data-lf-wrapper="app"] .navbar.d-lg-none .lf-topbar-actions .lf-icon-button { width: 44px; height: 44px; font-size: 18px; }
}
@media (max-width: 359.98px) {
    html.lf-ui[data-lf-wrapper="app"] .navbar.d-lg-none .navbar-brand .navbar-logo { height: calc(var(--lf-logo-mobile, 35px) * .86); max-height: calc(var(--lf-logo-mobile, 35px) * .86); }
}

/* Mobile footer (1.6.16): everything centred, Product and Resources side by side */
@media (max-width: 575.98px) {
    html.lf-ui[data-lf-wrapper="app"] .app-footer > .d-flex.flex-column { align-items: center; text-align: center; }
    html.lf-ui[data-lf-wrapper="app"] .app-footer > .d-flex.flex-column > div { margin-inline: auto; }
    html.lf-ui[data-lf-wrapper="app"] .app-footer > .row { justify-content: center; text-align: center; }
    html.lf-ui[data-lf-wrapper="app"] .app-footer > .row > .col-12 .d-flex.flex-wrap { justify-content: center; }
    html.lf-ui[data-lf-wrapper="app"] .app-footer > .row > [class*="col-sm-6"] { flex: 0 0 50%; max-width: 50%; }
    html.lf-ui[data-lf-wrapper="app"] .app-footer > .row > [class*="col-sm-6"] > ul { align-items: center; }
}

/* Phone link rows (1.6.16): the statistics count moves up next to the link name (top right) */
@media (max-width: 575.98px) {
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td > .mx-2 a[href*="/statistics"] .badge) > td { order: 4; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td > .mx-2 a[href*="/statistics"] .badge) > td:nth-child(2) { order: 1; flex: 1 1 0; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td > .mx-2 a[href*="/statistics"] .badge) > td:has(> .mx-2 a[href*="/statistics"] .badge) {
        order: 2;
        flex: none;
        align-self: flex-start;
        margin-top: 2px;
    }
    /* line break: dates and actions always start the second line */
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td > .mx-2 a[href*="/statistics"] .badge)::after {
        content: "";
        order: 3;
        flex: 0 0 100%;
        height: 0;
        margin-top: -8px;
    }
}

/* Desktop sidebar logo (1.6.17): the logo link may shrink, so a big logo height scales the logo down instead of cutting it */
html.lf-ui .app-sidebar-title .app-sidebar-logo { min-width: 0; flex: 0 1 auto; overflow: visible; }

/* Phone statistics "Latest entries" (1.6.21): country and time on the first line, device, OS + browser and referrer as small chips under it */
@media (max-width: 575.98px) {
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td:nth-child(3) > div > .icon-favicon-small) { gap: 8px 6px; padding: 12px 14px; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td:nth-child(3) > div > .icon-favicon-small) > td { order: 4; flex: none; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td:nth-child(3) > div > .icon-favicon-small) > td:nth-child(1) { order: 1; flex: 1 1 0; min-width: 0; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td:nth-child(3) > div > .icon-favicon-small) > td:last-child { order: 2; align-self: flex-start; margin-inline-start: auto; font-size: 13px; padding-top: 2px !important; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td:nth-child(3) > div > .icon-favicon-small)::after { content: ""; order: 3; flex: 0 0 100%; height: 0; margin-top: -6px; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td:nth-child(3) > div > .icon-favicon-small) .table-avatar { width: 34px; height: 34px; min-width: 34px; margin-inline-end: 12px !important; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td:nth-child(3) > div > .icon-favicon-small) > td:nth-child(1) .d-flex.flex-column { min-width: 0; line-height: 1.3; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td:nth-child(3) > div > .icon-favicon-small) > td:nth-child(1) .d-flex.flex-column > span { overflow: hidden; text-overflow: ellipsis; }
    /* chips: device, OS + browser (one chip), referrer */
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td:nth-child(3) > div > .icon-favicon-small) > td:nth-child(2) > .badge,
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td:nth-child(3) > div > .icon-favicon-small) > td:nth-child(3),
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td:nth-child(3) > div > .icon-favicon-small) > td:nth-child(4) {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        height: 26px;
        padding: 0 7px !important;
        border: 1px solid var(--lf-border) !important;
        border-radius: 999px;
        background: var(--lf-surface-2);
        color: var(--lf-text-2);
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td:nth-child(3) > div > .icon-favicon-small) > td:nth-child(2) { display: flex !important; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td:nth-child(3) > div > .icon-favicon-small) > td:nth-child(3) > div { display: inline-flex; align-items: center; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td:nth-child(3) > div > .icon-favicon-small) > td:nth-child(3) > div + div::before { content: "·"; margin: 0 5px 0 1px; color: var(--lf-text-3); }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td:nth-child(3) > div > .icon-favicon-small) > td:nth-child(3) .font-size-small,
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td:nth-child(3) > div > .icon-favicon-small) > td:nth-child(4) a { font-size: 12px; color: var(--lf-text-2); }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td:nth-child(3) > div > .icon-favicon-small) > td:nth-child(4) a:first-of-type { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td:nth-child(3) > div > .icon-favicon-small) > td:nth-child(4) a.ml-1 { display: none; }   /* the small "open site" arrow; saves room so the chips fit on one line */
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td:nth-child(3) > div > .icon-favicon-small) .icon-favicon, html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td:nth-child(3) > div > .icon-favicon-small) .icon-favicon-small { margin-inline-end: 2px !important; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td:nth-child(3) > div > .icon-favicon-small) > td:nth-child(4) .icon-favicon { width: 14px; height: 14px; }
}

/* Phone dashboard chart head (1.6.22): no big total (the legend already shows it); the title on the left, Pageviews and Visitors stacked on the right */
@media (max-width: 575.98px) {
    html.lf-ui .lf-chart-head > div:has(> .lf-chart-total) { flex-wrap: nowrap; align-items: flex-start; column-gap: 12px; }
    html.lf-ui .lf-chart-head > div:has(> .lf-chart-total) > .lf-chart-total { display: none; }
    html.lf-ui .lf-chart-head > div:has(> .lf-chart-total) > .lf-chart-title { flex: 1 1 auto; flex-basis: auto; font-size: 14px; padding-top: 1px; }
    html.lf-ui .lf-chart-head > div:has(> .lf-chart-total) > .lf-chart-legend { flex: none; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; margin-inline-start: auto; }
}

/* Empty states (1.6.23): AltumCode's big illustration is hidden from the first paint, so it never flashes
   while the page is still loading; linksflow-ui-pages.js then puts the new icons in its place */
html.lf-ui[data-lf-wrapper="app"] main .d-flex.flex-column.align-items-center.justify-content-center.py-4:not(.lf-empty) > svg:first-child:has(+ h2) { display: none; }

/* Phone link rows (1.6.23): only the "Updated" line; a link that was never updated shows its "Created" date instead of "Not updated yet" */
@media (max-width: 575.98px) {
    html.lf-ui[data-lf-wrapper="app"] .table-custom .lf-dates:has(.lf-dates-updated):not(.is-never-updated) .lf-dates-created { display: none; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom .lf-dates.is-never-updated .lf-dates-updated { display: none; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom .lf-dates .lf-dates-updated { color: var(--lf-text-2); }
}
@media (max-width: 575.98px) {
    /* the date line starts under the link name and its site icon, not under the big type icon */
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td > .mx-2 a[href*="/statistics"] .badge) > td.lf-dates-cell { margin-inline-start: 52px; flex: 1 1 0; min-width: 0; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td > .mx-2 a[href*="/statistics"] .badge) > td.lf-dates-cell .lf-dates > span { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 399.98px) {
    /* very narrow phones: slightly smaller date text and buttons, so "Updated 3 months ago" fits next to them */
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td > .mx-2 a[href*="/statistics"] .badge) > td.lf-dates-cell .lf-dates { font-size: 12px; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td > .mx-2 a[href*="/statistics"] .badge) { column-gap: 6px; }
    html.lf-ui[data-lf-wrapper="app"] .table-custom tbody tr:has(> td > .mx-2 a[href*="/statistics"] .badge) > td:last-child .btn-link { width: 30px; }
}

/* Domain field on touch screens (1.6.24): the phone's own picker, styled like the other fields, with a chevron */
html.lf-ui select.lf-native-select {
    -webkit-appearance: none;
    appearance: none;
    min-height: 40px;
    height: auto;
    padding: 0 34px 0 12px !important;
    background-color: var(--lf-surface) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2364748B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px 12px !important;
    color: var(--lf-text) !important;
    font-size: 16px;   /* 16px stops iPhones from zooming into the field */
    text-align: left;
}
html.lf-ui[dir="rtl"] select.lf-native-select { padding: 0 12px 0 34px !important; background-position: left 12px center !important; }

/* Dashboard counters (1.6.27 / 1.6.28): the link emoji on a light brand-orange tile for short links,
   the ID card emoji for vCard links (on its own green tile); biolinks keep the # icon */
html.lf-ui .index-widget-icon:has(.fa-link) { background: #FFF1E8 !important; }
body[data-theme-style="dark"] .index-widget-icon:has(.fa-link) { background: rgba(241, 90, 43, .16) !important; }
html.lf-ui .index-widget-icon .fa-link,
html.lf-ui .index-widget-icon .fa-id-card { width: auto !important; display: flex; align-items: center; justify-content: center; }   /* emoji are wider than the icon slot: centre them */
html.lf-ui .index-widget-icon .fa-link::before,
html.lf-ui .index-widget-icon .fa-id-card::before {
    display: block;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
}
html.lf-ui .index-widget-icon .fa-link::before { content: "\1F517"; }
html.lf-ui .index-widget-icon .fa-id-card::before { content: "\1FAAA"; }

/* Short links and vCard icons in lists and page titles (1.6.28): the same emoji as the dashboard counters,
   🔗 on light brand orange and 🪪 on the vCard green */
html.lf-ui .link-type-icon:has(> i.fa-link) { background: #FFF1E8 !important; }
body[data-theme-style="dark"] .link-type-icon:has(> i.fa-link) { background: rgba(241, 90, 43, .16) !important; }
html.lf-ui[data-lf-wrapper="app"] main h1 > i.fa-link:first-child { background: #FFF1E8 !important; }
html.lf-ui[data-lf-wrapper="app"] body[data-theme-style="dark"] main h1 > i.fa-link:first-child { background: rgba(241, 90, 43, .16) !important; }
html.lf-ui[data-lf-wrapper="app"] main h1 > i.fa-id-card:first-child { background: var(--lf-type-vcard-soft) !important; }
html.lf-ui .link-type-icon > i.fa-link::before,
html.lf-ui .link-type-icon > i.fa-id-card::before,
html.lf-ui[data-lf-wrapper="app"] main h1 > i.fa-link:first-child::before,
html.lf-ui[data-lf-wrapper="app"] main h1 > i.fa-id-card:first-child::before {
    display: block;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-weight: 400;
    line-height: 1;
    font-size: 18px;
}
html.lf-ui[data-lf-wrapper="app"] main h1 > i.fa-link:first-child::before,
html.lf-ui[data-lf-wrapper="app"] main h1 > i.fa-id-card:first-child::before { font-size: 22px; }
html.lf-ui .link-type-icon > i.fa-link::before, html.lf-ui[data-lf-wrapper="app"] main h1 > i.fa-link:first-child::before { content: "\1F517"; }
html.lf-ui .link-type-icon > i.fa-id-card::before, html.lf-ui[data-lf-wrapper="app"] main h1 > i.fa-id-card:first-child::before { content: "\1FAAA"; }
html.lf-ui .link-type-icon > i.fa-link, html.lf-ui .link-type-icon > i.fa-id-card { width: auto !important; display: flex; align-items: center; justify-content: center; }
/* 🔗 a little smaller than the other icons (1.6.28) */
html.lf-ui .index-widget-icon .fa-link::before { font-size: 18px; }
html.lf-ui .link-type-icon > i.fa-link::before { font-size: 16px; }
html.lf-ui[data-lf-wrapper="app"] main h1 > i.fa-link:first-child::before { font-size: 20px; }

/* Short link and vCard icons as images (1.6.29): the emoji looked different on iPhone, Android and desktop,
   so the plugin's own pictures replace them everywhere. Both are embedded here (no extra requests). Biolinks keep the # icon. */
html.lf-ui .index-widget-icon .fa-link::before,
html.lf-ui .index-widget-icon .fa-id-card::before,
html.lf-ui .link-type-icon > i.fa-link::before,
html.lf-ui .link-type-icon > i.fa-id-card::before,
html.lf-ui[data-lf-wrapper="app"] main h1 > i.fa-link:first-child::before,
html.lf-ui[data-lf-wrapper="app"] main h1 > i.fa-id-card:first-child::before {
    content: "" !important;
    display: block;
    width: 24px;
    height: 24px;
    font-size: 0 !important;
    background: center / contain no-repeat;
}
html.lf-ui .index-widget-icon .fa-link::before,
html.lf-ui .link-type-icon > i.fa-link::before,
html.lf-ui[data-lf-wrapper="app"] main h1 > i.fa-link:first-child::before { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAADAFBMVEVpZGSkpaOQcWKcnJwZFx9mZ1xhXV+iqKydtcWSr8int9PVz8+ai3QWFhheXmKOgnqTnKDZs61HJydtiaiPaF5wajxeaqB7jY/IyskoHyAPD2todoKNfXS1wsfCurYzNDY7Q0hROiVHPTxWPkBQRT5/f/99hIh5gou0HwDpfwDWt8L//wD//6rN1NU/VWo9SVVCLS5lQD97foB/v/98rOGZfzOFQD+qqtS1wLyewNzCxL/Cwb/M//8AAAD6+/xKSUhvamgtKChVVFT///9nWlM2NjbQ5/Z+fn6Hqc51dHWz1vJyNjaIiI2OuOSpqamnyuuRlZlwZFuRtNdQKSmKdnCMmKuXpLGyxdRyeonK2+lpLCxsia56o9JxR0l2m8Z5hI+oqa28vb2ruciIR0iaw+t3lLdKODevtbjb8v2HaWqQg3lVVVSKVlfM09iy//+IOjmEeYdIQj2qh3jDyc8aGhtTW2RbY2yxl4u74/zk6/Cklo5saWg8QUVVa4l4W2KOg3uUioXPp5VacpK4x8yvxdMGBwd0c3N0cnGvqqbWs5c7PkGWmJaSlJOqopuqqKeytrP+580VFxhtaGR4dnNxepCGXGOJjKKyt7O0xs/Ouq3/qqorHR1aWFZtcXV3l5qJgnyTlJWSo6uZuNClenClnJeqqlXH0tT/AAAAAP8nKSpSS0lZaG9mV1lrZ2xmaW1tamhvfIt/v7+NiYWNiYeVl5ODruCkmpKro52qq6q1urm/v//NwrfFycnM1NbR2Nnx07McGBY4NjU8PHpOSkxbVFFUU1NnfqB///+IenOQjIeQioeTpLGMrMq/f3+uiYWlloyrpJyqqv+ou8e0yNTrx67w2M8YHB0eICEmJCcnKCkyNjhIRkZTVll4ho2IenOPg3uLi5KUi4WVlJCAnsSWpa6vkX2jnJmnl42znKq3opCqq6q/v3+vtLTGnIfCzMz/f3///38Af38A//8rFRUsLCgkJCkyLC4rLS5QAABPTkxYVlRbW39Ye6tVqqp1PkBgV1XU20GYAAABAHRSTlNdohgZIB2j1GCh8N4XVNdeZf3r5/4LDSil6QWxlEYqr3IVUv5RAkaoAwX+AQN2DNuk/mkE/gr/Bkn/aZ0FAP78/Pv9Afz7/QT8+v39/P0E/f38/P38/P38/fz9/Pz9/fz8Bvz9/Pz9/P79+gX++QP+/fz7+fr7/fr9/rLU+fr+2M39/G/WLbDUUvz6DjNqK0v8L5OTD/7+LY38A/tOMAyLzzHQ/k8DlwEBjRISMRIxq9AEL3VK/I1La2sE91eq0P0REgQqia39As5Kso7SBP3OLgOTtf38S/lIrdCSyxpJsBWXrf5U/Shx/v2xBI/+bQICAgELDzts0wbVcgf7A/2sQYiNGAAAFFpJREFUeNrVWwd0G1XWluP0QkJf6vbd/9/dv/fyNG9GM9KMNJJG8ow0smRJllUi23KN7ThOcyophFRICElIwhIgG9IIsOFfQu9LWXpZOiwssPS+wN43RbITW5bshD3/yzk5x8eSv+/de9999333PQv6Kw/LifvTNhhX/XUIOPYfbsrTOFx797dLwGNg/9vkysoVk/9GZ+H5tgg49sN/uy4ZP2HCDp4M/45HNy68hLCotX0LBBww+b8dP+EB3g/Ykag2CI0dG8/7DKGmq04wAQJ/yXgN3W8MAI+mwuFwlN+xcDJCj5xQAgT+d4DpdyeTXnO4gcMrqfBdC+7iE+NPh4Vxwgh4NHi32+112u3TrWRMt4ecQMENzgArzFnAL3pV+9wJIdCERi30uw8lnXarOQi+NrxJ9yEIiPCcu/wTGpDtRBCAaf3nIn8k6Zyeh7fbnc6Z2rDb7TOdYIgIUEj5f3I0g+NBoBaN2vhfvLsvPEzbzwcUsaVFVAJ+MMxMZ9LNp+aE/QePYnAcCNjQ+TB9b8H4Tj+viFm2xuWqrnbBqJnbovjBFxMn8nct8P+0P4MRE3Ag9CcvTL8Azyst2RpXVRVtjiogwaq815uYmAjP8Z/Tj4FlxO7/7EpvxJ2ffigQk1lXFc2RkU5zGgOOkKgTAn4+/jNlAb+k71qwjNT9k2/2Rrym9+1+Ua6rruJaKYphBVGSJBEzAM8t5wgFVVHe+Fk8HBhL7HZcCDShVZPcfN78TkVurKY5imGwKAUCAC+KUjwuUDNoajZHu/49e/HFb5wcjyqXoYbjQqAJXeT0H5pp4vvVRlcVx8DcYer1gs/HksEwgihwMziKGKFRbek6eSIv3J63gWVE4f9/zoL77Uq2roqmWICP1/eMtWxxrF//4srrDt7jozhGxDRNPfMpTRj0TkooJ+VNYDle+CERpp9mWSy9OW/tmL6fO7BNoOgOlaaf+e4zwECQeycF1S9MBpYR4C/sE/5Btc5Fpi/G51uuIavT43DYkM3xS8cu+GEdprnYcvq7VxMGeOfJj/P4GptjZASaCH7SDP9EtrmKZlgcl9Z+CICOfpkCfrIIHK1SZ1199dO0a0P2wcfaxTvQL0dEoD8+v6G5imPZ+sz8MQg5jk1WDrRlafpJdfnTU554uqp5brb38Th7zYhcYIP45018e6DRRbf6WClz7kDwer7cQmzAXb34iU/TdezOxx5vuQOdPnwCGr43H/66++NxC7I5Bs3Y12KaEj5dg6bQrpoNvavfYMYM3wIe9HDInZ+/0kjwcWbc95Gj2J5h8c3AnVMQurrq65qdRybhy7SPW4a1/4wKuc30a7+4rpqGxX/TLFQMn/xySSsn3YluWQMmYJetfvDOYROwod943X3xGba+/frBzW8Q2HWtQGPxqVvABK6attWb2DHDdEEt+k7IXP/G/MVN05Bt15COe4niAkvQh0+ACeQjj2NtR7AMY/4X2M3tf7qizV/cdC+yDfnFBnRAoGOBxQg9rflAvoP4oGwCDtueUNLc/wLa/KWbpoJZSomd+zgm8QVCT6RdNV2ru75B7w6DgA19x+k28w9svoxPuul5tKK04J3GcIn7Fq9Zc4rLJR/ZdNJtw4gBD7og5DcCIAHbDwXzn1zS/IkPVgp0fNziNegfXa7THtvk2z0MAjZ0s9fIQEHI/xT4f1SJ+PDd39fTUvuUxegTKBKXPZYlVYGlXPxf240VGJKbq9I+OTO1VHwY71/OCe2fLEZPQan8ziZ5TNkEPrA15Lx6BWQXSQAKmYOl+V8b76EKCrc/uxiNBgKvLZNvB69YyjZA0lgAJAH7MteXMX/4+h8pnLhTJ9DW2/ar8gncqhug204KgDQrjSth/fcjwODMSWvQGkLgzfIJ1KILQyQCu0NBcADH1sd/VShvSyQgxHueQh8DAbkLCJQZAzY0KUhyUK5dd0B8W/H959gxTicwugYIvFY2gQY0Kucn+MFMC6mAxMvLcgB8uCHOiPGej9EP6qpr5La2s8vMA7Xo7fYExH8mI5EU5JMsyFMOgVFoZbwjkFi6BlmAQLbtnvJ2Q9t+8EAgBAkwoAikAhfnj/4PR3khdGP8pExu32IgUMXKbeeiS0snoKl/YzKxbjh+SrHG6ioKK+S7d3vKcUGFtDTXfeqUxWObCYGp6LelEiDolRdNmCjFrNaMKKp11WlWUE+dMH4VQiW7wYHGtO/7abd9yZTv1bnSQOB58lVLifAXTQDtLSgGrCEpFsuSCBAWnAry24Tx8MszSvRARXDsOGtu7/fGwgR8vjZHaTHgIeLjRCKAuRM4Yc3EBPBAmsUdUX80DBweeFWnWIIHFinn5Ky5fWN76mAC2VmQmocmQJS9hTv8RH5z2uNUzioJgqpNoDOY8POR8J/D/I6foBLykQddEdx3OWyi88+BLMr45D+gt4YmQOS/RW530jmT1AASFcqJGGNXVauPiQUzASWVShEK948eUAXtP5MPJ/H72q3W9nH7wII+tn5FCVUx0b/8h9ym+hejQhlBI8BmGSkRDOUSSkxVF/yZH3fZUDkJkogzrGgijkw84Julf8NS3PwXLUoeyutfOYFql3AHZqthETFSPKeLQqowZ0GUH9KUo3J8inwjBAeZKh8r36AvH0tR8y8EgdGE745LApOJdXbgGrBglgERJqdXJrzaAQLgumL4P4cITKYyWiHVUldNYXb+GbYhjmY2NOpRbySvPgYlMD6TETo0AnKWAuVFCuq1iTvc0RH2Lym6At72RpVu4yQLEZC9wsgflsG/AtF3yKy/c4EYpihMgREYjYBM0YxQLwTsOoOUqjGwDfrHbnRGNAeAAaCSxOy8re8VP57b0HkgP5rmT8QwS9EcpkB1Yzprql075dkzgIEgSCHtAxP5WGfYv3eQrFiLrnP6U0H9KFsDBmDyBhiMgA3kz0jSPH8HBNbFcUKMoQQg0FFT/U875eWg/jH1Mo616wrZK+HOcOCOAeuDWnRv0J1K6J+DJcT42Fl5qpbB8c3zf0gi8pcQECmGwjoB1842in6SozAwUPWZ+aN3daakHw2QkWD+QXc0oCuJKuyjmKp/3VZMpoPld6U36szLT43Nm5mAxHAcRVGdDMNQEANd1GZiAo2Bvhz5qNoZED6ynT3Q/CMBQ0uoqaZ9DL6w4CvLIPgRE38chvJbjQutrUwPRS1nNAKu096h6I8tHDcbi/WC1K2L1ClVVcYebYLDZP4GvjXAumgWHPDBpUWkWhs5/pvz7w5k607hYPoUu/T53Z+niQxLCLC9mPsE7b6D47AoChk9EF9JLYiJlv4Mmgg+r1jNAKAp4oBiWrGGb87frmxoPoXJiKDArIPv7AUvMPCvqrrmnS6OuhWhaz+nsCTqTrBDh0yVlvaLwyb0qtcd0RIAOBPwWzElX1FULdfsPzMv/zRvFjKY8t1zAMEJ6CBFwkAjsLOXoZ5FY9D6OylBkvUZevloWBX7CNGAfyPM37B/UPiarGTf9douOBgBDd9Y/qFYo2uzlGEZfC45xTnQShC6yEhDECzDDHUZugbVjqVikqibwA+BGOvJm2AXHKS8ef97cU0VhxlYgZcW6Zg0oY1Oc/4hcvoLxEH8nqrv97bb5nFUB5iAIyJPF2ae24NuQ45TOiQxrmP4I2FVNg8rINX+zuvmE9b8AuQgnc3f+m6Rlk0T+u9Q3v+An85IFCsfMHzmQAcZGnIxNRsINPbKMeob1HArup1SFTGkp2Q+rKpr9Y/Df4AfTfSZvw/wXzwqV1mO0h9D/jx+YzUVlBjfvAPmV+B8DzqXCj7QTRBbyq0ltvmiUxETRrsqqqoYghNdBZ3ER5M8HzTwBRf4n22dV3n0MrX0w3/d3g+/XaTwPEeBsgdtY7hAh26Cue/ISg+31oOu+fJzVZKMXQl8oFqQA+qjVYtg+eWM+GvR8Kl5nmN2C0vfBfjRJG+yIH9RQcB/YY+haus+cAiQkxnNBGy2Tcj0cM9BSXxZp+EDqzcSbomtfaQJnQ593AhvN9d/DZ0m+KuKtm5hAdhN+Smgz1+478t+LvOgdSwdh7Q0m6id2TYxIXCUZT16LmX6wB0V1ZMQmpZIRszws/La+gf/bx9gt7T0bQDZTcqJDdXpoNgq3De6f8jYHOuXcoSZFgVzZVlMqBz3nOXZmKSnghAQEOdM25H0R0z325W5Br5noN3aUtD/HHn90ZnV8V++6mj5FQQFTKs5YbbmBJwFBhJFz/4HSMh6ECQjF3fN4SMAb2qpCuR/CtbO5bUDVguWPgJwKGkGoKsqIbXiWe8fK/9qTlDaoTyiq11zcVYQMwHMzeiIxTTA6cl/VXo7wlF/yOzkibCVM5hiZ60YuFqxFPQ/u1kABepOCcRbfbO+HEh+brhtCUXH2wVqOV1dMxdjQYTGIEeJOgGr163c1MnnG6lQgYKQAPl31r8MomVY+uh/hgOCG6rETCv70IsDfsWB9izluExQnU36gMAAxwIBzIixkBGFbzx+UiLfx826zuJ8mMLXo12OopdYiPzlNxzQUo2DLNW1cpACr4F0XzglKDKEAQsMVGjQxlSTQHy1T8/+IT/kEth+fZR8IRr0SpNJ4KO8Afx1bBC31l9BDu+DnBeuhf5PLB6AdiCsBfACGardJGDFsCLswYAIh2iakVmy/16Kit8jqiUCqI4/s8UVFNPAubbIQZ8w6BQVKNLT6RpMTmvYiAEnf7LVJ9kDMTVbUwWdLNj+7ltVBN8g0CcC/F+LcQpXFNUfgcFSagYHRxNRJeiwPzGKtUCgQ4bbC9DCZwUfuL+pqIRh0Y16nakA21vmBlmmq7J4/6UB7V7C0GdxUJUKGOpU6A4HzAb6Jqsv7XLRm2HxwfTvuWKIVpLFzAFGEe6viUut9TcWM5pxb8KCqRkzaFIiQV+cY4y857z4sdU+uLPQypDmOT5YO5SCY9H+WoPdOAJPb8lmfL6Hzh5a94GNaR0LFJ6E0hgYdBqZxyseOcK2Qg2JWda3bRXR5oYmAPJZd9JMwnGJrb+hFOHpK4S27GUompiB42LG5SX/g6tvAmi4N4C3PVyKgGXRuzAhIwR5Of6aKR0MaQMoLbasw0yahgsSRu6ZqTy4+k2W8uGlUyGKPY4Sb1TekjM9oIhxGaSDEvVH0hffbVnbA0c2cxtr6T3S5uvZthKVBq8R8KAz7QmjC6Ioy06b5/h56T00Uq1sHYsV0wMbli2rX2eUpKhEAn1DQJGWyS+hX5TVx3OgHtVr9jFPW9ZV/zya7CjnUqsN/Y+5CL1KvFe+t08RVlIf7Z9jYWP7825oe7Ne3oPKu1ULMZgzXZjKdAlltgBsDUosmT9JvVYvv1CWiK8F4c1G+TLdGT65a0l5TYBadL+UMg0wN1sv108tS8TXCOQS+l+we2O9XUvK+r4HbQ/EnOY+VifLcv2eMi82O9DtBQJqV9fecghAJbko7DeUNL6uUSYK7C/KJbAlp4td0+1O9cGutaisFsCjgYIDoDzx1b9os5VL4MycYjeuIcZkaWwZBGxoYyJsOCCkump8xACXlu2CM9slk0AYS3vRe6Xj/ylo4k8Xm12g/z209V1UNoEx7cbh1ul9BSs95dzlCoaThasEcPqqv6C8PhYhcBX6+4whtXm9fKci3FoGfso8yyWgBCLyU5kOMJbhOCFgEHCrYfFH+g2jocb/wl22lHmXJdjYDMcfSlxlc5RPAJpZQkyPY687vCDwTUmpmNylC5v4IdxM9Ee5bAcYm9FGscOu19TuSCcv3FJSI+vvnKn8XSa4SgDH/yFK2SLb8XkSpwcBNKbUsPLskPOApQ74+btcIIDTUAI+tL68FFBwwdY4JxknO90EtqHMj66E+ffDx0yXp9xWdqEkq2CYkGmCsMrfWfwvNaHPfhNMmVpuCM6fNAunw1XlB0C+KP21SBtqNlyGX5BSflCMgQ1VTvJHC/jNGj5kgN8iNFwLVAY4o652Jv3RObw4Gt026PZDpLTIUfMnGagWDfuZTxN6G9OKURLAHfQFfGz0IDY4DJ0sJ58XAJxys45/YRl3WY4lcDfaLtHG2QYY+FNz+FNHo8MfHGN8mOTDj0L6y19lzebxhzd/83DqQX/EtBAyruaTe/iRB+A3+/tZ4W4I/lELg3w0ae9zlZXT8d9CIyLgsIEJjKVIbBCJqim+glw7bdrvufvHP/7qkcNkZU5euCgYLdzkJhdJQP8YyfzzAoUH3S/MYOKmZ+FdSFiN8vev7PPJ71+yMQjdam/hJrWG7yMnudoRvzWz2daPo57MM7B74WUKeZ3zwITx47dvr9w+bfyEiX5/lM9bn8hf1SD/jRS/j0r2qkjTTLzbpABSI1AIp3hzRKLuArw1SMIfChBWfHhE+AWdcD9xAs1IocI7EfJAJwr9+VQqGo24+76gIfIXkf9Y30Oe4eWfAaRaD6rAcMwV2q393qqQmxPwcqkPujWUAPlrM4Qfg2d5hpV/ByTgsK2/nIFnAJ1KHyztwc70/j8nJGzoT3LF++hddNwePDrQ7wmD5ZSQ6bYONkIZRWTTEC3Yx0D9MYz9t8hDp690BiD6CPHcQByI+KfO/WGaJtnHN//8Ebr/2JbNGWj3y+QpBDUbuoGZ9lA/EiFAF0B1h+lDC5nF19cOZ/sf4rGbA42ugPcgyxnSHsQxuCSRSSSCwUQmLsU0QfCH5MkMdL/xvBtQeaf4El9cgkuniQzMkWG0DiHp1GpD+0F7PAT36H3CS+cjjw2dkFe3HrS1QoDWOGWiFsZsgG9lWB9+4WE00tVXpHkNf3nlywJYgctPX2OynLyaItLoC7BDHKfpD9K+BwqrKkRMEX/rQ38zBtbH8rYDR78hOQEPnwlA7QWzRMHHUHlwBsvzXrp3ha4PnvCX1w7i4toLLnx5/jwB+6AjcM/8ij+8Xlmy+nccnn7bDDdvrfSsqKytPFOPDw9C3+Lbc5vnLc+uQsvw+Jq+9MduNoC22RD6//f6vrTxF2lyuL+uPrHyAAAAAElFTkSuQmCC"); }
html.lf-ui .index-widget-icon .fa-id-card::before,
html.lf-ui .link-type-icon > i.fa-id-card::before,
html.lf-ui[data-lf-wrapper="app"] main h1 > i.fa-id-card:first-child::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22 width=%2264%22 height=%2264%22%3E %3Cdefs%3E  %3CclipPath id=%22lvc%22%3E%3Crect x=%224%22 y=%2212%22 width=%2256%22 height=%2240%22 rx=%226%22/%3E%3C/clipPath%3E %3C/defs%3E %3Cg clip-path=%22url(%23lvc)%22%3E  %3Crect x=%224%22 y=%2212%22 width=%2256%22 height=%2240%22 fill=%22%23CFE6F3%22/%3E  %3Crect x=%224%22 y=%2212%22 width=%2256%22 height=%228%22 fill=%22%232F6E84%22/%3E  %3Ccircle cx=%2260%22 cy=%2236%22 r=%226%22 fill=%22%23B5D6E8%22/%3E %3C/g%3E %3Crect x=%2210%22 y=%2225%22 width=%2216%22 height=%2220%22 rx=%222.5%22 fill=%22%23EAF5FB%22/%3E %3Ccircle cx=%2218%22 cy=%2232%22 r=%224%22 fill=%22%232A77C1%22/%3E %3Cpath d=%22M11.5 45c0-4.4 2.9-7.2 6.5-7.2s6.5 2.8 6.5 7.2z%22 fill=%22%232A77C1%22/%3E %3Crect x=%2231%22 y=%2227%22 width=%2220%22 height=%223%22 rx=%221.5%22 fill=%22%236BA8D2%22/%3E %3Crect x=%2231%22 y=%2233%22 width=%2216%22 height=%223%22 rx=%221.5%22 fill=%22%236BA8D2%22/%3E %3Crect x=%2231%22 y=%2239%22 width=%2212%22 height=%223%22 rx=%221.5%22 fill=%22%236BA8D2%22/%3E%3C/svg%3E"); }
/* sizes: dashboard counters, list rows, page titles (the card picture has room above and below, so it is drawn a little larger) */
html.lf-ui .index-widget-icon .fa-link::before { width: 19px; height: 19px; }
html.lf-ui .index-widget-icon .fa-id-card::before { width: 24px; height: 24px; }
html.lf-ui .link-type-icon > i.fa-link::before { width: 16px; height: 16px; }
html.lf-ui .link-type-icon > i.fa-id-card::before { width: 20px; height: 20px; }
html.lf-ui[data-lf-wrapper="app"] main h1 > i.fa-link:first-child::before { width: 21px; height: 21px; }
html.lf-ui[data-lf-wrapper="app"] main h1 > i.fa-id-card:first-child::before { width: 25px; height: 25px; }

/* Tighter section buttons (1.6.30): the stacked collapsible buttons in biolink settings, block forms, QR codes and link settings
   (Customizations, Border settings, Themes, Style...) sat 24-48px apart. They now sit 10px apart on desktop and mobile;
   opening one still shows its content with the usual spacing. */
html.lf-ui[data-lf-wrapper="app"] .btn-block.my-4[data-toggle="collapse"]:not(.d-none),
html.lf-ui[data-lf-wrapper="app"] .btn-block.my-4[data-toggle="modal"]:not(.d-none) {
    display: flex; align-items: center; justify-content: center;
    margin-top: 10px !important; margin-bottom: 10px !important; }
html.lf-ui[data-lf-wrapper="app"] .btn-block.my-4[data-toggle="collapse"][aria-expanded="true"]:not(.d-none) { margin-bottom: 16px !important; }

/* Block list (1.6.31): the block cards on a biolink's Blocks tab sat 24px apart; now 14px, on desktop and mobile. */
html.lf-ui[data-lf-wrapper="app"] .biolink_block.card.mb-4 { margin-bottom: 14px !important; }

/* Pixel type picker (1.6.33): on phones the 9 pixel types (create and edit pixel) were one per row; now 2 per row,
   3 per row on tablets. Desktop keeps its 3 columns. */
@media (max-width: 991.98px) {
    html.lf-ui[data-lf-wrapper="app"] .row.btn-group-toggle:has(input[name="type"][value="google_tag_manager"]) > .col-12 { flex: 0 0 50%; max-width: 50%; }
    /* long names (Google Tag Manager) wrap to two lines instead of running under the round marker */
    html.lf-ui[data-lf-wrapper="app"] .row.btn-group-toggle:has(input[name="type"][value="google_tag_manager"]) > .col-12 > label.btn {
        height: 100%; min-height: 48px; white-space: normal; line-height: 1.25; text-align: left; font-size: 13px; gap: 6px; padding: 8px 30px 8px 10px; }
    html.lf-ui[data-lf-wrapper="app"] .row.btn-group-toggle:has(input[name="type"][value="google_tag_manager"]) > .col-12 > label.btn::after { right: 10px; }
    html.lf-ui[dir="rtl"][data-lf-wrapper="app"] .row.btn-group-toggle:has(input[name="type"][value="google_tag_manager"]) > .col-12 > label.btn { text-align: right; padding: 8px 10px 8px 30px; }
    html.lf-ui[dir="rtl"][data-lf-wrapper="app"] .row.btn-group-toggle:has(input[name="type"][value="google_tag_manager"]) > .col-12 > label.btn::after { right: auto; left: 10px; }
    html.lf-ui[data-lf-wrapper="app"] .row.btn-group-toggle:has(input[name="type"][value="google_tag_manager"]) > .col-12 > label.btn > i { flex-shrink: 0; margin: 0 !important; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    html.lf-ui[data-lf-wrapper="app"] .row.btn-group-toggle:has(input[name="type"][value="google_tag_manager"]) > .col-12 { flex: 0 0 33.333%; max-width: 33.333%; }
}