/**
 * AuthGuards navbar styles
 * Self-contained; no external CSS required.
 * Breakpoints: md = 64em (1024px)
 */

/* ===== Base reset & Mantine variables (standalone) ===== */
*, :after, :before {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

:root {
    --mantine-scale: 1;
    --mantine-spacing-xs: calc(0.625rem * var(--mantine-scale));
    --mantine-spacing-sm: calc(0.75rem * var(--mantine-scale));
    --mantine-spacing-md: calc(1rem * var(--mantine-scale));
    --mantine-spacing-lg: calc(1.25rem * var(--mantine-scale));
    --mantine-spacing-xl: calc(2rem * var(--mantine-scale));
    --mantine-font-size-sm: calc(0.875rem * var(--mantine-scale));
    --mantine-font-size-md: calc(1rem * var(--mantine-scale));
    --mantine-font-size-lg: calc(1.125rem * var(--mantine-scale));
    --mantine-radius-default: calc(0.25rem * var(--mantine-scale));
    /* Input heights – lg (3.125rem) for search bar */
    --input-height-xs: calc(1.875rem * var(--mantine-scale));
    --input-height-sm: calc(2.25rem * var(--mantine-scale));
    --input-height-md: calc(2.625rem * var(--mantine-scale));
    --input-height-lg: calc(3.125rem * var(--mantine-scale));
    --input-height-xl: calc(3.75rem * var(--mantine-scale));
}

/* Skip link – accessibility */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0.5rem;
    z-index: 10000;
    padding: 0.5rem 1rem;
    background: var(--mantine-color-primary-4, #3b82f6);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0.5rem;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

body {
    margin: 0;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: var(--mantine-font-size-md);
    line-height: 1.55;
}

.dashboard-page-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Main content grows so footer sticks to bottom on short pages */
.dashboard-page-wrap > main {
    flex: 1;
}

[data-mantine-color-scheme=dark] .mantine-dark-hidden,
[data-mantine-color-scheme=light] .mantine-light-hidden {
    display: none;
}

/* ===== Theme variables ===== */
:root[data-mantine-color-scheme=dark] {
    --mantine-color-primary-0: #1A76FD;
    --mantine-color-primary-1: #1A76FD;
    --mantine-color-primary-2: #1A76FD;
    --mantine-color-primary-3: #1A76FD;
    --mantine-color-primary-4: #1A76FD;
    --mantine-color-primary-5: #1A76FD;
    --mantine-color-primary-6: #1A76FD;
    --mantine-color-primary-7: #1A76FD;
    --mantine-color-primary-8: #1A76FD;
    --mantine-color-primary-9: #1A76FD;
    --mantine-color-base_dark-0: #1D1D1D;
    --mantine-color-base_dark-1: #1D1D1D;
    --mantine-color-base_dark-2: #1D1D1D;
    --mantine-color-base_dark-3: #1D1D1D;
    --mantine-color-base_dark-4: #1D1D1D;
    --mantine-color-base_dark-5: #1D1D1D;
    --mantine-color-base_dark-6: #1D1D1D;
    --mantine-color-base_dark-7: #1D1D1D;
    --mantine-color-base_dark-8: #1D1D1D;
    --mantine-color-base_dark-9: #1D1D1D;
    --mantine-color-base_dark_lighter-0: #2D2D2D;
    --mantine-color-base_dark_lighter-1: #2D2D2D;
    --mantine-color-base_dark_lighter-2: #2D2D2D;
    --mantine-color-base_dark_lighter-3: #2D2D2D;
    --mantine-color-base_dark_lighter-4: #2D2D2D;
    --mantine-color-base_dark_lighter-5: #2D2D2D;
    --mantine-color-base_dark_lighter-6: #2D2D2D;
    --mantine-color-base_dark_lighter-7: #2D2D2D;
    --mantine-color-base_dark_lighter-8: #2D2D2D;
    --mantine-color-base_dark_lighter-9: #2D2D2D;
    --mantine-color-base_dark_lighter-filled: var(--mantine-color-base_dark_lighter-8);
    --mantine-color-base_dark_lighter-filled-hover: var(--mantine-color-base_dark_lighter-9);
    --mantine-color-bg_dark-0: #121212;
    --mantine-color-bg_dark-1: #121212;
    --mantine-color-bg_dark-2: #121212;
    --mantine-color-bg_dark-3: #121212;
    --mantine-color-bg_dark-4: #121212;
    --mantine-color-bg_dark-5: #121212;
    --mantine-color-bg_dark-6: #121212;
    --mantine-color-bg_dark-7: #121212;
    --mantine-color-bg_dark-8: #121212;
    --mantine-color-bg_dark-9: #121212;
    --mantine-color-anchor: var(--mantine-color-primary-4);
    --mantine-color-primary-filled: var(--mantine-color-primary-8);
    --mantine-color-primary-filled-hover: var(--mantine-color-primary-9);
    --mantine-color-primary-light: rgba(26, 118, 253, 0.15);
    --mantine-color-primary-light-hover: rgba(26, 118, 253, 0.2);
    --mantine-color-dark-0: #c9c9c9;
    --mantine-color-dark-1: #b8b8b8;
    --mantine-color-dark-2: #828282;
    --mantine-color-dark-3: #696969;
    --mantine-color-dark-4: #424242;
    --mantine-color-dark-5: #3b3b3b;
    --mantine-color-dark-6: #2e2e2e;
    --mantine-color-dark-7: #242424;
    --mantine-color-text: var(--mantine-color-dark-0);
    --mantine-color-body: var(--mantine-color-dark-7);
    --mantine-color-placeholder: #8a8a8a;
    --mantine-color-dimmed: var(--mantine-color-dark-2);
    --mantine-primary-color-filled: var(--mantine-color-primary-4);
}

/* ===== Light mode variables ===== */
:root[data-mantine-color-scheme=light] {
    --mantine-color-primary-0: #1A76FD;
    --mantine-color-primary-4: #1A76FD;
    --mantine-color-base_dark-0: #fff;
    --mantine-color-base_dark-1: #fff;
    --mantine-color-base_dark_lighter-0: #f8f9fa;
    --mantine-color-base_dark_lighter-1: #e9ecef;
    --mantine-color-base_dark_lighter-filled: #e9ecef;
    --mantine-color-base_dark_lighter-filled-hover: #dee2e6;
    --mantine-color-bg_dark-1: #f1f3f5;
    --mantine-color-text: #212529;
    --mantine-color-body: #fff;
    --mantine-color-placeholder: #868e96;
    --mantine-color-dimmed: #495057;
}

[data-mantine-color-scheme=light] body {
    background-color: #f1f3f5 !important;
}

[data-mantine-color-scheme=light] body .mantine-Paper-root,
[data-mantine-color-scheme=light] .authguards_paper {
    background-color: #fff !important;
}

/* ===== Theme toggle button – refined style ===== */
.nav-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    appearance: none;
    font: inherit;
}
.nav-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
}
.nav-theme-toggle:focus-visible {
    outline: 2px solid var(--mantine-color-primary-6);
    outline-offset: 2px;
}
.nav-theme-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
}
.nav-theme-toggle-icon svg {
    width: 100%;
    height: 100%;
}

[data-mantine-color-scheme=light] .nav-theme-toggle {
    background: #f1f3f5;
    border-color: #dee2e6;
    color: #495057;
}
[data-mantine-color-scheme=light] .nav-theme-toggle:hover {
    background: #e9ecef;
    color: #212529;
    border-color: #ced4da;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Nav project selector – light */
[data-mantine-color-scheme=light] .nav-project-combined {
    background: #fff;
    border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .nav-project-combined:hover {
    border-color: #adb5bd;
}
[data-mantine-color-scheme=light] .nav-project-trigger,
[data-mantine-color-scheme=light] .nav-project-value,
[data-mantine-color-scheme=light] .nav-project-label { color: #212529; }
[data-mantine-color-scheme=light] .nav-project-add { color: #495057; background: #f8f9fa; }
[data-mantine-color-scheme=light] .nav-project-add:hover { background: #e9ecef; color: #212529; }
[data-mantine-color-scheme=light] .nav-project-divider { background: #dee2e6; }
[data-mantine-color-scheme=light] .nav-project-dropdown {
    background: #fff;
    border-color: #dee2e6;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
[data-mantine-color-scheme=light] .nav-project-option { color: #212529; }
[data-mantine-color-scheme=light] .nav-project-option:hover { background: #f8f9fa; }

/* Search bar – light */
[data-mantine-color-scheme=light] .navbar-search-wrap .authguards_input-inner {
    --input-bd: #dee2e6;
    --input-bg: #fff;
    --input-placeholder-color: #868e96;
    background-color: #fff;
    border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .navbar-search-wrap .authguards_input-inner:hover {
    background-color: #f8f9fa;
}
[data-mantine-color-scheme=light] .navbar-search-wrap .main-search-bar::placeholder {
    color: #868e96 !important;
}

/* Tabs – light */
[data-mantine-color-scheme=light] .authguards_tabs { --tab-border-color: #dee2e6; --tab-hover-color: #e9ecef; }
[data-mantine-color-scheme=light] .navbar_tab { color: #495057 !important; }
[data-mantine-color-scheme=light] .navbar_tab:where([data-active]) { border-color: #212529; color: #212529 !important; }

/* Burger – light */
[data-mantine-color-scheme=light] .authguards_burger,
[data-mantine-color-scheme=light] .nav-mobile-burger { --burger-color: #212529; }

/* Nav header buttons – light */
[data-mantine-color-scheme=light] .nav-header-btn { color: #495057; }
[data-mantine-color-scheme=light] .nav-header-btn:hover { color: #212529; background: #f8f9fa; }

/* User float – light */
[data-mantine-color-scheme=light] .nav-user-float {
    color: #212529;
    background: #fff !important;
    border-color: #dee2e6;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
[data-mantine-color-scheme=light] .nav-user-float:hover {
    background: #f8f9fa !important;
    border-color: #adb5bd;
    color: #212529;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
}
[data-mantine-color-scheme=light] .nav-user-info-bar {
    background: #f8f9fa;
    border-color: #dee2e6;
    color: #495057;
}
[data-mantine-color-scheme=light] .nav-user-info-bar .nav-user-info-text:first-child { color: #1A76FD; }
[data-mantine-color-scheme=light] .nav-user-info-hide { color: #868e96; }
[data-mantine-color-scheme=light] .nav-user-info-hide:hover { color: #495057; }
[data-mantine-color-scheme=light] .nav-user-info-toggle {
    color: #495057;
    border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .nav-user-info-toggle:hover {
    background: #f8f9fa;
    color: #212529;
}
[data-mantine-color-scheme=light] .nav-header-separator { background: #dee2e6; }
[data-mantine-color-scheme=light] .nav-user-menu { background: #fff; border-color: #dee2e6; }
[data-mantine-color-scheme=light] .nav-user-menu-item { color: #212529; }
[data-mantine-color-scheme=light] .nav-user-menu-item:hover { background: #f8f9fa; }
[data-mantine-color-scheme=light] .nav-user-info-text { color: #495057; }

/* Dashboard – light */
[data-mantine-color-scheme=light] .dashboard-main { background-color: #f1f3f5; }
[data-mantine-color-scheme=light] .dashboard-card {
    background: #fff;
    border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .dashboard-card--featured {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
}
[data-mantine-color-scheme=light] .dashboard-card--discord {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
[data-mantine-color-scheme=light] .dashboard-discord-title { color: #212529; }
[data-mantine-color-scheme=light] .dashboard-discord-desc { color: #495057; }
[data-mantine-color-scheme=light] .dashboard-discord-badge {
    background: rgba(124, 58, 237, 0.15);
    color: #7c3aed;
}

[data-mantine-color-scheme=light] .dashboard-card--chart .dashboard-card-title { color: #212529; }
[data-mantine-color-scheme=light] .dashboard-card-title { color: #212529; }
[data-mantine-color-scheme=light] .dashboard-stat-label { color: #495057; }
[data-mantine-color-scheme=light] .dashboard-stat-value { color: #212529; }
[data-mantine-color-scheme=light] .dashboard-stat-value--muted { color: #868e96; }
[data-mantine-color-scheme=light] .dashboard-announcement-title { color: #212529; }
[data-mantine-color-scheme=light] .dashboard-announcement-content { color: #495057; }
[data-mantine-color-scheme=light] .dashboard-announcement-time { color: #868e96; }
[data-mantine-color-scheme=light] .dashboard-announcement-trigger:hover { background: rgba(0,0,0,0.04); }
[data-mantine-color-scheme=light] .dashboard-announcement { border-bottom-color: #e9ecef; }
[data-mantine-color-scheme=light] .dashboard-announcement-popover {
    background: #fff;
    border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .dashboard-announcement-popover::before {
    background: #fff;
    border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .dashboard-announcement-popover-title { color: #212529; }
[data-mantine-color-scheme=light] .dashboard-announcement-popover-content { color: #495057; }
[data-mantine-color-scheme=light] .dashboard-announcement-popover-time { color: #868e96; }
[data-mantine-color-scheme=light] .dashboard-activity-action,
[data-mantine-color-scheme=light] .dashboard-activity-key,
[data-mantine-color-scheme=light] .dashboard-activity-project { color: #212529; }
[data-mantine-color-scheme=light] .dashboard-activity-time { color: #868e96; }
[data-mantine-color-scheme=light] .dashboard-quicklink-btn { color: #495057; border-color: #dee2e6; }
[data-mantine-color-scheme=light] .dashboard-quicklink-btn:hover { background: #f8f9fa; color: #212529; }
[data-mantine-color-scheme=light] .dashboard-status-label { color: #212529; }
[data-mantine-color-scheme=light] .dashboard-status-value { color: #495057; }
[data-mantine-color-scheme=light] .dashboard-key-mask { color: #212529; }
[data-mantine-color-scheme=light] .dashboard-key-time { color: #868e96; }
[data-mantine-color-scheme=light] .dashboard-docs-desc { color: #495057; }
[data-mantine-color-scheme=light] .dashboard-quick-action-title { color: #212529; }
[data-mantine-color-scheme=light] .dashboard-quick-action-desc { color: #495057; }
[data-mantine-color-scheme=light] .dashboard-quick-action-card { border-color: #dee2e6; background: #fff; }
[data-mantine-color-scheme=light] .dashboard-quick-action-card:hover { background: #f8f9fa; border-color: #adb5bd; }
[data-mantine-color-scheme=light] .dashboard-live-monitor-subtitle { color: #495057; }
[data-mantine-color-scheme=light] .dashboard-live-monitor-title { color: #212529; }
[data-mantine-color-scheme=light] .dashboard-live-monitor-select,
[data-mantine-color-scheme=light] .dashboard-live-monitor-search {
    background: #fff;
    border-color: #dee2e6;
    color: #212529;
}
[data-mantine-color-scheme=light] .dashboard-live-monitor-table { color: #212529; }
[data-mantine-color-scheme=light] .dashboard-live-monitor-table th { color: #495057; border-color: #dee2e6; }
[data-mantine-color-scheme=light] .dashboard-live-monitor-table td { border-color: #e9ecef; }
[data-mantine-color-scheme=light] .dashboard-map-subtitle { color: #495057; }
[data-mantine-color-scheme=light] .dashboard-map-title { color: #212529; }
[data-mantine-color-scheme=light] .dashboard-map-settings-btn { color: #495057; border-color: #dee2e6; }
[data-mantine-color-scheme=light] .dashboard-map-settings-panel { background: #fff; border-color: #dee2e6; }
[data-mantine-color-scheme=light] .dashboard-map-settings-panel h4 { color: #212529; }
[data-mantine-color-scheme=light] .dashboard-map-settings-panel label { color: #495057; }
[data-mantine-color-scheme=light] .dashboard-map-settings-panel input,
[data-mantine-color-scheme=light] .dashboard-map-settings-panel select {
    border-color: #dee2e6;
    background: #fff;
    color: #212529;
}
[data-mantine-color-scheme=light] .dashboard-map-settings-panel input::placeholder { color: #868e96; }
[data-mantine-color-scheme=light] .dashboard-map-settings-panel select { color-scheme: light; }
[data-mantine-color-scheme=light] .dashboard-map-settings-panel button {
    border-color: #dee2e6;
    background: #fff;
    color: #212529;
}
[data-mantine-color-scheme=light] .dashboard-map-settings-panel button:hover { background: #f8f9fa; }
[data-mantine-color-scheme=light] .dashboard-map-legend-title { color: #495057; }
[data-mantine-color-scheme=light] .dashboard-map-legend-hint { color: #868e96; }
[data-mantine-color-scheme=light] .dashboard-map-card,
[data-mantine-color-scheme=light] .dashboard-live-monitor {
    background: #fff;
    border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .dashboard-docs-btn { color: #495057; border-color: #dee2e6; }
[data-mantine-color-scheme=light] .dashboard-docs-btn:hover { background: #f8f9fa; color: #212529; }
[data-mantine-color-scheme=light] .dashboard-card-link { color: var(--mantine-color-primary-4); }

/* Map tiles – no dark filter in light mode */
[data-mantine-color-scheme=light] .map-tiles { filter: none; }

/* Footer – light */
[data-mantine-color-scheme=light] .footer-centered { border-top-color: #dee2e6; }
[data-mantine-color-scheme=light] .footer-centered-link { color: #495057; }
[data-mantine-color-scheme=light] .footer-centered-link:hover { color: #212529; }
[data-mantine-color-scheme=light] .footer-centered-action {
    border-color: #dee2e6;
    color: #495057;
}
[data-mantine-color-scheme=light] .footer-centered-action:hover {
    background: #f8f9fa;
    color: #212529;
}

/* Dropdowns – light */
[data-mantine-color-scheme=light] .nav-dropdown-menu { background: #fff; border-color: #dee2e6; }
[data-mantine-color-scheme=light] .nav-dropdown-item { color: #212529; }
[data-mantine-color-scheme=light] .nav-dropdown-item:hover { background: #f8f9fa; }
[data-mantine-color-scheme=light] .nav-bell-dropdown-header { color: #212529; border-bottom-color: #dee2e6; }
[data-mantine-color-scheme=light] .nav-bell-dropdown-empty { color: #6c757d; }
[data-mantine-color-scheme=light] .nav-bell-dropdown-item--unread .nav-bell-dropdown-item-title { color: #212529; }
[data-mantine-color-scheme=light] .nav-bell-dropdown-item:not(.nav-bell-dropdown-item--unread) .nav-bell-dropdown-item-title { color: #495057; }
[data-mantine-color-scheme=light] .nav-bell-dropdown-item-message { color: #6c757d; }
[data-mantine-color-scheme=light] .nav-bell-dropdown-item-date { color: #adb5bd; }
[data-mantine-color-scheme=light] .nav-bell-dropdown-item-link:hover { background: #f8f9fa; }
[data-mantine-color-scheme=light] .nav-bell-dropdown-viewall { color: #1a76fd; border-top-color: #dee2e6; }
[data-mantine-color-scheme=light] .nav-bell-dropdown-viewall:hover { background: #f8f9fa; color: #0d6efd; }

/* ===== Visibility - 64em ===== */
.mantine-visible-from-md {
    display: none !important;
}
@media (min-width: 64em) {
    .mantine-visible-from-md {
        display: block !important;
    }
    .authguards_group.mantine-visible-from-md {
        display: flex !important;
    }
    .authguards_tabs.mantine-visible-from-md {
        display: block;
    }
}

.mantine-hidden-from-md {
    display: block;
}
@media (min-width: 64em) {
    .mantine-hidden-from-md {
        display: none !important;
    }
}

/* ===== Overrides ===== */
* {
    font-family: "Noto Sans", sans-serif;
}

[data-mantine-color-scheme=dark] body {
    background-color: var(--mantine-color-bg_dark-1) !important;
}

[data-mantine-color-scheme=dark] body .mantine-Paper-root {
    background-color: var(--mantine-color-base_dark-1);
}

[data-mantine-color-scheme=dark] .mantine-ActionIcon-root {
    background-color: var(--mantine-color-base_dark_lighter-1);
}

.mantine-ActionIcon-root:hover {
    background-color: var(--mantine-color-base_light_lighter-1);
}

/* ===== Navbar search row – stable size and position ===== */
.navbar-search-row {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 15rem;
    width: 100%;
    max-width: calc(55rem * var(--mantine-scale, 1));
}
@media (min-width: 64em) {
    .navbar-search-row.mantine-visible-from-md {
        display: flex !important;
    }
}
.navbar-search-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
}

/* Search dropdown – results list */
.navbar-search-dropdown {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    min-width: 100%;
    max-height: 20rem;
    overflow-y: auto;
    background: rgba(29, 29, 29, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 1100;
    padding: 0.25rem;
}
.navbar-search-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.35rem;
    cursor: pointer;
    transition: all 0.15s ease;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}
.navbar-search-item:hover,
.navbar-search-item:focus,
.navbar-search-item.navbar-search-item--highlight {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    outline: none;
}
.navbar-search-item-label {
    font-weight: 500;
    font-size: 0.9rem;
}
.navbar-search-item-sublabel {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
}

/* Light theme overrides for search dropdown */
[data-mantine-color-scheme=light] .navbar-search-dropdown {
    background: #fff;
    border-color: #dee2e6;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
[data-mantine-color-scheme=light] .navbar-search-item {
    color: #212529;
}
[data-mantine-color-scheme=light] .navbar-search-item:hover,
[data-mantine-color-scheme=light] .navbar-search-item:focus,
[data-mantine-color-scheme=light] .navbar-search-item.navbar-search-item--highlight {
    background: #f8f9fa;
    color: #212529;
}
[data-mantine-color-scheme=light] .navbar-search-item-sublabel {
    color: #868e96;
}

/* ===== Project selector (left of search bar) – combined Input-style ===== */
.nav-project-combined {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    width: 14rem;
    min-width: 14rem;
    max-width: 14rem;
    height: 2.25rem;
    background: rgba(45, 45, 45, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    flex-shrink: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.nav-project-combined:hover {
    border-color: rgba(255, 255, 255, 0.12);
}
.nav-project-combined:focus-within {
    border-color: rgba(26, 118, 253, 0.5);
    box-shadow: 0 0 0 1px rgba(26, 118, 253, 0.2);
}
.nav-project-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
    padding: 0 0.6rem 0 0.75rem;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;
    overflow: hidden;
    border-radius: 9999px 0 0 9999px;
}
.nav-project-trigger:hover {
    color: rgba(255, 255, 255, 1);
}
.nav-project-trigger:focus-visible {
    outline: none;
}
.nav-project-label {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}
.nav-project-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.nav-project-chevron {
    flex-shrink: 0;
    opacity: 0.5;
    height: 0.7rem;
    width: 0.7rem;
}
.nav-project-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    align-self: stretch;
    flex-shrink: 0;
}
.nav-project-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0 0.75rem;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    border-radius: 0 9999px 9999px 0;
}
.nav-project-add:hover {
    color: rgba(167, 139, 250, 1);
    background: rgba(139, 92, 246, 0.15);
}
.nav-project-add:focus-visible {
    outline: none;
}
.nav-project-add-text {
    white-space: nowrap;
}
.nav-project-dropdown {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    min-width: 220px;
    max-height: 280px;
    overflow-y: auto;
    background: rgba(29, 29, 29, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    padding: 0.25rem;
    display: none;
}
.nav-project-dropdown.is-open {
    display: block;
}
.nav-project-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.35rem;
    cursor: pointer;
    transition: all 0.15s ease;
    color: rgba(255, 255, 255, 0.75);
}
.nav-project-option:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.95);
}
.nav-project-option--active {
    background: rgba(139, 92, 246, 0.2);
    color: rgba(167, 139, 250, 1);
}
.nav-project-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0.15rem;
    border-radius: 0.35rem;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: white;
    flex-shrink: 0;
}
.nav-project-option-icon svg {
    width: 0.75rem;
    height: 0.75rem;
}
.nav-project-option-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.875rem;
}
.nav-project-option--create {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0.15rem;
    color: rgba(139, 92, 246, 0.9);
}
.nav-project-option--create:hover {
    background: rgba(139, 92, 246, 0.15);
    color: rgba(167, 139, 250, 1);
}
.nav-project-option-icon--plus {
    background: rgba(139, 92, 246, 0.2) !important;
    color: inherit;
}
.nav-project-option-icon--plus svg {
    width: 1rem;
    height: 1rem;
}
.nav-project-check {
    flex-shrink: 0;
    color: var(--mantine-color-primary-5);
}

/* ===== Create project modal (compare-style popup) ===== */
.nav-create-project-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
    pointer-events: none;
}
.nav-create-project-modal[hidden] {
    display: none !important;
}
.nav-create-project-modal:not([hidden]) {
    pointer-events: auto;
}
.nav-create-project-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 15, 28, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.nav-create-project-dialog {
    position: relative;
    width: 100%;
    max-width: 26rem;
    display: flex;
    flex-direction: column;
    background: linear-gradient(165deg, rgba(28, 28, 42, 0.99) 0%, rgba(20, 20, 32, 0.99) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 80px -20px rgba(96, 165, 250, 0.12);
    overflow: hidden;
    animation: nav-create-project-in 0.25s ease-out;
}
@keyframes nav-create-project-in {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}
.nav-create-project-header {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.5rem;
    background: linear-gradient(180deg, rgba(45, 45, 65, 0.7) 0%, rgba(28, 28, 42, 0.95) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.nav-create-project-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -0.03em;
}
.nav-create-project-close {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.nav-create-project-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.15);
}
.nav-create-project-body {
    flex: 1 1 auto;
    padding: 1.25rem 1.5rem;
}
.nav-create-project-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.nav-create-project-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}
.nav-create-project-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(45, 45, 45, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.375rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.nav-create-project-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
.nav-create-project-input:focus {
    border-color: var(--mantine-color-primary-4, #60a5fa);
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}
.nav-create-project-error {
    font-size: 0.8125rem;
    color: #f87171;
    margin: 0;
}
.nav-create-project-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}
.nav-create-project-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.nav-create-project-btn--secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}
.nav-create-project-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}
.nav-create-project-btn--primary {
    background: var(--mantine-color-primary-5, #60a5fa);
    border: 1px solid rgba(96, 165, 250, 0.4);
    color: #fff;
}
.nav-create-project-btn--primary:hover {
    background: var(--mantine-color-primary-4, #38bdf8);
    border-color: rgba(96, 165, 250, 0.6);
}
[data-mantine-color-scheme=light] .nav-create-project-backdrop {
    background: rgba(15, 23, 42, 0.72);
}
[data-mantine-color-scheme=light] .nav-create-project-dialog {
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
    border-color: #e2e8f0;
    box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.06), 0 0 60px -15px rgba(96, 165, 250, 0.12);
}
[data-mantine-color-scheme=light] .nav-create-project-header {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    border-color: #e2e8f0;
}
[data-mantine-color-scheme=light] .nav-create-project-title {
    color: #1e293b;
}
[data-mantine-color-scheme=light] .nav-create-project-close {
    color: #64748b;
    background: #fff;
    border-color: #e2e8f0;
}
[data-mantine-color-scheme=light] .nav-create-project-close:hover {
    color: #1e293b;
    background: #f1f5f9;
    border-color: #cbd5e1;
}
[data-mantine-color-scheme=light] .nav-create-project-label {
    color: #334155;
}
[data-mantine-color-scheme=light] .nav-create-project-input {
    background: #fff;
    border-color: #dee2e6;
    color: #212529;
}
[data-mantine-color-scheme=light] .nav-create-project-input::placeholder {
    color: #868e96;
}
[data-mantine-color-scheme=light] .nav-create-project-error {
    color: #dc2626;
}
[data-mantine-color-scheme=light] .nav-create-project-btn--secondary {
    border-color: #dee2e6;
    color: #212529;
}
[data-mantine-color-scheme=light] .nav-create-project-btn--secondary:hover {
    background: #f8f9fa;
    border-color: #ced4da;
}
[data-mantine-color-scheme=light] .nav-create-project-btn--primary {
    background: var(--mantine-color-primary-6, #2563eb);
    border-color: rgba(37, 99, 235, 0.4);
}
[data-mantine-color-scheme=light] .nav-create-project-btn--primary:hover {
    background: var(--mantine-color-primary-5, #3b82f6);
}

/* ===== Nav header action buttons (Partners, Upgrade) ===== */
.nav-header-actions {
    flex-shrink: 0;
    flex-wrap: nowrap !important;
    min-width: fit-content;
}

.nav-header-separator {
    width: 1px;
    align-self: stretch;
    min-height: 1.25rem;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.nav-header-actions .nav-project-combined,
.nav-header-actions .nav-header-separator,
.nav-header-actions .nav-header-btn,
.nav-header-actions .nav-theme-toggle,
.nav-header-actions .mantine-ActionIcon-root {
    flex-shrink: 0;
}

/* ===== User account – floating bottom left ===== */
.nav-user-float-wrap {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 100;
}

.nav-user-float-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.nav-user-float {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.35rem 0.75rem 0.35rem 0.35rem;
    border-radius: 9999px;
    background: var(--mantine-color-base_dark_lighter-filled, rgba(29, 29, 29, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    font-family: inherit;
    appearance: none;
}
.nav-user-float:hover {
    background: rgba(45, 45, 45, 1);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
.nav-user-float .nav-user-avatar {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    object-fit: cover;
}
.nav-user-float .nav-user-name {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-user-float .nav-user-chevron {
    flex-shrink: 0;
    opacity: 0.6;
}

/* Compact info bar below pill – plan & expiry, hideable */
.nav-user-info-bar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    background: rgba(29, 29, 29, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.35rem;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 0.35rem;
}

.nav-user-info-bar .nav-user-info-text:first-child {
    color: #a5b4fc;
    font-weight: 600;
}

.nav-user-info-sep {
    opacity: 0.5;
}

.nav-user-info-expiry {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.nav-user-info-expiry svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.nav-user-info-hide {
    margin-left: 0.15rem;
    padding: 0.1rem;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    border-radius: 0.2rem;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.nav-user-info-hide:hover {
    color: rgba(255, 255, 255, 0.7);
}

.nav-user-info-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.45rem;
    margin-left: 0.35rem;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.5);
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 0.35rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.nav-user-info-toggle:hover {
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.35);
}

.nav-user-float-wrap[data-user-info-hidden] .nav-user-info-bar {
    display: none;
}

.nav-user-float-wrap[data-user-info-hidden] .nav-user-info-toggle {
    display: inline-flex;
}

.nav-user-float-wrap:not([data-user-info-hidden]) .nav-user-info-toggle {
    display: none;
}

/* User menu dropdown - opens above the button */
.nav-user-menu {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    min-width: 16.25rem;
    max-height: min(70vh, 400px);
    overflow-y: auto;
    background: rgba(29, 29, 29, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 300;
    padding: 0.25rem;
    display: none;
}
.nav-user-menu.is-open {
    display: block;
}
/* Opens below trigger (for licenses table) */
.nav-user-menu--below {
    bottom: auto;
    top: calc(100% + 0.25rem);
}
/* When portaled to body (licenses table overflow fix), ensure high z-index */
body > .nav-user-menu.is-open {
    z-index: 9999;
}
.nav-user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
    border-radius: 0.35rem;
    text-align: left;
}
.nav-user-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.nav-user-menu-item--danger {
    color: #fa5252;
}
.nav-user-menu-item--danger:hover {
    background: rgba(250, 82, 82, 0.15);
    color: #ff6b6b;
}
.nav-user-menu-item svg {
    flex-shrink: 0;
}
.nav-user-menu-label {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.nav-user-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0.35rem 0;
}

.nav-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-header-btn--partners {
    background: rgba(26, 118, 253, 0.1);
    color: #7eb8ff;
    border: 1px solid rgba(26, 118, 253, 0.25);
}

.nav-header-btn--partners:hover {
    background: rgba(26, 118, 253, 0.18);
    color: #9cc8ff;
    border-color: rgba(26, 118, 253, 0.4);
}

.nav-header-btn--upgrade {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(245, 158, 11, 0.15) 100%);
    color: #fdba74;
    border: 1px solid rgba(249, 115, 22, 0.35);
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.08);
}

.nav-header-btn--upgrade:hover {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.3) 0%, rgba(245, 158, 11, 0.25) 100%);
    color: #fed7aa;
    border-color: rgba(249, 115, 22, 0.5);
    box-shadow: 0 0 16px rgba(249, 115, 22, 0.15);
}

[data-mantine-color-scheme=dark] .mantine-ActionIcon-root:hover {
    background-color: var(--mantine-color-base_dark_lighter-1);
}

.mantine-Tabs-list:before {
    content: none !important;
}

.navbar_tab {
    padding-bottom: 1rem;
    margin-right: 1.4rem;
    transition: all 0.2s ease-in-out;
    color: #999 !important;
    text-decoration: none;
}

/* Tab hover: authguards_tab-style sets --tab-bg via var(--tab-hover-color); do not override */

.navbar_tab:where([data-active]) {
    border-color: #fff;
    color: #fff !important;
}

/* Nav links with no status bar URL preview (JS-based navigation) */
.nav-link-no-preview {
    cursor: pointer;
}

/* Search bar – pill shape, dark bg, hover/focus, size lg (3.125rem) */
.navbar-search-wrap .authguards_input-inner {
    --input-height: var(--input-height-lg);
    --input-size: var(--input-height-lg);
    --input-fz: var(--mantine-font-size-lg);
    --input-bd: #2d2d2d;
    --input-bg: #2e2e2e;
    --input-bd-focus: #1A76FD;
    --input-placeholder-color: #8a8a8a;
    --input-section-color: #8a8a8a;
    --input-radius: 9999px;
    --left-section-border-radius: 9999px 0 0 9999px;
    background-color: var(--input-bg);
    border: 1px solid var(--input-bd);
    border-radius: 9999px;
    min-height: var(--input-height-lg);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) {
    .navbar-search-wrap .authguards_input-inner:hover {
        background-color: #3b3b3b;
    }
}

@media (hover: none) {
    .navbar-search-wrap .authguards_input-inner:active {
        background-color: #3b3b3b;
    }
}

.navbar-search-wrap .authguards_input-inner:focus-within {
    border-color: var(--input-bd-focus);
}

.mantine-TextInput-wrapper .main-search-bar,
.navbar-search-wrap .main-search-bar {
    font-size: 14px !important;
    border: none !important;
    border-radius: 9999px !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.mantine-TextInput-wrapper .main-search-bar:focus,
.navbar-search-wrap .main-search-bar:focus {
    outline: none;
}

.mantine-TextInput-wrapper .main-search-bar::placeholder,
.navbar-search-wrap .main-search-bar::placeholder {
    font-size: 14px;
    position: relative;
    top: -0.1rem;
    color: #8a8a8a !important;
}

/* ===== authguards_ semantic aliases (replace obfuscated m_* classes) ===== */
.authguards_paper {
    --paper-radius: var(--mantine-radius-default);
    outline: 0;
    -webkit-tap-highlight-color: transparent;
    display: block;
    touch-action: manipulation;
    text-decoration: none;
    border-radius: var(--paper-radius);
    box-shadow: var(--paper-shadow);
    background-color: var(--mantine-color-body);
}
.authguards_container {
    --container-size-xs: calc(33.75rem * var(--mantine-scale));
    --container-size-sm: calc(45rem * var(--mantine-scale));
    --container-size-md: calc(60rem * var(--mantine-scale));
    --container-size-lg: calc(71.25rem * var(--mantine-scale));
    --container-size-xl: calc(82.5rem * var(--mantine-scale));
    --container-size: var(--container-size-md);
    max-width: var(--container-size);
    padding-inline: var(--mantine-spacing-md);
    margin-inline: auto;
}

/* Navbar full width - use entire viewport */
.authguards_container--full {
    max-width: 100%;
    padding-inline: var(--mantine-spacing-lg);
}
/* Keep header row stable – prevent search bar from resizing or moving */
.authguards_container--full > .authguards_group:first-child {
    flex-wrap: nowrap;
}
.authguards_container--full > .authguards_group:first-child > a:first-child {
    flex-shrink: 0;
}
.authguards_group {
    display: flex;
    flex-direction: row;
    flex-wrap: var(--group-wrap, wrap);
    justify-content: var(--group-justify, flex-start);
    align-items: var(--group-align, center);
    gap: var(--group-gap, var(--mantine-spacing-md));
}
.authguards_image {
    display: block;
    flex: 0;
    object-fit: var(--image-object-fit, cover);
    width: 100%;
    border-radius: var(--image-radius, 0);
}
.authguards_input-wrapper {
    line-height: var(--mantine-line-height);
}
.authguards_input-inner {
    position: relative;
    --input-height: var(--input-height-sm);
    --input-size: var(--input-height);
    --input-line-height: calc(var(--input-height) - calc(0.125rem * var(--mantine-scale)));
    --input-radius: var(--mantine-radius-default);
    --input-padding-inline-start: var(--input-left-section-size);
    --input-left-section-size: var(--input-left-section-width, calc(var(--input-height) - calc(0.125rem * var(--mantine-scale))));
    --left-section-start: calc(0.0625rem * var(--mantine-scale));
    --section-y: calc(0.0625rem * var(--mantine-scale));
}
.authguards_input-section {
    pointer-events: var(--section-pointer-events);
    position: absolute;
    z-index: 1;
    inset-inline-start: var(--section-start);
    bottom: var(--section-y);
    top: var(--section-y);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--section-size);
    border-radius: var(--section-border-radius);
    color: var(--input-section-color, var(--mantine-color-dimmed));
}
.authguards_input-section[data-position=left] {
    --section-start: var(--left-section-start);
    --section-size: var(--input-left-section-size);
    --section-border-radius: var(--left-section-border-radius);
}
.authguards_input-field {
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    display: block;
    width: 100%;
    transition: border-color 0.1s ease;
    text-align: var(--input-text-align);
    color: var(--input-color);
    border: calc(0.0625rem * var(--mantine-scale)) solid var(--input-bd);
    background-color: var(--input-bg);
    font-family: var(--input-font-family, var(--mantine-font-family));
    height: var(--input-size);
    min-height: var(--input-height);
    line-height: var(--input-line-height);
    font-size: var(--input-fz, var(--mantine-font-size-sm));
    border-radius: var(--input-radius);
    padding-inline-start: var(--input-padding-inline-start);
    padding-inline-end: var(--input-padding-inline-end);
    padding-top: var(--input-padding-y, 0);
    padding-bottom: var(--input-padding-y, 0);
    cursor: var(--input-cursor);
}

/* Search input: no border/bg from general rule */
.navbar-search-wrap .authguards_input-field.main-search-bar {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
.authguards_action-icon {
    --ai-size: var(--ai-size-md);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    user-select: none;
    overflow: hidden;
    width: var(--ai-size);
    height: var(--ai-size);
    min-width: var(--ai-size);
    min-height: var(--ai-size);
    border-radius: var(--ai-radius, var(--mantine-radius-default));
    background: var(--ai-bg, var(--mantine-primary-color-filled));
    color: var(--ai-color, var(--mantine-color-white));
    border: var(--ai-bd, calc(0.0625rem * var(--mantine-scale)) solid transparent);
    cursor: pointer;
}
.authguards_action-icon-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, opacity 0.1s ease;
    width: 100%;
    height: 100%;
}
.authguards_unstyled-button {
    background-color: transparent;
    cursor: pointer;
    border: 0;
    padding: 0;
    appearance: none;
    font-size: var(--mantine-font-size-md);
    text-align: left;
    text-decoration: none;
    color: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.authguards_burger {
    --burger-size-xs: calc(0.75rem * var(--mantine-scale));
    --burger-size-sm: calc(1.125rem * var(--mantine-scale));
    --burger-size-md: calc(1.5rem * var(--mantine-scale));
    --burger-size-lg: calc(2.125rem * var(--mantine-scale));
    --burger-size-xl: calc(2.625rem * var(--mantine-scale));
    --burger-size: var(--burger-size-md);
    --burger-line-size: calc(var(--burger-size) / 8);
    width: calc(var(--burger-size) + var(--mantine-spacing-xs));
    height: calc(var(--burger-size) + var(--mantine-spacing-xs));
    padding: calc(var(--mantine-spacing-xs) / 2);
    cursor: pointer;
}
.authguards_burger-inner,
.authguards_burger-inner:after,
.authguards_burger-inner:before {
    display: block;
    width: var(--burger-size);
    height: var(--burger-line-size);
    background-color: var(--burger-color, rgba(255, 255, 255, 0.9));
    outline: calc(0.0625rem * var(--mantine-scale)) solid transparent;
    transition-property: background-color, transform;
    transition-duration: var(--burger-transition-duration, 0.3s);
    transition-timing-function: var(--burger-transition-timing-function, ease);
}
.authguards_burger-inner:after,
.authguards_burger-inner:before {
    position: absolute;
    content: "";
    inset-inline-start: 0;
}
.authguards_burger-inner:before { top: calc(var(--burger-size) / -3); }
.authguards_burger-inner:after { top: calc(var(--burger-size) / 3); }
:where([data-mantine-color-scheme=dark]) .authguards_burger { --burger-color: var(--mantine-color-white, rgba(255, 255, 255, 0.9)); }
.authguards_burger-inner { position: relative; user-select: none; }

/* Burger open state – X animation */
.authguards_burger[aria-expanded="true"] .authguards_burger-inner { background-color: transparent; }
.authguards_burger[aria-expanded="true"] .authguards_burger-inner:before { top: 0; transform: rotate(45deg); }
.authguards_burger[aria-expanded="true"] .authguards_burger-inner:after { top: 0; transform: rotate(-45deg); }

/* ===== Mobile drawer (burger menu) ===== */
/* Burger: visible by default (mobile), hidden only on desktop */
.nav-mobile-burger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.5rem;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    cursor: pointer;
    color: inherit;
}
.nav-mobile-burger:hover {
    background: rgba(255, 255, 255, 0.12);
}
@media (min-width: 64em) {
    .nav-mobile-burger { display: none !important; }
    .nav-mobile-drawer { display: none !important; }
}
/* Mobile: ensure burger is visible in navbar */
@media (max-width: 1023px) {
    .authguards_paper .authguards_container .authguards_group:first-child {
        display: flex !important;
        flex-wrap: nowrap;
    }
    .authguards_paper .authguards_container .authguards_group:first-child .nav-mobile-burger {
        order: 999;
        margin-left: auto;
    }
}
.nav-mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0.25s ease;
}
.nav-mobile-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
}
.nav-mobile-drawer.is-open .nav-mobile-backdrop {
    opacity: 1;
}
.nav-mobile-drawer.is-open .nav-mobile-panel {
    transform: translateX(0);
}
.nav-mobile-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.nav-mobile-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 90vw);
    max-width: 100%;
    background: var(--mantine-color-base_dark-1, #1d1d1d);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.nav-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.nav-mobile-logo img { height: auto; display: block; }
.nav-mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s ease;
}
.nav-mobile-close:hover { background: rgba(255, 255, 255, 0.12); }
.nav-mobile-search {
    padding: 0.75rem 1rem;
    flex-shrink: 0;
}
.nav-mobile-search-trigger {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.65rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.nav-mobile-search-trigger:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); }
.nav-mobile-search-trigger span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Mobile search popup overlay */
.nav-mobile-search-popup {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0.25s ease;
}
.nav-mobile-search-popup--open {
    pointer-events: auto;
    visibility: visible;
}
.nav-mobile-search-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.nav-mobile-search-popup--open .nav-mobile-search-popup-backdrop { opacity: 1; }
.nav-mobile-search-popup-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--mantine-color-base_dark-1, #1d1d1d);
    display: flex;
    flex-direction: column;
    transform: translateY(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.nav-mobile-search-popup--open .nav-mobile-search-popup-inner { transform: translateY(0); }
.nav-mobile-search-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    padding-top: max(1rem, env(safe-area-inset-top));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.nav-mobile-search-popup-header-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.nav-mobile-search-popup-logo {
    height: auto;
    display: block;
    flex-shrink: 0;
}
.nav-mobile-search-popup-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}
.nav-mobile-search-popup-close {
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.5rem;
    line-height: 1;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s ease;
}
.nav-mobile-search-popup-close:hover { background: rgba(255, 255, 255, 0.12); }
.nav-mobile-search-popup-input-wrap {
    padding: 1rem 1.25rem;
    flex-shrink: 0;
}
.nav-mobile-search-popup-input-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.75rem;
    min-height: 3rem;
    transition: border-color 0.2s ease;
}
.nav-mobile-search-popup-input-inner:focus-within { border-color: var(--mantine-color-primary-4, #1A76FD); }
.nav-mobile-search-popup-input-wrap .main-search-bar {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 0;
    padding-inline-start: 2.25rem;
    border: none;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
}
.nav-mobile-search-popup-input-wrap .main-search-bar::placeholder { color: rgba(255, 255, 255, 0.45); }
.nav-mobile-search-popup-input-wrap .main-search-bar:focus { outline: none; }
.nav-mobile-search-popup-results {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 1rem;
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.nav-mobile-search-popup-results:empty { display: none; }
.nav-mobile-search-popup-results--has { display: flex; }
.nav-mobile-search-popup-results .navbar-search-item {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-height: 2.75rem;
    -webkit-tap-highlight-color: transparent;
}
.nav-mobile-search-popup-results .navbar-search-item:active {
    background: rgba(255, 255, 255, 0.12);
}

@media (min-width: 64em) {
    .nav-mobile-search-popup { display: none !important; }
}

[data-mantine-color-scheme=light] .nav-mobile-search-trigger { background: #f8f9fa; border-color: #dee2e6; color: #868e96; }
[data-mantine-color-scheme=light] .nav-mobile-search-trigger:hover { background: #e9ecef; color: #495057; }
[data-mantine-color-scheme=light] .nav-mobile-search-popup-inner { background: #fff; }
[data-mantine-color-scheme=light] .nav-mobile-search-popup-header { border-bottom-color: #dee2e6; }
[data-mantine-color-scheme=light] .nav-mobile-search-popup-title { color: #212529; }
[data-mantine-color-scheme=light] .nav-mobile-search-popup-close { background: #f1f3f5; color: #495057; }
[data-mantine-color-scheme=light] .nav-mobile-search-popup-close:hover { background: #e9ecef; }
[data-mantine-color-scheme=light] .nav-mobile-search-popup-input-inner { background: #f8f9fa; border-color: #dee2e6; }
[data-mantine-color-scheme=light] .nav-mobile-search-popup-input-inner:focus-within { border-color: #1A76FD; }
[data-mantine-color-scheme=light] .nav-mobile-search-popup-input-wrap .main-search-bar { color: #212529; }
[data-mantine-color-scheme=light] .nav-mobile-search-popup-input-wrap .main-search-bar::placeholder { color: #868e96; }

.nav-mobile-search-wrap .authguards_input-inner {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
}
.nav-mobile-search-wrap input {
    background: transparent !important;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}
.nav-mobile-search-wrap input::placeholder { color: rgba(255, 255, 255, 0.45); }
.nav-mobile-project {
    position: relative;
    padding: 0 1rem 0.75rem;
    flex-shrink: 0;
}
.nav-mobile-project-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s ease;
}
.nav-mobile-project-trigger:hover { background: rgba(255, 255, 255, 0.1); }
.nav-mobile-project-dropdown {
    position: absolute;
    top: 100%;
    left: 1rem;
    right: 1rem;
    margin-top: 0.25rem;
    background: var(--mantine-color-base_dark-1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    max-height: 12rem;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    display: none;
}
.nav-mobile-project[data-open="true"] .nav-mobile-project-dropdown { display: block; }
.nav-mobile-project-option {
    display: block;
    padding: 0.6rem 1rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}
.nav-mobile-project-option:hover { background: rgba(255, 255, 255, 0.08); }
.nav-mobile-project-option--active { background: rgba(26, 118, 253, 0.2); color: var(--mantine-color-primary-4); }
.nav-mobile-project-option--create { color: var(--mantine-color-primary-4); font-weight: 500; }
.nav-mobile-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0 1rem 1rem;
    flex-shrink: 0;
}
.nav-mobile-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.2s ease;
}
.nav-mobile-action:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.nav-mobile-theme { cursor: pointer; font: inherit; }
.nav-mobile-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 1rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.nav-mobile-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: background 0.15s ease;
}
.nav-mobile-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-mobile-link--active { background: rgba(26, 118, 253, 0.15); color: var(--mantine-color-primary-4); }
.nav-mobile-link--active:hover { background: rgba(26, 118, 253, 0.22); }
.nav-mobile-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    background: var(--mantine-color-primary-4);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 100px;
    margin-left: auto;
}
.nav-mobile-accordion { margin-bottom: 0.25rem; }
.nav-mobile-accordion-trigger {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: background 0.15s ease;
}
.nav-mobile-accordion-trigger:hover { background: rgba(255, 255, 255, 0.08); }
.nav-mobile-accordion-trigger--active { background: rgba(26, 118, 253, 0.12); color: var(--mantine-color-primary-4); }
.nav-mobile-accordion-chevron {
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.nav-mobile-accordion[data-open="true"] .nav-mobile-accordion-chevron { transform: rotate(180deg); }
.nav-mobile-accordion-panel {
    display: none;
    padding-left: 1.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
}
.nav-mobile-accordion[data-open="true"] .nav-mobile-accordion-panel { display: block; }
.nav-mobile-accordion-trigger--nested { padding: 0.5rem 0.75rem; font-size: 0.9rem; }
.nav-mobile-accordion--nested .nav-mobile-accordion-panel { padding-left: 1rem; }
.nav-mobile-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: 0.4rem;
    transition: background 0.15s ease;
}
.nav-mobile-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-mobile-item--active { background: rgba(26, 118, 253, 0.15); color: var(--mantine-color-primary-4); }
.nav-mobile-item span:first-child { flex: 1; min-width: 0; }
.nav-mobile-item .nav-dropdown-role { flex-shrink: 0; }
.nav-mobile-subitem { padding-left: 1rem; font-size: 0.85rem; }
.nav-mobile-new-badge {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.4rem;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: #fff;
    border-radius: 4px;
    margin-right: 0.25rem;
}

/* Mobile drawer – light theme */
[data-mantine-color-scheme=light] .nav-mobile-panel { background: #fff; box-shadow: 4px 0 24px rgba(0,0,0,0.12); }
[data-mantine-color-scheme=light] .nav-mobile-header { border-bottom-color: #dee2e6; }
[data-mantine-color-scheme=light] .nav-mobile-close { background: #f1f3f5; color: #212529; }
[data-mantine-color-scheme=light] .nav-mobile-close:hover { background: #e9ecef; }
[data-mantine-color-scheme=light] .nav-mobile-search-wrap .authguards_input-inner { background: #f8f9fa; border-color: #dee2e6; }
[data-mantine-color-scheme=light] .nav-mobile-search-wrap input { color: #212529 !important; }
[data-mantine-color-scheme=light] .nav-mobile-search-wrap input::placeholder { color: #868e96; }
[data-mantine-color-scheme=light] .nav-mobile-project-trigger { background: #f8f9fa; border-color: #dee2e6; color: #212529; }
[data-mantine-color-scheme=light] .nav-mobile-project-trigger:hover { background: #e9ecef; }
[data-mantine-color-scheme=light] .nav-mobile-project-dropdown { background: #fff; border-color: #dee2e6; }
[data-mantine-color-scheme=light] .nav-mobile-project-option { color: #212529; }
[data-mantine-color-scheme=light] .nav-mobile-project-option:hover { background: #f8f9fa; }
[data-mantine-color-scheme=light] .nav-mobile-action { background: #f8f9fa; border-color: #dee2e6; color: #495057; }
[data-mantine-color-scheme=light] .nav-mobile-action:hover { background: #e9ecef; color: #212529; }
[data-mantine-color-scheme=light] .nav-mobile-link { color: #212529; }
[data-mantine-color-scheme=light] .nav-mobile-link:hover { background: #f8f9fa; color: #212529; }
[data-mantine-color-scheme=light] .nav-mobile-link--active { background: rgba(26, 118, 253, 0.12); color: #1A76FD; }
[data-mantine-color-scheme=light] .nav-mobile-accordion-trigger { color: #212529; }
[data-mantine-color-scheme=light] .nav-mobile-accordion-trigger:hover { background: #f8f9fa; }
[data-mantine-color-scheme=light] .nav-mobile-accordion-trigger--active { background: rgba(26, 118, 253, 0.1); color: #1A76FD; }
[data-mantine-color-scheme=light] .nav-mobile-item { color: #495057; }
[data-mantine-color-scheme=light] .nav-mobile-item:hover { background: #f8f9fa; color: #212529; }
[data-mantine-color-scheme=light] .nav-mobile-item--active { background: rgba(26, 118, 253, 0.12); color: #1A76FD; }

.authguards_tabs {
    display: var(--tabs-display);
    flex-direction: var(--tabs-flex-direction);
    --tab-justify: flex-start;
    --tabs-list-direction: row;
    --tabs-display: block;
    --tabs-flex-direction: row;
    --tabs-list-border-width: 0;
    --tabs-list-gap: unset;
    --tab-radius: var(--tabs-radius) var(--tabs-radius) 0 0;
    --tab-border-width: 0 0 var(--tabs-list-border-width) 0;
}
[data-mantine-color-scheme=dark] .authguards_tabs { --tab-border-color: var(--mantine-color-dark-4); }
.authguards_tabs[data-variant=default] { --tabs-list-border-width: calc(0.125rem * var(--mantine-scale)); }
[data-mantine-color-scheme=dark] .authguards_tabs[data-variant=default] { --tab-hover-color: var(--mantine-color-dark-6); }
.authguards_tabs-list-wrap { position: relative; }
.authguards_tabs-list-wrap:before { content: none !important; }
.authguards_tabs-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--tabs-justify, flex-start);
    flex-direction: var(--tabs-list-direction);
    gap: var(--tabs-list-gap);
    --tab-grow: unset;
}
.authguards_tab {
    position: relative;
    padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
    font-size: var(--mantine-font-size-sm);
    white-space: nowrap;
    z-index: 0;
    display: flex;
    align-items: center;
    line-height: 1;
    user-select: none;
    flex-grow: var(--tab-grow);
    justify-content: var(--tab-justify);
}
.authguards_tab-style {
    border-radius: var(--tab-radius);
    border-width: var(--tab-border-width);
    border-style: solid;
    border-color: transparent;
    background-color: var(--tab-bg);
    --tab-bg: transparent;
}
.authguards_tab-style:where([data-active]) { border-color: var(--tabs-color); }
@media (hover: hover) {
    .authguards_tab-style:hover { --tab-bg: var(--tab-hover-color); }
    .authguards_tab-style:hover:where(:not([data-active])) { border-color: var(--tab-border-color); }
}
@media (hover: none) {
    .authguards_tab-style:active { --tab-bg: var(--tab-hover-color); }
    .authguards_tab-style:active:where(:not([data-active])) { border-color: var(--tab-border-color); }
}
.authguards_tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: var(--tab-section-margin-left, 0);
    margin-right: var(--tab-section-margin-right, 0);
}
.authguards_tab-icon[data-position=left]:not(:only-child) {
    --tab-section-margin-right: var(--mantine-spacing-xs);
}

/* Navbar Paper padding - __m__-Rpvbkq */
.__m__-Rpvbkq {
    padding: calc(1rem * var(--mantine-scale));
}
@media (min-width: 64em) {
    .__m__-Rpvbkq {
        padding: calc(2rem * var(--mantine-scale)) calc(2rem * var(--mantine-scale)) 0 calc(2rem * var(--mantine-scale));
    }
}

/* ===== Nav dropdown menu ===== */
.nav-dropdown {
    position: relative;
    display: inline-flex;
}

.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: var(--mantine-spacing-xs, 0.5rem);
}

.nav-bell-link {
    display: inline-flex;
    align-items: center;
    gap: var(--mantine-spacing-xs, 0.5rem);
    position: relative;
    text-decoration: none;
    color: inherit;
    padding: 0.5rem 0.6rem;
    border-radius: 0.375rem;
    margin-right: 0.25rem;
}
.nav-bell-link:hover { opacity: 0.9; }

.nav-bell-trigger {
    position: relative;
    padding: 0.5rem 0.6rem;
    margin-right: 0.25rem;
    border-radius: 0.375rem;
}
.nav-bell-trigger:hover { opacity: 0.9; }

/* Bell dropdown = notification popover */
.nav-dropdown--bell .nav-bell-dropdown {
    left: auto;
    right: 0;
    min-width: 18rem;
    max-width: 22rem;
    max-height: 20rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.nav-bell-dropdown-header {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-bell-dropdown-empty {
    padding: 1rem;
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
}
.nav-bell-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0.375rem 0;
    overflow-y: auto;
    max-height: 14rem;
}
.nav-bell-dropdown-item {
    margin: 0;
    padding: 0;
}
.nav-bell-dropdown-item-link {
    display: block;
    padding: 0.6rem 1rem;
    text-decoration: none;
    color: inherit;
    border: none;
    transition: background 0.15s ease;
}
.nav-bell-dropdown-item-link:hover {
    background: rgba(255, 255, 255, 0.06);
}
.nav-bell-dropdown-item:not(.nav-bell-dropdown-item--unread) .nav-bell-dropdown-item-title { font-weight: 400; color: rgba(255, 255, 255, 0.7); }
.nav-bell-dropdown-item--unread .nav-bell-dropdown-item-title { font-weight: 600; color: rgba(255, 255, 255, 0.95); }
.nav-bell-dropdown-item-title {
    display: block;
    font-size: 0.8125rem;
    margin-bottom: 0.15rem;
}
.nav-bell-dropdown-item-message {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.35;
    margin-bottom: 0.2rem;
}
.nav-bell-dropdown-item-date {
    display: block;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.4);
}
.nav-bell-dropdown-item:not(:has(.nav-bell-dropdown-item-link)) {
    padding: 0.6rem 1rem;
}
.nav-bell-dropdown-viewall {
    display: block;
    padding: 0.6rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mantine-color-primary-5, #1a76fd);
    text-decoration: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.15s ease;
}
.nav-bell-dropdown-viewall:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--mantine-color-primary-4, #3b82f6);
}

.nav-bell-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 4px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.1rem;
    text-align: center;
    background: #ef4444;
    color: #fff;
    border-radius: 999px;
}

.nav-dropdown-chevron {
    display: flex;
    align-items: center;
    margin-left: 0.15rem;
    color: inherit;
    opacity: 0.85;
    transition: transform 0.2s ease;
}

.nav-dropdown[data-open] .nav-dropdown-chevron {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    width: max-content;
    min-width: 14rem;
    padding: 0.375rem;
    background: var(--mantine-color-base_dark-1, #1d1d1d);
    border: 1px solid var(--mantine-color-base_dark_lighter-1, #2d2d2d);
    border-radius: calc(0.5rem * var(--mantine-scale));
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.nav-dropdown[data-open] .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: calc(0.375rem * var(--mantine-scale));
    color: #ccc;
    text-decoration: none;
    font-size: 0.875rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown-item:hover {
    background: var(--mantine-color-base_dark_lighter-1, #2d2d2d);
    color: #fff;
}

.nav-dropdown-item--active {
    background: rgba(26, 118, 253, 0.15);
    color: var(--mantine-color-primary-4, #1a76fd);
}

.nav-dropdown-item--active:hover {
    background: rgba(26, 118, 253, 0.22);
    color: var(--mantine-color-primary-4, #1a76fd);
}

.nav-dropdown-item svg {
    flex-shrink: 0;
    opacity: 0.9;
}

/* Role badges in dropdown items */
.nav-dropdown-item span:not(.nav-dropdown-role) {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
}

.nav-dropdown-role {
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.12rem 0.35rem;
    border-radius: 9999px;
    margin-left: auto;
    flex-shrink: 0;
}

.nav-dropdown-role--all {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.nav-dropdown-role--seller {
    background: rgba(26, 118, 253, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(26, 118, 253, 0.25);
}

.nav-dropdown-role--basic {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.25);
}

/* Nested submenu (dropdown inside dropdown) */
.nav-dropdown-item--has-sub {
    position: relative;
    cursor: default;
    padding-right: 2rem;
}
.nav-dropdown-item--has-sub:hover {
    background: var(--mantine-color-base_dark_lighter-1, #2d2d2d);
    color: #fff;
}
.nav-dropdown-sub-arrow {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.7;
    flex-shrink: 0;
}
.nav-dropdown-submenu {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 0.15rem;
    min-width: 11rem;
    padding: 0.35rem;
    background: var(--mantine-color-base_dark-1, #1d1d1d);
    border: 1px solid var(--mantine-color-base_dark_lighter-1, #2d2d2d);
    border-radius: calc(0.5rem * var(--mantine-scale));
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.nav-dropdown-item--has-sub:hover .nav-dropdown-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
.nav-dropdown-subitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.65rem;
    border-radius: calc(0.35rem * var(--mantine-scale));
    color: #ccc;
    text-decoration: none;
    font-size: 0.8125rem;
    transition: background 0.12s ease, color 0.12s ease;
}
.nav-dropdown-subitem > span:first-child {
    flex: 1;
    min-width: 0;
}
.nav-dropdown-subitem .nav-dropdown-role {
    flex-shrink: 0;
    margin-left: auto;
}
.nav-dropdown-subitem:hover {
    background: var(--mantine-color-base_dark_lighter-1, #2d2d2d);
    color: #fff;
}
.nav-dropdown-subitem--active {
    background: rgba(26, 118, 253, 0.15);
    color: var(--mantine-color-primary-4, #1a76fd);
    font-weight: 600;
}
[data-mantine-color-scheme=light] .nav-dropdown-submenu {
    background: #fff;
    border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .nav-dropdown-subitem { color: #495057; }
[data-mantine-color-scheme=light] .nav-dropdown-subitem:hover {
    background: #f8f9fa;
    color: #212529;
}

/* ===== NEW! badge pill (above More tab) ===== */
.nav-dropdown--new {
    position: relative;
}

.nav-badge-new {
    position: absolute;
    top: -0.6rem;
    right: 0.15rem;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 0.2rem 0.5rem;
    border-radius: 9999px;
    background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 20px rgba(34, 197, 94, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    z-index: 2;
    pointer-events: none;
    animation: nav-badge-glow 3s ease-in-out infinite;
}

@keyframes nav-badge-glow {
    0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 20px rgba(34, 197, 94, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3); opacity: 1; }
    50% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 0 28px rgba(34, 197, 94, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35); opacity: 1; }
}

/* ===== Dashboard page – Mantine-style Grid asymmetrical ===== */
.dashboard-main {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    background-color: var(--mantine-color-bg_dark-1, #121212);
}

.dashboard-container {
    padding-inline: var(--mantine-spacing-md, 1rem);
}

@media (min-width: 64em) {
    .dashboard-container {
        padding-inline: var(--mantine-spacing-lg, 1.5rem);
    }
}

.dashboard-header {
    margin-bottom: calc(1.5rem * var(--mantine-scale, 1));
}

.dashboard-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: calc(1.5rem * var(--mantine-scale, 1));
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 0.25rem 0;
}

.dashboard-title-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: rgba(26, 118, 253, 0.15);
    border: 1px solid rgba(26, 118, 253, 0.3);
    border-radius: 0.5rem;
    color: var(--mantine-color-primary-4, #1a76fd);
}

.dashboard-subtitle {
    margin: 0 0 0 3rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 63.99em) {
    .dashboard-subtitle {
        margin-left: 0;
    }
}

/* Mantine Subgrid – 4 cols, vertical stacks (SimpleGrid + Stack pattern) */
.dashboard-subgrid {
    --dashboard-base-height: 400px;
    --dashboard-spacing: calc(1.25rem * var(--mantine-scale, 1));
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dashboard-spacing);
}

@media (min-width: 64em) {
    .dashboard-subgrid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.dashboard-subgrid-col {
    min-height: var(--dashboard-base-height);
}

.dashboard-subgrid-col--tall {
    min-height: var(--dashboard-base-height);
}

.dashboard-subgrid-col--tall .dashboard-card {
    height: 100%;
    min-height: 100%;
}

@media (max-width: 63.99em) {
    .dashboard-subgrid-col,
    .dashboard-subgrid-col--tall {
        min-height: 0;
    }
    .dashboard-stack {
        min-height: 0;
    }
    .dashboard-stack--2 .dashboard-stack-item,
    .dashboard-stack--3 .dashboard-stack-item {
        min-height: 0;
    }
}

/* Stack – vertical items with getSubHeight(children, spacing) */
.dashboard-stack {
    display: flex;
    flex-direction: column;
    gap: var(--dashboard-spacing);
    min-height: var(--dashboard-base-height);
}

.dashboard-stack--2 .dashboard-stack-item {
    /* getSubHeight(2, spacing) = BASE_HEIGHT/2 - spacing*((2-1)/2) */
    min-height: calc(var(--dashboard-base-height) / 2 - var(--dashboard-spacing) * 0.5);
    flex: 1 1 auto;
}

.dashboard-stack--2 .dashboard-stack-item .dashboard-card,
.dashboard-stack--3 .dashboard-stack-item .dashboard-card {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.dashboard-stack--2 .dashboard-stack-item .dashboard-announcements,
.dashboard-stack--2 .dashboard-stack-item .dashboard-activity {
    flex: 1;
    min-height: 0;
}
.dashboard-stack--2 .dashboard-stack-item .dashboard-activity {
    min-height: 16.5rem; /* keep consistent height when no activity */
}

.dashboard-stack--3 .dashboard-stack-item {
    /* getSubHeight(3, spacing) = BASE_HEIGHT/3 - spacing*((3-1)/3) */
    min-height: calc(var(--dashboard-base-height) / 3 - var(--dashboard-spacing) * 0.6667);
    flex: 1 1 auto;
}

/* Legacy grid classes (kept for compatibility) */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: calc(1rem * var(--mantine-scale, 1));
}

.mantine-Grid-Col--span-12 { grid-column: span 12; }
.mantine-Grid-Col--span-6 { grid-column: span 6; }
.mantine-Grid-Col--span-4 { grid-column: span 4; }
.mantine-Grid-Col--span-8 { grid-column: span 8; }

@media (max-width: 63.99em) {
    .mantine-Grid-Col--span-md-4,
    .mantine-Grid-Col--span-md-6,
    .mantine-Grid-Col--span-md-8 { grid-column: span 12; }
}

@media (min-width: 64em) {
    .mantine-Grid-Col--span-md-4 { grid-column: span 4; }
    .mantine-Grid-Col--span-md-6 { grid-column: span 6; }
    .mantine-Grid-Col--span-md-8 { grid-column: span 8; }
}

/* Dashboard cards (Paper-like) */
.dashboard-card {
    background: rgba(29, 29, 29, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: calc(0.5rem * var(--mantine-scale, 1));
    padding: 1.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.dashboard-card--featured {
    background: linear-gradient(135deg, rgba(29, 29, 29, 0.98) 0%, rgba(35, 35, 40, 0.95) 100%);
}

.dashboard-card--compact {
    padding: 1rem;
}

.dashboard-card--compact .dashboard-card-title {
    margin-bottom: 0.5rem;
}

.dashboard-card--compact .dashboard-card-header {
    margin-bottom: 0.75rem;
}

.dashboard-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.dashboard-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

.dashboard-stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 48em) {
    .dashboard-stats-row {
        grid-template-columns: repeat(4, 1fr);
    }
}

.dashboard-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dashboard-stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.dashboard-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}

.dashboard-stat-value--muted {
    color: rgba(255, 255, 255, 0.6);
}

.dashboard-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.dashboard-balance-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #4ade80;
}

.dashboard-balance-btn {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    border-radius: 0.35rem;
    background: var(--mantine-color-primary-4, #1a76fd);
    color: #fff;
    text-decoration: none;
    transition: background 0.2s, opacity 0.2s;
}

.dashboard-balance-btn:hover {
    background: #3d8bfd;
}

.dashboard-announcements {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    max-height: 14.5rem; /* ~3 items visible, scroll for rest */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.dashboard-announcements::-webkit-scrollbar {
    display: none;
}

.dashboard-announcement {
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dashboard-announcement:last-child {
    border-bottom: none;
}

.dashboard-announcement-trigger {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.dashboard-announcement-trigger:hover {
    background: rgba(255, 255, 255, 0.04);
}

.dashboard-announcement-preview {
    flex: 1;
    min-width: 0;
}

.dashboard-announcement-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 0.15rem 0;
}

.dashboard-announcement-content {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dashboard-announcement-content:empty {
    display: none;
}

.dashboard-announcement-time {
    flex-shrink: 0;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Mantine-style announcement popover (fixed to escape overflow clipping) */
.dashboard-announcement-popover {
    position: fixed;
    z-index: 9999;
    min-width: 16rem;
    max-width: 22rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(29, 29, 29, 0.98);
}

.dashboard-announcement-popover::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 1rem;
    width: 10px;
    height: 10px;
    background: rgba(29, 29, 29, 0.98);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    transform: rotate(45deg);
}

.dashboard-announcement-popover[hidden] {
    display: none !important;
}

.dashboard-announcement-popover-inner {
    padding: 1rem 1.25rem;
    position: relative;
    z-index: 1;
}

.dashboard-announcement-popover-title {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 0.5rem 0;
}

.dashboard-announcement-popover-content {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
    -webkit-line-clamp: unset;
    display: block;
}

.dashboard-announcement-popover-time {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.45);
}

.dashboard-card--discord {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.dashboard-discord-image {
    width: 100%;
    height: 100px;
    overflow: hidden;
    flex-shrink: 0;
}
.dashboard-discord-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dashboard-discord-body {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.dashboard-discord-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.dashboard-discord-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}
.dashboard-discord-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 9999px;
    background: rgba(139, 92, 246, 0.3);
    color: rgba(167, 139, 250, 1);
    flex-shrink: 0;
}
.dashboard-discord-desc {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    line-height: 1.4;
}
.dashboard-discord-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem 1rem;
    margin-top: 0.25rem;
    border-radius: 0.375rem;
    background: #5865f2;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    transition: background 0.2s;
}
.dashboard-discord-btn:hover {
    background: #6d7af5;
}

/* Discord + Chart + Heatmap column – Discord & chart keep size, heatmap compact */
.dashboard-stack--discord-chart .dashboard-stack-item:first-child {
    flex: 0 0 auto;
    min-height: 0;
}
.dashboard-stack--discord-chart .dashboard-stack-item:nth-child(2) {
    flex: 1 1 auto;
    min-height: 140px;
}
.dashboard-stack--discord-chart .dashboard-stack-item--heatmap {
    flex: 0 0 auto;
    min-height: 0;
}

/* Monthly User Stats chart card */
.dashboard-card--chart {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.dashboard-card--chart .dashboard-card-header {
    margin-bottom: 0.75rem;
}
.dashboard-chart-wrap {
    position: relative;
    flex: 1;
    min-height: 180px;
}
.dashboard-chart-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Activity Heatmap – compact variant (in col 4) */
.dashboard-card--heatmap-compact {
    padding: 0.75rem 1rem;
}
.dashboard-card--heatmap-compact .dashboard-card-header {
    margin-bottom: 0.5rem;
}
.dashboard-card--heatmap-compact .dashboard-card-title {
    font-size: 0.875rem;
}
.dashboard-heatmap-wrap--compact {
    max-height: 90px;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dashboard-heatmap-wrap--compact .dashboard-heatmap-cell {
    width: 6px;
    height: 8px;
    min-width: 6px;
    min-height: 8px;
}
.dashboard-heatmap-wrap--compact .dashboard-heatmap-row {
    gap: 1px;
}
.dashboard-heatmap-wrap--compact .dashboard-heatmap-grid {
    gap: 1px;
}
.dashboard-heatmap-wrap--compact .dashboard-heatmap-legend {
    margin-top: 0.35rem;
    font-size: 0.625rem;
}
.dashboard-heatmap-wrap--compact .dashboard-heatmap-legend-cells span {
    width: 6px;
    height: 6px;
}

/* Activity Heatmap – GitHub-style grid */
.dashboard-card--heatmap {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.dashboard-card--heatmap .dashboard-card-header {
    margin-bottom: 0.75rem;
}
.dashboard-heatmap-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.25rem;
}
.dashboard-heatmap-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dashboard-heatmap-row {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.dashboard-heatmap-cell {
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    border-radius: 2px;
    transition: transform 0.1s ease;
}
.dashboard-heatmap-cell:hover {
    transform: scale(1.15);
}

.dashboard-heatmap-legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.5);
}
.dashboard-heatmap-legend-cells {
    display: flex;
    gap: 2px;
}
.dashboard-heatmap-legend-cells span {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
[data-mantine-color-scheme=light] .dashboard-card--heatmap .dashboard-card-title { color: #212529; }
[data-mantine-color-scheme=light] .dashboard-heatmap-legend { color: #868e96; }

.dashboard-activity {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 16.5rem; /* ~7 items visible, scroll for rest (max 15) */
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.dashboard-activity::-webkit-scrollbar {
    display: none;
}

.dashboard-activity-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dashboard-activity-item:last-child {
    border-bottom: none;
}

.dashboard-activity-action {
    color: rgba(255, 255, 255, 0.9);
}

.dashboard-activity-key,
.dashboard-activity-project {
    color: rgba(255, 255, 255, 0.5);
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
}

.dashboard-activity-time {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

.dashboard-activity-single .dashboard-activity-item {
    border-bottom: none;
}

/* Balance card (compact in stack) */
.dashboard-card--balance {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Quick Links – grid of icon+label tiles (matches quick-action-card style) */
.dashboard-quicklinks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.dashboard-quicklink {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.375rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dashboard-quicklink:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.dashboard-quicklink-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.15s ease;
}

.dashboard-quicklink:hover .dashboard-quicklink-icon {
    color: var(--mantine-color-primary-4, #8b5cf6);
}

.dashboard-quicklink-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Light mode – Quick Links */
[data-mantine-color-scheme=light] .dashboard-quicklink {
    color: #212529;
    background: rgba(0, 0, 0, 0.03);
    border-color: #dee2e6;
}

[data-mantine-color-scheme=light] .dashboard-quicklink:hover {
    background: #f8f9fa;
    border-color: #ced4da;
    color: #212529;
}

[data-mantine-color-scheme=light] .dashboard-quicklink-icon {
    color: #868e96;
}

[data-mantine-color-scheme=light] .dashboard-quicklink:hover .dashboard-quicklink-icon {
    color: var(--mantine-color-primary-6, #7c3aed);
}

/* Status card – plain text style */
.dashboard-status-intro {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 0.5rem 0;
}

.dashboard-card--status .dashboard-status-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dashboard-status-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.dashboard-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.dashboard-status-dot--ok {
    background: #4ade80;
}

.dashboard-status-dot--warn {
    background: #facc15;
}

.dashboard-status-dot--error {
    background: #f87171;
}

.dashboard-status-label {
    flex: 1;
    color: rgba(255, 255, 255, 0.8);
}

.dashboard-status-value {
    font-weight: 500;
    color: #4ade80;
}

.dashboard-status-value--muted {
    color: rgba(255, 255, 255, 0.5);
}

.dashboard-status-value--warn {
    color: #facc15;
}

.dashboard-status-2fa-rec {
    margin-top: 0.25rem;
    padding: 0.5rem 0.65rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0.35rem;
    border-left: 3px solid rgba(250, 204, 21, 0.6);
}

.dashboard-status-2fa-rec-text {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.4;
}

.dashboard-status-2fa-link {
    color: var(--mantine-color-primary-4, #8b5cf6);
    text-decoration: none;
}

.dashboard-status-2fa-link:hover {
    text-decoration: underline;
}

[data-mantine-color-scheme=light] .dashboard-status-value--muted { color: #868e96; }
[data-mantine-color-scheme=light] .dashboard-status-value--warn { color: #ca8a04; }
[data-mantine-color-scheme=light] .dashboard-status-2fa-rec {
    background: rgba(0, 0, 0, 0.04);
    border-left-color: rgba(250, 204, 21, 0.7);
}
[data-mantine-color-scheme=light] .dashboard-status-2fa-rec-text { color: #495057; }
[data-mantine-color-scheme=light] .dashboard-status-2fa-link { color: #7c3aed; }
[data-mantine-color-scheme=light] .dashboard-status-intro { color: #868e96; }

/* Global License Activity Map – same card style as Live Monitor */
.dashboard-map-card {
    margin-top: 1.5rem;
    background: rgba(29, 29, 29, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    overflow: hidden;
}

/* First card in application pages: match dashboard gap (1.5rem only, no extra margin) */
.dashboard-container > .dashboard-map-card:first-child {
    margin-top: 0;
}

.dashboard-map-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-map-subtitle {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 0.25rem 0;
}

.dashboard-map-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-map-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #4ade80;
    flex-shrink: 0;
}
.dashboard-map-dot--red { background: #fa5252; }
.dashboard-map-dot--green { background: #4ade80; }
.dashboard-map-dot--primary { background: rgba(139, 92, 246, 0.9); }

.dashboard-map-filters {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dashboard-map-settings-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
    background: #fff;
    color: #1a1a1a;
    cursor: pointer;
    transition: background 0.15s;
}

.dashboard-map-settings-btn:hover {
    background: #f0f0f0;
}

.dashboard-map-body {
    position: relative;
    overflow: hidden;
}

.dashboard-map-wrap { position: relative; width: 100%; height: 400px; }

.dashboard-map-container { width: 100%; height: 100%; }

.leaflet-container { z-index: 1; }

/* Leaflet dark theme – filter for map tiles */
:root {
  --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
}

[data-mantine-color-scheme=dark] .map-tiles {
  filter: var(--map-tiles-filter, none);
}

.dashboard-map-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 1.25rem 1.5rem;
    border-radius: 0.5rem;
    z-index: 1000;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.dashboard-map-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #1a76fd;
    border-radius: 50%;
    animation: dashboard-map-spin 1s linear infinite;
}

@keyframes dashboard-map-spin { to { transform: rotate(360deg); } }

.dashboard-map-progress { font-size: 0.75rem; color: rgba(255, 255, 255, 0.7); margin: 0; }

.dashboard-map-legend {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: rgba(29, 29, 29, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    z-index: 1000;
}

.dashboard-map-legend-title { font-weight: 600; }

.dashboard-map-legend-hint { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.5); }

.dashboard-map-settings-panel {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 260px;
    background: rgba(29, 29, 29, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 1rem;
    z-index: 1000;
    display: none;
}

.dashboard-map-settings-panel.open { display: block; }

.dashboard-map-settings-panel h4 { font-size: 0.875rem; font-weight: 600; margin: 0 0 0.5rem 0; }

.dashboard-map-settings-panel label { display: block; font-size: 0.75rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 0.25rem; }

.dashboard-map-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

.dashboard-map-settings-panel input,
.dashboard-map-settings-panel select {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(45, 45, 45, 0.9);
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.75rem;
}

.dashboard-map-settings-panel input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.dashboard-map-settings-panel select {
    color-scheme: dark;
}

.dashboard-map-settings-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.75rem; }

.dashboard-map-settings-panel button {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.375rem;
    background: rgba(55, 55, 55, 0.9);
    color: rgba(255, 255, 255, 0.95);
    cursor: pointer;
}

.dashboard-map-settings-panel button:hover { background: rgba(70, 70, 70, 0.95); }

.map-popup {
    background: rgba(29, 29, 29, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 0.625rem;
    color: rgba(255, 255, 255, 0.9);
    min-width: 200px;
}

.map-popup__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; }

.map-popup__title { font-size: 0.875rem; font-weight: 600; }

.map-popup__subtitle { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.6); margin-top: 0.125rem; }

.map-popup__badge {
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: rgba(26, 118, 253, 0.2);
    border: 1px solid rgba(26, 118, 253, 0.35);
    color: #6ea8fe;
}

.map-popup__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

.map-popup__grid div {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.375rem;
    padding: 0.375rem 0.5rem;
}

.map-popup__grid span { display: block; font-size: 0.625rem; color: rgba(255, 255, 255, 0.5); margin-bottom: 0.125rem; }

.map-popup__grid strong { font-size: 0.75rem; }

/* Second row */
.dashboard-row2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

@media (min-width: 64em) {
    .dashboard-row2 {
        grid-template-columns: 1fr 320px;
    }
}

.dashboard-card--wide {
    min-width: 0;
}

.dashboard-card-link {
    font-size: 0.8125rem;
    color: var(--mantine-color-primary-4, #1a76fd);
    text-decoration: none;
}

.dashboard-card-link:hover {
    text-decoration: underline;
}

.dashboard-recent-keys {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dashboard-key-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dashboard-key-row:last-child {
    border-bottom: none;
}

.dashboard-key-mask {
    font-family: ui-monospace, monospace;
    color: rgba(255, 255, 255, 0.9);
}

.dashboard-key-time {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
}

/* Docs card */
.dashboard-card--docs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dashboard-docs-desc {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.5;
}

.dashboard-docs-btn {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.35rem;
    background: var(--mantine-color-primary-4, #1a76fd);
    color: #fff;
    text-decoration: none;
    transition: background 0.2s;
    align-self: flex-start;
}

.dashboard-docs-btn:hover {
    background: #3d8bfd;
}

/* Quick actions row (Overview style) */
.dashboard-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

@media (min-width: 48em) {
    .dashboard-quick-actions {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 64em) {
    .dashboard-quick-actions {
        grid-template-columns: repeat(6, 1fr);
    }
}

.dashboard-quick-action-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    background: rgba(29, 29, 29, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

@media (hover: hover) {
    .dashboard-quick-action-card:hover {
        background: var(--mantine-color-dark-5, #3b3b3b);
    }
}

.dashboard-quick-action-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.dashboard-quick-action-desc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
}

/* Live Monitoring */
.dashboard-live-monitor {
    margin-top: 1.5rem;
    background: rgba(29, 29, 29, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    overflow: hidden;
}

.dashboard-live-monitor-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-live-monitor-subtitle {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 0.25rem 0;
}

.dashboard-live-monitor-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-live-monitor-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #4ade80;
    flex-shrink: 0;
}

.dashboard-live-monitor-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.dashboard-live-monitor-select,
.dashboard-live-monitor-search {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
    background: #fff;
    color: #1a1a1a;
}

.dashboard-live-monitor-search {
    min-width: 12rem;
}

.dashboard-live-monitor-search::placeholder {
    color: rgba(0, 0, 0, 0.45);
}

.dashboard-live-monitor-table-wrap {
    overflow-x: auto;
}

.dashboard-live-monitor-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.dashboard-live-monitor-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

.dashboard-live-monitor-table td {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
}

.dashboard-live-monitor-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.dashboard-live-monitor-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

.dashboard-live-monitor-table td:nth-child(4) {
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
}

.dashboard-status--ok {
    color: #4ade80 !important;
}

.dashboard-status--error {
    color: #f87171 !important;
}

.dashboard-health {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dashboard-health-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
}

.dashboard-health-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
}

.dashboard-health-dot--ok {
    background: #4ade80;
}

.dashboard-health-status {
    margin-left: auto;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

/* ===== Search bar – final overrides (isolate from any other rules) ===== */
.navbar-search-wrap.authguards_input-wrapper .authguards_input-inner.mantine-Input-wrapper,
.navbar-search-wrap .authguards_input-inner {
    background-color: #2e2e2e !important;
    border: 1px solid #2d2d2d !important;
    border-radius: 9999px !important;
    min-height: 3.125rem !important;
    --input-color: #c9c9c9;
    --input-placeholder-color: #8a8a8a;
    --input-section-color: #8a8a8a;
}

@media (hover: hover) {
    .navbar-search-wrap .authguards_input-inner:hover {
        background-color: #3b3b3b !important;
    }
}

.navbar-search-wrap .authguards_input-inner:focus-within {
    border-color: #1A76FD !important;
}

.navbar-search-wrap .authguards_input-field.main-search-bar,
.navbar-search-wrap input.main-search-bar {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #c9c9c9 !important;
}

.navbar-search-wrap .authguards_input-field.main-search-bar::placeholder,
.navbar-search-wrap input.main-search-bar::placeholder {
    color: #8a8a8a !important;
}

/* Search bar – light theme overrides (same specificity) */
[data-mantine-color-scheme=light] .navbar-search-wrap.authguards_input-wrapper .authguards_input-inner.mantine-Input-wrapper,
[data-mantine-color-scheme=light] .navbar-search-wrap .authguards_input-inner {
    background-color: #fff !important;
    border-color: #dee2e6 !important;
    --input-color: #212529;
    --input-placeholder-color: #868e96;
    --input-section-color: #868e96;
}
@media (hover: hover) {
    [data-mantine-color-scheme=light] .navbar-search-wrap .authguards_input-inner:hover {
        background-color: #f8f9fa !important;
    }
}
[data-mantine-color-scheme=light] .navbar-search-wrap .authguards_input-field.main-search-bar,
[data-mantine-color-scheme=light] .navbar-search-wrap input.main-search-bar {
    color: #212529 !important;
}
[data-mantine-color-scheme=light] .navbar-search-wrap .authguards_input-field.main-search-bar::placeholder,
[data-mantine-color-scheme=light] .navbar-search-wrap input.main-search-bar::placeholder {
    color: #868e96 !important;
}
[data-mantine-color-scheme=light] .navbar-search-wrap .authguards_input-section,
[data-mantine-color-scheme=light] .navbar-search-wrap .authguards_input-section svg {
    color: #868e96 !important;
}

/* ===== Footer – Mantine FooterCentered style ===== */
.footer-centered {
    padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
}

[data-mantine-color-scheme=dark] .footer-centered {
    border-top-color: var(--mantine-color-dark-4, #424242);
}

.footer-centered-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mantine-spacing-md);
    max-width: var(--container-size, 60rem);
    margin-inline: auto;
    padding-inline: var(--mantine-spacing-md);
}

.footer-centered-logo {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.footer-centered-logo img {
    display: block;
    width: auto;
    height: 28px;
    object-fit: contain;
}
.footer-centered-logo--small img { height: 20px; }
.footer-centered-logo--medium img { height: 28px; }
.footer-centered-logo--large img { height: 36px; }

/* Navbar logo size (from site settings) */
.site-logo img {
    width: auto;
    height: calc(4.5rem * var(--mantine-scale, 1));
    object-fit: contain;
}
.site-logo--navbar-small img { height: 2rem; }
.site-logo--navbar-medium img { height: calc(4.5rem * var(--mantine-scale, 1)); }
.site-logo--navbar-large img { height: 5rem; }

.footer-centered-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--mantine-spacing-md);
}

.footer-centered-link {
    font-size: var(--mantine-font-size-sm);
    line-height: 1;
    color: var(--mantine-color-dimmed, rgba(255, 255, 255, 0.55));
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-centered-link:hover {
    color: var(--mantine-color-text, #fff);
}

.footer-centered-socials {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mantine-spacing-xs);
    flex-wrap: nowrap;
}

.footer-centered-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    border: 1px solid var(--mantine-color-dark-4, #424242);
    background: transparent;
    color: var(--mantine-color-dimmed, rgba(255, 255, 255, 0.55));
    transition: background 0.15s ease, color 0.15s ease;
}

.footer-centered-action:hover {
    background: var(--mantine-color-dark-5, #3b3b3b);
    color: var(--mantine-color-text, #fff);
}

.footer-centered-action svg {
    flex-shrink: 0;
}

@media (max-width: 47.99em) {
    .footer-centered-inner {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    .footer-centered-links {
        order: 1;
    }
    .footer-centered-socials {
        order: 2;
        justify-content: center;
    }
}

/* ===== Create License page – full width, map-card style ===== */

.create-form {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.create-form .dashboard-map-card {
    margin-top: 0;
}

/* Two-column grid for Project, Duration, Keys, Pattern on larger screens */
.create-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem 1.5rem;
}

@media (min-width: 48em) {
    .create-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Duration combined – same pattern as navbar project selector (trigger | divider | add) */
.create-duration-combined {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    background: rgba(45, 45, 45, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.375rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.create-duration-combined:hover {
    border-color: rgba(255, 255, 255, 0.18);
}

.create-duration-combined:focus-within {
    border-color: var(--mantine-color-primary-4, #1a76fd);
    box-shadow: 0 0 0 2px rgba(26, 118, 253, 0.2);
}

.create-duration-trigger {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    padding: 0 0.5rem 0 0.5rem;
    gap: 0.25rem;
    background: transparent;
}

.create-duration-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: rgba(255, 255, 255, 0.5);
}

.create-select--in-combined {
    flex: 1;
    min-width: 0;
    height: auto;
    min-height: 2.5rem;
    padding: 0.5rem 0.5rem 0.5rem 8px !important;
    padding-inline-start: 8px !important;
    margin: 0;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    background-image: none;
    border-radius: 0;
    box-shadow: none !important;
    color-scheme: dark;
}

.create-select--in-combined:hover,
.create-select--in-combined:focus,
.create-select--in-combined:focus-visible {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.create-duration-chevron {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.6);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}

.create-duration-combined:focus-within .create-duration-chevron {
    transform: rotate(180deg);
}

.create-duration-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
    align-self: stretch;
    flex-shrink: 0;
}

.create-duration-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0 0.75rem;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
    font-family: inherit;
}

.create-duration-add:hover {
    color: rgba(167, 139, 250, 1);
    background: rgba(139, 92, 246, 0.15);
}

.create-duration-add:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(26, 118, 253, 0.4);
}

.create-duration-add-text {
    white-space: nowrap;
}

/* Create page: same layout as dashboard – padded body, first card no top margin */
.create-main .dashboard-map-card .dashboard-map-body {
    padding: 1.5rem 1.5rem;
}

.create-main .dashboard-map-card .create-card-body-wrap {
    position: relative;
    min-height: 12rem;
}

.create-card-loading {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 10;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 0 0 0.5rem 0.5rem;
    backdrop-filter: blur(4px);
    transition: opacity 0.2s ease;
}

.create-card-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.create-card-loading-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--mantine-color-primary-4, #1a76fd);
    border-radius: 50%;
    animation: create-card-spin 0.7s linear infinite;
}

.create-card-loading-text {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

@keyframes create-card-spin {
    to { transform: rotate(360deg); }
}

[data-mantine-color-scheme=light] .create-card-loading {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(6px);
}

[data-mantine-color-scheme=light] .create-card-loading-spinner {
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: #1A76FD;
}

[data-mantine-color-scheme=light] .create-card-loading-text {
    color: #495057;
}

.create-main .create-output-card {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[data-mantine-color-scheme=light] .create-main .create-output-card {
    border-top-color: #dee2e6;
}

/* Create cards use dashboard-map-card – add padding to body */
.create-card-body,
.create-output-body {
    padding: 1.5rem 1.5rem;
}

.create-card--output .create-output-body {
    padding-top: 1.5rem;
}

.create-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 47.99em) {
    .create-grid { grid-template-columns: 1fr; }
}

.create-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.create-form-grid .create-field {
    min-width: 0;
}

.create-form-grid .create-field .create-label {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.create-form-grid .create-field.create-duration-row .create-label,
.create-form-grid .create-field.create-duration-row .create-duration-combined {
    margin-left: 0;
    padding-left: 0;
}

.create-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.create-label--with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.create-label-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.create-label--with-icon:hover .create-label-icon {
    color: rgba(255, 255, 255, 0.75);
}

.create-label-optional { font-weight: 400; color: rgba(255, 255, 255, 0.5); }

.create-hint {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.45);
}

.create-select-wrap,
.create-input-wrap {
    position: relative;
    display: block;
}

.create-input-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: rgba(255, 255, 255, 0.45);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.create-select-wrap .create-input-icon,
.create-input-wrap .create-input-icon {
    z-index: 0;
}

.create-select,
.create-input {
    width: 100%;
    height: 2.75rem;
    padding: 0 0.75rem 0 2.5rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(45, 45, 45, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.375rem;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

.create-select:focus,
.create-input:focus {
    outline: none;
    border-color: var(--mantine-color-primary-4, #1a76fd);
    box-shadow: 0 0 0 2px rgba(26, 118, 253, 0.2);
}

.create-select:hover:not(:disabled),
.create-input:hover {
    background: rgba(55, 55, 55, 0.9);
}

.create-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.create-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
    color-scheme: dark;
}

/* Dropdown options list – match dark theme (duration + all create-selects) */
.create-select option,
.create-select--in-combined option {
    background: rgba(30, 30, 30, 0.98);
    color: rgba(255, 255, 255, 0.95);
    padding: 0.5rem 0.75rem;
}
.create-select option:hover,
.create-select option:focus,
.create-select option:checked,
.create-select--in-combined option:hover,
.create-select--in-combined option:focus,
.create-select--in-combined option:checked {
    background: rgba(55, 55, 55, 0.98);
    color: #fff;
}

.create-field--hwid { margin-bottom: 1.5rem; }

.create-hwid-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* HWID block – single bar (same pattern as duration combined) */
.create-hwid-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    min-height: 2.75rem;
    padding: 0 0 0 1rem;
    background: rgba(45, 45, 45, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.375rem;
}

.create-hwid-inner-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin-left: 0.75rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

.create-hwid-inner .create-checkbox--hwid {
    margin: 0;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
}

.create-hwid-inner .create-checkbox--hwid:checked::after {
    left: 0.28rem;
    top: 0.05rem;
    width: 0.4rem;
    height: 0.65rem;
}

.create-hwid-inner .create-badge--hwid {
    margin-left: 0;
    margin-right: 0;
    flex-shrink: 0;
}

.create-hwid-inner-divider {
    width: 1px;
    height: 1.25rem;
    background: rgba(255, 255, 255, 0.12);
    margin: 0 1rem 0 auto;
    flex-shrink: 0;
}

/* Mobile: stack HWID Options button on its own row so it doesn’t clip off screen */
@media (max-width: 47.99em) {
    .create-hwid-inner {
        padding: 0.75rem 1rem;
    }
    .create-hwid-hint {
        padding-left: 1rem;
    }
    .create-hwid-inner-divider {
        width: 100%;
        height: 0;
        margin: 0;
        padding: 0;
        opacity: 0;
        order: 1;
        flex-basis: 100%;
    }
    .create-hwid-inner .create-hwid-options-btn {
        order: 2;
        flex: 1 1 100%;
        min-width: 0;
        min-height: 2.5rem;
        margin-left: -1rem;
        margin-right: -1rem;
        margin-bottom: -0.75rem;
        padding: 0.5rem 1rem;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0 0 0.375rem 0.375rem;
    }
}

[data-mantine-color-scheme=light] @media (max-width: 47.99em) {
    .create-hwid-inner .create-hwid-options-btn {
        border-top-color: #dee2e6;
    }
}

.create-hwid-inner .create-hwid-options-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-shrink: 0;
    min-width: 8.5rem;
    padding: 0 1.25rem;
    height: 100%;
    min-height: 2.75rem;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0 0.375rem 0.375rem 0;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.create-hwid-inner .create-hwid-options-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.create-hwid-inner .create-hwid-options-btn:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(26, 118, 253, 0.4);
}

.create-hwid-hint {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.55);
    margin: 0.35rem 0 0 0;
    padding-left: calc(1rem + 1.25rem + 0.75rem);
}
.create-hwid-hint strong {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}
.create-hwid-hint--customized {
    color: rgba(26, 118, 253, 0.9);
}
.create-hwid-hint--customized strong {
    color: inherit;
}

.create-pattern-tester-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
}
.create-pattern-tester-notice code {
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    padding: 0.1rem 0.35rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0.25rem;
}
.create-pattern-tester-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(251, 191, 36, 0.95);
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 0.25rem;
}
[data-mantine-color-scheme=light] .create-pattern-tester-notice {
    color: #495057;
}
[data-mantine-color-scheme=light] .create-pattern-tester-notice code {
    background: rgba(0, 0, 0, 0.06);
}
[data-mantine-color-scheme=light] .create-pattern-tester-badge {
    color: #b45309;
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.4);
}

.create-hwid-options-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    opacity: 0.9;
}

/* Badge: muted when disabled, success when enabled */
.create-badge--hwid {
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.create-checkbox--hwid:checked ~ .create-badge--hwid {
    color: rgba(74, 222, 128, 0.95);
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.35);
}

.create-hwid-row--with-settings {
    align-items: center;
}

.create-hwid-settings-btn {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    border-radius: 0.375rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.create-hwid-settings-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
}

/* Mantine-style checkbox */
.create-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 0.25rem;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}

.create-checkbox:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.create-checkbox:checked {
    background: var(--mantine-color-primary-4, #1a76fd);
    border-color: var(--mantine-color-primary-4, #1a76fd);
}

.create-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 0.25rem;
    top: 0.05rem;
    width: 0.35rem;
    height: 0.55rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.create-checkbox:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(26, 118, 253, 0.4);
}

.create-hwid-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    flex: 1;
}

.create-hwid-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: rgba(26, 118, 253, 0.8);
    flex-shrink: 0;
}

.create-hwid-title {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.create-hwid-desc {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 0.15rem;
}

.create-actions {
    margin-top: 0.5rem;
    padding-top: 0.25rem;
}

.create-actions .create-submit {
    max-width: 20rem;
}

.create-actions .create-submit--full {
    max-width: none;
    width: 100%;
}

@media (max-width: 47.99em) {
    .create-actions .create-submit {
        max-width: none;
    }
}

.create-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.25rem;
    height: 2.75rem;
    padding: 0 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    background: rgba(26, 118, 253, 0.9);
    border: 1px solid rgba(26, 118, 253, 0.5);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    font-family: inherit;
}

.create-submit:hover {
    background: rgba(26, 118, 253, 1);
    border-color: rgba(26, 118, 253, 0.7);
}

.create-submit:active {
    transform: scale(0.99);
}

.create-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(26, 118, 253, 0.4);
}

.create-submit-icon { width: 1.25rem; height: 1.25rem; }

.create-submit:disabled,
.create-submit--loading {
  cursor: not-allowed;
  opacity: 0.85;
}

.create-submit-spinner {
  width: 1.25rem;
  height: 1.25rem;
  animation: create-submit-spin 0.9s linear infinite;
}

@keyframes create-submit-spin {
  to { transform: rotate(360deg); }
}

.create-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(59, 130, 246, 0.9);
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 999px;
}

.create-output-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dashboard-map-filters.create-output-actions .dashboard-map-settings-btn {
    display: inline-flex;
    align-items: center;
}

.create-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
    text-decoration: none;
}

.create-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
}

.create-btn--secondary {
    background: rgba(26, 118, 253, 0.15);
    border-color: rgba(26, 118, 253, 0.3);
    color: #6ea8fe;
}

.create-btn--secondary:hover {
    background: rgba(26, 118, 253, 0.25);
    border-color: rgba(26, 118, 253, 0.4);
}

.create-btn--ghost {
    background: transparent;
    border-color: transparent;
}

.create-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Alias for create page and modals (create-button = create-btn) */
.create-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    font-family: inherit;
    text-decoration: none;
}
.create-button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
}
.create-button:active {
    transform: scale(0.98);
}
.create-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(26, 118, 253, 0.35);
}
.create-button--secondary {
    background: rgba(26, 118, 253, 0.15);
    border-color: rgba(26, 118, 253, 0.3);
    color: #6ea8fe;
}
.create-button--secondary:hover {
    background: rgba(26, 118, 253, 0.25);
    border-color: rgba(26, 118, 253, 0.4);
}
.create-button--primary {
    background: rgba(26, 118, 253, 0.9);
    border-color: rgba(26, 118, 253, 0.5);
    color: #fff;
}
.create-button--primary:hover {
    background: rgba(26, 118, 253, 1);
    border-color: rgba(26, 118, 253, 0.7);
}

.create-output-body {
    padding: 1.5rem 1.5rem 1.5rem;
    position: relative;
    min-height: 280px;
}

#output-empty[hidden],
#generated-keys-textarea[hidden] {
    display: none !important;
}

.create-output-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
}

.create-output-empty-icon {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.create-output-empty-icon svg {
    width: 2rem;
    height: 2rem;
    color: rgba(255, 255, 255, 0.35);
}

.create-output-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 0.35rem 0;
}

.create-output-empty-desc {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    text-align: center;
}

.create-output-textarea {
    width: 100%;
    min-height: 280px;
    padding: 1rem;
    font-size: 0.8125rem;
    font-family: ui-monospace, monospace;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    resize: vertical;
}

.create-output-textarea:focus {
    outline: none;
    border-color: var(--mantine-color-primary-4, #1a76fd);
}

.create-output-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.create-output-header .create-label {
    margin: 0;
}
.create-output-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.create-output-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.8125rem;
}
.create-output-action-icon {
    flex-shrink: 0;
}

/* Create page – light mode (cards use dashboard-map-card, styled above) */
[data-mantine-color-scheme=light] .create-label { color: #495057; }
[data-mantine-color-scheme=light] .create-label-icon { color: #868e96; }
[data-mantine-color-scheme=light] .create-label--with-icon:hover .create-label-icon { color: #495057; }
[data-mantine-color-scheme=light] .create-duration-combined {
    background: #fff;
    border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .create-duration-combined:hover { border-color: #adb5bd; }
[data-mantine-color-scheme=light] .create-duration-combined:focus-within {
    border-color: #1A76FD;
    box-shadow: 0 0 0 2px rgba(26, 118, 253, 0.2);
}
[data-mantine-color-scheme=light] .create-select--in-combined { color: #212529; }
[data-mantine-color-scheme=light] .create-duration-icon { color: #868e96; }
[data-mantine-color-scheme=light] .create-duration-chevron {
    color: #495057;
}
[data-mantine-color-scheme=light] .create-duration-combined:focus-within .create-duration-chevron {
    color: #1A76FD;
}
[data-mantine-color-scheme=light] .create-duration-divider { background: #dee2e6; }
[data-mantine-color-scheme=light] .create-duration-add { color: #495057; }
[data-mantine-color-scheme=light] .create-duration-add:hover {
    color: #6d28d9;
    background: rgba(109, 40, 217, 0.1);
}
[data-mantine-color-scheme=light] .create-hint { color: #868e96; }
[data-mantine-color-scheme=light] .create-select,
[data-mantine-color-scheme=light] .create-input {
    background: #fff;
    border-color: #dee2e6;
    color: #212529;
}
[data-mantine-color-scheme=light] .create-input-icon {
    color: #868e96;
}
[data-mantine-color-scheme=light] .create-hwid-icon {
    color: #1A76FD;
}
[data-mantine-color-scheme=light] .create-select:hover:not(:disabled),
[data-mantine-color-scheme=light] .create-input:hover {
    background: #f8f9fa;
}

[data-mantine-color-scheme=light] .create-select,
[data-mantine-color-scheme=light] .create-select--in-combined {
    color-scheme: light;
}
[data-mantine-color-scheme=light] .create-select option,
[data-mantine-color-scheme=light] .create-select--in-combined option {
    background: #fff;
    color: #212529;
}
[data-mantine-color-scheme=light] .create-select option:hover,
[data-mantine-color-scheme=light] .create-select option:checked,
[data-mantine-color-scheme=light] .create-select--in-combined option:hover,
[data-mantine-color-scheme=light] .create-select--in-combined option:checked {
    background: #f1f3f5;
    color: #212529;
}
[data-mantine-color-scheme=light] .create-hwid-inner {
    background: #fff;
    border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .create-hwid-inner-text {
    color: #212529;
}
[data-mantine-color-scheme=light] .create-hwid-inner-divider {
    background: #dee2e6;
}
[data-mantine-color-scheme=light] .create-hwid-inner .create-hwid-options-btn {
    background: #f8f9fa;
    color: #495057;
    border-left-color: #dee2e6;
}
[data-mantine-color-scheme=light] .create-hwid-inner .create-hwid-options-btn:hover {
    background: #e9ecef;
    color: #212529;
}
[data-mantine-color-scheme=light] .create-hwid-options-icon {
    opacity: 0.85;
}
[data-mantine-color-scheme=light] .create-hwid-hint {
    color: #868e96;
}
[data-mantine-color-scheme=light] .create-hwid-hint strong {
    color: #495057;
}
[data-mantine-color-scheme=light] .create-hwid-hint--customized {
    color: #1A76FD;
}
[data-mantine-color-scheme=light] .create-badge--hwid {
    color: #868e96;
    background: #f1f3f5;
    border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .create-checkbox--hwid:checked ~ .create-badge--hwid {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.35);
}
[data-mantine-color-scheme=light] .create-hwid-row {
    background: transparent;
}
[data-mantine-color-scheme=light] .create-hwid-settings-btn {
    background: rgba(0, 0, 0, 0.06);
    color: #868e96;
}
[data-mantine-color-scheme=light] .create-hwid-settings-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #212529;
}
[data-mantine-color-scheme=light] .create-hwid-title { color: #212529; }
[data-mantine-color-scheme=light] .create-hwid-desc { color: #495057; }
[data-mantine-color-scheme=light] .create-checkbox {
    border-color: #adb5bd;
}
[data-mantine-color-scheme=light] .create-checkbox:hover {
    border-color: #868e96;
}
[data-mantine-color-scheme=light] .create-checkbox:checked {
    background: #1A76FD;
    border-color: #1A76FD;
}
[data-mantine-color-scheme=light] .create-submit {
    background: #1A76FD;
    border-color: #1A76FD;
    color: #fff;
}
[data-mantine-color-scheme=light] .create-btn {
    color: #495057;
    background: #f8f9fa;
    border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .create-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}
[data-mantine-color-scheme=light] .create-button {
    color: #495057;
    background: #f8f9fa;
    border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .create-button:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}
[data-mantine-color-scheme=light] .create-button--secondary {
    background: rgba(26, 118, 253, 0.1);
    border-color: rgba(26, 118, 253, 0.25);
    color: #1A76FD;
}
[data-mantine-color-scheme=light] .create-button--secondary:hover {
    background: rgba(26, 118, 253, 0.18);
    border-color: rgba(26, 118, 253, 0.35);
}
[data-mantine-color-scheme=light] .create-button--primary {
    background: #1A76FD;
    border-color: #1A76FD;
    color: #fff;
}
[data-mantine-color-scheme=light] .create-button--primary:hover {
    background: #1565e0;
    border-color: #1565e0;
}
[data-mantine-color-scheme=light] .create-output-empty {
    background: #f8f9fa;
    border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .create-output-empty-icon { background: #e9ecef; border-color: #dee2e6; }
[data-mantine-color-scheme=light] .create-output-empty-icon svg { color: #868e96; }
[data-mantine-color-scheme=light] .create-output-empty-title { color: #212529; }
[data-mantine-color-scheme=light] .create-output-empty-desc { color: #495057; }
[data-mantine-color-scheme=light] .create-output-textarea {
    background: #fff;
    border-color: #dee2e6;
    color: #212529;
}

/* ===== Add Duration Modal – theme ===== */
.add-duration-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.add-duration-overlay[hidden] {
    display: none !important;
}

.add-duration-modal {
    position: relative;
    width: 100%;
    max-width: 56rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    background: rgba(29, 29, 29, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    padding: 1.5rem 1.75rem;
}

.add-duration-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    border-radius: 0.25rem;
    transition: color 0.15s, background 0.15s;
}

.add-duration-close:hover {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.08);
}

.add-duration-header {
    margin-bottom: 0.5rem;
}

.add-duration-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 0.25rem 0;
}

.add-duration-title-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--mantine-color-primary-4, #1a76fd);
}

.add-duration-desc {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

.add-duration-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 1rem 0;
}

.add-duration-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 47.99em) {
    .add-duration-grid { grid-template-columns: 1fr; }
}

.add-duration-form .create-field { margin-bottom: 1rem; }
.add-duration-form .create-field:last-of-type { margin-bottom: 0; }

.add-duration-value-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.75rem;
}

.add-duration-input-simple {
    padding-left: 0.75rem !important;
}

.add-duration-existing .create-label { display: block; margin-bottom: 0.35rem; }

.add-duration-list {
    height: 250px;
    overflow-y: auto;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-duration-list--loaded {
    display: block;
    color: inherit;
}

.add-duration-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.35rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.375rem;
}

.add-duration-item:last-child { margin-bottom: 0; }

.add-duration-item-label { font-weight: 500; color: rgba(255, 255, 255, 0.9); }
.add-duration-item-days { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); margin-left: 0.35rem; }

.add-duration-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    background: transparent;
    border: none;
    color: #f87171;
    cursor: pointer;
    border-radius: 0.25rem;
}

.add-duration-del:hover {
    background: rgba(248, 113, 113, 0.15);
    color: #fca5a5;
}

.add-duration-footer {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.add-duration-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

@media (min-width: 48em) {
    .add-duration-quick { grid-template-columns: repeat(6, 1fr); }
}

.add-duration-quick-btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.add-duration-quick-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
}

.add-duration-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.add-duration-submit-btn {
    flex: 1;
    max-width: 14rem;
}

/* Add Duration Modal – light mode */
[data-mantine-color-scheme=light] .add-duration-modal {
    background: #fff;
    border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .add-duration-close { color: #495057; }
[data-mantine-color-scheme=light] .add-duration-close:hover { background: #f8f9fa; color: #212529; }
[data-mantine-color-scheme=light] .add-duration-title { color: #212529; }
[data-mantine-color-scheme=light] .add-duration-desc { color: #495057; }
[data-mantine-color-scheme=light] .add-duration-divider { background: #dee2e6; }
[data-mantine-color-scheme=light] .add-duration-list {
    background: #f8f9fa;
    border-color: #dee2e6;
    color: #495057;
}
[data-mantine-color-scheme=light] .add-duration-item {
    background: #fff;
    border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .add-duration-item-label { color: #212529; }
[data-mantine-color-scheme=light] .add-duration-item-days { color: #868e96; }
[data-mantine-color-scheme=light] .add-duration-footer { border-top-color: #dee2e6; }
[data-mantine-color-scheme=light] .add-duration-quick-btn {
    color: #495057;
    background: #f8f9fa;
    border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .add-duration-quick-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

/* ===== HWID Lock Options Modal – Mantine theme ===== */
.hwid-options-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.hwid-options-overlay[hidden] {
    display: none !important;
}

.hwid-options-modal {
    position: relative;
    width: 100%;
    max-width: 24rem;
    background: rgba(29, 29, 29, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    padding: 1.5rem 1.75rem;
}

.hwid-options-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    border-radius: 0.25rem;
    transition: color 0.15s, background 0.15s;
}

.hwid-options-close:hover {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.08);
}

.hwid-options-header {
    margin-bottom: 0.5rem;
}

.hwid-options-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 0.25rem 0;
}

.hwid-options-title-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--mantine-color-primary-4, #1a76fd);
    flex-shrink: 0;
}

.hwid-options-desc {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

.hwid-options-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 1rem 0;
}

.hwid-options-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hwid-option-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.375rem;
    transition: background 0.15s, border-color 0.15s;
}

.hwid-option-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.hwid-option-item .create-checkbox {
    margin-top: 0;
    flex-shrink: 0;
}

.hwid-option-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.hwid-option-icon {
    width: 1rem;
    height: 1rem;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.hwid-options-footer {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hwid-options-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.hwid-options-hint svg {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.hwid-options-done-btn {
    width: 100%;
    margin-top: 0;
}

[data-mantine-color-scheme=light] .hwid-options-modal {
    background: #fff;
    border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .hwid-options-close { color: #495057; }
[data-mantine-color-scheme=light] .hwid-options-close:hover { background: #f8f9fa; color: #212529; }
[data-mantine-color-scheme=light] .hwid-options-title { color: #212529; }
[data-mantine-color-scheme=light] .hwid-options-desc { color: #495057; }
[data-mantine-color-scheme=light] .hwid-options-divider { background: #dee2e6; }
[data-mantine-color-scheme=light] .hwid-option-item {
    background: #f8f9fa;
    border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .hwid-option-item:hover {
    background: #f1f3f5;
    border-color: #ced4da;
}
[data-mantine-color-scheme=light] .hwid-option-label { color: #212529; }
[data-mantine-color-scheme=light] .hwid-option-icon { color: #868e96; }
[data-mantine-color-scheme=light] .hwid-options-footer { border-top-color: #dee2e6; }
[data-mantine-color-scheme=light] .hwid-options-hint { color: #868e96; }

/* ===== Licenses page – full width ===== */
.licenses-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
}

.licenses-grid--full {
    grid-template-columns: 1fr;
}

@media (max-width: 64em) {
    .licenses-grid { grid-template-columns: 1fr; }
}

.licenses-main .dashboard-map-card { margin-top: 0; }

/* License Keys card: stats + quick actions at top */
.licenses-top-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.licenses-stat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.licenses-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    font-weight: 500;
    font-size: 0.75rem;
}
.licenses-stat-pill-value {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}
.licenses-stat-pill-label {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.9;
}

.licenses-stat-pill--primary {
    background: rgba(26, 118, 253, 0.2);
    border-color: rgba(26, 118, 253, 0.35);
}
.licenses-stat-pill--primary .licenses-stat-pill-value { color: #74c0fc; }
.licenses-stat-pill--primary .licenses-stat-pill-label { color: rgba(255, 255, 255, 0.8); }

.licenses-stat-pill--green {
    background: rgba(64, 192, 87, 0.2);
    border-color: rgba(64, 192, 87, 0.35);
}
.licenses-stat-pill--green .licenses-stat-pill-value { color: #69db7c; }
.licenses-stat-pill--green .licenses-stat-pill-label { color: rgba(255, 255, 255, 0.8); }

.licenses-stat-pill--red {
    background: rgba(250, 82, 82, 0.2);
    border-color: rgba(250, 82, 82, 0.35);
}
.licenses-stat-pill--red .licenses-stat-pill-value { color: #ff8787; }
.licenses-stat-pill--red .licenses-stat-pill-label { color: rgba(255, 255, 255, 0.8); }

.licenses-stat-pill--yellow {
    background: rgba(250, 176, 5, 0.2);
    border-color: rgba(250, 176, 5, 0.35);
}
.licenses-stat-pill--yellow .licenses-stat-pill-value { color: #ffe066; }
.licenses-stat-pill--yellow .licenses-stat-pill-label { color: rgba(255, 255, 255, 0.8); }

.licenses-top-bar .licenses-quick-pills {
    margin-left: auto;
}
.licenses-quick-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.licenses-quick-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: inherit;
}
.licenses-quick-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.licenses-quick-pill svg { flex-shrink: 0; }
.licenses-quick-pill--danger {
  color: #ff8787;
  background: rgba(250, 82, 82, 0.12);
  border-color: rgba(250, 82, 82, 0.3);
}
.licenses-quick-pill--danger:hover {
  background: rgba(250, 82, 82, 0.2);
  border-color: rgba(250, 82, 82, 0.45);
  color: #ff8787;
}

@media (max-width: 768px) {
    .licenses-top-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .licenses-top-bar .licenses-quick-pills {
        margin-left: 0;
    }
}

[data-mantine-color-scheme=light] .licenses-top-bar {
    border-bottom-color: #dee2e6;
}
[data-mantine-color-scheme=light] .licenses-stat-pill--primary {
    background: rgba(26, 118, 253, 0.12);
    border-color: rgba(26, 118, 253, 0.25);
}
[data-mantine-color-scheme=light] .licenses-stat-pill--primary .licenses-stat-pill-value { color: #1c7ed6; }
[data-mantine-color-scheme=light] .licenses-stat-pill--primary .licenses-stat-pill-label { color: #495057; }

[data-mantine-color-scheme=light] .licenses-stat-pill--green {
    background: rgba(64, 192, 87, 0.12);
    border-color: rgba(64, 192, 87, 0.25);
}
[data-mantine-color-scheme=light] .licenses-stat-pill--green .licenses-stat-pill-value { color: #2f9e44; }
[data-mantine-color-scheme=light] .licenses-stat-pill--green .licenses-stat-pill-label { color: #495057; }

[data-mantine-color-scheme=light] .licenses-stat-pill--red {
    background: rgba(250, 82, 82, 0.12);
    border-color: rgba(250, 82, 82, 0.25);
}
[data-mantine-color-scheme=light] .licenses-stat-pill--red .licenses-stat-pill-value { color: #e03131; }
[data-mantine-color-scheme=light] .licenses-stat-pill--red .licenses-stat-pill-label { color: #495057; }

[data-mantine-color-scheme=light] .licenses-stat-pill--yellow {
    background: rgba(250, 176, 5, 0.12);
    border-color: rgba(250, 176, 5, 0.25);
}
[data-mantine-color-scheme=light] .licenses-stat-pill--yellow .licenses-stat-pill-value { color: #e67700; }
[data-mantine-color-scheme=light] .licenses-stat-pill--yellow .licenses-stat-pill-label { color: #495057; }

.licenses-count {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 0.5rem;
}

/* Blacklisted page */
.blacklisted-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.blacklisted-main { display: flex; flex-direction: column; gap: 1.5rem; }
.blacklisted-top-bar { margin-bottom: 0; }

.blacklisted-ban-card .dashboard-map-header { padding-bottom: 0.5rem; }
.blacklisted-ban-body {
  padding: 1.5rem 1.75rem;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.blacklisted-form-hint {
  margin: 0 0 1.25rem 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
}
.blacklisted-form { margin: 0; }
.blacklisted-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.blacklisted-field label {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.blacklisted-input {
  height: 2.5rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
}
.blacklisted-inputs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 48em) {
  .blacklisted-inputs-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 1.5rem;
  }
}
.blacklisted-reason-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}
.blacklisted-field--reason { flex: 1; min-width: 180px; }
.blacklisted-ban-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  background: #fa5252 !important;
  border: 1px solid #e03131 !important;
  color: #fff !important;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.blacklisted-ban-btn:hover {
  background: #e03131 !important;
  border-color: #c92a2a !important;
  transform: translateY(-1px);
}
.blacklisted-ban-btn:active { transform: translateY(0); }
.blacklisted-list-card .dashboard-map-header { padding: 1rem 1.5rem; }
.blacklisted-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem 0;
}
.blacklisted-filters .licenses-search-wrap { flex: 1; min-width: 220px; }
.blacklisted-filters .licenses-select {
  width: auto;
  min-width: 140px;
  height: 2.5rem;
  padding: 0 2rem 0 0.75rem;
}
.blacklisted-list-card .licenses-body { padding: 1.25rem 1.5rem; }
.blacklisted-identifier code {
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
}
.blacklisted-stats {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.blacklisted-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.blacklisted-stat:last-child { border-bottom: none; }
.blacklisted-stat-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ff8787;
}
.blacklisted-stat-label { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); }
.blacklisted-action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.375rem;
  cursor: pointer;
  margin-bottom: 0.5rem;
  transition: background 0.15s, border-color 0.15s;
}
.blacklisted-action-btn:last-child { margin-bottom: 0; }
.blacklisted-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}
.blacklisted-action-btn--danger {
  color: #ff8787;
  border-color: rgba(250, 82, 82, 0.3);
}
.blacklisted-action-btn--danger:hover {
  background: rgba(250, 82, 82, 0.1);
  border-color: rgba(250, 82, 82, 0.5);
}
.blacklisted-empty { padding: 2rem 1.5rem; text-align: center; color: rgba(255,255,255,0.5); font-size: 0.875rem; }

[data-mantine-color-scheme=light] .blacklisted-ban-body {
  background: rgba(0, 0, 0, 0.02);
  border-top-color: #e9ecef;
}
[data-mantine-color-scheme=light] .blacklisted-form-hint { color: #868e96; }
[data-mantine-color-scheme=light] .blacklisted-field label { color: #495057; }
[data-mantine-color-scheme=light] .blacklisted-stat-value { color: #e03131; }
[data-mantine-color-scheme=light] .blacklisted-stat-label { color: #868e96; }
[data-mantine-color-scheme=light] .blacklisted-action-btn {
  background: #f8f9fa;
  border-color: #e9ecef;
  color: #212529;
}
[data-mantine-color-scheme=light] .blacklisted-action-btn:hover {
  background: #f1f3f5;
  border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .blacklisted-action-btn--danger {
  color: #e03131;
  border-color: rgba(250, 82, 82, 0.35);
}
[data-mantine-color-scheme=light] .blacklisted-action-btn--danger:hover {
  background: rgba(250, 82, 82, 0.08);
  border-color: rgba(250, 82, 82, 0.5);
}

/* Reseller Top-up page */
.reseller-topup-grid { grid-template-columns: 1fr; }
.reseller-topup-main { display: flex; flex-direction: column; gap: 1.5rem; }
.reseller-topup-create-body {
  padding: 1.5rem 1.75rem;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.reseller-topup-form-hint {
  margin: 0 0 1.25rem 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
}
.reseller-topup-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.reseller-topup-field--amount,
.reseller-topup-field--note { grid-column: span 2; }
@media (min-width: 48em) {
  .reseller-topup-form-grid {
    grid-template-columns: 140px 1fr 1fr 80px;
    gap: 1rem 1.25rem;
  }
  .reseller-topup-field--amount { grid-column: span 1; }
  .reseller-topup-field--note { grid-column: span 4; }
}
.reseller-topup-field { display: flex; flex-direction: column; gap: 0.35rem; }
.reseller-topup-field label { font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.reseller-topup-input, .reseller-topup-select {
  height: 2.5rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
}
.reseller-topup-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  background: rgba(64, 192, 87, 0.2) !important;
  border: 1px solid rgba(64, 192, 87, 0.4) !important;
  color: #69db7c !important;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}
.reseller-topup-create-btn:hover {
  background: rgba(64, 192, 87, 0.3) !important;
  border-color: rgba(64, 192, 87, 0.5) !important;
  transform: translateY(-1px);
}
.reseller-topup-filters {
  display: flex;
  padding: 1rem 1.5rem 0;
}
.reseller-topup-filters .licenses-search-wrap { flex: 1; min-width: 200px; }
.reseller-topup-code-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.reseller-topup-code-text {
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
}
.reseller-topup-balance-amount { font-size: 1.75rem; font-weight: 700; color: #69db7c; }
.reseller-topup-loading, .reseller-topup-empty, .reseller-topup-error { padding: 1.5rem; text-align: center; color: rgba(255,255,255,0.6); font-size: 0.875rem; }
.reseller-topup-error { color: #ff8787; }
.reseller-topup-used { color: #ff8787; }
.reseller-topup-unused { color: #69db7c; }
[data-mantine-color-scheme=light] .reseller-topup-balance-amount { color: #2f9e44; }
[data-mantine-color-scheme=light] .reseller-topup-create-body { background: rgba(0, 0, 0, 0.02); border-top-color: #e9ecef; }
[data-mantine-color-scheme=light] .reseller-topup-form-hint { color: #868e96; }
[data-mantine-color-scheme=light] .reseller-topup-field label { color: #495057; }
[data-mantine-color-scheme=light] .reseller-topup-create-btn { background: rgba(64, 192, 87, 0.15) !important; border-color: rgba(64, 192, 87, 0.35) !important; color: #2f9e44 !important; }
[data-mantine-color-scheme=light] .reseller-topup-create-btn:hover { background: rgba(64, 192, 87, 0.25) !important; }

/* Custom Balance (Duration Pricing) page */
.custombalance-grid { grid-template-columns: 1fr; }
.custombalance-main { display: flex; flex-direction: column; gap: 1.5rem; }
.custombalance-form-body {
  padding: 1.5rem 1.75rem;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.custombalance-project-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.custombalance-project-wrap label {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.custombalance-project-select {
  min-width: 160px;
  height: 2.5rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
}
.custombalance-duration-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 30em) {
  .custombalance-duration-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 48em) {
  .custombalance-duration-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64em) {
  .custombalance-duration-grid { grid-template-columns: repeat(4, 1fr); }
}
.custombalance-duration-card {
  padding: 1.25rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.custombalance-duration-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.custombalance-duration-card:focus-within {
  border-color: rgba(26, 118, 253, 0.5);
  box-shadow: 0 0 0 2px rgba(26, 118, 253, 0.15);
}
.custombalance-duration-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.custombalance-duration-item label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.custombalance-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
}
.custombalance-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 0.5rem;
}
.custombalance-empty-desc {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}
.custombalance-price-wrap {
  position: relative;
}
.custombalance-price-prefix {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
.custombalance-price-input {
  width: 100%;
  padding: 0.625rem 0.875rem 0.625rem 2rem;
  height: 2.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 0.375rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.custombalance-price-input:focus {
  border-color: rgba(26, 118, 253, 0.5);
  background: rgba(0, 0, 0, 0.35);
}
.custombalance-price-input:hover {
  border-color: rgba(255, 255, 255, 0.18);
}
.custombalance-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  background: rgba(64, 192, 87, 0.2) !important;
  border: 1px solid rgba(64, 192, 87, 0.4) !important;
  color: #69db7c !important;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}
.custombalance-save-btn:hover {
  background: rgba(64, 192, 87, 0.3) !important;
  border-color: rgba(64, 192, 87, 0.5) !important;
  transform: translateY(-1px);
}
.custombalance-save-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.custombalance-message {
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.custombalance-message--success { color: #69db7c; }
.custombalance-message--error { color: #ff8787; }
.custombalance-form-card {
  overflow: visible;
}
.custombalance-form-card .dashboard-map-header {
  overflow: visible;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}
.custombalance-form-card .dashboard-map-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.custombalance-tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
}
.custombalance-tooltip-icon {
  color: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
  transition: color 0.2s;
}
.custombalance-tooltip-wrap:hover .custombalance-tooltip-icon {
  color: rgba(255, 255, 255, 0.75);
}
.custombalance-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.5rem);
  transform: translateX(-50%);
  width: 260px;
  padding: 0.75rem 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(29, 29, 29, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 100;
  pointer-events: none;
}
.custombalance-tooltip-wrap:hover .custombalance-tooltip {
  opacity: 1;
  visibility: visible;
}
.custombalance-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.12);
}
[data-mantine-color-scheme=light] .custombalance-tooltip-icon {
  color: rgba(0, 0, 0, 0.4);
}
[data-mantine-color-scheme=light] .custombalance-tooltip-wrap:hover .custombalance-tooltip-icon {
  color: rgba(0, 0, 0, 0.65);
}
[data-mantine-color-scheme=light] .custombalance-tooltip {
  color: #212529;
  background: #fff;
  border-color: #dee2e6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
[data-mantine-color-scheme=light] .custombalance-tooltip::after {
  border-top-color: #dee2e6;
}
[data-mantine-color-scheme=light] .custombalance-form-body {
  background: rgba(0, 0, 0, 0.02);
  border-top-color: #e9ecef;
}
[data-mantine-color-scheme=light] .custombalance-project-wrap label { color: #495057; }
[data-mantine-color-scheme=light] .custombalance-duration-card {
  background: rgba(0, 0, 0, 0.03);
  border-color: #e9ecef;
}
[data-mantine-color-scheme=light] .custombalance-duration-card:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: #dee2e6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
[data-mantine-color-scheme=light] .custombalance-duration-card:focus-within {
  border-color: rgba(26, 118, 253, 0.5);
  box-shadow: 0 0 0 2px rgba(26, 118, 253, 0.12);
}
[data-mantine-color-scheme=light] .custombalance-duration-item label { color: #212529; }
[data-mantine-color-scheme=light] .custombalance-empty-state { background: rgba(0, 0, 0, 0.03); border-color: #e9ecef; }
[data-mantine-color-scheme=light] .custombalance-empty-title { color: #212529; }
[data-mantine-color-scheme=light] .custombalance-empty-desc { color: #868e96; }
[data-mantine-color-scheme=light] .custombalance-price-prefix { color: rgba(0, 0, 0, 0.45); }
[data-mantine-color-scheme=light] .custombalance-price-input {
  background: #f8f9fa;
  border-color: #e9ecef;
}
[data-mantine-color-scheme=light] .custombalance-price-input:focus {
  background: #fff;
  border-color: rgba(26, 118, 253, 0.5);
}
[data-mantine-color-scheme=light] .custombalance-price-input:hover {
  border-color: #ced4da;
}
[data-mantine-color-scheme=light] .custombalance-save-btn {
  background: rgba(64, 192, 87, 0.15) !important;
  border-color: rgba(64, 192, 87, 0.35) !important;
  color: #2f9e44 !important;
}
[data-mantine-color-scheme=light] .custombalance-save-btn:hover {
  background: rgba(64, 192, 87, 0.25) !important;
}

/* Reseller Panel page */
.reseller-panel-grid {
  grid-template-columns: 1fr;
}
.reseller-panel-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.reseller-panel-main .dashboard-map-card { margin-top: 0; }

.reseller-create-card {
  overflow: visible;
}
.reseller-create-body {
  overflow: visible;
  padding: 1.5rem 1.75rem;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.reseller-limit-message {
  padding: 1rem 1.25rem;
  background: rgba(255, 193, 7, 0.08);
  border: 1px solid rgba(255, 193, 7, 0.25);
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}
.reseller-limit-message a {
  color: var(--mantine-color-yellow-5, #e9b949);
  text-decoration: underline;
}
.reseller-form-hint {
  margin: 0 0 1.25rem 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
}
.reseller-form-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 48em) {
  .reseller-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.reseller-field--name,
.reseller-field--email { grid-column: span 1; }
.reseller-field--password,
.reseller-field--balance,
.reseller-field--role { grid-column: span 1; }
.reseller-role-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 0;
}
.reseller-role-input-row .reseller-select {
  flex: 1;
  min-width: 0;
}
/* Form Compare roles: same button shape as header but dropdown-matching colors */
.reseller-role-input-row .reseller-role-compare-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 0.75rem;
  margin: 0;
  min-height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(45, 45, 45, 0.8);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: 0.375rem;
}
.reseller-role-input-row .reseller-role-compare-trigger:hover {
  background: rgba(55, 55, 55, 0.9);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.95);
}
.reseller-role-input-row .reseller-role-compare-trigger:focus-visible {
  outline: none;
  border-color: var(--mantine-color-primary-4, #1a76fd);
  box-shadow: 0 0 0 2px rgba(26, 118, 253, 0.2);
}
.reseller-role-input-row .reseller-role-compare-trigger svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
[data-mantine-color-scheme=light] .reseller-role-input-row .reseller-role-compare-trigger {
  background: #fff;
  border-color: #dee2e6;
  color: #212529;
}
[data-mantine-color-scheme=light] .reseller-role-input-row .reseller-role-compare-trigger:hover {
  background: #f8f9fa;
  border-color: #ced4da;
  color: #212529;
}
@media (min-width: 48em) {
  .reseller-field--password { grid-column: span 2; }
}

/* Reseller create: two subscription cards (Plan + Level Permissions) */
.reseller-create-subscription-cards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 0.25rem;
}
@media (min-width: 42em) {
  .reseller-create-subscription-cards {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}
.reseller-sub-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.reseller-sub-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.reseller-sub-card__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.reseller-sub-card__dot--blue { background: rgba(59, 130, 246, 0.9); }
.reseller-sub-card__dot--green { background: rgba(74, 222, 128, 0.9); }
.reseller-sub-card__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}
.reseller-sub-card__body {
  padding: 1rem;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.reseller-sub-card__hint {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
  margin: 0 0 0.75rem 0;
}
.reseller-sub-card__hint a {
  color: rgba(59, 130, 246, 0.95);
  text-decoration: none;
}
.reseller-sub-card__hint a:hover {
  text-decoration: underline;
}
.reseller-sub-card__toggle {
  margin-bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.reseller-sub-card__toggle .create-checkbox {
  margin: 0;
  flex-shrink: 0;
}
.reseller-sub-card__toggle span {
  user-select: none;
}
[data-mantine-color-scheme=light] .reseller-sub-card__toggle {
  color: #212529;
}
.reseller-sub-card--plan .reseller-create-subscription-plan-opts {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.reseller-sub-card--plan .reseller-modal-field label {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.25rem;
  display: block;
}
.reseller-sub-card-levels {
  max-height: 10rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}
.reseller-sub-card-levels .reseller-project-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.85);
}
.reseller-sub-card-levels .reseller-modal-empty {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  padding: 0.5rem 0;
}
[data-mantine-color-scheme=light] .reseller-sub-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-mantine-color-scheme=light] .reseller-sub-card__header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-mantine-color-scheme=light] .reseller-sub-card__title { color: #212529; }
[data-mantine-color-scheme=light] .reseller-sub-card__hint { color: #6c757d; }
[data-mantine-color-scheme=light] .reseller-sub-card-levels .reseller-project-check { color: #212529; }
[data-mantine-color-scheme=light] .reseller-sub-card-levels .reseller-modal-empty { color: #868e96; }

/* Reseller password combined (nav-project style): input + generate + visibility */
.reseller-password-combined,
.reseller-balance-combined {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  width: 100%;
  min-height: 2.5rem;
  background: rgba(45, 45, 45, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.375rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.reseller-password-combined:hover,
.reseller-balance-combined:hover {
  border-color: rgba(255, 255, 255, 0.18);
}
.reseller-password-combined:focus-within,
.reseller-balance-combined:focus-within {
  border-color: rgba(26, 118, 253, 0.5);
  box-shadow: 0 0 0 1px rgba(26, 118, 253, 0.2);
}
.reseller-password-input-area,
.reseller-balance-input-area {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  position: relative;
}
.reseller-password-input-area {
  position: relative;
}
.reseller-password-input-area .reseller-input-icon {
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.reseller-password-input {
  padding-left: 3rem !important;
}
.reseller-password-input,
.reseller-balance-input {
  padding-right: 0.75rem;
  border: none;
  background: transparent;
  border-radius: 0.375rem 0 0 0.375rem;
}
.reseller-balance-input-area {
  position: relative;
}
.reseller-balance-input-area .reseller-prefix {
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.reseller-balance-input {
  padding-left: 2.5rem !important;
}
.reseller-combined-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
  align-self: stretch;
  flex-shrink: 0;
}
.reseller-password-generate,
.reseller-password-toggle,
.reseller-balance-max-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.6rem;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.reseller-password-generate:hover,
.reseller-password-toggle:hover {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.06);
}
.reseller-password-toggle .reseller-eye-open,
.reseller-password-toggle .reseller-eye-closed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.reseller-password-toggle [hidden] {
  display: none !important;
}
.reseller-balance-max-trigger {
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 0 0.375rem 0.375rem 0;
}
.reseller-balance-max-trigger:hover {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.06);
}
.reseller-balance-chevron { opacity: 0.6; }
.reseller-balance-dropdown {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 7rem;
  max-height: 220px;
  overflow-y: auto;
  background: rgba(29, 29, 29, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  padding: 0.25rem;
  display: none;
}
.reseller-balance-dropdown.is-open { display: block; }
.reseller-balance-option {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  border-radius: 0.35rem;
  transition: background 0.15s;
}
.reseller-balance-option:hover {
  background: rgba(255, 255, 255, 0.08);
}
.reseller-balance-option--max {
  color: #69db7c;
  font-weight: 600;
}
.reseller-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.reseller-field label {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.reseller-input-wrap {
  position: relative;
}
.reseller-input-wrap--prefix .reseller-input { padding-left: 2rem; }
.reseller-input-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}
.reseller-input-wrap:not(.reseller-input-wrap--prefix) .reseller-input {
  padding-left: 2.5rem;
}
.reseller-prefix {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}
.reseller-input,
.reseller-select {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
}
.reseller-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  background: rgba(64, 192, 87, 0.2) !important;
  border: 1px solid rgba(64, 192, 87, 0.4) !important;
  color: #69db7c !important;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}
.reseller-create-btn:hover {
  background: rgba(64, 192, 87, 0.3) !important;
  border-color: rgba(64, 192, 87, 0.5) !important;
  transform: translateY(-1px);
}

.reseller-list-card {
  overflow: visible;
}
.reseller-list-card .dashboard-map-header {
  overflow: visible;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.reseller-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.reseller-top-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem 1.25rem;
}
.reseller-top-bar .licenses-stat-pills { flex: 0 0 auto; }
.reseller-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.reseller-search-wrap .licenses-search-icon {
  left: 0.75rem;
}
.reseller-search-wrap .licenses-search {
  padding-left: 2.5rem;
}

.reseller-id-cell {
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
}
.reseller-name {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}
.reseller-role-pill {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 0.25rem;
}
.reseller-role-pill--manager {
  background: rgba(26, 118, 253, 0.2);
  color: #74c0fc;
}
.reseller-role-pill--tester,
.reseller-role-pill--support {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
.reseller-keys {
  font-variant-numeric: tabular-nums;
}
.reseller-balance {
  font-weight: 600;
  color: #69db7c;
}
.reseller-webhook-badge {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: 0.25rem;
}
.reseller-webhook-badge--on {
  background: rgba(64, 192, 87, 0.2);
  color: #69db7c;
}
.reseller-webhook-badge--off {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.45);
}
.reseller-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.reseller-action-btn {
  padding: 0.4rem;
  color: rgba(255, 255, 255, 0.6);
}
.reseller-action-btn:hover {
  color: rgba(255, 255, 255, 0.95);
}

/* Reseller features dropdown (nav-user style) */
.reseller-features-dropdown-wrap {
  position: relative;
}
.reseller-features-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem 0.4rem 0.5rem;
  border-radius: 9999px;
  background: rgba(29, 29, 29, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-family: inherit;
}
.reseller-features-trigger:hover {
  background: rgba(45, 45, 45, 1);
  border-color: rgba(255, 255, 255, 0.18);
}
.reseller-features-trigger-label { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
.reseller-features-chevron { flex-shrink: 0; opacity: 0.6; }
.reseller-features-dropdown-wrap .reseller-features-menu {
  min-width: 18rem;
  padding: 0.75rem;
}
.reseller-features-menu-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.reseller-feature-toggle--inline {
  padding: 0.5rem 0;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.reseller-feature-menu-btn {
  justify-content: flex-start;
}

.reseller-feature-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
}
.reseller-feature-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.reseller-feature-toggle-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.reseller-feature-toggle-desc {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.5);
}
.reseller-switch {
  position: relative;
  display: inline-block;
  width: 2.5rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.reseller-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.reseller-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  transition: 0.2s;
}
.reseller-switch-slider::before {
  content: '';
  position: absolute;
  height: 1rem;
  width: 1rem;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
}
.reseller-switch input:checked + .reseller-switch-slider {
  background: rgba(26, 118, 253, 0.5);
}
.reseller-switch input:checked + .reseller-switch-slider::before {
  transform: translateX(1.25rem);
}

[data-mantine-color-scheme=light] .reseller-create-body {
  background: rgba(0, 0, 0, 0.02);
  border-top-color: #e9ecef;
}
[data-mantine-color-scheme=light] .reseller-form-hint { color: #868e96; }
[data-mantine-color-scheme=light] .reseller-field label { color: #495057; }
[data-mantine-color-scheme=light] .reseller-input-icon { color: #868e96; }
[data-mantine-color-scheme=light] .reseller-prefix { color: #868e96; }
[data-mantine-color-scheme=light] .reseller-password-combined,
[data-mantine-color-scheme=light] .reseller-balance-combined {
  background: #fff;
  border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .reseller-password-combined:hover,
[data-mantine-color-scheme=light] .reseller-balance-combined:hover {
  border-color: #ced4da;
}
[data-mantine-color-scheme=light] .reseller-combined-divider { background: #dee2e6; }
[data-mantine-color-scheme=light] .reseller-password-generate,
[data-mantine-color-scheme=light] .reseller-password-toggle {
  color: #868e96;
}
[data-mantine-color-scheme=light] .reseller-password-generate:hover,
[data-mantine-color-scheme=light] .reseller-password-toggle:hover {
  color: #495057;
  background: rgba(0, 0, 0, 0.04);
}
[data-mantine-color-scheme=light] .reseller-balance-max-trigger { color: #495057; }
[data-mantine-color-scheme=light] .reseller-balance-max-trigger:hover {
  color: #212529;
  background: rgba(0, 0, 0, 0.04);
}
[data-mantine-color-scheme=light] .reseller-balance-dropdown {
  background: #fff;
  border-color: #dee2e6;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
[data-mantine-color-scheme=light] .reseller-balance-option { color: #212529; }
[data-mantine-color-scheme=light] .reseller-balance-option:hover { background: #f8f9fa; }
[data-mantine-color-scheme=light] .reseller-balance-option--max { color: #2f9e44; }
[data-mantine-color-scheme=light] .reseller-create-btn {
  background: rgba(64, 192, 87, 0.15) !important;
  border-color: rgba(64, 192, 87, 0.35) !important;
  color: #2f9e44 !important;
}
[data-mantine-color-scheme=light] .reseller-create-btn:hover {
  background: rgba(64, 192, 87, 0.25) !important;
}
[data-mantine-color-scheme=light] .reseller-feature-toggle {
  background: rgba(0, 0, 0, 0.03);
  border-color: #e9ecef;
}
[data-mantine-color-scheme=light] .reseller-feature-toggle-label { color: #212529; }
[data-mantine-color-scheme=light] .reseller-feature-toggle-desc { color: #868e96; }
[data-mantine-color-scheme=light] .reseller-features-trigger {
  background: #fff;
  border-color: #dee2e6;
  color: #212529;
}
[data-mantine-color-scheme=light] .reseller-features-trigger:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
}

.licenses-body {
    padding: 1.25rem 1.5rem;
}

.licenses-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.licenses-search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.licenses-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: rgba(255, 255, 255, 0.45);
}

.licenses-search {
    width: 100%;
    height: 2.5rem;
    padding: 0 0.75rem 0 2.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(45, 45, 45, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.375rem;
    font-family: inherit;
}

.licenses-search::placeholder { color: rgba(255, 255, 255, 0.45); }
.licenses-search:focus { outline: none; border-color: var(--mantine-color-primary-4, #1a76fd); }

.licenses-filter-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.licenses-select {
    height: 2.5rem;
    padding: 0 2rem 0 0.75rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(45, 45, 45, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.375rem;
    cursor: pointer;
    font-family: inherit;
}

.licenses-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.375rem;
    -webkit-overflow-scrolling: touch;
}

.licenses-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.licenses-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.licenses-table td {
    padding: 0.75rem 1rem;
    color: rgba(255, 255, 255, 0.9);
    vertical-align: middle;
}

.licenses-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.licenses-table tbody tr:last-child {
    border-bottom: none;
}

.licenses-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.licenses-cell-key {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.licenses-copy-btn {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.licenses-copy-btn:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 768px) {
    .reseller-panel-main .licenses-table-wrap {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    .reseller-table {
        min-width: 720px;
        font-size: 0.75rem;
    }
    .reseller-table th,
    .reseller-table td {
        padding: 0.5rem 0.6rem;
    }
    .reseller-table .licenses-action-menu-trigger {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem;
    }
}

.licenses-key-text {
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.licenses-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 9999px;
    border: 1px solid;
}

.licenses-badge--green {
    background: rgba(64, 192, 87, 0.2);
    color: #40c057;
    border-color: rgba(64, 192, 87, 0.4);
}

.licenses-badge--red {
    background: rgba(250, 82, 82, 0.2);
    color: #fa5252;
    border-color: rgba(250, 82, 82, 0.4);
}

.licenses-badge--yellow {
    background: rgba(250, 176, 5, 0.2);
    color: #fab005;
    border-color: rgba(250, 176, 5, 0.4);
}

.licenses-actions {
    display: flex;
    gap: 0.25rem;
}

.licenses-action-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.licenses-action-btn:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
}

.licenses-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.licenses-pagination-btn {
    height: 2.25rem;
    padding: 0 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.licenses-pagination-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
}

.licenses-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.licenses-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.licenses-sidebar .dashboard-map-card { margin-top: 0; }

.licenses-stat-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.licenses-stat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.375rem;
}

.licenses-stat-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.licenses-stat-sublabel {
    display: block;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
}

.licenses-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.licenses-stat-value--primary { color: var(--mantine-color-primary-4, #1a76fd); }
.licenses-stat-value--green { color: #40c057; }
.licenses-stat-value--red { color: #fa5252; }
.licenses-stat-value--yellow { color: #fab005; }

.licenses-activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.licenses-activity-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.licenses-activity-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.licenses-activity-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
}
.licenses-activity-icon-wrap svg { opacity: 0.9; }
.licenses-activity-dot--green {
    background: rgba(64, 192, 87, 0.2);
    color: #40c057;
}
.licenses-activity-dot--red {
    background: rgba(250, 82, 82, 0.2);
    color: #fa5252;
}
.licenses-activity-dot--blue {
    background: rgba(26, 118, 253, 0.2);
    color: var(--mantine-color-primary-4, #1a76fd);
}

.licenses-activity-content {
    flex: 1;
    min-width: 0;
}
.licenses-activity-action {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 0.15rem;
}

.licenses-activity-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
}
.licenses-activity-key {
    font-family: ui-monospace, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
}
.licenses-activity-sep {
    opacity: 0.6;
}
.licenses-activity-time {
    flex-shrink: 0;
}

.licenses-quick-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.375rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
}

.licenses-quick-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.95);
}

.licenses-quick-card .dashboard-map-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* License modals – Mantine style */
.license-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.license-modal-overlay[hidden] {
    display: none !important;
}

.license-modal {
    position: relative;
    width: 100%;
    max-width: 32rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    background: rgba(29, 29, 29, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    padding: 1.5rem 1.75rem;
}

.license-modal--sm { max-width: 24rem; }
.license-modal--wide { max-width: 36rem; }

.licenses-ip-blur { cursor: pointer; user-select: none; }
.licenses-ip-blur:hover { text-decoration: underline; }
.licenses-col-toggle-wrap { position: relative; display: inline-block; }
.licenses-col-menu { position: absolute; top: 100%; right: 0; margin-top: 4px; padding: 8px 12px; background: var(--mantine-color-dark-6, #2c2e33); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; z-index: 100; min-width: 160px; }
.licenses-col-menu[hidden] { display: none !important; }
.licenses-col-opt { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; cursor: pointer; padding: 4px 0; }
.licenses-export-opt { display: block; margin-bottom: 0.75rem; }
.licenses-export-format { display: flex; gap: 8px; flex-wrap: wrap; }
.licenses-bulk-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.licenses-bulk-btn { padding: 6px 12px; font-size: 0.8125rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; color: inherit; cursor: pointer; }
.licenses-bulk-btn:hover { background: rgba(255,255,255,0.1); }
.licenses-bulk-btn--danger { border-color: rgba(250,82,82,0.4); color: #ff8787; }
.licenses-bulk-btn--danger:hover { background: rgba(250,82,82,0.15); }
.licenses-bulk-add-time { display: flex; align-items: center; gap: 8px; margin-top: 0.5rem; }
.licenses-bulk-add-time input { width: 100px; }
.licenses-import-preview { font-size: 0.875rem; color: rgba(255,255,255,0.7); margin-top: 0.5rem; }
.licenses-import-status { font-size: 0.875rem; margin-top: 0.5rem; }
.licenses-import-status--success { color: #69db7c; }
.licenses-import-status--error { color: #ff8787; }
.licenses-import-status--info { color: #74c0fc; }

.license-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    border-radius: 0.25rem;
    transition: color 0.15s, background 0.15s;
}

.license-modal-close:hover {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.08);
}

.license-modal-header { margin-bottom: 0.5rem; }
.license-modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.license-modal-desc {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

.license-modal-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 1rem 0;
}

.license-modal-body { margin-bottom: 1rem; }
.license-modal-footer {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.license-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.license-details-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.license-details-field--full { grid-column: 1 / -1; }

.license-details-field label {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}

.license-details-field p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.license-details-key {
    font-family: ui-monospace, monospace;
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.375rem;
}

.license-activity-table-wrap {
    overflow-x: auto;
    max-height: 280px;
    overflow-y: auto;
}

.license-activity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.license-activity-table th {
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.license-activity-table td {
    padding: 0.5rem 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.license-activity-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    padding: 1.5rem;
}

.license-ban-reason-wrap {
    margin-bottom: 0.5rem;
}

.license-ban-reason-wrap .create-input {
    padding-left: 0.75rem;
}

/* Revoke / Reset / Regenerate modal extras */
.license-modal-title--danger { color: #fa5252; }
.license-modal-title--danger .license-revoke-icon { color: #fa5252; flex-shrink: 0; }
.license-reset-icon, .license-regenerate-icon { color: var(--mantine-color-primary-5, #1A76FD); flex-shrink: 0; }

.license-modal-btn-danger {
    max-width: 10rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    background: #fa5252;
    color: #fff;
    border: 1px solid #e03131;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.license-modal-btn-danger:hover { background: #e03131; border-color: #c92a2a; }

.license-revoke-reason-wrap textarea.create-input {
    min-height: 80px;
    resize: vertical;
}

/* Action menu popper (ellipsis dropdown) */
/* Licenses action menu – same pattern as nav-user dropdown */
.licenses-action-menu-wrap {
    position: relative;
    display: inline-flex;
}
.licenses-action-menu-wrap .nav-user-menu {
    right: 0;
    left: auto;
    min-width: 11rem;
}
.licenses-action-menu-trigger {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.375rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.licenses-action-menu-trigger:hover {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}
.licenses-action-menu-wrap .nav-user-menu-item {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    text-align: left;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[data-mantine-color-scheme=light] .licenses-action-menu-trigger {
    border-color: #dee2e6;
    color: #495057;
}
[data-mantine-color-scheme=light] .licenses-action-menu-trigger:hover {
    background: #f8f9fa;
    color: #212529;
    border-color: #ced4da;
}
[data-mantine-color-scheme=light] .license-modal-title--danger { color: #fa5252; }
[data-mantine-color-scheme=light] .license-modal-btn-danger { background: #fa5252; border-color: #e03131; color: #fff; }

[data-mantine-color-scheme=light] .licenses-search,
[data-mantine-color-scheme=light] .licenses-select {
    background: #fff;
    border-color: #dee2e6;
    color: #212529;
}
[data-mantine-color-scheme=light] .licenses-table th {
    background: #f8f9fa;
    color: #495057;
    border-bottom-color: #dee2e6;
}
[data-mantine-color-scheme=light] .licenses-table td {
    color: #212529;
}
[data-mantine-color-scheme=light] .licenses-table tbody tr {
    border-bottom-color: #e9ecef;
}
[data-mantine-color-scheme=light] .licenses-table tbody tr:hover { background: #f8f9fa; }
[data-mantine-color-scheme=light] .licenses-stat-item { background: #f8f9fa; border-color: #dee2e6; }
[data-mantine-color-scheme=light] .licenses-stat-label { color: #212529; }
[data-mantine-color-scheme=light] .licenses-stat-sublabel { color: #495057; }
[data-mantine-color-scheme=light] .licenses-activity-item { background: #f8f9fa; border-color: #e9ecef; }
[data-mantine-color-scheme=light] .licenses-activity-item:hover { background: #f1f3f5; border-color: #dee2e6; }
[data-mantine-color-scheme=light] .licenses-activity-action { color: #212529; }
[data-mantine-color-scheme=light] .licenses-activity-meta { color: #868e96; }
[data-mantine-color-scheme=light] .licenses-activity-dot--green { background: rgba(64, 192, 87, 0.15); color: #2f9e44; }
[data-mantine-color-scheme=light] .licenses-activity-dot--red { background: rgba(250, 82, 82, 0.15); color: #e03131; }
[data-mantine-color-scheme=light] .licenses-activity-dot--blue { background: rgba(26, 118, 253, 0.15); color: #1c7ed6; }
[data-mantine-color-scheme=light] .licenses-quick-btn { background: #f8f9fa; border-color: #dee2e6; color: #495057; }
[data-mantine-color-scheme=light] .licenses-quick-btn:hover { background: #e9ecef; border-color: #ced4da; color: #212529; }
[data-mantine-color-scheme=light] .licenses-quick-pill { background: #f1f3f5; border-color: #dee2e6; color: #495057; }
[data-mantine-color-scheme=light] .licenses-quick-pill:hover { background: #e9ecef; border-color: #ced4da; color: #212529; }
[data-mantine-color-scheme=light] .licenses-quick-pill--danger { background: rgba(250, 82, 82, 0.1); border-color: rgba(250, 82, 82, 0.35); color: #e03131; }
[data-mantine-color-scheme=light] .licenses-quick-pill--danger:hover { background: rgba(250, 82, 82, 0.18); border-color: rgba(250, 82, 82, 0.5); color: #e03131; }
[data-mantine-color-scheme=light] .license-modal { background: #fff; border-color: #dee2e6; }
[data-mantine-color-scheme=light] .license-modal-title { color: #212529; }
[data-mantine-color-scheme=light] .license-modal-desc { color: #495057; }
[data-mantine-color-scheme=light] .license-modal-divider { background: #dee2e6; }
[data-mantine-color-scheme=light] .license-details-field label { color: #868e96; }
[data-mantine-color-scheme=light] .license-details-field p { color: #212529; }

/* Reseller modals */
.reseller-modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}
.reseller-modal-field:last-child { margin-bottom: 0; }
.reseller-modal-field label { font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.5); }
.reseller-projects-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 200px; overflow-y: auto; }
.reseller-project-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; }
.reseller-modal-check-wrap { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; }
.reseller-modal-empty { color: rgba(255,255,255,0.5); font-size: 0.875rem; margin: 0; }
[data-mantine-color-scheme=light] .reseller-modal-field label { color: #868e96; }
[data-mantine-color-scheme=light] .reseller-modal-empty { color: #868e96; }

/* ===== Subscriptions page ===== */
.licenses-grid--subscriptions {
  grid-template-columns: 1fr;
}
.licenses-grid--subscriptions .licenses-main--full { flex: 1; min-width: 0; }
.licenses-grid--subscriptions .licenses-main--full .licenses-top-bar { margin-left: auto; }
.licenses-grid--subscriptions .dashboard-map-header {
  padding: 0.75rem 1.5rem;
  gap: 0.5rem;
}
.licenses-grid--subscriptions .dashboard-map-header .licenses-top-bar {
  padding: 0;
  border-bottom: none;
}
.subscriptions-level-badge {
  display: inline-flex;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(26, 118, 253, 0.2);
  border: 1px solid rgba(26, 118, 253, 0.3);
  border-radius: 0.25rem;
  color: #74c0fc;
}
.subscriptions-empty {
  padding: 3rem 1.5rem;
  text-align: center;
}
.subscriptions-empty-inner { max-width: 22rem; margin: 0 auto; }
.subscriptions-empty-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 0.5rem 0;
}
.subscriptions-empty-desc {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 1.5rem 0;
}
.subscription-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}
.subscription-form-field:last-of-type { margin-bottom: 0; }
.subscription-form-field label {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}
.subscription-form-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.subscription-form-row .licenses-select { flex: 1; min-width: 0; }
.subscription-add-level-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: 9999px;
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ade80;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.subscription-add-level-btn:hover {
  background: rgba(34, 197, 94, 0.35);
  border-color: rgba(34, 197, 94, 0.5);
  color: #86efac;
}
[data-mantine-color-scheme=light] .subscriptions-level-badge {
  background: rgba(26, 118, 253, 0.12);
  border-color: rgba(26, 118, 253, 0.25);
  color: #1c7ed6;
}
[data-mantine-color-scheme=light] .subscription-form-field label { color: #868e96; }

/* ===== Account page ===== */
.account-page { padding-bottom: 1.5rem; }
.account-page .dashboard-map-card { margin-top: 0; }
.account-header { margin-bottom: 1.25rem; }
.account-tabs { margin-bottom: 1.25rem; }
.account-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 0.25rem 0;
}
.account-desc {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}
.account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
  padding: 0.25rem;
  background: rgba(45, 45, 45, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.375rem;
}
.account-tab,
.account-tab-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
}
.account-tab:hover,
.account-tab-link:hover { color: rgba(255, 255, 255, 0.95); }
.account-tab--active {
  background: var(--mantine-color-primary-6, #1A76FD);
  color: #fff;
}
.account-tab-content { display: none; }
.account-tab-content--active { display: block; }
.account-form { margin: 0; }
.account-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1.5rem;
}
@media (max-width: 64em) {
  .account-grid { grid-template-columns: 1fr; }
}
.account-main { min-width: 0; }
.account-sidebar { min-width: 0; }
.account-card .account-card-header { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.account-card .account-card-body { padding: 1.25rem; }

/* In-app notifications – full-width card */
.account-inapp-wrap {
  width: 100%;
}
.account-inapp-card {
  background: var(--mantine-color-base_dark-1, #1d1d1d);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
.account-inapp-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1.25rem;
  background: linear-gradient(135deg, rgba(26, 118, 253, 0.12) 0%, rgba(26, 118, 253, 0.04) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.account-inapp-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  background: rgba(26, 118, 253, 0.2);
  border: 1px solid rgba(26, 118, 253, 0.35);
  color: #74c0fc;
  flex-shrink: 0;
}
.account-inapp-header-text { min-width: 0; }
.account-inapp-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  letter-spacing: -0.02em;
}
.account-inapp-sub {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0.35rem 0 0 0;
  line-height: 1.45;
}
.account-inapp-body {
  padding: 0.5rem 0;
}
.account-inapp-empty {
  text-align: center;
  padding: 3rem 2rem;
}
.account-inapp-empty-icon {
  display: inline-flex;
  color: rgba(255, 255, 255, 0.2);
  margin-bottom: 1rem;
}
.account-inapp-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 0.35rem 0;
}
.account-inapp-empty-desc {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  line-height: 1.5;
  max-width: 20rem;
  margin-left: auto;
  margin-right: auto;
}
.account-inapp-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.account-inapp-item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.account-inapp-item:last-child { border-bottom: none; }
.account-inapp-item-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.account-inapp-item-link:hover {
  background: rgba(255, 255, 255, 0.04);
}
.account-inapp-item:not(:has(.account-inapp-item-link)) .account-inapp-item-content {
  padding: 1rem 1.5rem;
}
.account-inapp-item-content { flex: 1; min-width: 0; }
.account-inapp-item-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.95);
  display: block;
}
.account-inapp-item--read .account-inapp-item-title {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.account-inapp-item-message {
  margin: 0.25rem 0 0 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.45;
}
.account-inapp-item-date {
  display: block;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 0.4rem;
}
.account-inapp-item-arrow {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}
.account-inapp-item-link:hover .account-inapp-item-arrow {
  color: var(--mantine-color-primary-5, #1a76fd);
}

[data-mantine-color-scheme="light"] .account-inapp-card {
  background: #fff;
  border-color: #dee2e6;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
[data-mantine-color-scheme="light"] .account-inapp-header {
  background: linear-gradient(135deg, rgba(26, 118, 253, 0.08) 0%, rgba(26, 118, 253, 0.02) 100%);
  border-bottom-color: #e9ecef;
}
[data-mantine-color-scheme="light"] .account-inapp-header-icon {
  background: rgba(26, 118, 253, 0.12);
  border-color: rgba(26, 118, 253, 0.25);
  color: #1c7ed6;
}
[data-mantine-color-scheme="light"] .account-inapp-heading { color: #212529; }
[data-mantine-color-scheme="light"] .account-inapp-sub { color: #495057; }
[data-mantine-color-scheme="light"] .account-inapp-item { border-bottom-color: #e9ecef; }
[data-mantine-color-scheme="light"] .account-inapp-item-link:hover { background: #f8f9fa; }
[data-mantine-color-scheme="light"] .account-inapp-item-title { color: #212529; }
[data-mantine-color-scheme="light"] .account-inapp-item--read .account-inapp-item-title { color: #495057; }
[data-mantine-color-scheme="light"] .account-inapp-item-message { color: #6c757d; }
[data-mantine-color-scheme="light"] .account-inapp-item-date { color: #868e96; }
[data-mantine-color-scheme="light"] .account-inapp-item-arrow { color: #adb5bd; }
[data-mantine-color-scheme="light"] .account-inapp-item-link:hover .account-inapp-item-arrow { color: #1c7ed6; }
[data-mantine-color-scheme="light"] .account-inapp-empty-icon { color: #dee2e6; }
[data-mantine-color-scheme="light"] .account-inapp-empty-title { color: #495057; }
[data-mantine-color-scheme="light"] .account-inapp-empty-desc { color: #868e96; }

.account-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}
.account-card-desc {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0.25rem 0 0 0;
}
.account-form-field {
  margin-bottom: 1rem;
}
.account-form-field:last-of-type { margin-bottom: 0; }
.account-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}
.account-checkbox-label input { margin: 0; }
.account-form-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.35rem;
}
.account-form-field .create-input { width: 100%; box-sizing: border-box; }
.account-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 40em) {
  .account-form-row { grid-template-columns: 1fr; }
}
.account-form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.account-char-count {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 0.25rem;
  display: block;
}
.account-info-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.375rem;
}
.account-info-item:last-child { margin-bottom: 0; }
.account-info-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
}
.account-info-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.account-info-value--mono { font-family: ui-monospace, monospace; font-size: 0.8125rem; }

/* Custom ID – click to show (Account Information) */
.account-info-item--cid { align-items: flex-start; }
.account-cid-reveal {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0.25rem 0;
  margin: 0;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  background: none;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease, background 0.15s ease;
}
.account-cid-reveal:hover {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.06);
}
.account-cid-reveal .account-cid-value {
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
  user-select: all;
}
[data-mantine-color-scheme="light"] .account-cid-reveal {
  color: #212529;
}
[data-mantine-color-scheme="light"] .account-cid-reveal:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Security page – improved layout */
.security-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.security-section { margin: 0; }
.security-card .account-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  flex-wrap: wrap;
}
.security-card-header .account-card-title { margin: 0; }
.security-card-header .account-card-desc { margin: 0.25rem 0 0 0; }
.security-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  flex-shrink: 0;
}
.security-card-icon--key {
  background: rgba(26, 118, 253, 0.2);
  border: 1px solid rgba(26, 118, 253, 0.35);
  color: #74c0fc;
}
.security-card-icon--link {
  background: rgba(134, 65, 244, 0.2);
  border: 1px solid rgba(134, 65, 244, 0.35);
  color: #b197fc;
}
.security-card-icon--shield {
  background: rgba(64, 192, 87, 0.2);
  border: 1px solid rgba(64, 192, 87, 0.35);
  color: #69db7c;
}
.security-card-icon--danger {
  background: rgba(250, 82, 82, 0.2);
  border: 1px solid rgba(250, 82, 82, 0.35);
  color: #ff8787;
}

/* Password form – Change password card */
.security-password-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.security-password-fields {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
.security-password-field {
  margin-bottom: 0;
  width: 100%;
  min-width: 0;
}
.security-password-field--current {
  width: 100%;
  margin-bottom: 0;
}
.security-password-reveal {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.25s ease;
  width: 100%;
}
.security-password-reveal.security-password-reveal--open {
  max-height: 420px;
  opacity: 1;
  margin-top: 1rem;
}
.security-password-new-confirm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
  width: 100%;
}
@media (max-width: 420px) {
  .security-password-new-confirm-row {
    grid-template-columns: 1fr;
  }
}
.security-password-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.35rem;
}
[data-mantine-color-scheme=light] .security-password-label { color: #868e96; }
.security-password-form .security-input-wrap {
  position: relative;
  margin-bottom: 0;
  width: 100%;
  min-height: 2.5rem;
  display: block;
  box-sizing: border-box;
}
.security-password-form .security-password-input-row {
  height: 2.5rem;
  min-height: 2.5rem;
  position: relative;
}
.security-password-form .security-password-strength-wrap .security-input-wrap { margin-bottom: 0.5rem; }
.security-password-form .security-input {
  padding-left: 2.5rem !important;
  width: 100% !important;
  max-width: 100%;
  height: 2.5rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.95);
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.security-password-form .security-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.security-password-form .security-input:focus {
  outline: none;
  border-color: var(--mantine-color-primary-4, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
[data-mantine-color-scheme=light] .security-password-form .security-input {
  background: #fff;
  border-color: #dee2e6;
  color: #212529;
}
[data-mantine-color-scheme=light] .security-password-form .security-input::placeholder { color: #868e96; }
[data-mantine-color-scheme=light] .security-password-form .security-input:focus { border-color: #3b82f6; }
.security-password-form .security-input-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.security-password-form .security-input-icon svg {
  display: block;
  flex-shrink: 0;
  vertical-align: middle;
}
.security-password-submit {
  margin-top: 1rem;
  width: 100%;
  max-width: 100%;
  height: 2.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.375rem;
}
.security-password-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Legacy – other pages may still use these */
.security-input-wrap {
  position: relative;
  margin-bottom: 1rem;
}
.security-input-wrap:last-of-type { margin-bottom: 1.25rem; }
.security-password-strength-wrap .security-input-wrap { margin-bottom: 0.5rem; }
.security-input-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}
.security-input {
  padding-left: 2.5rem !important;
  width: 100%;
  max-width: 20rem;
}
.security-submit-btn { margin-top: 0.25rem; }

/* Password strength indicator – compact in password form */
.security-password-form .password-strength {
  margin-top: 0.35rem;
  margin-bottom: 0;
}
.security-password-form .password-strength-bars {
  display: flex;
  gap: 0.2rem;
  margin-bottom: 0.5rem;
}
.security-password-form .password-strength-bar {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  transition: background-color 0.15s ease;
}
.security-password-form .password-strength-bar[data-filled="true"] {
  background: var(--password-strength-color, #fa5252);
}
.security-password-form .password-strength-bars[data-strength="teal"] .password-strength-bar[data-filled="true"] { --password-strength-color: #40c057; }
.security-password-form .password-strength-bars[data-strength="yellow"] .password-strength-bar[data-filled="true"] { --password-strength-color: #fab005; }
.security-password-form .password-strength-bars[data-strength="red"] .password-strength-bar[data-filled="true"] { --password-strength-color: #fa5252; }
.security-password-form .password-strength-requirements {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.2rem 1rem;
}
.security-password-form .password-requirement {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}
.security-password-form .password-requirement[data-meets="true"] { color: #40c057; }
.security-password-form .password-requirement[data-meets="false"] { color: #fa5252; }
.security-password-form .password-requirement-icon { display: none; flex-shrink: 0; }
.security-password-form .password-requirement-icon--fail { color: #fa5252; }
.security-password-form .password-requirement-icon--pass { color: #40c057; }
.security-password-form .password-requirement[data-meets="true"] .password-requirement-icon--pass { display: inline-flex; }
.security-password-form .password-requirement[data-meets="false"] .password-requirement-icon--fail { display: inline-flex; }
.security-password-form .password-requirement-label { margin-left: 0; }
@media (max-width: 380px) {
  .security-password-form .password-strength-requirements { grid-template-columns: 1fr; }
}
[data-mantine-color-scheme=light] .security-password-form .password-strength-bar { background: #dee2e6; }
[data-mantine-color-scheme=light] .security-password-form .password-strength-bars[data-strength="teal"] .password-strength-bar[data-filled="true"] { --password-strength-color: #2f9e44; }
[data-mantine-color-scheme=light] .security-password-form .password-strength-bars[data-strength="yellow"] .password-strength-bar[data-filled="true"] { --password-strength-color: #f59f00; }
[data-mantine-color-scheme=light] .security-password-form .password-strength-bars[data-strength="red"] .password-strength-bar[data-filled="true"] { --password-strength-color: #e03131; }
[data-mantine-color-scheme=light] .security-password-form .password-requirement[data-meets="true"] { color: #2f9e44; }
[data-mantine-color-scheme=light] .security-password-form .password-requirement[data-meets="false"] { color: #e03131; }
[data-mantine-color-scheme=light] .security-password-form .password-requirement-icon--fail { color: #e03131; }
[data-mantine-color-scheme=light] .security-password-form .password-requirement-icon--pass { color: #2f9e44; }

/* Global password strength (e.g. other forms) */
.password-strength {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.password-strength-bars {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}
.password-strength-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  transition: background-color 0.15s ease;
}
.password-strength-bar[data-filled="true"] {
  background: var(--password-strength-color, #fa5252);
}
.password-strength-bars[data-strength="teal"] .password-strength-bar[data-filled="true"] { --password-strength-color: #40c057; }
.password-strength-bars[data-strength="yellow"] .password-strength-bar[data-filled="true"] { --password-strength-color: #fab005; }
.password-strength-bars[data-strength="red"] .password-strength-bar[data-filled="true"] { --password-strength-color: #fa5252; }
.password-strength-requirements {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.password-requirement {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
}
.password-requirement[data-meets="true"] { color: #40c057; }
.password-requirement[data-meets="false"] { color: #fa5252; }
.password-requirement-icon { display: none; flex-shrink: 0; }
.password-requirement-icon--fail { color: #fa5252; }
.password-requirement-icon--pass { color: #40c057; }
.password-requirement[data-meets="true"] .password-requirement-icon--pass { display: inline-flex; }
.password-requirement[data-meets="false"] .password-requirement-icon--fail { display: inline-flex; }
.password-requirement-label { margin-left: 0.25rem; }
[data-mantine-color-scheme=light] .password-strength-bar { background: #dee2e6; }
[data-mantine-color-scheme=light] .password-strength-bars[data-strength="teal"] .password-strength-bar[data-filled="true"] { --password-strength-color: #2f9e44; }
[data-mantine-color-scheme=light] .password-strength-bars[data-strength="yellow"] .password-strength-bar[data-filled="true"] { --password-strength-color: #f59f00; }
[data-mantine-color-scheme=light] .password-strength-bars[data-strength="red"] .password-strength-bar[data-filled="true"] { --password-strength-color: #e03131; }
[data-mantine-color-scheme=light] .password-requirement[data-meets="true"] { color: #2f9e44; }
[data-mantine-color-scheme=light] .password-requirement[data-meets="false"] { color: #e03131; }
[data-mantine-color-scheme=light] .password-requirement-icon--fail { color: #e03131; }
[data-mantine-color-scheme=light] .password-requirement-icon--pass { color: #2f9e44; }

/* Connected accounts grid */
.security-connected-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 100%;
}
@media (max-width: 720px) {
  .security-connected-grid {
    grid-template-columns: 1fr;
  }
}
.security-provider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  transition: border-color 0.2s, background 0.2s;
}
.security-provider:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
.security-provider--connected {
  border-color: rgba(64, 192, 87, 0.25);
  background: rgba(64, 192, 87, 0.06);
}
.security-provider-header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
  flex: 1;
  min-width: 0;
}
.security-provider-icon {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 0.5rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.security-provider-icon--discord {
  background: rgba(88, 101, 242, 0.25);
  color: #7289da;
}
.security-provider-icon--github {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}
.security-provider-icon--google {
  background: #fff;
  padding: 0;
  overflow: hidden;
}
.security-provider-icon--google .security-provider-svg-google {
  display: block;
  width: 24px;
  height: 24px;
}
.security-provider-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  overflow: hidden;
  min-width: 0;
}
.security-provider-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.security-provider-status {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.security-provider--connected .security-provider-status { color: #69db7c; }
.security-provider-btn {
  flex-shrink: 0;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  white-space: nowrap;
  font-weight: 500;
  border-radius: 0.375rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid;
  transition: all 0.2s;
}
.security-provider-btn--connect {
  background: rgba(64, 192, 87, 0.15);
  border-color: rgba(64, 192, 87, 0.4);
  color: #69db7c;
}
.security-provider-btn--connect:hover {
  background: rgba(64, 192, 87, 0.25);
  border-color: rgba(64, 192, 87, 0.5);
}
.security-provider-btn--disconnect {
  background: transparent;
  border-color: rgba(250, 82, 82, 0.4);
  color: #ff8787;
}
.security-provider-btn--disconnect:hover {
  background: rgba(250, 82, 82, 0.15);
}
.security-provider-btn--disabled {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
  font-size: 0.75rem;
  padding: 0.4rem 0.6rem;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.15);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.security-provider-form {
  margin: 0;
  display: inline;
}
.security-provider-avatar {
  border-radius: 50%;
  object-fit: cover;
}

/* 2FA section */
.security-2fa-header-inner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  flex: 1;
}
.security-2fa-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(64, 192, 87, 0.12);
  color: #69db7c;
  border: 1px solid rgba(64, 192, 87, 0.25);
}
.security-card--2fa .account-2fa-status--disabled ~ * .security-2fa-icon,
.security-card--2fa:not(.security-card--2fa-enabled) .security-2fa-icon {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.12);
}
.security-2fa-body {
  padding-top: 0.25rem;
}
.security-2fa-desc {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  margin: 0 0 1rem 0;
}
.security-2fa-btn {
  width: 100%;
  max-width: 100%;
  justify-content: center;
  min-height: 2.5rem;
}
.security-2fa-btn--enable {
  font-weight: 600;
}
.security-2fa-btn--disable {
  border-color: rgba(250, 82, 82, 0.4);
  color: #ff8787;
  background: rgba(250, 82, 82, 0.08);
}
.security-2fa-btn--disable:hover {
  background: rgba(250, 82, 82, 0.15);
  border-color: rgba(250, 82, 82, 0.5);
}

/* 2FA setup modal – dark default, light via [data-mantine-color-scheme="light"] */
.account-2fa-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.account-2fa-modal {
  position: relative;
  width: 100%;
  max-width: 26rem;
  max-height: calc(100vh - 2.5rem);
  overflow: auto;
}
.account-2fa-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: background 0.2s ease;
}
.account-2fa-modal-content {
  position: relative;
  background: #1a1b1e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.account-2fa-modal-inner {
  padding: 1.5rem 1.5rem 1.25rem;
}
.account-2fa-modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.account-2fa-modal-desc {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 1rem;
  line-height: 1.45;
}
.account-2fa-modal-qr-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.account-2fa-modal-qr-wrap img {
  display: block;
  width: 180px;
  height: 180px;
  object-fit: contain;
}
.account-2fa-modal-form {
  margin: 0;
}
.account-2fa-modal-field {
  margin-bottom: 1rem;
}
.account-2fa-modal-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.35rem;
}
/* PinInput-style: 6 separate digit boxes (Mantine PinInput-like) */
.account-2fa-pin {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.25rem;
}
.account-2fa-pin-cell {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  -moz-appearance: textfield;
}
.account-2fa-pin-cell::-webkit-outer-spin-button,
.account-2fa-pin-cell::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.account-2fa-pin-cell:hover {
  border-color: rgba(255, 255, 255, 0.28);
}
.account-2fa-pin-cell:focus {
  outline: none;
  border-color: #228be6;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(34, 139, 230, 0.25);
}
.account-2fa-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
  padding-top: 0.25rem;
}
.account-2fa-modal-btn {
  min-height: 2.5rem;
  padding: 0 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
  border: none;
}
.account-2fa-modal-btn--cancel {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.account-2fa-modal-btn--cancel:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}
.account-2fa-modal-btn--submit {
  background: linear-gradient(135deg, #228be6, #1c7ed6);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(34, 139, 230, 0.35);
}
.account-2fa-modal-btn--submit:hover {
  background: linear-gradient(135deg, #339af0, #228be6);
  box-shadow: 0 4px 12px rgba(34, 139, 230, 0.4);
  transform: translateY(-1px);
}

/* 2FA modal – light theme */
[data-mantine-color-scheme="light"] .account-2fa-modal-backdrop {
  background: rgba(0, 0, 0, 0.45);
}
[data-mantine-color-scheme="light"] .account-2fa-modal-content {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
}
[data-mantine-color-scheme="light"] .account-2fa-modal-title {
  color: #1a1b1e;
}
[data-mantine-color-scheme="light"] .account-2fa-modal-desc {
  color: #495057;
}
[data-mantine-color-scheme="light"] .account-2fa-modal-qr-wrap {
  background: #f8f9fa;
  border-color: rgba(0, 0, 0, 0.08);
}
[data-mantine-color-scheme="light"] .account-2fa-modal-label {
  color: #343a40;
}
[data-mantine-color-scheme="light"] .account-2fa-pin-cell {
  color: #1a1b1e;
  background: #f1f3f5;
  border-color: rgba(0, 0, 0, 0.15);
}
[data-mantine-color-scheme="light"] .account-2fa-pin-cell:hover {
  border-color: rgba(0, 0, 0, 0.25);
  background: #e9ecef;
}
[data-mantine-color-scheme="light"] .account-2fa-pin-cell:focus {
  border-color: #228be6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(34, 139, 230, 0.2);
}
[data-mantine-color-scheme="light"] .account-2fa-modal-input {
  color: #1a1b1e;
  background: #f1f3f5;
  border-color: rgba(0, 0, 0, 0.15);
}
[data-mantine-color-scheme="light"] .account-2fa-modal-input::placeholder {
  color: #868e96;
}
[data-mantine-color-scheme="light"] .account-2fa-modal-input:hover {
  border-color: rgba(0, 0, 0, 0.25);
  background: #e9ecef;
}
[data-mantine-color-scheme="light"] .account-2fa-modal-input:focus {
  border-color: #228be6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(34, 139, 230, 0.2);
}
[data-mantine-color-scheme="light"] .account-2fa-modal-btn--cancel {
  background: #f1f3f5;
  color: #495057;
  border-color: rgba(0, 0, 0, 0.12);
}
[data-mantine-color-scheme="light"] .account-2fa-modal-btn--cancel:hover {
  background: #e9ecef;
  border-color: rgba(0, 0, 0, 0.2);
  color: #212529;
}
[data-mantine-color-scheme="light"] .account-2fa-modal-content .onboarding-2fa-download-line {
  color: #495057;
}
[data-mantine-color-scheme="light"] .account-2fa-modal-content .onboarding-2fa-download-line a {
  color: #228be6;
}
[data-mantine-color-scheme="light"] .account-2fa-modal-content .onboarding-2fa-download-line a:hover {
  color: #1971c2;
}

/* Danger zone */
.security-section--danger { margin-top: 0.5rem; }
.security-card-wrap--danger {
  margin-top: 0.25rem;
}
.security-card--danger {
  border: 1px solid rgba(250, 82, 82, 0.45);
  background: linear-gradient(145deg, rgba(250, 82, 82, 0.1) 0%, rgba(250, 82, 82, 0.04) 50%, rgba(250, 82, 82, 0.02) 100%);
  border-left-width: 4px;
  border-left-color: #fa5252;
  box-shadow: 0 1px 3px rgba(250, 82, 82, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.dashboard-map-header--danger {
  padding-bottom: 0.35rem;
}
.security-danger-header-inner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  flex: 1;
}
.security-card--danger .security-danger-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 82, 82, 0.25);
  color: #ff6b6b;
  border: 1px solid rgba(250, 82, 82, 0.4);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
}
.security-danger-body {
  padding-top: 0.35rem;
}
.security-danger-block {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.security-danger-block-content {
  padding: 1.5rem 1.5rem 1.5rem 1.75rem;
  background: rgba(250, 82, 82, 0.07);
  border: 1px solid rgba(250, 82, 82, 0.25);
  border-radius: 0.625rem;
  position: relative;
  overflow: hidden;
  border-left: 3px solid #fa5252;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.security-danger-block-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(250, 82, 82, 0.5), rgba(250, 82, 82, 0.15));
}
.security-danger-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ff8787;
  background: rgba(250, 82, 82, 0.2);
  border: 1px solid rgba(250, 82, 82, 0.35);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  margin-bottom: 0.75rem;
}
.security-danger-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #ff8787;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.security-danger-desc {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
}
.security-danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.7rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, #fa5252 0%, #e03131 100%);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(250, 82, 82, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}
.security-danger-btn:hover {
  background: linear-gradient(180deg, #ff6b6b 0%, #fa5252 100%);
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 12px rgba(250, 82, 82, 0.4), 0 1px 0 rgba(255, 255, 255, 0.15) inset;
  transform: translateY(-1px);
}
.security-danger-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(250, 82, 82, 0.25);
}
.security-danger-btn:focus-visible {
  outline: 2px solid #fa5252;
  outline-offset: 2px;
}
.security-danger-btn > svg {
  flex-shrink: 0;
  display: block;
  width: 16px;
  height: 16px;
  color: currentColor;
}
.security-danger-btn > .security-danger-hold-progress {
  z-index: 0;
}
.security-danger-btn > svg,
.security-danger-btn > .security-danger-btn-text {
  position: relative;
  z-index: 1;
}

/* Delete account – hold to unlock + red flash */
.security-danger-btn-wrap {
  position: relative;
  width: 100%;
}
.security-danger-btn-wrap .security-danger-btn {
  position: relative;
  overflow: hidden;
}
.security-danger-hold-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0%;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 0 0 0.4rem 0;
  transition: width 0.05s linear;
  pointer-events: none;
}
.security-danger-hold-hint {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0.5rem 0 0 0;
}
.account-delete-flash-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: rgba(250, 82, 82, 0.08);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.account-delete-flash-overlay.is-active {
  animation: account-delete-flash-pulse 0.6s ease-in-out infinite;
}
@keyframes account-delete-flash-pulse {
  0%, 100% { opacity: 0.06; box-shadow: inset 0 0 80px rgba(250, 82, 82, 0.15); }
  50% { opacity: 0.18; box-shadow: inset 0 0 120px rgba(250, 82, 82, 0.25); }
}
.account-delete-confirm-desc { margin-bottom: 1rem; }
.account-delete-confirm-field { margin-bottom: 1rem; }
.account-delete-confirm-label { display: block; font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.35rem; color: inherit; }

/* Delete confirm modal – password/2FA inputs (dark + light) */
.unified-modal-body-inner .account-delete-confirm-form .create-input,
.unified-modal-body-inner .account-delete-confirm-form .security-input {
  width: 100%;
  box-sizing: border-box;
  height: 2.5rem;
  padding: 0 0.75rem !important;
  font-size: 0.875rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 0.95);
}
.unified-modal-body-inner .account-delete-confirm-form .create-input::placeholder,
.unified-modal-body-inner .account-delete-confirm-form .security-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.unified-modal-body-inner .account-delete-confirm-form .create-input:focus,
.unified-modal-body-inner .account-delete-confirm-form .security-input:focus {
  outline: none;
  border-color: var(--mantine-color-primary-4, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}
[data-mantine-color-scheme="light"] .unified-modal-body-inner .account-delete-confirm-form .create-input,
[data-mantine-color-scheme="light"] .unified-modal-body-inner .account-delete-confirm-form .security-input {
  background: #fff;
  border-color: #dee2e6;
  color: #212529;
}
[data-mantine-color-scheme="light"] .unified-modal-body-inner .account-delete-confirm-form .create-input::placeholder,
[data-mantine-color-scheme="light"] .unified-modal-body-inner .account-delete-confirm-form .security-input::placeholder {
  color: #868e96;
}
[data-mantine-color-scheme="light"] .unified-modal-body-inner .account-delete-confirm-form .create-input:focus,
[data-mantine-color-scheme="light"] .unified-modal-body-inner .account-delete-confirm-form .security-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
[data-mantine-color-scheme="light"] .unified-modal-body-inner .account-delete-confirm-label {
  color: #212529;
}
[data-mantine-color-scheme="light"] .unified-modal-body-inner .account-delete-confirm-desc {
  color: #495057;
}

/* Security tips list – removed from UI, keep for legacy */
.security-tips-list {
  margin: 0;
  padding: 0 0 0 1.25rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
}
.security-tips-list li { margin-bottom: 0.35rem; }
.security-tips-list li:last-child { margin-bottom: 0; }
[data-mantine-color-scheme=light] .security-tips-list { color: #495057; }

/* Legacy – keep for any remaining refs */
.account-security-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}
.account-connected-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem;
  margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.375rem;
}
.account-connected-item:last-child { margin-bottom: 0; }
.account-connected-name { font-weight: 500; color: rgba(255, 255, 255, 0.9); }
.account-connected-status { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); display: block; margin-top: 0.15rem; }
.account-btn {
  padding: 0.4rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.375rem;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.account-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); }
.account-btn--danger {
  color: #fa5252;
  border-color: rgba(250, 82, 82, 0.4);
  background: rgba(250, 82, 82, 0.1);
}
.account-btn--danger:hover { background: rgba(250, 82, 82, 0.2); }
.account-btn--success {
  color: #69db7c;
  border-color: rgba(64, 192, 87, 0.4);
  background: rgba(64, 192, 87, 0.1);
}
.account-btn--success:hover { background: rgba(64, 192, 87, 0.2); }
.account-btn--full { width: 100%; }
.account-2fa-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.account-2fa-status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
}
.account-2fa-status--enabled {
  color: #69db7c;
  background: rgba(64, 192, 87, 0.2);
  border: 1px solid rgba(64, 192, 87, 0.35);
}
.account-2fa-status--disabled {
  color: #ffe066;
  background: rgba(250, 176, 5, 0.2);
  border: 1px solid rgba(250, 176, 5, 0.35);
}
.account-card--danger { border-color: rgba(250, 82, 82, 0.3); }
.account-card-title--danger { color: #fa5252; }
.account-danger-desc {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 1rem 0;
}
.account-notify-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.account-notify-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0.1rem 0.5rem;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.account-notify-item:hover { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); }
.account-notify-item input { grid-row: 1 / -1; align-self: start; margin: 0; }
.account-notify-label { font-weight: 500; color: rgba(255, 255, 255, 0.9); font-size: 0.875rem; }
.account-notify-desc { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); }
.account-field-hint {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.25rem;
}
.account-color-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.account-color-input {
  width: 2.5rem;
  height: 2rem;
  padding: 0.15rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.25rem;
  cursor: pointer;
  background: #1d1d1d;
}

/* ===== Account UI Settings (account/ui) – match dashboard/application style ===== */
.account-ui-wrap .account-ui-card.dashboard-map-card {
  background: rgba(29, 29, 29, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
}
.account-ui-wrap .account-ui-card-header.dashboard-map-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.account-ui-wrap .account-ui-card-title.dashboard-map-title {
  font-size: 1.35rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  margin: 0;
}
.account-ui-wrap .account-ui-card-subtitle.dashboard-map-subtitle {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0.25rem 0 0 0;
}
.account-ui-wrap .account-ui-card-body.dashboard-map-body {
  padding: 1.5rem 1.5rem 2rem;
}
.account-ui-section {
  margin-bottom: 1.75rem;
}
.account-ui-section:last-of-type { margin-bottom: 0; }
.account-ui-section-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.account-ui-fields {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.account-ui-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.account-ui-field--toggle { gap: 0.25rem; }
.account-ui-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.account-ui-input-wrap {
  display: flex;
  align-items: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.account-ui-input-wrap:focus-within {
  border-color: var(--mantine-color-primary-4, #1A76FD);
  box-shadow: 0 0 0 1px var(--mantine-color-primary-4, #1A76FD);
}
.account-ui-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0.75rem;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
}
.account-ui-input {
  flex: 1;
  min-width: 0;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 0.875rem;
  font-family: inherit;
}
.account-ui-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.account-ui-hint {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  line-height: 1.4;
}
.account-ui-color-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.account-ui-color-swatch-wrap {
  flex-shrink: 0;
}
.account-ui-color-swatch-wrap .account-ui-color-input {
  width: 2.75rem;
  height: 2.5rem;
  padding: 0.2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  display: block;
}
.account-ui-color-row .account-ui-input-wrap { flex: 1; min-width: 0; }
.account-ui-switch-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
}
.account-ui-switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.account-ui-switch-track {
  position: relative;
  width: 2.5rem;
  height: 1.25rem;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  transition: background 0.2s ease;
}
.account-ui-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.account-ui-switch-input:checked + .account-ui-switch-track {
  background: var(--mantine-color-primary-6, #7950f2);
}
.account-ui-switch-input:checked + .account-ui-switch-track .account-ui-switch-thumb {
  transform: translateX(1.25rem);
}
.account-ui-switch-text { flex: 1; }
.account-ui-actions {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.account-ui-btn {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: opacity 0.2s, background 0.2s;
}
.account-ui-btn--primary {
  background: var(--mantine-color-primary-4, #1A76FD);
  color: #fff;
}
.account-ui-btn--primary:hover { opacity: 0.9; }
[data-mantine-color-scheme=light] .account-ui-wrap .account-ui-card.dashboard-map-card {
  background: #fff;
  border-color: #e2e8f0;
}
[data-mantine-color-scheme=light] .account-ui-wrap .account-ui-card-header.dashboard-map-header { border-bottom-color: #e2e8f0; }
[data-mantine-color-scheme=light] .account-ui-wrap .account-ui-card-title.dashboard-map-title { color: #212529; }
[data-mantine-color-scheme=light] .account-ui-wrap .account-ui-card-subtitle.dashboard-map-subtitle { color: #64748b; }
[data-mantine-color-scheme=light] .account-ui-section-title { color: #1e293b; border-bottom-color: #e2e8f0; }
[data-mantine-color-scheme=light] .account-ui-label { color: #475569; }
[data-mantine-color-scheme=light] .account-ui-input-wrap {
  background: #f8fafc;
  border-color: #e2e8f0;
}
[data-mantine-color-scheme=light] .account-ui-input-wrap:focus-within {
  border-color: var(--mantine-color-primary-4);
  box-shadow: 0 0 0 1px var(--mantine-color-primary-4);
}
[data-mantine-color-scheme=light] .account-ui-input-icon { color: #64748b; }
[data-mantine-color-scheme=light] .account-ui-input { color: #1e293b; }
[data-mantine-color-scheme=light] .account-ui-input::placeholder { color: #94a3b8; }
[data-mantine-color-scheme=light] .account-ui-hint { color: #64748b; }
[data-mantine-color-scheme=light] .account-ui-switch-label { color: #1e293b; }
[data-mantine-color-scheme=light] .account-ui-switch-track { background: #e2e8f0; }
[data-mantine-color-scheme=light] .account-ui-switch-input:checked + .account-ui-switch-track { background: #7950f2; }
[data-mantine-color-scheme=light] .account-ui-actions { border-top-color: #e2e8f0; }
[data-mantine-color-scheme=light] .account-ui-btn--primary { background: var(--mantine-color-primary-4, #1A76FD); color: #fff; }

[data-mantine-color-scheme=light] .account-tab { color: #495057; }
[data-mantine-color-scheme=light] .account-tab:hover { color: #212529; }
[data-mantine-color-scheme=light] .account-tabs { background: #f1f3f5; border-color: #dee2e6; }
[data-mantine-color-scheme=light] .account-form-field label { color: #868e96; }
[data-mantine-color-scheme=light] .security-card-icon--key { background: rgba(26, 118, 253, 0.12); border-color: rgba(26, 118, 253, 0.25); color: #1c7ed6; }
[data-mantine-color-scheme=light] .security-card-icon--link { background: rgba(134, 65, 244, 0.12); border-color: rgba(134, 65, 244, 0.25); color: #7950f2; }
[data-mantine-color-scheme=light] .security-card-icon--shield { background: rgba(64, 192, 87, 0.12); border-color: rgba(64, 192, 87, 0.25); color: #2f9e44; }
[data-mantine-color-scheme=light] .security-card-icon--danger { background: rgba(250, 82, 82, 0.12); border-color: rgba(250, 82, 82, 0.25); color: #e03131; }
[data-mantine-color-scheme=light] .security-input-icon { color: #868e96; }
[data-mantine-color-scheme=light] .security-provider { background: #f8f9fa; border-color: #e9ecef; }
[data-mantine-color-scheme=light] .security-provider:hover { background: #f1f3f5; border-color: #dee2e6; }
[data-mantine-color-scheme=light] .security-provider--connected { border-color: rgba(64, 192, 87, 0.35); background: rgba(64, 192, 87, 0.08); }
[data-mantine-color-scheme=light] .security-provider-name { color: #212529; }
[data-mantine-color-scheme=light] .security-provider-status { color: #868e96; }
[data-mantine-color-scheme=light] .security-provider--connected .security-provider-status { color: #2f9e44; }
[data-mantine-color-scheme=light] .security-provider-btn--connect { background: rgba(64, 192, 87, 0.12); border-color: rgba(64, 192, 87, 0.35); color: #2f9e44; }
[data-mantine-color-scheme=light] .security-provider-btn--connect:hover { background: rgba(64, 192, 87, 0.2); }
[data-mantine-color-scheme=light] .security-provider-btn--disconnect { border-color: rgba(250, 82, 82, 0.4); color: #e03131; }
[data-mantine-color-scheme=light] .security-provider-btn--disconnect:hover { background: rgba(250, 82, 82, 0.1); }
[data-mantine-color-scheme=light] .security-provider-btn--disabled { color: #868e96; border-color: #dee2e6; }
[data-mantine-color-scheme=light] .security-card--danger { border-left-color: #e03131; background: linear-gradient(135deg, rgba(250, 82, 82, 0.06) 0%, rgba(250, 82, 82, 0.02) 100%); }
[data-mantine-color-scheme=light] .security-card--danger { border-color: rgba(250, 82, 82, 0.35); background: linear-gradient(145deg, rgba(250, 82, 82, 0.06) 0%, rgba(250, 82, 82, 0.02) 100%); }
[data-mantine-color-scheme=light] .security-danger-block-content { background: rgba(250, 82, 82, 0.05); border-color: rgba(250, 82, 82, 0.22); border-left-color: #e03131; }
[data-mantine-color-scheme=light] .security-danger-block-content::before { background: linear-gradient(90deg, rgba(250, 82, 82, 0.4), rgba(250, 82, 82, 0.1)); }
[data-mantine-color-scheme=light] .security-card--danger .security-danger-icon { background: rgba(250, 82, 82, 0.18); color: #e03131; border-color: rgba(250, 82, 82, 0.35); }
[data-mantine-color-scheme=light] .security-danger-badge { color: #e03131; background: rgba(250, 82, 82, 0.12); border-color: rgba(250, 82, 82, 0.28); }
[data-mantine-color-scheme=light] .security-danger-title { color: #e03131; }
[data-mantine-color-scheme=light] .security-danger-desc { color: #495057; }
[data-mantine-color-scheme=light] .security-danger-btn { background: linear-gradient(180deg, #fa5252 0%, #e03131 100%); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 1px 2px rgba(250, 82, 82, 0.25); }
[data-mantine-color-scheme=light] .security-danger-btn:hover { background: linear-gradient(180deg, #ff6b6b 0%, #fa5252 100%); box-shadow: 0 2px 8px rgba(250, 82, 82, 0.35); }

/* dashboard-map desc (used in security and elsewhere) */
.dashboard-map-title-wrap .dashboard-map-desc {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0.25rem 0 0 0;
  line-height: 1.4;
}
[data-mantine-color-scheme=light] .dashboard-map-title-wrap .dashboard-map-desc { color: #6c757d; }

/* Security – grid layout (sessions left, rest right) */
.security-grid {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 1.5rem;
  align-items: start;
}
.security-grid--no-password {
  grid-template-columns: minmax(280px, 340px) 1fr;
}
.security-grid-right {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  min-width: 0;
}
.security-card-wrap {
  min-width: 0;
}
.security-card-wrap + .security-card-wrap {
  margin-top: 0;
}
/* Security cards use dashboard-map-card (match create/blacklist/dashboard) */
.security-grid .dashboard-map-card.security-card {
  margin-top: 0;
  height: 100%;
}
.security-grid .dashboard-map-card.security-card .dashboard-map-body {
  padding: 1.25rem 1.5rem;
}
.security-card-wrap--sessions .dashboard-map-card { min-height: 0; }
.security-card-wrap--password .dashboard-map-card .dashboard-map-body { padding: 1.25rem 1.5rem; width: 100%; overflow: visible; }
.security-card-wrap--password .dashboard-map-card { width: 100%; }
.security-card-wrap--2fa .dashboard-map-body,
.security-card-wrap--danger .dashboard-map-body { padding: 1.25rem 1.5rem; }
.dashboard-map-header--2fa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.dashboard-map-header--2fa .account-2fa-status { flex-shrink: 0; }
.dashboard-map-title--danger { color: #fa5252; }
[data-mantine-color-scheme=light] .dashboard-map-title--danger { color: #e03131; }

@media (max-width: 900px) {
  .security-grid,
  .security-grid--no-password {
    grid-template-columns: 1fr;
  }
  .security-grid .dashboard-map-card.security-card .dashboard-map-body {
    padding: 1rem 1.25rem;
  }
}
.security-card--sessions .account-card-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.security-card-icon--sessions {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: #3b82f6;
}
/* Sessions summary (e.g. "3 active · 5 past") */
.security-sessions-summary {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 0.6rem 0;
}
[data-mantine-color-scheme=light] .security-sessions-summary { color: #868e96; }

.security-sessions-list-wrap {
  position: relative;
}
.security-sessions-list-wrap[data-max-visible] .security-sessions-list {
  max-height: calc((2.25rem + 0.35rem) * 5);
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.security-sessions-list-wrap.security-sessions-list-wrap--expanded[data-max-visible] .security-sessions-list {
  max-height: none;
}
.security-sessions-more-btn {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.security-sessions-more-btn:hover {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
}
[data-mantine-color-scheme=light] .security-sessions-more-btn { color: #495057; }
[data-mantine-color-scheme=light] .security-sessions-more-btn:hover { color: #2563eb; background: rgba(37, 99, 235, 0.08); }

.security-sessions-heading {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 0.35rem 0;
}
.security-sessions-heading-hint {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}
.security-sessions-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.security-session-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 0.35rem;
  min-height: 2.25rem;
}
.security-session-item:last-child { margin-bottom: 0; }
.security-session-item--current {
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.08);
}
.security-session-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.security-session-info--line {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
}
.security-session-device {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.security-session-info--line .security-session-time {
  font-size: 0.6875rem;
  flex-shrink: 0;
}
.security-session-time {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}
.security-session-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #3b82f6;
  margin-left: 0.35rem;
}
.security-sessions-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
@media (max-width: 480px) {
  .security-sessions-actions {
    flex-direction: column;
  }
  .security-sessions-actions .create-button { width: 100%; justify-content: center; }
}
.security-session-btn {
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.security-session-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.security-session-btn--logout-all {
  border-color: rgba(250, 82, 82, 0.35);
  color: #fa5252;
  background: rgba(250, 82, 82, 0.08);
}
.security-session-btn--logout-all:hover {
  background: rgba(250, 82, 82, 0.15);
  border-color: rgba(250, 82, 82, 0.5);
}
.security-session-btn--primary {
  background: #3b82f6;
  border-color: #2563eb;
  color: #fff;
}
.security-session-btn--primary:hover { background: #2563eb; }
.security-session-btn--secondary {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
}
.security-session-remove {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.security-session-remove:hover {
  color: #fa5252;
  background: rgba(250, 82, 82, 0.1);
}
.security-session-checkbox-wrap {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.security-session-checkbox-wrap input { margin: 0; }
.security-sessions-empty {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  padding: 0.35rem 0;
}
.security-sessions-section { margin-top: 0.6rem; }
.security-sessions-section:first-of-type { margin-top: 0; }
.security-sessions-history-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.security-session-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  user-select: none;
}
.security-session-checkbox-label .create-checkbox {
  margin: 0;
  flex-shrink: 0;
}
[data-mantine-color-scheme=light] .security-session-checkbox-label {
  color: #212529;
}
.security-sessions-history-actions .security-session-btn--remove-selected:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Sessions password modal */
.security-sessions-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.security-sessions-modal-overlay[hidden] { display: none; }
.security-sessions-modal {
  background: var(--mantine-color-dark-6, #25262b);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  padding: 1.5rem;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.security-sessions-modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.35rem 0;
  color: #fff;
}
.security-sessions-modal-desc {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 1rem 0;
}
.security-sessions-modal #sessions-password-input {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
}
.security-sessions-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
[data-mantine-color-scheme=light] .security-card-icon--sessions { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.25); color: #1d4ed8; }
[data-mantine-color-scheme=light] .security-session-item { background: #f8f9fa; border-color: #e9ecef; }
[data-mantine-color-scheme=light] .security-session-item--current { border-color: rgba(59, 130, 246, 0.4); background: rgba(59, 130, 246, 0.08); }
[data-mantine-color-scheme=light] .security-session-device { color: #212529; }
[data-mantine-color-scheme=light] .security-session-time { color: #868e96; }
[data-mantine-color-scheme=light] .security-sessions-modal { background: #fff; border-color: #dee2e6; }
[data-mantine-color-scheme=light] .security-sessions-modal-title { color: #212529; }
[data-mantine-color-scheme=light] .security-sessions-modal-desc { color: #495057; }


/* File Delivery page */
.files-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.files-main { display: flex; flex-direction: column; gap: 1.5rem; }
.files-header { margin-bottom: 0.5rem; }
.files-title { font-size: 1.5rem; }
.files-subtitle {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0.25rem 0 0.5rem 0;
}
.files-project-indicator {
  font-size: 0.8125rem;
  color: rgba(139, 92, 246, 0.9);
  margin: 0;
}
/* Add Download Link – Mantine-style card */
.files-mantine-card {
  background: var(--mantine-color-dark-6, #25262b);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--mantine-radius-md, 0.5rem);
  padding: 1.5rem 1.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.files-add-card-header {
  margin-bottom: 1.25rem;
}
.files-add-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--mantine-color-white, #fff);
  margin: 0 0 0.25rem 0;
}
.files-add-card-description {
  font-size: 0.875rem;
  color: var(--mantine-color-dimmed, rgba(255, 255, 255, 0.6));
  margin: 0;
  line-height: 1.45;
}
/* Files Stepper (Mantine-style) */
.files-stepper { margin-top: 0.5rem; }
.files-stepper-steps {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  margin-bottom: 1.5rem;
  gap: 0;
}
.files-stepper-step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  text-align: left;
  color: inherit;
  transition: opacity 0.15s ease;
}
.files-stepper-step:hover:not(:disabled) { opacity: 0.9; }
.files-stepper-step:disabled { cursor: default; opacity: 0.6; }
.files-stepper-step-icon {
  position: relative;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: var(--mantine-color-dark-7, #1e1e24);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mantine-color-dimmed, rgba(255, 255, 255, 0.6));
}
.files-stepper-step--active .files-stepper-step-icon {
  border-color: var(--mantine-color-primary-6, #7950f2);
  background: rgba(121, 80, 242, 0.15);
  color: var(--mantine-color-primary-6, #7950f2);
}
.files-stepper-step--completed .files-stepper-step-icon {
  border-color: var(--mantine-color-primary-6, #7950f2);
  background: var(--mantine-color-primary-6, #7950f2);
  color: #fff;
}
.files-stepper-step-number,
.files-stepper-step-check,
.files-stepper-step-loader {
  display: block;
}
.files-stepper-step-check {
  display: none;
  width: 18px;
  height: 18px;
}
.files-stepper-step--completed .files-stepper-step-number { display: none; }
.files-stepper-step--completed .files-stepper-step-check { display: block; }
.files-stepper-step-loader {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: files-stepper-spin 0.7s linear infinite;
}
.files-stepper-step--loading .files-stepper-step-number,
.files-stepper-step--loading .files-stepper-step-check { display: none; }
.files-stepper-step--loading .files-stepper-step-loader { display: block; }
@keyframes files-stepper-spin {
  to { transform: rotate(360deg); }
}
.files-stepper-step-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-top: 0.15rem;
}
.files-stepper-step-label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--mantine-color-white, #fff);
}
.files-stepper-step-description {
  font-size: 0.8125rem;
  color: var(--mantine-color-dimmed, rgba(255, 255, 255, 0.55));
}
.files-stepper-separator {
  flex: 1;
  min-width: 1rem;
  align-self: center;
  margin-top: 1rem;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.files-stepper-content { margin-bottom: 1.25rem; }
.files-stepper-panel {
  display: none;
}
.files-stepper-panel--active {
  display: block;
  animation: files-stepper-fade 0.2s ease;
}
@keyframes files-stepper-fade {
  from { opacity: 0; } to { opacity: 1; }
}
.files-stepper-review { padding: 0.5rem 0; }
.files-stepper-review-hint {
  font-size: 0.875rem;
  color: var(--mantine-color-dimmed, rgba(255, 255, 255, 0.6));
  margin: 0;
}
.files-stepper-review-summary {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--mantine-radius-sm, 0.375rem);
  font-size: 0.8125rem;
  color: var(--mantine-color-dimmed, rgba(255, 255, 255, 0.7));
}
.files-stepper-review-summary strong { color: var(--mantine-color-white, #fff); }
.files-stepper-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.files-stepper-actions-right {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.files-direct-url-wrap {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.25s ease-out, opacity 0.2s ease-out;
}
.files-direct-url-wrap--open {
  max-height: 20rem;
  opacity: 1;
  transition: max-height 0.3s ease-in, opacity 0.2s ease-in;
}
.files-stepper-back,
.files-stepper-next {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  border-radius: var(--mantine-radius-sm, 0.375rem);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.files-stepper-back {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--mantine-color-white, #fff);
}
.files-stepper-back:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.3);
}
.files-stepper-back:disabled { cursor: not-allowed; opacity: 0.5; }
.files-stepper-next {
  background: var(--mantine-color-primary-6, #7950f2);
  border: none;
  color: #fff;
}
.files-stepper-next:hover:not(:disabled) { background: var(--mantine-color-primary-5, #845ef7); }
.files-stepper-next:disabled { cursor: not-allowed; opacity: 0.6; }
[data-mantine-color-scheme=light] .files-stepper-step-icon {
  border-color: #dee2e6;
  background: #f8f9fa;
  color: #868e96;
}
[data-mantine-color-scheme=light] .files-stepper-step--active .files-stepper-step-icon {
  border-color: #7950f2;
  background: rgba(121, 80, 242, 0.1);
  color: #7950f2;
}
[data-mantine-color-scheme=light] .files-stepper-step--completed .files-stepper-step-icon {
  border-color: #7950f2;
  background: #7950f2;
  color: #fff;
}
[data-mantine-color-scheme=light] .files-stepper-step-label { color: #212529; }
[data-mantine-color-scheme=light] .files-stepper-step-description { color: #868e96; }
[data-mantine-color-scheme=light] .files-stepper-separator { background: #dee2e6; }
[data-mantine-color-scheme=light] .files-stepper-review-hint { color: #868e96; }
[data-mantine-color-scheme=light] .files-stepper-review-summary {
  background: #f8f9fa;
  color: #495057;
}
[data-mantine-color-scheme=light] .files-stepper-review-summary strong { color: #212529; }
[data-mantine-color-scheme=light] .files-stepper-back {
  border-color: #dee2e6;
  color: #212529;
}
[data-mantine-color-scheme=light] .files-stepper-back:hover:not(:disabled) {
  background: #f8f9fa;
  border-color: #adb5bd;
}
.files-add-form { margin: 0; }
.files-mantine-inputs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.files-mantine-inputs:has(.files-direct-url-wrap--open) {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) {
  .files-mantine-inputs:has(.files-direct-url-wrap--open) {
    grid-template-columns: 1fr;
  }
}
.files-mantine-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.files-mantine-field--full { grid-column: 1 / -1; }
.files-mantine-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--mantine-color-white, #fff);
}
.files-add-card .authguards_input-wrapper { width: 100%; }
.files-mantine-input {
  --input-height: 2.25rem;
  --input-left-section-width: 2.25rem;
  --input-left-section-size: 2.25rem;
  --input-padding-inline-start: 2.25rem;
  background: var(--mantine-color-dark-7, #1e1e24);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--mantine-radius-sm, 0.375rem);
  min-height: 2.25rem;
}
.files-mantine-input:focus-within {
  border-color: var(--mantine-color-primary-6, #7950f2);
  box-shadow: 0 0 0 1px var(--mantine-color-primary-6, #7950f2);
}
.files-input-icon {
  color: var(--mantine-color-dimmed, rgba(255, 255, 255, 0.5));
}
.files-mantine-input-field {
  background: transparent !important;
  border: none !important;
  color: var(--mantine-color-white, #fff) !important;
  font-size: 0.875rem;
}
.files-mantine-input-field::placeholder {
  color: var(--mantine-color-dimmed, rgba(255, 255, 255, 0.45));
}
.files-mantine-description {
  font-size: 0.75rem;
  color: var(--mantine-color-dimmed, rgba(255, 255, 255, 0.55));
  margin-top: 0.25rem;
  line-height: 1.4;
}
/* Mantine Switch */
.files-mantine-switch-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.files-mantine-switch-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--mantine-color-white, #fff);
}
.files-mantine-switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.files-mantine-switch-track {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  transition: background 0.2s ease;
}
.files-mantine-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.files-mantine-switch-input:checked + .files-mantine-switch-track {
  background: var(--mantine-color-primary-6, #7950f2);
}
.files-mantine-switch-input:checked + .files-mantine-switch-track .files-mantine-switch-thumb {
  transform: translateX(1.05rem);
}
.files-mantine-switch-label-text { flex: 1; }
/* Mantine Button filled */
.files-mantine-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--mantine-color-primary-6, #7950f2);
  border: none;
  border-radius: var(--mantine-radius-sm, 0.375rem);
  cursor: pointer;
  transition: background 0.15s ease, filter 0.15s ease;
}
.files-mantine-submit:hover {
  background: var(--mantine-color-primary-5, #845ef7);
}
.files-mantine-submit:active { filter: brightness(0.95); }
.mantine-Button-section { display: flex; align-items: center; }
.files-top-bar { margin-bottom: 0; }
/* Existing Links header: title | filter (middle) | Total right */
.files-list-card .dashboard-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.files-list-header .dashboard-map-title-wrap { flex: 0 0 auto; }
.files-filter-combined {
  display: inline-flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  max-width: 42rem;
  margin: 0 1rem;
  height: 2.25rem;
  background: rgba(45, 45, 45, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.files-filter-combined:hover {
  border-color: rgba(255, 255, 255, 0.12);
}
.files-filter-combined:focus-within {
  border-color: rgba(26, 118, 253, 0.5);
  box-shadow: 0 0 0 1px rgba(26, 118, 253, 0.2);
}
.files-filter-search-wrap {
  position: relative;
  flex: 1;
  min-width: 18rem;
  display: flex;
  align-items: center;
  border-radius: 9999px 0 0 9999px;
}
.files-filter-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
  pointer-events: none;
}
.files-filter-search {
  width: 100%;
  height: 100%;
  padding: 0 0.75rem 0 2.5rem;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.95);
  font-family: inherit;
}
.files-filter-search::placeholder { color: rgba(255, 255, 255, 0.45); }
.files-filter-search:focus { outline: none; }
.files-filter-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
  align-self: stretch;
  flex-shrink: 0;
}
.files-list-header-right {
  flex: 0 0 auto;
  margin-left: auto;
}
.files-filter-select {
  flex: 0 0 auto;
  min-width: 6.5rem;
  padding: 0 2rem 0 0.75rem;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
  font-family: inherit;
  cursor: pointer;
  border-radius: 0;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
}
.files-filter-auth-select { border-radius: 0 9999px 9999px 0; }
.files-filter-select:focus { outline: none; }
.files-filter-select option { background: #1a1a1a; color: #fff; }
[data-mantine-color-scheme=light] .files-filter-combined {
  background: #fff;
  border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .files-filter-combined:hover { border-color: #adb5bd; }
[data-mantine-color-scheme=light] .files-filter-combined:focus-within {
  border-color: #7950f2;
  box-shadow: 0 0 0 1px rgba(121, 80, 242, 0.2);
}
[data-mantine-color-scheme=light] .files-filter-search-icon { color: #868e96; }
[data-mantine-color-scheme=light] .files-filter-search { color: #212529; }
[data-mantine-color-scheme=light] .files-filter-search::placeholder { color: #adb5bd; }
[data-mantine-color-scheme=light] .files-filter-divider { background: #dee2e6; }
[data-mantine-color-scheme=light] .files-filter-select { color: #212529; }
.files-empty {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  padding: 1rem 0;
}
.files-table .files-project-cell { display: flex; flex-direction: column; gap: 0.1rem; }
.files-table .files-project-id { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); }
.files-file-id {
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
  padding: 0.2rem 0.4rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0.25rem;
}
.files-url-link {
  color: rgba(139, 92, 246, 0.95);
  text-decoration: none;
  max-width: 220px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.files-url-link:hover { text-decoration: underline; }
.files-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.files-regen-btn,
.files-delete-btn { font-size: 0.75rem; }
.files-no-projects-title { font-size: 1.125rem; margin: 0 0 0.5rem 0; }
.files-no-projects-text { font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); margin: 0; }
[data-mantine-color-scheme=light] .files-mantine-card {
  background: #fff;
  border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .files-add-card-title { color: #212529; }
[data-mantine-color-scheme=light] .files-add-card-description { color: #868e96; }
[data-mantine-color-scheme=light] .files-mantine-label { color: #212529; }
[data-mantine-color-scheme=light] .files-mantine-input {
  background: #f8f9fa !important;
  border-color: #dee2e6 !important;
}
[data-mantine-color-scheme=light] .files-mantine-input:focus-within {
  border-color: #7950f2;
  box-shadow: 0 0 0 1px #7950f2;
}
[data-mantine-color-scheme=light] .files-input-icon { color: #868e96; }
[data-mantine-color-scheme=light] .files-mantine-input-field { color: #212529 !important; }
[data-mantine-color-scheme=light] .files-mantine-input-field::placeholder { color: #adb5bd; }
[data-mantine-color-scheme=light] .files-mantine-description { color: #868e96; }
[data-mantine-color-scheme=light] .files-mantine-switch-label { color: #212529; }
[data-mantine-color-scheme=light] .files-mantine-switch-track { background: #e9ecef; }
[data-mantine-color-scheme=light] .files-mantine-switch-input:checked + .files-mantine-switch-track { background: #7950f2; }
[data-mantine-color-scheme=light] .files-mantine-submit { background: #7950f2; color: #fff; }
[data-mantine-color-scheme=light] .files-mantine-submit:hover { background: #7048e8; }
[data-mantine-color-scheme=light] .files-empty { color: #868e96; }
[data-mantine-color-scheme=light] .files-url-link { color: #7950f2; }

/* ===== View-only banner (read-only mode for Tester/Basic) ===== */
.view-only-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  background: rgba(250, 176, 5, 0.08);
  border: 1px solid rgba(250, 176, 5, 0.2);
  border-radius: 6px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.85);
}
.view-only-banner-icon {
  flex-shrink: 0;
  color: var(--mantine-color-yellow-5, #fab005);
}
.view-only-banner-text {
  line-height: 1.4;
}
.view-only-banner-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--mantine-color-primary-4, #1A76FD);
  text-decoration: underline;
  cursor: pointer;
  text-underline-offset: 2px;
}
.view-only-banner-link:hover {
  color: var(--mantine-color-primary-3, #339af0);
}
.view-only-banner--inline {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
[data-mantine-color-scheme=light] .view-only-banner {
  background: rgba(234, 179, 8, 0.08);
  border-color: rgba(234, 179, 8, 0.25);
  color: #713f12;
}
[data-mantine-color-scheme=light] .view-only-banner-icon { color: #ca8a04; }
[data-mantine-color-scheme=light] .view-only-banner-link { color: var(--mantine-color-blue-6, #228be6); }
[data-mantine-color-scheme=light] .view-only-banner-link:hover { color: var(--mantine-color-blue-5, #339af0); }