/**
 * 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] .licenses-col-menu { background: #fff; border-color: #dee2e6; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); color: #212529; }
[data-mantine-color-scheme=light] .licenses-col-opt { color: #495057; }
[data-mantine-color-scheme=light] .licenses-col-opt:hover { background: #f1f3f5; color: #212529; }
[data-mantine-color-scheme=light] .nav-user-submenu { background: #fff; border-color: #dee2e6; }
[data-mantine-color-scheme=light] .nav-user-submenu .nav-user-menu-item { color: #212529; }
[data-mantine-color-scheme=light] .nav-user-submenu .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-live-monitor-dot--offline { background: rgba(0, 0, 0, 0.35); }
[data-mantine-color-scheme=light] .dashboard-live-monitor-stats {
  background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%);
  border-color: #dee2e6;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 6px 18px rgba(0, 0, 0, 0.06);
}
[data-mantine-color-scheme=light] .dashboard-live-monitor-stats-time { color: #6c757d; }
[data-mantine-color-scheme=light] .dashboard-live-monitor-stats-divider { background: #dee2e6; }
[data-mantine-color-scheme=light] .dashboard-live-monitor-stats-count {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
  color: #15803d;
}
[data-mantine-color-scheme=light] .dashboard-live-monitor-refresh {
  background: #f8f9fa;
  border-color: #dee2e6;
  color: #495057;
}
[data-mantine-color-scheme=light] .dashboard-live-monitor-refresh:hover {
  background: #fff;
  border-color: #adb5bd;
  color: #212529;
}
[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;
}

/* ===== Bottom-left cluster: floating user pill ===== */
.nav-dashboard-float-cluster {
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  left: max(1rem, env(safe-area-inset-left, 0px));
  right: auto;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.5rem;
  flex: 0 0 auto;
  padding-left: clamp(10px, 2.75vw, 22px);
  padding-right: 0;
  padding-top: 0.35rem;
  box-sizing: border-box;
  pointer-events: none;
  overflow: visible;
}

/* Re-enable clicks on interactive children only */
.nav-dashboard-float-cluster > * {
  pointer-events: auto;
}

.nav-dashboard-float-cluster .nav-user-float-wrap {
  position: relative;
  z-index: 2;
  bottom: auto;
  left: auto;
  right: auto;
}

/* ===== User account — floating bottom left (cluster anchor: .nav-dashboard-float-cluster) ===== */
.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);
}

.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;
  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;
}

.nav-dashboard-float-cluster .nav-user-menu {
  left: 0;
  right: auto;
}

/* 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;
}

/* Submenu (Subscription) – hover popper/flyout like nav-dropdown-submenu (Custom Panel) */
.nav-user-menu-item--has-submenu {
  position: relative;
  cursor: default;
  padding-right: 2rem;
}
.nav-user-menu-item--has-submenu .nav-user-menu-chevron {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.7;
  flex-shrink: 0;
}
.nav-user-submenu {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 0.15rem;
  min-width: 11rem;
  padding: 0.35rem;
  background: rgba(29, 29, 29, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  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 ease;
}
.nav-user-menu-item--has-submenu:hover .nav-user-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.nav-user-submenu .nav-user-menu-item {
  padding: 0.4rem 0.65rem;
  font-size: 0.8125rem;
}
/* Reseller/action menu: scroll wrapper so outer menu can have overflow:visible for submenu popper */
.nav-user-menu--submenu-poppers {
  overflow: visible;
}
.nav-user-menu--submenu-poppers .nav-user-menu-scroll {
  overflow-y: auto;
  max-height: min(70vh, 400px);
}
/* Submenu opens to LEFT (burger near right edge, avoids viewport overflow) */
.licenses-action-menu-wrap .nav-user-submenu {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 0.05rem;
  transform: translateX(4px);
}
.licenses-action-menu-wrap .nav-user-menu-item--has-submenu:hover .nav-user-submenu {
  transform: translateX(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;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.nav-mobile-brand-group {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
  flex: 1;
}
.nav-mobile-brand-group--has-meta {
  align-items: center;
}
.nav-mobile-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex-shrink: 0;
  border-radius: 0.5rem;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.nav-mobile-logo:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.nav-mobile-logo--subacc-bg {
  padding: 0.3rem 0.5rem;
  border-radius: 0.55rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 8px -3px rgba(0, 0, 0, 0.4);
}
.nav-mobile-brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1;
}
.nav-mobile-brand-text--panel {
  padding: 0.4rem 0.65rem 0.45rem;
  border-radius: 0.65rem;
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 14px -6px rgba(0, 0, 0, 0.4);
}
.nav-mobile-brand-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
  min-width: 0;
}
.nav-mobile-brand-name {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.nav-mobile-brand-desc {
  font-size: 0.6875rem;
  line-height: 1.35;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.52);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.nav-mobile-brand-live {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  flex-shrink: 0;
  padding: 0.14rem 0.42rem 0.14rem 0.34rem;
  border-radius: 9999px;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--nav-live, #34d399);
  border: 1px solid rgba(52, 211, 153, 0.38);
  background: rgba(52, 211, 153, 0.12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .nav-mobile-brand-live {
    border-color: color-mix(in srgb, var(--nav-live, #34d399) 42%, transparent);
    background: color-mix(in srgb, var(--nav-live, #34d399) 17%, transparent);
  }
}
.nav-mobile-brand-live-text {
  max-width: 5.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-mobile-logo img { height: auto; display: block; }
.nav-mobile-brand-live .nav-site-brand__live-icon-svg {
  width: 13px;
  height: 13px;
}
.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-brand-name { color: #0f172a; text-shadow: none; }
[data-mantine-color-scheme=light] .nav-mobile-brand-desc { color: #64748b; }
[data-mantine-color-scheme=light] .nav-mobile-brand-text--panel {
  background: linear-gradient(155deg, #ffffff 0%, #f8fafc 100%);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 2px 10px -4px rgba(15, 23, 42, 0.12);
}
[data-mantine-color-scheme=light] .nav-mobile-logo--subacc-bg {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 8px -2px rgba(15, 23, 42, 0.12);
}
[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 {
  --heatmap-cell: 6px;
  --heatmap-gap: 1px;
  max-height: 90px;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.dashboard-heatmap-wrap--compact .dashboard-heatmap-cell {
  width: var(--heatmap-cell, 6px);
  height: calc(var(--heatmap-cell, 6px) * 1.15);
  min-width: var(--heatmap-cell, 6px);
  min-height: calc(var(--heatmap-cell, 6px) * 1.15);
}
.dashboard-heatmap-wrap--compact .dashboard-heatmap-row {
  gap: var(--heatmap-gap, 1px);
}
.dashboard-heatmap-wrap--compact .dashboard-heatmap-grid {
  gap: var(--heatmap-gap, 1px);
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}
.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;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.5);
}
.dashboard-heatmap-range-hint {
  flex: 0 0 100%;
  text-align: center;
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 0.1rem;
}
[data-mantine-color-scheme=light] .dashboard-heatmap-range-hint {
  color: #868e96;
}
.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;
  /* ~3 rows visible; list holds up to 25 items */
  max-height: 11.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.25rem;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.dashboard-activity::-webkit-scrollbar {
  width: 6px;
}
.dashboard-activity::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}
[data-mantine-color-scheme=light] .dashboard-activity::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}

.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;
  /* Show ~2 rows; scroll for up to 14 total */
  max-height: calc(2 * (1rem + 1.125rem) + 0.5rem);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.35rem;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.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: center;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-live-monitor-header-right {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  margin-left: auto;
}

.dashboard-live-monitor-stats {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.75rem 0.4375rem 0.875rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.625rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 8px 24px rgba(0, 0, 0, 0.25);
}

.dashboard-live-monitor-stats-time {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.52);
  letter-spacing: 0.02em;
  white-space: nowrap;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-live-monitor-stats-divider {
  width: 1px;
  height: 0.875rem;
  background: rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
  border-radius: 1px;
}

.dashboard-live-monitor-stats-count {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  padding: 0.1875rem 0.5625rem;
  border-radius: 0.4375rem;
  background: rgba(74, 222, 128, 0.14);
  border: 1px solid rgba(74, 222, 128, 0.28);
  color: #86efac;
  line-height: 1.25;
}

.dashboard-live-monitor-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.625rem;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease,
    box-shadow 0.15s ease;
  flex-shrink: 0;
}

.dashboard-live-monitor-refresh:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.dashboard-live-monitor-refresh:active {
  transform: scale(0.96);
}

.dashboard-live-monitor-refresh:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.65);
  outline-offset: 2px;
}

@media (max-width: 36rem) {
  .dashboard-live-monitor-header-right {
    width: 100%;
    justify-content: flex-end;
  }
  .dashboard-live-monitor-stats {
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
  }
}

.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;
  flex-wrap: wrap;
}

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

.dashboard-live-monitor-dot--connected {
  background: #4ade80;
}

.dashboard-live-monitor-dot--disconnected {
  background: #f87171;
}

.dashboard-live-monitor-dot--reconnecting {
  background: #fbbf24;
  animation: dashboard-live-monitor-pulse 1.2s ease-in-out infinite;
}

.dashboard-live-monitor-dot--offline {
  background: rgba(255, 255, 255, 0.4);
}

@keyframes dashboard-live-monitor-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.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;
  position: relative;
}

.dashboard-live-monitor-loading {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 1;
}

.dashboard-live-monitor-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.75rem 0 0 -0.75rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #4ade80;
  border-radius: 50%;
  animation: dashboard-live-monitor-spin 0.7s linear infinite;
}

.dashboard-live-monitor-loading--active {
  display: block;
}

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

.dashboard-live-monitor-table-wrap--loading .dashboard-live-monitor-table {
  opacity: 0.85;
}

.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-status--warn {
  color: #fbbf24 !important;
}

[data-mantine-color-scheme=light] .dashboard-status--warn {
  color: #d97706 !important;
}

.dashboard-live-monitor-table td:nth-child(3) {
  max-width: 12rem;
  word-break: break-word;
}

.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 + optional sub-account brand (reseller_subacc_branding) */
.nav-site-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex-shrink: 1;
}
.nav-site-brand--has-meta {
  gap: 0.875rem;
}
.nav-site-brand__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex-shrink: 0;
  border-radius: 0.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.nav-site-brand__logo:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.nav-site-brand__logo:focus-visible {
  outline: 2px solid rgba(129, 140, 248, 0.65);
  outline-offset: 3px;
}
.nav-site-brand__logo.site-logo--subacc-bg {
  padding: 0.35rem 0.6rem;
  border-radius: 0.65rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 2px 10px -3px rgba(0, 0, 0, 0.45);
}
.nav-site-brand__meta {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
  max-width: min(22rem, 38vw);
  padding: 0.45rem 0.75rem 0.5rem;
  border-radius: 0.7rem;
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.025) 55%,
    rgba(0, 0, 0, 0.08) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 2px 16px -6px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.nav-site-brand__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.6rem;
  min-width: 0;
}
.nav-site-brand__name {
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.97);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(14rem, 28vw);
}
.nav-site-brand__desc {
  font-size: 0.7rem;
  line-height: 1.35;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.52);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(19rem, 36vw);
  letter-spacing: 0.01em;
}
.nav-site-brand__live {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  flex-shrink: 0;
  padding: 0.18rem 0.5rem 0.18rem 0.4rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--nav-live, #34d399);
  border: 1px solid rgba(52, 211, 153, 0.38);
  background: rgba(52, 211, 153, 0.12);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .nav-site-brand__live {
    border-color: color-mix(in srgb, var(--nav-live, #34d399) 42%, transparent);
    background: color-mix(in srgb, var(--nav-live, #34d399) 17%, transparent);
  }
}
.nav-site-brand__live-text {
  max-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-site-brand__live-icon-svg {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  opacity: 0.95;
}
[data-mantine-color-scheme="light"] .nav-site-brand__meta {
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 250, 252, 0.88) 100%
  );
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow:
    0 2px 12px -4px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-mantine-color-scheme="light"] .nav-site-brand__name {
  color: #0f172a;
  text-shadow: none;
}
[data-mantine-color-scheme="light"] .nav-site-brand__desc {
  color: #64748b;
}
[data-mantine-color-scheme="light"] .nav-site-brand__logo.site-logo--subacc-bg {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 8px -2px rgba(15, 23, 42, 0.15);
}
[data-mantine-color-scheme="light"] .nav-site-brand__live {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* 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 – toggle bar + options button */
.create-hwid-stack {
  display: flex;
  align-items: stretch;
  min-height: 2.75rem;
  background: rgba(45, 45, 45, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.375rem;
  overflow: hidden;
}

.create-hwid-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  flex: 1;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0 0 0 1rem;
  background: transparent;
  border: none;
  border-radius: 0;
}

.create-hwid-stack > .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: auto;
  min-height: 2.75rem;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  background: rgba(26, 118, 253, 0.15);
  border-left-color: rgba(26, 118, 253, 0.25);
  color: #6ea8fe;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.create-hwid-stack > .create-hwid-options-btn:hover {
  background: rgba(26, 118, 253, 0.25);
  border-left-color: rgba(26, 118, 253, 0.4);
  color: #fff;
}

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

.create-hwid-options-label--short {
  display: none;
}

.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;
}

.create-hwid-hint {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  margin: 0.5rem 0 0 0;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.375rem;
}
.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);
}

/* Same colors as .create-output-textarea; dashed outline like contact “Details for your topic” */
#generated-keys-textarea.create-output-textarea {
  border-style: dashed;
}

.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-stack {
  background: #fff;
  border-color: #dee2e6;
}

[data-mantine-color-scheme=light] .create-hwid-inner {
  background: transparent;
  border-color: transparent;
}
[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-stack > .create-hwid-options-btn {
  background: rgba(26, 118, 253, 0.1);
  color: #1a76fd;
  border-left-color: rgba(26, 118, 253, 0.22);
}
[data-mantine-color-scheme=light] .create-hwid-stack > .create-hwid-options-btn:hover {
  background: rgba(26, 118, 253, 0.18);
  color: #1572e8;
  border-left-color: rgba(26, 118, 253, 0.32);
}
[data-mantine-color-scheme=light] .create-hwid-options-icon {
  opacity: 0.85;
}
[data-mantine-color-scheme=light] .create-hwid-hint {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
  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; }

.create-duration-plan-hint {
  margin-top: 0.35rem;
  margin-bottom: 0;
}

.add-duration-replace-notice {
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(251, 191, 36, 0.95);
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 0.4rem;
}

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

.add-duration-item--preset {
  border-style: dashed;
  opacity: 0.92;
}

.add-duration-item-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.4rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

[data-mantine-color-scheme=light] .add-duration-replace-notice {
  color: #92400e;
  background: #fffbeb;
  border-color: #fcd34d;
}

[data-mantine-color-scheme=light] .add-duration-item-badge {
  color: #495057;
  background: #f1f3f5;
  border-color: #dee2e6;
}

.add-duration-label-field .create-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.add-duration-label-input--auto {
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(59, 130, 246, 0.08);
}

.add-duration-label-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.48);
}

.add-duration-list {
  min-height: 8.5rem;
  max-height: 260px;
  overflow-y: auto;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.4rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.add-duration-list::-webkit-scrollbar { width: 6px; }
.add-duration-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}
.add-duration-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

.add-duration-list--empty {
  align-items: center;
  justify-content: center;
}

.add-duration-list-message {
  margin: 0;
  padding: 1rem 0.5rem;
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}

.add-duration-list[data-state="error"] .add-duration-list-message {
  color: #f87171;
}

.add-duration-list--loaded {
  display: flex;
  flex-direction: column;
  color: inherit;
}

.add-duration-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.4rem;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}

.add-duration-item:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
}

.add-duration-item-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.add-duration-item-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
  letter-spacing: 0.01em;
}

.add-duration-item-days {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.add-duration-del,
.delete-duration-btn.add-duration-del {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #fca5a5;
  cursor: pointer;
  border-radius: 0.3rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.add-duration-del:hover,
.delete-duration-btn.add-duration-del:hover {
  background: rgba(248, 113, 113, 0.22);
  border-color: rgba(248, 113, 113, 0.5);
  color: #fecaca;
}

.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: #495057;
  background: #f1f3f5;
  border-color: #dee2e6;
}
[data-mantine-color-scheme=light] .add-duration-item:hover {
  background: #f8f9fa;
  border-color: #ced4da;
}
[data-mantine-color-scheme=light] .add-duration-label-input--auto {
  border-color: rgba(34, 139, 230, 0.45);
  background: rgba(34, 139, 230, 0.06);
}
[data-mantine-color-scheme=light] .add-duration-label-hint { color: #868e96; }
[data-mantine-color-scheme=light] .add-duration-list-message { color: #868e96; }
[data-mantine-color-scheme=light] .add-duration-list[data-state="error"] .add-duration-list-message { color: #e03131; }
[data-mantine-color-scheme=light] .add-duration-del,
[data-mantine-color-scheme=light] .delete-duration-btn.add-duration-del {
  background: rgba(224, 49, 49, 0.08);
  border-color: rgba(224, 49, 49, 0.25);
  color: #c92a2a;
}
[data-mantine-color-scheme=light] .add-duration-del:hover,
[data-mantine-color-scheme=light] .delete-duration-btn.add-duration-del:hover {
  background: rgba(224, 49, 49, 0.14);
  border-color: rgba(224, 49, 49, 0.4);
  color: #a61e1e;
}
[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;
}
.licenses-quick-pill--stacked {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.35);
  color: #c4b5fd;
}
.licenses-quick-pill--stacked:hover {
  background: rgba(139, 92, 246, 0.25);
  border-color: rgba(139, 92, 246, 0.5);
  color: #ddd6fe;
}
.licenses-quick-pill--stacked.is-active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.4) 0%, rgba(139, 92, 246, 0.4) 100%);
  border-color: rgba(139, 92, 246, 0.6);
  color: #fff;
}

@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;
}

.licenses-card-header {
  align-items: center;
  padding: 0.65rem 1.25rem;
  gap: 0.625rem;
  flex-wrap: nowrap;
}

.licenses-header-left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  flex: 1 1 auto;
}

.licenses-page-title {
  font-size: 1.0625rem;
  margin: 0;
  white-space: nowrap;
}

.licenses-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  flex-shrink: 0;
}

.licenses-count-pill-num {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.75rem;
  font-weight: 700;
}

.licenses-count-pill-sep {
  opacity: 0.35;
  font-weight: 400;
  padding: 0 0.05rem;
}

.licenses-count-pill-total {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

.licenses-count-pill-label {
  margin-left: 0.2rem;
  font-weight: 500;
  opacity: 0.65;
}

.licenses-subacc-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.125rem 0.35rem 0.125rem 0.45rem;
  border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.licenses-subacc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.licenses-subacc-select {
  height: 1.625rem;
  min-width: 6.25rem;
  max-width: 9rem;
  padding: 0 1.35rem 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.25rem;
  cursor: pointer;
  font-family: inherit;
  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.55)' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.35rem center;
}

.licenses-subacc-select:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.licenses-subacc-select:focus {
  outline: none;
  border-color: rgba(26, 118, 253, 0.55);
  box-shadow: 0 0 0 2px rgba(26, 118, 253, 0.2);
}

.licenses-subacc-viewing-hint {
  margin: 0;
  padding: 0 1.25rem 0.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.licenses-subacc-viewing-hint strong {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
}

[data-mantine-color-scheme=light] .licenses-count-pill {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #64748b;
}

[data-mantine-color-scheme=light] .licenses-count-pill-num {
  color: #1e293b;
}

[data-mantine-color-scheme=light] .licenses-count-pill-total {
  color: #475569;
}

[data-mantine-color-scheme=light] .licenses-subacc-inline {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-mantine-color-scheme=light] .licenses-subacc-label {
  color: #94a3b8;
}

[data-mantine-color-scheme=light] .licenses-subacc-select {
  background-color: #fff;
  color: #1e293b;
  border-color: #cbd5e1;
  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='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

[data-mantine-color-scheme=light] .licenses-subacc-viewing-hint {
  color: #64748b;
  border-bottom-color: #e2e8f0;
}

[data-mantine-color-scheme=light] .licenses-subacc-viewing-hint strong {
  color: #334155;
}

/* 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-card.dashboard-card--featured { border-color: rgba(64, 192, 87, 0.22); }
.reseller-topup-balance-header { margin-bottom: 0; }
.reseller-topup-balance-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1rem 1.25rem 1.35rem;
}
.reseller-topup-balance-hero {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.15rem;
  border-radius: 0.65rem;
  background: linear-gradient(135deg, rgba(64, 192, 87, 0.12) 0%, rgba(255, 255, 255, 0.04) 55%, rgba(26, 118, 253, 0.06) 100%);
  border: 1px solid rgba(64, 192, 87, 0.22);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.reseller-topup-balance-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
}
.reseller-topup-balance-amount {
  display: block;
  font-size: clamp(1.75rem, 1rem + 2.5vw, 2.25rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #69db7c;
}
.reseller-topup-balance-hint {
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.52);
}
.reseller-topup-balance-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem 1rem;
  margin: 0;
  padding: 0;
}
@media (max-width: 30em) {
  .reseller-topup-balance-meta { grid-template-columns: 1fr; gap: 0.75rem; }
}
.reseller-topup-balance-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.reseller-topup-balance-meta-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.48);
  line-height: 1.2;
}
.reseller-topup-balance-meta-value {
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.2;
}
.reseller-topup-balance-meta-value--accent { 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-card.dashboard-card--featured { border-color: rgba(64, 192, 87, 0.35); }
[data-mantine-color-scheme=light] .reseller-topup-balance-hero {
  background: linear-gradient(135deg, rgba(64, 192, 87, 0.1) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(26, 118, 253, 0.06) 100%);
  border-color: rgba(64, 192, 87, 0.28);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
[data-mantine-color-scheme=light] .reseller-topup-balance-meta-item {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.08);
}
[data-mantine-color-scheme=light] .reseller-topup-balance-label { color: #868e96; }
[data-mantine-color-scheme=light] .reseller-topup-balance-amount { color: #2f9e44; }
[data-mantine-color-scheme=light] .reseller-topup-balance-hint { color: #495057; }
[data-mantine-color-scheme=light] .reseller-topup-balance-meta-label { color: #868e96; }
[data-mantine-color-scheme=light] .reseller-topup-balance-meta-value { color: #212529; }
[data-mantine-color-scheme=light] .reseller-topup-balance-meta-value--accent { 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;
text-shadow: none;
}
.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-role-pill--suspended {
background: rgba(239, 68, 68, 0.2);
color: #f87171;
}
.reseller-role-pill--paused {
background: rgba(56, 189, 248, 0.18);
color: #7dd3fc;
}
.reseller-role-pill--pending {
background: rgba(234, 179, 8, 0.2);
color: #facc15;
}
.reseller-keys {
font-variant-numeric: tabular-nums;
}
.reseller-keys-header-hint {
font-weight: 400;
font-size: 0.75em;
color: rgba(255, 255, 255, 0.5);
}
.reseller-project-cell {
display: inline-block;
max-width: 12rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.reseller-project-more {
color: rgba(255, 255, 255, 0.55);
font-weight: 500;
}
.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-create-mode-toggle {
display: flex;
gap: 0.2rem;
padding: 0.2rem;
border-radius: 0.4rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.reseller-create-mode-toggle .create-mode-btn {
padding: 0.35rem 0.5rem;
font-size: 0.75rem;
}

.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);
}

.licenses-copy-btn:focus-visible,
.licenses-action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(26, 118, 253, 0.45);
}

@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-col-expiry {
  min-width: 7.5rem;
  white-space: nowrap;
}

.licenses-expiry-tz-hint {
  margin: 0.35rem 0 0.75rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.4;
}

.license-expiry-cell {
  cursor: help;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}

.license-expiry-cell--expired {
  color: #fa5252;
}

.license-expiry-cell--soon {
  color: #fab005;
}

.license-expiry-cell--paused {
  color: #67e8f9;
}

.license-expiry-cell--lifetime {
  color: #b197fc;
}

.license-expiry-cell--pending {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
}

.license-expiry-cell--muted {
  color: rgba(255, 255, 255, 0.35);
}

.licenses-status-badges {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.35rem;
  vertical-align: middle;
}
.licenses-col-status {
  min-width: 10.5rem;
  white-space: nowrap;
}
.licenses-status-badges .licenses-badge {
  flex: 0 0 auto;
  white-space: nowrap;
}
.licenses-badge--open {
  font-size: 0.65rem;
  padding: 0.15rem 0.45rem;
  background: rgba(34, 211, 238, 0.15);
  color: #67e8f9;
  border-color: rgba(34, 211, 238, 0.35);
  cursor: help;
}

.licenses-badge--stacked {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.35) 0%, rgba(139, 92, 246, 0.35) 100%);
  color: #c4b5fd;
  border-color: rgba(139, 92, 246, 0.5);
  cursor: help;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.licenses-badge--stacked:hover {
  transform: scale(1.04);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.4);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.5) 0%, rgba(139, 92, 246, 0.5) 100%);
}
.licenses-stacked-for {
  color: #c4b5fd;
  font-size: 0.75rem;
}
.licenses-stacked-for-link {
  color: #c4b5fd;
  text-decoration: none;
}
.licenses-stacked-for-link:hover {
  text-decoration: underline;
  color: #ddd6fe;
}

.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.12); border-radius: 6px; z-index: 100; min-width: 160px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); color: rgba(255, 255, 255, 0.92); }
.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; color: inherit; border-radius: 4px; transition: background 0.15s ease, color 0.15s ease; }
.licenses-col-opt:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.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-actions--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (max-width: 28em) { .licenses-bulk-actions--grid { grid-template-columns: 1fr; } }
.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:not(.licenses-modal-add-time) { display: flex; align-items: center; gap: 8px; margin-top: 0.5rem; }
.licenses-bulk-add-time:not(.licenses-modal-add-time) input { width: 100px; }
.licenses-import-preview { font-size: 0.875rem; color: rgba(255,255,255,0.7); margin: 0; }
.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; }

/* Licenses modals — bulk ops & import */
.licenses-modal-panel { display: flex; flex-direction: column; gap: 1rem; }
.licenses-modal-field { display: flex; flex-direction: column; gap: 0.4rem; }
.licenses-modal-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.licenses-modal-label-icon { flex-shrink: 0; opacity: 0.7; }
.licenses-modal-select { width: 100%; margin: 0; }
.licenses-modal-section { display: flex; flex-direction: column; gap: 0.5rem; }
.licenses-modal-section-title {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
}
.licenses-modal-section-warn {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(251, 191, 36, 0.95);
  line-height: 1.4;
}
.licenses-modal-section--danger .licenses-modal-section-title { color: rgba(255, 135, 135, 0.85); }
.licenses-bulk-btn--card {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  padding: 0.65rem 0.75rem;
  text-align: left;
  border-radius: 8px;
  transition: border-color 0.15s, background 0.15s;
}
.licenses-bulk-btn--card:hover { border-color: rgba(26, 118, 253, 0.45); background: rgba(26, 118, 253, 0.08); }
.licenses-bulk-btn--card.licenses-bulk-btn--danger:hover { border-color: rgba(250, 82, 82, 0.5); background: rgba(250, 82, 82, 0.1); }
.licenses-bulk-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #74c0fc;
}
.licenses-bulk-btn-icon--warn { color: #ffa8a8; }
.licenses-bulk-btn-icon--ok { color: #69db7c; }
.licenses-bulk-btn--danger .licenses-bulk-btn-icon { color: #ff8787; }
.licenses-bulk-btn-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 auto; }
.licenses-bulk-btn-title,
.licenses-bulk-btn-desc { display: block; width: 100%; }
.licenses-bulk-btn-title { font-size: 0.8125rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); line-height: 1.3; }
.licenses-bulk-btn-desc { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.48); line-height: 1.35; }
.licenses-modal-add-time {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.licenses-modal-add-time-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.licenses-modal-add-time-row .create-input { flex: 1; min-width: 6rem; max-width: 10rem; }
.licenses-import-intro {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.58);
}
.licenses-import-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.35rem 1rem;
  border-radius: 10px;
  border: 2px dashed rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.licenses-import-dropzone:hover,
.licenses-import-dropzone:focus-within {
  border-color: rgba(26, 118, 253, 0.5);
  background: rgba(26, 118, 253, 0.06);
}
.licenses-import-dropzone-icon { color: rgba(255, 255, 255, 0.45); }
.licenses-import-dropzone-title { font-size: 0.875rem; font-weight: 600; color: rgba(255, 255, 255, 0.88); }
.licenses-import-dropzone-hint { font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); }
.licenses-import-file-input {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}
.licenses-import-dropzone { position: relative; }
.licenses-import-preview-card {
  padding: 0.75rem 0.85rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.licenses-import-preview-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.35rem;
}
.licenses-import-footer { gap: 0.5rem; }
[data-mantine-color-scheme=light] .licenses-modal-label { color: #334155; }
[data-mantine-color-scheme=light] .licenses-modal-section-title { color: #64748b; }
[data-mantine-color-scheme=light] .licenses-bulk-btn--card { background: #f8fafc; border-color: #e2e8f0; }
[data-mantine-color-scheme=light] .licenses-bulk-btn--card:hover { background: #eff6ff; border-color: #93c5fd; }
[data-mantine-color-scheme=light] .licenses-bulk-btn-title { color: #1e293b; }
[data-mantine-color-scheme=light] .licenses-bulk-btn-desc { color: #64748b; }
[data-mantine-color-scheme=light] .licenses-bulk-btn-icon { background: #e2e8f0; color: #2563eb; }
[data-mantine-color-scheme=light] .licenses-import-intro { color: #64748b; }
[data-mantine-color-scheme=light] .licenses-import-dropzone { background: #f8fafc; border-color: #cbd5e1; }
[data-mantine-color-scheme=light] .licenses-import-dropzone:hover { background: #eff6ff; border-color: #60a5fa; }
[data-mantine-color-scheme=light] .licenses-import-preview-card { background: #f1f5f9; border-color: #e2e8f0; }
[data-mantine-color-scheme=light] .licenses-import-preview { color: #475569; }
[data-mantine-color-scheme=light] .licenses-modal-add-time { background: #f8fafc; border-color: #e2e8f0; }

.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;
}

.license-extend-current {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
}

.license-extend-hint {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.45;
}

.license-extend-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.license-extend-preset {
  padding: 0.35rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 0.375rem;
  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: background 0.15s, border-color 0.15s;
}

.license-extend-preset:hover,
.license-extend-preset.is-active {
  background: rgba(26, 118, 253, 0.15);
  border-color: rgba(26, 118, 253, 0.45);
  color: #fff;
}

.license-extend-custom-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.license-extend-custom-row .create-input {
  flex: 1;
  min-width: 0;
}

.license-extend-unit {
  flex-shrink: 0;
  min-width: 5.5rem;
}

.license-extend-note-wrap {
  margin-top: 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] .licenses-copy-btn {
  color: #868e96;
}
[data-mantine-color-scheme=light] .licenses-copy-btn:hover {
  color: #212529;
  background: #f1f3f5;
}
[data-mantine-color-scheme=light] .licenses-action-btn {
  color: #868e96;
}
[data-mantine-color-scheme=light] .licenses-action-btn:hover {
  color: #212529;
  background: #f1f3f5;
}
[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] .licenses-quick-pill--stacked { background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.3); color: #5b21b6; }
[data-mantine-color-scheme=light] .licenses-quick-pill--stacked:hover { background: rgba(139, 92, 246, 0.2); border-color: rgba(139, 92, 246, 0.45); color: #6d28d9; }
[data-mantine-color-scheme=light] .licenses-quick-pill--stacked.is-active { background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(139, 92, 246, 0.25) 100%); border-color: rgba(139, 92, 246, 0.5); color: #5b21b6; }
[data-mantine-color-scheme=light] .licenses-expiry-tz-hint {
  color: #868e96;
}

[data-mantine-color-scheme=light] .license-expiry-cell {
  color: #495057;
}

[data-mantine-color-scheme=light] .license-expiry-cell--expired {
  color: #e03131;
}

[data-mantine-color-scheme=light] .license-expiry-cell--soon {
  color: #e67700;
}

[data-mantine-color-scheme=light] .license-expiry-cell--paused {
  color: #0e7490;
}

[data-mantine-color-scheme=light] .license-expiry-cell--lifetime {
  color: #7950f2;
}

[data-mantine-color-scheme=light] .license-expiry-cell--pending {
  color: #868e96;
}

[data-mantine-color-scheme=light] .licenses-badge--open {
  background: rgba(8, 145, 178, 0.12);
  color: #0e7490;
  border-color: rgba(8, 145, 178, 0.35);
}

[data-mantine-color-scheme=light] .licenses-badge--stacked {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
  color: #5b21b6;
  border-color: rgba(139, 92, 246, 0.45);
}

[data-mantine-color-scheme=light] .licenses-badge--stacked:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
}
[data-mantine-color-scheme=light] .licenses-stacked-for-link { color: #5b21b6; }
[data-mantine-color-scheme=light] .licenses-stacked-for-link:hover { color: #6d28d9; }
[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; }
.account-ui-btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.account-ui-btn--secondary:hover { background: rgba(255, 255, 255, 0.12); }
[data-mantine-color-scheme=light] .account-ui-btn--secondary {
  background: #f1f3f5;
  color: #212529;
  border: 1px solid #dee2e6;
}
[data-mantine-color-scheme=light] .account-ui-btn--secondary:hover { background: #e9ecef; }
.account-ui-panel-opacity-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.account-ui-range {
  flex: 1;
  min-width: 12rem;
  max-width: 22rem;
  accent-color: var(--mantine-color-primary-4, #1A76FD);
}
.account-ui-range-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  min-width: 3.25rem;
}
[data-mantine-color-scheme=light] .account-ui-range-value { color: #212529; }
[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; }

/* ===== Account Referrals (account/referrals) – uses account-grid, account-form-field, security-session-item ===== */
/* Dark mode (default): light text – scope to #tab-referrals to override inherited black */
#tab-referrals .account-card-body { color: rgba(255, 255, 255, 0.9) !important; }
#tab-referrals .account-card-title { color: rgba(255, 255, 255, 0.95) !important; }
#tab-referrals .account-info-label { color: rgba(255, 255, 255, 0.6); }
#tab-referrals .account-info-value { color: rgba(255, 255, 255, 0.95); }
#tab-referrals .account-form-field label { color: rgba(255, 255, 255, 0.75); }
#tab-referrals .security-session-device { color: rgba(255, 255, 255, 0.9); }
#tab-referrals .security-session-time { color: rgba(255, 255, 255, 0.6); }
.referral-status { display: inline-flex; align-items: center; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.35rem 0.65rem; border-radius: 9999px; flex-shrink: 0; }
.referral-status--completed { color: #0f172a; background: #34d399; border: 1px solid rgba(52, 211, 153, 0.5); }
.referral-status--pending { color: #0f172a; background: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.5); }
[data-mantine-color-scheme=light] #tab-referrals .account-card-body { color: #334155 !important; }
[data-mantine-color-scheme=light] #tab-referrals .account-card-title { color: #1e293b !important; }
[data-mantine-color-scheme=light] #tab-referrals .account-info-label { color: #64748b; }
[data-mantine-color-scheme=light] #tab-referrals .account-info-value { color: #1e293b; }
[data-mantine-color-scheme=light] #tab-referrals .account-form-field label { color: #64748b; }
[data-mantine-color-scheme=light] #tab-referrals .security-session-device { color: #1e293b; }
[data-mantine-color-scheme=light] #tab-referrals .security-session-time { color: #64748b; }
[data-mantine-color-scheme=light] .referral-status--completed { color: #052e16; background: #34d399; border-color: #10b981; }
[data-mantine-color-scheme=light] .referral-status--pending { color: #78350f; background: #fde68a; border-color: #fbbf24; }

[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 — pill stats */
.security-sessions-summary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
margin: 0 0 1rem 0;
}
.security-sessions-stat {
display: inline-flex;
align-items: baseline;
gap: 0.35rem;
padding: 0.35rem 0.65rem;
border-radius: 9999px;
font-size: 0.75rem;
line-height: 1.2;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.security-sessions-stat--active {
border-color: rgba(59, 130, 246, 0.25);
background: rgba(59, 130, 246, 0.1);
}
.security-sessions-stat--past {
border-color: rgba(255, 255, 255, 0.1);
}
.security-sessions-stat-value {
font-size: 0.9375rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: rgba(255, 255, 255, 0.95);
}
.security-sessions-stat--active .security-sessions-stat-value { color: #60a5fa; }
.security-sessions-stat-label {
color: rgba(255, 255, 255, 0.55);
font-weight: 500;
text-transform: lowercase;
}
.security-sessions-stat-divider {
width: 1px;
height: 1rem;
background: rgba(255, 255, 255, 0.12);
align-self: center;
}
[data-mantine-color-scheme=light] .security-sessions-stat {
background: #f1f3f5;
border-color: #e9ecef;
}
[data-mantine-color-scheme=light] .security-sessions-stat--active {
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.25);
}
[data-mantine-color-scheme=light] .security-sessions-stat-value { color: #212529; }
[data-mantine-color-scheme=light] .security-sessions-stat--active .security-sessions-stat-value { color: #1d4ed8; }
[data-mantine-color-scheme=light] .security-sessions-stat-label { color: #6c757d; }
[data-mantine-color-scheme=light] .security-sessions-stat-divider { background: #dee2e6; }

.security-sessions-list-wrap {
position: relative;
}
.security-sessions-list-wrap[data-max-visible] .security-sessions-list {
max-height: calc((3.25rem + 0.5rem) * 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.5rem;
padding: 0.45rem 0.65rem;
font-size: 0.75rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.65);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 0.5rem;
cursor: pointer;
transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.security-sessions-more-btn:hover {
color: #3b82f6;
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.25);
}
[data-mantine-color-scheme=light] .security-sessions-more-btn {
color: #495057;
background: #f8f9fa;
border-color: #e9ecef;
}
[data-mantine-color-scheme=light] .security-sessions-more-btn:hover { color: #2563eb; background: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.2); }

.security-sessions-heading {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
margin: 0 0 0.65rem 0;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
[data-mantine-color-scheme=light] .security-sessions-heading {
color: #868e96;
border-bottom-color: #e9ecef;
}
.security-sessions-heading-hint {
font-weight: 400;
color: rgba(255, 255, 255, 0.5);
}
.security-sessions-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.security-session-item {
display: flex;
align-items: stretch;
gap: 0.5rem;
padding: 0.65rem 0.85rem;
border-radius: 0.625rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
min-height: 2.75rem;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.security-session-item:not(.security-session-item--current):hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.12);
}
.security-session-item--current {
border-color: rgba(59, 130, 246, 0.45);
background: linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, rgba(59, 130, 246, 0.06) 100%);
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}
.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: nowrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1rem;
}
.security-session-primary {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
flex: 1;
flex-wrap: wrap;
}
.security-session-device {
font-size: 0.8125rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.92);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.security-session-info--line .security-session-time {
font-size: 0.75rem;
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.security-session-time {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
}
.security-session-badge {
display: inline-flex;
align-items: center;
padding: 0.15rem 0.45rem;
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #93c5fd;
background: rgba(59, 130, 246, 0.2);
border: 1px solid rgba(59, 130, 246, 0.35);
border-radius: 0.25rem;
flex-shrink: 0;
}
.security-session-item--current .security-session-badge {
color: #dbeafe;
background: rgba(59, 130, 246, 0.28);
border-color: rgba(96, 165, 250, 0.45);
}
.security-sessions-actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
[data-mantine-color-scheme=light] .security-sessions-actions { border-top-color: #e9ecef; }
@media (max-width: 480px) {
.security-sessions-actions {
  flex-direction: column;
}
.security-sessions-actions .create-button { width: 100%; justify-content: center; }
}
.security-session-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.55rem 0.9rem;
font-size: 0.8125rem;
font-weight: 600;
border-radius: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.92);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.1s;
flex: 1;
min-width: 0;
}
.security-session-btn:hover {
background: rgba(255, 255, 255, 0.11);
border-color: rgba(255, 255, 255, 0.22);
}
.security-session-btn--logout-all {
border-color: rgba(250, 82, 82, 0.4);
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.55);
}
.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-item--history {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.65rem 0.75rem;
padding: 0.55rem 0.75rem;
}
.security-session-item--history .security-session-info--line {
flex: 1;
min-width: 0;
}
.security-session-remove {
flex-shrink: 0;
width: 2.25rem;
height: 2.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.45);
border-radius: 0.5rem;
cursor: pointer;
transition: color 0.15s, background 0.15s;
}
.security-session-remove:hover {
color: #fa5252;
background: rgba(250, 82, 82, 0.12);
}
.security-session-checkbox-wrap {
flex-shrink: 0;
display: inline-flex;
align-items: center;
cursor: pointer;
padding: 0.15rem 0;
}
.security-session-checkbox-wrap input { margin: 0; }
.security-sessions-empty {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.45);
margin: 0;
padding: 0.5rem 0;
}
[data-mantine-color-scheme=light] .security-sessions-empty { color: #868e96; }
.security-sessions-section { margin-top: 1.5rem; }
.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:not(:hover) { background: #f8f9fa; border-color: #e9ecef; }
[data-mantine-color-scheme=light] .security-session-item:not(.security-session-item--current):hover { background: #f1f3f5; border-color: #dee2e6; }
[data-mantine-color-scheme=light] .security-session-item--current {
border-color: rgba(37, 99, 235, 0.35);
background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.04) 100%);
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.12);
}
[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-session-badge { color: #1d4ed8; background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.28); }
[data-mantine-color-scheme=light] .security-session-item--current .security-session-badge { color: #1e40af; background: rgba(59, 130, 246, 0.18); border-color: rgba(37, 99, 235, 0.35); }
[data-mantine-color-scheme=light] .security-session-remove { background: #f8f9fa; color: #868e96; }
[data-mantine-color-scheme=light] .security-session-remove:hover { background: rgba(250, 82, 82, 0.1); color: #e03131; }
[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); }

.licenses-subacc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  padding: 0.75rem 1rem;
  margin: 0 1rem 0.5rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.licenses-subacc-banner { margin: 0; font-size: 0.875rem; color: rgba(255,255,255,0.8); width: 100%; }
.licenses-subacc-reset { margin-left: 0.5rem; color: #60a5fa; text-decoration: none; }
[data-mantine-color-scheme=light] .licenses-subacc-label { color: #64748b; }

.create-plan-limit-banner {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fecaca;
  font-size: 0.9rem;
}
.create-plan-limit-banner a { color: #93c5fd; }

.create-billing-panel {
  margin: 0.75rem 0 0.35rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.create-billing-line {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.68);
}
.create-billing-line + .create-billing-line { margin-top: 0.25rem; }
.create-billing-line--cost { color: rgba(255, 255, 255, 0.88); font-weight: 600; }
.create-billing-warn {
  margin: 0.45rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #fcd34d;
}
.create-billing-warn a { color: #93c5fd; text-decoration: underline; }
[data-mantine-color-scheme=light] .create-billing-panel {
  background: #f8fafc;
  border-color: #e2e8f0;
}
[data-mantine-color-scheme=light] .create-billing-line { color: #64748b; }
[data-mantine-color-scheme=light] .create-billing-line--cost { color: #1e293b; }
[data-mantine-color-scheme=light] .create-billing-warn { color: #b45309; }
[data-mantine-color-scheme=light] .create-billing-warn a { color: #2563eb; }

.files-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 14rem;
  padding: 2.5rem 1.5rem;
}
.files-empty-icon { color: rgba(255,255,255,0.35); margin-bottom: 0.75rem; }
.files-empty-title { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 600; color: rgba(255,255,255,0.88); }
.files-empty { margin: 0; max-width: 26rem; color: rgba(255,255,255,0.55); font-size: 0.9rem; line-height: 1.5; }

.reseller-email-panel { margin: 0 1rem 1rem; border: 1px solid rgba(255,255,255,0.08); border-radius: 0.5rem; padding: 0.5rem 0.75rem; }
.reseller-email-panel-body { padding: 0.75rem 0.25rem 0.5rem; display: grid; gap: 0.75rem; }
.reseller-email-grid, .reseller-smtp-grid { display: grid; gap: 0.5rem; }
.reseller-email-hint { margin: 0; font-size: 0.8125rem; color: rgba(255,255,255,0.6); }
.reseller-email-log-list { margin: 0; padding-left: 1.1rem; font-size: 0.8125rem; color: rgba(255,255,255,0.75); max-height: 10rem; overflow: auto; }

.admin-users-action-btn--menu { font-size: 1.1rem; line-height: 1; padding: 0.15rem 0.45rem; }
.admin-users-action-menu-wrap { position: relative; display: inline-block; vertical-align: middle; }
.admin-users-more-menu { min-width: 12.5rem; z-index: 2147483000; }
.admin-users-more-menu .nav-user-menu-item { font-size: 0.8125rem; }

/* Custom dashboard panel opacity: see app/core/css/user_dashboard_panel_opacity.css (loaded last in layout) */