/* MicHelper UI — mobile-first (v5.2.63)
   UI goals:
   - No iOS "white bottom" overscroll
   - EVERYTHING styled (incl. textareas, .btn)
   - Clean segmented toggles (Active/Trash)
   - Touch-friendly spacing on phones
*/

/* ===== v5.2.63: UNIFIED DESIGN SYSTEM ===== */
:root {
  /* === Z-INDEX SYSTEM (v5.2.64) === */
  --z-base: 1;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-tooltip: 3000;
  --z-max: 9999;
  
  /* === BACKGROUNDS === */
  --bg-0: #000;
  --bg-1: #050508;
  --bg-2: #0a0a0f;
  --surface: rgba(16, 16, 22, 0.95);
  --surface-2: rgba(24, 24, 32, 0.95);
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  
  /* === GLASS EFFECTS === */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.05);
  
  /* === TEXT === */
  --ink: #f8f8fc;
  --muted: rgba(248, 248, 252, 0.65);
  --muted-2: rgba(248, 248, 252, 0.45);
  
  /* === BORDERS === */
  --stroke: rgba(255, 255, 255, 0.08);
  --stroke-2: rgba(255, 255, 255, 0.15);
  --stroke-glow: rgba(59, 125, 255, 0.25);
  --border-soft-dark: rgba(255, 255, 255, 0.10);
  --border-soft-light: rgba(0, 0, 0, 0.10);
  
  /* === ACCENT (PRIMARY = BLUE) — Brand color === */
  --accent: #3b7dff;
  --accent-2: #5a94ff;
  --accent-glow: rgba(59, 125, 255, 0.35);
  --accent-muted: rgba(59, 125, 255, 0.15);
  
  /* === STATUS COLORS (green = success only, NOT brand) === */
  --success: #22c55e;
  --warning: #fbbf24;
  --danger: #ef4444;
  --good: var(--success);
  --mid: var(--warning);
  --bad: var(--danger);
  --good-glow: rgba(34, 197, 94, 0.25);
  --bad-glow: rgba(239, 68, 68, 0.25);
  
  /* === RADII === */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-card: 20px;
  --radius-pill: 9999px;
  --radius-control: 12px;
  
  /* === SPACING SCALE === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  /* Legacy gap aliases */
  --gap-1: 8px;
  --gap-2: 12px;
  --gap-3: 16px;
  --gap-4: 24px;
  --gap-5: 32px;
  --section-gap: 24px;
  --card-gap: 16px;
  
  /* === CONTROL SIZES === */
  --control-h: 44px;
  --control-h-sm: 36px;
  --control-h-lg: 52px;
  --control-h-xs: 28px;
  --touch-target: 44px;
  
  /* === BUTTON TOKENS === */
  --btn-radius: var(--radius-md);
  --btn-radius-pill: var(--radius-pill);
  --btn-font: 14px;
  --btn-weight: 600;
  --btn-transition: 180ms var(--ease);
  --btn-h-xs: 28px;
  --btn-h-sm: 36px;
  --btn-h-md: 42px;
  --btn-h-lg: 48px;
  --btn-pad-x-sm: 14px;
  --btn-pad-x-md: 18px;
  --btn-pad-x-lg: 24px;
  --btn-primary-bg: linear-gradient(135deg, var(--accent), var(--accent-2));
  --btn-shadow: 0 2px 8px rgba(59, 125, 255, 0.3);
  --btn-shadow-hover: 0 4px 14px rgba(59, 125, 255, 0.4);
  --btn-glow: 0 0 20px rgba(59, 125, 255, 0.25);
  
  /* === SHADOWS === */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-card: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-float: var(--shadow-xl);
  --shadow-glow: 0 0 24px var(--accent-glow);
  --focus-ring: 0 0 0 3px rgba(59, 125, 255, 0.4);
  
  /* === ANIMATION === */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --t-fast: 150ms;
  --t: 200ms;
  --t-slow: 300ms;
  
  /* === SAFE AREA === */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  
  /* === LAYOUT === */
  --navbar-h: 56px;
  --tabbar-h: 64px;
  --mobile-nav-height: 64px;
  --mobile-header-height: 56px;
  --mobile-padding: 16px;
  --mobile-gap: 12px;
  --page-bg: var(--bg-2);
  /* v2.3.6: Fog disabled */
  --fog-bg: transparent;
  --fog-opacity: 0;
  --vh-full: 100vh;
  
  /* === LEGACY ALIASES (for compatibility) === */
  --text-1: var(--ink);
  --text-2: var(--muted);
  --text-3: var(--muted-2);
  --text-primary-dark: var(--ink);
  --text-secondary-dark: rgba(255, 255, 255, 0.70);
  --text-primary-light: #111;
  --text-secondary-light: rgba(0, 0, 0, 0.65);
  --card-bg: var(--panel);
  --card-border: var(--stroke);
  --card: var(--panel); /* v5.2.97: CRITICAL - was undefined, used ~30 times */
  --border: var(--stroke); /* v5.2.97: alias for consistency */
  --border-soft: var(--stroke); /* v5.2.97: alias */
  --bg-card-dark: rgba(255, 255, 255, 0.04);
  --bg-card-light: rgba(0, 0, 0, 0.03);
  --bg-hover-dark: rgba(255, 255, 255, 0.08);
  --bg-hover-light: rgba(0, 0, 0, 0.05);
}

/* === LIGHT THEME === */
body.theme-light {
  /* v2.5.0: Eye-safe light theme — softer backgrounds, not pure white */
  --bg-0: #f9fafb;
  --bg-1: #f3f4f6;
  --bg-2: #e8eaed;
  --surface: rgba(249, 250, 251, 0.98);
  --surface-2: rgba(243, 244, 246, 0.98);
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  
  /* v5.2.97: Add missing variables */
  --card: var(--surface);
  --card-bg: var(--surface);
  --border: rgba(0, 0, 0, 0.1);
  --border-soft: rgba(0, 0, 0, 0.08);
  
  --ink: #1a1a2e;
  --muted: rgba(26, 26, 46, 0.65);
  --muted-2: rgba(26, 26, 46, 0.45);
  
  --stroke: rgba(0, 0, 0, 0.08);
  --stroke-2: rgba(0, 0, 0, 0.12);
  --stroke-glow: rgba(59, 125, 255, 0.2);
  
  --accent-glow: rgba(59, 125, 255, 0.2);
  --accent-muted: rgba(59, 125, 255, 0.1);
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-card: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.04);
  
  --page-bg: var(--bg-1);
  --fog-bg: transparent; /* v2.3.6: Fog disabled */
  
  /* v5.2.97: Glass effects for light */
  --glass-bg: rgba(0, 0, 0, 0.02);
  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-highlight: rgba(0, 0, 0, 0.03);
}

/* ===== Phase 5: Single scroll root (Edge/Chrome fix) ===== */
html, body {
  overflow: hidden !important;
  height: 100%;
  max-height: 100vh;
}
body {
  display: flex;
  flex-direction: column;
}
.app-wrapper {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}
#appScrollRoot {
  flex: 1;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  overscroll-behavior-y: auto;
}
#appScrollRoot.modal-open,
#appScrollRoot.welcome-lock {
  overflow: hidden !important;
  touch-action: none;
}

/* ===== v5.2.62: GLOBAL MOBILE OVERFLOW FIX ===== */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  main, .app-main, #appSection, .container, .card, .panel {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  
  * {
    min-width: 0;
  }
}

/* ===== ROLE-BASED VISIBILITY ===== */
body.role-seller .role-seller-hide {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.seller-only-element {
  display: none !important;
}
body.role-seller .seller-only-element {
  display: block !important;
}

/* ===== Reset / Base ===== */
* {
  box-sizing: border-box;
}


html {
  height: auto;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg-0, #0a0a0f);
  -webkit-tap-highlight-color: transparent;
}

body {
  height: auto;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg-0, #0b0b0c);
  -webkit-tap-highlight-color: transparent; /* v2.4.6: iOS tap highlight fix */
}

/* v2.4.6: iOS global tap/focus fixes */
button, input, select, textarea, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
input[type="checkbox"]:focus:not(:focus-visible),
.switch:focus:not(:focus-visible) {
  outline: none;
}

/* v5.2.84 + v2.5.0: Scroll lock via #appScrollRoot, NOT position:fixed on body.
   position:fixed on body causes "stripe" glitch in Edge/Chrome — removed.
   Scroll is blocked by #appScrollRoot.modal-open { overflow: hidden } instead. */
body.modal-open {
  overflow: hidden !important;
  touch-action: none !important;
  /* position: fixed — REMOVED (causes 1-2px stripe in Edge) */
  width: 100%;
}

body {
  min-height: 100svh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg-0, #0b0b0c);

  display: flex;
  justify-content: center;
  align-items: stretch;

  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Scroll lock only while welcome overlay is shown; ensure JS removes welcome-lock on close. */
body.welcome-lock {
  overflow: hidden;
}

/* Phase 5: scroll lives in #appScrollRoot only; body stays overflow hidden */

/* Extra top glow (subtle “smoke”) */
/* Headings */
h1,
h2,
h3,
h4 {
  font-weight: 700;
  letter-spacing: 0.2px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  /* Never block clicks/taps on UI */
  pointer-events: none;
  background: none;
  opacity: 0;
  z-index: 0;
  display: none;
}

.app-wrapper {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 100%;
  min-height: 100svh;
  height: auto;
  overflow: visible;
  background: inherit; /* v2.4.9: match body bg, prevent transparent gaps */

  padding: 12px 10px calc(20px + env(safe-area-inset-bottom));
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hidden {
  display: none !important;
}

/* Animated hide for form fields (used for role-dependent fields) */
.hidden-field {
  max-height: 180px;
  opacity: 1;
  transform: translateY(0);
  overflow: hidden;
  transition: max-height var(--t-slow) var(--ease), opacity var(--t) var(--ease), transform var(--t) var(--ease);
}

.hidden-field.is-hidden {
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.full-width {
  width: 100%;
}

/* ===== Top bar (як на лендингу: відступ зверху/з боків + тінь) ===== */
/* v5.2.93: Fixed safe-area for iOS notch */
.top-bar {
  position: sticky;
  top: 12px;
  z-index: var(--z-header, 200);
  width: calc(100% - 24px);
  max-width: 100%;
  margin: 12px auto 0;
  padding: 8px 12px;
  border-radius: 9999px;
  background: rgba(8, 8, 12, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);

  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  height: 56px;
  box-sizing: border-box;

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Вирівнювання елементів верхнього меню в один ряд */
.top-bar > .top-bar-left,
.top-bar > .top-bar-right {
  display: flex;
  align-items: center;
  line-height: 1;
  flex: 1 1 0;
  min-width: 0;
}
.top-bar > .top-bar-right {
  justify-content: flex-end;
}
.top-bar > .account-switcher-wrapper,
.top-bar > #currentUserLabel {
  display: flex;
  align-items: center;
  line-height: 1;
  flex-shrink: 0;
}
/* v6.3.0: flex: 0 0 auto prevents picker from pushing logo/controls apart */
.top-bar > .login-account-picker {
  flex: 0 0 auto;
  min-width: 0;
  justify-content: center;
}
.top-bar .brand {
  display: flex;
  align-items: center;
  gap: 6px;
}
.top-bar .brand-logo {
  display: block;
  vertical-align: middle;
  object-fit: contain;
}
.top-bar .brand-name,
.top-bar .brand-name-short {
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.top-bar .current-user-label {
  display: flex;
  align-items: center;
  line-height: 1;
}

.top-bar.scrolled {
  background: rgba(8, 8, 12, 0.96);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.logo {
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-size: 13.2px;
  font-weight: 650;
  opacity: 0.95;
}

.top-right {
  display: flex;
  align-items: center;
  gap: 8px;
}


/* v5.2.93 + fix: Mobile top-bar — один ряд, без білої смуги, safe-area */
@media (max-width: 560px) {
  .top-bar {
    top: 6px;
    /* safe-area: фон і відступи до країв екрану */
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-bottom: 10px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: 9999px;
    min-height: 48px;
    overflow: visible;
    box-sizing: border-box;
  }
  .top-bar .brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
  }
  .top-bar .brand-logo {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }
  .top-bar .brand-name {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .top-bar .current-user-label {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-content: flex-end;
  }
  .top-bar .current-user-label .greeting-text {
    display: none;
  }
  .top-bar .current-user-label .user-name {
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .top-bar .current-user-label .role-badge {
    display: inline-flex;
    font-size: 9px;
    padding: 2px 5px;
  }
  .top-bar .top-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
  }
  #systemStatusBadge {
    display: none !important;
  }
}

/* v5.2.34: На головну button — v7.0.0 SQUARE 10px (matches landing topbar) */
.btn-home-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: rgba(25, 25, 25, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-home-link:hover {
  background: rgba(45, 45, 45, 0.95);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.btn-home-link .home-icon {
  font-size: 14px;
}
.btn-home-link .home-text {
  display: none;
}
@media (min-width: 768px) {
  .btn-home-link .home-text {
    display: inline;
  }
}
body.theme-light .btn-home-link {
  background: rgba(240, 240, 240, 0.9);
  border-color: rgba(0, 0, 0, 0.1);
  color: #333;
}
body.theme-light .btn-home-link:hover {
  background: rgba(220, 220, 220, 0.95);
  color: #000;
}

.user-label {
  display: none;
  font-size: 11px;
  opacity: 0.82;
}

/* ===== Language switch ===== */
.lang-switch {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: rgba(25, 25, 25, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.lang-btn {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  padding: 4px 9px;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), transform 180ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.lang-btn.active {
  background: var(--accent);
  color: #fff;
  transform: translateY(-0.5px);
}

/* ===== Buttons (incl. generic .btn) — v7.0.0 SQUARE (matches landing topbar control-radius 10px) ===== */
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-ghost,
.btn-success,
.btn-accent {
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  min-height: 40px;
  line-height: 1;

  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease), opacity 0.10s ease, border-color var(--t) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-ghost:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

.btn {
  /* default */
  background: rgba(32, 32, 32, 0.95);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}

.btn:hover:enabled {
  background: rgba(45, 45, 45, 0.95);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 8px 24px rgba(59, 125, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  border: none;
}

.btn-primary:hover:enabled {
  transform: none;
  box-shadow: 0 12px 32px rgba(59, 125, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  filter: brightness(1.08);
}

.btn-secondary {
  background: rgba(28, 28, 38, 0.95);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.btn-secondary:hover:enabled {
  background: rgba(38, 38, 50, 0.95);
  border-color: rgba(255, 255, 255, 0.18);
  transform: none;
}

.btn-danger {
  background: linear-gradient(135deg, var(--bad), #dc2626);
  color: #fff;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
  border: none;
}

.btn-danger:hover:enabled {
  filter: brightness(1.1);
  transform: none;
  box-shadow: 0 12px 32px rgba(239, 68, 68, 0.55);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
}

.btn-ghost:hover:enabled {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-accent {
  /* v5.2.62: Changed from green to blue - green is only for success status */
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 8px 24px var(--accent-glow);
  font-weight: 600;
  border: none;
}

.btn-accent:hover:enabled {
  transform: none;
  box-shadow: 0 12px 32px var(--accent-glow);
  filter: brightness(1.08);
}

/* v5.2.62: Success button - for explicit success actions only */
.btn-success {
  background: linear-gradient(135deg, var(--success), #16a34a);
  color: #fff;
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4);
  font-weight: 600;
  border: none;
}

.btn-success:hover:enabled {
  transform: none;
  box-shadow: 0 12px 32px rgba(34, 197, 94, 0.55);
  filter: brightness(1.08);
}

/* Accessibility focus states */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.btn-ghost:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

/* Button loading state */
.btn.is-loading,
.btn-primary.is-loading,
.btn-secondary.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn.is-loading::after,
.btn-primary.is-loading::after,
.btn-secondary.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btnSpin 0.6s linear infinite;
}

@keyframes btnSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Minimum touch target size for mobile */
@media (pointer: coarse) {

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-danger,
  .btn-ghost,
  .lang-btn,
  .modal-close-btn {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Remove ugly tap highlight on iOS */
button,
a {
  -webkit-tap-highlight-color: transparent;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-6px);
  }

  40% {
    transform: translateX(6px);
  }

  60% {
    transform: translateX(-4px);
  }

  80% {
    transform: translateX(4px);
  }

  100% {
    transform: translateX(0);
  }
}

.shake {
  animation: shake 0.35s ease-in-out;
}

/* ===== Cards / Main ===== */
.card {
  width: 100%;
  background: linear-gradient(145deg, rgba(18, 18, 28, 0.98), rgba(12, 12, 18, 0.95));
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke-2);
  padding: 20px 18px 22px;
  /* v2.4.5: REMOVED shadows and blur */
  box-shadow: none;
  transition: border-color var(--t) var(--ease);
  backdrop-filter: none;
  overflow: hidden;
}

.card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--stroke-2);
}

.card-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
}

.main-content {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 24px;
  overflow-x: hidden;
}
#appScrollRoot.main-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.app-sections {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Desktop: block замість flex, щоб секції ростали і сторінка гортались */
@media (min-width: 769px) {
  .app-sections {
    display: block !important;
  }
  .app-sections > :not(.hidden) + :not(.hidden) {
    margin-top: 16px;
  }
}

/* v5.0.0: Force hide ALL hidden elements in app-sections - no gaps */
.app-sections > .hidden,
.app-sections > section.hidden,
.app-sections > div.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
}

/* All cards centered */
.app-sections > :not(.modal-overlay):not(.hidden) {
  width: 100%;
  max-width: 100%;
}

/* ===== Forms (global, includes textareas) ===== */
label {
  color: var(--ink);
}

/* v10.2.0: `color-scheme` on <html> stays "dark" under body.theme-light, so the
   UA painted every native checkbox and radio as a dark filled square — 41 of
   them across the app, each reading as already ticked on a white form (worst
   case: "Підтверджую згоду на запис розмов"). Selects and date inputs escaped
   it only because they carry explicit light backgrounds. The control's own
   scheme has to follow the theme. */
body.theme-light input[type="checkbox"],
body.theme-light input[type="radio"] {
  color-scheme: light;
}

.vertical-form,
.grid-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vertical-form label,
.grid-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

:where(.vertical-form, .grid-form, .admin-block, .network-mics-admin, .points-admin-row, .ai-daily-demo, .modal) :where(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--stroke-2);
  background: rgba(8, 8, 15, 0.95);
  color: var(--ink);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

:where(.vertical-form, .grid-form, .admin-block, .network-mics-admin, .points-admin-row, .ai-daily-demo, .modal) :where(input:not([type=checkbox]):not([type=radio]), select, textarea)::placeholder {
  color: rgba(248, 248, 252, 0.35);
}

:where(.vertical-form, .grid-form, .admin-block, .network-mics-admin, .points-admin-row, .ai-daily-demo, .modal) :where(input:not([type=checkbox]):not([type=radio]), select, textarea):hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(12, 12, 20, 0.95);
}

:where(.vertical-form, .grid-form, .admin-block, .network-mics-admin, .points-admin-row, .ai-daily-demo, .modal) :where(input:not([type=checkbox]):not([type=radio]), select, textarea):focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow), 0 0 20px rgba(59, 125, 255, 0.15);
  background: rgba(15, 15, 25, 0.98);
}

textarea {
  resize: vertical;
  line-height: 1.45;
}

/* iOS date input darkening */
input[type="date"] {
  color-scheme: dark;
}

/* DEPRECATED: .remember-row toggle styles at end of file (~line 49065) */

.error-text {
  min-height: 16px;
  font-size: 12px;
}
#loginError:empty {
  min-height: 0;
  margin: 0;
  padding: 0;
  display: none;
}

.form-status {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0.95;
}

.form-status:empty {
  display: none;
}

.login-hint {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.78;
}

/* ===== Mic panel ===== */
.mic-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mic-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.timer {
  font-size: 30px;
  font-weight: 750;
  letter-spacing: 0.12em;
  padding: 4px 12px;
  min-height: 42px; /* v2.4.6: prevent resize flicker on iOS */
  line-height: 1;
}

.status-text {
  font-size: 13px;
  opacity: 0.85;
  text-align: center;
  min-height: 18px; /* v2.4.6: prevent layout shift */
}

/* v7.9.1: Seller-facing recording activity hint.
   Tells the user that recording is alive and a chunk is being prepared,
   even before the first upload reaches the server (can take several minutes). */
.mic-activity-hint {
  margin: 6px auto 2px;
  max-width: 360px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(79, 127, 255, 0.12);
  border: 1px solid rgba(79, 127, 255, 0.28);
  color: var(--text, #e5e7eb);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.mic-activity-hint.hint-ok {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.32);
}
.mic-activity-hint.hint-warn {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.36);
}

.mic-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 44px; /* v2.4.6: stable button row height */
}

/* ===== Seller script / promos / messages ===== */
.seller-script {
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(99, 110, 139, 0.70);
  /* v2.3.6: Removed glow gradient */
  background: rgba(15, 23, 42, 0.92);
}

.seller-script-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
  opacity: 0.92;
}

.seller-script-text {
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  opacity: 0.90;
}

.seller-promos {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(96, 165, 250, 0.70);
  /* v2.3.6: Removed glow gradient */
  background: rgba(15, 23, 42, 0.92);
}

.seller-promos-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  opacity: 0.95;
}

.seller-promos-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.seller-promo-item {
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.90);
  border: 1px solid rgba(51, 65, 85, 0.80);
}

.seller-promo-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 2px;
  opacity: 0.96;
}

.seller-promo-desc {
  font-size: 11px;
  line-height: 1.45;
  opacity: 0.90;
}

.seller-promo-dates {
  margin-top: 3px;
  font-size: 10px;
  opacity: 0.80;
}

.seller-messages-card {
  margin-top: 12px;
}

.seller-messages-group {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
}

.seller-messages-group:first-of-type {
  border-top: none;
  padding-top: 0;
}

.seller-messages-group-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
  opacity: 0.92;
}

.seller-messages-list {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.seller-message-item {
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(75, 85, 99, 0.70);
}

.seller-message-meta {
  font-size: 11px;
  opacity: 0.75;
  margin-bottom: 2px;
}

.seller-messages-empty {
  font-size: 12px;
  opacity: 0.72;
}

/* ===== Support tickets ===== */
.support-tickets-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.support-ticket {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.support-ticket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.support-ticket-title {
  font-weight: 700;
  font-size: 13px;
}

.support-ticket-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}

.support-ticket-status.status-new {
  border-color: rgba(79, 140, 255, 0.45);
  color: #d5e2ff;
}

.support-ticket-status.status-in_progress {
  border-color: rgba(245, 183, 73, 0.45);
  color: #ffe2b5;
}

.support-ticket-status.status-closed {
  border-color: rgba(24, 198, 91, 0.45);
  color: #b7f0cd;
}

.support-ticket-meta {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 4px;
}

.support-ticket-message {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.9;
}

.support-ticket-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

.support-ticket-select {
  background: rgba(5, 5, 5, 0.96);
  color: var(--ink);
  border: 1px solid var(--stroke-2);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
}

/* ===== Seller analytics summary ===== */
.seller-analytics-card {
  margin-top: 12px;
}

.seller-analytics-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.seller-analytics-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 12px;
}

.seller-analytics-label {
  opacity: 0.80;
  font-size: 12px;
  margin-bottom: 6px;
}

.seller-analytics-value {
  font-size: 18px;
  font-weight: 800;
}

.seller-analytics-sub {
  opacity: 0.80;
  font-size: 12px;
  margin-top: 6px;
}

@media (max-width: 520px) {
  .seller-analytics-summary {
    grid-template-columns: 1fr;
  }
}

/* ===== Seller points ===== */
.seller-points-card .points-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.points-total {
  font-size: 22px;
  font-weight: 900;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: rgba(59, 130, 246, 0.15);
}

.points-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.points-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.points-item .left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.points-item .reason {
  font-weight: 800;
}

.points-item .meta {
  opacity: 0.75;
  font-size: 12px;
}

.points-item .delta {
  font-weight: 900;
  min-width: 70px;
  text-align: right;
}

/* ===== Admin panel ===== */
.admin-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.grid-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: gap 0.26s var(--ease);
}

.admin-extra {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===============================
   v5.2.65 STYLE AUDIT PATCHES
   (surgical overrides to avoid fighting legacy duplicates)
================================ */

/* Персонал: повертаємо нормальний desktop layout (2 колонки),
   а на мобайлі залишаємо одну колонку */
.grid-form .form-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 18px !important;
}

@media (max-width: 768px) {
  .grid-form .form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
}

/* Пароль + "око": не ламаємо інпут і не зсуваємо кнопку вліво */
.password-wrap {
  position: relative !important;
  display: block !important;
}
.password-wrap input {
  padding-right: 56px !important;
}
/* Око пароля: без бордера, тільки іконка; адаптивний розмір (більше на десктопі, менше на мобільному) */
.password-wrap .toggle-password {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: none !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  transition: color 0.2s ease !important;
}
.password-wrap .toggle-password svg {
  width: 18px !important;
  height: 18px !important;
}
.password-wrap .toggle-password:hover {
  background: transparent !important;
  color: var(--ink) !important;
}
body.theme-light .password-wrap .toggle-password {
  background: transparent !important;
  border: none !important;
  color: rgba(0,0,0,0.5) !important;
}
body.theme-light .password-wrap .toggle-password:hover {
  background: transparent !important;
  color: rgba(0,0,0,0.8) !important;
}
@media (max-width: 768px) {
  .password-wrap .toggle-password {
    height: 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }
  .password-wrap .toggle-password svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }
}

/* AI quick tools: робимо вивід видимим при дії */
#aiChatOutput {
  display: none;
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  line-height: 1.45;
  white-space: pre-wrap;
}
#aiChatOutput.ai-output-visible {
  display: block !important;
}

/* Split panels (AI / Security): не даємо блокам "наїжджати" один на одного */
.admin-tools-split {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
}
.admin-tools-split > * {
  min-width: 0 !important;
}

@media (max-width: 980px) {
  .admin-tools-split {
    display: flex !important;
    flex-direction: column !important;
  }
  .admin-tools-divider {
    display: none !important;
  }
}

/* Export / Report split layout */
.admin-tools-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: start;
}

/* Bottom grid for admin content blocks */
.admin-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.admin-bottom-grid.one-col {
  grid-template-columns: 1fr;
}
.admin-bottom-grid.one-col > .admin-block {
  width: 100%;
}

@media (max-width: 800px) {
  .admin-bottom-grid {
    grid-template-columns: 1fr;
  }
}

.admin-tools-divider {
  width: 1px;
  min-height: 100px;
  background: var(--glass-border);
  border-radius: 999px;
  align-self: stretch;
}

.admin-tools-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 560px) {
  .admin-tools-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 800px) {
  .admin-tools-split {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .admin-tools-divider {
    width: 100%;
    height: 1px;
    min-height: 1px;
  }
}

.admin-block {
  background: linear-gradient(165deg, rgba(18, 22, 32, 0.95), rgba(12, 14, 22, 0.92));
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  border: 1px solid rgba(99, 115, 145, 0.25);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  min-width: 0;
  margin-bottom: 18px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
}

.admin-block:last-child {
  margin-bottom: 0;
}

.admin-block:hover {
  transform: none;
  border-color: rgba(99, 130, 180, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.admin-block-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.3;
  color: var(--ink);
}

.admin-block-sub {
  font-size: 13.5px;
  opacity: 0.7;
  margin: 0 0 16px;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.admin-block-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.admin-block-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 12px;
}

.admin-block-row:last-child {
  margin-bottom: 0;
}

.admin-block-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 120px;
}

.admin-block-row label span {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.8;
}

.muted-text {
  font-size: 11px;
  opacity: 0.72;
}

.muted-text.small {
  font-size: 10px;
}

/* Messages form textarea (was unstyled before) */
#msgBodyInput {
  min-height: 110px;
}

/* Promotions textarea */
.admin-promos-field textarea {
  min-height: 80px;
}

/* ===== Accounts list ===== */
.accounts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.account-card {
  position: relative;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);

  display: flex;
  flex-direction: column;
  gap: 4px;
}

.account-main-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 650;
}

.account-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
}

.account-meta .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  white-space: nowrap;
}

.account-meta .meta-label {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}

.account-role-badge {
  margin-left: auto;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(80, 120, 255, 0.25);
  border: 1px solid rgba(80, 120, 255, 0.35);
  text-transform: capitalize;
  backdrop-filter: blur(4px);
}

/* Legacy class used in JS (kept for compatibility) */
.account-role-tag {
  margin-left: auto;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(80, 120, 255, 0.25);
  border: 1px solid rgba(80, 120, 255, 0.35);
  text-transform: capitalize;
  backdrop-filter: blur(4px);
}

.account-info-btn {
  position: absolute;
  top: 6px;
  right: 42px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent-2);
  display: flex;
  align-items: center;
  justify-content: center;
  /* v2.0.6: Include border-color in transition to prevent jitter */
  transition: background 180ms ease, border-color 180ms ease, opacity 180ms ease;
  z-index: 2;
  box-sizing: border-box;
}

.account-info-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  /* v2.0.6: Keep same border to prevent jitter */
  border-color: rgba(255, 255, 255, 0.14);
}

.account-remove-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 102, 102, 0.95);
  font-size: 16px;
  cursor: pointer;
  opacity: 0.75;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  /* v2.0.6: Include border-color in transition */
  transition: background 180ms ease, opacity 180ms ease, border-color 180ms ease;
  box-sizing: border-box;
}

.account-remove-btn:hover {
  background: rgba(255, 102, 102, 0.15);
  opacity: 1;
  /* v2.0.6: Keep border transparent */
  border-color: transparent;
}

.account-remove-btn:hover {
  opacity: 1;
}

.account-restore-btn {
  position: absolute;
  top: 6px;
  right: 34px;
  border: none;
  color: rgba(34, 197, 94, 0.95);
  font-size: 16px;
  cursor: pointer;
  opacity: 0.78;
}

.account-restore-btn:hover {
  opacity: 1;
}


/* Account action chips (polish) */
.account-activate-btn,
.account-remove-btn,
.account-restore-btn {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  transition: transform 160ms ease, background 180ms ease, opacity 160ms ease;
}

.account-activate-btn:hover,
.account-remove-btn:hover,
.account-restore-btn:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.09);
  opacity: 1;
}

.account-remove-btn {
  color: rgba(255, 90, 110, 0.95);
}

.account-restore-btn {
  color: rgba(80, 220, 160, 0.95);
}

/* Duplicate .account-restore-btn removed - see lines 825-836 */

/* ===== Modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25000; /* v5.2.84: ABOVE bottom nav (9999) */
  opacity: 0;
  animation: fadeIn var(--t) var(--ease) forwards;
  /* v2.4.6: Prevent iOS orientation jump */
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.theme-light .modal-overlay {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.modal-overlay.closing {
  animation: fadeOut var(--t) var(--ease) forwards;
}

.modal {
  width: 94vw;
  max-width: 460px;
  max-height: 90vh;
  /* v2.3.5: Removed radial-gradient glow to fix overflow */
  background: var(--bg-1);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.9);
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden; /* v2.3.5: Clip any overflow */
  overflow-y: auto;
  transform: scale(0.95) translateY(10px);
  animation: modalSlideIn var(--t) var(--ease) forwards;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-overlay.closing .modal {
  animation: modalSlideOut var(--t) var(--ease) forwards;
}

/* =============================================================================
   v5.0.25: SELLER SETTINGS MODAL STYLES
   ============================================================================= */
.settings-group {
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  margin-bottom: 12px;
}

.settings-group:last-child {
  margin-bottom: 0;
}

.settings-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
}

.settings-control {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-lang-btn,
.settings-theme-btn {
  flex: 1;
  min-width: 120px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.settings-lang-btn:hover,
.settings-theme-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.settings-lang-btn.active,
.settings-theme-btn.active {
  background: rgba(59, 125, 255, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

.settings-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.settings-toggle input[type="checkbox"] {
  display: none;
}

.toggle-slider {
  position: relative;
  width: 48px;
  height: 26px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  transition: background 0.2s ease;
}

/* v2.3.6: Fixed - only use ::before for toggle knob, removed ::after */
.toggle-slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Remove any ::after that might cause double dots */
.toggle-slider::after {
  display: none !important;
}

.settings-toggle input:checked + .toggle-slider {
  background: #34c759;
}

.settings-toggle input:checked + .toggle-slider::before {
  transform: translateX(22px);
}

.toggle-label {
  font-size: 14px;
  color: var(--muted);
}

/* Light theme adjustments */
body.theme-light .settings-group {
  background: rgba(0, 0, 0, 0.03);
}

body.theme-light .settings-lang-btn,
body.theme-light .settings-theme-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: #666;
}

body.theme-light .settings-lang-btn:hover,
body.theme-light .settings-theme-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}

body.theme-light .toggle-slider {
  background: rgba(0, 0, 0, 0.15);
}

@keyframes modalSlideOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.modal-title {
  font-size: 15px;
  font-weight: 800;
}

.modal-close-btn {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
}

.modal-close-btn:hover {
  color: #fff;
}

.modal-info {
  font-size: 12px;
  opacity: 0.92;
}

.modal-info-row {
  margin-bottom: 2px;
}

.modal-subtitle {
  margin-top: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.75;
}

.modal-ai-block {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.90);
  border: 1px solid rgba(148, 163, 184, 0.50);
  font-size: 12px;
}

.modal-ai-title {
  font-weight: 800;
  margin-bottom: 4px;
  opacity: 0.96;
}

.modal-ai-text {
  opacity: 0.90;
  line-height: 1.4;
}

/* ===== Activity grid (31 days) ===== */
.activity-grid {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.activity-day {
  width: 36px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: var(--bg-2);
  color: var(--ink);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.10s ease, box-shadow 0.15s ease;
}

.activity-day:hover {
  transform: none;
}

.activity-day.day-empty {
  opacity: 0.50;
}

.activity-day.day-bad {
  background: var(--bad);
  box-shadow: 0 0 10px rgba(255, 77, 79, 0.70);
}

.activity-day.day-mid {
  background: var(--mid);
  box-shadow: 0 0 10px rgba(245, 183, 73, 0.70);
}

.activity-day.day-good {
  background: var(--good);
  box-shadow: 0 0 10px rgba(24, 198, 91, 0.70);
}

/* ===== Calendar (bigger) ===== */
.calendar-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  font-size: 16px;
}

.calendar-cell {
  border-radius: 12px;
  background: rgba(15, 15, 15, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.calendar-head {
  font-weight: 800;
  opacity: 0.85;
  cursor: default;
}

.calendar-empty {
  border-color: transparent;
  background: transparent;
  cursor: default;
}

.calendar-cell.has-data {
  background: rgba(41, 98, 255, 0.18);
  border-color: rgba(41, 98, 255, 0.60);
}

.calendar-cell-hours {
  font-size: 12px;
  opacity: 0.90;
}

.calendar-hint {
  margin-top: 5px;
  font-size: 12px;
  opacity: 0.85;
}

/* ===== Day details ===== */
.day-details-box {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.04);
  /* v2.3.6: Removed glow gradient */
  background: rgba(10, 10, 10, 0.96);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
}

.day-details-title {
  font-size: 13px;
  font-weight: 800;
}

.day-details-date {
  font-size: 12px;
  opacity: 0.80;
}

.day-details-section {
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.day-details-section-title {
  font-size: 12px;
  font-weight: 800;
  opacity: 0.85;
}

.day-details-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.day-details-row span:last-child {
  font-weight: 650;
}

.day-details-note {
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.70;
}

.day-details-description {
  margin: 0;
  font-size: 11px;
  opacity: 0.85;
}

.day-details-actions {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Make modal overlay start at top for long content on phones */
#accountDetailsOverlay {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

#dayDetailsBox,
#calendarGrid {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.day-details-transcripts {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ===== Regions / networks & microphones ===== */
.network-mics-admin {
  margin-top: 14px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(20, 28, 48, 0.95), rgba(15, 20, 35, 0.92));
  border: 1px solid rgba(99, 130, 180, 0.35);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.admin-mics-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-mics-row label {
  flex: 1 1 160px;
  font-size: 12px;
}

.admin-mics-row button {
  align-self: flex-end;
}

.network-mics-hint {
  margin-top: 2px;
  font-size: 11px;
  color: rgba(245, 245, 245, 0.60);
}

.regions-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.regions-list-section {
  background: transparent;
  border: none;
  padding: 6px 0 2px;
  font-weight: 800;
  opacity: 0.85;
}

.regions-list-item {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: linear-gradient(165deg, rgba(20, 28, 48, 0.9), rgba(15, 20, 35, 0.85));
  border: 1px solid rgba(99, 130, 180, 0.25);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.regions-list-item:hover {
  border-color: rgba(99, 130, 180, 0.4);
  transform: translateX(2px);
}

.regions-list-item--muted {
  opacity: 0.78;
  font-size: 12px;
}

/* ===== Script admin ===== */
.script-role-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: rgba(5, 8, 20, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.35);
  margin-bottom: 10px;
}

/* Segmented pill (animated indicator) */
.segmented-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: var(--radius-md);
  background: rgba(10, 14, 25, 0.9);
  border: 1px solid rgba(99, 130, 180, 0.25);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  --pill-left: 0px;
  --pill-width: 0px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* Admin Tabs Wrapper - with arrows on desktop */
.admin-tabs-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  position: relative;
}

/* v5.2.93: Mobile - add spacing from header */
@media (max-width: 560px) {
  .admin-tabs-wrapper {
    margin-top: 8px;
  }
}

/* v5.0.29: Show arrow buttons on desktop */
.admin-tabs-arrow,
.admin-tabs-arrow-left,
.admin-tabs-arrow-right,
#tabsArrowLeft,
#tabsArrowRight {
  display: none; /* v5.2.79: Hidden by default, JS shows when overflow */
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

/* v5.2.79: Show arrows only when wrapper has overflow class */
.admin-tabs-wrapper.has-overflow .admin-tabs-arrow,
.admin-tabs-wrapper.has-overflow #tabsArrowLeft,
.admin-tabs-wrapper.has-overflow #tabsArrowRight {
  display: flex;
}

.admin-tabs-arrow:hover,
.admin-tabs-arrow-left:hover,
.admin-tabs-arrow-right:hover,
#tabsArrowLeft:hover,
#tabsArrowRight:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
  color: #3b82f6;
}

/* Hide arrows on mobile - use bottom nav instead */
@media (max-width: 768px) {
  .admin-tabs-arrow,
  .admin-tabs-arrow-left,
  .admin-tabs-arrow-right,
  #tabsArrowLeft,
  #tabsArrowRight {
    display: none !important;
  }
}

/* Admin Tabs Restructure */
.admin-tabs {
  display: flex;
  align-items: center;
  /* v7.8.0 BUGFIX: was `justify-content: space-between` — CSS bug: when content
     overflows a flex container with space-between, the first items get pinned to
     the left edge and become unreachable via horizontal scroll (scrollLeft can't
     go below 0 but the content's effective start is already < 0). User could not
     scroll back to see "Головна" / "Персонал" tabs after scrolling right.
     Tabs now left-align; "fill full width when few" is sacrificed — scroll must work. */
  justify-content: flex-start;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1 1 auto; /* v7.6.0: fill wrapper, not fit-content */
  min-width: 0;
  padding: 6px 10px; /* v7.6.0: was 6px (too tight) — now 10px horizontal padding inside pill */
  /* Note: actual scroll-behavior is owned by the later .admin-tabs/#adminTabsScroll
     !important block (v7.8.0 fix). Leaving smooth here too for consistency. */
  scroll-behavior: smooth;
  max-width: 100%;
  width: 100%;
  /* v7.6.0: hide scrollbar when content fits; show thin one only on overflow */
  scrollbar-gutter: auto;

  /* Match the "search" pill vibe: subtle glass, not a chunky bubble */
  background: rgba(5, 8, 20, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
  
  /* Thin scrollbar for tab navigation hint */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.admin-tabs::-webkit-scrollbar {
  height: 4px;
}
.admin-tabs::-webkit-scrollbar-track {
  background: transparent;
}
.admin-tabs::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
}
.admin-tabs::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.25);
}

.admin-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  font-weight: 600;
  padding: 11px 16px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--radius-md);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.admin-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  transform: none;
}

.admin-tab-btn.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(59, 125, 255, 0.35), rgba(59, 125, 255, 0.18));
  border-color: rgba(59, 125, 255, 0.5);
  box-shadow:
    0 8px 24px rgba(59, 125, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.admin-tab-btn:active {
  transform: translateY(0px);
}

.tab-content {
  display: none !important;
  animation: tabIn 0.42s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.tab-content.active {
  display: flex !important;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
  flex: 1;
  width: 100%;
  overflow: visible;
}

@keyframes tabIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.segmented-pill .pill-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--pill-width);
  transform: translateX(var(--pill-left));
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition: transform 240ms var(--ease), width 240ms var(--ease);
  pointer-events: none;
}

.seg-btn {
  border: none;
  border-radius: var(--radius-pill);
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 650;
  background: transparent;
  color: rgba(245, 245, 245, 0.58);
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: background 0.15s ease, color 0.15s ease, transform 180ms var(--ease);
}

.segmented-pill .seg-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: none;
}

.segmented-pill .seg-btn:active {
  transform: none;
}

.segmented-pill .seg-btn.is-active,
.segmented-pill .script-role-btn-active {
  color: #fff;
}

.segmented-pill .script-role-btn-active {
  background: transparent;
}

.script-role-btn {
  border: none;
  border-radius: var(--radius-pill);
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 650;
  background: transparent;
  color: rgba(245, 245, 245, 0.58);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 180ms var(--ease);
}

.script-role-btn:hover {
  transform: none;
}

.script-role-btn-active {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff;
}

.script-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.script-label {
  font-size: 13px;
  color: rgba(245, 245, 245, 0.58);
}

.script-textarea {
  width: 100%;
  min-height: 140px;
}

.script-actions-row {
  margin-top: 10px;
  align-items: center;
  gap: 10px;
}

/* ===== Dividers / tables / rule items ===== */
.admin-divider {
  height: 1px;
  width: 100%;
  margin: 12px 0;
  background: rgba(255, 255, 255, 0.08);
  border: none;
}

.admin-table {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-table-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: rgba(10, 10, 10, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-table-row .tag {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0.95;
}

.admin-table-row .grow {
  flex: 1 1 auto;
  min-width: 140px;
}

.admin-table-row .small-input {
  width: 96px;
}

/* Rule items form - new clean layout */
.rule-items-form-container {
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 16px;
}

.rule-items-form-grid {
  display: grid;
  grid-template-columns: 1.5fr 100px 150px 1.5fr auto;
  gap: 14px;
  align-items: end;
}

.rule-items-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rule-items-form-grid label span {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
}

@media (max-width: 900px) {
  .rule-items-form-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .rule-items-form-grid label:nth-child(4) {
    grid-column: 1 / -1;
  }
  
  .rule-items-form-grid button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 500px) {
  .rule-items-form-grid {
    grid-template-columns: 1fr;
  }
}

.rule-items-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

/* Light theme */
body.theme-light .rule-items-form-container {
  background: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Legacy class - keep for compatibility */
.rule-items-form {
  display: grid;
  grid-template-columns: 1.2fr 110px 160px 1.4fr auto;
  gap: 10px;
  align-items: end;
}

@media (max-width: 780px) {
  .rule-items-form {
    grid-template-columns: 1fr;
  }

  .rule-items-form button {
    width: 100%;
  }
}

/* Segmented control (Active / Trash) */
.segmented {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  gap: 3px;
}

.segmented>button {
  min-height: 34px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
}

.segmented>button.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: rgba(255, 255, 255, 0.75);
}

.segmented>button.btn-ghost:hover:enabled {
  background: rgba(255, 255, 255, 0.08);
}

.segmented>button.btn-primary {
  box-shadow: none;
}

/* ===== Points admin (responsive) ===== */
.points-admin-row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1.8fr auto;
  gap: 14px;
  align-items: end;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.points-admin-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.points-admin-row label span {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
}

@media (max-width: 820px) {
  .points-admin-row {
    grid-template-columns: 1fr 1fr;
  }
  
  .points-admin-row label:nth-child(3) {
    grid-column: 1 / -1;
  }

  .points-admin-row button {
    width: 100%;
    grid-column: 1 / -1;
  }
}

.points-admin-table {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ===== Stop confirm modal ===== */
.stop-confirm-card {
  max-width: 420px;
}

.stop-confirm-card .modal-text {
  margin-top: 8px;
  opacity: 0.92;
  line-height: 1.4;
}

.stop-confirm-card .modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

/* ===== Pause confirm modal v2.0.5 ===== */
.pause-confirm-card {
  max-width: 420px;
}

.pause-confirm-card .modal-text {
  margin-top: 8px;
  opacity: 0.92;
  line-height: 1.4;
}

.pause-confirm-card .modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

.pause-confirm-card .btn-primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  color: white !important;
}

/* ===== AI daily demo ===== */
.ai-daily-demo {
  margin-top: 10px;
}

.ai-daily-row {
  display: grid;
  grid-template-columns: 1fr 180px 180px;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
}

.ai-daily-field span {
  display: block;
  font-size: 12px;
  opacity: 0.80;
  margin-bottom: 4px;
}

.ai-daily-textarea {
  min-height: 140px;
}

.ai-daily-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.ai-daily-output {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.ai-daily-output .row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ai-daily-output .pill {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
}

.ai-daily-output ul {
  margin: 6px 0 0 18px;
}

.ai-daily-details {
  margin-top: 10px;
}

.ai-daily-details summary {
  cursor: pointer;
  opacity: 0.90;
}

.script-preview {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 10, 10, 0.55);
  overflow-x: auto;
}

@media (max-width: 720px) {
  .ai-daily-row {
    grid-template-columns: 1fr;
  }
}

/* ===== Footer ===== */
.footer {
  width: 100%;
  margin-top: 6px;
  text-align: center;
  font-size: 10px;
  opacity: 0.72;
}

.footer-text {
  padding-top: 2px;
}

/* ===== Desktop / Tablet ===== */

/* ===== Extra UI blocks (coverage for all HTML/JS classes) ===== */

/* Auth card wrapper */
.auth-card {
  max-width: 460px;
  margin: 0 auto;
}

/* v5.2.67: Back to landing link on login screen */
/* v5.2.67: Back to landing link on login screen — v7.0.0 SQUARE 10px */
.login-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.login-back-link:hover {
  background: var(--accent-muted);
  color: var(--accent);
}

.login-back-link .back-icon {
  font-size: 16px;
}

/* v6.5.2: Auth mode animated swap (password ↔ code) */
.auth-modes-container {
  position: relative;
  overflow: hidden;
}

.auth-mode {
  display: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-mode.auth-mode-active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Animate in */
.auth-mode.auth-mode-entering {
  display: block;
  opacity: 0;
  transform: translateY(16px);
}

/* Animate out */
.auth-mode.auth-mode-leaving {
  display: block;
  opacity: 0;
  transform: translateY(-10px);
}

/* Mode switch button */
.auth-mode-switch-btn {
  font-size: 13px;
  color: var(--accent, #3b82f6);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.15s ease;
  font-weight: 500;
}

.auth-mode-switch-btn:hover {
  background: rgba(59, 130, 246, 0.08);
  text-decoration: none;
}

/* Code form styling */
.auth-code-form {
  text-align: center;
  padding: 8px 0;
}

/* Auth-screen icons are inline SVG, not emoji: one shape on every OS, and it
   inherits the accent colour instead of whatever the emoji font picks. */
.auth-code-icon {
  --auth-icon-size: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  color: var(--accent, #3b7dff);
  line-height: 0;
}

.auth-code-icon svg {
  width: var(--auth-icon-size);
  height: var(--auth-icon-size);
  display: block;
}

/* ── MicHelper icon set (icons.js) ────────────────────────────────────────
   An emoji sat on the text baseline, so "📋 Правила" always looked a little
   dropped, and it came in at whatever size and colour the emoji font felt
   like. These sit on the middle of the line box, scale with the text (1em by
   default) and take currentColor, so an icon inside a red error line is red
   without anyone declaring it. --mh-i-size overrides the size per instance. */
.mh-i {
  --mh-i-size: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mh-i-size);
  height: var(--mh-i-size);
  flex: 0 0 auto;
  vertical-align: -0.16em;
  line-height: 0;
}

.mh-i svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ✅/❌/⚠️ meant something. The shape alone would not carry it, so the tone
   comes from the same tokens the rest of the app uses for those states. */
.mh-i--ok     { color: var(--success, #22c55e); }
.mh-i--bad    { color: var(--danger, #ef4444); }
.mh-i--warn   { color: var(--warning, #fbbf24); }
.mh-i--accent { color: var(--accent, #3b7dff); }

/* Language buttons used 🇺🇦/🇬🇧. A flag emoji is a picture on macOS and the
   bare letters "UA"/"GB" on Windows, so the same button looked like two
   different controls. The topbar already uses a lettered pill — reuse it. */
.mh-lang-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 1px 5px;
  margin-right: 6px;
  border: 1px solid currentColor;
  border-radius: 5px;
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
  opacity: .75;
  vertical-align: -0.08em;
}

/* An icon at 1em next to 15-16px bold text reads as undersized — the emoji it
   replaced was drawn well above its nominal size. Give the places where an
   icon labels a whole row a little more room, and hold them all at one weight
   so nothing looks louder than its neighbour. */
.seller-section-title .mh-i,
.seller-setting-label .mh-i,
.settings-label .mh-i,
.card-title .mh-i,
.pm-section__title .mh-i {
  --mh-i-size: 17px;
  margin-right: 3px;
  opacity: .72;
}

.seller-rule-name .mh-i,
.seller-nav-btn .mh-i,
.seller-desktop-nav-btn .mh-i {
  --mh-i-size: 15px;
  margin-right: 2px;
}

/* Diagnostics rows used inline colours next to a ✅/⚠️; the classes keep the
   meaning without a hard-coded hex that ignores the light theme. */
.diag-ok    { color: var(--success, #22c55e); display: inline-flex; align-items: center; gap: 5px; }
.diag-warn  { color: var(--warning, #f59e0b); display: inline-flex; align-items: center; gap: 5px; }
.diag-muted { color: var(--muted, #6b7280); display: inline-flex; align-items: center; gap: 5px; }

.mh-i--spin svg { animation: mh-i-spin 1.1s linear infinite; }

@keyframes mh-i-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mh-i--spin svg { animation: none; }
}

.auth-code-input {
  text-align: center !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 6px !important;
  max-width: 200px !important;
  margin: 0 auto !important;
  display: block !important;
  /* v8.13.0: тепер 6-значне число — uppercase не потрібен, але збільшили читабельність */
}

/* Make the code input look premium */
.auth-code-input::placeholder {
  letter-spacing: 3px;
  font-weight: 400;
  opacity: 0.4;
}

body.theme-light .login-back-link {
  background: var(--surface-raised);
  color: var(--muted);
}

body.theme-light .login-back-link:hover {
  background: var(--accent-muted);
  color: var(--accent);
}

/* Generic analytics summary (manager) */
.analytics-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 520px) {
  .analytics-summary {
    grid-template-columns: 1fr;
  }
}

/* Promotions — seller */
.seller-promos-empty {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--stroke);
  opacity: 0.8;
}

.seller-promo-item {
  padding: 12px 12px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--stroke);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.seller-promo-title {
  font-weight: 850;
}

.seller-promo-desc {
  opacity: 0.86;
  line-height: 1.35;
}

.seller-promo-dates {
  opacity: 0.75;
  font-size: 12px;
}

/* Promotions — admin list */
.admin-promo-item {
  padding: 12px 12px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--stroke);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-promo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-promo-title {
  font-weight: 850;
}

.admin-promo-badge {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(24, 198, 91, 0.14);
  border: 1px solid rgba(24, 198, 91, 0.22);
}

.admin-promo-badge.inactive {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--stroke);
  opacity: 0.85;
}

.admin-promo-desc {
  opacity: 0.86;
  line-height: 1.35;
}

.admin-promo-dates {
  opacity: 0.75;
  font-size: 12px;
}

.admin-promo-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* Manager AI block */
.manager-ai-text {
  margin-top: 8px;
  padding: 12px 12px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--stroke);
  line-height: 1.4;
}

.manager-ai-empty {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--stroke);
  opacity: 0.8;
}

/* Manager Top */
.manager-top-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.manager-top-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.manager-top-empty {
  opacity: 0.75;
  padding: 10px 12px;
  border: 1px dashed var(--stroke);
  border-radius: var(--radius-md);
}

.manager-top-item {
  padding: 12px 12px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--stroke);
}

.manager-top-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 800;
}

.manager-top-item-sub {
  margin-top: 6px;
  opacity: 0.78;
  font-size: 12px;
}

/* Customer reactions metrics */
.reactions-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.reaction-metric {
  padding: 12px 12px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--stroke);
  min-width: 220px;
  flex: 1 1 220px;
}

.reaction-metric-wide {
  flex: 1 1 100%;
  min-width: 0;
}

.reaction-metric-label {
  opacity: 0.78;
  font-size: 12px;
  margin-bottom: 6px;
}

.reaction-metric-value {
  font-size: 24px;
  font-weight: 900;
}

.reactions-demand-row {
  margin-top: 10px;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--stroke);
  font-size: 12px;
}

.tag-pill-count {
  opacity: 0.8;
  font-weight: 800;
}

/* Calendar day details */
.day-details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Modal card (Stop confirm) */
.modal-card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-float);
}

/* Promotions admin wrappers (optional) */
.admin-promos-form,
.admin-promos-list {
  width: 100%;
}

.admin-promos-row {
  width: 100%;
}

.admin-promos-active {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 18px;
}

/* Toggle switch for promo active */
.admin-promos-active input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  position: relative;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}

.admin-promos-active input[type="checkbox"]::after {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform var(--t) var(--ease);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.admin-promos-active input[type="checkbox"]:checked {
  background: rgba(24, 198, 91, 0.35);
  border-color: rgba(24, 198, 91, 0.55);
}

.admin-promos-active input[type="checkbox"]:checked::after {
  transform: translateX(22px);
}

.admin-promos-active span {
  color: var(--muted);
  font-size: 13px;
}

.admin-block-regions {
  width: 100%;
}

.seller-rules-card .admin-table {
  margin-top: 12px;
}

@media (min-width: 768px) {
  .app-wrapper {
    /* Wider desktop layout — use more screen width, no narrow column */
    max-width: min(1680px, 96vw);
    padding: 24px 24px 28px;
    gap: 18px;
  }

  .top-bar {
    /* v7.6.0: raised from 1600px → 1920px to fit all admin tabs on ultrawide monitors */
    max-width: min(1920px, 94vw);
    margin: 0 auto;
  }

  .user-label {
    display: inline;
  }

  .main-content {
    /* v7.6.0: raised from 1600px → 1920px to fit all admin tabs on ultrawide monitors */
    max-width: min(1920px, 94vw);
    margin: 0 auto;
  }

  .card {
    border-radius: 22px;
    padding: 22px 22px 20px;
  }

  .timer {
    font-size: 36px;
  }

  .grid-form .form-row {
    flex-direction: row;
  }

  .grid-form .form-row>label {
    flex: 1;
    transition: flex 0.26s var(--ease), opacity 0.2s var(--ease), transform 0.2s var(--ease), max-height 0.26s var(--ease);
  }

  .activity-grid {
    gap: 6px;
  }

  .activity-day {
    width: 42px;
    height: 34px;
  }

  .calendar-grid {
    font-size: 18px;
    gap: 8px;
  }

  .calendar-cell {
    min-height: 60px;
  }

  .footer {
    font-size: 11px;
  }
}

/* ============================================================
   Dark form hygiene (kill "white" inputs), smoked readonly,
   subtle motion
   ============================================================ */

html,
body {
  color-scheme: dark;
}

/* Autofill (Chrome/Edge) — prevent white background */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill,
.field textarea:-webkit-autofill:hover,
.field textarea:-webkit-autofill:focus,
.field select:-webkit-autofill,
.field select:-webkit-autofill:hover,
.field select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink) !important;
  box-shadow: 0 0 0 1000px rgba(10, 14, 22, 0.92) inset !important;
  border: 1px solid var(--edge) !important;
  transition: background-color 9999s ease-out 0s;
}

/* Readonly / disabled — keep dark, but "smoked" */
.field input[readonly],
.field textarea[readonly],
.field select[readonly],
.field input:disabled,
.field textarea:disabled,
.field select:disabled {
  background: rgba(10, 14, 22, 0.55) !important;
  border-color: rgba(120, 160, 255, 0.18) !important;
  color: rgba(233, 239, 255, 0.88) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10) inset;
}

.field input[readonly]::placeholder,
.field textarea[readonly]::placeholder,
.field input:disabled::placeholder,
.field textarea:disabled::placeholder {
  color: rgba(233, 239, 255, 0.55);
}

/* Date inputs / native UI bits */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  color-scheme: dark;
}

select option {
  background: #0a0d13;
  color: var(--ink);
}

/* Remember checkbox — DEPRECATED: see end of file for toggle switch style */
/* .remember-row styles moved to line ~49107 */

/* Subtle motion */
@keyframes mhFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mhSoftPulse {
  0% {
    box-shadow: 0 0 0 rgba(80, 120, 255, 0.00);
  }

  50% {
    box-shadow: 0 0 22px rgba(80, 120, 255, 0.18);
  }

  100% {
    box-shadow: 0 0 0 rgba(80, 120, 255, 0.00);
  }
}

.card {
  animation: mhFadeUp 340ms ease-out both;
}

.btn {
  transition: transform 120ms ease, box-shadow 180ms ease, filter 180ms ease, background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}

.btn:hover {
  filter: brightness(1.03);
}

.btn:active {
  transform: none;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  animation: mhSoftPulse 500ms ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }

  .btn,
  .remember-row input[type="checkbox"] {
    transition: none;
  }

  .field input:focus,
  .field textarea:focus,
  .field select:focus {
    animation: none;
  }
}

/* The password control is only an icon — no pale square and no diagonal slash. */
html body #accountForm .password-input-wrapper .password-toggle,
html body #accountForm .password-input-wrapper .password-toggle:hover,
html body #accountForm .password-input-wrapper .password-toggle:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}
html body #accountForm .password-input-wrapper .password-toggle .pw-eye-slash {
  display: none !important;
}

/* The floating top bar overlays the page, so only the desktop navigation needs
   a top anchor below it. This keeps its title visible without reintroducing a
   blank strip above the working area. */
@media (min-width: 769px) {
  html body.app-ready:not(.auth-visible) #adminPanel > .desktop-sidebar-shell,
  html body.app-ready:not(.auth-visible) #adminPanel > .desktop-sidebar-shell:hover,
  html body.app-ready:not(.auth-visible) #adminPanel > .desktop-sidebar-shell:focus-within {
    top: 104px !important;
    height: calc(100dvh - 120px) !important;
    max-height: calc(100dvh - 120px) !important;
  }
}

.is-hidden:not(.hidden-field) {
  display: none !important;
}


/* ===== User meta card ===== */
.user-meta-card {
  margin-bottom: 14px;
}

.user-meta-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.user-meta-login {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.user-meta-role {
  font-size: 13px;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.user-meta-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.user-meta-row-label {
  font-size: 13px;
  opacity: 0.85;
}

.user-meta-row-value {
  font-size: 14px;
  font-weight: 700;
}

/* ===== Welcome toast ===== */
.welcome-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(18, 18, 18, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  opacity: 0;
  /* Never block clicks/taps on UI */
  pointer-events: none;
}

.welcome-toast.show {
  animation: toastIn 280ms ease-out forwards, toastOut 380ms ease-in forwards;
  animation-delay: 0ms, var(--toast-out-delay, 2300ms);
}

.welcome-toast.closing {
  animation: toastOut 240ms var(--ease) forwards;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px) scale(0.98);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: blur(0);
  }

  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px) scale(0.99);
    filter: blur(4px);
  }
}


/* ===== Toast variants + close ===== */
.welcome-toast.toast-error {
  background: rgba(120, 12, 24, 0.75);
  border-color: rgba(255, 64, 80, 0.25);
}

.welcome-toast.toast-success {
  background: rgba(12, 90, 40, 0.70);
  border-color: rgba(64, 255, 140, 0.18);
}

.welcome-toast .toast-text {
  flex: 1;
  min-width: 0;
}

.welcome-toast .toast-close {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  width: 30px;
  height: 30px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
}

.welcome-toast .toast-close:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
}

/* ===== Modal form rows ===== */
.modal-body {
  padding: 12px 0 0 0;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.form-label {
  font-size: 12px;
  opacity: 0.85;
}

/* Two-column helper (used in some forms) */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.two-col .col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (max-width: 900px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

.modal-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

/* ===== Small card entrance ===== */
.card.animate-in {
  animation: cardIn 260ms ease-out both;
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.user-label {
  display: none !important;
}


/* ===== Preview Tables + Scroll Fade ===== */
.preview-block {
  margin-top: 10px;
}

/* preview table toolbar */
.table-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 8px;
}

.table-tools-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  flex: 1;
}

.table-tools-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-search {
  flex: 1;
  min-width: 180px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(8, 8, 8, 0.55);
  color: var(--ink);
  outline: none;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.table-search:focus {
  border-color: rgba(41, 98, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(41, 98, 255, 0.18);
}

.table-count {
  font-size: 12px;
  color: var(--muted);
  opacity: 0.9;
}

.btn-ghost-sm {
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(18, 18, 18, 0.65);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  padding: 8px 12px;
  min-height: 36px;
  cursor: pointer;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
}

.btn-ghost-sm:hover:enabled {
  background: rgba(28, 28, 28, 0.75);
  transform: translateY(-0.5px);
}

@media (max-width: 560px) {
  .table-tools {
    flex-direction: column;
    align-items: stretch;
  }

  .table-tools-left {
    min-width: 0;
  }

  .table-tools-right {
    justify-content: flex-end;
  }
}

.table-scroll thead th {
  cursor: pointer;
}

.table-scroll thead th.sorted-asc::after,
.table-scroll thead th.sorted-desc::after {
  margin-left: 6px;
  font-size: 10px;
  opacity: 0.75;
}

.table-scroll thead th.sorted-asc::after {
  content: "▲";
}

.table-scroll thead th.sorted-desc::after {
  content: "▼";
}

.table-scroll {
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

/* v5.2.63: Improved table readability */
.table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
  border-bottom: 1px solid var(--stroke-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  letter-spacing: -0.01em;
}

.table-scroll th,
.table-scroll td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--stroke);
  white-space: nowrap;
  font-size: 13px;
  color: var(--ink);
}

.table-scroll tbody td {
  color: var(--muted);
}

.table-scroll tbody tr:hover {
  background: var(--accent-muted);
}

.table-scroll tbody tr:hover td {
  color: var(--ink);
}

.scroll-fade {
  position: relative;
}

.scroll-fade::before,
.scroll-fade::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 22px;
  pointer-events: auto;
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  z-index: 5;
}

.scroll-fade::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
}

.scroll-fade::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
}

.scroll-fade.fade-top::before {
  opacity: 1;
}

.scroll-fade.fade-bottom::after {
  opacity: 1;
}


/* ===== Page fog - COMPLETELY DISABLED v2.3.6 ===== */
.page-fog,
#pageFog,
div.page-fog,
div#pageFog {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
}

/* fog-boost removed - fog is disabled */

/* ===== Full-screen welcome overlay ===== */

/* ===== MicHelper Theme Overrides ===== */
.hidden-field.gone { display: none !important; }

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 13.2px;
  font-weight: 750;
  opacity: 0.95;
}
.brand-logo{
  width:26px;
  height:26px;
  display:block;
}
.brand-name{
  line-height:1;
}

.icon-btn{
  border: 1px solid var(--stroke);
  background: transparent;
  color: var(--ink);
  width: 34px;
  height: 30px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover{ transform: none; }
.icon-btn:active{ transform: translateY(0); }

/* page-fog already disabled above */
/* DARK = restrained, no glass */
body.theme-dark{
  background: #0b0b0c;
  --bg-0: #0b0b0c;
  --bg-1: #0b0b0c;
  --bg-2: #0b0b0c;

  --panel: rgba(14, 16, 20, 0.96);
  --panel-2: rgba(18, 20, 26, 0.96);

  --ink: #f5f5f5;
  --muted: rgba(245,245,245,0.72);
  --muted-2: rgba(245,245,245,0.58);

  --stroke: rgba(255,255,255,0.10);
  --stroke-2: rgba(255,255,255,0.16);

  --shadow-card: 0 12px 30px rgba(0,0,0,0.55);
  --shadow-float: 0 10px 24px rgba(0,0,0,0.45);
}
body.theme-light{
  background: #f6f7f9;
  --bg-0: #f6f7f9;
  --bg-1: #f6f7f9;
  --bg-2: #f6f7f9;

  --panel: rgba(255, 255, 255, 0.98);
  --panel-2: rgba(255, 255, 255, 0.96);

  --ink: #0b0b0c;
  --muted: rgba(11,11,12,0.62);
  --muted-2: rgba(11,11,12,0.48);

  --stroke: rgba(0,0,0,0.10);
  --stroke-2: rgba(0,0,0,0.14);

  --shadow-card: 0 14px 40px rgba(0,0,0,0.10);
  --shadow-float: 0 10px 22px rgba(0,0,0,0.08);

--page-bg: #f6f7f9;
--page-glow: none;
--page-glow-opacity: 0;
--fog-bg: var(--panel);
--fog-opacity: 1;
}
/* Header consistency - DEPRECATED: main .top-bar at line ~332 */
/* .top-bar min-height moved to main definition */
body.theme-light .lang-switch{
  background: var(--panel-2);
}
body.theme-light .lang-btn{
  color: rgba(0,0,0,0.62);
}
body.theme-light .lang-btn.active{
  background: var(--panel);
}

/* Cards / panels — v2.4.8: removed !important box-shadow, use border instead */
.card,
.user-card,
.admin-block,
.meta-card,
.report-card,
.calendar-card,
.toast,
.top-employee-card{
  background: var(--panel);
  box-shadow: none;
  border: 1px solid var(--stroke, rgba(255,255,255,0.06));
}

/* Dark theme admin-block - glass effect */
body.theme-dark .admin-block {
  background: var(--panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* v2.4.8: hover shadow only on pointer devices, no !important */
@media (hover: hover) and (pointer: fine) {
  body.theme-dark .card:hover,
  body.theme-dark .admin-block:hover,
  body.theme-light .card:hover,
  body.theme-light .admin-block:hover{
    box-shadow: var(--shadow-md);
    border-color: rgba(255, 255, 255, 0.12);
  }
}

/* v2.4.8: kill sticky hover on touch */
@media (hover: none) {
  .card:hover, .admin-block:hover, .user-card:hover,
  .meta-card:hover, .report-card:hover, .calendar-card:hover,
  .top-employee-card:hover, .seller-promo-item:hover,
  .seller-setting-item:hover, .mobile-nav-item:hover {
    box-shadow: none !important;
  }
}

/* v2.4.8: hover border only on pointer devices */
@media (hover: hover) and (pointer: fine) {
  body.theme-dark .admin-block:hover {
    border-color: rgba(255, 255, 255, 0.12);
  }
}

body.theme-dark .admin-tools-divider {
  background: var(--fog-bg);
  background: var(--fog-bg);
  border: 1px solid var(--stroke) !important;
}
body.theme-light input::placeholder,
body.theme-light textarea::placeholder{
  color: rgba(11,11,12,0.45) !important;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--ink) !important;
  box-shadow: 0 0 0 1000px var(--panel-2) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* ===== LIGHT THEME FIXES (Issue #1) ===== */

/* INPUTS: White background in light theme */
body.theme-light :where(.vertical-form, .grid-form, .admin-block, .network-mics-admin, .points-admin-row, .ai-daily-demo, .modal) :where(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: #0b0b0c !important;
}

body.theme-light :where(.vertical-form, .grid-form, .admin-block, .network-mics-admin, .points-admin-row, .ai-daily-demo, .modal) :where(input:not([type=checkbox]):not([type=radio]), select, textarea)::placeholder {
  color: rgba(0, 0, 0, 0.4) !important;
}

body.theme-light :where(.vertical-form, .grid-form, .admin-block, .network-mics-admin, .points-admin-row, .ai-daily-demo, .modal) :where(input:not([type=checkbox]):not([type=radio]), select, textarea):focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(41, 98, 255, 0.15) !important;
}

body.theme-light input[type="date"],
body.theme-light input[type="time"],
body.theme-light input[type="datetime-local"] {
  color-scheme: light !important;
}

body.theme-light select option {
  background: #ffffff !important;
  color: #0b0b0c !important;
}

/* Inner panels in light theme should be light, not dark */
body.theme-light .admin-block-row,
body.theme-light .report-controls,
body.theme-light .script-field,
body.theme-light .grid-form,
body.theme-light .points-admin-row,
body.theme-light .rewards-form,
body.theme-light .mic-allocation-row,
body.theme-light .network-mics-row {
  background: rgba(245, 247, 250, 0.8);
  border-radius: var(--radius-md);
}

/* Segmented controls in light theme */
body.theme-light .segmented-pill,
body.theme-light .admin-tabs {
  background: rgba(0, 0, 0, 0.05);
}

body.theme-light .seg-btn,
body.theme-light .admin-tab-btn {
  color: rgba(0, 0, 0, 0.6) !important;
}

body.theme-light .seg-btn.is-active,
body.theme-light .admin-tab-btn.active,
body.theme-light .admin-tab-btn.is-active {
  background: #ffffff !important;
  color: var(--accent) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* ===== BUTTON CONSISTENCY (Issue #2) ===== */

/* Light theme buttons */
body.theme-light .btn-secondary {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  color: #0b0b0c !important;
}

body.theme-light .btn-secondary:hover:enabled {
  background: #f5f7fa !important;
}

body.theme-light .btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0b0b0c !important;
}

body.theme-light .btn-ghost:hover:enabled {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* Primary button stays the same (blue) */
body.theme-light .btn-primary {
  box-shadow: 0 4px 14px rgba(41, 98, 255, 0.3) !important;
}

/* Accent button (green) */
body.theme-light .btn-accent {
  box-shadow: 0 4px 14px rgba(24, 198, 91, 0.25) !important;
}

/* Table headers in light theme */
body.theme-light .table-header,
body.theme-light th {
  background: var(--fog-bg);
}

/* Table rows in light theme */
body.theme-light .table-row:hover,
body.theme-light tr:hover {
  background: var(--fog-bg);
}

/* v5.2.63: Light theme table-scroll */
body.theme-light .table-scroll {
  background: var(--surface);
  border-color: var(--stroke);
}

body.theme-light .table-scroll thead th {
  background: var(--bg-1);
  color: var(--ink);
}

body.theme-light .table-scroll tbody td {
  color: rgba(26, 26, 46, 0.72);
}

body.theme-light .table-scroll tbody tr:hover td {
  color: var(--ink);
}

/* Admin block in light theme - cleaner look */
body.theme-light .admin-block {
  background: var(--fog-bg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

body.theme-light .admin-block:hover {
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

body.theme-light .admin-block-title {
  color: #1a1a1a !important;
}

/* Admin tools divider in light theme */
body.theme-light .admin-tools-divider {
  background: var(--fog-bg);
  background: var(--fog-bg);
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
}

/* Modal in light theme */
body.theme-light .modal-card {
  background: var(--fog-bg);
}

body.theme-light .modal-overlay {
  background: var(--fog-bg);
  background: var(--fog-bg);
}

/* Light theme account cards */
body.theme-light .account-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

body.theme-light .account-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 4px 20px rgba(41, 98, 255, 0.12) !important;
}

/* ===== DATA TAB - EXPORT REDESIGN ===== */

/* Data actions grid - 3 cards in a row */
.data-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

@media (max-width: 768px) {
  .data-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .data-actions-grid {
    grid-template-columns: 1fr;
  }
}

/* RBAC: Hide export block for unauthorized roles */
body[data-user-role="seller"] .export-block-rbac,
body[data-user-role="region_manager"] .export-block-rbac,
body[data-user-role="regional_manager"] .export-block-rbac {
  display: none !important;
}

/* Individual action card */
.data-action-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--fog-bg);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}

.data-action-card:hover {
  border-color: var(--accent-2);
  transform: translateY(-2px);
}

.data-action-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.data-action-header svg {
  color: var(--accent-2);
  flex-shrink: 0;
}

.data-action-buttons {
  display: flex;
  gap: 8px;
}

/* Clean data button style */
.btn-data {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.btn-data:hover {
  background: var(--stroke);
  border-color: var(--accent-2);
}

.btn-data:active {
  transform: scale(0.97);
}

.btn-data-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.btn-data-accent:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
}

/* Light theme */
body.theme-light .data-action-card {
  background: #f8f9fa;
  border-color: rgba(0,0,0,0.08);
}

body.theme-light .data-action-card:hover {
  border-color: var(--accent-2);
}

body.theme-light .btn-data {
  background: white;
  border-color: rgba(0,0,0,0.12);
}

body.theme-light .btn-data:hover {
  background: #f0f0f0;
}

.admin-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .admin-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Export Section */
.export-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.export-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--fog-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
  transition: border-color var(--t) var(--ease);
}

.export-row:hover {
  border-color: var(--accent-2);
}

.export-row .export-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.export-buttons {
  display: flex;
  gap: 8px;
}

.export-buttons .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
}

.export-buttons .btn-secondary svg {
  opacity: 0.7;
}

/* Import Section */
.import-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.import-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--fog-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
  transition: border-color var(--t) var(--ease);
}

.import-row:hover {
  border-color: var(--accent-2);
}

.import-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.import-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.import-hint {
  font-size: 12px;
  color: var(--muted);
}

.import-row .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
}

.import-row .btn-secondary svg {
  opacity: 0.7;
}

/* Reports Controls */
.report-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-top: 12px;
}

.report-dates {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.report-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.report-field span {
  font-size: 12px;
  color: var(--muted);
}

.report-field input,
.report-field select {
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
}

.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.report-actions .btn-primary,
.report-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.report-actions .btn-primary svg,
.report-actions .btn-secondary svg {
  opacity: 0.8;
}

/* ===== DAYS SELECTOR (Beautiful pill buttons) ===== */
.days-selector {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.2);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.days-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(33.333% - 4px);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 4px 12px rgba(41, 98, 255, 0.35);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}

.days-btn {
  position: relative;
  z-index: 2;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}

.days-btn:hover:not(.is-active) {
  color: rgba(255, 255, 255, 0.75);
  transform: translateY(-1px);
}

.days-btn.is-active {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Animate indicator position based on active button */
.days-selector:has(.days-btn:nth-child(2).is-active) .days-indicator {
  transform: translateX(0);
}

.days-selector:has(.days-btn:nth-child(3).is-active) .days-indicator {
  transform: translateX(calc(100% + 1px));
}

.days-selector:has(.days-btn:nth-child(4).is-active) .days-indicator {
  transform: translateX(calc(200% + 2px));
}

/* Light theme */
body.theme-light .days-selector {
  background: rgba(241, 245, 249, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.theme-light .days-btn {
  color: rgba(51, 65, 85, 0.6);
}

body.theme-light .days-btn:hover:not(.is-active) {
  color: rgba(51, 65, 85, 0.85);
}

body.theme-light .days-btn.is-active {
  color: #fff;
}

/* Light theme */
body.theme-light .export-row,
body.theme-light .import-row {
  background: #f8f9fa;
  border-color: rgba(0,0,0,0.08);
}

body.theme-light .export-row:hover,
body.theme-light .import-row:hover {
  border-color: var(--accent-2);
}

/* Mobile */
@media (max-width: 600px) {
  .export-row,
  .import-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .export-buttons,
  .import-row .btn-secondary {
    width: 100%;
  }
  
  .export-buttons {
    flex-direction: column;
  }
  
  .export-buttons .btn-secondary {
    width: 100%;
    justify-content: center;
  }
  
  .report-dates {
    flex-direction: column;
    width: 100%;
  }
  
  .report-field {
    width: 100%;
  }
  
  .report-field input,
  .report-field select {
    width: 100%;
  }
}

/* Legacy support - keeping old class but redirecting */
.export-btn-group {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.export-btn-group .export-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  min-width: 90px;
}

.export-btn-group .btn-secondary {
  padding: 8px 14px;
  font-size: 13px;
  min-width: auto;
}

.report-quick-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.report-quick-actions .btn-ghost-sm {
  padding: 6px 10px;
  font-size: 12px;
}

/* ===== MICROPHONES TABLE LAYOUT (Issue #5) ===== */

.mics-summary {
  display: flex;
  gap: 32px;
  padding: 16px 20px;
  background: linear-gradient(165deg, rgba(18, 22, 32, 0.7), rgba(12, 14, 22, 0.5));
  border-radius: var(--radius-md);
  margin-bottom: 18px;
}

.mics-summary-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mics-summary-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted-2);
  font-weight: 500;
}

.mics-summary-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}

.mics-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
}

.mics-table th {
  text-align: left;
  padding: 12px 14px;
  background: rgba(18, 22, 32, 0.6);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted-2);
  border-bottom: 1px solid rgba(99, 130, 180, 0.2);
}

.mics-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(99, 130, 180, 0.12);
}

.mics-table tr:last-child td {
  border-bottom: none;
}

.mics-table tr:hover td {
  background: rgba(59, 125, 255, 0.05);
}

.mics-table input[type="number"] {
  width: 85px;
  padding: 8px 12px;
  text-align: center;
  border-radius: var(--radius-sm);
}

body.theme-light .mics-summary {
  background: var(--fog-bg);
  background: var(--fog-bg);
  padding: 40px 20px;
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: var(--fog-opacity);
}

.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
}

.empty-state-text {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 20px;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.empty-state-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Tabs: mobile horizontal scroll */
.admin-tabs{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-tabs::-webkit-scrollbar{ height: 6px; }

/* ===== Improvements from base44 project ===== */

/* Gradient text effect */
.gradient-text {
  background: var(--fog-bg);
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Card hover effect */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Gradient border effect */
.gradient-border {
  position: relative;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.gradient-border::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 0;
  border-radius: inherit;
  background: var(--fog-bg);
  opacity: var(--fog-opacity);
}
.gradient-border:hover::before {
  opacity: var(--fog-opacity);
}

/* Pulse animation for status indicators */
.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Backdrop blur for modals */
.backdrop-blur {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Status badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
}
.badge-success {
  background: var(--fog-bg);
}
.badge-warning {
  background: var(--fog-bg);
}
.badge-error {
  background: var(--fog-bg);
}
.badge-info {
  background: var(--fog-bg);
}

/* Improved loading spinner */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Smooth skeleton loading */
.skeleton {
  background: var(--fog-bg);
  animation: skeleton-loading 1.5s ease-in-out infinite;
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Toast improvements */
.toast.success {
  border-left: 4px solid var(--good);
}
.toast.error {
  border-left: 4px solid var(--bad);
}
.toast.warning {
  border-left: 4px solid var(--mid);
}


/* ===== REWARDS (57) ===== */
.rewards-form {
  display: grid;
  grid-template-columns: 1fr 120px auto;
  gap: 14px;
  align-items: end;
  padding: 16px;
  background: var(--fog-bg);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.rewards-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rewards-form label span {
  font-size: 12px;
  font-weight: 600;
  opacity: var(--fog-opacity);
}

@media (max-width: 600px) {
  .rewards-form {
    grid-template-columns: 1fr;
  }
  
  .rewards-form button {
    width: 100%;
  }
}

.rewards-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reward-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--fog-bg);
  border-radius: var(--radius-md);
}

.reward-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reward-cost {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}

.reward-cost-badge {
  background: var(--fog-bg);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
}

.reward-desc {
  font-size: 12px;
  opacity: var(--fog-opacity);
  margin: 0;
}

.seller-reward-item {
  background: var(--fog-bg);
}

/* ===== ANNOUNCEMENTS (4.1) ===== */
.announcement-item {
  padding: 16px;
  background: var(--fog-bg);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

.announcement-item.pinned {
  border-color: var(--accent);
  background: var(--fog-bg);
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.announcement-header strong {
  font-size: 15px;
}

.pin-badge {
  font-size: 14px;
}

.announcement-body {
  font-size: 14px;
  line-height: 1.5;
  opacity: var(--fog-opacity);
  margin-bottom: 8px;
}

.announcement-meta {
  font-size: 11px;
  opacity: var(--fog-opacity);
}

/* ===== MESSAGE TYPES (40) ===== */
.message-item.type-warning {
  border-left: 3px solid var(--mid);
  background: var(--fog-bg);
  background: var(--fog-bg);
}

.message-read-btn {
  margin-top: 8px;
  font-size: 11px;
  padding: 4px 10px;
}

.message-unread {
  position: relative;
}

.message-unread::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: var(--fog-bg);
}



/* ===== SCRIPT HELP MODAL (50) ===== */
.script-help-card {
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
}

.script-help-content {
  text-align: left;
  font-size: 14px;
  line-height: 1.6;
}

.script-help-content h4 {
  margin: 20px 0 10px 0;
  font-size: 15px;
  color: var(--accent-2);
}

.script-help-content h4:first-child {
  margin-top: 0;
}

.script-help-content ol,
.script-help-content ul {
  margin: 0;
  padding-left: 24px;
}

.script-help-content li {
  margin: 6px 0;
}

.script-templates {
  margin-top: 12px;
}

.script-templates details {
  margin: 8px 0;
  background: var(--fog-bg);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.script-templates summary {
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
}

.script-templates summary:hover {
  background: var(--fog-bg);
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.5;
  background: var(--fog-bg);
  border-top: 1px solid var(--stroke);
}

.admin-block-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* keep titles/subtitles left-aligned */
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.theme-light .admin-block-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Force header text to be readable + consistent (no “centered” headers) */
.admin-block-title,
.admin-block-sub,
.admin-block-subtitle {
  width: 100%;
  text-align: left;
}

.admin-block-header .btn-ghost-sm {
  margin-left: 0;
  align-self: flex-end;
}
/* ===== MICS TABLE STYLES (Issue #5) ===== */
.mics-table-wrapper {
  margin-top: 16px;
  overflow-x: auto;
}

.good-text {
  color: var(--good) !important;
  font-weight: 600;
}

.bad-text {
  color: var(--bad) !important;
  font-weight: 600;
}

.admin-block-subtitle {
  font-size: 14px;
  font-weight: 600;
  margin: 16px 0 12px 0;
  color: var(--ink);
}

/* ===== EMPTY STATE WITH CTA (Issue #9) ===== */
.empty-state-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.empty-state-cta .empty-icon {
  font-size: 56px;
  margin-bottom: 16px;
  opacity: var(--fog-opacity);
}

.empty-state-cta .empty-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center;
  width: 100%;
}

.empty-state-cta .empty-text {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 20px;
  max-width: 280px;
  text-align: center;
}

.empty-state-cta .empty-btn {
  margin-top: 8px;
}

/* ===== FORM ROW IMPROVEMENTS ===== */
/* Animated hide for form labels in form-row */
.form-row label.hidden-field,
.admin-block-row label.hidden-field {
  max-height: 180px;
  opacity: 1;
  transform: translateY(0);
  overflow: hidden;
  margin: 0;
  transition: max-height 0.26s var(--ease), opacity 0.2s var(--ease), transform 0.2s var(--ease), margin 0.26s var(--ease), flex 0.26s var(--ease);
}

.form-row label.hidden-field.is-hidden,
.admin-block-row label.hidden-field.is-hidden {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  flex: 0 !important;
  margin: 0;
}

.form-row label.hidden-field.gone,
.admin-block-row label.hidden-field.gone {
  display: none !important;
}

/* Collapse form-row when all children are hidden (animating out) */
.grid-form .form-row:has(> label.hidden-field.is-hidden):not(:has(> label:not(.is-hidden))) {
  max-height: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.26s var(--ease), margin 0.26s var(--ease), opacity 0.2s var(--ease);
}

/* Reset form-row when visible */
.grid-form .form-row {
  max-height: 200px;
  transition: max-height 0.26s var(--ease), margin 0.26s var(--ease), opacity 0.2s var(--ease), gap 0.26s var(--ease);
}

/* Required field indicator */
label span::after {
  content: "";
}

label.required span::after,
label span[data-required]::after {
  content: " *";
  color: var(--danger);
}

/* ===== BTN-SM ===== */
.btn-sm {
  padding: 8px 14px !important;
  font-size: 13px !important;
  min-height: auto !important;
}



/* ===== ANIMATIONS & MICRO-INTERACTIONS (Pункт 10) ===== */

/* Button press effect */
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active,
.btn-accent:active {
  transform: scale(0.98);
}

/* Smooth button transitions */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-accent {
  transition: all 0.15s ease;
}

/* Loading state for buttons */
.btn-loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}

.btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

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

/* Success glow */
@keyframes successGlow {
  0% { box-shadow: 0 0 0 0 rgba(24, 198, 91, 0.4); }
  50% { box-shadow: 0 0 20px 4px rgba(24, 198, 91, 0.2); }
  100% { box-shadow: 0 0 0 0 rgba(24, 198, 91, 0); }
}

.success-glow {
  animation: successGlow 1.2s ease-out;
}

/* Form field shake on error */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.field-error {
  animation: shake 0.4s ease;
  border-color: var(--danger) !important;
}

.field-error-text {
  color: var(--danger);
  font-size: 12px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ===== SKELETON LOADING ===== */

.skeleton {
  background: var(--fog-bg);
  background-size: 200% 100%;
  animation: skeleton 1.2s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
  width: 100%;
}

.skeleton-text.short {
  width: 60%;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.skeleton-button {
  height: 44px;
  width: 120px;
}

.skeleton-table-row {
  height: 48px;
  margin-bottom: 8px;
}

/* ===== WELCOME SCREEN (Beautiful Glass Card Version) ===== */

/* ===== WELCOME OVERLAY (Minimal Dark) ===== */
/* CRITICAL: Always dark, never transparent! */

.welcome-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 0.4s ease;
  background: #0a0a0f !important; /* Fallback solid color */
}

.welcome-overlay.hidden {
  display: none !important;
}

.welcome-overlay.fade-out {
  opacity: 0 !important;
  pointer-events: none !important;
}

.welcome-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: #0a0a0f !important; /* SOLID - NO TRANSPARENCY */
  backdrop-filter: none !important; /* Remove blur - causes transparency issues */
  -webkit-backdrop-filter: none !important;
}

.welcome-glass {
  position: relative !important;
  z-index: 1 !important;
  width: 100%;
  max-width: 360px;
  margin: 20px;
  padding: 40px 32px;
  background: #12121a !important; /* SOLID dark color */
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 20px;
  text-align: center;
  animation: glassIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: #fff !important;
  overflow: hidden;
  box-sizing: border-box;
}

@keyframes glassIn {
  from { opacity: 0; transform: scale(0.92) translateY(16px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.welcome-logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #4f8bff, #2962ff) !important;
  border-radius: 18px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 24px rgba(41, 98, 255, 0.35);
  padding: 12px;
  overflow: hidden;
}

.welcome-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Hide emoji if image fails */
.welcome-logo:empty::before {
  content: '🎙️';
  font-size: 32px;
}

.welcome-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff !important;
  color: #fff;
  margin: 0 0 24px;
}

.welcome-title span {
  color: #4f8bff;
}

/* Consent row */
.consent-row {
  text-align: left;
}

.consent-row.hidden {
  display: none;
}

.consent-check {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  margin-bottom: 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.consent-check input {
  display: none;
}

.consent-check .checkmark {
  display: inline-block;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  flex-shrink: 0;
  border: 2px solid rgba(120, 160, 255, 0.6);
  border-radius: 5px;
  background: rgba(20, 25, 40, 0.8);
  transition: all 0.2s;
  position: relative;
  box-shadow: 0 0 0 1px rgba(79, 139, 255, 0.15);
}

.consent-check:hover .checkmark {
  border-color: rgba(120, 160, 255, 0.85);
  background: rgba(30, 40, 60, 0.9);
}

.consent-check input:checked + .checkmark {
  background: #2962ff;
  border-color: #2962ff;
  box-shadow: 0 0 0 2px rgba(41, 98, 255, 0.3);
}

.consent-check input:checked + .checkmark::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.consent-check a {
  color: #4f8bff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-check a:hover {
  color: #6ba1ff;
}

.enter-btn {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #4f8bff, #2962ff);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.enter-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(41, 98, 255, 0.4);
}

.enter-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Terms Popup */
.terms-popup {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.terms-popup.hidden {
  display: none;
}

.terms-popup-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
}

.terms-popup-box {
  position: relative;
  width: 100%;
  max-width: 700px;
  max-height: 85vh;
  background: #141418;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  overflow: hidden;
  animation: popupIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin: 20px;
}

@keyframes popupIn {
  from { opacity: 0; transform: scale(0.9) translateY(16px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.terms-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
}

.terms-popup-head button {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s;
}

.terms-popup-head button:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.terms-popup-body {
  padding: 20px 24px;
  max-height: calc(85vh - 140px);
  overflow-y: auto;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
}

/* Scrollbar styling */
.terms-popup-body::-webkit-scrollbar {
  width: 8px;
}

.terms-popup-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.terms-popup-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.terms-popup-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.terms-popup-body h2 {
  color: #fff;
  font-size: 18px;
  margin: 24px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(79, 139, 255, 0.3);
}

.terms-popup-body h2:first-child {
  margin-top: 0;
}

.terms-popup-body h3 {
  color: #4f8bff;
  font-size: 15px;
  margin: 20px 0 10px;
}

.terms-popup-body h4 {
  color: #4f8bff;
  font-size: 14px;
  margin: 16px 0 8px;
}

.terms-popup-body h4:first-child {
  margin-top: 0;
}

.terms-popup-body p {
  margin: 10px 0;
}

.terms-popup-body ul {
  margin: 8px 0;
  padding-left: 20px;
}

.terms-popup-body li {
  margin: 6px 0;
}

.terms-popup-body hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 24px 0;
}

.terms-popup-body strong {
  color: #fff;
}

.terms-popup-ok {
  width: calc(100% - 48px);
  margin: 0 24px 20px;
  padding: 14px 20px;
  background: #2962ff;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s;
}

.terms-popup-ok:hover {
  background: #4f8bff;
}

/* Always dark theme for welcome - FORCE DARK COLORS */
/* CRITICAL: Override ALL light theme colors with dark ones */
body.theme-light .welcome-overlay {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(12px) !important;
}

body.theme-light .welcome-backdrop {
  background: rgba(0, 0, 0, 0.5) !important;
}

body.theme-light .welcome-glass {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #1e2332 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

body.theme-light .welcome-logo {
  background: linear-gradient(135deg, #4f8bff, #2962ff) !important;
}

body.theme-light .welcome-title {
  color: #1e2332 !important;
}

body.theme-light .welcome-title span {
  color: #2962ff !important;
}

body.theme-light .consent-check {
  color: #1e2332 !important;
}

body.theme-light .consent-check .checkmark {
  border-color: rgba(0, 0, 0, 0.25) !important;
  background: rgba(0, 0, 0, 0.04) !important;
}
body.theme-light .consent-check input:checked + .checkmark {
  background: #ffffff !important;
  border-color: #2962ff !important;
  box-shadow: 0 0 0 2px rgba(41, 98, 255, 0.18) !important;
}
body.theme-light .consent-check input:checked + .checkmark::after {
  color: #2962ff !important;
  text-shadow: none !important;
}

body.theme-light .consent-check a {
  color: #2962ff !important;
}

body.theme-light .enter-btn {
  background: linear-gradient(135deg, #4f8bff, #2962ff) !important;
  color: #fff !important;
}

body.theme-light .terms-popup-bg {
  background: rgba(0, 0, 0, 0.5) !important;
}

/* v5.3.0: Fix light theme terms popup — was dark colors on light bg */
body.theme-light .terms-popup-box {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: rgba(30, 35, 50, 0.9) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

body.theme-light .terms-popup-head {
  color: #1e2332 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  background: rgba(79, 139, 255, 0.08) !important;
}

body.theme-light .terms-popup-body {
  color: rgba(30, 35, 50, 0.85) !important;
}

body.theme-light .terms-popup-body h2 {
  color: #1e2332 !important;
  border-color: rgba(79, 139, 255, 0.3) !important;
}

body.theme-light .terms-popup-body h3 {
  color: #2962ff !important;
}

body.theme-light .terms-popup-body h4 {
  color: #2962ff !important;
}

body.theme-light .terms-popup-body hr {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

body.theme-light .terms-popup-body strong {
  color: #1e2332 !important;
}

body.theme-light .terms-popup-ok {
  background: #2962ff !important;
  color: #fff !important;
}

/* ===== ONBOARDING TOUR ===== */

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  pointer-events: none;
}

.tour-spotlight {
  position: fixed;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.9);
  border-radius: var(--radius-md);
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10002;
}

.tour-spotlight::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid var(--accent);
  border-radius: calc(var(--radius-md) + 4px);
  animation: tourPulse 2s ease-in-out infinite;
}

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

.tour-card {
  position: fixed;
  width: 340px;
  max-width: calc(100vw - 40px);
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  z-index: 10003;
  pointer-events: auto;
  animation: tourCardIn 0.3s ease;
}

@keyframes tourCardIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tour-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tour-step-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}

.tour-close-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--t);
}

.tour-close-btn:hover {
  background: var(--stroke);
  color: var(--ink);
}

.tour-card-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

/* v10.9.0: every lesson is spoken by Mik. The old step card put a different
   system icon above the title, while Mik was reduced to a tiny badge in the
   header; that made the welcome card and the actual lesson feel unrelated. */
.tour-card-guide {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  margin: 0 0 10px;
}
.tour-card-guide-face {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tour-card-guide-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tour-card-guide-copy strong {
  color: var(--ink);
  font-size: 15px;
}
.tour-card-guide-copy span {
  color: var(--muted);
  font-size: 12px;
}

.tour-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}

.tour-card-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 16px;
}

.tour-progress {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.tour-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stroke-2);
  transition: all var(--t);
}

.tour-progress-dot.active {
  background: var(--accent);
  width: 20px;
  border-radius: 4px;
}

.tour-progress-dot.done {
  background: var(--accent);
}

.tour-card-actions {
  display: flex;
  gap: 8px;
}

.tour-btn {
  flex: 1;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t);
}

.tour-btn-primary {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: white;
  border: none;
}

.tour-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(41, 98, 255, 0.3);
}

.tour-btn-secondary {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--stroke-2);
}

.tour-btn-secondary:hover {
  background: var(--bg-2);
  color: var(--ink);
}

.tour-btn-skip {
  background: transparent;
  color: var(--muted);
  border: none;
  font-size: 12px;
}

.tour-btn-skip:hover {
  color: var(--ink);
}

/* ===== Premium Tour Enhancements v6.3.0 ===== */

/* Arrow pointer from card to spotlight target */
.tour-card-arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  transform: rotate(45deg);
  z-index: -1;
  transition: opacity 0.2s ease;
}

.tour-card-arrow[data-dir="down"] {
  bottom: -8px;
  border-top: none;
  border-left: none;
}

.tour-card-arrow[data-dir="up"] {
  top: -8px;
  border-bottom: none;
  border-right: none;
}

.tour-card-arrow[data-dir="left"] {
  left: -8px;
  border-top: none;
  border-right: none;
}

.tour-card-arrow[data-dir="right"] {
  right: -8px;
  border-bottom: none;
  border-left: none;
}

/* Smooth spotlight movement between steps */
.tour-spotlight {
  transition: top 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease;
}

/* Smooth card position movement between steps */
.tour-card {
  transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease;
}

.tour-card.tour-card-entering {
  animation: tourCardIn 0.3s ease forwards;
}

/* Keyboard focus indicators */
.tour-btn:focus-visible,
.tour-start-btn:focus-visible,
.tour-skip-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* v6.3.0: Mobile tour card — full-width, JS positions top dynamically */
@media (max-width: 768px) {
  .tour-card.tour-card-mobile-sheet {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.25) !important;
    animation: tourCardIn 0.3s ease !important;
    transform: none !important;
  }
}

@keyframes tourSheetUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .tour-spotlight,
  .tour-card,
  .tour-card-arrow {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== v10.10.0: coach mark — replaces the step card =====
   No panel, no title, no step counter, no buttons, no close cross. The subject
   of a tour step is the highlighted element; everything the card used to draw
   around the copy competed with it, and the title repeated the label on the
   button already lit up under the spotlight.
   The class name is deliberately not .tour-card: three separate !important
   blocks (lines ~6717, ~30981, ~63997) pin .tour-card to top:50% under 768px,
   which is why the card sat dead centre and never moved between steps. */
.tour-coach {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10005;
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  max-width: min(380px, calc(100vw - 32px));
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease;
}

.tour-coach-face {
  flex: 0 0 auto;
  line-height: 0;
}

.tour-coach-body {
  min-width: 0;
}

/* White on the spotlight's own 75% black backdrop: 10.4:1 over the light
   theme, ~19:1 over the dark one. The shadow is there for the moment the mark
   overlaps the lit element itself, not for decoration. */
.tour-coach-line {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.85);
}

.tour-coach-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.tour-coach-dots {
  display: flex;
  gap: 6px;
}

.tour-coach-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: width 0.3s ease, background 0.3s ease, border-radius 0.3s ease;
}

.tour-coach-dot.done {
  background: rgba(255, 255, 255, 0.55);
}

.tour-coach-dot.active {
  width: 18px;
  border-radius: 3px;
  background: var(--accent, #3b7dff);
}

.tour-coach-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}

/* Swallows the click that advances the tour so it never reaches the button
   being taught. */
.tour-coach-catcher {
  position: fixed;
  inset: 0;
  z-index: 10004;
  background: transparent;
  cursor: pointer;
}

/* Wide screens can afford a longer line before the copy wraps; narrow ones
   cannot, and 380 is already at the top of a comfortable measure there. */
@media (min-width: 768px) {
  .tour-coach {
    max-width: 440px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour-coach,
  .tour-coach-dot {
    transition: none !important;
  }
}

/* Tour welcome step (no spotlight) */
.tour-welcome {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  padding: 20px;
}

/* v10.7.1: narrower, quieter, and built around Mik rather than around a stack
   of boxes. The card used to carry a wordmark, a version pill, a glow layer, a
   skills panel, a recommendation panel and a footer hint — six containers to
   say "here is the tour". */
.tour-welcome-card {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
  text-align: center;
  animation: tourCardIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Mik sits above the greeting, at the size the card chooses. */
/* v10.7.1: the two suggestions used to sit inside their own panel with a
   heading; without it they need their own breathing room above the primary
   button, or the card reads as one undifferentiated stack. */
.tour-complete-card .tour-complete-next-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.tour-complete-card .tour-next-action-btn { flex: 1 1 0; }

.tour-welcome-mik {
  display: flex;
  justify-content: center;
  margin: 0 0 14px;
  line-height: 0;
}

.tour-welcome-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  box-shadow: 0 8px 32px rgba(41, 98, 255, 0.3);
}

.tour-welcome-title {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 6px;
}

.tour-welcome-subtitle {
  font-size: 14px;
  color: var(--muted);
  margin: 0 auto 24px;
  max-width: 30ch;
  line-height: 1.5;
}

.tour-welcome-features {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 24px;
}

.tour-welcome-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* The glyph inside is sized by font-size (.mh-i is 1em), so the box grew and
   the icon did not — three 48px tiles with a 22px mark lost in each. */
.tour-welcome-feature-icon {
  width: 68px;
  height: 68px;
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--ink);
}

/* v10.7.1: the way out stays, but it stops competing with the way in. */
.tour-skip-btn {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 13px;
  padding: 6px 0;
  cursor: pointer;
}
.tour-skip-btn:hover { color: var(--ink); }

.tour-step-mik {
  display: inline-flex;
  width: 26px;
  height: 26px;
  margin-right: 2px;
  vertical-align: middle;
}

/* Consent is a legal act; it should not look like a stray tick beside a
   paragraph. Both checkboxes share one class instead of two copies of inline
   style, and the box aligns with the first line of text rather than the block. */
.mh-consent {
  /* Something in this stylesheet sets label{display:block} with more weight —
     the computed value came back 'block' and the two children stacked. This
     file has 832 display:!important declarations; joining them is the only way
     a new rule holds. */
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px;
  cursor: pointer;
  padding: 12px 14px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: var(--bg-2);
  transition: border-color .15s ease, background .15s ease;
}
.mh-consent + .mh-consent { margin-top: 10px; }
.mh-consent:hover { border-color: var(--accent, #3b7dff); }
.mh-consent input[type="checkbox"] {
  /* style.css hides native checkboxes inside .consent-check — a different
     component that draws its own .checkmark. This one is a real checkbox,
     and it must not inherit that. */
  appearance: auto !important;
  opacity: 1 !important;
  position: static !important;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: 0 0 18px;
  accent-color: var(--accent, #3b7dff);
  cursor: pointer;
}
.mh-consent span {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted, #a1a1aa);
  text-align: left;
}
.mh-consent:has(input:checked) span { color: var(--ink); }

/* v10.7.1: this was written for the label but matches any descendant span that
   happens to be last in its parent — including the .mh-i wrapper inside the
   icon tile, which is why enlarging the tile left an 11px glyph in the middle
   of it. Scoped to a direct child, with the icon sized explicitly. */
.tour-welcome-feature > span:last-child {
  font-size: 11px;
  color: var(--muted);
}

.tour-welcome-feature-icon .mh-i,
.tour-welcome-feature-icon svg {
  width: 30px;
  height: 30px;
  font-size: 30px;
}

.tour-welcome-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* v5.3.5: !important needed — body.theme-light button{} at line ~19896 overrides gradient */
.tour-start-btn {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent)) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all var(--t);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tour-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(41, 98, 255, 0.4);
}

.tour-skip-btn {
  width: 100%;
  padding: 12px 24px;
  background: transparent !important;
  color: var(--muted) !important;
  border: none !important;
  font-size: 14px;
  cursor: pointer;
  transition: color var(--t);
}

.tour-skip-btn:hover {
  color: var(--ink) !important;
}

/* Mobile tour adjustments */
@media (max-width: 480px) {
  .tour-card {
    width: calc(100vw - 32px);
    left: 16px !important;
    right: 16px !important;
  }
  
  .tour-welcome-card {
    padding: 24px 20px;
  }
  
  .tour-welcome-features {
    gap: 16px;
  }
  
  .tour-welcome-feature-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}

/* ===== IMPROVED TOAST (Пункт 10) ===== */

.toast-container {
  position: fixed;
  /* v2.4.10: bottom-right, not full-width stripe */
  bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom, 0px) + 16px);
  right: max(16px, env(safe-area-inset-right, 0px));
  left: auto;
  z-index: 9999999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
  max-width: min(480px, calc(100vw - 32px));
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--surface, rgba(30, 35, 45, 0.95));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-md, 14px);
  box-shadow: var(--shadow-lg);
  animation: toastSlideIn 0.16s var(--ease-out);
  max-width: 480px;
  width: fit-content;
  min-width: 200px;
  pointer-events: auto;
  border: 1px solid var(--stroke);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.toast.toast-out {
  animation: toastSlideOut 0.2s ease forwards;
}

@keyframes toastSlideOut {
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
}

.toast-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 600;
}

.toast-content {
  flex: 1;
}

.toast-title {
  font-weight: 600;
  font-size: 15px;
}

.toast-message {
  font-size: 15px;
  color: var(--ink);
  margin-top: 2px;
}

.toast-close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  padding: 4px;
  font-size: 18px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.toast-close:hover {
  opacity: 1;
}

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--fog-bg);
  animation: toastProgress 5s linear forwards;
}

@keyframes toastProgress {
  from { width: 100%; }
  to { width: 0; }
}

.toast.toast-success {
  border-left: none;
}

.toast.toast-success .toast-icon {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.toast.toast-error {
  border-left: none;
}

.toast.toast-error .toast-icon {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.toast.toast-warning {
  border-left: none;
}

.toast.toast-warning .toast-icon {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.toast.toast-info {
  border-left: none;
}

.toast.toast-info .toast-icon {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

/* ===== FORM VALIDATION STYLES (Пункт 4) ===== */

.form-field {
  position: relative;
}

.form-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(41, 98, 255, 0.15);
}

.form-field input.valid {
  border-color: var(--good);
}

.form-field input.invalid {
  border-color: var(--danger);
}

.form-field .validation-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}

/* Password field wrapper for proper toggle positioning */
.password-input-wrapper {
  position: relative !important;
  width: 100% !important;
  display: block !important;
}

/* Око пароля: без бордера, тільки іконка; адаптивний розмір */
.password-toggle {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  padding: 4px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  z-index: 10 !important;
  border-radius: 6px !important;
  transition: color 0.15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  box-sizing: border-box !important;
  max-width: 28px !important;
  max-height: 28px !important;
}
.password-toggle svg {
  width: 18px !important;
  height: 18px !important;
}

.password-toggle:hover {
  color: var(--ink) !important;
  background: transparent !important;
}
@media (max-width: 768px) {
  .password-toggle {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
  }
  .password-toggle svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }
}

/* Label containing password toggle must be relative */
label:has(.password-toggle),
label:has(.password-input-wrapper) {
  position: relative !important;
  display: block !important;
}

/* Input with password toggle needs padding-right */
label:has(.password-toggle) input[type="password"],
label:has(.password-toggle) input[type="text"],
.password-input-wrapper input[type="password"],
.password-input-wrapper input[type="text"] {
  padding-right: 52px !important;
}

/* v5.2.79: Account form specific fix */
#accountForm .password-input-wrapper {
  position: relative !important;
  display: block !important;
}

#accountForm .password-toggle {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* ===== Password eye: stable control with a discreet SVG transition ===== */
.password-toggle .pw-eye {
  display: block;
  overflow: visible;
  transform-origin: center;
}
.password-toggle .pw-eye-slash {
  stroke-dasharray: 30;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.2s ease;
}
.password-toggle .pw-eye-iris {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.2s ease;
}
.password-toggle.is-concealed .pw-eye-slash { stroke-dashoffset: 0; }
.password-toggle.is-revealed .pw-eye-slash { stroke-dashoffset: 30; }
.password-toggle.is-toggling { animation: passwordToggleTap 0.2s ease-out; }
@keyframes passwordToggleTap { 50% { transform: translateY(-50%) scale(.9); } }

@media (prefers-reduced-motion: reduce) {
  .password-toggle .pw-eye-slash,
  .password-toggle .pw-eye-iris { transition: none !important; }
  .password-toggle.is-toggling { animation: none !important; }
}

.form-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.form-hint.error {
  color: var(--danger);
}

/* Phone mask */
.phone-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 14px;
  pointer-events: none;
}

.has-prefix input {
  padding-left: 50px !important;
}

/* Character counter */
.char-counter {
  position: absolute;
  right: 12px;
  bottom: 8px;
  font-size: 11px;
  color: var(--muted);
}

.char-counter.warning {
  color: #f59e0b;
}

.char-counter.error {
  color: var(--danger);
}

/* ===== CONFIRM DIALOG (Пункт 2 - Вийти) ===== */

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.confirm-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.confirm-dialog {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 360px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  transform: scale(0.95);
  transition: transform 0.2s ease;
}

.confirm-overlay.show .confirm-dialog {
  transform: scale(1);
}

.confirm-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.confirm-message {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 20px;
}

.confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Danger confirm variant */
.confirm-dialog.confirm-danger {
  border-color: rgba(239, 68, 68, 0.3);
}

.confirm-dialog.confirm-danger .confirm-title {
  color: var(--bad);
}

.btn-danger {
  background: var(--bad) !important;
  border-color: var(--bad) !important;
  color: white !important;
}

.btn-danger:hover:enabled {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

/* ===== PROGRESS BAR (Пункт 6 - Мікрофони) ===== */

.progress-bar {
  height: 8px;
  background: var(--fog-bg);
  overflow: hidden;
  margin-top: 8px;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-bar-fill.good {
  background: var(--good);
}

.progress-bar-fill.warning {
  background: var(--warn);
}

.progress-bar-fill.danger {
  background: var(--bad);
}

/* ===== TOUCH DEVICE MOBILE IMPROVEMENTS ===== */
@media (max-width: 768px) {
  /* Admin panel mobile sticky top bar */
  .admin-card .top-bar-sticky {
    top: 0;
    border-radius: 0;
    margin: 0 -12px;
    width: calc(100% + 24px);
  }
  
  /* v5.0.29: HIDE horizontal tabs on mobile - use bottom nav instead */
  .admin-tabs-wrapper {
    display: none !important;
  }
  
  .admin-tabs {
    display: none !important;
  }
  
  .admin-tab-btn {
    display: none !important;
  }
  
  .btn-primary,
  .btn-secondary,
  .btn-ghost {
    min-height: 48px;
  }
  
  /* Disable heavy effects on mobile — v5.4.3: opaque bg */
  .top-bar {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(8, 8, 12, 0.96);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== TOOLTIP ===== */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: 6px 10px;
  background: var(--fog-bg);
  font-size: 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 1000;
}

[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-8px);
}

/* Desktop sidebar nav items render their label as a real <span.desktop-nav-label>
   and their icon as a real <svg.desktop-nav-icon> — so BOTH pseudo-elements on
   these buttons are redundant decoration: ::after is the [data-tooltip] hover
   bubble (the collapsed rail uses the JS Tooltips bubble instead, gated on
   body.desktop-sidebar-collapsed), ::before is a shine sweep
   (button:hover::before { left:100% }). Both animate on hover and were the
   remaining "jump" on hover. Kill them here (label + icon are real elements). */
html body #adminPanel .admin-tab-btn::before,
html body #adminPanel .admin-tab-btn::after,
html body .desktop-sidebar-shell .admin-tab-btn::before,
html body .desktop-sidebar-shell .admin-tab-btn::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  transition: none !important;
}


/* ========================================
   🎨 v3.7.0 UI/UX MEGA PACK
   ======================================== */

/* v5.2.63: Tokens consolidated to main :root block */

/* ===== GLOBAL ANIMATIONS ===== */
@keyframes fadeInUp {
  from { 
    opacity: 0;
    transform: translateY(12px); 
  }
  to { 
    opacity: 1;
    transform: translateY(0); 
  }
}

@keyframes fadeInScale {
  from { 
    opacity: 0;
    transform: scale(0.96); 
  }
  to { 
    opacity: 1;
    transform: scale(1); 
  }
}

@keyframes slideDown {
  from { 
    opacity: 0;
    transform: translateY(-10px); 
  }
  to { 
    opacity: 1;
    transform: translateY(0); 
  }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 5px var(--accent-glow); }
  50% { box-shadow: 0 0 20px var(--accent-glow), 0 0 30px var(--accent-glow); }
}

/* ===== ENHANCED BUTTONS ===== */
.btn-primary,
.btn-secondary,
.btn-accent,
.btn-ghost,
.btn-danger {
  position: relative;
  overflow: hidden;
  transition: all var(--t) var(--ease);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-2), var(--accent)) !important;
  color: #ffffff !important;
}

.btn-primary:hover:enabled {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.15);
}

.btn-primary:active:enabled {
  transform: translateY(0);
  box-shadow: 0 2px 10px var(--accent-glow);
}

.btn-secondary {
  background: rgba(32, 32, 32, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-secondary:hover:enabled {
  background: rgba(45, 45, 45, 0.95);
  transform: translateY(-1px);
}

.btn-accent {
  background: linear-gradient(135deg, #00d68f, #18c65b) !important;
  color: #ffffff !important;
}

.btn-accent:hover:enabled {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px var(--good-glow);
}

.btn-danger {
  background: linear-gradient(135deg, #ff6b6b, #ee5a5a) !important;
  color: #ffffff !important;
}

.btn-danger:hover:enabled {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px var(--bad-glow);
}

/* Button ripple effect - disabled to prevent color override */
/*
.btn-primary::after,
.btn-accent::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  opacity: 0;
}

.btn-primary:active::after,
.btn-accent:active::after {
  opacity: 0.2;
}
*/

/* ===== ENHANCED CARDS ===== */
.card,
.admin-block,
.user-card,
.meta-card {
  animation: fadeInUp 0.4s var(--ease) both;
  transition: transform var(--t) var(--ease), 
              box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
}

.card:hover,
.admin-block:hover {
  transform: translateY(-3px);
}

/* Stagger animation for multiple cards */
.card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2) { animation-delay: 50ms; }
.card:nth-child(3) { animation-delay: 100ms; }
.card:nth-child(4) { animation-delay: 150ms; }
.card:nth-child(5) { animation-delay: 200ms; }

/* ===== ENHANCED INPUTS ===== */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  transition: border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              background var(--t) var(--ease);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
  outline: none;
}

/* ===== ENHANCED TABS ===== */
.admin-tab-btn,
.seg-btn {
  transition: all var(--t) var(--ease);
}

.admin-tab-btn:hover:not(.is-active),
.seg-btn:hover:not(.is-active) {
  background: var(--fog-bg);
}

/* ===== ENHANCED TABLES ===== */
.admin-table tr,
.table-row {
  transition: background var(--t-fast) var(--ease);
}

.admin-table tr:hover,
.table-row:hover {
  background: var(--fog-bg);
}

.modal-card {
  animation: fadeInScale 0.3s var(--ease-spring);
}

/* ===== ENHANCED TOAST ===== */
/* v2.4.10: Removed .toast animation override (was conflicting with primary at line 6188) */
/* v2.4.10: Removed .toast.success/.toast.error (dead rules — JS uses .toast-success/.toast-error) */
}

/* ===== ENHANCED HEADER - DEPRECATED: using main .top-bar ===== */

/* ===== ENHANCED ACCOUNT CARDS ===== */
.account-card {
  transition: all var(--t) var(--ease);
  animation: fadeInUp 0.3s var(--ease) both;
}

.account-card:hover {
  /* v2.0.7: Removed transform to prevent jitter */
  border-color: var(--accent);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--accent-glow);
}

/* Account card stagger */
.account-card:nth-child(1) { animation-delay: 0ms; }
.account-card:nth-child(2) { animation-delay: 40ms; }
.account-card:nth-child(3) { animation-delay: 80ms; }
.account-card:nth-child(4) { animation-delay: 120ms; }
.account-card:nth-child(5) { animation-delay: 160ms; }
.account-card:nth-child(6) { animation-delay: 200ms; }

/* ===== ENHANCED ROLE BADGES ===== */
.role-badge,
.badge {
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.role-badge:hover,
.badge:hover {
  transform: scale(1.05);
}

/* ===== ENHANCED SEGMENTED PILL ===== */
.segmented-pill {
  background: var(--fog-bg);
  padding: 4px;
  gap: 2px;
}

.segmented-pill .pill-indicator {
  transition: all var(--t) var(--ease-spring);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ===== ENHANCED LOADING STATES ===== */
.loading,
.skeleton {
  background: var(--fog-bg);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ===== SCROLLBAR STYLING ===== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--fog-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--fog-bg);
  transition: background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--fog-bg);
  background: var(--fog-bg);
  border-radius: var(--radius-md);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.rule-items-form-container:focus-within,
.points-admin-row:focus-within,
.rewards-form:focus-within {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* ===== ENHANCED EMPTY STATES ===== */
.empty-state,
.manager-ai-empty {
  animation: fadeIn 0.5s var(--ease);
}

.empty-state svg,
.empty-state img {
  animation: pulse-soft 2s infinite;
}

/* ===== ENHANCED RULE ITEMS ===== */
.rule-item-row {
  animation: fadeInUp 0.3s var(--ease) both;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.rule-item-row:hover {
  background: var(--fog-bg);
}

.rule-item-row:nth-child(2) { animation-delay: 30ms; }
.rule-item-row:nth-child(3) { animation-delay: 60ms; }
.rule-item-row:nth-child(4) { animation-delay: 90ms; }
.rule-item-row:nth-child(5) { animation-delay: 120ms; }

/* ===== ENHANCED TAB CONTENT ===== */
.tab-content:not(.hidden) {
  animation: fadeInUp 0.3s var(--ease);
}

/* ===== ENHANCED TOOLTIPS ===== */
/* v2.4.9: Removed duplicate [data-tooltip] rules (were conflicting with lines 6633-6653) */

/* ===== FOCUS VISIBLE (accessibility / keyboard) ===== */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== SELECTION ===== */
::selection {
  background: var(--fog-bg);
}

/* ===== LIGHT THEME ENHANCEMENTS ===== */
body.theme-light {
  --glass-bg: rgba(0, 0, 0, 0.02);
  --glass-border: rgba(0, 0, 0, 0.06);
  --accent-glow: rgba(41, 98, 255, 0.15);
  --good-glow: rgba(24, 198, 91, 0.15);
  --bad-glow: rgba(255, 71, 87, 0.15);
}

body.theme-light .btn-primary {
  box-shadow: 0 4px 15px var(--accent-glow);
}

body.theme-light .btn-secondary {
  background: var(--fog-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

body.theme-light .btn-secondary:hover:enabled {
  background: var(--fog-bg);
}

body.theme-light .segmented-pill {
  background: var(--fog-bg);
}

body.theme-light .rule-items-form-container,
body.theme-light .points-admin-row,
body.theme-light .rewards-form {
  background: var(--fog-bg);
}

body.theme-light ::-webkit-scrollbar-track {
  background: var(--fog-bg);
  background: var(--fog-bg);
  background: var(--fog-bg);
}

body.theme-light .toast.success {
  box-shadow: var(--shadow-lg), -4px 0 15px var(--good-glow);
}

body.theme-light .toast.error {
  box-shadow: var(--shadow-lg), -4px 0 15px var(--bad-glow);
}

/* ===== MICRO-INTERACTIONS ===== */

/* Checkbox animation */
input[type="checkbox"] {
  transition: all var(--t-fast) var(--ease);
}

input[type="checkbox"]:checked {
  animation: fadeInScale 0.2s var(--ease);
}

/* Link hover effect */
a:not(.btn-primary):not(.btn-secondary):not(.btn-accent) {
  transition: color var(--t-fast) var(--ease);
}

a:not(.btn-primary):not(.btn-secondary):not(.btn-accent):hover {
  color: var(--accent);
}

/* Icon buttons */
.btn-icon,
.btn-ghost-sm {
  transition: all var(--t-fast) var(--ease);
}

.btn-icon:hover,
.btn-ghost-sm:hover {
  transform: scale(1.1);
}

.btn-icon:active,
.btn-ghost-sm:active {
  transform: scale(0.95);
}

/* ===== SMOOTH PAGE TRANSITIONS ===== */
.main-wrapper {
  animation: fadeIn 0.4s var(--ease);
}

/* ===== ENHANCED STATUS INDICATORS ===== */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse-soft 2s infinite;
}

.status-dot.online {
  background: var(--fog-bg);
}

.status-dot.offline {
  background: var(--fog-bg);
}

/* v3.7.4 UI hotfix: center empty states */
/* v2.5.63: BUG 3 fix — empty state centered */
.empty-state-cta{align-items:center !important;text-align:center !important;margin:20px auto !important;padding:48px 28px !important;max-width:520px !important;width:100% !important;display:flex !important;flex-direction:column !important;justify-content:center !important;}
#accountsList .empty-state-cta{margin-top:20px !important;}


/* v3.7.4 UI hotfix: force left alignment in mics allocations table */
.mics-table th,
.mics-table td{ text-align:left !important; }


/* ===== v3.8.3 VISIBILITY FIXES ===== */

/* Fix: Force visibility for panels when not hidden */
/* Desktop: block layout (page grows with content); Mobile: flex */
#appSection:not(.hidden) {
  visibility: visible !important;
  opacity: 1 !important;
}
@media (max-width: 768px) {
  #appSection:not(.hidden) { display: flex !important; }
}
@media (min-width: 769px) {
  #appSection:not(.hidden) { display: block !important; }
}

#adminPanel:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#micPanel:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* v5.0.0: Force hide micPanel completely when hidden */
#micPanel.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.tab-content.active {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Desktop: keep wide layout (do not override earlier min(1680px, 96vw)) */
@media (min-width: 768px) {
  .app-wrapper {
    max-width: min(1680px, 96vw);
  }
}

/* ===== v3.8.7 LIGHT THEME FIXES ===== */
/* Force white background for ALL inputs in light mode */
body.theme-light input:not([type="checkbox"]):not([type="radio"]),
body.theme-light select,
body.theme-light textarea {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0b0b0c !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
}

body.theme-light input:not([type="checkbox"]):not([type="radio"]):focus,
body.theme-light select:focus,
body.theme-light textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(41, 98, 255, 0.15) !important;
}

body.theme-light input::placeholder,
body.theme-light textarea::placeholder {
  color: rgba(0, 0, 0, 0.45) !important;
}

/* Fix card backgrounds in light mode */
body.theme-light .card,
body.theme-light .admin-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Fix button text visibility in light mode */
body.theme-light .btn-primary {
  color: #ffffff !important;
}

/* ===== v3.9.1 RADICAL BACKGROUND FIXES ===== */
/* Force solid backgrounds everywhere */

/* Dark theme defaults */
html, body {
  background: #0b0b0c !important;
}

body.theme-dark,
body.theme-dark.fog-boost {
  background: #0b0b0c !important;
}

/* Light theme - softer background to reduce "cuts eyes" (not pure white) */
body.theme-light,
body.theme-light.fog-boost {
  background: #f5f6f8 !important;
  color: #111827;
}

/* When body has theme-light, html should match */
html:has(body.theme-light) {
  background: #f5f6f8 !important;
}

/* Fast theme toggle: short transition on html/body only (avoids "all" which freezes) */
html, body {
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Fallback for browsers without :has() */
.theme-light-html {
  background: #f6f7f9 !important;
}

/* Remove all page fog effects */
.page-fog,
body::before,
body::after {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}

/* ===== AI TOOLS GRID ===== */
.ai-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .ai-tools-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .ai-tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ai-tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--stroke);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.ai-tool-btn:hover {
  border-color: var(--accent);
  background: rgba(41, 98, 255, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(41, 98, 255, 0.15);
}

.ai-tool-btn:active {
  transform: translateY(0);
}

.ai-tool-icon {
  font-size: 28px;
  line-height: 1;
}

.ai-tool-label {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  opacity: 0.85;
}

/* AI Chat Container */
.ai-chat-container {
  margin-top: 12px;
}

.ai-chat-container .table-search {
  display: flex;
  gap: 8px;
}

.ai-chat-container input {
  flex: 1;
}

/* AI Recommendation Card */
.ai-recommendation-card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 8px;
}

.ai-rec-header {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--accent);
}

.ai-rec-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

/* AI Response styling */
.ai-response {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 12px;
  animation: fadeInUp 0.3s ease;
}

.ai-response-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  color: var(--accent);
}

.ai-response-content {
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.ai-response-content ul {
  margin: 8px 0;
  padding-left: 20px;
}

.ai-response-content li {
  margin: 4px 0;
}

/* AI Loading state */
.ai-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  color: var(--muted);
}

/* v7.0.0: Visual feedback for long-running AI requests (30s+) */
.ai-loading-long {
  color: var(--warning, #f59e0b);
  border-left: 3px solid var(--warning, #f59e0b);
  background: rgba(245, 158, 11, 0.05);
}

.ai-loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--stroke);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Light theme AI tools */
body.theme-light .ai-tool-btn {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
}

body.theme-light .ai-tool-btn:hover {
  background: rgba(41, 98, 255, 0.05);
  border-color: var(--accent);
}

body.theme-light .ai-recommendation-card,
body.theme-light .ai-response {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
}

/* ===== SECURITY TAB STYLES ===== */

/* Security stats grid */
.security-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 768px) {
  .security-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.security-stat-card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  transition: all var(--t) var(--ease);
}

.security-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.security-stat-card.warning {
  border-color: rgba(255, 193, 7, 0.3);
  background: rgba(255, 193, 7, 0.05);
}

.security-stat-card.danger {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.05);
}

.security-stat-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.security-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
}

.security-stat-card.warning .security-stat-value {
  color: #f59e0b;
}

.security-stat-card.danger .security-stat-value {
  color: #ef4444;
}

.security-stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* Security config list */
.security-config-list {
  margin-top: 12px;
}

.security-config-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--stroke);
}

.security-config-item:last-child {
  border-bottom: none;
}

.security-config-label {
  font-size: 13px;
  color: var(--ink);
}

.security-config-value {
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.security-config-value.disabled {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* Blocked IPs list */
.blocked-ips-list {
  margin-top: 12px;
}

.blocked-ip-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}

.blocked-ip-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.blocked-ip-address {
  font-family: monospace;
  font-size: 14px;
  font-weight: 600;
}

.blocked-ip-reason {
  font-size: 12px;
  color: var(--muted);
}

.unblock-btn {
  padding: 6px 12px;
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
}

.unblock-btn:hover {
  background: var(--panel);
  border-color: var(--accent);
}

/* Security events list */
.security-events-list {
  margin-top: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.security-event-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}

.security-event-icon {
  font-size: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
}

.security-event-content {
  flex: 1;
}

.security-event-action {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.security-event-details {
  font-size: 12px;
  color: var(--muted);
}

.security-event-time {
  font-size: 11px;
  color: var(--muted-2);
  text-align: right;
}

/* API Key styles */
.api-key-result {
  margin-top: 16px;
  padding: 16px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: var(--radius-md);
}

.api-key-warning {
  font-size: 13px;
  color: #f59e0b;
  margin-bottom: 12px;
  font-weight: 600;
}

.api-key-value {
  display: block;
  padding: 12px;
  background: var(--bg-1);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  font-family: monospace;
  font-size: 13px;
  word-break: break-all;
  user-select: all;
}

/* Superadmin only visibility */
.superadmin-only {
  display: none !important;
}

body[data-role="superadmin"] .superadmin-only {
  display: flex !important;
}

/* v5.0.0: Specific rule for admin-tab-btn */
.admin-tab-btn.superadmin-only {
  display: none !important;
}

body[data-role="superadmin"] .admin-tab-btn.superadmin-only {
  display: inline-flex !important;
}

body[data-role="superadmin"] .tab-content.superadmin-only {
  display: none !important;
}

body[data-role="superadmin"] .tab-content.superadmin-only.active {
  display: flex !important;
}

/* Light theme */
body.theme-light .security-stat-card {
  background: #ffffff;
}

body.theme-light .security-event-item {
  background: #ffffff;
}

body.theme-light .api-key-value {
  background: #f8f9fa;
}

/* ===== SCRIPTS TAB STYLES ===== */

/* Script display for sellers */
.script-display {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-top: 16px;
}

.script-content {
  font-size: 15px;
  line-height: 1.8;
  white-space: pre-wrap;
  color: var(--ink);
}

.script-content .script-section {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}

.script-content .script-section-title {
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
  font-size: 14px;
}

/* Script checklist */
.script-checklist-section {
  margin-top: 20px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
}

.checklist-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--ink);
}

.script-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.checklist-item:hover {
  background: rgba(41, 98, 255, 0.08);
}

.checklist-item.checked {
  background: rgba(34, 197, 94, 0.1);
}

.checklist-item.checked .checklist-checkbox {
  background: #22c55e;
  border-color: #22c55e;
}

.checklist-item.checked .checklist-checkbox::after {
  content: '✓';
  color: white;
  font-size: 12px;
}

.checklist-checkbox {
  width: 22px;
  height: 22px;
  border: 2px solid var(--stroke);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--t) var(--ease);
}

.checklist-label {
  flex: 1;
  font-size: 14px;
}

.checklist-points {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  padding: 2px 8px;
  background: rgba(41, 98, 255, 0.1);
  border-radius: var(--radius-sm);
}

.checklist-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-2);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #22c55e);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.progress-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  min-width: 40px;
  text-align: right;
}

/* AI Tips section */
.ai-tips-section {
  margin-top: 16px;
  padding: 16px;
  background: rgba(41, 98, 255, 0.05);
  border: 1px solid rgba(41, 98, 255, 0.15);
  border-radius: var(--radius-md);
}

.tips-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--accent);
}

.ai-tips-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tip-item {
  font-size: 14px;
  color: var(--ink);
  padding: 8px 12px;
  background: var(--panel);
  border-radius: var(--radius-sm);
}

/* AI Score block */
.ai-score-block {
  margin-top: 16px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
}

.ai-score-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.ai-score-title {
  font-size: 14px;
  font-weight: 600;
}

.ai-score-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
}

.ai-score-value.good { color: #22c55e; }
.ai-score-value.medium { color: #f59e0b; }
.ai-score-value.bad { color: #ef4444; }

.ai-score-feedback {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

/* Scoring rules */
.rules-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.rule-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  transition: all var(--t) var(--ease);
}

.rule-item:hover {
  border-color: var(--accent);
}

.rule-item.inactive {
  opacity: 0.5;
}

.rule-icon {
  font-size: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border-radius: var(--radius-sm);
}

.rule-content {
  flex: 1;
}

.rule-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

.rule-keywords {
  font-size: 12px;
  color: var(--muted);
}

.rule-points {
  font-size: 16px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
}

.rule-points.positive {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.rule-points.negative {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.rule-actions {
  display: flex;
  gap: 6px;
}

.rule-action-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  transition: all var(--t) var(--ease);
}

.rule-action-btn:hover {
  background: var(--panel);
  border-color: var(--accent);
}

/* Add rule form */
.add-rule-form {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
}

.form-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
}

.form-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr;
  gap: 12px;
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--muted);
}

/* Rules templates */
.rules-template-details {
  margin-top: 16px;
}

.rules-template-details summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
}

.rules-templates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.template-btn {
  padding: 8px 14px;
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.template-btn:hover {
  border-color: var(--accent);
  background: rgba(41, 98, 255, 0.05);
}

/* Leaderboard */
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.leaderboard-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
}

.leaderboard-item.top-1 {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
  border-color: rgba(255, 215, 0, 0.3);
}

.leaderboard-item.top-2 {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.1), rgba(192, 192, 192, 0.05));
  border-color: rgba(192, 192, 192, 0.3);
}

.leaderboard-item.top-3 {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.1), rgba(205, 127, 50, 0.05));
  border-color: rgba(205, 127, 50, 0.3);
}

.leaderboard-rank {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  background: var(--panel);
  border-radius: 50%;
}

.leaderboard-item.top-1 .leaderboard-rank { background: gold; color: #333; }
.leaderboard-item.top-2 .leaderboard-rank { background: silver; color: #333; }
.leaderboard-item.top-3 .leaderboard-rank { background: #cd7f32; color: #fff; }

.leaderboard-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
}

.leaderboard-score {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}

.leaderboard-trend {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.leaderboard-trend.up {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.leaderboard-trend.down {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* Network only visibility */
.network-only {
  display: none;
}

body[data-role="network_manager"] .network-only,
body[data-role="superadmin"] .network-only {
  display: block;
}

/* Seller only visibility */
body[data-role="seller"] #scriptAdminBlock,
body[data-role="seller"] #scoringRulesBlock {
  display: none;
}

body[data-role="network_manager"] #scriptSellerView,
body[data-role="superadmin"] #scriptSellerView {
  display: none;
}

/* Light theme */
body.theme-light .script-display,
body.theme-light .script-checklist-section,
body.theme-light .ai-tips-section,
body.theme-light .ai-score-block,
body.theme-light .add-rule-form {
  background: #ffffff;
}

body.theme-light .rule-item,
body.theme-light .leaderboard-item {
  background: #f8f9fa;
}

/* ===== TERMS CONSENT STYLES ===== */

/* Legal Modals */
.legal-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.legal-modal.hidden {
  display: none;
}

.legal-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.legal-modal-content {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.legal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--stroke);
}

.legal-modal-header h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.legal-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  transition: all var(--t) var(--ease);
}

.legal-modal-close:hover {
  background: var(--bg-2);
  color: var(--ink);
}

.legal-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  font-size: 14px;
  line-height: 1.7;
}

.legal-modal-body h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 20px 0 10px 0;
  color: var(--accent);
}

.legal-modal-body h3:first-child {
  margin-top: 0;
}

.legal-modal-body p {
  margin: 10px 0;
  color: var(--ink);
}

.legal-modal-body ul {
  margin: 10px 0;
  padding-left: 24px;
}

.legal-modal-body li {
  margin: 6px 0;
  color: var(--muted);
}

.legal-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--stroke);
  display: flex;
  justify-content: flex-end;
}

body.theme-light .legal-modal-content {
  background: #ffffff;
}

/* ===== PWA INSTALL MODAL - RIGHT SIDEBAR STYLE ===== */

.pwa-install-overlay {
  position: fixed;
  top: 80px;
  right: 20px;
  bottom: auto;
  left: auto;
  width: 320px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 24px;
  z-index: 1000;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  animation: pwaSidebarIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pwaSidebarIn {
  from { 
    opacity: 0; 
    transform: translateX(20px);
  }
  to { 
    opacity: 1; 
    transform: translateX(0);
  }
}

.pwa-install-overlay.closing {
  animation: pwaSidebarOut 0.25s ease forwards;
}

@keyframes pwaSidebarOut {
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}

.pwa-install-modal {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
}

@keyframes pwaModalIn {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.pwa-install-overlay.closing .pwa-install-modal {
  animation: pwaModalOut 0.25s ease forwards;
}

@keyframes pwaModalOut {
  to {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
}

.pwa-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fog-bg);
  border: 1px solid var(--stroke);
  border-radius: 6px;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pwa-close-btn:hover {
  background: var(--stroke);
  color: var(--ink);
}

.pwa-modal-icon {
  width: 56px;
  height: 56px;
  margin: 0 0 16px 0;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(41, 98, 255, 0.25);
}

.pwa-modal-icon img {
  width: 36px;
  height: 36px;
}

.pwa-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}

.pwa-modal-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 20px;
}

.pwa-modal-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.pwa-modal-feature {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pwa-modal-feature-icon {
  width: 36px;
  height: 36px;
  background: var(--fog-bg);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.pwa-modal-feature-icon svg {
  width: 18px;
  height: 18px;
}

.pwa-modal-feature span:last-child {
  font-size: 13px;
  color: var(--ink);
}

.pwa-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pwa-modal-install-btn {
  flex: 1;
  min-width: 100px;
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pwa-modal-install-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(41, 98, 255, 0.35);
}

.pwa-modal-install-btn:active {
  transform: translateY(0);
}

.pwa-modal-later-btn {
  padding: 10px 16px;
  background: var(--fog-bg);
  color: var(--ink);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pwa-modal-later-btn:hover {
  background: var(--stroke);
}

.pwa-modal-never-btn {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  background: transparent;
  color: var(--muted);
  border: none;
  font-size: 12px;
  cursor: pointer;
  transition: color var(--t);
  opacity: 0.7;
}

.pwa-modal-never-btn:hover {
  color: var(--muted);
  opacity: 1;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .pwa-install-modal {
    padding: 28px 20px;
  }
  
  .pwa-modal-icon {
    width: 70px;
    height: 70px;
    font-size: 36px;
  }
  
  .pwa-modal-title {
    font-size: 20px;
  }
  
  .pwa-modal-features {
    gap: 12px;
  }
  
  .pwa-modal-feature-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

/* Offline mode */
body.offline::before {
  content: '📡 Офлайн режим';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #f59e0b;
  color: white;
  text-align: center;
  padding: 8px;
  font-size: 13px;
  font-weight: 600;
  z-index: 10001;
}

body.offline .app-wrapper {
  margin-top: 36px;
}

/* Notification settings */
.notification-settings {
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  margin-top: 16px;
}

.notification-setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--stroke);
}

.notification-setting-row:last-child {
  border-bottom: none;
}

.notification-setting-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notification-setting-icon {
  font-size: 20px;
}

.notification-setting-text {
  font-size: 14px;
}

.notification-setting-desc {
  font-size: 12px;
  color: var(--muted);
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-switch .toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  height: 26px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 26px;
  transition: 0.3s;
}

.toggle-switch .toggle-slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
  background: #34c759;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(22px);
}

/* Analytics charts placeholder */
.analytics-chart {
  width: 100%;
  height: 300px;
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}

@media (max-width: 768px) {
  .analytics-grid {
    grid-template-columns: 1fr;
  }
}

.analytics-card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 20px;
}

.analytics-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.analytics-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.analytics-card-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
}

.analytics-card-change {
  font-size: 13px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.analytics-card-change.positive {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.analytics-card-change.negative {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* AI Chat enhanced */
.ai-chat-history {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--bg-2);
  border-radius: var(--radius-md);
}

.ai-chat-message {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  max-width: 85%;
}

.ai-chat-message.user {
  background: var(--accent);
  color: white;
  margin-left: auto;
}

.ai-chat-message.assistant {
  background: var(--panel);
  border: 1px solid var(--stroke);
}

.ai-chat-message .message-time {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 6px;
}

/* Email compose */
.email-compose {
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
}

.email-compose .form-group {
  margin-bottom: 16px;
}

.email-compose label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--muted);
}

.email-compose textarea {
  min-height: 150px;
  resize: vertical;
}

/* Push notification preview */
.push-preview {
  background: var(--bg-1);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 16px;
}

.push-preview-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.push-preview-icon {
  width: 40px;
  height: 40px;
  background: var(--accent);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.push-preview-app {
  font-size: 12px;
  color: var(--muted);
}

.push-preview-title {
  font-size: 14px;
  font-weight: 600;
}

.push-preview-body {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}

/* Light theme - PWA banner uses CSS vars automatically */
body.theme-light .ai-chat-message.assistant {
  background: #f8f9fa;
}

body.theme-light .analytics-card {
  background: #ffffff;
}

/* ===== ANALYTICS TAB STYLES ===== */

.analytics-period-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.period-btn {
  padding: 8px 16px;
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.period-btn:hover {
  border-color: var(--accent);
}

.period-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.period-custom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.period-custom .input {
  width: 100%;
  min-width: 0;
}
.period-custom span {
  text-align: center;
}
.period-custom #applyPeriodBtn {
  grid-column: 1 / -1;
  width: 100%;
  padding: 10px 14px;
  font-weight: 600;
}

.analytics-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 1024px) {
  .analytics-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .analytics-summary-grid {
    grid-template-columns: 1fr;
  }
}

.analytics-summary-card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  min-width: 0;
}

.summary-icon {
  font-size: 32px;
  width: 56px;
  min-width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border-radius: var(--radius-md);
}

.summary-content {
  flex: 1;
  min-width: 0;
}

.summary-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
}

.summary-label {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

.summary-change {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  white-space: nowrap;
}

.summary-change.positive {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.summary-change.negative {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.summary-change.neutral {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.1);
}

/* v5.4.3: Trend arrows for dashboard stat cards */
.stat-trend {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.stat-trend.positive { color: #22c55e; background: rgba(34, 197, 94, 0.1); }
.stat-trend.negative { color: #ef4444; background: rgba(239, 68, 68, 0.1); }
.stat-trend.neutral  { color: #94a3b8; background: rgba(148, 163, 184, 0.1); }

.analytics-charts-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

@media (max-width: 1024px) {
  .analytics-charts-row {
    grid-template-columns: 1fr;
  }
}

.analytics-chart-card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 20px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.chart-header h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.chart-container {
  height: 250px;
  position: relative;
}

.top-performers-list {
  max-height: 300px;
  overflow-y: auto;
}

.performer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--stroke);
}

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

.performer-rank {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}

.performer-item:nth-child(1) .performer-rank {
  background: gold;
  color: #333;
}

.performer-item:nth-child(2) .performer-rank {
  background: silver;
  color: #333;
}

.performer-item:nth-child(3) .performer-rank {
  background: #cd7f32;
  color: white;
}

.performer-info {
  flex: 1;
}

.performer-name {
  font-size: 14px;
  font-weight: 600;
}

.performer-region {
  font-size: 12px;
  color: var(--muted);
}

.performer-score {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}

/* Regions table */
.regions-table-container {
  overflow-x: auto;
}

.regions-table {
  width: 100%;
  border-collapse: collapse;
}

.regions-table th,
.regions-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--stroke);
}

.regions-table th {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
}

.regions-table td {
  font-size: 14px;
}

/* Hourly chart */
.hourly-chart-container {
  padding: 16px 0;
}

.hourly-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 150px;
}

.hourly-bar {
  flex: 1;
  background: var(--accent);
  border-radius: 4px 4px 0 0;
  min-width: 16px;
  position: relative;
  transition: all 0.3s ease;
}

.hourly-bar:hover {
  background: #5b8aff;
}

.hourly-bar::after {
  content: attr(data-hour);
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--muted);
}

/* Twenty-four hourly columns fit on a phone without horizontal overflow.
   Show a label every four hours, which keeps the chart readable on small screens. */
@media (max-width: 560px) {
  .hourly-chart-container {
    overflow: hidden;
    padding: 16px 0 24px;
  }

  .hourly-bars {
    gap: 2px;
    height: 132px;
    min-width: 0;
  }

  .hourly-bar {
    min-width: 0;
  }

  .hourly-bar::after {
    display: none;
  }

  .hourly-bar:nth-child(4n + 1)::after {
    display: block;
    bottom: -18px;
    font-size: 9px;
  }
}

/* ===== NOTIFICATIONS CENTER STYLES ===== */

.notification-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .notification-quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .notification-quick-actions {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}

/* v5.2.79: Use more specific selector to avoid conflicts */
.notification-quick-actions .quick-action-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 20px 12px !important;
  width: auto !important;
  height: auto !important;
  background: var(--panel) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.notification-quick-actions .quick-action-btn:hover {
  border-color: var(--accent) !important;
  transform: translateY(-2px);
  background: rgba(59, 130, 246, 0.08) !important;
}

.notification-quick-actions .qa-icon {
  font-size: 28px !important;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.15);
  border-radius: 50%;
}

.notification-quick-actions .qa-text {
  font-size: 12px !important;
  font-weight: 600;
  text-align: center;
  word-break: break-word;
  line-height: 1.3;
}

.notification-form {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 24px;
}

.notification-form h4 {
  font-size: 16px;
  margin-bottom: 16px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

/* Triggers list */
.triggers-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trigger-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
}

.trigger-icon {
  font-size: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border-radius: var(--radius-sm);
}

.trigger-content {
  flex: 1;
}

.trigger-name {
  font-size: 14px;
  font-weight: 600;
}

.trigger-desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* v5.2.34: Templates grid */
/* v6.8.0: Redesigned template center */
.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.template-card {
  position: relative;
  padding: 8px 16px 14px;
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: visible;
}

.template-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(41, 98, 255, 0.08);
}

.template-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.template-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
}

.template-name {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.template-card-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  position: relative;
}

.template-card .btn-sm {
  padding: 5px 12px;
  font-size: 11px;
  border-radius: 6px;
}

/* Three-dots trigger — inline in actions row */
.tpl-dots-btn {
  position: static;
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  font-size: 14px;
  letter-spacing: 1px;
}
.tpl-dots-btn:hover { opacity: 1; }

/* Contextual popover menu */
.tpl-popover {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 6px;
  min-width: 160px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 100;
  padding: 4px;
  opacity: 0;
  transform: translateY(4px) scale(0.97);
  animation: tplPopIn 0.15s ease forwards;
}
@keyframes tplPopIn {
  to { opacity: 1; transform: none; }
}
.tpl-popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--ink);
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.12s;
}
.tpl-popover-item:hover { background: rgba(255,255,255,0.06); }
.tpl-popover-item.danger { color: #ef4444; }
.tpl-popover-item.danger:hover { background: rgba(239,68,68,0.08); }
.tpl-popover-sep { height: 1px; background: var(--stroke); margin: 4px 8px; }

/* Template section headers */
.tpl-section-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 20px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: space-between;
}
.tpl-add-btn {
  font-size: 11px;
  padding: 3px 10px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.tpl-add-btn:hover { opacity: 1; }
.tpl-section-sub {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}

/* Light theme */
body.theme-light .template-icon { background: rgba(0,0,0,0.04); }
body.theme-light .tpl-dots-btn:hover { background: rgba(0,0,0,0.06); }
body.theme-light .tpl-popover { box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
body.theme-light .tpl-popover-item:hover { background: rgba(0,0,0,0.04); }

/* Delivery log */
.delivery-log-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.delivery-log-list {
  max-height: 300px;
  overflow-y: auto;
}

.log-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--stroke);
  font-size: 13px;
}

.log-icon {
  font-size: 16px;
}

.log-recipient {
  min-width: 150px;
  font-weight: 500;
}

.log-subject {
  flex: 1;
  color: var(--muted);
}

.log-status {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
}

.log-status.sent {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.log-status.failed {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.log-status.pending {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.log-time {
  font-size: 12px;
  color: var(--muted);
}

/* ===== SETTINGS TAB STYLES ===== */

.settings-container {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  min-height: 500px;
}

@media (max-width: 768px) {
  .settings-container {
    grid-template-columns: 1fr;
  }
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (max-width: 768px) {
  .settings-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.settings-nav-btn {
  padding: 12px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.settings-nav-btn:hover {
  color: var(--ink);
  background: var(--bg-2);
}

.settings-nav-btn.active {
  color: var(--accent);
  background: rgba(41, 98, 255, 0.1);
  border-color: var(--accent);
  font-weight: 600;
}

.settings-content {
  flex: 1;
}

.settings-section {
  display: none !important;
}

.settings-section.active {
  display: block !important;
}

.settings-section h3 {
  font-size: 20px;
  margin-bottom: 20px;
}

.settings-card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 24px;
}

.settings-card h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
}

.settings-card.danger {
  border-color: rgba(239, 68, 68, 0.3);
}

/* Profile */
.profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--stroke);
}

.profile-avatar {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--accent), #5b8aff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  color: white;
}

.profile-name {
  font-size: 20px;
  font-weight: 700;
}

.profile-role {
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.settings-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 16px;
}

.settings-row label {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

.settings-row.readonly input {
  background: var(--bg-2);
  color: var(--muted);
}

/* Settings options */
.settings-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--stroke);
}

.settings-option:last-child {
  border-bottom: none;
}

.option-info {
  flex: 1;
}

.option-label {
  font-size: 14px;
  font-weight: 600;
}

.option-desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Privacy section */
.data-summary {
  display: flex;
  gap: 24px;
  margin-top: 16px;
}

.data-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-icon {
  font-size: 20px;
}

.data-label {
  color: var(--muted);
  font-size: 13px;
}

.data-value {
  font-weight: 700;
  font-size: 14px;
}

.retention-list {
  margin: 12px 0;
  padding-left: 20px;
}

.retention-list li {
  margin: 8px 0;
  font-size: 14px;
  color: var(--muted);
}

.consent-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--stroke);
}

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


.consent-status {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
}

.consent-status.accepted {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.consent-info {
  flex: 1;
}

.consent-name {
  font-size: 14px;
  font-weight: 600;
}

.consent-date {
  font-size: 12px;
  color: var(--muted);
}

.data-request-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

/* Privacy requests list */
.privacy-requests-list {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.privacy-requests-list .no-requests {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 12px;
}

.privacy-request-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.privacy-request-type {
  font-size: 14px;
  font-weight: 500;
}

.privacy-request-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.privacy-request-date {
  font-size: 12px;
  color: var(--muted);
}

.privacy-request-status {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.privacy-request-status.pending {
  background: rgba(234, 179, 8, 0.2);
  color: #eab308;
}

.privacy-request-status.processing {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.privacy-request-status.completed {
  background: rgba(34, 197, 94, 0.2);
  color: var(--accent);
}

/* Security section */
.password-strength {
  margin-top: 8px;
  height: 4px;
  background: var(--bg-2);
  border-radius: 2px;
  overflow: hidden;
}

.password-strength::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--strength, 0%);
  background: var(--strength-color, #ef4444);
  transition: all 0.3s ease;
}

.sessions-list {
  margin-top: 12px;
}

.session-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.session-item.current {
  border: 1px solid var(--accent);
}

.session-icon {
  font-size: 24px;
}

.session-info {
  flex: 1;
}

.session-device {
  font-size: 14px;
  font-weight: 600;
}

.session-details {
  font-size: 12px;
  color: var(--muted);
}

.session-badge {
  font-size: 11px;
  padding: 4px 8px;
  background: var(--accent);
  color: white;
  border-radius: var(--radius-sm);
}

/* Workspace section */
.script-roles-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.script-role-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
}

.script-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.script-status.active {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

/* Time range picker */
.time-range {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.time-range label {
  font-size: 13px;
  color: var(--muted);
}

/* Quiet hours */
.quiet-hours-times {
  margin-top: 12px;
  padding: 16px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
}

/* Network manager only */
.network-manager-only {
  display: none;
}

body[data-role="network_manager"] .network-manager-only,
body[data-role="region_manager"] .network-manager-only,
body[data-role="superadmin"] .network-manager-only {
  display: block;
}

/* Light theme */
body.theme-light .settings-card,
body.theme-light .analytics-chart-card,
body.theme-light .analytics-summary-card,
body.theme-light .notification-form {
  background: #ffffff;
}

body.theme-light .trigger-item,
body.theme-light .session-item,
body.theme-light .quiet-hours-times {
  background: #f8f9fa;
}

/* ===== REALTIME WEBSOCKET STYLES ===== */

/* Connection status indicator */
.ws-status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  display: inline-block;
  margin-right: 8px;
  transition: background 0.3s ease;
}

.ws-status-indicator.connected {
  background: #22c55e;
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

/* Online users badge */
.online-users-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: #22c55e;
}

.online-users-count {
  font-weight: 700;
}

/* Unread messages badge */
.unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9px;
  padding: 0 5px;
}

.unread-badge.hidden {
  display: none;
}

/* Typing indicator */
.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-2);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--muted);
}

.typing-dots {
  display: flex;
  gap: 3px;
}

.typing-dot {
  width: 6px;
  height: 6px;
  background: var(--muted);
  border-radius: 50%;
  animation: typing-bounce 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* Realtime notification toast */
.realtime-toast {
  position: fixed;
  bottom: 80px;
  right: 20px;
  max-width: 350px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  animation: slideInRight 0.3s ease;
  z-index: 9998;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.realtime-toast-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.realtime-toast-icon {
  font-size: 20px;
}

.realtime-toast-title {
  font-weight: 600;
  font-size: 14px;
}

.realtime-toast-body {
  font-size: 13px;
  color: var(--muted);
}

/* Online indicator dot */
.user-online-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  position: absolute;
  bottom: 2px;
  right: 2px;
  border: 2px solid var(--panel);
}

.user-offline-dot {
  background: #6b7280;
}

/* Realtime activity feed */
.activity-feed {
  max-height: 400px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--stroke);
}

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

.activity-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  font-size: 16px;
}

.activity-content {
  flex: 1;
}

.activity-text {
  font-size: 14px;
}

.activity-time {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Light theme */
body.theme-light .realtime-toast {
  background: #ffffff;
}

/* ===== SCRIPTS HUB STYLES ===== */

.scripts-hub {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.scripts-hub-header {
  padding: 20px;
  border-bottom: 1px solid var(--stroke);
  background: var(--bg-2);
}

.scripts-hub-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
}

.scripts-hub-controls {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.script-type-selector {
  display: flex;
  background: var(--bg-1);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.script-type-btn {
  padding: 10px 20px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.script-type-btn:hover {
  color: var(--ink);
  background: var(--bg-2);
}

.script-type-btn.active {
  background: var(--accent);
  color: white;
}

.scripts-hub-search {
  flex: 1;
  min-width: 200px;
  max-width: 400px;
  position: relative;
}

.scripts-hub-search .input {
  width: 100%;
  padding-left: 16px;
}

.scripts-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  max-height: 400px;
  overflow-y: auto;
  z-index: 100;
  margin-top: 4px;
}

.search-result-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--stroke);
  cursor: pointer;
  transition: background var(--t) var(--ease);
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background: var(--bg-2);
}

.search-result-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  font-size: 18px;
  flex-shrink: 0;
}

.search-result-content {
  flex: 1;
  min-width: 0;
}

.search-result-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

.search-result-snippet {
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-type {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--accent);
  color: white;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

/* Quick Routes */
.scripts-quick-routes {
  padding: 12px 20px;
  border-bottom: 1px solid var(--stroke);
  position: relative;
}

.quick-routes-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.quick-routes-btn:hover {
  border-color: var(--accent);
}

.dropdown-arrow {
  font-size: 10px;
  transition: transform var(--t) var(--ease);
}

.quick-routes-btn.open .dropdown-arrow {
  transform: rotate(180deg);
}

.quick-routes-dropdown {
  position: absolute;
  top: 100%;
  left: 20px;
  min-width: 300px;
  max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 100;
  max-height: 400px;
  overflow-y: auto;
}

.route-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--stroke);
  cursor: pointer;
  transition: background var(--t) var(--ease);
}

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

.route-item:hover {
  background: var(--bg-2);
}

.route-icon {
  font-size: 20px;
}

.route-info {
  flex: 1;
}

.route-label {
  font-size: 14px;
  font-weight: 600;
}

.route-desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Hub Tabs */
.scripts-hub-tabs {
  display: flex;
  gap: 0;
  padding: 0 20px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--stroke);
  overflow-x: auto;
}

.hub-tab-btn {
  padding: 14px 20px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t) var(--ease);
  position: relative;
}

.hub-tab-btn:hover {
  color: var(--ink);
}

.hub-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.hub-badge {
  position: absolute;
  top: 8px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9px;
  padding: 0 5px;
}

/* Hub Content */
.scripts-hub-content {
  padding: 0;
}

.hub-tab-content {
  display: none;
  padding: 20px;
  min-height: 300px;
}

.hub-tab-content.active {
  display: block;
}

.hub-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  font-size: 15px;
}

/* Main Script Content */
.main-script-content {
  line-height: 1.8;
}

.script-loading {
  text-align: center;
  padding: 40px;
  color: var(--muted);
}

.script-block {
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 16px;
}

.script-block-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.script-block-content {
  font-size: 15px;
  color: var(--ink);
  white-space: pre-wrap;
}

.script-highlight {
  background: rgba(41, 98, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--accent);
  font-weight: 600;
}

/* Routes Grid */
.routes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.route-card {
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 20px;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.route-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.route-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.route-card-icon {
  font-size: 28px;
}

.route-card-title {
  font-size: 16px;
  font-weight: 700;
}

.route-card-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* Promos List */
.promos-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.promo-card {
  background: linear-gradient(135deg, rgba(41, 98, 255, 0.1), rgba(100, 150, 255, 0.05));
  border: 1px solid rgba(41, 98, 255, 0.2);
  border-radius: var(--radius-md);
  padding: 20px;
}

.promo-card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.promo-icon {
  font-size: 32px;
}

.promo-title {
  font-size: 18px;
  font-weight: 700;
  flex: 1;
}

.promo-dates {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 10px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
}

.promo-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}

.promo-what-to-say {
  margin-top: 16px;
  padding: 16px;
  background: var(--panel);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--accent);
}

.promo-what-to-say-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
}

/* Knowledge Base */
.kb-categories {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.kb-category-btn {
  padding: 8px 16px;
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.kb-category-btn:hover,
.kb-category-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.kb-articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.kb-article-card {
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.kb-article-card:hover {
  border-color: var(--accent);
}

.kb-article-category {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}

.kb-article-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}

.kb-article-preview {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kb-article-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.kb-tag {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--bg-1);
  border-radius: var(--radius-sm);
  color: var(--muted);
}

/* KB Modal */
.kb-modal {
  max-width: 700px;
}

.kb-article-content {
  font-size: 15px;
  line-height: 1.8;
}

.kb-article-content h1,
.kb-article-content h2,
.kb-article-content h3 {
  margin: 20px 0 10px 0;
}

.kb-article-content p {
  margin-bottom: 12px;
}

.kb-article-content ul,
.kb-article-content ol {
  margin-left: 20px;
  margin-bottom: 12px;
}

/* Tasks */
.tasks-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.task-filter-btn {
  padding: 8px 16px;
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.task-filter-btn:hover,
.task-filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-card {
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.task-card:hover {
  border-color: var(--accent);
}

.task-card.done {
  opacity: 0.6;
}

.task-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.task-priority {
  font-size: 18px;
}

.task-priority.high {
  color: #ef4444;
}

.task-priority.normal {
  color: #f59e0b;
}

.task-priority.low {
  color: #22c55e;
}

.task-info {
  flex: 1;
}

.task-title {
  font-size: 15px;
  font-weight: 700;
}

.task-due {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.task-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-1);
  border-radius: 3px;
  overflow: hidden;
}

.task-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.task-progress-text {
  font-size: 12px;
  color: var(--muted);
  min-width: 40px;
}

/* Task Modal */
.task-modal {
  max-width: 600px;
}

.task-description {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.task-checklist {
  margin-bottom: 20px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.checklist-item.completed {
  opacity: 0.6;
}

.checklist-checkbox {
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.checklist-text {
  flex: 1;
  font-size: 14px;
}

.checklist-required {
  font-size: 11px;
  color: #ef4444;
  font-weight: 600;
}

.task-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Updates List */
.updates-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.update-item {
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 16px;
}

.update-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.update-version {
  font-size: 14px;
  font-weight: 700;
  padding: 4px 12px;
  background: var(--accent);
  color: white;
  border-radius: var(--radius-sm);
}

.update-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
}

.update-date {
  font-size: 12px;
  color: var(--muted);
}

.update-changelog {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  padding-left: 12px;
  border-left: 3px solid var(--stroke);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .scripts-hub-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .script-type-selector {
    width: 100%;
  }
  
  .script-type-btn {
    flex: 1;
  }
  
  .scripts-hub-search {
    max-width: none;
  }
  
  .scripts-hub-tabs {
    padding: 0 12px;
  }
  
  .hub-tab-btn {
    padding: 12px 14px;
    font-size: 13px;
  }
  
  .hub-tab-content {
    padding: 16px;
  }
  
  .routes-grid,
  .kb-articles {
    grid-template-columns: 1fr;
  }
}

/* Light theme */
body.theme-light .scripts-hub {
  background: #ffffff;
}

body.theme-light .quick-routes-dropdown,
body.theme-light .scripts-search-results {
  background: #ffffff;
}

body.theme-light .script-block,
body.theme-light .route-card,
body.theme-light .kb-article-card,
body.theme-light .task-card,
body.theme-light .update-item {
  background: #f8f9fa;
}

/* ===== WORKFORCE MANAGEMENT STYLES ===== */

/* Shift Planning */
.shift-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.shift-filters,
.shift-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.shift-calendar {
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.shift-calendar-header {
  display: grid;
  grid-template-columns: 120px repeat(7, 1fr);
  background: var(--panel);
  border-bottom: 1px solid var(--stroke);
}

.shift-day-header {
  padding: 12px 8px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  border-right: 1px solid var(--stroke);
}

.shift-day-header:last-child {
  border-right: none;
}

.shift-day-header.today {
  background: rgba(41, 98, 255, 0.1);
  color: var(--accent);
}

.shift-calendar-body {
  max-height: 500px;
  overflow-y: auto;
}

.shift-row {
  display: grid;
  grid-template-columns: 120px repeat(7, 1fr);
  border-bottom: 1px solid var(--stroke);
}

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

.shift-employee-cell {
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  border-right: 1px solid var(--stroke);
  background: var(--panel);
  position: sticky;
  left: 0;
}

.shift-day-cell {
  padding: 8px;
  min-height: 60px;
  border-right: 1px solid var(--stroke);
  position: relative;
}

.shift-day-cell:last-child {
  border-right: none;
}

.shift-item {
  padding: 6px 8px;
  background: var(--accent);
  color: white;
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.shift-item:hover {
  transform: scale(1.02);
}

.shift-item.draft {
  background: #6b7280;
}

.shift-item.published {
  background: #f59e0b;
}

.shift-item.confirmed {
  background: #22c55e;
}

.shift-item.declined {
  background: #ef4444;
}

.shift-item-time {
  font-weight: 600;
}

.shift-stats {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 16px;
  background: var(--bg-2);
  border-radius: var(--radius-md);
}

.shift-stat-item {
  display: flex;
  gap: 8px;
}

.stat-label {
  color: var(--muted);
  font-size: 13px;
}

.stat-value {
  font-weight: 700;
  font-size: 14px;
}

/* My Shifts (Seller) */
.schedule-week-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}

.schedule-week-label {
  font-size: 15px;
  font-weight: 600;
  min-width: 200px;
  text-align: center;
}

.my-shifts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.my-shift-card {
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.my-shift-card.needs-action {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.05);
}

.my-shift-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.my-shift-date {
  font-size: 16px;
  font-weight: 700;
}

.my-shift-time {
  font-size: 14px;
  color: var(--muted);
}

.my-shift-status {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.my-shift-status.draft { background: #6b7280; color: white; }
.my-shift-status.published { background: #f59e0b; color: white; }
.my-shift-status.confirmed { background: #22c55e; color: white; }
.my-shift-status.declined { background: #ef4444; color: white; }

.my-shift-actions {
  display: flex;
  gap: 8px;
}

/* Break Warning */
.break-warning-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid #f59e0b;
  border-radius: var(--radius-md);
  margin-top: 20px;
}

.break-warning-icon {
  font-size: 24px;
}

.break-warning-text {
  flex: 1;
  font-size: 14px;
}

/* Attendance Issues */
.attendance-issues {
  margin-top: 24px;
  padding: 16px;
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-md);
}

.attendance-issues h3 {
  font-size: 15px;
  margin-bottom: 12px;
}

.attendance-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attendance-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--panel);
  border-radius: var(--radius-sm);
}

.attendance-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.attendance-item-type {
  font-weight: 600;
  font-size: 14px;
}

.attendance-item-type.late { color: #f59e0b; }
.attendance-item-type.early_leave { color: #f97316; }
.attendance-item-type.no_show { color: #ef4444; }

.attendance-item-date {
  font-size: 12px;
  color: var(--muted);
}

.attendance-item-diff {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Discipline Section (Manager) */
.discipline-section {
  padding: 16px;
  background: var(--bg-2);
  border-radius: var(--radius-md);
}

.discipline-section h4 {
  margin-bottom: 16px;
}

.discipline-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.discipline-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}

/* Timesheets */
.timesheet-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.timesheet-filters,
.timesheet-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.timesheets-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timesheet-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.timesheet-card:hover {
  border-color: var(--accent);
}

.timesheet-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timesheet-login {
  font-size: 15px;
  font-weight: 600;
}

.timesheet-period {
  font-size: 13px;
  color: var(--muted);
}

.timesheet-hours {
  font-size: 14px;
  color: var(--ink);
}

.timesheet-status {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.timesheet-status.draft { background: #6b7280; color: white; }
.timesheet-status.submitted { background: #3b82f6; color: white; }
.timesheet-status.approved { background: #22c55e; color: white; }
.timesheet-status.rejected { background: #ef4444; color: white; }

/* Timesheet Modal */
.timesheet-modal {
  max-width: 900px;
  width: 95%;
}

.timesheet-summary {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--bg-2);
  border-radius: var(--radius-md);
}

.timesheet-summary-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timesheet-summary-label {
  font-size: 12px;
  color: var(--muted);
}

.timesheet-summary-value {
  font-size: 18px;
  font-weight: 700;
}

.timesheet-items-table {
  max-height: 400px;
  overflow-y: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--stroke);
  font-size: 13px;
}

.data-table th {
  background: var(--bg-2);
  font-weight: 600;
  position: sticky;
  top: 0;
}

.data-table tr:hover td {
  background: var(--bg-2);
}

/* Break Policy */
.break-policy-section {
  padding: 16px;
  background: var(--bg-2);
  border-radius: var(--radius-md);
}

.break-policy-section h4 {
  margin-bottom: 16px;
}

.break-policy-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.break-policy-form .form-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.break-policy-form label {
  min-width: 180px;
  font-size: 14px;
}

/* Break Violations */
.break-violations-section {
  padding: 16px;
  background: var(--bg-2);
  border-radius: var(--radius-md);
}

.break-violations-section h4 {
  margin-bottom: 16px;
}

.break-violations-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.break-violation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--panel);
  border-radius: var(--radius-sm);
}

/* Shift Action Modal */
.shift-action-modal {
  max-width: 500px;
}

.shift-action-details {
  padding: 16px;
  background: var(--bg-2);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.shift-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--stroke);
}

.shift-detail-row:last-child {
  border-bottom: none;
}

.decline-reason-block {
  margin-top: 16px;
}

.decline-reason-block label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

/* Add Shift Modal */
.add-shift-modal {
  max-width: 450px;
}

.form-row-inline {
  display: flex;
  gap: 16px;
}

.form-row-inline > div {
  flex: 1;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .shift-calendar-header,
  .shift-row {
    grid-template-columns: 80px repeat(7, 1fr);
  }
  
  .shift-employee-cell {
    font-size: 11px;
    padding: 8px;
  }
  
  .shift-controls,
  .timesheet-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .shift-actions,
  .timesheet-actions {
    justify-content: center;
  }
  
  .my-shift-card {
    flex-direction: column;
    text-align: center;
  }
  
  .schedule-week-nav {
    flex-wrap: wrap;
  }
}

/* Light theme */
body.theme-light .shift-calendar,
body.theme-light .discipline-section,
body.theme-light .break-policy-section,
body.theme-light .break-violations-section {
  background: #f8f9fa;
}

body.theme-light .my-shift-card,
body.theme-light .timesheet-card,
body.theme-light .attendance-item,
body.theme-light .break-violation-item {
  background: #ffffff;
}

/* ===== PERFORMANCE & INCENTIVES STYLES ===== */

/* KPI Dashboard */
.kpi-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-filters {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.kpi-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-summary-card {
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  transition: all var(--t) var(--ease);
}

.kpi-summary-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.kpi-summary-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.kpi-summary-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
}

.kpi-summary-label {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

.kpi-table-container {
  overflow-x: auto;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
}

#kpiTable {
  min-width: 700px;
}

/* Action List */
.action-list-section {
  background: var(--bg-2);
  border-radius: var(--radius-md);
  padding: 20px;
}

.action-list-section h4 {
  margin-bottom: 8px;
}

.action-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--panel);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--stroke);
}

.action-item.severity-high {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
}

.action-item.severity-medium {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.05);
}

.action-item.severity-low {
  border-left-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
}

.action-icon {
  font-size: 20px;
}

.action-content {
  flex: 1;
}

.action-message {
  font-size: 14px;
  font-weight: 500;
}

.action-type {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
}

/* QA Scoring */
.qa-controls {
  margin-bottom: 24px;
}

.qa-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.qa-templates-section {
  background: var(--bg-2);
  border-radius: var(--radius-md);
  padding: 20px;
}

.qa-templates-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.qa-templates-header h4 {
  margin: 0;
}

.qa-templates-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qa-template-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--panel);
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
}

.qa-template-name {
  font-weight: 600;
}

.qa-template-items-count {
  font-size: 12px;
  color: var(--muted);
}

.qa-run-section {
  background: var(--bg-2);
  border-radius: var(--radius-md);
  padding: 20px;
}

.qa-run-section h4 {
  margin-bottom: 16px;
}

.qa-run-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.qa-reviews-section {
  background: var(--bg-2);
  border-radius: var(--radius-md);
  padding: 20px;
}

.qa-reviews-section h4 {
  margin-bottom: 16px;
}

.qa-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 500px;
  overflow-y: auto;
}

.qa-review-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--panel);
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.qa-review-card:hover {
  border-color: var(--accent);
}

.qa-review-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qa-review-login {
  font-weight: 600;
  font-size: 15px;
}

.qa-review-meta {
  font-size: 12px;
  color: var(--muted);
}

.qa-review-score {
  font-size: 24px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
}

.qa-review-score.good {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.qa-review-score.medium {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.qa-review-score.bad {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* QA Template Modal */
.qa-template-modal {
  max-width: 600px;
}

.qa-template-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qa-template-item {
  display: flex;
  gap: 8px;
  align-items: center;
}

.qa-template-item input[type="text"] {
  flex: 1;
}

.qa-template-item input[type="number"] {
  width: 80px;
}

/* QA Review Modal */
.qa-review-modal {
  max-width: 700px;
}

.qa-review-summary {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--bg-2);
  border-radius: var(--radius-md);
}

.qa-review-summary-item {
  text-align: center;
}

.qa-review-summary-label {
  font-size: 12px;
  color: var(--muted);
}

.qa-review-summary-value {
  font-size: 24px;
  font-weight: 700;
}

.qa-checklist-result {
  margin-bottom: 20px;
}

.qa-checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--stroke);
}

.qa-checklist-item:last-child {
  border-bottom: none;
}

.qa-checklist-status {
  font-size: 18px;
}

.qa-checklist-text {
  flex: 1;
  font-size: 14px;
}

.qa-checklist-weight {
  font-size: 12px;
  color: var(--muted);
  background: var(--bg-2);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.qa-override-section {
  padding: 16px;
  background: var(--bg-2);
  border-radius: var(--radius-md);
}

.qa-override-section h4 {
  margin-bottom: 12px;
}

/* Rewards Manager */
.rewards-mgr-section {
  background: var(--bg-2);
  border-radius: var(--radius-md);
  padding: 20px;
}

.rewards-mgr-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.rewards-mgr-header h4 {
  margin: 0;
}

.rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.reward-mgr-card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 16px;
  position: relative;
}

.reward-mgr-card.inactive {
  opacity: 0.6;
}

.reward-mgr-image {
  width: 100%;
  height: 120px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  overflow: hidden;
}

.reward-mgr-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reward-mgr-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
}

.reward-mgr-desc {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

.reward-mgr-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.reward-mgr-cost {
  font-weight: 700;
  color: var(--accent);
}

.reward-mgr-stock {
  font-size: 12px;
  color: var(--muted);
}

.reward-mgr-actions {
  display: flex;
  gap: 8px;
}

/* Orders Section */
.orders-section {
  background: var(--bg-2);
  border-radius: var(--radius-md);
  padding: 20px;
}

.orders-section h4 {
  margin-bottom: 16px;
}

.orders-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
}

.order-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--panel);
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
}

.order-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-reward-title {
  font-weight: 600;
}

.order-meta {
  font-size: 12px;
  color: var(--muted);
}

.order-status {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.order-status.requested { background: #f59e0b; color: white; }
.order-status.approved { background: #22c55e; color: white; }
.order-status.rejected { background: #ef4444; color: white; }
.order-status.fulfilled { background: #3b82f6; color: white; }

.order-actions {
  display: flex;
  gap: 8px;
}

/* Reward Modal */
.reward-modal {
  max-width: 500px;
}

/* Order Reward Modal (Seller) */
.order-reward-modal {
  max-width: 450px;
}

.order-reward-details {
  padding: 16px;
  background: var(--bg-2);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.order-reward-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.order-reward-cost {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
}

.order-reward-balance {
  font-size: 14px;
  color: var(--muted);
}

.order-reward-warning {
  padding: 12px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.order-reward-warning p {
  margin: 0 0 8px;
}

.order-reward-warning p:last-child {
  margin-bottom: 0;
}

/* Seller Rewards Store Update */
.rewards-store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.reward-store-card {
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.reward-store-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.reward-store-card.unavailable {
  opacity: 0.5;
  cursor: not-allowed;
}

.reward-store-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.reward-store-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
}

.reward-store-cost {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}

.reward-store-stock {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .kpi-controls,
  .qa-run-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .kpi-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .rewards-grid {
    grid-template-columns: 1fr;
  }
  
  .order-card {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  
  .order-actions {
    width: 100%;
    justify-content: center;
  }
}

/* Light theme */
body.theme-light .kpi-summary-card,
body.theme-light .action-list-section,
body.theme-light .qa-templates-section,
body.theme-light .qa-run-section,
body.theme-light .qa-reviews-section,
body.theme-light .rewards-mgr-section,
body.theme-light .orders-section {
  background: #f8f9fa;
}

body.theme-light .qa-review-card,
body.theme-light .order-card,
body.theme-light .reward-mgr-card,
body.theme-light .reward-store-card {
  background: #ffffff;
}

/* ===== MESSAGING & NOTIFICATION CENTER STYLES ===== */

/* Message Composer */
.message-composer {
  background: var(--bg-2);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 24px;
}

.message-composer h4 {
  margin-bottom: 16px;
}

/* Sent Messages */
.sent-messages-section {
  background: var(--bg-2);
  border-radius: var(--radius-md);
  padding: 20px;
}

.sent-messages-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.sent-messages-header h4 {
  margin: 0;
}

.sent-messages-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 500px;
  overflow-y: auto;
}

.sent-message-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.sent-message-card:hover {
  border-color: var(--accent);
}

.sent-message-info {
  flex: 1;
  min-width: 0;
}

.sent-message-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sent-message-meta {
  font-size: 12px;
  color: var(--muted);
}

.sent-message-stats {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sent-message-priority {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.sent-message-priority.low { background: #22c55e20; color: #22c55e; }
.sent-message-priority.normal { background: #f59e0b20; color: #f59e0b; }
.sent-message-priority.high { background: #f9731620; color: #f97316; }
.sent-message-priority.critical { background: #ef444420; color: #ef4444; }

.sent-message-readers {
  font-size: 12px;
  color: var(--muted);
}

.sent-message-actions {
  display: flex;
  gap: 8px;
}

/* Seller Inbox */
.inbox-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.inbox-header .card-title {
  margin-bottom: 0;
}

.inbox-unread-badge {
  background: #ef4444;
  color: white;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  min-width: 24px;
  text-align: center;
}

.inbox-unread-badge:empty,
.inbox-unread-badge[data-count="0"] {
  display: none;
}

.inbox-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--stroke);
}

.inbox-filter-btn {
  padding: 6px 14px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.inbox-filter-btn:hover {
  border-color: var(--accent);
}

.inbox-filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.inbox-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 500px;
  overflow-y: auto;
}

.inbox-item {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.inbox-item:hover {
  border-color: var(--accent);
}

.inbox-item.unread {
  background: rgba(41, 98, 255, 0.05);
  border-color: rgba(41, 98, 255, 0.2);
}

.inbox-item.pinned {
  border-top: 3px solid var(--accent);
}

.inbox-item.critical {
  border-left: 4px solid #ef4444;
}

.inbox-item.high {
  border-left: 4px solid #f97316;
}

.inbox-item-priority {
  font-size: 20px;
  flex-shrink: 0;
}

.inbox-item-content {
  flex: 1;
  min-width: 0;
}

.inbox-item-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.inbox-item-title .unread-dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}

.inbox-item-preview {
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-item-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

.inbox-item-category {
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
}

/* Message Detail Modal */
.message-detail-modal {
  max-width: 600px;
}

.message-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 16px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 13px;
}

.message-detail-meta-item {
  display: flex;
  gap: 6px;
}

.message-detail-meta-label {
  color: var(--muted);
}

.message-detail-body {
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  line-height: 1.6;
  font-size: 14px;
}

/* Message Readers Modal */
.message-readers-modal {
  max-width: 500px;
}

.readers-stats {
  display: flex;
  gap: 24px;
  padding: 16px;
  background: var(--bg-2);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.readers-stat-item {
  text-align: center;
}

.readers-stat-value {
  font-size: 28px;
  font-weight: 700;
}

.readers-stat-label {
  font-size: 12px;
  color: var(--muted);
}

.readers-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.readers-tab-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.readers-tab-btn:hover {
  border-color: var(--accent);
}

.readers-tab-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.readers-list {
  max-height: 300px;
  overflow-y: auto;
}

.reader-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--stroke);
}

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

.reader-name {
  font-weight: 500;
}

.reader-time {
  font-size: 12px;
  color: var(--muted);
}

/* Notification Rules */
.notification-rules-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.notification-rules-header h4 {
  margin: 0;
}

.notification-rules-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.notification-rule-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
}

.notification-rule-card.disabled {
  opacity: 0.6;
}

.notification-rule-info {
  flex: 1;
}

.notification-rule-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.notification-rule-trigger {
  font-size: 12px;
  color: var(--muted);
  padding: 2px 8px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  display: inline-block;
}

.notification-rule-channels {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.notification-rule-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Notification Rule Modal */
.notification-rule-modal {
  max-width: 550px;
}

.channels-checkboxes {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .inbox-filters {
    flex-direction: column;
  }
  
  .inbox-filter-btn {
    width: 100%;
    text-align: center;
  }
  
  .sent-message-card {
    flex-direction: column;
    gap: 12px;
  }
  
  .sent-message-stats {
    width: 100%;
    justify-content: space-between;
  }
  
  .readers-stats {
    flex-direction: column;
    gap: 12px;
  }
}

/* Light theme */
body.theme-light .message-composer,
body.theme-light .sent-messages-section,
body.theme-light .inbox-item {
  background: #f8f9fa;
}

body.theme-light .inbox-item.unread {
  background: rgba(41, 98, 255, 0.05);
}

body.theme-light .sent-message-card,
body.theme-light .notification-rule-card {
  background: #ffffff;
}

/* ===== GOVERNANCE, AUDIT & EXPORTS STYLES ===== */

/* Audit Stats */
.audit-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.audit-stat-card {
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  transition: all var(--t) var(--ease);
}

.audit-stat-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.audit-stat-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.audit-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
}

.audit-stat-label {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

/* Audit Section */
.audit-section {
  background: var(--bg-2);
  border-radius: var(--radius-md);
  padding: 20px;
}

.audit-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.audit-section-header h4 {
  margin: 0;
}

.audit-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--stroke);
}

.audit-log-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 500px;
  overflow-y: auto;
}

.audit-log-item {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.audit-log-item:hover {
  border-color: var(--accent);
}

.audit-log-item.severity-info {
  border-left: 4px solid #3b82f6;
}

.audit-log-item.severity-warning {
  border-left: 4px solid #f59e0b;
}

.audit-log-item.severity-critical {
  border-left: 4px solid #ef4444;
}

.audit-log-severity {
  font-size: 20px;
  flex-shrink: 0;
}

.audit-log-content {
  flex: 1;
  min-width: 0;
}

.audit-log-action {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.audit-log-actor {
  font-size: 13px;
  color: var(--muted);
}

.audit-log-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.audit-log-time {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.audit-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.audit-pagination button {
  padding: 6px 12px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.audit-pagination button:hover {
  border-color: var(--accent);
}

.audit-pagination button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* Export Section */
.export-section {
  background: var(--bg-2);
  border-radius: var(--radius-md);
  padding: 20px;
}

.export-section-header {
  margin-bottom: 16px;
}

.export-section-header h4 {
  margin: 0;
}

.quick-export h5,
.custom-export h5,
.export-templates h5,
.export-history h5 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
}

.quick-export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.quick-export-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.quick-export-btn:hover {
  border-color: var(--accent);
  background: rgba(41, 98, 255, 0.05);
}

.qe-icon {
  font-size: 28px;
}

.qe-text {
  font-size: 13px;
  font-weight: 500;
}

.custom-export {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 16px;
}

.custom-export-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Export Templates */
.export-templates {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 16px;
}

.export-templates-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.export-templates-header h5 {
  margin: 0;
}

.export-templates-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.export-template-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
}

.export-template-info {
  flex: 1;
}

.export-template-name {
  font-weight: 600;
  font-size: 14px;
}

.export-template-meta {
  font-size: 12px;
  color: var(--muted);
}

.export-template-actions {
  display: flex;
  gap: 8px;
}

/* Export History */
.export-history {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 16px;
}

.export-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.export-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
}

.export-history-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.export-history-name {
  font-weight: 500;
  font-size: 13px;
}

.export-history-meta {
  font-size: 11px;
  color: var(--muted);
}

.export-history-watermark {
  font-size: 11px;
  color: var(--accent);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Export Template Modal */
.export-template-modal {
  max-width: 600px;
}

.template-columns-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 250px;
  overflow-y: auto;
  padding: 8px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
}

.template-column-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--panel);
  border-radius: var(--radius-sm);
  cursor: grab;
}

.template-column-item.selected {
  border: 1px solid var(--accent);
  background: rgba(41, 98, 255, 0.05);
}

.template-column-checkbox {
  flex-shrink: 0;
}

.template-column-label {
  flex: 1;
  font-size: 13px;
}

.template-column-key {
  font-size: 11px;
  color: var(--muted);
  font-family: monospace;
}

/* Audit Detail Modal */
.audit-detail-modal {
  max-width: 600px;
}

.audit-detail-section {
  margin-bottom: 16px;
}

.audit-detail-section h5 {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.audit-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--stroke);
}

.audit-detail-row:last-child {
  border-bottom: none;
}

.audit-detail-label {
  font-weight: 500;
  color: var(--muted);
}

.audit-detail-value {
  font-weight: 500;
}

.audit-detail-json {
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-family: monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .audit-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .audit-filters {
    flex-direction: column;
  }
  
  .audit-filters select,
  .audit-filters input {
    width: 100% !important;
  }
  
  .quick-export-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .audit-log-item {
    flex-direction: column;
    gap: 8px;
  }
}

/* Light theme */
body.theme-light .audit-section,
body.theme-light .export-section,
body.theme-light .audit-stat-card {
  background: #f8f9fa;
}

body.theme-light .audit-log-item,
body.theme-light .quick-export-btn,
body.theme-light .custom-export,
body.theme-light .export-templates,
body.theme-light .export-history {
  background: #ffffff;
}

body.theme-light .export-template-card,
body.theme-light .export-history-item {
  background: #f8f9fa;
}

/* ===== ASSETS & MICROPHONES STYLES ===== */

/* Asset Stats */
.asset-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.asset-stat-card {
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  transition: all var(--t) var(--ease);
}

.asset-stat-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.asset-stat-icon {
  font-size: 24px;
  margin-bottom: 6px;
}

.asset-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
}

.asset-stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* Asset Controls */
.asset-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.asset-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Assets List */
.assets-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.asset-card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.asset-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.asset-card.status-available {
  border-left: 4px solid #22c55e;
}

.asset-card.status-assigned {
  border-left: 4px solid #3b82f6;
}

.asset-card.status-repair {
  border-left: 4px solid #f59e0b;
}

.asset-card.status-damaged {
  border-left: 4px solid #ef4444;
}

.asset-card.status-lost {
  border-left: 4px solid #6b7280;
  opacity: 0.7;
}

.asset-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.asset-card-type {
  font-size: 28px;
}

.asset-card-status {
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
}

.asset-card-status.available { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.asset-card-status.assigned { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.asset-card-status.repair { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.asset-card-status.damaged { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.asset-card-status.lost { background: rgba(107, 114, 128, 0.15); color: #6b7280; }

.asset-card-serial {
  font-weight: 600;
  font-size: 15px;
  font-family: monospace;
  margin-bottom: 4px;
}

.asset-card-name {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.asset-card-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.asset-card-info span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.asset-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
}

.asset-card-actions button {
  flex: 1;
}

/* Quick Actions Grid */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.quick-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.quick-action-card:hover {
  border-color: var(--accent);
  background: rgba(41, 98, 255, 0.05);
}

.qa-icon {
  font-size: 32px;
}

.qa-text {
  font-size: 13px;
  font-weight: 500;
}

/* Asset Events Section */
.asset-events-section h4 {
  margin-bottom: 12px;
}

.asset-events-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.asset-event-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
}

.asset-event-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.asset-event-content {
  flex: 1;
  min-width: 0;
}

.asset-event-title {
  font-weight: 500;
  font-size: 13px;
  margin-bottom: 2px;
}

.asset-event-meta {
  font-size: 12px;
  color: var(--muted);
}

.asset-event-time {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

/* Asset Modals */
.asset-modal,
.issue-asset-modal,
.return-asset-modal,
.transfer-asset-modal {
  max-width: 550px;
}

.asset-detail-modal {
  max-width: 650px;
}

.asset-detail-header {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.asset-detail-icon {
  font-size: 48px;
}

.asset-detail-info {
  flex: 1;
}

.asset-detail-serial {
  font-size: 20px;
  font-weight: 600;
  font-family: monospace;
}

.asset-detail-name {
  color: var(--muted);
  margin-top: 4px;
}

.asset-detail-section {
  margin-bottom: 20px;
}

.asset-detail-section h5 {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.asset-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.asset-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.asset-detail-item .label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
}

.asset-detail-item .value {
  font-weight: 500;
}

.asset-detail-history {
  max-height: 200px;
  overflow-y: auto;
}

/* Seller My Equipment Card */
.my-equipment-card {
  background: var(--bg-2);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 20px;
}

.my-equipment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.my-equipment-header h4 {
  margin: 0;
}

.my-equipment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.my-equipment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
}

.my-equipment-info {
  display: flex;
  gap: 10px;
  align-items: center;
}

.my-equipment-icon {
  font-size: 24px;
}

.my-equipment-details {
  display: flex;
  flex-direction: column;
}

.my-equipment-serial {
  font-weight: 600;
  font-family: monospace;
  font-size: 13px;
}

.my-equipment-name {
  font-size: 12px;
  color: var(--muted);
}

.my-equipment-condition {
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
}

.my-equipment-condition.new { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.my-equipment-condition.good { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.my-equipment-condition.fair { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.my-equipment-condition.poor { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

/* Mobile responsive */
@media (max-width: 768px) {
  .asset-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .asset-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .asset-filters {
    flex-direction: column;
  }
  
  .asset-filters select,
  .asset-filters input {
    width: 100% !important;
  }
  
  .assets-list {
    grid-template-columns: 1fr;
  }
  
  .quick-actions-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  .quick-action-card {
    padding: 14px;
  }
  
  .qa-icon {
    font-size: 24px;
  }
  
  .qa-text {
    font-size: 11px;
  }
  
  .asset-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Light theme */
body.theme-light .asset-card,
body.theme-light .quick-action-card,
body.theme-light .asset-event-item,
body.theme-light .my-equipment-item {
  background: #ffffff;
}

body.theme-light .asset-stat-card,
body.theme-light .my-equipment-card {
  background: #f8f9fa;
}

/* ===== INTEGRATIONS PLATFORM STYLES ===== */

.integration-hub-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.integration-hub-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--accent, #3b7dff);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

.integration-hub-header .admin-block-title { margin-bottom: 6px; }
.integration-hub-header .admin-block-sub { max-width: 650px; margin: 0; }
.integration-refresh-btn { flex: 0 0 auto; }

/* Integration Stats */
.integration-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.integration-stat-card {
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: all var(--t) var(--ease);
}

.integration-stat-card:hover {
  border-color: var(--accent);
}

.integration-stat-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  color: var(--accent, #3b7dff);
  font-size: 19px;
  font-weight: 800;
  border-radius: 11px;
  background: rgba(59, 125, 255, .10);
}

.integration-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}

.integration-stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.integration-sales-summary .integration-stat-label span {
  margin-left: 4px;
  color: var(--ink);
  font-weight: 650;
}

/* Integrations Subtabs */
.integrations-subtabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 4px;
  margin-bottom: 20px;
  border: 1px solid var(--stroke);
  border-radius: calc(var(--radius-md) + 2px);
  background: var(--bg-1);
  overflow: visible;
}

.subtab-btn {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-sm) + 2px);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 650;
  transition: all var(--t) var(--ease);
}

.subtab-btn > span { color: var(--accent, #3b7dff); font-size: 16px; line-height: 1; }

.subtab-btn:hover {
  border-color: var(--accent);
}

.subtab-btn.active {
  background: var(--accent, #3b7dff);
  border-color: var(--accent, #3b7dff);
  color: white;
  box-shadow: 0 6px 16px rgba(59, 125, 255, .22);
}
.subtab-btn.active > span { color: white; }

/* Integration Sections */
.integration-section {
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: calc(var(--radius-md) + 2px);
  padding: 22px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .025);
}

.integration-section.hidden {
  display: none;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h4 {
  margin: 0;
}

.integration-section-subtitle {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.section-actions {
  display: flex;
  gap: 8px;
}

.info-box {
  background: rgba(41, 98, 255, 0.1);
  border: 1px solid rgba(41, 98, 255, 0.2);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 16px;
  font-size: 13px;
}

.info-box p {
  margin: 0;
}

.warning-box {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 16px;
  font-size: 13px;
}

.warning-box p {
  margin: 0;
}

/* QR sticker builder */
.integration-sticker-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(300px, .96fr);
  gap: 18px;
  align-items: start;
}

.sticker-config-card,
.sticker-preview-card,
.sticker-legal-text {
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  background: var(--panel);
}

.sticker-config-card { padding: 18px; }
.sticker-config-heading { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.sticker-config-heading > span {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  flex: 0 0 23px;
  border-radius: 50%;
  background: var(--accent, #3b7dff);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.sticker-config-heading strong { display: block; font-size: 14px; }
.sticker-config-heading p,
.sticker-preview-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.sticker-config-heading--secondary { margin-top: 20px; }

.sticker-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.integration-field { display: grid; gap: 6px; min-width: 0; }
.integration-field > span { color: var(--muted); font-size: 12px; font-weight: 650; }
.integration-field--full { grid-column: 1 / -1; }
.integration-field .input { width: 100%; min-width: 0; box-sizing: border-box; }

.sticker-options {
  display: grid;
  gap: 9px;
  margin: 18px 0 0;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-1);
}
.sticker-options label { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; cursor: pointer; }
.sticker-options input { accent-color: var(--accent, #3b7dff); }

.sticker-preview-wrap {
  margin: 0;
  padding: 16px;
  background: var(--bg-1);
  border-radius: var(--radius-md);
}
.sticker-preview-card { background: var(--bg-1); }
.sticker-preview-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sticker-preview-heading strong { font-size: 14px; }
.sticker-preview-badge { padding: 4px 8px; border-radius: 999px; color: var(--accent, #3b7dff); background: rgba(59, 125, 255, .10); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.sticker-preview {
  min-height: 200px;
  margin-bottom: 16px;
}
.sticker-preview-placeholder {
  color: var(--text-2);
  text-align: center;
  padding: 2rem;
  margin: 0;
}
.sticker-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sticker-url-display {
  font-size: 12px;
  word-break: break-all;
  color: var(--text-2);
}
.sticker-legal-text { margin-top: 18px; padding: 16px; }
.sticker-legal-text pre { white-space: pre-wrap; font-size: 12px; margin: 8px 0 0; }

@media (max-width: 980px) {
  .integrations-subtabs { display: flex; overflow-x: auto; scrollbar-width: none; }
  .integrations-subtabs::-webkit-scrollbar { display: none; }
  .integrations-subtabs .subtab-btn { flex: 0 0 auto; }
  .integration-sticker-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .integration-hub-header { flex-direction: column; }
  .integration-refresh-btn { width: 100%; }
  .integration-stats { grid-template-columns: 1fr 1fr; }
  .integration-stat-card { padding: 12px; gap: 9px; }
  .integration-stat-icon { width: 31px; height: 31px; flex-basis: 31px; font-size: 16px; }
  .integration-stat-value { font-size: 19px; }
  .integration-stat-label { font-size: 11px; }
  .integration-section { padding: 16px; }
  .section-header { align-items: flex-start; gap: 12px; }
  .sticker-form-grid { grid-template-columns: 1fr; }
  .integration-field--full { grid-column: auto; }
}

/* ====================================================================
   AUTH SHELL — landing-inspired login scaffold
   Kept at the end to isolate auth-only styling from the app dashboard.
   ==================================================================== */
body.auth-visible {
  background:
    radial-gradient(700px 460px at 50% 14%, rgba(59, 125, 255, 0.16), transparent 68%),
    var(--bg-0, #050508) !important;
}
body.auth-visible .app-wrapper {
  min-height: 100svh;
  padding: 18px 24px 32px;
  gap: 0;
}
body.auth-visible header.top-bar,
body.auth-visible .app-wrapper > header.top-bar {
  position: relative;
  top: auto;
  width: min(1040px, 100%) !important;
  max-width: 1040px;
  height: 66px !important;
  min-height: 66px !important;
  margin: 0 auto !important;
  padding: 0 14px 0 18px !important;
  border-radius: 18px !important;
  background: rgba(8, 8, 12, 0.84) !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.32) !important;
}
body.auth-visible .top-bar .top-bar-left {
  flex: 0 1 auto;
  gap: 18px;
}
body.auth-visible .top-bar .brand {
  gap: 10px;
}
body.auth-visible .top-bar .brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
body.auth-visible .top-bar .brand-name {
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.035em;
}
body.auth-visible .auth-nav-home {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted, rgba(248,248,252,.65));
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  transition: color .18s ease;
}
body.auth-visible .auth-nav-home:hover { color: var(--ink, #fff); }
html body.auth-visible header.top-bar .theme-toggle-btn,
html body.auth-visible header.top-bar .lang-switch,
html body.auth-visible header.top-bar .lang-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 11px !important;
}
body.auth-visible .top-bar .lang-btn { font-size: 10px !important; }
body.auth-visible #appScrollRoot.main-content {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 52px 24px 42px !important;
}
body.auth-visible #authSection.auth-card {
  width: min(100%, 440px) !important;
  max-width: 440px !important;
  margin: 0 !important;
  padding: 34px !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, rgba(19, 21, 29, 0.94), rgba(10, 11, 16, 0.98)) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(59,125,255,.045) inset !important;
}
body.auth-visible .auth-heading { text-align: center; margin-bottom: 28px; }
body.auth-visible .auth-brand-mark {
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  padding: 9px;
  display: grid !important;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(59,125,255,.22), rgba(59,125,255,.05));
  border: 1px solid rgba(90,148,255,.25);
  box-shadow: 0 14px 34px rgba(59,125,255,.15);
}
body.auth-visible .auth-brand-mark img { width: 100%; height: 100%; border-radius: 10px; }
body.auth-visible .auth-eyebrow {
  margin: 0 0 9px;
  color: var(--accent-2, #5a94ff);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}
body.auth-visible .auth-card .card-title {
  margin: 0;
  color: var(--ink, #f8f8fc);
  font-size: 31px;
  letter-spacing: -0.045em;
  line-height: 1.08;
}
body.auth-visible .auth-subtitle {
  margin: 9px 0 0;
  color: var(--muted, rgba(248,248,252,.65));
  font-size: 13px;
}
body.auth-visible .auth-card .vertical-form { gap: 14px; }
body.auth-visible .auth-card .vertical-form label {
  gap: 7px;
  color: var(--muted, rgba(248,248,252,.65));
  font-size: 12px;
  font-weight: 650;
}
body.auth-visible .auth-card .vertical-form input,
body.auth-visible .auth-card .auth-code-input {
  min-height: 50px;
  border-radius: 12px;
  background: rgba(4, 5, 8, .54);
  border-color: rgba(255,255,255,.11);
}
body.auth-visible .auth-card #loginSubmitBtn,
body.auth-visible .auth-card #validateInviteCodeBtn {
  min-height: 52px;
  margin-top: 5px;
  border-radius: 12px;
  font-weight: 750;
  box-shadow: 0 14px 32px rgba(59,125,255,.28);
}
body.auth-visible .auth-card .login-legal-links { margin-top: 22px !important; }
body.auth-visible .auth-card .login-legal-links a { color: var(--muted, rgba(248,248,252,.65)); }
body.theme-light.auth-visible {
  background: radial-gradient(700px 460px at 50% 14%, rgba(59,125,255,.15), transparent 68%), #f6f8fc !important;
}
body.theme-light.auth-visible header.top-bar,
body.theme-light.auth-visible .app-wrapper > header.top-bar {
  background: rgba(255,255,255,.88) !important;
}
body.theme-light.auth-visible #authSection.auth-card {
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,249,253,.98)) !important;
  border-color: rgba(16,24,40,.1) !important;
  box-shadow: 0 30px 90px rgba(24,35,60,.13) !important;
}
body.theme-light.auth-visible .auth-card .vertical-form input,
body.theme-light.auth-visible .auth-card .auth-code-input { background: rgba(245,247,251,.9); }
@media (max-width: 640px) {
  body.auth-visible .app-wrapper { padding: 8px 12px 18px; }
  body.auth-visible header.top-bar,
  body.auth-visible .app-wrapper > header.top-bar {
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 10px 0 12px !important;
    border-radius: 15px !important;
  }
  body.auth-visible .top-bar .brand-logo { width: 28px; height: 28px; }
  body.auth-visible .top-bar .brand-name { font-size: 16px; }
  body.auth-visible .auth-nav-home { display: none; }
  body.auth-visible .top-bar .top-bar-right { gap: 6px !important; }
  body.auth-visible #appScrollRoot.main-content { padding: 38px 0 28px !important; place-items: start center; }
  body.auth-visible #authSection.auth-card { width: min(100%, 410px) !important; padding: 28px 22px !important; border-radius: 20px !important; }
  body.auth-visible .auth-heading { margin-bottom: 24px; }
  body.auth-visible .auth-brand-mark { width: 52px; height: 52px; margin-bottom: 15px; border-radius: 15px; }
  body.auth-visible .auth-card .card-title { font-size: 28px; }
}

/* API Keys List */
.api-keys-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.api-key-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  gap: 12px;
}

.api-key-card.revoked {
  opacity: 0.5;
  border-left: 4px solid #ef4444;
}

.api-key-card.active {
  border-left: 4px solid #22c55e;
}

.api-key-info {
  flex: 1;
}

.api-key-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.api-key-prefix {
  font-family: monospace;
  font-size: 12px;
  color: var(--muted);
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: 4px;
}

.api-key-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

.api-key-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.api-key-scope {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--bg-2);
  border-radius: 4px;
  color: var(--muted);
}

.api-key-actions {
  display: flex;
  gap: 8px;
}

/* Scopes Grid */
.scopes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-height: 250px;
  overflow-y: auto;
  padding: 8px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
}

.scope-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--panel);
  border-radius: var(--radius-sm);
  font-size: 12px;
}

.scope-item input {
  margin: 0;
}

/* API Key Display */
.api-key-display {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  margin-top: 12px;
}

.api-key-display code {
  flex: 1;
  font-family: monospace;
  font-size: 13px;
  word-break: break-all;
  background: var(--panel);
  padding: 8px;
  border-radius: 4px;
}

/* Webhooks List */
.webhooks-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.webhook-card {
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
}

.webhook-card.disabled {
  opacity: 0.6;
}

.webhook-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.webhook-name {
  font-weight: 600;
  font-size: 14px;
}

.webhook-event {
  font-size: 11px;
  padding: 3px 8px;
  background: rgba(41, 98, 255, 0.1);
  color: var(--accent);
  border-radius: 4px;
}

.webhook-url {
  font-family: monospace;
  font-size: 12px;
  color: var(--muted);
  word-break: break-all;
  margin-bottom: 8px;
}

.webhook-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
}

.webhook-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Deliveries List */
.deliveries-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.delivery-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
}

.delivery-item.status-success {
  border-left: 3px solid #22c55e;
}

.delivery-item.status-failed {
  border-left: 3px solid #ef4444;
}

.delivery-item.status-pending {
  border-left: 3px solid #f59e0b;
}

.delivery-info {
  flex: 1;
}

.delivery-event {
  font-size: 13px;
  font-weight: 500;
}

.delivery-meta {
  font-size: 11px;
  color: var(--muted);
}

.delivery-status {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.delivery-status.success { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.delivery-status.failed { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.delivery-status.pending { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.delivery-status.retry { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }

/* Sales Section */
.sales-stats {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 16px;
}

.sales-stat-row {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 16px;
}

.sales-stat {
  text-align: center;
}

.sales-stat-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
}

.sales-stat-label {
  font-size: 12px;
  color: var(--muted);
}

.sales-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.sales-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.sale-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
}

.sale-info {
  flex: 1;
}

.sale-receipt {
  font-weight: 600;
  font-family: monospace;
  font-size: 13px;
}

.sale-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.sale-amount {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}

/* Top Sellers */
.top-sellers-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.top-seller-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--panel);
  border-radius: var(--radius-sm);
}

.top-seller-rank {
  font-size: 18px;
  font-weight: 700;
  color: var(--muted);
  width: 30px;
}

.top-seller-info {
  flex: 1;
}

.top-seller-login {
  font-weight: 600;
}

.top-seller-count {
  font-size: 12px;
  color: var(--muted);
}

.top-seller-amount {
  font-weight: 700;
  color: var(--accent);
}

/* Connectors List */
.connectors-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.connector-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
}

.connector-card.disabled {
  opacity: 0.6;
}

.connector-info {
  flex: 1;
}

.connector-name {
  font-weight: 600;
  font-size: 14px;
}

.connector-type {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--bg-2);
  border-radius: 4px;
  margin-left: 8px;
}

.connector-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.connector-status {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.connector-status.success { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.connector-status.error { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.connector-status.pending { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

.connector-actions {
  display: flex;
  gap: 8px;
}

/* Modals */
.api-key-modal,
.api-key-created-modal,
.webhook-modal,
.connector-modal,
.sales-import-modal {
  max-width: 550px;
}

.webhook-deliveries-modal {
  max-width: 650px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .integration-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .integrations-subtabs {
    flex-wrap: nowrap;
  }
  
  .scopes-grid {
    grid-template-columns: 1fr;
  }
  
  .api-key-card {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .api-key-actions {
    margin-top: 12px;
  }
  
  .sales-stat-row {
    flex-direction: column;
    align-items: center;
  }
  
  .sales-filters {
    flex-direction: column;
  }
  
  .sales-filters input {
    width: 100%;
  }
}

/* Light theme */
body.theme-light .integration-section,
body.theme-light .integration-stat-card {
  background: #f8f9fa;
}

body.theme-light .api-key-card,
body.theme-light .webhook-card,
body.theme-light .connector-card,
body.theme-light .sale-item,
body.theme-light .sales-stats {
  background: #ffffff;
}

/* ===== INTELLIGENCE & COMPLIANCE STYLES ===== */

/* Intel Stats */
.intel-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.intel-stat-card {
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  transition: all var(--t) var(--ease);
}

.intel-stat-card:hover {
  transform: translateY(-2px);
}

.intel-stat-card.severity-warning {
  border-left: 4px solid #f59e0b;
}

.intel-stat-card.severity-critical {
  border-left: 4px solid #ef4444;
}

.intel-stat-icon {
  font-size: 24px;
  margin-bottom: 6px;
}

.intel-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
}

.intel-stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* Intel Subtabs */
.intel-subtabs {
  display: flex;
  gap: 8px;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--stroke);
  overflow-x: auto;
}

/* Intel Sections */
.intel-section {
  background: var(--bg-2);
  border-radius: var(--radius-md);
  padding: 20px;
}

.intel-section.hidden {
  display: none;
}

/* Heatmap */
.heatmap-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.heatmap-container {
  overflow-x: auto;
  margin-bottom: 16px;
}

.heatmap-grid {
  display: grid;
  gap: 2px;
  min-width: 700px;
}

.heatmap-row {
  display: flex;
  gap: 2px;
}

.heatmap-label {
  width: 80px;
  display: flex;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}

.heatmap-cell {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: white;
  cursor: pointer;
  transition: transform 0.1s;
}

.heatmap-cell:hover {
  transform: scale(1.2);
  z-index: 1;
}

.heatmap-cell.level-0 { background: var(--bg-2); color: var(--muted); }
.heatmap-cell.level-1 { background: #22c55e40; color: #22c55e; }
.heatmap-cell.level-2 { background: #22c55e80; color: white; }
.heatmap-cell.level-3 { background: #f59e0b80; color: white; }
.heatmap-cell.level-4 { background: #ef4444; color: white; }

.heatmap-header {
  display: flex;
  gap: 2px;
  margin-left: 80px;
  margin-bottom: 4px;
}

.heatmap-hour {
  width: 28px;
  text-align: center;
  font-size: 10px;
  color: var(--muted);
}

.heatmap-legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  font-size: 12px;
  color: var(--muted);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

.legend-color.low { background: #22c55e40; }
.legend-color.medium { background: #22c55e80; }
.legend-color.high { background: #f59e0b80; }
.legend-color.peak { background: #ef4444; }

/* Anomalies */
.anomaly-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.anomalies-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 500px;
  overflow-y: auto;
}

.anomaly-card {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.anomaly-card:hover {
  border-color: var(--accent);
}

.anomaly-card.severity-5 { border-left: 4px solid #ef4444; }
.anomaly-card.severity-4 { border-left: 4px solid #f59e0b; }
.anomaly-card.severity-3 { border-left: 4px solid #eab308; }
.anomaly-card.severity-2 { border-left: 4px solid #3b82f6; }
.anomaly-card.severity-1 { border-left: 4px solid #6b7280; }

.anomaly-card.status-reviewed { opacity: 0.7; }
.anomaly-card.status-ignored { opacity: 0.5; }
.anomaly-card.status-confirmed { background: rgba(239, 68, 68, 0.1); }

.anomaly-severity {
  font-size: 24px;
  flex-shrink: 0;
}

.anomaly-content {
  flex: 1;
  min-width: 0;
}

.anomaly-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.anomaly-description {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

.anomaly-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--muted);
}

.anomaly-status {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.anomaly-status.open { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.anomaly-status.reviewed { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.anomaly-status.ignored { background: rgba(107, 114, 128, 0.15); color: #6b7280; }
.anomaly-status.confirmed { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

/* Forecasts */
.forecast-accuracy {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 16px;
}

.forecast-accuracy h5 {
  margin: 0 0 12px 0;
}

.accuracy-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.accuracy-item {
  padding: 8px 12px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  font-size: 12px;
}

.accuracy-item .shop {
  font-weight: 600;
}

.accuracy-item .mape {
  color: var(--accent);
  margin-left: 8px;
}

.forecast-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.forecasts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.forecast-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
}

.forecast-info {
  flex: 1;
}

.forecast-date {
  font-weight: 600;
  font-size: 14px;
}

.forecast-shop {
  font-size: 12px;
  color: var(--muted);
}

.forecast-values {
  display: flex;
  gap: 16px;
  text-align: center;
}

.forecast-value {
  display: flex;
  flex-direction: column;
}

.forecast-value .number {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}

.forecast-value .label {
  font-size: 10px;
  color: var(--muted);
}

.forecast-value.actual .number {
  color: #22c55e;
}

.forecast-confidence {
  width: 50px;
  text-align: center;
}

.confidence-bar {
  height: 6px;
  background: var(--bg-2);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}

.confidence-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}

/* Executive Reports */
.reports-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.report-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.report-card:hover {
  border-color: var(--accent);
}

.report-info {
  flex: 1;
}

.report-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.report-meta {
  font-size: 12px;
  color: var(--muted);
}

.report-status {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.report-status.draft { background: rgba(107, 114, 128, 0.15); color: #6b7280; }
.report-status.sent { background: rgba(34, 197, 94, 0.15); color: #22c55e; }

.report-actions {
  display: flex;
  gap: 8px;
}

/* Exec Report Modal */
.exec-report-modal {
  max-width: 700px;
}

.exec-report-section {
  margin-bottom: 20px;
}

.exec-report-section h5 {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.exec-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.exec-summary-item {
  text-align: center;
  padding: 12px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
}

.exec-summary-item .value {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
}

.exec-summary-item .label {
  font-size: 11px;
  color: var(--muted);
}

.exec-highlights {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exec-highlight {
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.exec-recommendations {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exec-recommendation {
  padding: 10px 12px;
  background: rgba(41, 98, 255, 0.1);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

/* Incidents */
.incident-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.incidents-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 500px;
  overflow-y: auto;
}

.incident-card {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.incident-card:hover {
  border-color: var(--accent);
}

.incident-card.priority-high { border-left: 4px solid #ef4444; }
.incident-card.priority-normal { border-left: 4px solid #3b82f6; }
.incident-card.priority-low { border-left: 4px solid #6b7280; }

.incident-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.incident-content {
  flex: 1;
  min-width: 0;
}

.incident-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.incident-description {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.incident-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--muted);
}

.incident-category {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  background: var(--bg-2);
}

.incident-status {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.incident-status.new { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.incident-status.in_review { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.incident-status.resolved { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.incident-status.rejected { background: rgba(107, 114, 128, 0.15); color: #6b7280; }

/* Incident Modals */
.anomaly-modal,
.incident-modal,
.create-incident-modal {
  max-width: 600px;
}

.incident-detail-header {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.incident-detail-icon {
  font-size: 48px;
}

.incident-detail-info {
  flex: 1;
}

.incident-detail-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.incident-detail-meta {
  font-size: 12px;
  color: var(--muted);
}

.incident-detail-section {
  margin-bottom: 20px;
}

.incident-detail-section h5 {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.incident-comments {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 200px;
  overflow-y: auto;
}

.incident-comment {
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
}

.incident-comment.internal {
  border-left: 3px solid #f59e0b;
}

.incident-comment-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}

.incident-comment-content {
  font-size: 13px;
}

.incident-add-comment {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.incident-add-comment input {
  flex: 1;
}

/* Seller Report Incident Card */
.report-incident-card {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

.report-incident-card:hover {
  border-color: #ef4444;
}

.report-incident-card h4 {
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.report-incident-card p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .intel-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .intel-subtabs {
    flex-wrap: nowrap;
  }
  
  .heatmap-filters,
  .anomaly-filters,
  .forecast-filters,
  .incident-filters {
    flex-direction: column;
  }
  
  .heatmap-filters input,
  .heatmap-filters select,
  .anomaly-filters select,
  .forecast-filters select,
  .forecast-filters input,
  .incident-filters select {
    width: 100% !important;
  }
  
  .forecast-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .forecast-values {
    width: 100%;
    justify-content: space-between;
  }
  
  .exec-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Light theme */
body.theme-light .intel-section,
body.theme-light .intel-stat-card {
  background: #f8f9fa;
}

body.theme-light .anomaly-card,
body.theme-light .forecast-card,
body.theme-light .report-card,
body.theme-light .incident-card,
body.theme-light .forecast-accuracy {
  background: #ffffff;
}

/* ===== APP SIDEBAR (About / Info) ===== */
.app-sidebar {
  display: none; /* Hidden by default */
}

/* Desktop: Fixed sidebar on right */
@media (min-width: 1400px) {
  .app-sidebar {
    display: flex;
    position: fixed;
    right: 24px;
    top: 80px;
    width: 280px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-lg);
    padding: 20px;
    flex-direction: column;
    gap: 16px;
    z-index: 100;
    box-shadow: var(--shadow-card);
  }
}

.app-sidebar-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-sidebar-logo {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(41, 98, 255, 0.25);
}

.app-sidebar-logo img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.app-sidebar-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.app-sidebar-version {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.app-sidebar-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.app-sidebar-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.app-sidebar-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink);
}

.app-sidebar-feature-icon {
  width: 28px;
  height: 28px;
  background: var(--fog-bg);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.app-sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
}

.app-sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 6px;
  transition: background 0.15s;
}

.app-sidebar-link:hover {
  background: var(--fog-bg);
}

.app-sidebar-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
}

.app-sidebar-stat {
  text-align: center;
  padding: 10px;
  background: var(--fog-bg);
  border-radius: 8px;
}

.app-sidebar-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}

.app-sidebar-stat-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* Light theme sidebar */
body.theme-light .app-sidebar {
  background: var(--panel);
  border-color: var(--stroke);
}

/* ===== UNIFIED EMPTY STATES ===== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 28px;
  text-align: center;
  background: linear-gradient(165deg, rgba(18, 22, 32, 0.6), rgba(12, 14, 22, 0.4));
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(99, 115, 145, 0.3);
  backdrop-filter: blur(8px);
}

.empty-state-icon {
  font-size: 52px;
  margin-bottom: 18px;
  opacity: 0.5;
  color: var(--accent-2);
}

.empty-state-icon svg {
  stroke: var(--accent-2);
  opacity: 0.6;
}

.empty-state-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
}

.empty-state-text {
  font-size: 13.5px;
  color: var(--muted-2);
  max-width: 320px;
  line-height: 1.55;
  margin-bottom: 0;
}

.empty-state-desc {
  font-size: 13.5px;
  color: var(--muted-2);
  max-width: 320px;
  line-height: 1.55;
  margin-bottom: 18px;
}

.empty-state-action {
  margin-top: 18px;
}

.empty-state-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 18px;
}

/* ===== UNIFIED BUTTON STYLES ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

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

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.btn-lg {
  padding: 14px 24px;
  font-size: 15px;
}

/* ===== MOBILE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
  .main-content {
    padding: 0 8px;
  }
  
  .card {
    padding: 14px;
    border-radius: 12px;
  }
  
  /* Stack buttons on mobile */
  .btn-group {
    flex-direction: column;
    width: 100%;
  }
  
  .btn-group .btn {
    width: 100%;
  }
  
  /* v5.0.29: HIDE admin tabs on mobile - use bottom nav */
  .admin-tabs {
    display: none !important;
  }
  
  .admin-tabs::-webkit-scrollbar {
    display: none;
  }
  
  .admin-tab-btn {
    display: none !important;
  }
  
  /* Smaller empty states on mobile */
  .empty-state {
    padding: 24px 16px;
  }
  
  .empty-state-icon {
    font-size: 36px;
  }
  
  .empty-state-title {
    font-size: 14px;
  }
}

/* ===== MICRO ANIMATIONS ===== */
.card {
  transition: none;
}

.card:hover {
  transform: none;
  box-shadow: none;
}

.btn {
  transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
}

/* Smooth tab transitions */
.tab-content {
  animation: tabFadeIn 0.2s ease;
}

@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== AI QUICK TOOLS WRAP ===== */
.ai-quick-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-quick-tools .btn {
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  .ai-quick-tools {
    gap: 6px;
  }
  
  .ai-quick-tools .btn {
    font-size: 12px;
    padding: 8px 12px;
  }
}

/* Light theme tabs wrapper */
body.theme-light .admin-tabs-arrow {
  background: var(--panel);
  border-color: var(--stroke);
  color: var(--ink);
}

body.theme-light .admin-tabs-arrow:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

body.theme-light .admin-tabs {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--stroke);
}

/* Hide PWA sidebar on small screens */
@media (max-width: 1100px) {
  .pwa-install-overlay {
    position: fixed;
    inset: 0;
    width: auto;
    max-height: none;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  
  .pwa-install-modal {
    background: var(--panel);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    max-width: 360px;
    text-align: center;
  }
  
  .pwa-modal-icon {
    margin: 0 auto 16px;
  }
  
  .pwa-modal-title {
    text-align: center;
  }
  
  .pwa-modal-features {
    align-items: center;
  }
  
  .pwa-modal-actions {
    flex-direction: column;
  }
  
  .pwa-modal-later-btn {
    width: 100%;
  }
}

/* Light theme PWA */
body.theme-light .pwa-install-overlay {
  background: var(--panel);
  border-color: var(--stroke);
}

/* ===== v4.10.10 DESIGN SYSTEM OVERHAUL ===== */

/* --- Icon Buttons (Header) --- */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.icon-btn:hover {
  background: var(--stroke-2);
  color: var(--ink);
  border-color: var(--stroke-2);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

/* Theme toggle icons */
.icon-btn .icon-sun,
.icon-btn .icon-moon {
  display: none;
}

body:not(.theme-light) .icon-btn .icon-moon { display: block; }
body.theme-light .icon-btn .icon-sun { display: block; }

/* --- About Modal --- */
.about-modal {
  width: 100%;
  max-width: 480px;
  padding: 32px;
  position: relative;
}

.modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.modal-close-btn:hover {
  background: var(--stroke-2);
  color: var(--ink);
}

.about-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.about-logo {
  width: 56px;
  height: 56px;
  padding: 10px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(41, 98, 255, 0.25);
}

.about-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
}

.about-version {
  font-size: 13px;
  color: var(--muted);
  background: var(--stroke-2);
  padding: 2px 8px;
  border-radius: 4px;
}

.about-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 24px;
}

.about-section {
  margin-bottom: 20px;
}

.about-section h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.about-steps {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

.about-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--muted);
}

.about-features li svg {
  color: var(--accent);
  flex-shrink: 0;
}

.about-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--stroke);
}

.about-actions .btn-primary,
.about-actions .btn-secondary {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.about-actions .btn-primary {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: white;
  border: none;
}

.about-actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(41, 98, 255, 0.35);
}

.about-actions .btn-secondary {
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--stroke);
}

.about-actions .btn-secondary:hover {
  background: var(--stroke-2);
  color: var(--ink);
}

/* --- Empty States (unified) --- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  background: var(--panel);
  border: 1px dashed var(--stroke-2);
  border-radius: var(--radius-md);
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  color: var(--muted-2);
  opacity: 0.5;
}

.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}

.empty-state-text {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 20px;
  max-width: 300px;
}

.empty-state-action {
  padding: 10px 20px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.empty-state-action:hover {
  background: var(--accent-2);
  transform: translateY(-1px);
}

/* --- Loading States --- */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--stroke-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* --- Form Improvements --- */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 6px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 14px;
  transition: all 0.15s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(41, 98, 255, 0.15);
}

.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: var(--danger);
}

.form-error {
  font-size: 12px;
  color: var(--danger);
  margin-top: 4px;
}

.form-hint {
  font-size: 12px;
  color: var(--muted-2);
  margin-top: 4px;
}

/* --- Table Improvements --- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th,
.data-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--stroke);
}

.data-table th {
  font-weight: 600;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--panel);
}

.data-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.data-table .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.pending {
  background: rgba(245, 183, 73, 0.15);
  color: var(--mid);
}

.status-badge.approved {
  background: rgba(24, 198, 91, 0.15);
  color: var(--good);
}

.status-badge.rejected {
  background: rgba(255, 77, 79, 0.15);
  color: var(--bad);
}

/* --- Card Improvements --- */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--stroke);
}

.card-header-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.card-header-actions {
  display: flex;
  gap: 8px;
}

/* --- Stats Cards (KPI) --- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.stat-card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 20px;
}

.stat-card-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.stat-card-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

.stat-card-change {
  font-size: 13px;
  margin-top: 8px;
}

.stat-card-change.positive {
  color: var(--good);
}

.stat-card-change.negative {
  color: var(--bad);
}

/* --- Light Theme Overrides --- */
body.theme-light .icon-btn {
  background: white;
  border-color: rgba(0,0,0,0.1);
  color: #666;
}

body.theme-light .icon-btn:hover {
  background: #f5f5f5;
  color: #333;
}

body.theme-light .about-modal {
  background: white;
}

body.theme-light .about-version {
  background: #f0f0f0;
}

body.theme-light .modal-close-btn {
  background: white;
  border-color: rgba(0,0,0,0.1);
}

body.theme-light .empty-state {
  background: white;
  border-color: rgba(0,0,0,0.1);
}

body.theme-light .stat-card {
  background: white;
  border-color: rgba(0,0,0,0.08);
}

body.theme-light .data-table th {
  background: #f8f9fa;
}

/* --- Mobile Optimizations --- */
@media (max-width: 768px) {
  .top-bar {
    padding: 12px 16px;
  }
  
  .top-right {
    gap: 8px;
  }
  
  .icon-btn {
    width: 36px;
    height: 36px;
  }
  
  .icon-btn svg {
    width: 18px;
    height: 18px;
  }
  
  .lang-switch {
    display: flex;
  }
  
  .about-modal {
    padding: 24px;
    margin: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
  
  .about-actions {
    flex-direction: column;
  }
  
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .empty-state {
    padding: 32px 16px;
  }
}

/* --- Animations (with reduced motion support) --- */
@media (prefers-reduced-motion: no-preference) {
  .card {
    animation: fadeSlideIn 0.3s ease;
  }
  
  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .modal-overlay {
    animation: fadeIn 0.2s ease;
  }
  
  .modal-card {
    animation: scaleIn 0.25s ease;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== v4.10.10 UNIFIED BUTTON SYSTEM ===== */

/* Base button reset */
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-ghost,
.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Primary - Main action */
.btn-primary {
  background: linear-gradient(135deg, #4f8bff 0%, #2962ff 100%);
  color: white;
  border: none;
  box-shadow: 0 2px 8px rgba(41, 98, 255, 0.25);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #6b9fff 0%, #4175ff 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(41, 98, 255, 0.35);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(41, 98, 255, 0.25);
}

/* Secondary - Secondary action */
.btn-secondary {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--stroke-2);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--stroke-2);
  border-color: var(--stroke-2);
}

.btn-secondary:active:not(:disabled) {
  background: var(--stroke);
}

/* Danger - Destructive action */
.btn-danger {
  background: rgba(255, 58, 58, 0.1);
  color: #ff4d4f;
  border: 1px solid rgba(255, 58, 58, 0.3);
}

.btn-danger:hover:not(:disabled) {
  background: rgba(255, 58, 58, 0.2);
  border-color: rgba(255, 58, 58, 0.5);
}

.btn-danger:active:not(:disabled) {
  background: rgba(255, 58, 58, 0.3);
}

/* Ghost - Minimal */
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 10px 16px;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--stroke);
  color: var(--ink);
}

/* Accent - Highlight action */
.btn-accent {
  background: rgba(41, 98, 255, 0.1);
  color: var(--accent);
  border: 1px solid rgba(41, 98, 255, 0.3);
}

.btn-accent:hover:not(:disabled) {
  background: rgba(41, 98, 255, 0.2);
  border-color: rgba(41, 98, 255, 0.5);
}

/* --- Button Sizes --- */
.btn-xs {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 6px;
  gap: 4px;
}

.btn-sm {
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 8px;
  gap: 6px;
}

.btn-lg {
  padding: 16px 28px;
  font-size: 16px;
  border-radius: 12px;
}

/* --- Icon Button --- */
.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 10px;
}

.btn-icon.btn-sm {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.btn-icon.btn-xs {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.btn-icon svg {
  width: 18px;
  height: 18px;
}

.btn-icon.btn-sm svg {
  width: 16px;
  height: 16px;
}

/* --- Button with Icon --- */
.btn svg,
.btn-primary svg,
.btn-secondary svg,
.btn-danger svg,
.btn-ghost svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* --- Full Width --- */
.btn-full,
.full-width {
  width: 100%;
}

/* --- Button Groups --- */
.btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-group-tight {
  gap: 4px;
}

.btn-group-vertical {
  flex-direction: column;
}

.btn-group-right {
  justify-content: flex-end;
}

.btn-group-center {
  justify-content: center;
}

.btn-group-between {
  justify-content: space-between;
}

/* Connected buttons */
.btn-group-connected {
  gap: 0;
}

.btn-group-connected > *:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.btn-group-connected > *:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group-connected > *:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}

/* --- Loading State --- */
.btn-loading,
.btn-primary.is-loading,
.btn-secondary.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after,
.btn-primary.is-loading::after,
.btn-secondary.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: btnSpin 0.6s linear infinite;
}

.btn-secondary.is-loading::after,
.btn-secondary.btn-loading::after {
  border-color: var(--stroke-2);
  border-top-color: var(--ink);
}

@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

/* --- Light Theme --- */
body.theme-light .btn-secondary {
  background: white;
  color: #333;
  border-color: rgba(0,0,0,0.15);
}

body.theme-light .btn-secondary:hover:not(:disabled) {
  background: #f5f5f5;
  border-color: rgba(0,0,0,0.2);
}

body.theme-light .btn-ghost {
  color: #666;
}

body.theme-light .btn-ghost:hover:not(:disabled) {
  background: rgba(0,0,0,0.05);
  color: #333;
}

body.theme-light .btn-accent {
  background: rgba(41, 98, 255, 0.08);
}

body.theme-light .btn-accent:hover:not(:disabled) {
  background: rgba(41, 98, 255, 0.15);
}

/* --- Modal Actions Layout --- */
.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--stroke);
}

.modal-actions-stack {
  flex-direction: column;
}

.modal-actions-center {
  justify-content: center;
}

/* --- Card Actions Layout --- */
.card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.card-actions-right {
  justify-content: flex-end;
}

/* --- Form Actions --- */
.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.form-actions-right {
  justify-content: flex-end;
}

/* --- Inline Actions (in tables, lists) --- */
.inline-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.inline-actions .btn,
.inline-actions .btn-ghost,
.inline-actions .btn-icon {
  padding: 6px 10px;
  font-size: 12px;
}

/* --- Specific UI Buttons --- */

/* Admin tab buttons */
.admin-tab-btn {
  padding: 10px 16px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.admin-tab-btn:hover {
  color: var(--ink);
  background: rgba(255,255,255,0.05);
}

.admin-tab-btn.active {
  color: white;
  background: linear-gradient(135deg, rgba(79, 140, 255, 0.25) 0%, rgba(41, 98, 255, 0.15) 100%);
  border-color: rgba(79, 140, 255, 0.4);
  box-shadow: 0 4px 16px rgba(41, 98, 255, 0.2);
}

body.theme-light .admin-tab-btn {
  color: #666;
}

body.theme-light .admin-tab-btn:hover {
  color: #333;
  background: rgba(0,0,0,0.05);
}

body.theme-light .admin-tab-btn.active {
  color: var(--accent);
  background: rgba(41, 98, 255, 0.1);
  border-color: rgba(41, 98, 255, 0.3);
}

/* Subtab buttons */
.subtab-btn {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--stroke);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.subtab-btn:hover {
  background: var(--stroke);
  color: var(--ink);
}

.subtab-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Segmented control buttons */
.seg-btn {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--stroke);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.seg-btn:first-child {
  border-radius: 8px 0 0 8px;
}

.seg-btn:last-child {
  border-radius: 0 8px 8px 0;
  border-left: none;
}

.seg-btn:not(:first-child):not(:last-child) {
  border-radius: 0;
  border-left: none;
}

.seg-btn:hover {
  background: var(--stroke);
  color: var(--ink);
}

.seg-btn.active,
.seg-btn.is-active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.seg-btn.is-active + .seg-btn {
  border-left-color: var(--accent);
}

/* AI tool buttons */
.ai-tool-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(41, 98, 255, 0.1);
  border: 1px solid rgba(41, 98, 255, 0.2);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ai-tool-btn:hover {
  background: rgba(41, 98, 255, 0.2);
  border-color: rgba(41, 98, 255, 0.4);
}

.ai-tool-btn svg {
  width: 14px;
  height: 14px;
}

/* Quick action buttons */
.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 80px;
}

.quick-action-btn:hover {
  background: var(--stroke-2);
  color: var(--ink);
  transform: translateY(-2px);
}

.quick-action-btn svg {
  width: 24px;
  height: 24px;
  color: var(--accent);
}

/* Period/filter buttons */
.period-btn,
.filter-btn,
.inbox-filter-btn,
.task-filter-btn {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--stroke);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.period-btn:hover,
.filter-btn:hover,
.inbox-filter-btn:hover,
.task-filter-btn:hover {
  background: var(--stroke);
  color: var(--ink);
}

.period-btn.active,
.filter-btn.active,
.inbox-filter-btn.active,
.task-filter-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Export buttons */
.export-btn,
.quick-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(24, 198, 91, 0.1);
  border: 1px solid rgba(24, 198, 91, 0.3);
  color: var(--good);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.export-btn:hover,
.quick-export-btn:hover {
  background: rgba(24, 198, 91, 0.2);
  border-color: rgba(24, 198, 91, 0.5);
}

/* Template/preset buttons */
.template-btn {
  padding: 10px 14px;
  background: var(--panel);
  border: 1px dashed var(--stroke-2);
  color: var(--muted);
  font-size: 13px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.template-btn:hover {
  background: var(--stroke);
  border-style: solid;
  color: var(--ink);
}

.template-btn.active {
  background: rgba(41, 98, 255, 0.1);
  border: 1px solid rgba(41, 98, 255, 0.3);
  color: var(--accent);
}

/* Hub tab buttons (Scripts Hub etc) */
.hub-tab-btn {
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.hub-tab-btn:hover {
  color: var(--ink);
}

.hub-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Settings nav buttons */
.settings-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.settings-nav-btn:hover {
  background: var(--stroke);
  color: var(--ink);
}

.settings-nav-btn.active {
  background: rgba(41, 98, 255, 0.1);
  color: var(--accent);
}

.settings-nav-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Close buttons */
.close-btn,
.modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.close-btn:hover,
.modal-close-btn:hover {
  background: var(--stroke-2);
  color: var(--ink);
}

.close-btn svg,
.modal-close-btn svg {
  width: 18px;
  height: 18px;
}

/* --- Mobile Button Adjustments --- */
@media (max-width: 768px) {
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-danger {
    padding: 14px 20px;
    font-size: 15px;
  }
  
  .btn-sm {
    padding: 10px 16px;
    font-size: 14px;
  }
  
  .modal-actions {
    flex-direction: column-reverse;
  }
  
  .modal-actions .btn,
  .modal-actions .btn-primary,
  .modal-actions .btn-secondary {
    width: 100%;
  }
  
  .btn-group:not(.btn-group-tight) {
    gap: 10px;
  }
  
  .card-actions {
    flex-direction: column;
  }
  
  .card-actions .btn,
  .card-actions .btn-primary,
  .card-actions .btn-secondary {
    width: 100%;
  }
  
  .admin-tab-btn {
    padding: 10px 14px;
    font-size: 12px;
  }
}

/* Focus states for accessibility */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.btn-ghost:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== KPI SUMMARY CARDS ===== */
.kpi-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-summary-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  transition: all 0.2s ease;
}

.kpi-summary-card:hover {
  border-color: var(--stroke-2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.kpi-summary-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(41, 98, 255, 0.1);
  border-radius: 10px;
  margin-bottom: 12px;
  color: var(--accent);
}

.kpi-summary-icon svg {
  width: 20px;
  height: 20px;
}

.kpi-summary-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
}

.kpi-summary-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

/* Card variants */
.kpi-card-warning .kpi-summary-icon {
  background: rgba(245, 183, 73, 0.15);
  color: var(--mid);
}

.kpi-card-success .kpi-summary-icon {
  background: rgba(24, 198, 91, 0.15);
  color: var(--good);
}

.kpi-card-danger .kpi-summary-icon {
  background: rgba(255, 77, 79, 0.15);
  color: var(--bad);
}

/* Light theme */
body.theme-light .kpi-summary-card {
  background: white;
  border-color: rgba(0,0,0,0.08);
}

body.theme-light .kpi-summary-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* ===== KPI TABLE ===== */
.kpi-table-container {
  overflow-x: auto;
  margin-top: 16px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
}

.kpi-table-container .data-table {
  margin: 0;
  border: none;
}

.kpi-table-container .data-table th {
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 1;
}

.kpi-table-container .hub-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 14px;
}

/* ===== QA EMPTY STATES ===== */
.qa-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  text-align: center;
  background: var(--panel);
  border: 1px dashed var(--stroke-2);
  border-radius: 12px;
  margin: 16px 0;
}

.qa-empty-state-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: var(--muted-2);
}

.qa-empty-state-text {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
}

.qa-empty-state-action {
  padding: 10px 20px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.qa-empty-state-action:hover {
  background: var(--accent-2);
}

/* ===== ACTION ITEMS (KPI) ===== */
.action-items {
  margin-top: 24px;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 14px;
}

.action-items-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
}

.action-items-title svg {
  width: 20px;
  height: 20px;
  color: var(--mid);
}

.action-items-desc {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--fog-bg);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  margin-bottom: 8px;
}

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

.action-item-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 183, 73, 0.15);
  border-radius: 8px;
  color: var(--mid);
  flex-shrink: 0;
}

.action-item-text {
  flex: 1;
  font-size: 14px;
  color: var(--ink);
}

.action-item-empty {
  text-align: center;
  padding: 20px;
  color: var(--muted);
  font-size: 14px;
}

.action-item-empty .celebration {
  font-size: 24px;
  margin-bottom: 8px;
  display: block;
}

/* Mobile */
@media (max-width: 768px) {
  .kpi-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .kpi-summary-card {
    padding: 16px;
  }
  
  .kpi-summary-value {
    font-size: 24px;
  }
  
  .kpi-summary-icon {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  .kpi-summary {
    grid-template-columns: 1fr;
  }
}

/* ===== SETTINGS PAGE COMPLETE REDESIGN ===== */

.settings-container {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  min-height: 500px;
}

/* Settings Navigation */
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  height: fit-content;
  position: sticky;
  top: 100px;
}

.settings-nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.settings-nav-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}

.settings-nav-btn:hover {
  background: var(--stroke);
  color: var(--ink);
}

.settings-nav-btn:hover svg {
  opacity: 1;
}

.settings-nav-btn.active {
  background: linear-gradient(135deg, rgba(79, 140, 255, 0.15) 0%, rgba(41, 98, 255, 0.1) 100%);
  color: var(--accent);
  font-weight: 600;
}

.settings-nav-btn.active svg {
  opacity: 1;
  color: var(--accent);
}

/* Settings Content */
.settings-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings-section {
  display: none;
}

.settings-section.active {
  display: block;
}

.settings-section > h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Settings Card */
.settings-card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 16px;
}

.settings-card h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.settings-card h4:not(:first-child) {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--stroke);
}

/* Settings Form */
.settings-form {
  display: grid;
  gap: 16px;
  margin-bottom: 20px;
}

.settings-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 16px;
}

.settings-row label {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

.settings-row .input,
.settings-row input,
.settings-row select {
  width: 100%;
  padding: 12px 14px;
  background: var(--fog-bg);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  color: var(--ink);
  font-size: 14px;
  transition: all 0.15s ease;
}

.settings-row .input:focus,
.settings-row input:focus,
.settings-row select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(41, 98, 255, 0.15);
}

.settings-row.readonly .input,
.settings-row input[readonly] {
  background: var(--stroke);
  color: var(--muted);
  cursor: not-allowed;
}

/* Settings Option (for toggles) */
.settings-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--stroke);
}

.settings-option:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.settings-option:first-child {
  padding-top: 0;
}

.option-info {
  flex: 1;
}

.option-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.option-desc {
  font-size: 13px;
  color: var(--muted);
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch .toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--stroke-2);
  transition: 0.2s;
  border-radius: 26px;
}

.toggle-switch .toggle-slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px;
  background-color: white;
  transition: 0.2s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
  background: #34c759;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(22px);
}

/* Profile Header */
.profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--stroke);
}

.profile-avatar {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, #4f8bff, #2962ff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: white;
  box-shadow: 0 4px 16px rgba(41, 98, 255, 0.3);
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.profile-role {
  font-size: 14px;
  color: var(--muted);
  text-transform: capitalize;
}

/* Section Headers in Settings */
.section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 24px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title:first-child {
  margin-top: 0;
}

.section-desc {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}

/* Checkbox list style */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--fog-bg);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.checkbox-item:hover {
  border-color: var(--stroke-2);
}

.checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}

.checkbox-item-content {
  flex: 1;
}

.checkbox-item-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}

.checkbox-item-desc {
  font-size: 12px;
  color: var(--muted);
}

/* Select styling */
.settings-option select,
.settings-card select {
  padding: 10px 14px;
  background: var(--fog-bg);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
  min-width: 150px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.settings-option select:focus,
.settings-card select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(41, 98, 255, 0.15);
}

/* Data/Privacy section */
.data-info-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.data-info-item {
  padding: 16px;
  background: var(--fog-bg);
  border: 1px solid var(--stroke);
  border-radius: 10px;
}

.data-info-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.data-info-label {
  font-size: 12px;
  color: var(--muted);
}

/* Session list */
.session-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.session-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--fog-bg);
  border: 1px solid var(--stroke);
  border-radius: 10px;
}

.session-icon {
  width: 40px;
  height: 40px;
  background: var(--stroke);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.session-icon svg {
  width: 20px;
  height: 20px;
}

.session-info {
  flex: 1;
}

.session-device {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.session-details {
  font-size: 12px;
  color: var(--muted);
}

.session-badge {
  padding: 4px 10px;
  background: rgba(24, 198, 91, 0.15);
  color: var(--good);
  font-size: 12px;
  font-weight: 500;
  border-radius: 20px;
}

/* Workspace settings */
.workspace-section {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--stroke);
}

.workspace-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.workspace-section h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}

.workspace-section p {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 16px;
}

/* Scripts list in settings */
.script-role-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.script-role-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--fog-bg);
  border: 1px solid var(--stroke);
  border-radius: 10px;
}

.script-role-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.script-role-status {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
}

.script-role-status.active {
  background: rgba(24, 198, 91, 0.15);
  color: var(--good);
}

.script-role-status.inactive {
  background: rgba(255, 77, 79, 0.15);
  color: var(--bad);
}

/* Light Theme */
body.theme-light .settings-nav {
  background: white;
  border-color: rgba(0,0,0,0.08);
}

body.theme-light .settings-nav-btn.active {
  background: rgba(41, 98, 255, 0.1) !important;
  color: #2962ff !important;
  box-shadow: none !important;
}
body.theme-light .settings-nav-btn.active svg {
  color: #2962ff !important;
}

body.theme-light .settings-card {
  background: white;
  border-color: rgba(0,0,0,0.08);
}

body.theme-light .settings-row .input,
body.theme-light .settings-row input,
body.theme-light .settings-row select,
body.theme-light .settings-option select {
  background: #f8f9fa;
  border-color: rgba(0,0,0,0.1);
}

body.theme-light .settings-row input[readonly] {
  background: #eee;
}

body.theme-light .toggle-slider {
  background-color: #ccc;
}

body.theme-light .checkbox-item,
body.theme-light .session-item,
body.theme-light .script-role-item,
body.theme-light .data-info-item {
  background: #f8f9fa;
  border-color: rgba(0,0,0,0.08);
}

/* Mobile */
@media (max-width: 900px) {
  .settings-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .settings-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
  }
  
  .settings-nav-btn {
    padding: 10px 14px;
    flex: 0 0 auto;
    gap: 8px;
  }
  
  .settings-nav-btn svg {
    width: 16px;
    height: 16px;
  }
  
  .settings-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .settings-option {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .profile-header {
    flex-direction: column;
    text-align: center;
  }
}

/* ===== HUB-EMPTY IMPROVED ===== */
.hub-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: var(--muted-2);
  font-size: 14px;
  text-align: center;
  min-height: 80px;
}

.hub-empty:empty::after {
  content: '—';
}

/* Manager AI empty */
.manager-ai-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  color: var(--muted-2);
  font-size: 14px;
  text-align: center;
  background: var(--panel);
  border: 1px dashed var(--stroke);
  border-radius: 10px;
  min-height: 60px;
}

/* Loading spinner for async content */
.loading-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 16px;
  color: var(--muted);
  font-size: 14px;
}

.loading-placeholder::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid var(--stroke-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ===== PWA INSTRUCTIONS MODAL ===== */
.pwa-instructions {
  text-align: left;
}

.pwa-instructions h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 16px;
}

.pwa-instructions ol {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

.pwa-instructions li {
  margin-bottom: 8px;
}

.pwa-instructions strong {
  color: var(--ink);
}

.pwa-instructions p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* ===== SMOOTH THEME TRANSITION ===== */

/* Smooth background transition for whole page */
body {
  transition: background-color 0.4s ease, color 0.4s ease;
}

body.theme-light {
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* All elements smooth transition */
.card,
.admin-card,
.top-bar,
.settings-card,
.settings-nav,
input,
select,
textarea,
.btn-secondary,
.btn-logout,
.btn-logout-new {
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}

/* ===== SETTINGS PAGE - HORIZONTAL PILL BUTTONS ===== */

/* Override the grid layout - make it single column */
.settings-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px;
}

/* Settings Navigation - Horizontal pills */
.settings-nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  position: static !important;
}

/* Pill Button Style */
.settings-nav-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 18px !important;
  background: var(--panel) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 50px !important;
  color: var(--muted);
  font-size: 13px !important;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.settings-nav-btn svg {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.7;
}

.settings-nav-btn:hover {
  background: var(--stroke) !important;
  color: var(--ink);
  border-color: var(--stroke-2) !important;
  transform: translateY(-1px);
}

.settings-nav-btn:hover svg {
  opacity: 1;
}

.settings-nav-btn.active {
  background: linear-gradient(135deg, #4f8bff 0%, #2962ff 100%) !important;
  border-color: transparent !important;
  color: white !important;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(41, 98, 255, 0.3);
}

.settings-nav-btn.active svg {
  opacity: 1;
  color: white !important;
}

/* Settings Content */
.settings-content {
  width: 100%;
}

.settings-section > h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--stroke);
}

/* Settings Card */
.settings-card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

.settings-card h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Settings Form Rows */
.settings-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.settings-row label {
  min-width: 100px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

.settings-row input,
.settings-row select {
  flex: 1;
  max-width: 300px;
  padding: 10px 14px;
  background: var(--fog-bg);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
}

.settings-row input:focus,
.settings-row select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(41, 98, 255, 0.15);
}

.settings-row input[readonly] {
  background: var(--stroke);
  color: var(--muted);
  cursor: not-allowed;
}

/* Settings Option (Toggle rows) */
.settings-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--stroke);
}

.settings-option:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.settings-option:first-child {
  padding-top: 0;
}

.option-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.option-desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Light theme */
body.theme-light .settings-nav-btn {
  background: white !important;
  border-color: rgba(0,0,0,0.1) !important;
}

body.theme-light .settings-nav-btn:hover {
  background: #f5f5f5 !important;
}

body.theme-light .settings-card {
  background: white;
  border-color: rgba(0,0,0,0.08);
}

body.theme-light .settings-row input,
body.theme-light .settings-row select {
  background: #f8f9fa;
  border-color: rgba(0,0,0,0.1);
}

/* Mobile */
@media (max-width: 600px) {
  .settings-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px !important;
  }
  
  .settings-nav-btn {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }
  
  .settings-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  
  .settings-row input,
  .settings-row select {
    max-width: 100%;
    width: 100%;
  }
}

/* ===== EMOJI THEME TOGGLE ===== */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  cursor: pointer;
  transition: all 0.2s ease;
  perspective: 200px;
  overflow: hidden;
}

.theme-toggle-btn:hover {
  background: var(--stroke);
  transform: none;
  border-color: var(--accent-2);
  box-shadow: none;
}

.theme-toggle-btn:active {
  transform: scale(0.95);
}

#themeEmoji {
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s ease;
}

/* Flip animation when switching theme */
#themeEmoji.theme-switching {
  animation: themeFlip 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes themeFlip {
  0% {
    transform: rotateY(0deg) scale(1);
    opacity: 1;
  }
  40% {
    transform: rotateY(90deg) scale(0.8);
    opacity: 0;
  }
  60% {
    transform: rotateY(-90deg) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: rotateY(0deg) scale(1);
    opacity: 1;
  }
}

body.theme-light .theme-toggle-btn {
  background: white;
  border-color: rgba(0,0,0,0.12);
  box-shadow: none;
}

body.theme-light .theme-toggle-btn:hover {
  background: #f5f5f5;
  border-color: var(--accent-2);
}

/* ===== LOGOUT BUTTON - POLISHED STYLE ===== */
.btn-logout-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-logout-new svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.btn-logout-new:hover {
  background: rgba(255, 77, 79, 0.1);
  border-color: var(--bad);
  color: var(--bad);
}

.btn-logout-new:hover svg {
  transform: translateX(2px);
}

.btn-logout-new:active {
  transform: scale(0.97);
}

.btn-logout-new.hidden {
  display: none !important;
}

body.theme-light .btn-logout-new {
  background: white;
  border-color: rgba(0,0,0,0.12);
  color: #333;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

body.theme-light .btn-logout-new:hover {
  background: rgba(255, 77, 79, 0.1);
  border-color: var(--bad);
  color: var(--bad);
}

/* Mobile */
@media (max-width: 600px) {
  .btn-logout-new {
    padding: 8px 14px;
    font-size: 13px;
    gap: 6px;
  }
  
  .btn-logout-new svg {
    width: 14px;
    height: 14px;
  }
  
  .theme-toggle-btn {
    width: 36px;
    height: 36px;
  }
  
  #themeEmoji {
    font-size: 18px;
  }
}

/* =====================================================
   v4.10.56 - Additional Styles for Messages
   ===================================================== */

/* Messages list spacing */
.sent-messages-list,
.inbox-messages-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Inbox message card */
.inbox-message-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 20px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  transition: all var(--t) var(--ease);
  gap: 16px;
}

.inbox-message-card:hover {
  border-color: var(--accent);
}

.inbox-message-card.is-unread {
  background: rgba(79, 139, 255, 0.08);
  border-color: rgba(79, 139, 255, 0.3);
}

.inbox-message-info {
  flex: 1;
  min-width: 0;
}

.inbox-message-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.inbox-message-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.inbox-message-preview {
  font-size: 13px;
  color: var(--muted-2);
  line-height: 1.4;
}

.inbox-message-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.inbox-message-priority {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.inbox-message-priority.low { background: #22c55e20; color: #22c55e; }
.inbox-message-priority.normal { background: #f59e0b20; color: #f59e0b; }
.inbox-message-priority.high { background: #f9731620; color: #f97316; }
.inbox-message-priority.critical { background: #ef444420; color: #ef4444; }

/* Empty state box */
.empty-state-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  min-height: 180px;
}

.empty-state-box .empty-state-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.4;
}

.empty-state-box .empty-state-text {
  font-size: 14px;
  color: var(--muted-2);
  opacity: 0.7;
}

body.theme-light .empty-state-box {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
}

/* =====================================================
   UTILITY CLASSES - Missing from original CSS
   ===================================================== */

/* Spacing utilities */
.mt-4 { margin-top: 4px !important; }
.mt-6 { margin-top: 6px !important; }
.mt-8 { margin-top: 8px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-12 { margin-top: 12px !important; }
.mt-16 { margin-top: 16px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-24 { margin-top: 24px !important; }

.mb-4 { margin-bottom: 4px !important; }
.mb-8 { margin-bottom: 8px !important; }
.mb-12 { margin-bottom: 12px !important; }
.mb-16 { margin-bottom: 16px !important; }

.gap-8 { gap: 8px !important; }
.gap-12 { gap: 12px !important; }
.gap-16 { gap: 16px !important; }

/* Text utilities */
.muted {
  color: var(--muted) !important;
  opacity: 0.7;
}

.lead {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.sub {
  font-size: 13px;
  color: var(--muted);
}

.mono {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.rich {
  line-height: 1.6;
}

/* Button utilities */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

body.theme-light .icon-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Badge utilities */
.badge,
.badge-soft {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  text-transform: capitalize;
}

.badge {
  background: var(--accent-2);
  color: white;
}

.badge-soft {
  background: rgba(79, 139, 255, 0.15);
  color: var(--accent-2);
}

/* Pill toggle buttons */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pill:hover {
  background: rgba(255, 255, 255, 0.05);
}

.pill.active,
.pill.is-active {
  background: var(--accent-2);
  color: white;
  border-color: var(--accent-2);
}

/* Danger state */
.danger {
  color: #ef4444 !important;
}

.btn-danger {
  background: #ef4444 !important;
  color: white !important;
  border-color: #ef4444 !important;
}

/* Grid utilities */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

/* Checkbox label */
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Modal footer */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--stroke);
}

/* Card subtitle */
.card-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

/* Days pill (for scheduling) */
.days-pill {
  display: inline-flex;
  gap: 4px;
}

.days-pill span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--stroke);
  cursor: pointer;
  transition: all 0.15s ease;
}

.days-pill span.active,
.days-pill span.selected {
  background: var(--accent-2);
  color: white;
  border-color: var(--accent-2);
}

/* Welcome name */
.welcome-name {
  font-weight: 600;
  color: var(--accent-2);
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  max-width: 100%;
  font-size: clamp(1.2rem, 4vw, 1.8rem);
}

/* Notification section */
.notification-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--stroke);
}

.notification-section:last-child {
  border-bottom: none;
}

/* v6.6.0: Automation sections wrapper — visual hierarchy separator */
.automation-sections {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 2px solid var(--stroke, rgba(255,255,255,0.1));
  position: relative;
}
.automation-sections::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--stroke, rgba(255,255,255,0.15)), transparent);
}
.automation-sections-header {
  margin-bottom: 20px;
}
.automation-sections-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text-primary, #fff);
}

/* Support card */
.support-card {
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

/* Reactions grid (for analytics) */
.reactions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.reaction-card {
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  text-align: center;
}

.reaction-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

.reaction-value {
  font-size: 20px;
  font-weight: 700;
}

/* AI Daily */
.ai-daily-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ai-daily-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

/* Asset quick actions */
.asset-quick-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* Retention info */
.retention-info {
  font-size: 13px;
  color: var(--muted);
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
}

/* Top sellers sales */
.top-sellers-sales {
  font-weight: 600;
  color: var(--accent-2);
}

/* Tab arrows */
.admin-tabs-arrow-left,
.admin-tabs-arrow-right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
}

.admin-tabs-arrow-left:hover,
.admin-tabs-arrow-right:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Manager AI empty */
.manager-ai-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}

/* =====================================================
   FIX: Account Card Layout (prevent overlap)
   ===================================================== */

/* Give account-card enough right padding for absolute buttons */
.account-card {
  padding: 10px 80px 10px 12px !important; /* top right bottom left - space for buttons */
}

/* Ensure role tag doesn't overflow */
.account-role-tag {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile: stack buttons better */
@media (max-width: 480px) {
  .account-card {
    padding: 12px 12px 48px 16px !important; /* More left padding */
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  
  .account-info-btn,
  .account-remove-btn,
  .account-restore-btn {
    top: auto !important;
    bottom: 8px !important;
    width: 36px !important;
    height: 36px !important;
  }
  
  .account-info-btn { right: 52px !important; }
  .account-remove-btn { right: 8px !important; }
  .account-restore-btn { right: 96px !important; }
  
  /* Ensure name is visible */
  .account-name,
  .account-card-name {
    font-size: 15px !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  
  /* Container should not clip content */
  .accounts-list,
  .accounts-container,
  .tab-content[data-tab="tab-accounts"],
  [data-content="accounts"] {
    overflow-x: visible !important;
    padding-left: 0 !important;
  }
}

/* Light theme adjustments for utilities */
body.theme-light .pill:hover {
  background: rgba(0, 0, 0, 0.04);
}

body.theme-light .days-pill span {
  background: rgba(0, 0, 0, 0.03);
}

body.theme-light .reaction-card {
  background: rgba(0, 0, 0, 0.02);
}

body.theme-light .retention-info {
  background: rgba(0, 0, 0, 0.02);
}

/* Support ticket actions */
.support-ticket-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.support-ticket-select {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
  background: var(--fog-bg);
  color: var(--ink);
  cursor: pointer;
}

.btn-danger-ghost {
  color: #ef4444 !important;
  background: transparent;
  border: none;
}

.btn-danger-ghost:hover {
  background: rgba(239, 68, 68, 0.1) !important;
}

/* Segmented pill improvements */
.segmented-pill {
  display: inline-flex;
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 1px solid var(--stroke);
  background: var(--fog-bg);
}

.seg-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
}

.seg-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.seg-btn.is-active {
  background: var(--accent-2);
  color: white;
}

body.theme-light .seg-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* =====================================================
   v4.10.60 - Button pill fix + consolidated styles
   ===================================================== */

/* Force all buttons to have pill border-radius */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger,
.btn-accent,
button[type="button"],
button[type="submit"] {
  border-radius: var(--radius-pill) !important;
}

/* Smaller buttons */
.btn-sm {
  padding: 6px 14px !important;
  font-size: 13px !important;
  min-height: 32px !important;
}

/* Action buttons in cards/lists */
.account-info-btn,
.account-remove-btn,
.account-restore-btn {
  border-radius: 10px !important;
}

/* Fix segmented buttons to have proper pill on ends only */
.segmented-pill .seg-btn:first-child {
  border-radius: var(--radius-pill) 0 0 var(--radius-pill) !important;
}

.segmented-pill .seg-btn:last-child {
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0 !important;
}

.segmented-pill .seg-btn:not(:first-child):not(:last-child) {
  border-radius: 0 !important;
}

/* Input fields should have rounded corners too */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border-radius: var(--radius-md) !important;
}

/* =====================================================
   DESIGN SYSTEM v4.10.61 - Unified Components
   =====================================================
   This section OVERRIDES all previous button/control styles
   to create a single, consistent design system.
   ===================================================== */

/* v5.2.63: Tokens consolidated to main :root block */

/* =====================================================
   UNIFIED BUTTONS - One family, one style
   ===================================================== */

/* Base button - applies to ALL buttons */
.btn,
button.btn-primary,
button.btn-secondary,
button.btn-ghost,
button.btn-danger,
button.btn-accent,
button.btn-outline,
.admin-block button,
.card button,
.modal button:not(.modal-close-btn) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: var(--ctl-h-md) !important;
  padding: 0 16px !important;
  font-size: var(--btn-font) !important;
  font-weight: var(--btn-weight) !important;
  font-family: inherit !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border: 1px solid transparent !important;
  border-radius: var(--btn-radius) !important;
  cursor: pointer !important;
  transition: all var(--btn-transition) !important;
  text-decoration: none !important;
  outline: none !important;
}

/* Button sizes */
.btn-xs, button.btn-xs {
  height: var(--ctl-h-xs) !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}

.btn-sm, button.btn-sm {
  height: var(--ctl-h-sm) !important;
  padding: 0 12px !important;
  font-size: 13px !important;
}

.btn-lg, button.btn-lg {
  height: var(--ctl-h-lg) !important;
  padding: 0 24px !important;
  font-size: 15px !important;
}

/* PRIMARY button - main action */
.btn-primary,
button.btn-primary,
button[type="submit"]:not(.btn-secondary):not(.btn-ghost):not(.btn-danger) {
  background: var(--accent-2) !important;
  color: #fff !important;
  border-color: var(--accent-2) !important;
  box-shadow: none !important;
}

.btn-primary:hover:not(:disabled),
button.btn-primary:hover:not(:disabled),
button[type="submit"]:hover:not(:disabled):not(.btn-secondary):not(.btn-ghost):not(.btn-danger) {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  transform: translateY(-1px) !important;
}

.btn-primary:active:not(:disabled),
button.btn-primary:active:not(:disabled) {
  transform: translateY(0) !important;
}

/* SECONDARY button - neutral */
.btn-secondary,
button.btn-secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--ink) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
}

.btn-secondary:hover:not(:disabled),
button.btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* GHOST button - minimal */
.btn-ghost,
button.btn-ghost {
  background: transparent !important;
  color: var(--ink) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.btn-ghost:hover:not(:disabled),
button.btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* OUTLINE button */
.btn-outline,
button.btn-outline {
  background: transparent !important;
  color: var(--accent-2) !important;
  border-color: var(--accent-2) !important;
  box-shadow: none !important;
}

.btn-outline:hover:not(:disabled),
button.btn-outline:hover:not(:disabled) {
  background: rgba(96, 165, 250, 0.1) !important;
}

/* DANGER button */
.btn-danger,
button.btn-danger {
  background: #ef4444 !important;
  color: #fff !important;
  border-color: #ef4444 !important;
  box-shadow: none !important;
}

.btn-danger:hover:not(:disabled),
button.btn-danger:hover:not(:disabled) {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

/* DANGER GHOST - for delete icons */
.btn-danger-ghost,
button.btn-danger-ghost {
  background: transparent !important;
  color: #ef4444 !important;
  border-color: transparent !important;
}

.btn-danger-ghost:hover:not(:disabled),
button.btn-danger-ghost:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.15) !important;
}

/* ACCENT button */
.btn-accent,
button.btn-accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.btn-accent:hover:not(:disabled),
button.btn-accent:hover:not(:disabled) {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
}

/* ICON button - square */
.btn-icon,
button.btn-icon {
  width: var(--ctl-h-md) !important;
  height: var(--ctl-h-md) !important;
  padding: 0 !important;
  border-radius: var(--btn-radius) !important;
}

.btn-icon.btn-sm {
  width: var(--ctl-h-sm) !important;
  height: var(--ctl-h-sm) !important;
}

/* Disabled state - all buttons */
.btn:disabled,
button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Focus state - all buttons */
.btn:focus-visible,
button:focus-visible {
  box-shadow: var(--focus-ring) !important;
}

/* =====================================================
   SEGMENTED CONTROLS - Unified tabs/pills
   ===================================================== */

.segmented-pill,
.segmented,
.seg-control {
  display: inline-flex !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--btn-radius) !important;
  padding: 3px !important;
  gap: 2px !important;
}

.seg-btn,
.segmented-pill button,
.segmented button,
.seg-control button {
  height: 32px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: transparent !important;
  color: var(--muted) !important;
  border: none !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
}

.seg-btn:hover:not(.is-active),
.segmented-pill button:hover:not(.is-active):not(.active),
.segmented button:hover:not(.is-active):not(.active) {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink) !important;
}

.seg-btn.is-active,
.seg-btn.active,
.segmented-pill button.is-active,
.segmented-pill button.active,
.segmented button.is-active,
.segmented button.active {
  background: var(--accent-2) !important;
  color: #fff !important;
}

/* =====================================================
   ADMIN TAB BUTTONS - Navigation tabs
   ===================================================== */

.admin-tab-btn {
  height: 36px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: transparent !important;
  color: var(--muted) !important;
  border: none !important;
  border-radius: var(--btn-radius) !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
  white-space: nowrap !important;
}

.admin-tab-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink) !important;
}

.admin-tab-btn.active {
  background: var(--accent-2) !important;
  color: #fff !important;
}

/* =====================================================
   FORM INPUTS - Consistent with buttons
   ===================================================== */

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  height: var(--ctl-h-md) !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--btn-radius) !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
  outline: none !important;
}

textarea {
  height: auto !important;
  padding: 12px !important;
  min-height: 80px !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent-2) !important;
  box-shadow: var(--focus-ring) !important;
}

/* =====================================================
   ACCOUNT CARD BUTTONS - Fixed positioning
   ===================================================== */

.account-info-btn,
.account-remove-btn,
.account-restore-btn {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.account-info-btn {
  background: rgba(96, 165, 250, 0.15) !important;
  color: var(--accent-2) !important;
  border: 1px solid rgba(96, 165, 250, 0.3) !important;
}

.account-info-btn:hover {
  background: rgba(96, 165, 250, 0.25) !important;
}

.account-remove-btn {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.5) !important;
  border: none !important;
}

.account-remove-btn:hover {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.15) !important;
}

.account-restore-btn {
  background: transparent !important;
  color: #22c55e !important;
  border: none !important;
}

.account-restore-btn:hover {
  background: rgba(34, 197, 94, 0.15) !important;
}

/* =====================================================
   LIGHT THEME OVERRIDES
   ===================================================== */

body.theme-light .btn-secondary,
body.theme-light button.btn-secondary {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--ink) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

body.theme-light .btn-secondary:hover:not(:disabled),
body.theme-light button.btn-secondary:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.1) !important;
}

body.theme-light .btn-ghost:hover:not(:disabled),
body.theme-light button.btn-ghost:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06) !important;
}

body.theme-light .segmented-pill,
body.theme-light .segmented,
body.theme-light .seg-control {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light .seg-btn:hover:not(.is-active),
body.theme-light .segmented-pill button:hover:not(.is-active) {
  background: rgba(0, 0, 0, 0.06) !important;
}

body.theme-light input:not([type="checkbox"]):not([type="radio"]),
body.theme-light select,
body.theme-light textarea {
  background: #fff !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

body.theme-light .admin-tab-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* =====================================================
   REDUCED MOTION - Accessibility
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================
   CLEANUP - Remove old shadows/effects
   ===================================================== */

/* Remove excessive shadows from buttons */
.btn,
button {
  box-shadow: none !important;
}

/* Only primary gets subtle shadow on hover */
.btn-primary:hover:not(:disabled),
.btn-accent:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3) !important;
}

/* =====================================================
   ADDITIONAL BUTTON TYPES - Unified
   ===================================================== */

/* Language toggle buttons */
.lang-btn {
  height: 28px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: var(--muted) !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
}

.lang-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08) !important;
}

.lang-btn.active {
  background: var(--accent-2) !important;
  color: #fff !important;
}

/* Theme toggle button */
.theme-toggle-btn {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: all 200ms ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}

.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  transform: none !important;
  box-shadow: none !important;
}

.theme-toggle-btn:active {
  transform: scale(0.95) !important;
}

body.theme-light .theme-toggle-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

body.theme-light .theme-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* Logout button */
.btn-logout-new {
  height: 36px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--btn-radius) !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.btn-logout-new:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Script type buttons (seller view) */
.script-type-btn {
  height: 32px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: transparent !important;
  color: var(--muted) !important;
  border: none !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
}

.script-type-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06) !important;
}

.script-type-btn.active {
  background: var(--accent-2) !important;
  color: #fff !important;
}

/* Hub tab buttons */
.hub-tab-btn {
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: transparent !important;
  color: var(--muted) !important;
  border: none !important;
  border-radius: var(--btn-radius) !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
  white-space: nowrap !important;
}

.hub-tab-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink) !important;
}

.hub-tab-btn.active {
  background: var(--accent-2) !important;
  color: #fff !important;
}

/* Task filter buttons */
.task-filter-btn {
  height: 30px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: transparent !important;
  color: var(--muted) !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
}

.task-filter-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06) !important;
}

.task-filter-btn.active {
  background: var(--accent-2) !important;
  color: #fff !important;
}

/* Modal close button */
.modal-close-btn {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  background: transparent !important;
  color: var(--muted) !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--ink) !important;
}

/* Quick routes button */
.quick-routes-btn {
  height: 36px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--btn-radius) !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.quick-routes-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Light theme for additional buttons */
body.theme-light .lang-btn:hover:not(.active),
body.theme-light .theme-toggle-btn:hover,
body.theme-light .btn-logout-new:hover,
body.theme-light .script-type-btn:hover:not(.active),
body.theme-light .hub-tab-btn:hover:not(.active),
body.theme-light .task-filter-btn:hover:not(.active),
body.theme-light .quick-routes-btn:hover {
  background: rgba(0, 0, 0, 0.06) !important;
}

body.theme-light .theme-toggle-btn,
body.theme-light .btn-logout-new {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

body.theme-light .modal-close-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* =====================================================
   v4.10.62 - AGGRESSIVE BUTTON OVERRIDE
   All buttons MUST be rounded with 14px radius
   ===================================================== */

/* Override absolutely everything */
button,
.btn,
[type="button"],
[type="submit"],
[type="reset"],
input[type="button"],
input[type="submit"],
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger,
.btn-accent,
.btn-outline,
.btn-sm,
.btn-lg,
.btn-xs,
.seg-btn,
.admin-tab-btn,
.lang-btn,
.hub-tab-btn,
.task-filter-btn,
.script-type-btn,
.quick-routes-btn,
.theme-toggle-btn,
.btn-logout-new {
  border-radius: 14px !important;
}

/* Segmented controls - rounded ends */
.segmented-pill,
.segmented,
.seg-control {
  border-radius: 16px !important;
  padding: 4px !important;
}

.segmented-pill .seg-btn,
.segmented .seg-btn,
.seg-control .seg-btn,
.seg-btn {
  border-radius: 12px !important;
}

/* Icon buttons - slightly less rounded */
.btn-icon,
.icon-btn,
.modal-close-btn,
.account-info-btn,
.account-remove-btn,
.account-restore-btn {
  border-radius: 10px !important;
}

/* Admin tabs wrapper */
.admin-tabs {
  border-radius: 16px !important;
}

.admin-tab-btn {
  border-radius: 12px !important;
}

/* Input fields - consistent with buttons */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  border-radius: 14px !important;
}

/* Fix button heights to be consistent */
button:not(.modal-close-btn):not(.btn-icon):not(.icon-btn):not(.account-info-btn):not(.account-remove-btn):not(.account-restore-btn):not(.accsw-delete),
.btn,
[type="button"]:not(.modal-close-btn),
[type="submit"] {
  min-height: 40px !important;
}

.btn-sm,
.seg-btn,
.admin-tab-btn,
.lang-btn {
  min-height: 32px !important;
}

.btn-lg {
  min-height: 48px !important;
}

/* Remove all box shadows from buttons */
button,
.btn,
[type="button"],
[type="submit"] {
  box-shadow: none !important;
}

/* Only primary/accent gets hover shadow */
.btn-primary:hover:not(:disabled),
.btn-accent:hover:not(:disabled),
button[type="submit"]:hover:not(:disabled) {
  box-shadow: 0 4px 14px rgba(96, 165, 250, 0.35) !important;
}

/* =====================================================
   v4.10.63 - PREMIUM TOGGLE / SEGMENTED CONTROL
   Premium pill-style with shimmer effect
   ===================================================== */

/* Container - full pill shape */
.segmented-pill,
.segmented,
.seg-control {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--radius-pill) !important;
  overflow: visible !important;
}

/* Each button - full pill shape */
.seg-btn,
.segmented-pill > button,
.segmented > button,
.seg-control > button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 36px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  background: transparent !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

/* Hover state - non-active */
.seg-btn:hover:not(.is-active):not(.active),
.segmented-pill > button:hover:not(.is-active):not(.active),
.segmented > button:hover:not(.is-active):not(.active) {
  color: var(--ink) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Active state - premium gradient pill */
.seg-btn.is-active,
.seg-btn.active,
.segmented-pill > button.is-active,
.segmented-pill > button.active,
.segmented > button.is-active,
.segmented > button.active {
  color: #fff !important;
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #3b82f6 100%) !important;
  background-size: 200% 200% !important;
  box-shadow: 
    0 2px 8px rgba(59, 130, 246, 0.4),
    0 0 20px rgba(59, 130, 246, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  animation: shimmerIdle 3s ease infinite !important;
}

/* Shimmer animation - subtle idle state */
@keyframes shimmerIdle {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Enhanced shimmer on hover */
.seg-btn.is-active:hover,
.seg-btn.active:hover,
.segmented-pill > button.is-active:hover,
.segmented-pill > button.active:hover {
  background: linear-gradient(135deg, #2563eb 0%, #60a5fa 30%, #93c5fd 50%, #60a5fa 70%, #2563eb 100%) !important;
  background-size: 300% 300% !important;
  box-shadow: 
    0 4px 12px rgba(59, 130, 246, 0.5),
    0 0 30px rgba(59, 130, 246, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  animation: shimmerHover 1.5s ease infinite !important;
}

@keyframes shimmerHover {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* Focus state */
.seg-btn:focus-visible,
.segmented-pill > button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4) !important;
}

/* Light theme adjustments */
body.theme-light .segmented-pill,
body.theme-light .segmented,
body.theme-light .seg-control {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light .seg-btn:hover:not(.is-active):not(.active),
body.theme-light .segmented-pill > button:hover:not(.is-active):not(.active) {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* Smaller variant for compact areas */
.segmented-pill.seg-sm .seg-btn,
.segmented-pill.days-pill .seg-btn {
  height: 32px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
}

/* Script role toggle - same premium style */
.script-role-row.segmented-pill {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--radius-pill) !important;
  padding: 4px !important;
}

.script-role-row .seg-btn,
.script-role-row button {
  border-radius: var(--radius-pill) !important;
}

/* Rule items mode toggle */
#ruleItemsMode {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex !important;
  justify-content: center !important;
}

#ruleItemsMode .seg-btn {
  border-radius: var(--radius-pill) !important;
}

/* =====================================================
   v4.10.64 - UNIFIED BUTTON SYSTEM
   One source of truth for all buttons
   ALL buttons are fully rounded (border-radius: 9999px)
   ===================================================== */

/* ===== CHIP GROUP (replaces segmented-pill) ===== */
.chip-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ===== BASE BUTTON ===== */
.btn,
button,
[type="button"],
[type="submit"],
[type="reset"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  outline: none;
  text-decoration: none;
}

.btn:hover:not(:disabled),
button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.btn:active:not(:disabled),
button:active:not(:disabled) {
  transform: translateY(0);
}

.btn:disabled,
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn:focus-visible,
button:focus-visible {
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.4);
}

/* ===== PRIMARY BUTTON ===== */
.btn-primary,
button[type="submit"]:not(.btn-secondary):not(.btn-ghost):not(.btn-chip) {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover:not(:disabled),
button[type="submit"]:hover:not(:disabled):not(.btn-secondary):not(.btn-ghost):not(.btn-chip) {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}

/* ===== SECONDARY BUTTON ===== */
.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ===== GHOST BUTTON ===== */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: none;
}

.btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}

/* ===== DANGER BUTTON ===== */
.btn-danger {
  background: #ef4444;
  color: #fff;
  border: none;
}

.btn-danger:hover:not(:disabled) {
  background: #dc2626;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* ===== CHIP BUTTON (for toggles) ===== */
.btn-chip {
  height: 36px;
  padding: 0 16px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-chip:hover:not(:disabled):not(.is-active) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  transform: none;
}

.btn-chip.is-active,
.btn-chip.active {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}

.btn-chip.is-active:hover,
.btn-chip.active:hover {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.45);
}

/* ===== BUTTON SIZES ===== */
.btn-sm {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
}

.btn-lg {
  height: 48px;
  padding: 0 28px;
  font-size: 15px;
}

.btn-xs {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
}

/* ===== ICON BUTTON ===== */
.btn-icon,
.icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
}

.btn-icon.btn-sm,
.icon-btn.btn-sm {
  width: 32px;
  height: 32px;
}

/* ===== SPECIAL BUTTONS ===== */
.modal-close-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 20px;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
}

/* Account card buttons */
.account-info-btn,
.account-remove-btn,
.account-restore-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 12px;
  border-radius: 9999px;
}

.account-info-btn {
  background: rgba(96, 165, 250, 0.15);
  color: var(--accent-2);
  border: 1px solid rgba(96, 165, 250, 0.3);
}

.account-remove-btn {
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  border: none;
}

.account-remove-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.account-restore-btn {
  background: transparent;
  color: #22c55e;
  border: none;
}

.account-restore-btn:hover {
  background: rgba(34, 197, 94, 0.15);
}

/* Admin tab buttons */
.admin-tab-btn {
  height: 36px;
  padding: 0 16px;
  font-size: 13px;
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: 9999px;
}

.admin-tab-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}

.admin-tab-btn.active {
  background: var(--accent-2);
  color: #fff;
}

/* Language buttons */
.lang-btn {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: 9999px;
}

.lang-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08);
}

.lang-btn.active {
  background: var(--accent-2);
  color: #fff;
}

/* Theme toggle */
.theme-toggle-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
}

/* Logout button */
.btn-logout-new {
  height: 36px;
  padding: 0 14px;
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
}

/* ===== LIGHT THEME ===== */
body.theme-light .btn,
body.theme-light button {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

body.theme-light .btn:hover:not(:disabled),
body.theme-light button:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
}

body.theme-light .btn-chip {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

body.theme-light .btn-chip:hover:not(.is-active) {
  background: rgba(0, 0, 0, 0.08);
}

body.theme-light .btn-secondary {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}

body.theme-light .btn-ghost:hover {
  background: rgba(0, 0, 0, 0.06);
}

body.theme-light .admin-tab-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.06);
}

body.theme-light .lang-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.06);
}

body.theme-light .theme-toggle-btn {
  border-color: rgba(0, 0, 0, 0.1);
}

body.theme-light .btn-logout-new {
  border-color: rgba(0, 0, 0, 0.1);
}

body.theme-light .modal-close-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* ===== OVERRIDE OLD STYLES ===== */
/* Force all buttons to be fully rounded */
.btn,
button,
[type="button"],
[type="submit"],
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger,
.btn-accent,
.btn-chip,
.seg-btn,
.admin-tab-btn,
.lang-btn,
.hub-tab-btn,
.task-filter-btn,
.script-type-btn,
.script-role-btn,
.script-role-btn-seller {
  border-radius: var(--radius-pill) !important;
}

/* Remove old segmented styles that create half-rounded buttons */
.segmented-pill .seg-btn:first-child,
.segmented-pill .seg-btn:last-child,
.segmented .seg-btn:first-child,
.segmented .seg-btn:last-child {
  border-radius: var(--radius-pill) !important;
}

/* =====================================================
   v4.10.65 - FINAL BUTTON SYSTEM FIX
   This section has HIGHEST PRIORITY and overrides everything
   ===================================================== */

/* v5.2.63: Tokens consolidated to main :root block */

/* ===== CHIP GROUP - MUST BE SEPARATE BUTTONS ===== */
.chip-group,
div.chip-group,
[class*="chip-group"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ===== BTN-CHIP - EACH IS SEPARATE PILL ===== */
.btn.btn-chip,
button.btn-chip,
.chip-group .btn-chip,
.chip-group button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--btn-h-sm) !important;
  padding: 0 var(--btn-pad-x-sm) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--btn-radius-pill) !important;
  cursor: pointer !important;
  transition: all var(--btn-transition) !important;
  box-shadow: none !important;
}

.btn.btn-chip:hover:not(.is-active):not(.active):not(:disabled),
.chip-group button:hover:not(.is-active):not(.active):not(:disabled) {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--ink) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-1px) !important;
}

.btn.btn-chip.is-active,
.btn.btn-chip.active,
.chip-group button.is-active,
.chip-group button.active {
  color: #fff !important;
  background: var(--btn-primary-bg) !important;
  border-color: transparent !important;
  box-shadow: var(--btn-shadow) !important;
}

.btn.btn-chip.is-active:hover,
.btn.btn-chip.active:hover,
.chip-group button.is-active:hover,
.chip-group button.active:hover {
  background: var(--btn-primary-hover) !important;
  box-shadow: var(--btn-shadow-hover) !important;
  transform: translateY(-1px) !important;
}

/* ===== ALL BUTTONS MUST BE PILL SHAPED ===== */
html body button,
html body .btn,
html body [type="button"],
html body [type="submit"],
html body [type="reset"],
html body .btn-primary,
html body .btn-secondary,
html body .btn-ghost,
html body .btn-danger,
html body .btn-chip,
html body .admin-tab-btn,
html body .lang-btn,
html body .hub-tab-btn,
html body .task-filter-btn,
html body .script-type-btn,
html body .seg-btn {
  border-radius: var(--btn-radius-pill) !important;
}

/* ===== REMOVE SEGMENTED CONTROL APPEARANCE ===== */
.segmented-pill,
.segmented,
.seg-control,
[class*="segmented"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 10px !important;
}

/* ===== FIX SECTION SPACING ===== */
.card,
.admin-card,
section.card {
  margin-bottom: var(--section-gap) !important;
}

.admin-block {
  margin-bottom: var(--card-gap) !important;
}

/* ===== LIGHT THEME CHIP BUTTONS ===== */
body.theme-light .btn.btn-chip,
body.theme-light .chip-group button {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--muted) !important;
}

body.theme-light .btn.btn-chip:hover:not(.is-active):not(.active),
body.theme-light .chip-group button:hover:not(.is-active):not(.active) {
  background: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light .chip-group,
body.theme-light .segmented-pill,
body.theme-light .segmented {
  background: transparent !important;
  border: none !important;
}

/* ===== ADMIN TAB BUTTONS ===== */
html body .admin-tab-btn {
  height: 36px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: var(--muted) !important;
  border: none !important;
  border-radius: var(--btn-radius-pill) !important;
}

html body .admin-tab-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink) !important;
}

html body .admin-tab-btn.active {
  background: var(--accent-2) !important;
  color: #fff !important;
}

body.theme-light .admin-tab-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* ===== FIX SCRIPT ROLE BUTTONS ===== */
html body .script-role-btn,
html body .script-role-btn-seller {
  border-radius: var(--btn-radius-pill) !important;
}

/* ===== FOCUS VISIBLE FOR ACCESSIBILITY ===== */
html body button:focus-visible,
html body .btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4) !important;
}

/* =============================================================================
   MicHelper v4.11.1 - UNIFIED BUTTON SYSTEM & FINAL FIX
   ============================================================================= */

/* v5.2.63: Tokens consolidated to main :root block */

/* ===== UNIFIED BUTTON BASE ===== */
html body button,
html body .btn,
html body [class*="btn-"]:not(.admin-tabs-arrow):not(.account-remove-btn):not(.account-restore-btn):not(.account-info-btn) {
  border-radius: var(--btn-radius-pill) !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  transition: all var(--btn-transition) !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Shine effect on hover */
html body button::before,
html body .btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent) !important;
  transition: left 400ms ease !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* v5.2.60: Ensure button content is ABOVE ::before overlay */
html body button > *,
html body .btn > *,
html body .quick-action-card > *,
html body .stat-card > * {
  position: relative !important;
  z-index: 1 !important;
}

html body button:hover::before,
html body .btn:hover::before {
  left: 100% !important;
}

/* Kill shine effect on bottom sheet tiles */
#mobileBottomSheet .more-grid-tile::before,
#mobileBottomSheet .more-grid-tile:hover::before {
  content: none !important;
  display: none !important;
}

/* ===== BTN-PRIMARY ===== */
html body .btn-primary,
html body button.btn-primary {
  height: var(--btn-h-md) !important;
  padding: 0 24px !important;
  font-size: var(--btn-font-md) !important;
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

html body .btn-primary:hover:not(:disabled),
html body button.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
  box-shadow: var(--btn-glow), 0 4px 12px rgba(59, 130, 246, 0.4) !important;
  transform: translateY(-1px) !important;
}

html body .btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(0.98) !important;
}

/* ===== BTN-SECONDARY ===== */
html body .btn-secondary,
html body button.btn-secondary {
  height: var(--btn-h-md) !important;
  padding: 0 20px !important;
  font-size: var(--btn-font-md) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink, #f8f8fc) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html body .btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* ===== BTN-GHOST ===== */
html body .btn-ghost,
html body button.btn-ghost {
  height: var(--btn-h-md) !important;
  padding: 0 16px !important;
  font-size: var(--btn-font-md) !important;
  background: transparent !important;
  color: var(--muted, rgba(248, 248, 252, 0.72)) !important;
  border: none !important;
}

html body .btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink, #f8f8fc) !important;
}

/* ===== BTN-DANGER ===== */
html body .btn-danger,
html body button.btn-danger {
  height: var(--btn-h-md) !important;
  padding: 0 20px !important;
  font-size: var(--btn-font-md) !important;
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%) !important;
  color: #fff !important;
  border: none !important;
}

html body .btn-danger:hover:not(:disabled) {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
  transform: translateY(-1px) !important;
}

/* ===== DISABLED STATE ===== */
html body button:disabled,
html body .btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ===== CHIP GROUP - SEPARATE PILL BUTTONS ===== */
html body .chip-group,
html body div.chip-group {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ===== BTN-CHIP - INDIVIDUAL PILL BUTTONS ===== */
html body .btn.btn-chip,
html body .btn-chip,
html body .chip-group button,
html body .chip-group .btn {
  height: var(--btn-h-sm) !important;
  padding: 0 18px !important;
  font-size: var(--btn-font-sm) !important;
  font-weight: 600 !important;
  border-radius: var(--btn-radius-pill) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--muted, rgba(248, 248, 252, 0.72)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  white-space: nowrap !important;
}

html body .btn.btn-chip:hover:not(.is-active):not(.active):not(:disabled),
html body .chip-group button:hover:not(.is-active):not(.active):not(:disabled) {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--ink, #f8f8fc) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html body .btn.btn-chip.is-active,
html body .btn.btn-chip.active,
html body .chip-group button.is-active,
html body .chip-group button.active {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

/* ===== REMOVE SEGMENTED APPEARANCE ===== */
html body .segmented-pill,
html body .segmented {
  display: inline-flex !important;
  gap: 10px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

html body .segmented-pill button,
html body .segmented button,
html body .segmented-pill .seg-btn,
html body .segmented .seg-btn {
  border-radius: var(--btn-radius-pill) !important;
}

/* ===== ADMIN TAB BUTTONS (v7.6.0) =====
 * Comfortable size — not too tight, not wasteful.
 * Centered distribution across container; scroll only when truly overflowing. */
html body .admin-tab-btn {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: var(--muted) !important;
  border: none !important;
  border-radius: var(--btn-radius-pill) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

html body .admin-tab-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--ink) !important;
}

html body .admin-tab-btn.active {
  background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

/* ===== TAB SCROLL ARROWS - SHOW ONLY ON OVERFLOW ===== */
html body .admin-tabs-arrow {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  /* v5.2.79: Removed display: flex !important - controlled by JS */
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 200ms ease !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
}

html body .admin-tabs-arrow:hover {
  background: var(--accent, #3b82f6) !important;
  border-color: var(--accent, #3b82f6) !important;
  color: #fff !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4) !important;
}

html body .admin-tabs-arrow:active {
  transform: scale(0.95) !important;
}

/* Arrows use opacity from JS, don't hide with CSS */
html body .admin-tabs-arrow svg {
  width: 16px !important;
  height: 16px !important;
}

/* ===== ACCOUNT CARD META INFO ===== */
html body .account-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
  font-size: 12px !important;
  color: var(--muted-2, rgba(248, 248, 252, 0.55)) !important;
  line-height: 1.5 !important;
  margin-top: 8px !important;
}

html body .account-meta .meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}

html body .account-meta .meta-label {
  color: var(--muted, rgba(248, 248, 252, 0.72)) !important;
  font-weight: 500 !important;
}

/* ===== ACCOUNT CARD ===== */
html body .account-card {
  position: relative !important;
  padding: 10px 14px !important;
  padding-right: 100px !important;
  margin-bottom: 8px !important;
  background: var(--panel, rgba(12, 12, 18, 0.95)) !important;
  border: 1px solid var(--stroke, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 12px !important;
}

html body .account-card:hover {
  border-color: rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.15) !important;
}

/* ===== ICON BUTTONS (remove, restore, info) ===== */
html body .account-remove-btn,
html body .account-restore-btn,
html body .account-info-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--muted) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
}

html body .account-info-btn {
  right: 76px !important;
}

html body .account-remove-btn {
  right: 40px !important;
}

html body .account-restore-btn {
  right: 40px !important;
  color: var(--good, #22c55e) !important;
}

html body .account-remove-btn:hover,
html body .account-restore-btn:hover,
html body .account-info-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ===== LANGUAGE TOGGLE BUTTONS ===== */
html body .lang-btn {
  height: var(--btn-h-sm) !important;
  padding: 0 14px !important;
  font-size: var(--btn-font-sm) !important;
  font-weight: 600 !important;
  border-radius: var(--btn-radius-pill) !important;
  background: transparent !important;
  color: var(--muted) !important;
  border: none !important;
}

html body .lang-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06) !important;
}

html body .lang-btn.active {
  background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
  color: #fff !important;
}

/* ===== FOCUS VISIBLE ===== */
html body button:focus-visible,
html body .btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4) !important;
}

/* =============================================================================
   LIGHT THEME OVERRIDES
   ============================================================================= */
body.theme-light {
  --ink: #1a1a2e;
  --muted: rgba(26, 26, 46, 0.72);
  --muted-2: rgba(26, 26, 46, 0.55);
  --panel: rgba(255, 255, 255, 0.95);
  --stroke: rgba(0, 0, 0, 0.08);
  --stroke-2: rgba(0, 0, 0, 0.12);
}

/* Settings profile — remove gradient bg on light theme, keep content */
body.theme-light #settings-profile .profile-header {
  background: transparent !important;
}
body.theme-light .profile-name {
  color: #1a1a2e !important;
}
body.theme-light .profile-role {
  color: rgba(26, 26, 46, 0.65) !important;
}

/* Rounded table borders */
.data-table,
.mic-table,
.regions-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--stroke) !important;
}

.data-table th:first-child,
.mic-table th:first-child,
.regions-table th:first-child {
  border-top-left-radius: 12px;
}
.data-table th:last-child,
.mic-table th:last-child,
.regions-table th:last-child {
  border-top-right-radius: 12px;
}
.data-table tr:last-child td:first-child,
.mic-table tr:last-child td:first-child,
.regions-table tr:last-child td:first-child {
  border-bottom-left-radius: 12px;
}
.data-table tr:last-child td:last-child,
.mic-table tr:last-child td:last-child,
.regions-table tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}
.data-table tr:last-child td,
.mic-table tr:last-child td,
.regions-table tr:last-child td {
  border-bottom: none !important;
}

body.theme-light .data-table,
body.theme-light .mic-table,
body.theme-light .regions-table {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

body.theme-light .btn-secondary,
body.theme-light button.btn-secondary {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--ink) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

body.theme-light .btn-secondary:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light .btn-ghost:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04) !important;
}

body.theme-light .btn.btn-chip,
body.theme-light .chip-group button {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--muted) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light .btn.btn-chip:hover:not(.is-active):not(.active),
body.theme-light .chip-group button:hover:not(.is-active):not(.active) {
  background: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light .admin-tab-btn {
  color: var(--muted) !important;
}

body.theme-light .admin-tab-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--ink) !important;
}

body.theme-light .admin-tabs-arrow {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: var(--ink) !important;
}

body.theme-light .admin-tabs-arrow:hover {
  background: var(--accent, #3b82f6) !important;
  color: #fff !important;
}

body.theme-light .account-meta .meta-item {
  background: rgba(0, 0, 0, 0.04) !important;
}

body.theme-light .account-card {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light .account-card:hover {
  border-color: rgba(0, 0, 0, 0.12) !important;
}

body.theme-light .account-remove-btn,
body.theme-light .account-restore-btn,
body.theme-light .account-info-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: var(--muted) !important;
}

body.theme-light .account-remove-btn:hover,
body.theme-light .account-restore-btn:hover,
body.theme-light .account-info-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light .lang-btn {
  color: var(--muted) !important;
}

body.theme-light .lang-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.04) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  html body .account-card {
    padding-right: 100px !important;
  }
  
  html body .account-meta {
    gap: 4px 6px !important;
  }
  
  html body .account-meta .meta-item {
    font-size: 11px !important;
    padding: 2px 6px !important;
  }
}

/* ===== END v4.11.1 ===== */

/* =============================================================================
   MicHelper v4.11.5 - COMPREHENSIVE FIX
   P0: Account Meta, i18n, Microphones
   P1: Buttons pill, Reports, Empty states
   ============================================================================= */

/* ===== A) ACCOUNT META - PROPER CHIPS WITH SPACING ===== */
.account-card {
  position: relative !important;
  padding: 16px 120px 16px 16px !important;
  margin-bottom: 12px !important;
  background: var(--panel, rgba(12, 12, 18, 0.95)) !important;
  border: 1px solid var(--stroke, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 16px !important;
}

.account-card:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.account-meta {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin-top: 12px !important;
  padding: 0 !important;
}

.account-meta .meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  max-width: 300px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.account-meta .meta-label {
  color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 600 !important;
  flex-shrink: 0 !important;
}

/* Light theme */
body.theme-light .account-card {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light .account-card:hover {
  border-color: rgba(0, 0, 0, 0.15) !important;
}

body.theme-light .account-meta .meta-item {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light .account-meta .meta-label {
  color: rgba(0, 0, 0, 0.55) !important;
}

/* ===== ACCOUNT CARD BUTTONS (info, remove, restore) ===== */
.account-info-btn,
.account-remove-btn,
.account-restore-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--muted, rgba(255,255,255,0.7)) !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
}

.account-info-btn { right: 80px !important; }
.account-remove-btn { right: 40px !important; }
.account-restore-btn { right: 40px !important; color: #22c55e !important; }

.account-info-btn:hover,
.account-remove-btn:hover,
.account-restore-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.account-remove-btn:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
}

.account-restore-btn:hover {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

body.theme-light .account-info-btn,
body.theme-light .account-remove-btn,
body.theme-light .account-restore-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--muted) !important;
}

/* ===== ROLE BADGES ===== */
.account-role-badge,
.account-role-tag {
  position: absolute !important;
  top: 16px !important;
  right: 120px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  border-radius: var(--radius-pill) !important;
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  text-transform: capitalize !important;
  white-space: nowrap !important;
}

/* ===== B) TAB SCROLL ARROWS - GUARANTEED VISIBLE ===== */
.admin-tabs-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin-bottom: 16px !important;
  position: relative !important;
}

/* v5.2.80: REMOVED duplicate .admin-tabs-arrow rules that conflicted with overflow detection
   Стрілки контролюються через JS (has-overflow class) + CSS в рядках 2139-2185
   НЕ ДОДАВАЙ сюди display: flex !important для .admin-tabs-arrow! */

/* ===== D) ALL BUTTONS MUST BE PILL ===== */
button,
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger,
.btn-accent,
.btn-data,
.admin-tab-btn,
.subtab-btn,
.hub-tab-btn,
.seg-btn,
.chip-group button,
.lang-btn,
.btn-chip,
.template-btn,
.ai-tool-btn,
.quick-export-btn,
.quick-action-btn,
.settings-nav-btn,
.period-btn,
.task-filter-btn,
.inbox-filter-btn,
.readers-tab-btn,
.script-type-btn,
.quick-routes-btn {
  border-radius: var(--radius-pill) !important;
}

/* Exceptions: icon buttons stay circular */
.account-info-btn,
.account-remove-btn,
.account-restore-btn,
.admin-tabs-arrow {
  border-radius: 50% !important;
}

/* ===== ADMIN TAB BUTTONS - PROPER SIZE ===== */
.admin-tab-btn {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  border: none !important;
}

.admin-tab-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink) !important;
}

.admin-tab-btn.active {
  background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.35) !important;
}

body.theme-light .admin-tab-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* ===== E) REPORTS LAYOUT RESPONSIVE ===== */
.reports-filters,
.filter-bar,
.filter-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
}

@media (max-width: 768px) {
  .reports-filters,
  .filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .reports-filters > *,
  .filter-bar > * {
    width: 100% !important;
  }
}

/* ===== F) EMPTY STATES - SENSIBLE HEIGHT ===== */
.empty-state,
.no-data,
.placeholder-box {
  min-height: 120px !important;
  max-height: 250px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  text-align: center !important;
  color: var(--muted) !important;
}

.empty-state-icon {
  font-size: 32px !important;
  margin-bottom: 12px !important;
  opacity: 0.5 !important;
}

/* ===== CHIP GROUP - SEPARATE PILLS ===== */
.chip-group,
.segmented-pill,
.segmented {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.chip-group button,
.seg-btn,
.btn-chip {
  height: 36px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--muted) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.chip-group button.active,
.chip-group button.is-active,
.seg-btn.active,
.btn-chip.active {
  background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

body.theme-light .chip-group button,
body.theme-light .seg-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: var(--muted) !important;
}

/* ===== WELCOME OVERLAY - BLOCKS EVERYTHING ===== */
#welcomeOverlay,
.welcome-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
  background: rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: blur(10px) !important;
}

/* Light theme: light overlay + white card for welcome/consent */
body.theme-light #welcomeOverlay,
body.theme-light .welcome-overlay {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(12px) !important;
}

body.theme-light #welcomeOverlay .welcome-glass {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #1e2332 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

body.theme-light #welcomeOverlay .welcome-name {
  color: #2962ff !important;
}

body.theme-light #welcomeOverlay .consent-check {
  color: #1e2332 !important;
}

body.theme-light #welcomeOverlay .consent-check a {
  color: #2962ff !important;
}

body.theme-light #welcomeOverlay .consent-check .checkmark {
  border-color: rgba(0, 0, 0, 0.25) !important;
  background: rgba(0, 0, 0, 0.04) !important;
}
body.theme-light #welcomeOverlay .consent-check input:checked + .checkmark {
  background: #ffffff !important;
  border-color: #2962ff !important;
  box-shadow: 0 0 0 2px rgba(41, 98, 255, 0.18) !important;
}
body.theme-light #welcomeOverlay .consent-check input:checked + .checkmark::after {
  color: #2962ff !important;
  text-shadow: none !important;
}

body.theme-light #welcomeOverlay .enter-btn {
  background: linear-gradient(135deg, #4f8bff, #2962ff) !important;
  color: #fff !important;
}

#welcomeOverlay.hidden,
.welcome-overlay.hidden {
  display: none !important;
  pointer-events: none !important;
}

body.welcome-lock {
  overflow: hidden !important;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 640px) {
  .account-card {
    padding-right: 90px !important;
  }
  
  .account-meta .meta-item {
    max-width: 200px !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
  
  .account-role-badge {
    right: 90px !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
  
  .account-info-btn { right: 55px !important; width: 30px !important; height: 30px !important; }
  .account-remove-btn,
  .account-restore-btn { right: 16px !important; width: 30px !important; height: 30px !important; }
}

/* ===== END v4.11.5 ===== */

/* =============================================================================
   v4.11.6 - UI POLISH: AI Tools, Toggle Switch, Break Policy
   ============================================================================= */

/* ===== TOGGLE SWITCH (replaces checkbox) ===== */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch .toggle-track {
  position: relative;
  width: 44px;
  height: 24px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  transition: all 200ms ease;
}

.toggle-switch .toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: all 200ms ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-track {
  background: #34c759;
}

.toggle-switch input:checked + .toggle-track .toggle-thumb {
  left: 22px;
}

.toggle-switch .toggle-label {
  font-size: 14px;
  color: var(--ink, #f8f8fc);
}

body.theme-light .toggle-switch .toggle-track {
  background: rgba(0, 0, 0, 0.15);
}

body.theme-light .toggle-switch .toggle-thumb {
  background: #fff;
}

/* ===== AI TOOLS GRID - PROFESSIONAL CARDS ===== */
.ai-tools-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 16px !important;
  margin-top: 16px !important;
}

.ai-tool-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 20px 16px !important;
  min-height: 110px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  color: var(--ink, #f8f8fc) !important;
  cursor: pointer !important;
  transition: all 180ms ease !important;
  text-align: center !important;
}

.ai-tool-btn:hover {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.2) !important;
}

.ai-tool-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

.ai-tool-btn .ai-tool-icon {
  font-size: 28px !important;
  line-height: 1 !important;
  opacity: 0.95 !important;
}

.ai-tool-btn .ai-tool-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  opacity: 0.9 !important;
}

.ai-tool-btn .ai-tool-desc {
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  opacity: 0.6 !important;
  margin-top: 2px !important;
}

body.theme-light .ai-tool-btn {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light .ai-tool-btn:hover {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
}

/* ===== BREAK POLICY - ADMIN STYLE FORM ===== */
.break-policy-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 20px;
}

.break-policy-section h4 {
  margin: 0 0 16px 0;
  font-size: 15px;
  font-weight: 600;
}

.break-policy-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  align-items: center;
}

.break-policy-form .form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.break-policy-form .form-row label {
  font-size: 13px;
  color: var(--muted, rgba(255,255,255,0.7));
  flex: 1;
}

.break-policy-form .form-row input {
  width: 80px !important;
  text-align: center;
}

.break-policy-form .toggle-switch {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 8px;
}

.break-policy-form .btn-primary {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 8px;
}

body.theme-light .break-policy-section {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

/* ===== UNIFIED INPUT RADIUS ===== */
input.input,
select.input,
textarea.input,
.input {
  border-radius: 10px !important;
}

/* ===== FIX: Checkbox label to toggle (hide red checkbox) ===== */
.checkbox-label input[type="checkbox"] {
  accent-color: #3b82f6 !important;
}

@media (max-width: 640px) {
  .ai-tools-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .break-policy-form {
    grid-template-columns: 1fr;
  }
}

/* ===== END v4.11.6 ===== */

/* =============================================================================
   v4.11.7 - DESIGN SYSTEM ENFORCEMENT & CLEANUP
   ============================================================================= */

/* ===== CONSISTENT BUTTON STYLES ===== */
button,
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-ghost,
.btn-accent {
  min-height: var(--control-h, 44px) !important;
  padding: 10px 20px !important;
  border-radius: var(--radius-pill, 9999px) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: all 180ms ease !important;
}

/* Small buttons */
.btn-sm,
button.btn-sm {
  min-height: 36px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
}

/* Icon buttons - keep circular */
.account-info-btn,
.account-remove-btn,
.account-restore-btn,
.admin-tabs-arrow {
  min-height: auto !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

/* ===== CONSISTENT INPUT/SELECT STYLES ===== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input.input,
select,
select.input,
textarea,
textarea.input {
  min-height: var(--control-h, 44px) !important;
  padding: 10px 16px !important;
  border-radius: var(--radius-control, 12px) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--ink, #f8f8fc) !important;
  font-size: 14px !important;
  transition: all 150ms ease !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--accent, #3b82f6) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

textarea {
  min-height: 100px !important;
  resize: vertical !important;
}

body.theme-light input[type="text"],
body.theme-light input[type="email"],
body.theme-light input[type="password"],
body.theme-light input[type="number"],
body.theme-light input.input,
body.theme-light select,
body.theme-light textarea {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--ink) !important;
}

/* ===== CONSISTENT CARD STYLES ===== */
.card,
.admin-block,
.admin-card {
  border-radius: var(--radius-card, 24px) !important;
}

/* ===== EMPTY STATES ===== */
.empty-state,
.no-data-state,
[data-empty-state] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  min-height: 150px;
  max-height: 300px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-md);
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state-text {
  font-size: 14px;
  max-width: 280px;
  line-height: 1.5;
}

/* Chart empty state override */
.chart-container:empty,
canvas:empty {
  display: none !important;
}

/* ===== CUSTOM CHECKBOX (styled) ===== */
.styled-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.styled-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  min-height: 22px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
  cursor: pointer;
  transition: all 150ms ease;
  position: relative;
}

.styled-checkbox input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
  border-color: #3b82f6 !important;
}

.styled-checkbox input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.styled-checkbox input[type="checkbox"]:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

body.theme-light .styled-checkbox input[type="checkbox"] {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

/* ===== CHECKBOX LABEL FIX ===== */
.checkbox-label input[type="checkbox"] {
  accent-color: #3b82f6 !important;
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
}

/* ===== FILTER BAR RESPONSIVE ===== */
.filter-bar,
.filters-row,
.kpi-filters,
.analytics-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
}

@media (max-width: 768px) {
  .filter-bar,
  .filters-row,
  .kpi-filters,
  .analytics-filters {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .filter-bar button,
  .filters-row button {
    width: 100% !important;
  }
}

/* ===== MAX WIDTH CONTAINER (desktop: wide; mobile: full) ===== */
.app-wrapper,
#appSection {
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) {
  .app-wrapper,
  #appSection {
    max-width: min(1680px, 96vw);
  }
}
/* Ultra-wide displays (4K / 8K TVs and monitors): the fixed 1680px cap left the
   whole admin panel marooned in the middle with huge empty side gaps, so the
   sidebar looked "detached" from the left edge. Widen the cap progressively so
   the layout uses the screen and the sidebar hugs the left. */
@media (min-width: 1800px) {
  .app-wrapper,
  #appSection {
    max-width: min(2400px, 95vw);
  }
}
@media (min-width: 3000px) {
  .app-wrapper,
  #appSection {
    max-width: 95vw;
  }
}

/* v2.4.9: Desktop — фіксована висота viewport + скрол лише в #appScrollRoot */
@media (min-width: 769px) {
  html, body {
    height: 100% !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }
  body {
    display: flex !important;
    flex-direction: column !important;
  }
  .app-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  main:not(#appScrollRoot),
  .main-content:not(#appScrollRoot),
  #appSection,
  .app-main {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
  }
  /* Єдиний скрол на десктопі — #appScrollRoot */
  #appScrollRoot,
  #appScrollRoot.main-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
    flex: 1 1 0 !important;
  }
  #adminPanel,
  .admin-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
  }
}

/* ===== SUPPORT CARD - ENSURE PROPER POSITIONING ===== */
#supportCard.hidden {
  display: none !important;
}

/* ===== END v4.11.7 ===== */

/* =============================================================================
   v4.11.8 - FINAL DESIGN SYSTEM + SETTINGS FIX
   ============================================================================= */

/* ===== SETTINGS NAV - CONSISTENT PILLS ===== */
.settings-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 0 !important;
  margin-bottom: 24px !important;
  background: transparent !important;
  border: none !important;
}

.settings-nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 42px !important;
  padding: 0 18px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius-pill) !important;
  color: var(--muted, rgba(255,255,255,0.7)) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 180ms ease !important;
  white-space: nowrap !important;
}

.settings-nav-btn svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  opacity: 0.7 !important;
}

.settings-nav-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: var(--ink, #f8f8fc) !important;
}

.settings-nav-btn:hover svg {
  opacity: 1 !important;
}

.settings-nav-btn.active {
  background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

.settings-nav-btn.active svg {
  opacity: 1 !important;
}

body.theme-light .settings-nav-btn {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: var(--muted) !important;
}

body.theme-light .settings-nav-btn:hover {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* ===== SETTINGS FORM SPACING ===== */
.settings-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.settings-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.settings-row label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
}

.settings-card {
  padding: 24px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  margin-bottom: 16px !important;
}

/* ===== PROFILE HEADER ===== */
.profile-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.profile-avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.profile-name {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

.profile-role {
  font-size: 13px !important;
  color: var(--muted) !important;
  margin-top: 4px !important;
}

/* ===== UNIVERSAL PILL ENFORCEMENT ===== */
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-ghost,
.btn-accent,
.btn-chip,
.chip,
.admin-tab-btn,
.subtab-btn,
.seg-btn,
.lang-btn,
.quick-export-btn,
.period-btn,
.hub-tab-btn,
.script-type-btn {
  border-radius: var(--radius-pill) !important;
}

/* ===== SUBTAB BUTTONS FIX ===== */
.subtab-btn {
  height: 38px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--muted) !important;
  border-radius: var(--radius-pill) !important;
}

.subtab-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.subtab-btn.active {
  background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ===== EMPTY STATE FIX ===== */
.hub-empty {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 120px !important;
  max-height: 200px !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  text-align: center !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 12px !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
}

/* ===== SECTION HEADER ===== */
.section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.section-header h4 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.section-actions {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* ===== FILTERS ROW ===== */
.heatmap-filters,
.filters-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
  align-items: center !important;
}

/* ===== INTEL SUBTABS ===== */
.intel-subtabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .settings-nav {
    flex-direction: column !important;
  }
  
  .settings-nav-btn {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  
  .profile-header {
    flex-direction: column !important;
    text-align: center !important;
  }
}

/* ===== END v4.11.8 ===== */

/* =============================================================================
   v4.11.9 - FINAL DESIGN SYSTEM ENFORCEMENT
   Complete token-based styling for premium UI consistency
   ============================================================================= */

/* v5.2.63: Tokens consolidated to main :root block */

/* ===== B) UNIVERSAL PILL ENFORCEMENT ===== */
/* Every interactive control MUST be pill-shaped */
button:not(.modal-close-btn),
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-ghost,
.btn-accent,
.btn-chip,
.btn-sm,
.chip,
.tag,
.badge,
.admin-tab-btn,
.subtab-btn,
.hub-tab-btn,
.seg-btn,
.lang-btn,
.period-btn,
.quick-export-btn,
.settings-nav-btn,
.template-btn,
.script-type-btn,
.ai-tool-btn,
.filter-chip,
.status-chip {
  border-radius: var(--radius-pill, 9999px) !important;
}

/* ===== C) UNIFIED INPUT/SELECT STYLING ===== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input.input,
select,
select.input,
textarea,
textarea.input,
.input {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  min-height: var(--control-h, 44px) !important;
  padding: 10px 16px !important;
  border-radius: var(--radius-control, 12px) !important;
  background: var(--bg-card-dark, rgba(255, 255, 255, 0.04)) !important;
  border: 1px solid var(--border-soft-dark, rgba(255, 255, 255, 0.1)) !important;
  color: var(--text-primary-dark, #f8f8fc) !important;
  font-size: 14px !important;
  font-family: inherit !important;
  transition: all 150ms ease !important;
  outline: none !important;
}

/* Select arrow fix */
select {
  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 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 40px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
}

/* Date input icon fix */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.5);
  cursor: pointer;
}

/* Focus state */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent, #3b82f6) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* Light theme inputs */
body.theme-light input[type="text"],
body.theme-light input[type="email"],
body.theme-light input[type="password"],
body.theme-light input[type="number"],
body.theme-light input[type="tel"],
body.theme-light input[type="date"],
body.theme-light input[type="time"],
body.theme-light input.input,
body.theme-light select,
body.theme-light textarea {
  background: var(--bg-card-light, rgba(0, 0, 0, 0.03)) !important;
  border-color: var(--border-soft-light, rgba(0, 0, 0, 0.1)) !important;
  color: var(--text-primary-light, #111) !important;
}

body.theme-light select {
  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(0,0,0,0.5)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  /* v10.3.1: the light-theme rules re-declared background-image without
     re-declaring background-repeat/position, and the shorthand `background`
     above resets them — so the 12px chevron tiled across the whole control
     and the filter bar rendered as a field of hatching. Dark theme was fine
     because its rules pin all three. */
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 12px !important;
}

body.theme-light input[type="date"]::-webkit-calendar-picker-indicator {
  filter: opacity(0.5);
}

/* ===== D) BUTTON SYSTEM ===== */
.btn,
button.btn-primary,
button.btn-secondary,
button.btn-danger,
button.btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: var(--control-h, 44px) !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: var(--radius-pill, 9999px) !important;
  cursor: pointer !important;
  transition: all 180ms ease !important;
  white-space: nowrap !important;
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
  border: none !important;
  color: #fff !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

.btn-secondary {
  background: var(--bg-card-dark, rgba(255, 255, 255, 0.04)) !important;
  border: 1px solid var(--border-soft-dark, rgba(255, 255, 255, 0.1)) !important;
  color: var(--text-primary-dark, #f8f8fc) !important;
}

.btn-secondary:hover {
  background: var(--bg-hover-dark, rgba(255, 255, 255, 0.08)) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.btn-ghost {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-secondary-dark, rgba(255, 255, 255, 0.7)) !important;
}

.btn-ghost:hover {
  background: var(--bg-hover-dark, rgba(255, 255, 255, 0.08)) !important;
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444, #f87171) !important;
  border: none !important;
  color: #fff !important;
}

.btn-danger:hover {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
}

/* Small button */
.btn-sm {
  min-height: var(--control-h-sm, 36px) !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
}

/* Light theme buttons */
body.theme-light .btn-secondary {
  background: var(--bg-card-light, rgba(0, 0, 0, 0.03)) !important;
  border-color: var(--border-soft-light, rgba(0, 0, 0, 0.1)) !important;
  color: var(--text-primary-light, #111) !important;
}

body.theme-light .btn-secondary:hover {
  background: var(--bg-hover-light, rgba(0, 0, 0, 0.05)) !important;
}

body.theme-light .btn-ghost {
  color: var(--text-secondary-light, rgba(0, 0, 0, 0.65)) !important;
}

body.theme-light .btn-ghost:hover {
  background: var(--bg-hover-light, rgba(0, 0, 0, 0.05)) !important;
}

/* ===== E) CARD SYSTEM ===== */
.card,
.admin-block,
.admin-card,
.settings-card,
.stat-card {
  background: var(--panel, rgba(12, 12, 18, 0.95)) !important;
  border: 1px solid var(--stroke, rgba(255, 255, 255, 0.08)) !important;
  border-radius: var(--radius-card, 24px) !important;
  padding: var(--gap-4, 24px) !important;
}

body.theme-light .card,
body.theme-light .admin-block,
body.theme-light .admin-card,
body.theme-light .settings-card,
body.theme-light .stat-card {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ===== F) CHIP/TAG SYSTEM ===== */
.chip,
.tag,
.badge,
.btn-chip,
.filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: var(--control-h-sm, 36px) !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: var(--bg-card-dark, rgba(255, 255, 255, 0.04)) !important;
  border: 1px solid var(--border-soft-dark, rgba(255, 255, 255, 0.1)) !important;
  border-radius: var(--radius-pill, 9999px) !important;
  color: var(--text-secondary-dark, rgba(255, 255, 255, 0.7)) !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
}

.chip:hover,
.btn-chip:hover,
.filter-chip:hover {
  background: var(--bg-hover-dark, rgba(255, 255, 255, 0.08)) !important;
  color: var(--text-primary-dark, #f8f8fc) !important;
}

.chip.active,
.chip.is-active,
.btn-chip.active,
.btn-chip.is-active,
.filter-chip.active {
  background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
  border-color: transparent !important;
  color: #fff !important;
}

body.theme-light .chip,
body.theme-light .btn-chip,
body.theme-light .filter-chip {
  background: var(--bg-card-light, rgba(0, 0, 0, 0.03)) !important;
  border-color: var(--border-soft-light, rgba(0, 0, 0, 0.1)) !important;
  color: var(--text-secondary-light, rgba(0, 0, 0, 0.65)) !important;
}

/* ===== G) TAB SYSTEM ===== */
.admin-tab-btn,
.subtab-btn,
.hub-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: var(--control-h, 44px) !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-pill, 9999px) !important;
  color: var(--text-secondary-dark, rgba(255, 255, 255, 0.7)) !important;
  cursor: pointer !important;
  transition: all 180ms ease !important;
  white-space: nowrap !important;
}

.admin-tab-btn:hover,
.subtab-btn:hover,
.hub-tab-btn:hover {
  background: var(--bg-hover-dark, rgba(255, 255, 255, 0.08)) !important;
  color: var(--text-primary-dark, #f8f8fc) !important;
}

.admin-tab-btn.active,
.subtab-btn.active,
.hub-tab-btn.active {
  background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25) !important;
}

body.theme-light .admin-tab-btn,
body.theme-light .subtab-btn,
body.theme-light .hub-tab-btn {
  color: var(--text-secondary-light, rgba(0, 0, 0, 0.65)) !important;
}

body.theme-light .admin-tab-btn:hover,
body.theme-light .subtab-btn:hover {
  background: var(--bg-hover-light, rgba(0, 0, 0, 0.05)) !important;
  color: var(--text-primary-light, #111) !important;
}

/* ===== H) FORM FIELD LAYOUT ===== */
.field,
.form-row,
.settings-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: var(--gap-3, 16px) !important;
}

.field label,
.form-row label,
.settings-row label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-secondary-dark, rgba(255, 255, 255, 0.7)) !important;
}

body.theme-light .field label,
body.theme-light .form-row label,
body.theme-light .settings-row label {
  color: var(--text-secondary-light, rgba(0, 0, 0, 0.65)) !important;
}

/* ===== I) DIVIDER ===== */
.divider,
hr {
  border: none !important;
  height: 1px !important;
  background: var(--border-soft-dark, rgba(255, 255, 255, 0.1)) !important;
  margin: var(--gap-3, 16px) 0 !important;
}

body.theme-light .divider,
body.theme-light hr {
  background: var(--border-soft-light, rgba(0, 0, 0, 0.1)) !important;
}

/* ===== J) MODAL SYSTEM ===== */
.modal-content,
.modal-body {
  border-radius: var(--radius-card, 24px) !important;
}

.modal-close-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--bg-card-dark, rgba(255, 255, 255, 0.04)) !important;
  border: 1px solid var(--border-soft-dark, rgba(255, 255, 255, 0.1)) !important;
}

/* ===== K) ACCESSIBILITY: FOCUS RINGS ===== */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent, #3b82f6) !important;
  outline-offset: 2px !important;
}

/* ===== L) ICON BUTTONS (circular) ===== */
.icon-btn,
.account-info-btn,
.account-remove-btn,
.account-restore-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* v5.2.80: .admin-tabs-arrow removed from above - controlled by has-overflow class */

/* ===== M) EMPTY STATE ===== */
.empty-state,
.hub-empty,
[data-empty] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--gap-4, 24px) !important;
  min-height: 120px !important;
  max-height: 250px !important;
  text-align: center !important;
  color: var(--text-secondary-dark, rgba(255, 255, 255, 0.7)) !important;
  background: var(--bg-card-dark, rgba(255, 255, 255, 0.02)) !important;
  border: 1px dashed var(--border-soft-dark, rgba(255, 255, 255, 0.1)) !important;
  border-radius: var(--radius-control, 12px) !important;
}

body.theme-light .empty-state,
body.theme-light .hub-empty {
  color: var(--text-secondary-light, rgba(0, 0, 0, 0.65)) !important;
  background: var(--bg-card-light, rgba(0, 0, 0, 0.02)) !important;
  border-color: var(--border-soft-light, rgba(0, 0, 0, 0.1)) !important;
}

/* Fix: td.hub-empty must use table-cell, not flex, to honor colspan */
td.hub-empty {
  display: table-cell !important;
  flex-direction: unset !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* ===== N) CHECKBOX ACCENT FIX ===== */
input[type="checkbox"] {
  accent-color: var(--accent, #3b82f6) !important;
}

/* ===== O) PERFORMANCE: REDUCE HEAVY SHADOWS ===== */
.admin-card,
.card {
  box-shadow: none !important;
}

body.theme-light .admin-card,
body.theme-light .card {
  box-shadow: none !important;
}

/* ===== END v4.11.9 ===== */

/* =============================================================================
   v4.12.0 — CRITICAL FIX: Account Meta Spacing
   ============================================================================= */

/* Force account-meta to display as flex with proper gaps */
.account-meta,
div.account-meta,
.account-card .account-meta,
#accountsList .account-meta,
html body .account-meta {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 14px !important;
  padding: 0 !important;
  align-items: flex-start !important;
}

/* Each meta-item must be a separate chip */
.meta-item,
span.meta-item,
.account-meta .meta-item,
.account-meta > span,
html body .account-meta .meta-item,
html body .account-meta > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 14px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  max-width: 280px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex-shrink: 0 !important;
}

/* Meta label styling */
.meta-label,
span.meta-label,
.account-meta .meta-label,
html body .account-meta .meta-label {
  color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 600 !important;
  flex-shrink: 0 !important;
}

/* Light theme meta items */
body.theme-light .account-meta .meta-item,
body.theme-light .account-meta > span,
body.theme-light .meta-item {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

body.theme-light .meta-label,
body.theme-light .account-meta .meta-label {
  color: rgba(0, 0, 0, 0.55) !important;
}

/* Account card layout fix */
.account-card,
div.account-card,
#accountsList .account-card,
html body .account-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 18px !important;
  padding-right: 130px !important;
  margin-bottom: 14px !important;
  background: rgba(18, 18, 24, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
}

body.theme-light .account-card,
body.theme-light div.account-card {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Account name and main line */
.account-main-line,
.account-card .account-main-line {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.account-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ink, #f8f8fc) !important;
}

/* Role badge positioning */
.account-role-tag,
.account-role-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: rgba(59, 130, 246, 0.15) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  border-radius: var(--radius-pill) !important;
  color: #60a5fa !important;
  white-space: nowrap !important;
}

/* Action buttons in account card */
.account-info-btn,
.account-remove-btn,
.account-restore-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
  font-size: 14px !important;
}

.account-info-btn { right: 90px !important; }
.account-remove-btn { right: 48px !important; }
.account-restore-btn { right: 48px !important; color: #22c55e !important; }

.account-info-btn:hover,
.account-remove-btn:hover,
.account-restore-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.account-remove-btn:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
}

body.theme-light .account-info-btn,
body.theme-light .account-remove-btn,
body.theme-light .account-restore-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: rgba(0, 0, 0, 0.6) !important;
}

/* Remove leftover Умови prefix from headings */
/* This is handled in HTML, but ensure no CSS shows it */

/* ===== END v4.12.0 ===== */

/* =============================================================================
   v4.12.2 - CRITICAL FIX: Force visibility of arrows and meta items
   ============================================================================= */

/* v5.2.80: REMOVED "FORCE TAB ARROWS VISIBLE" block - arrows should be controlled by JS overflow detection
   Original block was forcing display:flex!important which broke the has-overflow logic.
   Arrows are now shown/hidden via .has-overflow class in CSS lines 2139-2185 */

/* FORCE ACCOUNT META FLEX */
html body .account-meta,
html body div.account-meta,
#accountsList .account-meta {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;
  padding: 0 !important;
}

/* FORCE META ITEM CHIPS */
html body .account-meta .meta-item,
html body .account-meta > span,
html body .meta-item,
#accountsList .meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  max-width: 280px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* FORCE ACCOUNT CARD LAYOUT (LEGACY — non-compact cards only).
   v7.8.0 BUGFIX: exclude empty-state-cta.
   v7.9.4 BUGFIX: also exclude .account-card-compact — compact cards are a
   row-flex layout with in-flow controls and MUST NOT inherit this legacy
   column layout with 140px reserved right padding. */
html body .account-card:not(.account-card-compact),
#accountsList .account-card:not(.account-card-compact),
#accountsList > div:not(.empty-state-cta):not(.empty-state):not([class*="empty"]):not(.account-card-compact) {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 16px !important;
  padding-right: 140px !important;
  margin-bottom: 12px !important;
  background: rgba(18, 18, 26, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
}

/* FORCE ACTION BUTTONS POSITIONING (LEGACY — non-compact cards only).
   v7.9.4: compact-card buttons are in-flow inside .account-card-controls. */
html body .account-card:not(.account-card-compact) .account-info-btn,
html body .account-card:not(.account-card-compact) .account-remove-btn,
html body .account-card:not(.account-card-compact) .account-restore-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  z-index: 5 !important;
}

html body .account-card:not(.account-card-compact) .account-info-btn { right: 95px !important; }
html body .account-card:not(.account-card-compact) .account-remove-btn { right: 52px !important; }
html body .account-card:not(.account-card-compact) .account-restore-btn { right: 52px !important; color: #22c55e !important; }

/* Light theme overrides */
body.theme-light .account-card,
body.theme-light #accountsList > div {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

body.theme-light .meta-item,
body.theme-light .account-meta .meta-item {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

body.theme-light .account-info-btn,
body.theme-light .account-remove-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: rgba(0, 0, 0, 0.7) !important;
}

/* ===== END v4.12.2 ===== */

/* =============================================================================
   v4.12.3 - FINAL OVERRIDE: PILLS, ARROWS, META
   This block MUST be at the very end to override all previous rules
   ============================================================================= */

/* ---------- UNIVERSAL PILL BUTTONS ---------- */
html body button,
html body .btn,
html body .btn-primary,
html body .btn-secondary,
html body .btn-ghost,
html body .btn-danger,
html body .btn-accent,
html body .btn-sm,
html body .btn-chip,
html body .chip,
html body .tag,
html body .enter-btn,
html body .mini-btn,
html body .admin-tab-btn,
html body .subtab-btn,
html body .hub-tab-btn,
html body .seg-btn,
html body .lang-btn,
html body .period-btn,
html body .quick-export-btn,
html body .settings-nav-btn,
html body .template-btn,
html body .script-type-btn,
html body .ai-tool-btn,
html body .filter-chip,
html body [class*="btn"] {
  border-radius: var(--radius-pill) !important;
}

/* Exclude specific circular buttons */
html body .modal-close-btn,
html body .account-info-btn,
html body .account-remove-btn,
html body .account-restore-btn,
html body .admin-tabs-arrow {
  border-radius: 50% !important;
}

/* v5.2.80: REMOVED "TAB SCROLL ARROWS - FORCE VISIBLE" block - see lines 2139-2185 for proper overflow-based visibility */

/* ---------- ACCOUNT CARDS (LEGACY — non-compact only, v7.9.4) ---------- */
html body .account-card:not(.account-card-compact),
html body #accountsList .account-card:not(.account-card-compact),
html body #accountsList > div[class*="account"]:not(.account-card-compact) {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 18px 150px 18px 18px !important;
  margin-bottom: 14px !important;
  background: rgba(18, 20, 28, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
}

/* ---------- ACCOUNT META - FLEX WRAP ---------- */
html body .account-meta,
html body div.account-meta,
html body #accountsList .account-meta {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: flex-start !important;
}

/* ---------- META ITEMS - CHIPS ---------- */
html body .meta-item,
html body span.meta-item,
html body .account-meta .meta-item,
html body .account-meta > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 14px !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  max-width: 300px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body .meta-label,
html body span.meta-label {
  color: rgba(255, 255, 255, 0.5) !important;
  font-weight: 600 !important;
}

/* ---------- ACCOUNT ACTION BUTTONS ---------- */
html body .account-info-btn,
html body .account-remove-btn,
html body .account-restore-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  z-index: 10 !important;
}

html body .account-info-btn { right: 100px !important; }
html body .account-remove-btn { right: 55px !important; }
html body .account-restore-btn { right: 55px !important; }

html body .account-info-btn:hover {
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #60a5fa !important;
}

html body .account-remove-btn:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
}

html body .account-restore-btn {
  color: #4ade80 !important;
}

html body .account-restore-btn:hover {
  background: rgba(34, 197, 94, 0.2) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
}

/* ---------- INPUTS & SELECTS ---------- */
html body input[type="text"],
html body input[type="email"],
html body input[type="password"],
html body input[type="number"],
html body input[type="tel"],
html body input[type="url"],
html body input[type="search"],
html body input[type="date"],
html body input[type="time"],
html body input.input,
html body select,
html body select.input,
html body textarea {
  border-radius: 14px !important;
  min-height: 44px !important;
  padding: 10px 16px !important;
}

/* ---------- LIGHT THEME ---------- */
body.theme-light .account-card,
body.theme-light #accountsList .account-card,
body.theme-light #accountsList > div {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light .meta-item,
body.theme-light .account-meta .meta-item,
body.theme-light .account-meta > span {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

body.theme-light .meta-label {
  color: rgba(0, 0, 0, 0.5) !important;
}

body.theme-light .account-info-btn,
body.theme-light .account-remove-btn,
body.theme-light .account-restore-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: rgba(0, 0, 0, 0.7) !important;
}

body.theme-light .admin-tabs-arrow,
body.theme-light #tabsArrowLeft,
body.theme-light #tabsArrowRight {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: #333 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* ===== END v4.12.3 FINAL ===== */

/* =============================================================================
   v4.12.5 - EMERGENCY FIX: Force arrow visibility with maximum priority
   ============================================================================= */

/* Nuclear option: force ALL styles for tab arrows */
#tabsArrowLeft,
#tabsArrowRight,
button#tabsArrowLeft,
button#tabsArrowRight,
.admin-tabs-arrow-left,
.admin-tabs-arrow-right,
html body #tabsArrowLeft,
html body #tabsArrowRight,
html body button#tabsArrowLeft,
html body button#tabsArrowRight {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: linear-gradient(145deg, #1e2740, #2a3550) !important;
  border: 2px solid #4488ff !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  z-index: 9999 !important;
  position: relative !important;
  box-shadow: 0 4px 15px rgba(0, 100, 255, 0.3) !important;
  overflow: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

#tabsArrowLeft svg,
#tabsArrowRight svg,
button#tabsArrowLeft svg,
button#tabsArrowRight svg,
html body #tabsArrowLeft svg,
html body #tabsArrowRight svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 24px !important;
  height: 24px !important;
  stroke: #60a5fa !important;
  stroke-width: 3 !important;
  fill: none !important;
}

#tabsArrowLeft:hover,
#tabsArrowRight:hover,
button#tabsArrowLeft:hover,
button#tabsArrowRight:hover {
  background: linear-gradient(145deg, #3b82f6, #2563eb) !important;
  border-color: #60a5fa !important;
  transform: scale(1.08) !important;
  box-shadow: 0 6px 25px rgba(59, 130, 246, 0.5) !important;
}

#tabsArrowLeft:hover svg,
#tabsArrowRight:hover svg {
  stroke: #ffffff !important;
}

/* Admin tabs wrapper */
.admin-tabs-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  position: relative !important;
  padding: 4px 0 !important;
}

/* ===== END v4.12.5 EMERGENCY FIX ===== */

/* =============================================================================
   v4.12.6 - ACCOUNT CARDS & MODAL FIX
   ============================================================================= */

/* Account details modal */
#accountDetailsOverlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10000 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#accountDetailsOverlay.hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#accountDetailsOverlay .modal {
  background: linear-gradient(145deg, #1a1d2e, #151825) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 24px !important;
  max-width: 700px !important;
  width: 95% !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5) !important;
}

/* Account card hover states */
.account-card:hover .account-info-btn,
.account-card:hover .account-remove-btn,
.account-card:hover .account-restore-btn {
  opacity: 1 !important;
}

/* Account action buttons base */
.account-info-btn svg,
.account-remove-btn svg,
.account-restore-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
}

/* Role badge improvements */
.account-role-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 14px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1)) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  border-radius: var(--radius-pill) !important;
  color: #60a5fa !important;
  text-transform: capitalize !important;
}

/* Meta items chip improvements */
.meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  transition: all 0.15s ease !important;
}

.meta-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.meta-label {
  color: rgba(255, 255, 255, 0.5) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

/* ===== END v4.12.6 ===== */

/* =============================================================================
   v4.12.7 - PREMIUM ACCOUNT MODAL REDESIGN
   ============================================================================= */

/* Modal Overlay */
#accountDetailsOverlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10000 !important;
  padding: 20px !important;
}

#accountDetailsOverlay.hidden {
  display: none !important;
}

/* Modal Container */
.account-modal {
  background: linear-gradient(165deg, #1a1d2e 0%, #12141c 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  width: 100% !important;
  max-width: 800px !important;
  max-height: 90vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 
    0 25px 100px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Modal Header */
.account-modal .modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 24px 28px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.modal-header-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.account-modal .modal-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #f0f4ff !important;
  margin: 0 !important;
}

.modal-subtitle-role {
  font-size: 13px !important;
  color: #60a5fa !important;
  font-weight: 500 !important;
}

.account-modal .modal-close-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.account-modal .modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}

/* Modal Content */
.modal-content {
  padding: 0 !important;
  overflow-y: auto !important;
  flex: 1 !important;
}

/* Section Styles */
.modal-section {
  padding: 24px 28px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.modal-section:last-child {
  border-bottom: none !important;
}

.section-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 16px !important;
}

.section-title svg {
  color: #60a5fa !important;
}

/* Profile Section */
.profile-section {
  display: flex !important;
  gap: 24px !important;
  align-items: flex-start !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, transparent 100%) !important;
}

.profile-avatar {
  width: 80px !important;
  height: 80px !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05)) !important;
  border: 2px solid rgba(59, 130, 246, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #60a5fa !important;
  flex-shrink: 0 !important;
}

.profile-details {
  flex: 1 !important;
}

/* Modal Info Grid */
.modal-info {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

.info-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 12px 16px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.info-label {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  font-weight: 600 !important;
}

.info-value {
  font-size: 14px !important;
  color: #f0f4ff !important;
  font-weight: 500 !important;
}

.info-value.highlight {
  color: #60a5fa !important;
}

/* =============================================================================
   PREMIUM ACCOUNT INFO MODAL v4.14.3
   ============================================================================= */

/* Info Sections */
.info-section {
  margin-bottom: 20px !important;
}

.info-section-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.info-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

@media (max-width: 600px) {
  .info-grid {
    grid-template-columns: 1fr !important;
  }
}

.info-hint {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.35) !important;
  margin-top: 8px !important;
  font-style: italic !important;
}

/* Role Badges */
.role-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-right: 8px !important;
}

.role-badge.role-seller {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1)) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

.role-badge.role-region {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1)) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.role-badge.role-network,
.role-badge.role-head {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.1)) !important;
  color: #c084fc !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

.role-badge.role-super {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(251, 146, 60, 0.1)) !important;
  color: #fb923c !important;
  border: 1px solid rgba(251, 146, 60, 0.3) !important;
}

/* Status Badges */
.status-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.status-badge.status-active {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
}

.status-badge.status-deleted {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
}

/* Account Action Buttons */
.account-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.action-btn-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1)) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15) !important;
}

.action-btn-pill:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(59, 130, 246, 0.2)) !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
  color: #bfdbfe !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.25) !important;
}

.action-btn-pill.danger {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
}

.action-btn-pill.danger:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #fecaca !important;
}

.action-btn-pill.small {
  padding: 6px 12px !important;
  font-size: 12px !important;
}

.action-btn-pill svg {
  flex-shrink: 0 !important;
}

/* Temp Password Block */
.temp-password-block {
  margin-top: 16px !important;
  padding: 16px !important;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05)) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  border-radius: 16px !important;
}

.temp-password-label {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: 8px !important;
}

.temp-password-value {
  font-family: 'SF Mono', Monaco, Consolas, monospace !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #4ade80 !important;
  letter-spacing: 1px !important;
  padding: 12px 16px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border-radius: 8px !important;
  margin-bottom: 12px !important;
  word-break: break-all !important;
}

.temp-password-warning {
  font-size: 11px !important;
  color: #fbbf24 !important;
  margin-top: 12px !important;
}

/* Credentials Receipt Modal */
.credentials-receipt {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10100 !important;
  padding: 20px !important;
}

.credentials-receipt-card {
  background: linear-gradient(145deg, #1e2235, #181c2a) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 24px !important;
  padding: 32px !important;
  max-width: 420px !important;
  width: 100% !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

.credentials-receipt-header {
  text-align: center !important;
  margin-bottom: 24px !important;
}

.credentials-receipt-icon {
  font-size: 48px !important;
  margin-bottom: 12px !important;
}

.credentials-receipt-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #f0f4ff !important;
  margin-bottom: 4px !important;
}

.credentials-receipt-sub {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

.credentials-receipt-body {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}

.credentials-receipt-row {
  display: flex !important;
  justify-content: space-between !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.credentials-receipt-row:last-child {
  border-bottom: none !important;
}

.credentials-receipt-label {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  text-transform: uppercase !important;
}

.credentials-receipt-value {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #f0f4ff !important;
}

.credentials-receipt-value.password {
  font-family: 'SF Mono', Monaco, Consolas, monospace !important;
  color: #4ade80 !important;
  letter-spacing: 0.5px !important;
}

.credentials-receipt-actions {
  display: flex !important;
  gap: 12px !important;
  flex-direction: column !important;
}

.credentials-receipt-actions button {
  width: 100% !important;
  justify-content: center !important;
}

.credentials-receipt-actions button:first-child {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0.15)) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #86efac !important;
}

.credentials-receipt-actions button:first-child:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.4), rgba(34, 197, 94, 0.25)) !important;
  border-color: rgba(34, 197, 94, 0.6) !important;
  color: #bbf7d0 !important;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.25) !important;
}

/* Locked Field Badge */
.field-locked-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 4px !important;
  margin-left: 8px !important;
  flex-shrink: 0 !important;
  cursor: help !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Ensure label has position relative for badge positioning */
label:has(.field-locked-badge) {
  position: relative !important;
}

label:has(.field-locked-badge) input {
  padding-right: 36px !important;
}

/* Light theme adjustments */
body.theme-light .info-section-title {
  color: rgba(0, 0, 0, 0.5) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light .info-hint {
  color: rgba(0, 0, 0, 0.4) !important;
}

body.theme-light .action-btn-pill {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #1e293b !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

body.theme-light .action-btn-pill:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #1d4ed8 !important;
}

body.theme-light .temp-password-block {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.04)) !important;
}

body.theme-light .temp-password-value {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #16a34a !important;
}

body.theme-light .credentials-receipt-card {
  background: linear-gradient(145deg, #ffffff, #f8fafc) !important;
}

body.theme-light .credentials-receipt-title,
body.theme-light .credentials-receipt-value {
  color: #1e293b !important;
}

/* Quick Stats */
.quick-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}

.stat-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
}

.stat-card:hover {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
  transform: translateY(-2px) !important;
}

.stat-icon {
  font-size: 24px !important;
  margin-bottom: 8px !important;
}

.stat-value {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #f0f4ff !important;
  margin-bottom: 4px !important;
}

.stat-label {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

/* AI Section */
.ai-section {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, transparent 100%) !important;
}

.ai-content {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  border: 1px solid rgba(139, 92, 246, 0.15) !important;
}

.ai-loading {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-style: italic !important;
}

/* Transcripts Section */
.transcripts-section {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, transparent 100%) !important;
}

.transcripts-hint {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-bottom: 16px !important;
}

.transcripts-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* Action Buttons */
.action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.action-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px) !important;
}

.action-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

.action-btn.accent {
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1)) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
}

.action-btn.accent:hover:not(:disabled) {
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.15)) !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2) !important;
}

/* Calendar Section */
.calendar-section {
  padding-top: 20px !important;
}

/* Day Stats Grid */
.day-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

.day-stat-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  text-align: center !important;
}

.day-stat-icon {
  font-size: 20px !important;
  margin-bottom: 6px !important;
}

.day-stat-value {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #f0f4ff !important;
  margin-bottom: 4px !important;
}

.day-stat-label {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2px !important;
}

/* Day Details */
.day-details-box {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  margin-top: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.day-details-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.day-details-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #f0f4ff !important;
}

.day-details-date {
  font-size: 14px !important;
  color: #60a5fa !important;
  font-weight: 500 !important;
}

.day-details-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.day-details-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 12px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}

.day-details-row span:first-child {
  color: rgba(255, 255, 255, 0.6) !important;
}

.day-details-row span:last-child {
  color: #f0f4ff !important;
  font-weight: 600 !important;
}

.day-details-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.day-details-actions .action-btn {
  padding: 8px 14px !important;
  font-size: 12px !important;
}

/* Responsive */
@media (max-width: 768px) {
  .modal-info {
    grid-template-columns: 1fr !important;
  }
  
  .quick-stats-grid,
  .day-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .profile-section {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}

/* ===== END v4.12.7 ===== */

/* =============================================================================
   v4.12.8 - FULL SELLER PROFILE SECTIONS
   ============================================================================= */

/* ========== SECTION TABS ========== */
.section-tabs {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.section-tab {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
}

.section-tab:hover {
  background: rgba(255, 255, 255, 0.1);
}

.section-tab.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.15));
  border-color: rgba(59, 130, 246, 0.4);
  color: #60a5fa;
}

/* ========== PERFORMANCE SECTION ========== */
.performance-section {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, transparent 100%);
}

.performance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.perf-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  transition: all 0.2s ease;
}

.perf-card:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}

.perf-card.highlight {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
  border-color: rgba(34, 197, 94, 0.2);
}

.perf-card.danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
  border-color: rgba(239, 68, 68, 0.2);
}

.perf-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.perf-value {
  font-size: 28px;
  font-weight: 700;
  color: #f0f4ff;
  margin-bottom: 4px;
}

.perf-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* AI Score Block */
.ai-score-block {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.05));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.ai-score-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.ai-score-title {
  font-size: 14px;
  font-weight: 600;
  color: #a78bfa;
}

.ai-score-value {
  font-size: 32px;
  font-weight: 700;
  color: #f0f4ff;
}

.ai-score-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.score-criterion {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  font-size: 12px;
}

.score-criterion-label {
  color: rgba(255, 255, 255, 0.6);
}

.score-criterion-value {
  font-weight: 600;
  color: #f0f4ff;
}

/* Top Issues */
.top-issues-block {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  padding: 14px;
}

.top-issues-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
}

.top-issues-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.issue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  font-size: 13px;
  color: #fca5a5;
}

.no-issues {
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  text-align: center;
  padding: 10px;
}

/* ========== REQUIREMENTS SECTION ========== */
.requirements-section {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, transparent 100%);
}

.req-block {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}

.req-block.danger-block {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.03));
  border: 1px solid rgba(239, 68, 68, 0.15);
}

.req-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.req-block-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.req-progress {
  padding: 4px 10px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #4ade80;
}

.req-violations {
  padding: 4px 10px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #f87171;
}

.req-checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.req-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.15s ease;
}

.req-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.req-item.done {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.req-item.done .req-check {
  color: #4ade80;
}

.req-check {
  font-size: 16px;
  width: 24px;
  text-align: center;
}

.req-text {
  flex: 1;
}

.req-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

/* Stop Words */
.req-stopwords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.stopword-chip {
  padding: 6px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  font-size: 12px;
  color: #fca5a5;
}

.last-violation {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

/* Rules */
.req-rules {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rule-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
}

.rule-number {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.2);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #60a5fa;
  flex-shrink: 0;
}

.rule-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

/* Scoring Weights */
.scoring-weights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.weight-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
}

.weight-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.weight-value {
  font-size: 14px;
  font-weight: 700;
  color: #60a5fa;
}

.weight-value.critical {
  color: #f87171;
}

/* Day Summary */
.day-summary-block {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 14px;
  padding: 16px;
}

.day-summary-title {
  font-size: 14px;
  font-weight: 600;
  color: #60a5fa;
  margin-bottom: 12px;
}

.day-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.summary-item {
  text-align: center;
}

.summary-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}

.summary-value {
  font-size: 18px;
  font-weight: 700;
  color: #f0f4ff;
}

.summary-value.success {
  color: #4ade80;
}

.summary-value.warning {
  color: #fbbf24;
}

.summary-value.danger {
  color: #f87171;
}

/* ========== KPI SECTION ========== */
.kpi-section {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.05) 0%, transparent 100%);
}

.kpi-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kpi-item {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 14px;
  padding: 16px;
}

.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.kpi-name {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.kpi-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kpi-trend.up {
  color: #4ade80;
}

.kpi-trend.down {
  color: #f87171;
}

.kpi-progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.kpi-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.kpi-values {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.kpi-plan {
  color: rgba(255, 255, 255, 0.5);
}

.kpi-fact {
  font-weight: 600;
  color: #f0f4ff;
}

.kpi-percent {
  color: #60a5fa;
  font-weight: 600;
}

/* ========== MESSAGES SECTION ========== */
.messages-section {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, transparent 100%);
}

.unread-badge {
  padding: 2px 8px;
  background: #ef4444;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  margin-left: 8px;
}

.unread-badge:empty {
  display: none;
}

.messages-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 300px;
  overflow-y: auto;
}

.message-item {
  padding: 14px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  border-left: 3px solid #8b5cf6;
}

.message-item.unread {
  background: rgba(139, 92, 246, 0.1);
  border-left-color: #a78bfa;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.message-from {
  font-size: 12px;
  font-weight: 600;
  color: #a78bfa;
}

.message-date {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.message-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.message-priority {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 8px;
}

.message-priority.high {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.message-priority.medium {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.no-messages {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  padding: 20px;
}

/* ========== MOTIVATION SECTION ========== */
.motivation-section {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, transparent 100%);
}

.motivation-balance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.balance-card {
  padding: 16px;
  border-radius: 14px;
  text-align: center;
}

.balance-card.bonus {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.balance-card.penalty {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.balance-card.total {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.balance-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}

.balance-value {
  font-size: 24px;
  font-weight: 700;
}

.balance-card.bonus .balance-value {
  color: #4ade80;
}

.balance-card.penalty .balance-value {
  color: #f87171;
}

.balance-card.total .balance-value {
  color: #60a5fa;
}

/* Bonus Progress */
.bonus-progress-block {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}

.bonus-progress-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
}

.bonus-progress-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bonus-progress-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bonus-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bonus-progress-name {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.bonus-progress-reward {
  font-size: 12px;
  font-weight: 600;
  color: #4ade80;
}

.bonus-progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.bonus-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ade80, #22c55e);
  border-radius: 3px;
}

.bonus-progress-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

/* Motivation Rules */
.motivation-rules {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 14px;
  padding: 16px;
}

.rules-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
}

.rules-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.motivation-rule {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
}

.motivation-rule-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.motivation-rule-value {
  font-size: 13px;
  font-weight: 600;
}

.motivation-rule-value.bonus {
  color: #4ade80;
}

.motivation-rule-value.penalty {
  color: #f87171;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .performance-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .day-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .motivation-balance {
    grid-template-columns: 1fr;
  }
  
  .section-tabs {
    display: none;
  }
}

/* ===== END v4.12.8 ===== */

/* =============================================================================
   v4.12.9 - SELLER REQUIREMENTS UI
   ============================================================================= */

/* Requirements Today Card */
#sellerRequirementsTodayCard {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 20px;
}

#sellerRequirementsTodayCard .card-head,
#sellerRequirementsProfileCard .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

#sellerRequirementsTodayCard .card-title,
#sellerRequirementsProfileCard .card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #f0f4ff);
}

.req-today-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  align-items: start;
}

.req-today-metrics {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.req-metric {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  min-width: 80px;
  text-align: center;
}

.req-metric-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary, #f0f4ff);
}

.req-mini-list {
  margin: 10px 0 0;
  padding-left: 20px;
  list-style: disc;
}

.req-mini-item {
  margin: 6px 0;
  font-size: 13px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
}

/* Requirements Profile Card */
#sellerRequirementsProfileCard {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 20px;
}

.req-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
}

.tab-pill {
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tab-pill:hover {
  background: rgba(255, 255, 255, 0.08);
}

.tab-pill.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}

.req-panel {
  min-height: 100px;
}

.req-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  margin-bottom: 10px;
  transition: all 0.15s ease;
}

.req-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.req-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #f0f4ff);
  line-height: 1.4;
}

.req-item-sub {
  font-size: 12px;
  margin-top: 4px;
}

.req-pill {
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.req-pill.ok {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

.req-pill.warn {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}

.req-pill.bad {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}

/* Requirements Modal */
#sellerRequirementsModalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  padding: 20px;
}

#sellerRequirementsModal {
  width: min(700px, 96vw);
  max-height: 85vh;
  overflow-y: auto;
  background: linear-gradient(165deg, #1a1d2e 0%, #12141c 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 24px;
}

#sellerRequirementsModal .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#sellerRequirementsModal .modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary, #f0f4ff);
}

.req-modal-section {
  margin-top: 20px;
}

.req-modal-section .section-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Ensure all buttons are pills */
.btn,
button,
.action-btn,
.tab-pill,
#sellerRequirementsOpenModalBtn,
#sellerRequirementsRefreshBtn,
#sellerRequirementsModalCloseBtn {
  border-radius: var(--radius-pill) !important;
}

/* Card actions */
.card-actions {
  display: flex;
  gap: 8px;
}

/* Muted text */
.muted {
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  font-size: 13px;
}

/* Responsive */
@media (max-width: 640px) {
  .req-today-grid {
    grid-template-columns: 1fr;
  }
  
  .req-today-metrics {
    justify-content: flex-start;
  }
  
  .req-tabs {
    gap: 6px;
  }
  
  .tab-pill {
    padding: 6px 10px;
    font-size: 11px;
  }
}

/* ===== END v4.12.9 ===== */

/* =============================================================================
   MOBILE-FIRST RESPONSIVE OVERHAUL v4.12.12
   - Bottom navigation for phones
   - Touch-friendly targets (44px min)
   - Stacked layouts
   - Bottom sheets
   - No horizontal overflow
   ============================================================================= */

/* =============================================================================
   CSS CUSTOM PROPERTIES FOR MOBILE
   ============================================================================= */
/* v5.2.63: Mobile tokens consolidated to main :root block */

/* v5.2.60: Use dvh if supported (iOS 15.4+) */
@supports (height: 100dvh) {
  :root {
    --vh-full: 100dvh;
  }
}

/* =============================================================================
   v5.0.25: MOBILE USER INFO HEADER (login + role)
   ============================================================================= */
.mobile-user-info {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(59, 125, 255, 0.1), rgba(59, 125, 255, 0.05));
  border-bottom: 1px solid rgba(59, 125, 255, 0.2);
  font-size: 13px;
  font-weight: 500;
}

.mobile-user-info.hidden {
  display: none !important;
}

.mobile-user-login {
  color: var(--ink, #f8f8fc);
  font-weight: 600;
}

.mobile-user-separator {
  color: rgba(255, 255, 255, 0.3);
}

.mobile-user-role {
  color: var(--accent, #3b7dff);
  font-weight: 600;
  text-transform: capitalize;
}

@media (max-width: 768px) {
  .mobile-user-info:not(.hidden) {
    display: flex;
  }
}

/* Light theme */
body.theme-light .mobile-user-info {
  background: linear-gradient(135deg, rgba(59, 125, 255, 0.08), rgba(59, 125, 255, 0.03));
  border-bottom-color: rgba(59, 125, 255, 0.15);
}

body.theme-light .mobile-user-login {
  color: #1a1a2e;
}

body.theme-light .mobile-user-separator {
  color: rgba(0, 0, 0, 0.2);
}

/* =============================================================================
   VIEWPORT & SAFE AREAS
   ============================================================================= */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* =============================================================================
   MOBILE BOTTOM NAVIGATION BAR
   ============================================================================= */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* v5.2.62: Unified height + safe area */
  height: calc(var(--tabbar-h, 64px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
  background: var(--surface, rgba(12, 12, 18, 0.98));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--stroke);
  padding-bottom: var(--safe-bottom, env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  /* v2.4.8: removed box-shadow glow, use border-top only */
}

.mobile-bottom-nav-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: var(--tabbar-h, 64px);
  max-width: 500px;
  margin: 0 auto;
  padding: 0 var(--space-2);
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  min-width: var(--control-h);
  min-height: var(--control-h);
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  isolation: isolate;
}

.mobile-nav-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.mobile-nav-item.active {
  color: var(--accent);
  background: var(--accent-muted);
}

.mobile-nav-item:active {
  transform: scale(0.92);
  background: rgba(255, 255, 255, 0.08);
}

/* =============================================================================
   MOBILE BOTTOM SHEET — v5.2.63 iOS Premium Style
   ============================================================================= */
.mobile-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  opacity: 0;
  transition: opacity var(--t) var(--ease-out);
}

.mobile-sheet-overlay.visible {
  display: block;
  opacity: 1;
}

.mobile-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 80vh;
  background: var(--surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  border: 1px solid var(--stroke);
  border-bottom: none;
  z-index: 10001;
  transform: translateY(100%);
  transition: transform var(--t-slow) cubic-bezier(0.32, 0.72, 0, 1);
  padding-bottom: var(--safe-bottom, env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.4);
}

body.theme-light .mobile-sheet {
  background: var(--surface);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12);
}

.mobile-sheet.open {
  transform: translateY(0);
}

.mobile-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--stroke-2);
  border-radius: 2px;
  margin: var(--space-3) auto var(--space-2);
}

.mobile-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--stroke);
}

.mobile-sheet-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.mobile-sheet-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--stroke);
  border: none;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.mobile-sheet-close:hover {
  background: var(--stroke-2);
  color: var(--ink);
}

.mobile-sheet-body {
  padding: var(--space-4);
  max-height: calc(80vh - 80px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* v5.2.63: Grid layout for nav items (2 columns, iOS style) */
.mobile-sheet-nav-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.mobile-sheet-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-3);
  background: var(--panel-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.mobile-sheet-nav-item:hover {
  background: var(--accent-muted);
  border-color: var(--stroke-glow);
}

.mobile-sheet-nav-item:active {
  transform: scale(0.96);
  background: var(--accent-muted);
  border-color: var(--accent);
}

.mobile-sheet-nav-item svg {
  width: 24px;
  height: 24px;
  color: var(--accent);
  stroke-width: 1.75;
}

body.theme-light .mobile-sheet-nav-item {
  background: rgba(0, 0, 0, 0.03);
}

body.theme-light .mobile-sheet-nav-item:hover,
body.theme-light .mobile-sheet-nav-item:active {
  background: var(--accent-muted);
}

/* v5.2.60: Sheet Grid Buttons (Bottom Sheet Quick Actions) */
.sheet-grid-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px 8px !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  position: relative !important;
  isolation: isolate !important;
}

.sheet-grid-btn > * {
  position: relative !important;
  z-index: 1 !important;
}

.sheet-grid-btn::before {
  z-index: 0 !important;
}

/* =============================================================================
   MOBILE TYPOGRAPHY
   ============================================================================= */
@media (max-width: 480px) {
  body {
    font-size: 15px;
    line-height: 1.45;
  }
  
  h1 {
    font-size: clamp(22px, 6vw, 28px);
  }
  
  h2 {
    font-size: clamp(18px, 5vw, 22px);
  }
  
  h3 {
    font-size: clamp(16px, 4.5vw, 18px);
  }
}

/* =============================================================================
   MOBILE TOUCH TARGETS
   ============================================================================= */
@media (max-width: 768px) {
  /* All buttons minimum 44px */
  .btn,
  button:not(.mobile-sheet-close),
  .action-btn,
  .pill,
  .tab-pill,
  .toggle-btn,
  [role="button"] {
    min-height: var(--touch-target);
    padding-left: 16px;
    padding-right: 16px;
  }
  
  /* Icon buttons need bigger hit area.
     The touch target is the BUTTON, never the artwork. Targeting an only-child
     svg sized the glyph instead, and because it is a descendant selector it also
     caught every icon wrapped in a span beside a label. Measured on the seller
     screen: 100 of the 160 button icons inflated to 44px, 93 of them
     decorations — the refresh arrow drawn at 44px inside a 10px slot, chevrons
     drawn through their own labels. Two of them had been patched by ID; the
     rest were still wrong. Size the control. */
  .btn-icon,
  .icon-btn,
  button:has(> svg:only-child) {
    min-width: var(--touch-target);
    min-height: var(--touch-target);
  }
  
  /* Close buttons */
  .modal-close,
  .close-btn,
  [aria-label="Close"] {
    min-width: var(--touch-target);
    min-height: var(--touch-target);
  }
  
  /* Form inputs */
  input,
  select,
  textarea {
    min-height: var(--touch-target);
    font-size: 16px !important; /* Prevents iOS zoom */
  }
  
  /* Checkboxes and radios */
  input[type="checkbox"],
  input[type="radio"] {
    width: 22px;
    height: 22px;
  }
}

/* =============================================================================
   MOBILE HEADER ADJUSTMENTS
   ============================================================================= */
@media (max-width: 480px) {
  .top-header,
  header {
    padding: 12px var(--mobile-padding);
    gap: 10px;
  }
  
  .logo-text {
    font-size: 18px;
  }
  
  /* Hide non-essential header items on small phones */
  .header-actions .btn-ghost:not(:last-child) {
    display: none;
  }
}

/* =============================================================================
   MOBILE ADMIN TABS - HORIZONTAL SCROLL
   ============================================================================= */
@media (max-width: 768px) {
  /* v2.0.5: Hide admin tabs on mobile - use bottom nav instead */
  .admin-tabs-wrapper,
  .admin-tabs {
    display: none !important;
  }
  
  /* Tab arrows - bigger for mobile */
  .admin-tabs-arrow {
    display: none !important; /* Hide arrows on mobile, use swipe */
  }
  
  /* Fade indicators */
  .admin-tabs-wrapper::before,
  .admin-tabs-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    pointer-events: none;
    z-index: 10;
  }
  
  .admin-tabs-wrapper::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg-1, #050508), transparent);
  }
  
  .admin-tabs-wrapper::after {
    right: 0;
    background: linear-gradient(-90deg, var(--bg-1, #050508), transparent);
  }
}

/* =============================================================================
   MOBILE CARDS - SINGLE COLUMN
   ============================================================================= */
@media (max-width: 480px) {
  .cards-grid,
  .metrics-grid,
  .stats-grid,
  .kpi-grid {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-gap);
  }
  
  .card,
  .stat-card,
  .metric-card {
    width: 100%;
    margin: 0;
    padding: var(--mobile-padding);
  }
  
  /* Card content adjustments */
  .card-title {
    font-size: 16px;
  }
  
  .card-value,
  .stat-value {
    font-size: 28px;
  }
  
  .card-subtitle,
  .card-meta {
    font-size: 12px;
  }
}

/* =============================================================================
   MOBILE TABLES → CARD VIEW
   ============================================================================= */
@media (max-width: 640px) {
  /* Hide table headers on mobile */
  .data-table thead,
  table thead {
    display: none;
  }
  
  .data-table tbody,
  table tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .data-table tr,
  table tr {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 14px;
    gap: 8px;
  }
  
  .data-table td,
  table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border: none;
    font-size: 14px;
  }
  
  .data-table td::before,
  table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  /* Primary identifier styling */
  .data-table td:first-child,
  table td:first-child {
    font-weight: 600;
    font-size: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  
  /* Actions row */
  .data-table td:last-child,
  table td:last-child {
    justify-content: flex-end;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
}

/* =============================================================================
   MOBILE FORMS - STACKED LAYOUT
   ============================================================================= */
@media (max-width: 640px) {
  form,
  .form-container {
    width: 100%;
    padding: var(--mobile-padding);
  }
  
  .form-grid,
  .form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .form-group,
  .input-group,
  label {
    width: 100%;
  }
  
  input,
  select,
  textarea {
    width: 100%;
    min-height: var(--touch-target);
    padding: 12px 16px;
    font-size: 16px;
    border-radius: 12px;
  }
  
  /* Stack labels above inputs */
  label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
  }
  
  /* Form sections as collapsible groups */
  .form-section {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
  }
  
  .form-section-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  
  /* Submit button full width */
  form button[type="submit"],
  .form-submit-btn {
    width: 100%;
    margin-top: 24px;
    min-height: 50px;
    font-size: 16px;
    font-weight: 600;
  }
}

/* =============================================================================
   MOBILE FILTERS - COLLAPSIBLE
   ============================================================================= */
@media (max-width: 640px) {
  .filters-container,
  .filters-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--mobile-padding);
  }
  
  .filter-group {
    width: 100%;
  }
  
  .filter-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
  }
  
  .filters-content {
    display: none;
    padding-top: 12px;
  }
  
  .filters-content.expanded {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  /* Date range inputs */
  .date-range-inputs {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  input[type="date"] {
    width: 100%;
    min-height: var(--touch-target);
  }
}

/* =============================================================================
   MOBILE MODALS
   ============================================================================= */
@media (max-width: 640px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  
  .modal,
  .dialog {
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    margin: 0;
    border-radius: 20px 20px 0 0;
    padding: 20px var(--mobile-padding) calc(20px + var(--safe-area-bottom));
  }
  
  .modal-header {
    padding: 0 0 16px;
  }
  
  .modal-title {
    font-size: 18px;
  }
  
  .modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: var(--touch-target);
    height: var(--touch-target);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
  }
  
  .modal-body {
    padding: 0;
    max-height: calc(90vh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  
  .modal-footer {
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .modal-footer .btn {
    width: 100%;
  }
}

/* =============================================================================
   MOBILE ACCOUNT CARDS
   ============================================================================= */
@media (max-width: 480px) {
  .account-card,
  .user-card {
    padding: 16px;
    border-radius: 16px;
  }
  
  .account-card .main-line,
  .user-card .name-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .account-card .role-badge,
  .user-card .role-pill {
    font-size: 11px;
    padding: 4px 10px;
  }
  
  /* Action buttons in card */
  .account-card .card-actions,
  .user-card .actions {
    position: static;
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  
  .account-card .card-actions button,
  .user-card .actions button {
    flex: 1;
    min-height: var(--touch-target);
  }
  
  /* Info/Eye button */
  .account-info-btn,
  .account-remove-btn {
    position: static !important;
    transform: none !important;
    width: auto !important;
    flex: 1;
    border-radius: 12px !important;
  }
}

/* =============================================================================
   MOBILE PAGINATION
   ============================================================================= */
@media (max-width: 480px) {
  .pagination {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }
  
  .pagination-btn,
  .page-btn {
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    padding: 0 12px;
    font-size: 14px;
  }
  
  .pagination-info {
    width: 100%;
    text-align: center;
    order: -1;
    margin-bottom: 8px;
  }
}

/* =============================================================================
   MOBILE TOASTS
   ============================================================================= */
@media (max-width: 480px) {
  .toast,
  .notification-toast {
    left: var(--mobile-padding);
    right: var(--mobile-padding);
    max-width: none;
    bottom: calc(var(--mobile-nav-height) + 16px + var(--safe-area-bottom));
  }
}

/* =============================================================================
   MOBILE WELCOME OVERLAY
   ============================================================================= */
@media (max-width: 480px) {
  .welcome-overlay {
    padding: var(--mobile-padding);
  }
  
  .welcome-card {
    width: 100%;
    max-width: 100%;
    padding: 24px var(--mobile-padding);
    border-radius: 24px;
  }
  
  .welcome-title {
    font-size: 24px;
  }
  
  .welcome-text {
    font-size: 14px;
  }
}

/* =============================================================================
   MOBILE LOGIN FORM
   ============================================================================= */
@media (max-width: 480px) {
  .auth-card,
  .login-card {
    width: 100%;
    max-width: 100%;
    padding: 24px var(--mobile-padding);
    margin: var(--mobile-padding);
    border-radius: 20px;
  }
  
  .auth-title {
    font-size: 22px;
  }
}

/* =============================================================================
   MOBILE DASHBOARD WIDGETS
   ============================================================================= */
@media (max-width: 480px) {
  .dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-gap);
  }
  
  .widget {
    width: 100%;
    padding: var(--mobile-padding);
  }
  
  /* Chart containers */
  .chart-container {
    height: 200px;
    overflow-x: auto;
  }
}

/* =============================================================================
   MOBILE SELLER PROFILE
   ============================================================================= */
@media (max-width: 480px) {
  #sellerRequirementsTodayCard,
  #sellerRequirementsProfileCard {
    padding: var(--mobile-padding);
    border-radius: 16px;
  }
  
  .req-today-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  
  .req-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 8px;
    padding-bottom: 8px;
  }
  
  .tab-pill {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* =============================================================================
   MOBILE CALENDAR
   ============================================================================= */
@media (max-width: 480px) {
  .calendar-grid,
  #calendarGrid {
    gap: 4px;
  }
  
  .calendar-day {
    min-width: 38px;
    min-height: 38px;
    font-size: 13px;
  }
  
  .calendar-header {
    gap: 8px;
  }
  
  .calendar-nav-btn {
    min-width: var(--touch-target);
    min-height: var(--touch-target);
  }
}

/* =============================================================================
   MOBILE ACTIVITY GRID
   ============================================================================= */
@media (max-width: 480px) {
  .activity-grid,
  #activityGrid {
    gap: 3px;
  }
  
  .activity-cell {
    width: 14px;
    height: 14px;
    border-radius: 3px;
  }
}

/* =============================================================================
   PREVENT HORIZONTAL OVERFLOW
   ============================================================================= */
@media (max-width: 768px) {
  body,
  #appSection,
  .app-wrapper,
  main {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  /* Long text handling */
  .truncate-mobile {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  
  /* Word break for long strings */
  .break-word {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  
  /* Prevent pills from overflowing */
  .pill,
  .badge,
  .tag {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* =============================================================================
   SHOW MOBILE NAV ON PHONES
   ============================================================================= */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
    flex-direction: row;
  }
  
  /* v5.2.54: Hide mobile nav when on login screen */
  body.auth-visible .mobile-bottom-nav {
    display: none !important;
  }
  
  /* Add padding to body to account for bottom nav */
  body {
    padding-bottom: calc(var(--mobile-nav-height) + var(--safe-area-bottom));
  }
  
  /* v5.2.54: No padding when auth visible (nav hidden) */
  body.auth-visible {
    padding-bottom: 0;
  }
  
  /* Ensure app content doesn't go behind nav */
  #appSection,
  .app-wrapper,
  main {
    padding-bottom: calc(var(--mobile-nav-height) + 20px);
  }
}

/* =============================================================================
   REDUCED MOTION PREFERENCE
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .mobile-sheet {
    transition: none;
  }
}

/* =============================================================================
   LIGHT THEME MOBILE ADJUSTMENTS
   ============================================================================= */
body.theme-light .mobile-bottom-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 248, 252, 0.99));
  border-top-color: rgba(0, 0, 0, 0.08);
}

body.theme-light .mobile-nav-item {
  color: rgba(0, 0, 0, 0.5);
}

body.theme-light .mobile-nav-item.active {
  color: var(--accent);
  background: rgba(59, 125, 255, 0.1);
}

body.theme-light .mobile-sheet {
  background: linear-gradient(180deg, #ffffff, #f8f8fc);
}

body.theme-light .mobile-sheet-nav-item {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.85);
}

/* =============================================================================
   TABLET ADJUSTMENTS (481-768px)
   ============================================================================= */
@media (min-width: 481px) and (max-width: 768px) {
  .cards-grid,
  .metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .form-grid .full-width {
    grid-column: 1 / -1;
  }
}

/* =============================================================================
   DESKTOP UNCHANGED
   ============================================================================= */
@media (min-width: 769px) {
  .mobile-bottom-nav {
    display: none !important;
  }
  
  .mobile-sheet-overlay,
  .mobile-sheet {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(100%) !important;
  }
  
  /* Ensure even when .open class is added, it stays hidden */
  .mobile-sheet.open,
  .mobile-sheet-overlay.visible {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* =============================================================================
   SKELETON LOADERS v4.12.14
   ============================================================================= */
@keyframes skeletonPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

.skeleton {
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0.04) 25%, 
    rgba(255, 255, 255, 0.08) 50%, 
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 200% 100%;
  animation: skeletonPulse 1.5s ease-in-out infinite;
  border-radius: 8px;
}

.skeleton-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 16px;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

.skeleton-line {
  height: 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  margin-bottom: 10px;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 70%; }
.skeleton-line.long { width: 90%; }

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

.skeleton-badge {
  width: 80px;
  height: 24px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

/* Account card skeleton */
.account-card-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
}

.account-card-skeleton .skeleton-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-card-skeleton .skeleton-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* =============================================================================
   EMPTY STATES v4.12.14
   ============================================================================= */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  min-height: 200px;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  opacity: 0.3;
  color: var(--muted, rgba(255, 255, 255, 0.5));
}

.empty-state-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink, #fff);
  margin-bottom: 8px;
}

.empty-state-text {
  font-size: 14px;
  color: var(--muted, rgba(255, 255, 255, 0.5));
  max-width: 300px;
  margin-bottom: 20px;
  line-height: 1.5;
}

.empty-state-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--accent, #3b7dff);
  color: #fff;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.empty-state-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 125, 255, 0.3);
}

/* =============================================================================
   SELLER PROFILE ENHANCEMENTS v4.12.14
   ============================================================================= */
.seller-profile-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}

.seller-profile-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.seller-profile-section-title svg {
  width: 18px;
  height: 18px;
  opacity: 0.6;
}

/* Read-only field display */
.field-readonly {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.field-readonly-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.field-readonly-value {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink, #fff);
}

.field-readonly-value.muted {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* Script requirements checklist */
.script-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.script-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  transition: all 0.15s ease;
}

.script-checklist-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.script-checklist-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
}

.script-checklist-icon.must {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.script-checklist-icon.offer {
  background: rgba(59, 125, 255, 0.15);
  color: #3b7dff;
}

.script-checklist-icon.forbidden {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.script-checklist-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
}

.script-checklist-status {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
}

.script-checklist-status.done {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.script-checklist-status.pending {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

/* KPI mini cards */
.kpi-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 480px) {
  .kpi-mini-grid {
    grid-template-columns: 1fr;
  }
}

.kpi-mini-card {
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.kpi-mini-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.kpi-mini-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink, #fff);
}

.kpi-mini-value.good { color: #22c55e; }
.kpi-mini-value.mid { color: #fbbf24; }
.kpi-mini-value.bad { color: #ef4444; }

/* v2.0.1: Dashboard KPI mini items */
.kpi-mini-item {
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  text-align: center;
}
.kpi-mini-item .kpi-mini-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-blue, #2962ff);
}
.kpi-mini-item .kpi-mini-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}

.kpi-mini-target {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
}

/* Show more button */
.show-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.show-more-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
}

/* =============================================================================
   FORM SECTION GROUPS v4.12.14
   ============================================================================= */
.form-section-group {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}

.form-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.form-section-header h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.form-section-header .toggle-icon {
  transition: transform 0.2s ease;
}

.form-section-group.collapsed .form-section-body {
  display: none;
}

.form-section-group.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

.form-section-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Disabled/locked field indicator */
.field-locked {
  position: relative;
}

.field-locked::after {
  content: '🔒';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.4;
}

.field-locked input,
.field-locked select {
  padding-right: 40px;
  background: rgba(255, 255, 255, 0.01);
  cursor: not-allowed;
}

/* Field hint text */
.field-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 6px;
  line-height: 1.4;
}

.field-hint.warning {
  color: #fbbf24;
}

/* =============================================================================
   IMPROVED ACCOUNT CARD CHIPS v4.12.14
   ============================================================================= */
.account-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.account-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-chip svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.5;
}

@media (max-width: 480px) {
  .account-chips {
    gap: 8px;
  }
  
  .account-chip {
    padding: 6px 12px;
    font-size: 13px;
    max-width: 100%;
  }
}

/* =============================================================================
   MOBILE FULL-SCREEN MODALS v4.12.14
   ============================================================================= */
@media (max-width: 640px) {
  .modal-fullscreen {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  
  .modal-fullscreen .modal-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: inherit;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  
  .modal-fullscreen .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
  }
  
  .modal-fullscreen .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: inherit;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .modal-fullscreen .modal-footer .btn {
    width: 100%;
    min-height: 48px;
  }
}

/* =============================================================================
   LIGHT THEME SKELETON & STATES
   ============================================================================= */
body.theme-light .skeleton,
body.theme-light .skeleton-card,
body.theme-light .skeleton-line,
body.theme-light .skeleton-avatar,
body.theme-light .skeleton-badge {
  background: linear-gradient(90deg, 
    rgba(0, 0, 0, 0.04) 25%, 
    rgba(0, 0, 0, 0.08) 50%, 
    rgba(0, 0, 0, 0.04) 75%
  );
}

body.theme-light .empty-state-icon {
  color: rgba(0, 0, 0, 0.45);
}

body.theme-light .seller-profile-section,
body.theme-light .form-section-group,
body.theme-light .field-readonly,
body.theme-light .script-checklist-item,
body.theme-light .kpi-mini-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

body.theme-light .seller-chat-section {
  background: var(--bg-2, #e8eaed);
}
body.theme-light .seller-chat-section-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.theme-light .seller-chat-input-row {
  border-top-color: rgba(0, 0, 0, 0.08);
  background: var(--bg-1, #f3f4f6);
}
body.theme-light .seller-chat-input-row textarea {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--ink, #1a1a2e);
}
body.theme-light .seller-chat-input-row textarea::placeholder {
  color: rgba(0, 0, 0, 0.55);
}
body.theme-light .seller-chat-input-row textarea:focus {
  border-color: var(--accent, #0066cc);
  box-shadow: 0 0 0 3px var(--accent-muted, rgba(0,102,204,0.12));
}
body.theme-light .seller-chat-select-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--ink, #1a1a2e);
}
body.theme-light .seller-chat-select-btn:hover {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.2);
}
body.theme-light .seller-chat-select-menu {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}
body.theme-light .seller-chat-select-option:hover {
  background: rgba(0, 0, 0, 0.05);
}
body.theme-light .seller-inline-msg.received {
  background: rgba(0, 0, 0, 0.06);
}

/* =============================================================================
   END MOBILE-FIRST v4.12.14
   ============================================================================= */

/* =============================================================================
   MicHelper v5.0.0 - UX POLISH & ANIMATIONS
   ============================================================================= */

/* === RESPECT REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === BUTTON MICROINTERACTIONS === */
.btn, .btn-primary, .btn-secondary, .btn-outline, button[type="submit"] {
  transition: transform 0.15s var(--ease), 
              box-shadow 0.2s var(--ease), 
              background-color 0.2s var(--ease),
              opacity 0.2s var(--ease);
  touch-action: manipulation;
}

.btn:active, .btn-primary:active, .btn-secondary:active, button[type="submit"]:active {
  transform: scale(0.97);
}

@media (hover: hover) {
  .btn:hover:not(:disabled), 
  .btn-primary:hover:not(:disabled) {
    box-shadow: 0 0 20px var(--accent-glow), 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

/* === CARD HOVER LIFT (Desktop only) === */
@media (hover: hover) and (min-width: 768px) {
  .card, .account-card, .kpi-card, .metric-card {
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  
  .card:hover, .account-card:hover, .kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-float);
  }
}

/* === TAB ANIMATIONS === */
.tab-btn, .admin-tab-btn, .script-type-btn {
  position: relative;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.tab-btn.active::after, .admin-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--accent);
  border-radius: 3px;
  animation: tabIndicator 0.3s var(--ease-bounce);
}

/* User request: remove the blue "active indicator" box under the active sidebar
   nav item. Conflicting rules were rendering it as a filled box over the label
   instead of a thin dash. Scoped to the sidebar so other tab bars keep theirs. */
html body #adminPanel .admin-tab-btn.active::after,
html body .desktop-sidebar .admin-tab-btn.active::after,
html body .admin-tab-btn.active::after {
  display: none !important;
}

@keyframes tabIndicator {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 24px;
    opacity: 1;
  }
}

/* === SKELETON LOADERS === */
.skeleton {
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0.04) 25%, 
    rgba(255, 255, 255, 0.08) 50%, 
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 16px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.skeleton-text.short {
  width: 60%;
}

.skeleton-card {
  padding: 20px;
  border-radius: var(--radius-card);
}

@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* === TOAST ANIMATIONS === */
/* v2.4.9: Removed duplicate .toast-container definition — using primary at line 6175 */

.toast.toast-out {
  animation: toastOut 0.2s var(--ease) forwards;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
}

/* === MODAL ANIMATIONS === */
.modal-overlay {
  animation: fadeIn 0.2s var(--ease);
}

.modal-overlay .modal {
  animation: modalSlideIn 0.3s var(--ease-bounce);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Mobile: bottom sheet style */
@media (max-width: 480px) {
  .modal-overlay .modal {
    animation: bottomSheetIn 0.3s var(--ease);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
    max-height: 90vh;
  }
  
  @keyframes bottomSheetIn {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* === EMPTY STATES === */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  gap: 12px;
  min-height: 200px;
}

.empty-state-icon {
  font-size: 48px;
  opacity: 0.5;
  margin-bottom: 8px;
}

.empty-state-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

.empty-state-hint {
  font-size: 14px;
  color: var(--muted-2);
  max-width: 280px;
}

.empty-state-cta {
  margin-top: 16px;
}

/* === PAGE TRANSITIONS === */
.app-sections > section,
.admin-tabs-content > div {
  animation: pageIn 0.2s var(--ease);
}

@keyframes pageIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* === LOADING STATES === */
.ai-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  color: var(--muted);
}

/* v2.5.63: AI confirmation block responsive (BUG 6 fix) */
.ai-confirm-block {
  word-break: break-word;
}
.ai-confirm-block button {
  cursor: pointer;
  border: none;
  font-weight: 600;
}
@media (max-width: 600px) {
  .ai-confirm-block > div:last-child,
  .ai-confirm-buttons {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .ai-confirm-block button,
  .ai-confirm-buttons button {
    width: 100% !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    min-height: 44px;
  }
}

.ai-loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--stroke-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* === PERFORMANCE WATCHDOG === */
.loading-slow-warning {
  padding: 16px;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--radius-sm);
  color: var(--mid);
  text-align: center;
  margin: 16px 0;
}

/* === MOBILE IMPROVEMENTS === */
@media (max-width: 768px) {
  /* Larger touch targets */
  .btn, button, .input, select, .tab-btn {
    min-height: 44px;
  }
  
  /* Better spacing */
  .form-row {
    margin-bottom: 16px;
  }
  
  /* Sticky action bar */
  .sticky-actions {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: var(--panel);
    border-top: 1px solid var(--stroke);
    z-index: 100;
    display: flex;
    gap: 12px;
  }
  
  .sticky-actions .btn {
    flex: 1;
  }
  
  /* Better chip wrapping */
  .account-badges, .chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  
  /* Prevent horizontal scroll */
  .app-wrapper, .main-content {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* === DEBUG PANEL (devtest mode) === */
.debug-panel {
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 16px 0;
  font-family: monospace;
  font-size: 12px;
  color: var(--accent-2);
}

.debug-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--stroke);
}

.debug-panel-title {
  font-weight: bold;
  color: var(--accent);
}

.debug-module-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.debug-module-status.ok::before {
  content: '✅';
}

.debug-module-status.disabled::before {
  content: '⚠️';
}

.debug-module-status.error::before {
  content: '❌';
}

/* === LEADERBOARD IMPROVEMENTS === */
.leaderboard-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 12px;
  border-bottom: 1px solid var(--stroke);
  transition: background 0.15s var(--ease);
}

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

.leaderboard-item.top-1 {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), transparent);
}

.leaderboard-item.top-2 {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.08), transparent);
}

.leaderboard-item.top-3 {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.08), transparent);
}

.leaderboard-rank {
  font-size: 18px;
  font-weight: bold;
  min-width: 32px;
  text-align: center;
}

.leaderboard-name {
  flex: 1;
  font-weight: 500;
}

.leaderboard-score {
  font-weight: bold;
  color: var(--accent);
}

.leaderboard-sessions {
  color: var(--muted);
  font-size: 13px;
}

/* === AI RESPONSE STYLING === */
.ai-response {
  background: var(--panel-2);
  border: 1px solid var(--stroke-2);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ai-response-header {
  padding: 12px 16px;
  background: rgba(59, 125, 255, 0.1);
  border-bottom: 1px solid var(--stroke);
  font-weight: 600;
  color: var(--accent-2);
}

.ai-response-content {
  padding: 16px;
  line-height: 1.6;
  white-space: pre-line;
}

.ai-response-content strong {
  color: var(--ink);
}

/* === END v5.0.0 UX POLISH === */

/* ===== v4.13.0 UX POLISH + ANIMATIONS ===== */

/* === PHASE 4.1: GLOBAL MICROINTERACTIONS === */

/* Button press animation */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success,
button[type="submit"] {
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  will-change: transform;
}

.btn-primary:active,
.btn-secondary:active,
.btn-danger:active,
.btn-success:active,
button[type="submit"]:active {
  transform: scale(0.97);
}

.btn-primary:hover:not(:disabled),
.btn-secondary:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

/* Card hover lift (desktop only) */
@media (hover: hover) {
  .card,
  .account-card,
  .session-card,
  .mic-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .card:hover,
  .account-card:hover,
  .session-card:hover,
  .mic-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }
}

/* Tab animated underline */
.admin-tabs,
.tabs {
  position: relative;
}

.admin-tabs .tab-btn,
.tabs .tab-btn {
  position: relative;
  transition: color 0.2s ease;
}

.admin-tabs .tab-btn::after,
.tabs .tab-btn::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.25s ease, left 0.25s ease;
  border-radius: 2px;
}

.admin-tabs .tab-btn.active::after,
.tabs .tab-btn.active::after {
  width: 100%;
  left: 0;
}

/* === SKELETON LOADERS === */

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--panel-2) 0px,
    rgba(255, 255, 255, 0.1) 40px,
    var(--panel-2) 80px
  );
  background-size: 200px 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 16px;
  margin-bottom: 8px;
}

.skeleton-text.short {
  width: 60%;
}

.skeleton-text.medium {
  width: 80%;
}

.skeleton-title {
  height: 24px;
  width: 50%;
  margin-bottom: 12px;
}

.skeleton-card {
  height: 100px;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

/* === TOAST ANIMATIONS === */

@keyframes toastSlideIn {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes toastSlideOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-20px);
    opacity: 0;
  }
}

.toast {
  animation: toastSlideIn 0.3s ease forwards;
}

.toast.removing {
  animation: toastSlideOut 0.25s ease forwards;
}

/* === MODAL TRANSITIONS === */

.modal-overlay {
  transition: opacity 0.25s ease, visibility 0.25s ease;
  opacity: 0;
  visibility: hidden;
}

.modal-overlay:not(.hidden) {
  opacity: 1;
  visibility: visible;
}

.modal {
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform: translateY(20px) scale(0.98);
  opacity: 0;
}

.modal-overlay:not(.hidden) .modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Mobile: bottom sheet style */
@media (max-width: 640px) {
  .modal {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    border-radius: 20px 20px 0 0;
    max-height: 90vh;
    transform: translateY(100%);
  }
  
  .modal-overlay:not(.hidden) .modal {
    transform: translateY(0);
  }
}

/* === PAGE TRANSITIONS === */

.admin-tab-content {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* === PHASE 4.2: MOBILE FIRST LAYOUT === */

/* Big touch targets */
button,
.btn-primary,
.btn-secondary,
.clickable {
  min-height: 44px;
  min-width: 44px;
}

/* Touch-friendly checkboxes without inflating the control itself */
.consent-row label,
.terms-checkbox-row label,
.remember-row label {
  cursor: pointer;
}
.consent-row,
.terms-checkbox-row,
.remember-row {
  padding: 6px 0;
}


/* Safe area padding */
.top-bar {
  padding-top: max(12px, env(safe-area-inset-top));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

.main-content {
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* Sticky action bar on mobile */
@media (max-width: 768px) {
  .sticky-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: var(--panel);
    border-top: 1px solid var(--stroke);
    display: flex;
    gap: 12px;
    z-index: 100;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  }
  
  .sticky-actions .btn-primary,
  .sticky-actions .btn-secondary {
    flex: 1;
    justify-content: center;
  }
}

/* Forms single column on mobile */
@media (max-width: 768px) {
  .form-grid,
  .form-row-2,
  .form-row-3 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .modal {
    width: 100%;
    max-width: 100%;
    padding: 16px;
  }
}

/* Chip spacing fix */
.chip-list,
.account-chips,
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip,
.tag {
  padding: 4px 10px;
  white-space: nowrap;
}

/* === PHASE 4.3: EMPTY STATES === */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  min-height: 200px;
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.7;
}

.empty-state-text {
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 8px;
  max-width: 300px;
}

.empty-state-hint {
  font-size: 14px;
  color: var(--muted);
  opacity: 0.7;
  margin-bottom: 16px;
}

.empty-state-cta {
  margin-top: 12px;
}

.empty-state .btn-primary {
  margin-top: 16px;
}

/* Empty list specific states */
.empty-microphones::before {
  content: '🎙️';
  font-size: 48px;
  display: block;
  margin-bottom: 16px;
}

.empty-sessions::before {
  content: '📊';
  font-size: 48px;
  display: block;
  margin-bottom: 16px;
}

.empty-transcripts::before {
  content: '📝';
  font-size: 48px;
  display: block;
  margin-bottom: 16px;
}

/* === PHASE 4.4: LOADING STATES === */

.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.loading-overlay.active {
  opacity: 1;
  visibility: visible;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.loading-text {
  color: var(--ink);
  margin-top: 12px;
  font-size: 14px;
}

/* Long loading warning */
.loading-warning {
  color: var(--warning);
  font-size: 13px;
  margin-top: 8px;
}

/* === REDUCED MOTION === */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .skeleton {
    animation: none;
    background: var(--panel-2);
  }
}

/* === DEBUG PANEL (devtest mode) === */

.debug-panel {
  background: rgba(255, 0, 0, 0.05);
  border: 1px solid rgba(255, 0, 0, 0.2);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 16px;
}

.debug-panel-title {
  color: #ff6b6b;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.debug-panel-title::before {
  content: '🐛';
}

.debug-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
}

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

.debug-item-label {
  color: var(--muted);
}

.debug-item-value {
  font-family: monospace;
  color: var(--ink);
}

.debug-item-value.success {
  color: #22c55e;
}

.debug-item-value.warning {
  color: #eab308;
}

.debug-item-value.error {
  color: #ef4444;
}

/* Disabled module indicator */
.module-disabled {
  opacity: 0.5;
  pointer-events: none;
  position: relative;
}

.module-disabled::after {
  content: 'Module disabled';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  color: var(--muted);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 12px;
}

/* === AI LOADING ANIMATION === */

.ai-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
}

.ai-loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(59, 130, 246, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* === END v4.13.0 UX POLISH ===*/

/* === v4.14.0 PREMIUM ONBOARDING & BUG DETAILS === */

/* Premium Tour Welcome */
.tour-welcome-premium {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, 
    rgba(20, 20, 35, 0.98) 0%,
    rgba(15, 15, 25, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tour-welcome-premium.tour-welcome-visible {
  transform: translateY(0);
  opacity: 1;
}

.tour-welcome-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* v6.3.0: Light theme overrides for tour welcome/complete cards */
body.theme-light .tour-welcome-premium,
.light-theme .tour-welcome-premium {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15) !important;
}

body.theme-light .tour-welcome-backdrop,
.light-theme .tour-welcome-backdrop {
  background: rgba(255, 255, 255, 0.5) !important;
}

body.theme-light .tour-welcome-title,
.light-theme .tour-welcome-title {
  color: #1a1a2e !important;
}

body.theme-light .tour-welcome-subtitle,
.light-theme .tour-welcome-subtitle {
  color: #555 !important;
}

body.theme-light .tour-welcome-version,
.light-theme .tour-welcome-version {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #888 !important;
}

body.theme-light .tour-welcome-hint,
.light-theme .tour-welcome-hint {
  color: #888 !important;
}

body.theme-light .tour-welcome-footer,
.light-theme .tour-welcome-footer {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light .tour-complete-learned,
.light-theme .tour-complete-learned {
  background: rgba(34, 197, 94, 0.08) !important;
  border-color: rgba(34, 197, 94, 0.15) !important;
}

.tour-welcome-glow {
  /* v2.3.6: Disabled glow */
  display: none !important;
}

.tour-welcome-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.tour-welcome-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tour-welcome-logo-icon {
  font-size: 28px;
}

.tour-welcome-logo-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 1px;
}

.tour-welcome-version {
  font-size: 11px;
  color: var(--muted-2);
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 8px;
  border-radius: 6px;
}

.tour-welcome-hero {
  margin-bottom: 24px;
}

.tour-welcome-feature-label {
  font-size: 12px;
  color: var(--muted);
}

.tour-welcome-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--stroke);
}

.tour-welcome-hint {
  font-size: 12px;
  color: var(--muted-2);
}

/* Complete Step Styles */
.tour-complete-card {
  max-width: 480px;
}

.tour-complete-confetti {
  font-size: 56px;
  margin-bottom: 16px;
  animation: confettiBounce 0.6s ease;
}

@keyframes confettiBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.tour-complete-learned {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin: 20px 0;
  text-align: left;
}

.tour-complete-learned-title {
  font-size: 13px;
  font-weight: 600;
  color: #22c55e;
  margin-bottom: 10px;
  display: block;
}

.tour-complete-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tour-skill-tag {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.tour-complete-next {
  text-align: left;
  margin: 20px 0;
}

.tour-complete-next-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 12px;
  display: block;
}

.tour-complete-next-actions {
  display: flex;
  gap: 12px;
}

.tour-next-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t);
}

.tour-next-action-btn:hover {
  background: rgba(59, 130, 246, 0.2);
  transform: translateY(-2px);
}

/* Bug Toast & Details Modal */
.bug-toast {
  animation: bugToastSlide 0.3s ease;
}

.bug-toast-icon {
  font-size: 20px;
}

.bug-toast-content {
  flex: 1;
  min-width: 0;
}

.bug-toast-content strong {
  color: #f87171;
  display: block;
  font-size: 11px;
  margin-bottom: 2px;
}

.bug-toast-msg {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bug-toast-actions {
  display: flex;
  gap: 8px;
}

.bug-toast-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t);
}

.bug-toast-details {
  background: rgba(59, 130, 246, 0.2);
  color: var(--accent-2);
}

.bug-toast-details:hover {
  background: rgba(59, 130, 246, 0.3);
}

.bug-toast-dismiss {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  padding: 4px 10px;
}

.bug-toast-dismiss:hover {
  background: rgba(255, 255, 255, 0.2);
}

@keyframes bugToastSlide {
  from { transform: translateX(-50%) translateY(100px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

@keyframes bugToastSlideOut {
  from { transform: translateX(-50%) translateY(0); opacity: 1; }
  to { transform: translateX(-50%) translateY(100px); opacity: 0; }
}

/* Bug Details Modal (Bottom Sheet) */
.bug-details-modal {
  animation: fadeIn 0.2s ease;
}

.bug-details-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.bug-details-sheet {
  position: relative;
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  margin: 0 auto;
  background: var(--panel);
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bug-details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(239, 68, 68, 0.1);
  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

.bug-details-header h3 {
  margin: 0;
  font-size: 16px;
  color: #f87171;
}

.bug-details-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  transition: background var(--t);
}

.bug-details-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.bug-details-body {
  padding: 20px;
  max-height: 50vh;
  overflow-y: auto;
}

.bug-detail-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.bug-detail-row.bug-detail-full {
  flex-direction: column;
  gap: 6px;
}

.bug-detail-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  min-width: 80px;
}

.bug-detail-value {
  font-size: 13px;
  color: var(--ink);
}

.bug-detail-code {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 12px;
  margin: 0;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 11px;
  color: #f87171;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.bug-detail-stack {
  color: var(--muted);
  max-height: 150px;
  overflow-y: auto;
}

.bug-details-footer {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--stroke);
}

.bug-details-footer .btn {
  flex: 1;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .tour-complete-next-actions {
    flex-direction: column;
  }
  
  .bug-details-sheet {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tour-welcome-premium,
  .bug-toast,
  .bug-details-sheet {
    animation: none !important;
    transition: none !important;
  }
}

/* === END v4.14.0 PREMIUM ONBOARDING === */

/* === DIAGNOSTICS PANEL === */

.diagnostics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.diagnostics-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.diag-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--stroke);
}

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

.diag-label {
  font-size: 13px;
  color: var(--muted);
}

.diag-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.diag-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.bug-reports-list {
  max-height: 300px;
  overflow-y: auto;
}

.bug-report-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all var(--t);
}

.bug-report-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--stroke-2);
}

.bug-report-code {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 11px;
  font-weight: 600;
  color: #f87171;
  background: rgba(239, 68, 68, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.bug-report-msg {
  flex: 1;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bug-report-time {
  font-size: 11px;
  color: var(--muted-2);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .diagnostics-grid {
    grid-template-columns: 1fr;
  }
  
  .diag-actions {
    flex-direction: column;
  }
}

/* === END DIAGNOSTICS PANEL === */

/* ================================================== */
/* ACCOUNT MODAL REDESIGN v4.15.23                    */
/* ================================================== */

/* Modal Navigation Tabs */
.modal-tabs {
  display: flex !important;
  gap: 4px !important;
  padding: 0 28px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.2) 100%) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.modal-tab {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.modal-tab:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.modal-tab.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1)) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #93c5fd !important;
}

.modal-tab svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

.modal-tab-content {
  display: none !important;
}

.modal-tab-content.active {
  display: block !important;
  animation: fadeIn 0.2s ease !important;
}

/* Improved Profile Header */
.profile-header-new {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 24px 28px !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.profile-avatar-large {
  width: 72px !important;
  height: 72px !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1)) !important;
  border: 2px solid rgba(59, 130, 246, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #60a5fa !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

.profile-main-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.profile-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 6px !important;
}

.profile-name {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #f0f4ff !important;
  margin: 0 !important;
}

.profile-role-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.profile-role-badge.seller {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1)) !important;
  color: #86efac !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

.profile-role-badge.manager {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1)) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.profile-role-badge.admin {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.1)) !important;
  color: #c4b5fd !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
}

.profile-meta-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

.profile-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.profile-tag svg {
  width: 14px !important;
  height: 14px !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

.profile-actions {
  display: flex !important;
  gap: 8px !important;
}

.profile-action-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.profile-action-btn:hover {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
}

/* Improved Stats Grid */
.stats-grid-new {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 12px !important;
  padding: 20px 0 !important;
}

.stat-card-new {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  transition: all 0.2s ease !important;
}

.stat-card-new:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.stat-card-new .stat-icon {
  font-size: 20px !important;
  margin-bottom: 8px !important;
}

.stat-card-new .stat-value {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #f0f4ff !important;
  line-height: 1.2 !important;
}

.stat-card-new .stat-label {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-top: 4px !important;
}

.stat-card-new.highlight {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05)) !important;
  border-color: rgba(34, 197, 94, 0.2) !important;
}

.stat-card-new.highlight .stat-value {
  color: #86efac !important;
}

.stat-card-new.warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05)) !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
}

.stat-card-new.warning .stat-value {
  color: #fcd34d !important;
}

.stat-card-new.danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05)) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}

.stat-card-new.danger .stat-value {
  color: #fca5a5 !important;
}

/* Progress Bar */
.progress-bar-new {
  height: 6px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  margin-top: 8px !important;
}

.progress-bar-new .progress-fill {
  height: 100% !important;
  border-radius: 3px !important;
  transition: width 0.3s ease !important;
}

.progress-bar-new .progress-fill.good {
  background: linear-gradient(90deg, #22c55e, #4ade80) !important;
}

.progress-bar-new .progress-fill.medium {
  background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
}

.progress-bar-new .progress-fill.bad {
  background: linear-gradient(90deg, #ef4444, #f87171) !important;
}

/* AI Analysis Card */
.ai-analysis-card {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(59, 130, 246, 0.05)) !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  margin-top: 16px !important;
}

.ai-analysis-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.ai-analysis-header .ai-icon {
  font-size: 24px !important;
}

.ai-analysis-header .ai-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #c4b5fd !important;
}

.ai-score-display {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

.ai-score-circle {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  background: conic-gradient(#8b5cf6 var(--score-percent, 0%), rgba(255,255,255,0.1) 0%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.ai-score-circle::before {
  content: '' !important;
  position: absolute !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: #1a1d2e !important;
}

.ai-score-circle .score-text {
  position: relative !important;
  z-index: 1 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #f0f4ff !important;
}

.ai-insights-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.ai-insight-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.ai-insight-item .insight-icon {
  flex-shrink: 0 !important;
}

.ai-insight-item.high {
  background: rgba(239, 68, 68, 0.1) !important;
  border-left: 3px solid #ef4444 !important;
}

.ai-insight-item.medium {
  background: rgba(245, 158, 11, 0.1) !important;
  border-left: 3px solid #f59e0b !important;
}

.ai-insight-item.low {
  background: rgba(34, 197, 94, 0.1) !important;
  border-left: 3px solid #22c55e !important;
}

/* Bonuses & Penalties */
.balance-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

.balance-card-new {
  padding: 16px !important;
  border-radius: 14px !important;
  text-align: center !important;
}

.balance-card-new.bonus {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05)) !important;
  border: 1px solid rgba(34, 197, 94, 0.25) !important;
}

.balance-card-new.penalty {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05)) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

.balance-card-new.total {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05)) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
}

.balance-card-new .balance-label {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-bottom: 6px !important;
}

.balance-card-new .balance-amount {
  font-size: 22px !important;
  font-weight: 700 !important;
}

.balance-card-new.bonus .balance-amount {
  color: #86efac !important;
}

.balance-card-new.penalty .balance-amount {
  color: #fca5a5 !important;
}

.balance-card-new.total .balance-amount {
  color: #93c5fd !important;
}

/* Transaction List */
.transactions-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  max-height: 300px !important;
  overflow-y: auto !important;
}

.transaction-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.transaction-item .tx-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.transaction-item .tx-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
}

.transaction-item.bonus .tx-icon {
  background: rgba(34, 197, 94, 0.15) !important;
}

.transaction-item.penalty .tx-icon {
  background: rgba(239, 68, 68, 0.15) !important;
}

.transaction-item .tx-desc {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.transaction-item .tx-date {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

.transaction-item .tx-amount {
  font-size: 15px !important;
  font-weight: 600 !important;
}

.transaction-item.bonus .tx-amount {
  color: #86efac !important;
}

.transaction-item.penalty .tx-amount {
  color: #fca5a5 !important;
}

/* Script Checklist */
.script-checklist {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.script-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: all 0.2s ease !important;
}

.script-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.script-item .check-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

.script-item.passed .check-icon {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #86efac !important;
}

.script-item.failed .check-icon {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
}

.script-item.partial .check-icon {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fcd34d !important;
}

.script-item .check-text {
  flex: 1 !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.script-item .check-percent {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Account Footer Meta */
.account-meta-footer {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 12px !important;
  padding: 20px 28px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.meta-item-new {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.meta-item-new .meta-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.4) !important;
  flex-shrink: 0 !important;
}

.meta-item-new .meta-content {
  min-width: 0 !important;
}

.meta-item-new .meta-label {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.meta-item-new .meta-value {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-family: 'SF Mono', Monaco, Consolas, monospace !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Remove dummy AI data styling */
.ai-score-breakdown .score-criterion {
  display: none !important;
}

/* Empty state */
.empty-state-new {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 20px !important;
  text-align: center !important;
}

.empty-state-new .empty-icon {
  font-size: 48px !important;
  margin-bottom: 16px !important;
  opacity: 0.5 !important;
}

.empty-state-new .empty-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: 8px !important;
}

.empty-state-new .empty-text {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .modal-tabs {
    padding: 0 16px 16px !important;
  }
  
  .modal-tab {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  
  .profile-header-new {
    flex-direction: column !important;
    text-align: center !important;
    padding: 20px 16px !important;
  }
  
  .profile-actions {
    margin-top: 16px !important;
  }
  
  .balance-grid {
    grid-template-columns: 1fr !important;
  }
  
  .stats-grid-new {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ================================================== */
/* ACCOUNT MODAL V2 - Full Redesign                   */
/* ================================================== */

.account-modal-v2 {
  background: linear-gradient(165deg, #13151f 0%, #0c0d12 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 720px !important;
  max-height: 92vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6) !important;
}

/* Profile Header V2 */
.profile-header-v2 {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 20px 24px !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.profile-avatar-v2 {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.1)) !important;
  border: 2px solid rgba(59, 130, 246, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.avatar-initials {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #93c5fd !important;
  text-transform: uppercase !important;
}

.profile-main-v2 {
  flex: 1 !important;
  min-width: 0 !important;
}

.profile-name-row-v2 {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 6px !important;
}

.profile-name-v2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #f0f4ff !important;
  margin: 0 !important;
}

.role-badge-v2 {
  padding: 3px 10px !important;
  border-radius: 12px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.role-badge-v2.seller {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #86efac !important;
  border: 1px solid rgba(34, 197, 94, 0.25) !important;
}

.role-badge-v2.manager {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
}

.role-badge-v2.admin {
  background: rgba(139, 92, 246, 0.15) !important;
  color: #c4b5fd !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
}

.status-badge-v2 {
  padding: 3px 8px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

.status-badge-v2.active {
  background: rgba(34, 197, 94, 0.1) !important;
  color: #4ade80 !important;
}

.status-badge-v2.inactive {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #f87171 !important;
}

.profile-tags-v2 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.profile-tag-v2 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.profile-actions-v2 {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}

.action-btn-v2 {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.action-btn-v2:hover {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
}

.modal-close-v2 {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-left: 8px !important;
}

.modal-close-v2:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}

/* Tabs V2 */
.modal-tabs-v2 {
  display: flex !important;
  gap: 4px !important;
  padding: 12px 20px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.modal-tab-v2 {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.modal-tab-v2:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.modal-tab-v2.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1)) !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
  color: #93c5fd !important;
}

.modal-tab-v2 svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

/* Content V2 */
.modal-content-v2 {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 0 !important;
}

.tab-panel-v2 {
  display: none !important;
  padding: 20px !important;
  animation: fadeInPanel 0.2s ease !important;
}

.tab-panel-v2.active {
  display: block !important;
}

@keyframes fadeInPanel {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Stats Grid V2 */
.stats-grid-v2 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.stat-card-v2 {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
}

.stat-card-v2:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.stat-icon-v2 {
  font-size: 18px !important;
  margin-bottom: 6px !important;
}

.stat-value-v2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #f0f4ff !important;
  line-height: 1.2 !important;
}

.stat-label-v2 {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin-top: 4px !important;
}

.stat-card-v2.highlight {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05)) !important;
  border-color: rgba(34, 197, 94, 0.15) !important;
}

.stat-card-v2.highlight .stat-value-v2 {
  color: #86efac !important;
}

.stat-card-v2.danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05)) !important;
  border-color: rgba(239, 68, 68, 0.15) !important;
}

.stat-card-v2.danger .stat-value-v2 {
  color: #fca5a5 !important;
}

.progress-bar-v2 {
  height: 4px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  margin-top: 8px !important;
}

.progress-fill-v2 {
  height: 100% !important;
  background: linear-gradient(90deg, #22c55e, #4ade80) !important;
  border-radius: 2px !important;
  transition: width 0.3s ease !important;
}

/* Summary Card V2 */
.summary-card-v2 {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

.summary-header-v2 {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.summary-date-v2 {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-family: 'SF Mono', Monaco, Consolas, monospace !important;
}

.summary-grid-v2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

/* AI Card V2 */
.ai-card-v2 {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(59, 130, 246, 0.05)) !important;
  border: 1px solid rgba(139, 92, 246, 0.15) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  margin-bottom: 14px !important;
}

.ai-header-v2 {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

.ai-icon-v2 {
  font-size: 22px !important;
}

.ai-title-v2 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #c4b5fd !important;
  flex: 1 !important;
}

.ai-score-v2 {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #f0f4ff !important;
}

.ai-metrics-v2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.ai-metric-v2 {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 12px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 8px !important;
}

.metric-label-v2 {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.metric-value-v2 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #f0f4ff !important;
}

/* Insights Card V2 */
.insights-card-v2 {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

.insights-header-v2 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-bottom: 12px !important;
}

.insights-list-v2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  max-height: 200px !important;
  overflow-y: auto !important;
}

.insight-item-v2 {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border-left: 3px solid transparent !important;
}

.insight-item-v2.high { border-left-color: #ef4444 !important; background: rgba(239, 68, 68, 0.08) !important; }
.insight-item-v2.medium { border-left-color: #f59e0b !important; background: rgba(245, 158, 11, 0.08) !important; }
.insight-item-v2.low { border-left-color: #22c55e !important; background: rgba(34, 197, 94, 0.08) !important; }

/* Balance Row V2 */
.balance-row-v2 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.balance-item-v2 {
  padding: 14px !important;
  border-radius: 12px !important;
  text-align: center !important;
}

.balance-item-v2.bonus {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.05)) !important;
  border: 1px solid rgba(34, 197, 94, 0.2) !important;
}

.balance-item-v2.penalty {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.05)) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

.balance-item-v2.total {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.05)) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

.balance-label-v2 {
  display: block !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin-bottom: 4px !important;
}

.balance-amount-v2 {
  font-size: 20px !important;
  font-weight: 700 !important;
}

.balance-item-v2.bonus .balance-amount-v2 { color: #86efac !important; }
.balance-item-v2.penalty .balance-amount-v2 { color: #fca5a5 !important; }
.balance-item-v2.total .balance-amount-v2 { color: #93c5fd !important; }

/* Transactions Card V2 */
.transactions-card-v2 {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

.transactions-header-v2 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-bottom: 12px !important;
}

.transactions-list-v2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  max-height: 250px !important;
  overflow-y: auto !important;
}

.transaction-item-v2 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 12px !important;
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
}

.tx-info-v2 {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.tx-icon-v2 {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
}

.transaction-item-v2.bonus .tx-icon-v2 { background: rgba(34, 197, 94, 0.15) !important; }
.transaction-item-v2.penalty .tx-icon-v2 { background: rgba(239, 68, 68, 0.15) !important; }

.tx-desc-v2 {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

.tx-date-v2 {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

.tx-amount-v2 {
  font-size: 14px !important;
  font-weight: 600 !important;
}

.transaction-item-v2.bonus .tx-amount-v2 { color: #86efac !important; }
.transaction-item-v2.penalty .tx-amount-v2 { color: #fca5a5 !important; }

/* Script List V2 */
.script-header-v2 {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.script-progress-v2 {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
}

.script-list-v2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.script-item-v2 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
  transition: all 0.15s ease !important;
}

.script-item-v2:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.script-check-v2 {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
}

.script-item-v2.passed .script-check-v2 { background: rgba(34, 197, 94, 0.2) !important; color: #86efac !important; }
.script-item-v2.failed .script-check-v2 { background: rgba(239, 68, 68, 0.2) !important; color: #fca5a5 !important; }
.script-item-v2.partial .script-check-v2 { background: rgba(245, 158, 11, 0.2) !important; color: #fcd34d !important; }

.script-text-v2 {
  flex: 1 !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

.script-percent-v2 {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Calendar V2 */
.calendar-grid-v2 {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
}

.cal-day-v2 {
  aspect-ratio: 1 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.cal-day-v2:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.cal-day-v2.worked {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1)) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #86efac !important;
}

.cal-day-v2.partial {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.1)) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #fcd34d !important;
}

.cal-day-v2.missed {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.08)) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
  color: #fca5a5 !important;
}

.calendar-summary-v2 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

.cal-stat-v2 {
  text-align: center !important;
  padding: 12px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.cal-stat-label-v2 {
  display: block !important;
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  margin-bottom: 4px !important;
}

.cal-stat-value-v2 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #f0f4ff !important;
}

.day-details-v2 {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

.day-details-header-v2 {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #f0f4ff !important;
}

.day-details-close-v2 {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.5) !important;
  cursor: pointer !important;
  font-size: 16px !important;
}

.day-details-stats-v2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

/* Footer V2 */
.modal-footer-v2 {
  padding: 14px 20px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.footer-meta-v2 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}

.meta-item-v2 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.meta-icon-v2 {
  font-size: 14px !important;
  opacity: 0.6 !important;
}

.meta-label-v2 {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  text-transform: uppercase !important;
}

.meta-value-v2 {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: 'SF Mono', Monaco, Consolas, monospace !important;
}

/* Empty State V2 */
.empty-state-v2 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 30px 20px !important;
  text-align: center !important;
}

.empty-icon-v2 {
  font-size: 32px !important;
  margin-bottom: 10px !important;
  opacity: 0.4 !important;
}

.empty-text-v2 {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Mobile V2 */
@media (max-width: 600px) {
  .profile-header-v2 {
    flex-wrap: wrap !important;
    padding: 16px !important;
  }
  
  .profile-actions-v2 {
    width: 100% !important;
    justify-content: flex-end !important;
    margin-top: 12px !important;
  }
  
  .stats-grid-v2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .balance-row-v2,
  .calendar-summary-v2 {
    grid-template-columns: 1fr !important;
  }
  
  .modal-tabs-v2 {
    padding: 10px 14px !important;
  }
  
  .modal-tab-v2 span {
    display: none !important;
  }
  
  .tab-panel-v2 {
    padding: 14px !important;
  }
}


/* ================================================== */
/* MOBILE OPTIMIZATION v4.15.25                       */
/* ================================================== */

/* Hide tab arrows on mobile */
@media (max-width: 768px) {
  .admin-tabs-arrow,
  .admin-tabs-arrow-left,
  .admin-tabs-arrow-right,
  #tabsArrowLeft,
  #tabsArrowRight {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* Make admin tabs scrollable without arrows */
  .admin-tabs-wrapper {
    gap: 0 !important;
  }
  
  .admin-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    padding: 0 10px !important;
    width: 100% !important;
  }
  
  .admin-tabs::-webkit-scrollbar {
    display: none !important;
  }
  
  /* Seller Dashboard - Timer on top */
  .seller-dashboard {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Recording block - priority on mobile */
  .recording-block,
  #recordingBlock,
  .recording-section {
    order: -1 !important;
    margin-bottom: 16px !important;
  }
  
  /* Compact recording UI on mobile */
  .recording-timer {
    font-size: 48px !important;
  }
  
  .recording-controls {
    gap: 8px !important;
  }
  
  .recording-controls button {
    min-width: 80px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
  
  /* Analytics block after recording */
  .seller-analytics-block,
  #sellerAnalyticsCompact {
    order: 1 !important;
  }
  
  /* Promotions block */
  .promotions-block,
  #promotionsBlock {
    order: 2 !important;
  }
  
  /* Rewards block */
  .rewards-section,
  #rewardsBlock {
    order: 3 !important;
  }
  
  /* Compact header on mobile */
  .header {
    padding: 12px 16px !important;
  }
  
  .header-logo {
    font-size: 18px !important;
  }
  
  .header-logo svg {
    width: 28px !important;
    height: 28px !important;
  }
  
  /* Compact language switcher */
  .lang-switcher .lang-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
  
  /* Mobile navigation menu */
  .mobile-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(180deg, rgba(18, 20, 30, 0.95), rgba(12, 14, 22, 0.98)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 8px 16px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 1000 !important;
    display: flex !important;
    justify-content: space-around !important;
    backdrop-filter: blur(20px) !important;
  }
  
  .mobile-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 10px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
  }
  
  .mobile-nav-item.active {
    color: #60a5fa !important;
    background: rgba(59, 130, 246, 0.1) !important;
  }
  
  .mobile-nav-item svg {
    width: 22px !important;
    height: 22px !important;
  }
  
  /* Content padding for bottom nav */
  main, .main-content {
    padding-bottom: 80px !important;
  }
  
  /* Compact cards on mobile */
  .admin-block,
  .seller-block,
  .card-block {
    padding: 16px !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
  }
  
  /* Compact form inputs */
  .input, .select, .textarea {
    padding: 12px 14px !important;
    font-size: 16px !important; /* Prevent zoom on iOS */
  }
  
  /* Full width buttons on mobile */
  .btn, .action-btn, .submit-btn {
    width: 100% !important;
    justify-content: center !important;
  }
  
  /* Stack form rows on mobile */
  .form-row, .admin-block-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  /* Account cards - compact view */
  .account-card {
    padding: 14px !important;
    padding-right: 60px !important;
  }
  
  .account-card .account-info-btn,
  .account-card .account-remove-btn,
  .account-card .account-restore-btn {
    width: 36px !important;
    height: 36px !important;
    right: 10px !important;
  }
  
  .account-card .account-info-btn {
    right: 52px !important;
  }
  
  /* Hide some meta items on mobile */
  .account-card .meta-item:nth-child(n+4) {
    display: none !important;
  }
  
  /* Compact modal on mobile - full width, safe-area */
  .modal {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin: 12px !important;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .account-modal-v2 {
    max-width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  
  .modal-overlay {
    padding: 0 !important;
  }
  
  /* Full screen modal on mobile */
  .profile-header-v2 {
    padding: 16px !important;
    flex-wrap: wrap !important;
  }
  
  .profile-avatar-v2 {
    width: 48px !important;
    height: 48px !important;
  }
  
  .profile-name-v2 {
    font-size: 16px !important;
  }
  
  .profile-actions-v2 {
    width: 100% !important;
    justify-content: space-between !important;
    margin-top: 12px !important;
  }
  
  /* Compact stats grid */
  .stats-grid-v2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  
  .stat-card-v2 {
    padding: 12px !important;
  }
  
  .stat-value-v2 {
    font-size: 18px !important;
  }
  
  /* Calendar - smaller cells */
  .calendar-grid-v2,
  .calendar-grid {
    gap: 4px !important;
  }
  
  .cal-day-v2,
  .calendar-day {
    font-size: 10px !important;
  }
}

/* Extra small screens */
@media (max-width: 400px) {
  .modal-tabs-v2 {
    padding: 8px 12px !important;
  }
  
  .modal-tab-v2 {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
  
  .modal-tab-v2 span {
    display: none !important;
  }
  
  .stats-grid-v2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .balance-row-v2 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  .profile-tags-v2 {
    display: none !important;
  }
}

/* Seller page - Timer first layout */
.seller-view-container {
  display: flex !important;
  flex-direction: column !important;
}

.seller-view-container .recording-section {
  order: -10 !important;
}

.seller-view-container .promotions-section {
  order: 5 !important;
}

.seller-view-container .analytics-section {
  order: 10 !important;
}

/* Force seller sections ordering on mobile */
@media (max-width: 768px) {
  .main-content {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Recording/Mic panel first */
  #micPanel {
    order: -100 !important;
  }
  
  /* Then analytics */
  #sellerAnalyticsCard {
    order: -50 !important;
  }
  
  /* Then points */
  #sellerPointsCard {
    order: -40 !important;
  }
  
  /* Then rewards */
  #sellerRewardsCard {
    order: -30 !important;
  }
  
  /* Then messages */
  #sellerMessagesCard {
    order: -20 !important;
  }
  
  /* Admin panel stays at end */
  #adminPanel {
    order: 100 !important;
  }
}


/* ================================================== */
/* TOUR/ONBOARDING FIX v4.15.26                       */
/* ================================================== */

/* Fix tour card positioning on mobile */
@media (max-width: 768px) {
  .tour-card {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: calc(100vw - 32px) !important;
    transform: none !important;
    margin: 0 auto !important;
  }
  
  /* Center vertically on mobile */
  .tour-card[style*="top"] {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  
  .tour-welcome-card {
    width: calc(100vw - 32px) !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    padding: 24px 20px !important;
  }
  
  .tour-card-desc {
    font-size: 12px !important;
  }
  
  .tour-card-title {
    font-size: 15px !important;
  }
  
  .tour-card-icon {
    font-size: 28px !important;
  }
  
  .tour-card-actions {
    flex-direction: row !important;
    gap: 8px !important;
  }
  
  .tour-card-actions button {
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
  
  .tour-step-dots {
    margin: 12px 0 !important;
  }
  
  /* Ensure overlay covers everything */
  .tour-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;
  }
}

/* Even smaller screens */
@media (max-width: 400px) {
  .tour-card {
    left: 8px !important;
    right: 8px !important;
    padding: 16px !important;
  }
  
  .tour-welcome-card {
    padding: 20px 16px !important;
  }
  
  .tour-welcome-title {
    font-size: 20px !important;
  }
  
  .tour-welcome-subtitle {
    font-size: 13px !important;
  }
  
  .tour-welcome-features {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  
  .tour-welcome-feature-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }
}

/* Hide request mics everywhere */
#userMetaRequestRow,
#requestMicsBtn,
.mic-request-row {
  display: none !important;
}


/* ================================================== */
/* ADMIN TABS FIX + PROMOS TAB v4.15.27              */
/* ================================================== */

/* Admin tabs wrapper - desktop */
.admin-tabs-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  position: relative !important;
}

.admin-tabs {
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex: 1 !important;
  scroll-behavior: smooth !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.admin-tabs::-webkit-scrollbar {
  display: none !important;
}

/* v5.2.80: REMOVED "Arrow buttons - desktop only" block - conflicts with overflow detection.
   Arrows are controlled by .has-overflow class, see lines 2139-2185 */

/* Promos Tab Styles */
.promos-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  margin-top: 16px !important;
}

.promo-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.05)) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}

.promo-card:hover {
  border-color: rgba(59, 130, 246, 0.4) !important;
  transform: translateY(-2px) !important;
}

.promo-card-badge {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

.promo-card-badge.active {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #86efac !important;
}

.promo-card-badge.scheduled {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fcd34d !important;
}

.promo-card-badge.expired {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
}

.promo-card-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #f0f4ff !important;
  margin-bottom: 8px !important;
  padding-right: 60px !important;
}

.promo-card-desc {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: 12px !important;
  line-height: 1.5 !important;
}

.promo-card-dates {
  display: flex !important;
  gap: 16px !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-bottom: 12px !important;
}

.promo-card-actions {
  display: flex !important;
  gap: 8px !important;
}

.promo-card-actions button {
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.promo-edit-btn {
  background: rgba(59, 130, 246, 0.15) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: #93c5fd !important;
}

.promo-delete-btn {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
}

.promos-empty {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 48px 20px !important;
  text-align: center !important;
}

.promos-empty-icon {
  font-size: 48px !important;
  margin-bottom: 16px !important;
  opacity: 0.5 !important;
}

.promos-empty-text {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

.promos-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

.promo-stat-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  text-align: center !important;
}

.promo-stat-value {
  display: block !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #f0f4ff !important;
  margin-bottom: 4px !important;
}

.promo-stat-label {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Mobile promos */
@media (max-width: 600px) {
  .promos-grid {
    grid-template-columns: 1fr !important;
  }
  
  .promos-stats-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ================================================== */
/* SELLER PROMOS CARD - Separate Block v4.15.28       */
/* ================================================== */

.seller-promos-card {
  background: linear-gradient(145deg, rgba(251, 191, 36, 0.08), rgba(245, 158, 11, 0.05)) !important;
  border: 1px solid rgba(251, 191, 36, 0.2) !important;
}

.seller-promos-card .card-title {
  color: #fcd34d !important;
}

.seller-promos-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 12px !important;
}

.seller-promo-item {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  transition: all 0.2s ease !important;
}

.seller-promo-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
}

.seller-promo-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #f0f4ff !important;
  margin-bottom: 6px !important;
}

.seller-promo-desc {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  line-height: 1.5 !important;
}

.seller-promo-dates {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  margin-top: 8px !important;
}

.seller-promos-empty {
  text-align: center !important;
  padding: 24px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 13px !important;
}

/* Mobile order for seller promos */
@media (max-width: 768px) {
  #sellerPromosCard {
    order: -90 !important;
  }
}


/* ================================================================== */
/* MOBILE REDESIGN v4.15.30 - COMPLETE OVERHAUL FOR PHONES            */
/* ================================================================== */

@media (max-width: 768px) {
  /* === RESET AND BASE === */
  * {
    -webkit-tap-highlight-color: transparent;
  }
  
  body {
    font-size: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }
  
  /* === HEADER MOBILE === */
  .header {
    padding: 10px 12px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: var(--bg) !important;
    border-bottom: 1px solid var(--stroke) !important;
  }
  
  .logo {
    font-size: 16px !important;
    gap: 6px !important;
  }
  
  .logo svg, .logo img {
    width: 24px !important;
    height: 24px !important;
  }
  
  .header-controls {
    gap: 6px !important;
  }
  
  .lang-switch {
    padding: 4px 8px !important;
    font-size: 11px !important;
    gap: 2px !important;
  }
  
  .lang-switch span {
    padding: 3px 6px !important;
  }
  
  .theme-toggle {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }
  
  .logout-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
    gap: 4px !important;
  }
  
  /* === MAIN CONTENT === */
  main, .main-content {
    padding: 12px !important;
    gap: 12px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* === CARDS === */
  .card {
    padding: 16px !important;
    border-radius: 16px !important;
    margin-bottom: 0 !important;
  }
  
  .card-title {
    font-size: 17px !important;
    margin-bottom: 12px !important;
  }
  
  /* === USER INFO CARD === */
  .user-meta {
    gap: 8px !important;
  }
  
  .user-meta-row {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
  
  /* === MIC PANEL - ЦЕНТРАЛЬНА ЧАСТИНА === */
  #micPanel, .mic-card {
    order: -100 !important;
    padding: 20px 16px !important;
  }
  
  .mic-center {
    text-align: center !important;
  }
  
  .timer {
    font-size: 56px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    margin: 16px 0 !important;
    font-family: 'SF Mono', 'Roboto Mono', monospace !important;
  }
  
  .status-text {
    font-size: 14px !important;
    margin-bottom: 20px !important;
    color: var(--muted) !important;
  }
  
  .mic-buttons {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  
  .mic-buttons button {
    min-width: 90px !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    flex: 1 !important;
    max-width: 120px !important;
  }
  
  #micOn {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
  }
  
  #micPause {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
  }
  
  #micOff {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
  }
  
  /* === SELLER ANALYTICS === */
  #sellerAnalyticsCard {
    order: -90 !important;
  }
  
  .seller-stats-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  
  .seller-stat-item {
    padding: 12px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
  }
  
  .seller-stat-label {
    font-size: 11px !important;
    color: var(--muted) !important;
    margin-bottom: 4px !important;
  }
  
  .seller-stat-value {
    font-size: 18px !important;
    font-weight: 600 !important;
  }
  
  /* === SELLER PROMOS === */
  #sellerPromosCard {
    order: -95 !important;
  }
  
  /* === SELLER POINTS & REWARDS === */
  #sellerPointsCard {
    order: -85 !important;
  }
  
  #sellerRewardsCard {
    order: -80 !important;
  }
  
  /* === MESSAGES === */
  #sellerMessagesCard {
    order: -70 !important;
  }
  
  /* === SCRIPT REQUIREMENTS === */
  .script-card {
    order: -60 !important;
  }
  
  /* === NAVIGATION TABS === */
  .nav-tabs, .seller-tabs {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    padding: 4px 0 !important;
    margin-bottom: 12px !important;
  }
  
  .nav-tabs::-webkit-scrollbar,
  .seller-tabs::-webkit-scrollbar {
    display: none !important;
  }
  
  .nav-tab, .seller-tab {
    padding: 10px 16px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
  }
  
  .nav-tab.active, .seller-tab.active {
    background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(59,130,246,0.1)) !important;
    border-color: rgba(59,130,246,0.4) !important;
    color: #93c5fd !important;
  }
  
  /* === SIDEBAR MENU (if present) === */
  .sidebar-menu, .mobile-menu {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--bg) !important;
    z-index: 999 !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .sidebar-menu.hidden, .mobile-menu.hidden {
    display: none !important;
  }
  
  .menu-item, .sidebar-item {
    padding: 14px 16px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
  }
  
  /* === MODALS FULLSCREEN === */
  .modal-overlay {
    padding: 0 !important;
  }
  
  .modal, .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  
  .modal-header {
    padding: 14px 16px !important;
    position: sticky !important;
    top: 0 !important;
    background: var(--panel) !important;
    z-index: 10 !important;
  }
  
  .modal-body {
    padding: 16px !important;
    overflow-y: auto !important;
  }
  
  .modal-close-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
  }
  
  /* === FORMS === */
  input, select, textarea {
    font-size: 16px !important; /* Prevents iOS zoom */
    padding: 12px 14px !important;
    border-radius: 10px !important;
  }
  
  .form-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  label {
    font-size: 13px !important;
  }
  
  /* === BUTTONS === */
  .btn, .btn-primary, .btn-secondary, .btn-danger, button[type="submit"] {
    padding: 12px 20px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    min-height: 44px !important; /* Touch target */
  }
  
  /* === ADMIN TABS ARROWS HIDDEN === */
  .admin-tabs-arrow,
  .admin-tabs-arrow-left,
  .admin-tabs-arrow-right,
  #tabsArrowLeft,
  #tabsArrowRight {
    display: none !important;
  }
  
  .admin-tabs-wrapper {
    padding: 0 !important;
  }
  
  .admin-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding: 4px 0 !important;
  }
  
  .admin-tab-btn {
    padding: 10px 14px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
  }
  
  /* === ACCOUNT CARDS === */
  .accounts-list {
    gap: 10px !important;
  }
  
  .account-card {
    padding: 14px !important;
    padding-right: 50px !important;
  }
  
  .account-name {
    font-size: 14px !important;
  }
  
  .account-meta {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  
  .account-meta .meta-item {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
  
  .account-info-btn,
  .account-remove-btn {
    width: 32px !important;
    height: 32px !important;
  }
  
  /* === HIDE ON MOBILE === */
  .desktop-only,
  .hide-mobile {
    display: none !important;
  }
  
  /* === FOOTER === */
  footer, .footer {
    padding: 12px !important;
    font-size: 11px !important;
    text-align: center !important;
  }
}

/* === EXTRA SMALL SCREENS === */
@media (max-width: 400px) {
  .header {
    padding: 8px 10px !important;
  }
  
  .logo {
    font-size: 14px !important;
  }
  
  .logout-btn span {
    display: none !important;
  }
  
  .timer {
    font-size: 48px !important;
  }
  
  .mic-buttons button {
    min-width: 70px !important;
    padding: 12px 14px !important;
    font-size: 12px !important;
  }
  
  .card {
    padding: 14px !important;
  }
  
  .card-title {
    font-size: 15px !important;
  }
  
  .seller-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* === LANDSCAPE PHONES === */
@media (max-width: 768px) and (orientation: landscape) {
  .timer {
    font-size: 40px !important;
  }
  
  .mic-buttons {
    flex-direction: row !important;
  }
  
  main, .main-content {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  
  .card {
    flex: 1 1 45% !important;
    min-width: 280px !important;
  }
}


/* ================================================================== */
/* ACCOUNT MODAL FIX v4.15.31                                         */
/* ================================================================== */

/* Ensure modal overlay shows properly */
#accountDetailsOverlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
  padding: 20px !important;
}

#accountDetailsOverlay:not(.hidden) {
  display: flex !important;
}

/* Account modal V2 - ensure proper display */
.account-modal-v2 {
  position: relative !important;
  background: linear-gradient(165deg, #13151f 0%, #0c0d12 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 720px !important;
  max-height: 90vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6) !important;
}

/* Modal content scrollable */
.modal-content-v2 {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 20px !important;
}

/* Modal footer */
.modal-footer-v2 {
  padding: 16px 20px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Mobile modal - fullscreen */
@media (max-width: 768px) {
  #accountDetailsOverlay {
    padding: 0 !important;
  }
  
  .account-modal-v2 {
    max-width: 100% !important;
    max-height: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
  }
  
  .profile-header-v2 {
    padding: 14px 16px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  
  .profile-avatar-v2 {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
  }
  
  .profile-main-v2 {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .profile-name-v2 {
    font-size: 16px !important;
  }
  
  .profile-name-row-v2 {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  
  .profile-tags-v2 {
    display: none !important; /* Hide on mobile */
  }
  
  .profile-actions-v2 {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    gap: 8px !important;
  }
  
  .action-btn-v2 {
    width: 36px !important;
    height: 36px !important;
  }
  
  .modal-close-v2 {
    width: 36px !important;
    height: 36px !important;
  }
  
  /* Tabs on mobile */
  .modal-tabs-v2 {
    display: flex !important;
    overflow-x: auto !important;
    gap: 4px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(0, 0, 0, 0.2) !important;
  }
  
  .modal-tabs-v2::-webkit-scrollbar {
    display: none !important;
  }
  
  .modal-tab-v2 {
    padding: 8px 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    gap: 6px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.6) !important;
  }
  
  .modal-tab-v2.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1)) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    color: #93c5fd !important;
  }
  
  .modal-tab-v2 span {
    display: none !important; /* Hide text, show only icon */
  }
  
  .modal-tab-v2 svg {
    width: 18px !important;
    height: 18px !important;
  }
  
  /* Stats grid on mobile */
  .stats-grid-v2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  
  .stat-card-v2 {
    padding: 12px !important;
  }
  
  .stat-value-v2 {
    font-size: 20px !important;
  }
  
  .stat-label-v2 {
    font-size: 10px !important;
  }
  
  /* AI card mobile */
  .ai-card-v2 {
    padding: 14px !important;
  }
  
  .ai-score-v2 {
    font-size: 32px !important;
  }
  
  /* Modal content padding */
  .modal-content-v2 {
    padding: 14px !important;
  }
  
  /* Footer mobile */
  .modal-footer-v2 {
    padding: 12px 14px !important;
  }
  
  .footer-grid-v2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    font-size: 11px !important;
  }
}

/* Account card buttons - FIXED for mobile */
.account-card {
  position: relative !important;
  padding-right: 110px !important; /* Space for buttons */
}

.account-info-btn,
.account-remove-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
}

.account-info-btn {
  right: 52px !important;
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08)) !important;
  border: 2px solid rgba(59, 130, 246, 0.35) !important;
  color: #60a5fa !important;
}

.account-remove-btn {
  right: 10px !important;
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05)) !important;
  border: 2px solid rgba(239, 68, 68, 0.25) !important;
  color: #f87171 !important;
}

@media (max-width: 480px) {
  .account-card {
    padding-right: 100px !important;
  }
  
  .account-info-btn,
  .account-remove-btn {
    width: 32px !important;
    height: 32px !important;
  }
  
  .account-info-btn {
    right: 48px !important;
  }
  
  .account-info-btn svg,
  .account-remove-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
}


/* ================================================================== */
/* CRITICAL MOBILE FIXES v4.15.33                                     */
/* ================================================================== */

/* === FORCE HIDE ARROWS ON MOBILE === */
@media screen and (max-width: 768px) {
  #tabsArrowLeft,
  #tabsArrowRight,
  .admin-tabs-arrow,
  .admin-tabs-arrow-left,
  .admin-tabs-arrow-right,
  button[id*="Arrow"],
  button[class*="arrow"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    pointer-events: none !important;
  }
}

/* === FIX MIC BUTTONS ALWAYS VISIBLE === */
.mic-buttons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important; /* v5.2.35: was visible — caused button ::before to leak */
  width: 100% !important;
  min-height: 50px !important;
}

.mic-buttons button {
  flex-shrink: 0 !important;
  min-width: 80px !important;
  min-height: 44px !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: hidden !important; /* v5.2.35: was visible — caused ::before shine to leak outside */
}

#micOn, #micPause, #micOff {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
}

/* Disabled state - but still visible */
#micOff:disabled,
#micPause:disabled {
  opacity: 0.5 !important;
  visibility: visible !important;
  display: inline-flex !important;
}

/* Enabled state - full visibility */
#micOff:not(:disabled),
#micPause:not(:disabled) {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
}

/* === MOBILE MIC PANEL FIX === */
@media screen and (max-width: 768px) {
  #micPanel {
    overflow: hidden !important; /* v5.2.35: was visible */
  }

  .mic-center {
    overflow: hidden !important; /* v5.2.35: was visible */
    padding-bottom: 20px !important;
  }
  
  .mic-buttons {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 0 4px !important;
  }
  
  .mic-buttons button {
    min-width: 70px !important;
    max-width: none !important;
    padding: 12px 8px !important;
    font-size: 11px !important;
  }
  
  #micOff {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    font-weight: 700 !important;
  }
}


/* ================================================================== */
/* FIX ACCOUNT MODAL v4.15.34                                         */
/* ================================================================== */

/* Ensure modal content captures all clicks */
.account-modal-v2 {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10000 !important;
}

.account-modal-v2 * {
  pointer-events: auto !important;
}

/* Overlay should only capture clicks on itself, not children */
#accountDetailsOverlay {
  pointer-events: auto !important;
}

#accountDetailsOverlay > .account-modal-v2 {
  pointer-events: auto !important;
}

/* Ensure buttons in modal are clickable */
.profile-actions-v2 button,
.modal-tabs-v2 button,
.action-btn-v2,
.modal-close-v2 {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 10001 !important;
}


/* ================================================================== */
/* NUCLEAR MOBILE FIX v4.15.35                                        */
/* ARROWS COMPLETELY REMOVED + MIC BUTTONS FIXED                      */
/* ================================================================== */

/* === HIDE ARROWS ON MOBILE - MAXIMUM SPECIFICITY === */
@media screen and (max-width: 768px) {
  /* Target by class */
  .hide-on-mobile,
  .admin-tabs-arrow,
  .admin-tabs-arrow-left,
  .admin-tabs-arrow-right {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;
    pointer-events: none !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(100%) !important;
    z-index: -9999 !important;
  }
  
  /* Target by ID */
  #tabsArrowLeft,
  #tabsArrowRight {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -99999px !important;
    pointer-events: none !important;
    clip: rect(0, 0, 0, 0) !important;
  }
  
  /* Target by attribute */
  button[id*="Arrow"],
  button[class*="arrow"],
  [aria-label*="Scroll"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
  }
  
  /* SVG inside arrows */
  .admin-tabs-arrow svg,
  #tabsArrowLeft svg,
  #tabsArrowRight svg {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}

/* === FIX MIC BUTTONS - NEVER HIDE === */
#micPanel .mic-buttons,
.mic-card .mic-buttons,
.mic-buttons {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 60px !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 100 !important;
  padding: 6px 0 !important;
}

#micOn,
#micPause,
#micOff {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  min-width: 80px !important;
  min-height: 44px !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: none !important;
  animation: none !important;
  transform: none !important;
  z-index: 101 !important;
}

/* STOP button specific */
#micOff {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: white !important;
  border: none !important;
}

#micOff:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  /* STILL VISIBLE! */
  display: inline-flex !important;
  visibility: visible !important;
}

#micOff:not(:disabled) {
  opacity: 1 !important;
  cursor: pointer !important;
}

/* v5.2.35: Kill all large box-shadows AND ::before shine on mic buttons — they overflow and cause layout shift */
#micOn,
#micPause,
#micOff {
  box-shadow: none !important;
  overflow: hidden !important;
}
/* Kill the ::before "shine effect" pseudo-element that leaks 70px outside each button */
#micOn::before,
#micPause::before,
#micOff::before,
#micOn::after,
#micPause::after,
#micOff::after {
  content: none !important;
  display: none !important;
}
#micOn:hover:enabled,
#micPause:hover:enabled,
#micOff:hover:enabled {
  box-shadow: none !important;
  transform: none !important;
  filter: brightness(1.12) !important;
}
#micOn:active:enabled,
#micPause:active:enabled,
#micOff:active:enabled {
  filter: brightness(0.92) !important;
  transform: scale(0.97) !important;
}
#micOn:disabled,
#micPause:disabled,
#micOff:disabled {
  box-shadow: none !important;
}

/* Mic button (blue) */
#micOn {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  color: white !important;
  border: none !important;
}

/* Pause button (gray) */
#micPause {
  background: rgba(100, 100, 100, 0.3) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#micPause:disabled {
  opacity: 0.4 !important;
  display: inline-flex !important;
  visibility: visible !important;
}

/* Mobile mic buttons */
@media screen and (max-width: 768px) {
  .mic-buttons {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 8px 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  #micOn, #micPause, #micOff {
    flex: 1 1 auto !important;
    min-width: 70px !important;
    max-width: none !important;
    padding: 12px 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important; /* v5.2.35: was visible — caused ::before shine to leak */
    text-overflow: clip !important;
  }
}

/* v5.2.35: changed from visible to hidden — prevent ::before shine from leaking */
#micPanel,
.mic-card,
.mic-center {
  overflow: hidden !important;
}


/* ================================================================== */
/* QA PANEL STYLES v4.15.39                                           */
/* ================================================================== */

.qa-panel {
  border: 2px dashed rgba(59, 130, 246, 0.3) !important;
  background: rgba(59, 130, 246, 0.05) !important;
}

.qa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.qa-actions button {
  flex: 1;
  min-width: 140px;
}

.btn-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: white !important;
  border: none !important;
}

.btn-success {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  color: white !important;
  border: none !important;
}

.qa-test-results {
  margin-top: 16px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  font-size: 13px;
  max-height: 300px;
  overflow-y: auto;
}

.qa-test-results table {
  border-collapse: collapse;
  width: 100%;
}

.qa-test-results th,
.qa-test-results td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.qa-test-results th {
  background: rgba(255, 255, 255, 0.05);
}

.no-data-hint {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}

/* Version update prompt */
.version-update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 99999;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.version-update-banner button {
  background: white;
  color: #2563eb;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

.version-update-banner button:hover {
  background: #f0f0f0;
}


/* ================================================================== */
/* RESPONSIVE DESIGN v4.15.40 — PHONE / TABLET / DESKTOP              */
/* ================================================================== */

/* ===== CRITICAL: HIDE ARROWS ON ALL MOBILE SIZES ===== */
@media screen and (max-width: 1024px) {
  #tabsArrowLeft,
  #tabsArrowRight,
  .admin-tabs-arrow,
  .admin-tabs-arrow-left,
  .admin-tabs-arrow-right,
  .hide-on-mobile,
  button[id="tabsArrowLeft"],
  button[id="tabsArrowRight"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;
    pointer-events: none !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(100%) !important;
    overflow: hidden !important;
    z-index: -9999 !important;
  }
}

/* ===== PHONE (< 480px) ===== */
@media screen and (max-width: 480px) {
  /* Base container */
  body {
    font-size: 14px;
  }
  
  /* Header */
  .app-header {
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  
  .app-header .logo {
    font-size: 16px !important;
  }
  
  .app-header .lang-switcher button {
    padding: 4px 8px !important;
    font-size: 12px !important;
  }
  
  /* Main content */
  .app-main {
    padding: 8px !important;
  }
  
  /* Cards */
  .card, .settings-card, .admin-block {
    padding: 12px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }
  
  .card-title, .admin-block-title {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }
  
  /* User info */
  .user-info-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  
  .user-name {
    font-size: 18px !important;
  }
  
  .user-role {
    font-size: 12px !important;
    padding: 4px 10px !important;
  }
  
  /* Script section */
  .script-card, .requirements-section, .network-requirements {
    padding: 12px !important;
  }
  
  .requirements-section h3,
  .network-requirements h3 {
    font-size: 14px !important;
  }
  
  /* Buttons */
  .btn, button, .btn-primary, .btn-secondary {
    padding: 10px 14px !important;
    font-size: 13px !important;
    min-height: 42px !important;
  }
  
  /* Grid adjustments */
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  /* Forms */
  input, select, textarea {
    font-size: 16px !important; /* Prevent iOS zoom */
    padding: 12px !important;
  }
  
  /* Mic panel */
  #micPanel, .mic-card {
    padding: 12px !important;
  }
  
  .mic-buttons {
    flex-direction: row !important;
    gap: 6px !important;
  }
  
  .mic-buttons button {
    flex: 1 !important;
    min-width: auto !important;
    padding: 10px 8px !important;
    font-size: 12px !important;
  }
  
  /* Timer */
  #micTimer, .mic-timer {
    font-size: 36px !important;
  }
  
  /* Rewards/Promos */
  .rewards-card, .promos-card, .seller-promos-card {
    padding: 12px !important;
  }
  
  /* Navigation menu (mobile sheet) */
  .nav-sheet {
    width: 85% !important;
    max-width: 300px !important;
  }
  
  .nav-sheet .nav-item {
    padding: 14px 16px !important;
    font-size: 15px !important;
  }
  
  /* Modal */
  .modal, .account-modal-overlay, .modal-overlay {
    padding: 0 !important;
  }
  
  .modal-content, .account-modal-v2 {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
}

/* ===== TABLET (481px - 768px) ===== */
@media screen and (min-width: 481px) and (max-width: 768px) {
  body {
    font-size: 15px;
  }
  
  .app-header {
    padding: 10px 16px !important;
  }
  
  .app-main {
    padding: 12px !important;
  }
  
  .card, .settings-card {
    padding: 16px !important;
  }
  
  /* Grid - 2 columns on tablet */
  .grid-3, .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Admin tabs - horizontal scroll */
  .admin-tabs-wrapper {
    padding: 0 !important;
  }
  
  .admin-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 4px !important;
  }
  
  .admin-tabs::-webkit-scrollbar {
    display: none !important;
  }
  
  .admin-tab-btn {
    flex-shrink: 0 !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  
  /* Mic buttons */
  .mic-buttons {
    gap: 10px !important;
  }
  
  .mic-buttons button {
    min-width: 80px !important;
    padding: 12px 16px !important;
  }
  
  #micTimer {
    font-size: 48px !important;
  }
  
  /* Modal */
  .modal-content, .account-modal-v2 {
    width: 95% !important;
    max-width: 600px !important;
    height: auto !important;
    max-height: 90vh !important;
    border-radius: 16px !important;
  }
}

/* ===== SMALL DESKTOP (769px - 1024px) ===== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .app-main {
    padding: 16px !important;
  }
  
  /* Still hide arrows on small desktop */
  #tabsArrowLeft, #tabsArrowRight, .admin-tabs-arrow {
    display: none !important;
  }
  
  .admin-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .grid-4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ===== LARGE DESKTOP (> 1024px) ===== */
@media screen and (min-width: 1025px) {
  /* Show arrows only on large desktop */
  #tabsArrowLeft, #tabsArrowRight, .admin-tabs-arrow {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
    left: auto !important;
  }
}

/* ===== LANDSCAPE PHONE ===== */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .app-header {
    padding: 6px 12px !important;
  }
  
  .card, .settings-card {
    padding: 10px !important;
  }
  
  #micTimer {
    font-size: 32px !important;
  }
  
  .mic-buttons button {
    padding: 8px 12px !important;
  }
}

/* ===== FIX: Seller page layout ===== */
.seller-dashboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media screen and (max-width: 768px) {
  .seller-dashboard {
    gap: 12px;
  }
  
  .seller-dashboard > * {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ===== FIX: Requirements/Script section ===== */
.requirements-section,
.network-requirements,
.script-requirements-card {
  width: 100% !important;
  box-sizing: border-box !important;
}

@media screen and (max-width: 768px) {
  .requirements-buttons,
  .script-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .requirements-buttons button,
  .script-actions button {
    flex: 1 1 auto !important;
    min-width: 120px !important;
  }
}

/* ===== FIX: Rewards empty state ===== */
.rewards-empty,
.promos-empty {
  padding: 24px 16px !important;
  text-align: center !important;
}

.rewards-empty svg,
.promos-empty svg {
  width: 48px !important;
  height: 48px !important;
  opacity: 0.5 !important;
}

@media screen and (max-width: 480px) {
  .rewards-empty,
  .promos-empty {
    padding: 20px 12px !important;
  }
  
  .rewards-empty svg,
  .promos-empty svg {
    width: 40px !important;
    height: 40px !important;
  }
}


/* ================================================================== */
/* PERSONALIZATION TAB STYLES v4.15.41                                */
/* ================================================================== */

.personalization-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
}

.form-section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.form-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.form-label .input {
  font-size: 14px;
}

.textarea {
  resize: vertical;
  min-height: 80px;
}

.form-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

.form-hint code {
  background: rgba(59, 130, 246, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}

.scoring-weights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.weight-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.weight-input {
  width: 60px !important;
  text-align: center;
  padding: 8px !important;
}

.form-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.generate-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.generate-buttons button {
  flex: 1;
  min-width: 180px;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-outline:hover {
  background: rgba(59, 130, 246, 0.1);
}

.generated-preview {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 12px;
  padding: 20px;
  margin-top: 24px;
}

.generated-preview h4 {
  margin: 0 0 16px 0;
  color: #22c55e;
}

.generated-content {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 16px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  max-height: 400px;
  overflow-y: auto;
}

.preview-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

@media (max-width: 768px) {
  .form-section {
    padding: 16px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .scoring-weights {
    grid-template-columns: 1fr 1fr;
  }
  
  .generate-buttons {
    flex-direction: column;
  }
  
  .generate-buttons button {
    width: 100%;
  }
}

/* ================================================================== */
/* IMPROVED EMPTY STATES v4.15.41                                     */
/* ================================================================== */

.empty-state-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

.empty-state-v2 .empty-icon {
  width: 48px;
  height: 48px;
  opacity: 0.4;
  margin-bottom: 16px;
}

.empty-state-v2 .empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.empty-state-v2 .empty-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  max-width: 300px;
}

.empty-state-v2 .empty-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.empty-state-v2 .btn-small {
  padding: 8px 16px;
  font-size: 13px;
}

/* Script requirements - improved */
.script-requirements-empty {
  padding: 24px;
  text-align: center;
}

.script-requirements-empty .empty-message {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.script-requirements-empty .btn-refresh {
  background: var(--primary);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
}


/* ================================================================== */
/* MIC STATE INDICATOR v4.15.42                                       */
/* ================================================================== */

.mic-state-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.state-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: none;
}

/* IDLE state */
.mic-state-idle {
  background: rgba(100, 100, 100, 0.2);
  color: #888;
  border: 2px solid #666;
}

.mic-state-idle .state-dot {
  background: #888;
}

.mic-state-idle .state-label::after {
  content: 'IDLE';
}

/* RECORDING state */
.mic-state-recording {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 2px solid #ef4444;
}

.mic-state-recording .state-dot {
  background: #ef4444;
  animation: pulse-recording 1s ease-in-out infinite;
}

.mic-state-recording .state-label::after {
  content: 'RECORDING';
}

@keyframes pulse-recording {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* PAUSED state */
.mic-state-paused {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 2px solid #f59e0b;
}

.mic-state-paused .state-dot {
  background: #f59e0b;
  animation: blink-paused 1s steps(2, start) infinite;
}

.mic-state-paused .state-label::after {
  content: 'PAUSED';
}

@keyframes blink-paused {
  to { visibility: hidden; }
}

/* Theme adaptations */
body.theme-light .mic-state-idle {
  background: rgba(150, 150, 150, 0.15);
  border-color: #999;
  color: #666;
}

body.theme-light .mic-state-idle .state-dot {
  background: #999;
}


/* ================================================================== */
/* CRITICAL MOBILE FIXES v4.15.43                                     */
/* ================================================================== */

/* Fix footer position - always at bottom */
.footer {
  width: 100%;
  text-align: center;
  padding: 16px;
  margin-top: auto;
}

/* App wrapper flex layout — mobile only; desktop uses block */
@media (max-width: 768px) {
  .app-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  main, .main-content, #appSection {
    flex: 1;
  }
}

/* Center content properly */
.card, .admin-block, .settings-card {
  margin-left: auto;
  margin-right: auto;
}

/* ===== MOBILE SPECIFIC (< 768px) ===== */
@media (max-width: 768px) {
  /* Header fixes — keep rounded like landing page */
  .top-bar {
    position: sticky !important;
    top: 8px !important;
    margin: 8px auto 0 !important;
    border-radius: var(--radius-pill) !important;
    width: calc(100% - 16px) !important;
    max-width: 1200px !important;
    padding: 8px 16px !important;
    z-index: 1000 !important;
  }
  
  /* Brand/logo smaller on mobile */
  .brand-logo {
    width: 32px !important;
    height: 32px !important;
  }
  
  .brand-name {
    font-size: 14px !important;
  }
  
  /* v2.4.9: Keep language and theme visible on mobile (no display:none) */
  
  /* Footer - above mobile nav */
  .footer {
    padding-bottom: calc(var(--mobile-nav-height, 60px) + 16px) !important;
    margin-bottom: 0 !important;
  }
  
  /* Main content padding */
  main, .app-main {
    padding: 12px !important;
    padding-bottom: calc(var(--mobile-nav-height, 60px) + 40px) !important;
  }
  
  /* Cards - full width on mobile */
  .card, .admin-block {
    margin: 0 0 12px 0 !important;
    border-radius: 12px !important;
  }
  
  /* Admin tabs - NO horizontal scroll on mobile: wrap instead (scroll only tablet/desktop) */
  .admin-tabs-wrapper {
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: auto !important;
    scrollbar-width: none !important;
  }
  
  .admin-tabs-wrapper::-webkit-scrollbar {
    display: none !important;
  }
  
  .admin-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow-x: hidden !important;
    gap: 8px !important;
    padding: 8px 0 !important;
  }
  
  .admin-tab-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
  }
  
  /* Settings container mobile */
  .settings-container {
    flex-direction: column !important;
  }
  
  .settings-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  
  .settings-nav-btn {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 120px !important;
    justify-content: center !important;
    padding: 10px 8px !important;
    font-size: 12px !important;
  }
  
  .settings-content {
    width: 100% !important;
  }
  
  /* Mobile bottom nav - ensure proper display */
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
  }
  
  /* Mobile nav items - touch friendly */
  .mobile-nav-item {
    min-width: 60px !important;
    min-height: 56px !important;
    padding: 8px 4px !important;
  }
  
  .mobile-nav-item svg {
    width: 24px !important;
    height: 24px !important;
  }
  
  .mobile-nav-item span {
    font-size: 10px !important;
    margin-top: 2px !important;
  }
  
  /* Empty state centering */
  .empty-state, .no-accounts-message {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 40px 20px !important;
  }
  
  /* Profile section in settings - centered */
  .profile-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  .profile-avatar {
    margin-bottom: 12px !important;
  }
}

/* ===== VERY SMALL SCREENS (< 400px) ===== */
@media (max-width: 400px) {
  .top-bar {
    padding: 6px 8px !important;
  }
  
  .top-right {
    gap: 4px !important;
  }
  
  .btn-logout-new span {
    display: none !important;
  }
  
  .mobile-nav-item {
    min-width: 50px !important;
    padding: 6px 2px !important;
  }
  
  .mobile-nav-item span {
    font-size: 9px !important;
  }
}

/* ===== MOBILE SHEET/DRAWER FIXES ===== */
.mobile-sheet {
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  max-height: 70vh !important;
  border-radius: 16px 16px 0 0 !important;
  z-index: 10000 !important;
}

.mobile-sheet-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 9999 !important;
}

.mobile-sheet-nav-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.mobile-sheet-nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

.mobile-sheet-nav-item:active {
  background: rgba(255, 255, 255, 0.1) !important;
}


/* ================================================================== */
/* MOBILE SHEET - ENSURE BOTTOM POSITION v4.15.43                     */
/* ================================================================== */

@media (max-width: 768px) {
  .mobile-sheet {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
    border-radius: 20px 20px 0 0 !important;
  }
  
  .mobile-sheet.open {
    transform: translateY(0) !important;
  }
  
  /* Ensure overlay covers full screen */
  .mobile-sheet-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    opacity: 0;
    transition: opacity 0.3s ease !important;
  }
  
  .mobile-sheet-overlay.visible {
    opacity: 1;
  }
}

/* ================================================================== */
/* FOOTER - ABSOLUTELY AT BOTTOM                                      */
/* ================================================================== */

html, body {
  min-height: 100vh;
}

/* Mobile: flex layout for footer at bottom; Desktop: block — page grows */
@media (max-width: 768px) {
  .app-wrapper {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
  }
  main, #appSection {
    flex: 1 1 auto !important;
  }
}

.footer {
  flex-shrink: 0 !important;
  margin-top: auto !important;
  width: 100% !important;
  text-align: center !important;
  padding: 20px 16px !important;
  font-size: 12px !important;
  opacity: 0.6 !important;
}

@media (max-width: 768px) {
  .footer {
    padding-bottom: calc(var(--mobile-nav-height, 60px) + 20px) !important;
  }
}

/* ================================================================== */
/* CENTER CONTENT - ALL SCREEN SIZES                                  */
/* ================================================================== */

.empty-state,
.no-data-message,
.loading-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 200px !important;
  padding: 40px 20px !important;
}

.empty-state img,
.empty-state svg,
.empty-state .empty-icon {
  max-width: 120px !important;
  margin-bottom: 20px !important;
  opacity: 0.5 !important;
}

/* The decorative rule above also caught the small functional .mh-i icon inside
   an empty state's button: margin-bottom pushed the drawing ~10px above its
   centred wrapper and opacity dimmed it next to full-strength text. Buttons
   keep their icons intact; the big decorative icon is untouched. */
.empty-state button .mh-i svg {
  max-width: none !important;
  margin-bottom: 0 !important;
  opacity: 1 !important;
}


/* ================================================================== */
/* SETTINGS NAV - ONLY VISIBLE IN TAB-SETTINGS v4.15.44              */
/* ================================================================== */

/* Ensure settings-nav is only visible when tab-settings is active */
#tab-settings:not(.active) .settings-nav,
#tab-settings:not(.active) .settings-container {
  display: none !important;
}

/* Settings container proper layout */
#tab-settings.active .settings-container {
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  gap: 24px !important;
}

#tab-settings.active .settings-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  position: sticky !important;
  top: 100px !important;
  height: fit-content !important;
  background: var(--panel) !important;
  padding: 16px !important;
  border-radius: 14px !important;
  border: 1px solid var(--stroke) !important;
}

/* Settings nav buttons - normal size, not full width */
.settings-nav-btn {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: var(--muted) !important;
  transition: all 0.15s ease !important;
}

.settings-nav-btn:hover {
  background: var(--stroke) !important;
  color: var(--ink) !important;
}

.settings-nav-btn.active {
  background: rgba(59, 130, 246, 0.15) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}

/* Mobile settings - horizontal row */
@media (max-width: 900px) {
  #tab-settings.active .settings-container {
    grid-template-columns: 1fr !important;
  }
  
  #tab-settings.active .settings-nav {
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px !important;
    margin-bottom: 16px !important;
  }
  
  .settings-nav-btn {
    flex: 0 1 auto !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
}


/* ================================================================== */
/* CRITICAL MOBILE BOTTOM NAV FIX v4.15.46                            */
/* Forces horizontal bottom navigation, NO vertical right side menu   */
/* ================================================================== */

/* Reset any conflicting styles */
@media (max-width: 768px) {
  /* FORCE mobile-bottom-nav to be HORIZONTAL at BOTTOM */
  .mobile-bottom-nav,
  #mobileBottomNav {
    display: flex !important;
    flex-direction: row !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    background: linear-gradient(180deg, rgba(12, 12, 18, 0.98), rgba(8, 8, 12, 0.99)) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
    margin: 0 !important;
    z-index: 9999 !important;
    box-shadow: none !important; /* v2.4.8: removed upward shadow */
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Inner container - HORIZONTAL */
  .mobile-bottom-nav-inner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    padding: 0 8px !important;
    margin: 0 !important;
  }
  
  /* Each nav item - vertical icon + text */
  .mobile-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    min-width: 50px !important;
    max-width: 80px !important;
    height: 56px !important;
    padding: 4px 8px !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    gap: 2px !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  .mobile-nav-item svg {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
  }
  
  .mobile-nav-item span {
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  
  .mobile-nav-item.active {
    color: var(--accent, #3b7dff) !important;
    background: rgba(59, 125, 255, 0.12) !important;
  }
  
  /* Prevent ANY overflow/horizontal scroll */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  /* Body padding for bottom nav */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)) !important;
  }
  
  /* Main content padding */
  main, 
  .app-main, 
  .main-content,
  #appSection,
  .app-wrapper > main {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
  }
  
  /* Footer above mobile nav */
  .footer {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
    margin-bottom: 0 !important;
  }
}

/* Light theme adjustments */
@media (max-width: 768px) {
  body.theme-light .mobile-bottom-nav,
  body.theme-light #mobileBottomNav {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 248, 252, 0.99)) !important;
    border-top-color: rgba(0, 0, 0, 0.08) !important;
  }
  
  body.theme-light .mobile-nav-item {
    color: rgba(0, 0, 0, 0.5) !important;
  }
  
  body.theme-light .mobile-nav-item.active {
    color: var(--accent, #3b7dff) !important;
    background: rgba(59, 125, 255, 0.1) !important;
  }
}

/* Mobile sheet - ensure it's a bottom sheet, not side panel */
@media (max-width: 768px) {
  .mobile-sheet,
  #mobileMoreSheet {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 70vh !important;
    border-radius: 20px 20px 0 0 !important;
    transform: translateY(100%) !important;
    z-index: 10001 !important;
  }
  
  .mobile-sheet.open,
  #mobileMoreSheet.open {
    transform: translateY(0) !important;
  }
  
  .mobile-sheet-overlay,
  #mobileSheetOverlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 10000 !important;
  }
}

/* Desktop - hide mobile nav completely */
@media (min-width: 769px) {
  .mobile-bottom-nav,
  #mobileBottomNav,
  .mobile-sheet-overlay,
  .mobile-sheet {
    display: none !important;
  }
}



/* ===== SYSTEM STATUS BADGE (v4.15.60) ===== */
/* v5.1.7: HIDDEN ALWAYS - too distracting, especially on mobile */
.system-status-badge {
  display: none !important;
}



/* ===== MOBILE UX IMPROVEMENTS v4.15.60 ===== */

/* Account info button - larger tap target on mobile */
@media (max-width: 768px) {
  .account-info-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    right: 52px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    border-radius: 12px !important;
    background: rgba(var(--accent-2-rgb, 74, 222, 128), 0.15) !important;
    border: 1px solid rgba(var(--accent-2-rgb, 74, 222, 128), 0.3) !important;
  }
  
  .account-info-btn:hover,
  .account-info-btn:active {
    transform: translateY(-50%) scale(1.05) !important;
    background: rgba(var(--accent-2-rgb, 74, 222, 128), 0.25) !important;
  }
  
  .account-remove-btn,
  .account-restore-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 18px !important;
    border-radius: 12px !important;
  }
  
  /* Account card - better mobile layout */
  .account-card {
    min-height: 72px !important;
    padding: 12px 110px 12px 16px !important;
    position: relative !important;
  }
  
  .account-card .acc-name,
  .account-card .acc-login {
    font-size: 15px !important;
  }
  
  .account-card .acc-role,
  .account-card .acc-network,
  .account-card .acc-region {
    font-size: 12px !important;
  }
}

/* Bottom sheet style for account details modal on mobile */
@media (max-width: 480px) {
  #accountDetailsOverlay .modal-v2,
  .modal-overlay .modal-v2 {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    max-height: 90vh !important;
    height: auto !important;
    border-radius: 20px 20px 0 0 !important;
    animation: mobileSheetUp 0.3s ease-out !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  @keyframes mobileSheetUp {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  /* Drag handle for bottom sheet */
  #accountDetailsOverlay .modal-v2::before,
  .modal-overlay .modal-v2::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(128, 128, 128, 0.4);
    border-radius: 2px;
    margin: 8px auto 12px auto;
  }
  
  /* Modal tabs - horizontal scroll on mobile */
  .modal-tabs-v2 {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding-bottom: 4px !important;
  }
  
  .modal-tabs-v2::-webkit-scrollbar {
    display: none !important;
  }
  
  .modal-tab-v2 {
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  
  /* Modal actions - full width buttons */
  .modal-actions-v2 {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  
  .modal-actions-v2 button {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 15px !important;
  }
}

/* Tables on mobile - cards view */
@media (max-width: 480px) {
  .reports-table,
  .data-table {
    display: block !important;
  }
  
  .reports-table thead,
  .data-table thead {
    display: none !important;
  }
  
  .reports-table tbody,
  .data-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .reports-table tr,
  .data-table tr {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 12px !important;
    background: var(--bg-2) !important;
    border-radius: 12px !important;
    gap: 8px !important;
  }
  
  .reports-table td,
  .data-table td {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    border: none !important;
  }
  
  .reports-table td::before,
  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
  }
}

/* Filter inputs on mobile - better sizing */
@media (max-width: 768px) {
  .filter-input,
  .search-input,
  input[type="search"],
  .accounts-search input {
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 10px 14px !important;
    border-radius: 12px !important;
  }
  
  /* Prevent zoom on iOS for selects too */
  select {
    font-size: 16px !important;
    min-height: 44px !important;
  }
}

/* ===== SELLER MOBILE CONTAINER v5.2.2 FIXED ===== */
.seller-mobile-container {
  width: 100%;
  padding: 0;
  padding-bottom: 70px; /* Only for bottom nav */
}

.seller-tab {
  display: none;
  width: 100%;
  padding: 10px;
  white-space: normal !important;
}

.seller-tab.active {
  display: block !important;
}

.seller-tab.hidden {
  display: none !important;
}

.seller-tab-header {
  padding: 10px 4px;
  background: var(--bg);
}

.seller-tab-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.seller-tab-body {
  padding: 0;
  overflow: hidden;
  max-width: 100%;
}

/* v5.2.2: Seller mobile mode - COMPLETE FIX */
/* v5.2.7: Fixed scroll issue - override all body restrictions */
html.seller-mobile-mode,
body.seller-mobile-mode {
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

body.seller-mobile-mode #micPanel {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

body.seller-mobile-mode #micPanel * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.seller-mobile-mode #seller-tab-home:not(.hidden) {
  display: block !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

body.seller-mobile-mode #seller-tab-home.hidden {
  display: none !important;
}

body.seller-mobile-mode #appSection {
  padding-bottom: 80px;
  overflow: visible !important;
  height: auto !important;
  min-height: auto !important;
}

body.seller-mobile-mode .seller-mobile-container {
  min-height: auto !important;
  max-height: none !important;
  padding-bottom: 10px !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  height: auto !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

/* v5.2.7: Ensure seller tabs are scrollable */
body.seller-mobile-mode .seller-tab {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
  height: auto !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

body.seller-mobile-mode .seller-tab-body {
  overflow: hidden !important;
  overflow-y: visible !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
  height: auto !important;
}

/* v5.2.7: Ensure scripts content is scrollable */
body.seller-mobile-mode #sellerScriptsContent,
body.seller-mobile-mode #sellerPointsContent,
body.seller-mobile-mode #sellerSettingsContent {
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
  height: auto !important;
}

/* v5.2.7: Make sure nothing blocks touch events on content */
body.seller-mobile-mode .seller-scripts-list,
body.seller-mobile-mode .seller-script-block,
body.seller-mobile-mode .script-main-text,
body.seller-mobile-mode .seller-section {
  touch-action: pan-y !important;
}

/* Toast notifications - better mobile positioning */
/* v5.2.2: Improved toast positioning for mobile */
@media (max-width: 768px) {
  .toast-container {
    position: fixed !important;
    bottom: 90px !important;
    left: auto !important;
    right: 12px !important;
    z-index: 9999999 !important;
    max-width: calc(100vw - 24px) !important;
  }

  .toast {
    max-width: 100% !important;
    width: fit-content !important;
    min-width: 180px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
  }
}

/* Seller mobile view - position above 4-tab nav */
body.role-seller .toast-container,
body.seller-mobile-mode .toast-container {
  bottom: 100px !important;
}

/* ===== SELLER DESKTOP NAV — 4 big buttons v5.3.0 ===== */
/* Only visible on desktop (>768px) for seller role */
.seller-desktop-nav {
  display: none;
}

@media (min-width: 769px) {
  /* v7.1.0: Compact seller nav — the old 120px cards read as big and clunky.
     Now a slim horizontal pill row (icon + label side by side, ~56px tall). */
  body.role-seller .seller-desktop-nav {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 4px;
  }

  body.role-seller button.seller-desktop-nav-btn.seller-desktop-nav-btn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    /* height (not just min-height) — a global `button { min-height:40px }` rule
       outranks this one on specificity, so pin the height explicitly. */
    min-height: 56px !important;
    height: 56px !important;
    background: #18181b !important;
    border: 1px solid #27272a !important;
    border-radius: 12px !important;
    color: #e7e8ea !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
    padding: 0 16px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.role-seller button.seller-desktop-nav-btn.seller-desktop-nav-btn:hover {
    background: #22232a !important;
    border-color: #3f4658 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  }

  body.role-seller button.seller-desktop-nav-btn.seller-desktop-nav-btn:active {
    transform: translateY(0);
  }

  /* v10.3.1: the icon carries the accent, the label stays plain — a pill that
     is entirely blue when active competes with the primary action below it. */
  body.role-seller button.seller-desktop-nav-btn.seller-desktop-nav-btn .nav-icon {
    color: #8ea6d8;
    transition: color .18s ease, transform .18s ease;
  }
  body.role-seller button.seller-desktop-nav-btn.seller-desktop-nav-btn:hover .nav-icon {
    transform: scale(1.06);
  }
  body.role-seller button.seller-desktop-nav-btn.seller-desktop-nav-btn.active .nav-icon {
    color: #5b8cff;
  }

  body.role-seller button.seller-desktop-nav-btn.seller-desktop-nav-btn.active {
    background: rgba(59, 125, 255, 0.14) !important;
    border-color: rgba(59, 125, 255, 0.55) !important;
    color: #6ea2ff !important;
    box-shadow: none !important;
  }

  .seller-desktop-nav-btn .nav-icon {
    display: inline-flex;
    font-size: 20px;
    line-height: 0;
  }

  .seller-desktop-nav-btn .nav-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
  }

  .seller-desktop-nav-btn .nav-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  /* v5.5.0: Light theme overrides for seller nav buttons */
  body.theme-light.role-seller button.seller-desktop-nav-btn.seller-desktop-nav-btn {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #3f4a5c !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  }

  body.theme-light.role-seller button.seller-desktop-nav-btn.seller-desktop-nav-btn:hover {
    background: #f6f8fc !important;
    border-color: #cbd5e6 !important;
    color: #1e293b !important;
    box-shadow: 0 3px 8px rgba(16, 24, 40, 0.06);
  }

  body.theme-light.role-seller button.seller-desktop-nav-btn.seller-desktop-nav-btn.active {
    background: rgba(59, 125, 255, 0.09) !important;
    border-color: rgba(59, 125, 255, 0.45) !important;
    color: #2f6fe0 !important;
    box-shadow: none !important;
  }

  body.theme-light .seller-desktop-nav-btn .nav-icon svg {
    stroke: currentColor;
  }
}

/* Hide desktop nav on mobile — mobile uses bottom tab bar */
@media (max-width: 768px) {
  .seller-desktop-nav {
    display: none !important;
  }
}


/* ===== MOBILE NAVIGATION FIX v4.15.60 (P1.1 - P1.2) ===== */

/* Mobile: Make tab arrows always visible and large enough to tap */
@media (max-width: 768px) {
  /* Admin tabs container - horizontal scroll */
  .admin-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    scroll-snap-type: x mandatory !important;
    gap: 4px !important;
    padding: 4px 50px !important; /* Leave space for arrows */
  }
  
  .admin-tabs::-webkit-scrollbar {
    display: none !important;
  }
  
  /* Tab arrows - fixed position, always visible */
  .admin-tabs-arrow,
  .admin-tabs-arrow-left,
  .admin-tabs-arrow-right {
    position: fixed !important;
    top: auto !important;
    bottom: 70px !important; /* Above bottom nav */
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    z-index: 1000 !important;
    background: rgba(var(--accent-rgb, 59, 125, 255), 0.95) !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }
  
  .admin-tabs-arrow-left,
  .admin-tabs-arrow:first-child {
    left: 10px !important;
    right: auto !important;
  }
  
  .admin-tabs-arrow-right,
  .admin-tabs-arrow:last-child {
    right: 10px !important;
    left: auto !important;
  }
  
  .admin-tabs-arrow svg,
  .admin-tabs-arrow-left svg,
  .admin-tabs-arrow-right svg {
    width: 24px !important;
    height: 24px !important;
    color: #fff !important;
  }
  
  .admin-tabs-arrow:active,
  .admin-tabs-arrow-left:active,
  .admin-tabs-arrow-right:active {
    transform: scale(0.9) !important;
    background: rgba(var(--accent-rgb, 59, 125, 255), 1) !important;
  }
  
  /* Each tab - scroll snap */
  .admin-tabs .admin-tab,
  .admin-tabs [class*="tab-"] {
    scroll-snap-align: center !important;
    flex-shrink: 0 !important;
    min-width: auto !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
}

/* Very small screens - even larger arrows */
@media (max-width: 400px) {
  .admin-tabs-arrow,
  .admin-tabs-arrow-left,
  .admin-tabs-arrow-right {
    width: 52px !important;
    height: 52px !important;
    bottom: 75px !important;
  }
  
  .admin-tabs-arrow-left,
  .admin-tabs-arrow:first-child {
    left: 8px !important;
  }
  
  .admin-tabs-arrow-right,
  .admin-tabs-arrow:last-child {
    right: 8px !important;
  }
}

/* ===== BOTTOM NAVIGATION v4.15.60 (P1.2) ===== */

/* Mobile bottom nav bar */
.mobile-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 60px !important;
  background: var(--panel) !important;
  border-top: 1px solid var(--stroke) !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  z-index: 999 !important;
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
}

.mobile-bottom-nav .nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  color: var(--muted) !important;
  text-decoration: none !important;
  font-size: 10px !important;
  gap: 4px !important;
  min-width: 60px !important;
  min-height: 44px !important;
  -webkit-tap-highlight-color: transparent !important;
}

.mobile-bottom-nav .nav-item.active {
  color: var(--accent) !important;
}

.mobile-bottom-nav .nav-item svg,
.mobile-bottom-nav .nav-item .nav-icon {
  width: 24px !important;
  height: 24px !important;
}

/* Ensure content doesnt get hidden under bottom nav */
@media (max-width: 768px) {
  .main-content,
  .app-content,
  #appSection {
    padding-bottom: 80px !important;
  }
  
  /* Modal should not be blocked by bottom nav */
  .modal-overlay,
  .modal-v2,
  #accountDetailsOverlay {
    z-index: 1100 !important;
  }
}

/* ===== HORIZONTAL SCROLL CONTAINERS (P1.1) ===== */

/* Any horizontal scrollable container */
.horizontal-scroll,
.tabs-container,
.filter-row,
.chips-row {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  touch-action: pan-x !important;
  overscroll-behavior-x: contain !important;
}

.horizontal-scroll::-webkit-scrollbar,
.tabs-container::-webkit-scrollbar,
.filter-row::-webkit-scrollbar,
.chips-row::-webkit-scrollbar {
  display: none !important;
}

/* Gradient fade on edges to indicate more content */
@media (max-width: 768px) {
  .admin-tabs-wrapper,
  .tabs-wrapper {
    position: relative !important;
  }
  
  .admin-tabs-wrapper::before,
  .tabs-wrapper::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 20px !important;
    background: linear-gradient(to right, var(--bg) 0%, transparent 100%) !important;
    z-index: 5 !important;
    pointer-events: none !important;
  }
  
  .admin-tabs-wrapper::after,
  .tabs-wrapper::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 20px !important;
    background: linear-gradient(to left, var(--bg) 0%, transparent 100%) !important;
    z-index: 5 !important;
    pointer-events: none !important;
  }
}

/* ===== PREVENT CLICK BLOCKING (P1.4) ===== */

/* Ensure all clickable elements are not blocked */
@media (max-width: 768px) {
  /* Force pointer-events on all buttons */
  button,
  .btn,
  [role="button"],
  .clickable,
  .account-info-btn,
  .account-remove-btn,
  .account-restore-btn,
  .admin-tabs-arrow {
    pointer-events: auto !important;
  }
  
  /* Prevent overlays from blocking when not active.
     The open state in this app is the ABSENCE of `.hidden` — 45 dialogs in
     index.html ship as `class="modal-overlay hidden"` and open by dropping that
     one class, the rest add `.active` (see the block at «`.hidden` is the closed
     state»). `.visible`/`.show` are set by almost nothing. So on a phone this
     pair used to hand `pointer-events: none` to every dialog that was actually
     open: the sheet was painted, and the finger went straight through it to the
     dashboard underneath. Only its buttons survived, because the rule above
     forces `pointer-events: auto` on every <button> — which is exactly the
     reported symptom of «Зараз на зміні»: the × and «Оновити» answer, the list
     does not scroll. Same class list as the desktop block, so both agree. */
  .modal-overlay.hidden,
  .overlay:not(.active) {
    pointer-events: none !important;
  }
  
  /* Ensure modals work when visible */
  .modal-overlay:not(.hidden),
  .modal-overlay.active,
  .modal-overlay.visible,
  .modal-overlay.show,
  .modal-overlay[data-visible="true"],
  .overlay.active {
    pointer-events: auto !important;
  }
}

/* ===== SWIPE GESTURES SUPPORT ===== */

.swipeable {
  touch-action: pan-x pan-y !important;
  overscroll-behavior: contain !important;
}

/* Cards that can be swiped */
.account-card,
.session-card,
.mic-card {
  touch-action: pan-y pinch-zoom !important;
}


/* ========== v4.15.63: SHIFT MANAGEMENT STYLES ========== */
.shift-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
}

.shift-status.shift-active {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

.shift-status.shift-inactive {
  background: var(--card);
}

.shift-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}

.shift-active .shift-indicator {
  background: #22c55e;
}

.shift-indicator.pulse {
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}

.shift-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shift-label {
  font-weight: 600;
  color: var(--ink);
}

.shift-time {
  font-size: 0.9em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ========== v4.15.63: KPI TABLE STYLES ========== */
.kpi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.kpi-table th,
.kpi-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.kpi-table th {
  background: var(--card);
  font-weight: 600;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.kpi-table tbody tr:hover {
  background: rgba(var(--accent-rgb), 0.05);
}

.compliance-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
}

.compliance-badge.good {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.compliance-badge.medium {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.compliance-badge.low {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* ========== v5.3.4: SCRIPT ASSESSMENT SECTION ========== */
.script-assessment {
  margin-bottom: 20px;
  padding: 0 4px;
}

.period-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.period-btn {
  padding: 8px 18px;
  border: 1px solid var(--stroke, rgba(255,255,255,0.12));
  border-radius: 10px;
  background: transparent;
  color: var(--muted, #a1a1aa);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.period-btn:hover {
  border-color: var(--accent, #8b5cf6);
  color: var(--ink, #fff);
}

.period-btn.active {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.5);
  color: #c4b5fd;
  font-weight: 600;
}

.script-stats-row {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.script-stat {
  flex: 1;
  background: var(--card, rgba(255,255,255,0.04));
  border: 1px solid var(--stroke, rgba(255,255,255,0.08));
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
}

.script-stat .stat-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink, #fff);
  margin-bottom: 4px;
}

.script-stat .stat-label {
  font-size: 11px;
  color: var(--muted, #a1a1aa);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ai-script-assessment {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  padding: 16px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* ===== SCRIPT ACCORDION ===== */
.script-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.script-accordion-item {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.script-accordion-item:last-child {
  border-bottom: none;
}

.script-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.15s;
}
.script-accordion-header:active {
  opacity: 0.7;
}

.script-accordion-title {
  font-weight: 600;
  font-size: 15px;
  color: #60a5fa;
  display: flex;
  align-items: center;
  gap: 8px;
}

.script-accordion-chevron {
  font-size: 12px;
  color: #60a5fa;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.script-accordion-item.open .script-accordion-chevron {
  transform: rotate(180deg);
}

.script-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 0 0 8px;
  font-size: 14px;
  line-height: 1.7;
}
.script-accordion-item.open .script-accordion-body {
  max-height: 600px;
  padding: 0 0 14px 8px;
}

.script-accordion-body .script-quote {
  margin: 8px 0;
  padding: 10px 14px;
  background: rgba(59, 130, 246, 0.1);
  border-left: 3px solid #3b82f6;
  border-radius: 0 8px 8px 0;
  font-style: italic;
}
.script-accordion-body .script-bullet {
  padding-left: 12px;
  margin: 4px 0;
}
.script-accordion-body .script-line {
  margin: 4px 0;
}

/* Light theme */
.theme-light .script-accordion-item {
  border-bottom-color: rgba(0,0,0,0.06);
}
.theme-light .script-accordion-title {
  color: #2563eb;
}
.theme-light .script-accordion-chevron {
  color: #2563eb;
}
.theme-light .script-accordion-body .script-quote {
  background: rgba(59, 130, 246, 0.06);
}

.theme-light .period-btn.active {
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
}

.theme-light .ai-script-assessment {
  background: rgba(139, 92, 246, 0.06);
  border-color: rgba(139, 92, 246, 0.2);
  color: rgba(0,0,0,0.75);
}

/* Mobile */
@media (max-width: 560px) {
  .script-stats-row {
    gap: 8px;
  }
  .script-stat {
    padding: 10px 8px;
  }
  .script-stat .stat-value {
    font-size: 22px;
  }
  .period-btn {
    padding: 6px 14px;
    font-size: 12px;
  }
  .ai-script-assessment {
    font-size: 13px;
    padding: 12px;
  }
  .script-accordion-title {
    font-size: 14px;
  }
  .script-accordion-body {
    font-size: 13px;
  }
}

/* ========== v4.15.63: SCRIPT BLOCKS STYLES ========== */
.script-blocks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.script-block-card {
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.script-block-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.block-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.block-order {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.block-title {
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}

.badge-required {
  font-size: 10px;
  padding: 3px 6px;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-radius: 4px;
  text-transform: uppercase;
}

.block-desc {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.block-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}

/* Responsive */
@media (max-width: 768px) {
  .kpi-table {
    font-size: 12px;
  }
  
  .kpi-table th,
  .kpi-table td {
    padding: 8px 6px;
  }
  
  .shift-status {
    padding: 10px 12px;
  }
}

/* ========== v4.15.78: SELLER CARD VISIBILITY ========== */
/* NOTE: Primary control is in HTML head critical CSS */
/* These are fallback rules with max specificity */
.seller-only,
section.seller-only,
section#shiftStatusCard,
section#scriptBlocksCard,
section#sellerKpiCard {
  display: none !important;
  visibility: hidden !important;
}

/* Show ONLY for seller role */
body[data-role="seller"] .seller-only,
body[data-role="seller"] section.seller-only,
body[data-role="seller"] section#shiftStatusCard,
body[data-role="seller"] section#scriptBlocksCard {
  display: block !important;
  visibility: visible !important;
}

/* Script blocks collapsed state */
.script-blocks-wrapper.collapsed {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.script-blocks-wrapper:not(.collapsed) {
  max-height: 2000px;
}

/* v4.15.64: Shift container improvements */
.shift-container {
  min-height: 60px;
}

/* v4.15.78: Seller cards margin (visibility controlled by critical CSS in HTML head) */
#shiftStatusCard,
#scriptBlocksCard,
#sellerKpiCard {
  margin-bottom: 16px;
}

/* ========== v4.15.66: LAUNCH PLAN (Network Onboarding) ========== */
.launch-plan-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.launch-plan-container {
  background: var(--card);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.launch-plan-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.launch-plan-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.launch-plan-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.launch-plan-progress .progress-bar {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.launch-plan-progress .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.launch-plan-progress .progress-text {
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
}

/* Blockers */
.launch-blockers {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.blockers-title {
  font-size: 16px;
  font-weight: 600;
  color: #ef4444;
  margin: 0 0 12px 0;
}

.blockers-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blocker-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.blocker-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 8px;
  color: #ef4444;
  font-size: 16px;
  flex-shrink: 0;
}

.blocker-content {
  flex: 1;
}

.blocker-title {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.blocker-message {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.blocker-fix-btn {
  padding: 6px 12px;
  font-size: 12px;
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.blocker-fix-btn:hover {
  background: #dc2626;
}

/* Next Actions */
.launch-next-actions {
  background: rgba(59, 130, 246, 0.08);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.launch-next-actions h4 {
  font-size: 14px;
  font-weight: 600;
  color: #3b82f6;
  margin: 0 0 8px 0;
}

.launch-next-actions ol {
  margin: 0;
  padding-left: 20px;
  color: var(--ink);
  font-size: 14px;
}

.launch-next-actions li {
  margin-bottom: 4px;
}

/* Steps */
.launch-steps h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 16px 0;
}

.steps-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.step-item:hover {
  border-color: var(--accent);
}

.step-item.completed {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.3);
}

.step-checkbox {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border);
  border-radius: 6px;
  color: transparent;
  transition: all 0.2s;
  flex-shrink: 0;
}

.step-item.completed .step-checkbox {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}

.step-content {
  flex: 1;
}

.step-title {
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
}

.step-desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.step-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 600;
}

.step-badge.required {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.step-badge.optional {
  background: rgba(156, 163, 175, 0.2);
  color: #6b7280;
}

/* Test Panel */
.launch-test-panel {
  background: var(--bg);
  border-radius: 12px;
  padding: 16px;
  margin: 20px 0;
}

.launch-test-panel h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 12px 0;
}

.test-results {
  margin-top: 12px;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
  font-family: monospace;
  font-size: 12px;
  max-height: 200px;
  overflow-y: auto;
}

/* Footer */
.launch-footer {
  text-align: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.btn-large {
  padding: 16px 32px;
  font-size: 18px;
  border-radius: 12px;
}

.launch-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

/* Responsive */
@media (max-width: 768px) {
  .launch-plan-section {
    padding: 12px;
  }
  
  .launch-plan-container {
    padding: 16px;
  }
  
  .launch-plan-title {
    font-size: 20px;
  }
  
  .blocker-item {
    flex-direction: column;
  }
  
  .blocker-fix-btn {
    width: 100%;
    padding: 10px;
  }
  
  .btn-large {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
  }
}

/* ===== v4.15.71: Personalization Grid Layout ===== */
.personalization-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.btn-lg {
  min-height: 48px;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .personalization-actions-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .personalization-actions-grid {
    grid-template-columns: 1fr;
  }
}

/* Script Blocks List */
.script-blocks-list {
  display: grid;
  gap: 12px;
}

.script-block-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  transition: all 0.15s ease;
}

.script-block-item:hover {
  border-color: var(--accent);
}

.script-block-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.script-block-title {
  font-weight: 600;
  color: var(--ink);
}

.script-block-key {
  font-size: 12px;
  color: var(--muted);
  font-family: monospace;
}

.script-block-badges {
  display: flex;
  gap: 6px;
}

.block-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
}

.block-badge.required {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.block-badge.optional {
  background: rgba(156, 163, 175, 0.2);
  color: #6b7280;
}

.block-badge.weight {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

/* Auto Rules List */
.auto-rules-list {
  display: grid;
  gap: 10px;
}

.auto-rule-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}

.auto-rule-name {
  font-weight: 500;
  color: var(--ink);
}

.auto-rule-points {
  font-weight: 700;
  color: var(--accent);
  min-width: 50px;
  text-align: right;
}

.auto-rule-points.negative {
  color: #ef4444;
}

/* Flashcards Grid */
.flashcards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.flashcard {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.15s ease;
  cursor: pointer;
}

.flashcard:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.flashcard.mandatory {
  border-left: 4px solid #16a34a;
}

.flashcard.optional {
  border-left: 4px solid #9ca3af;
}

.flashcard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.flashcard-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.flashcard-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 600;
}

.flashcard-badge.mandatory {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.flashcard-badge.optional {
  background: rgba(156, 163, 175, 0.2);
  color: #6b7280;
}

.flashcard-content {
  color: var(--ink-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.flashcard-phrases {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.phrase-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.1s ease;
}

.phrase-chip:hover {
  background: var(--accent);
  color: #fff;
}

.phrase-chip::after {
  content: "📋";
  font-size: 10px;
  opacity: 0.6;
}

/* Quick AI Tools Grid */
.ai-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

@media (min-width: 1200px) {
  .ai-tools-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .ai-tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .ai-tools-grid {
    grid-template-columns: 1fr;
  }
}

.ai-tool-card {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ai-tool-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.ai-tool-icon {
  font-size: 28px;
  margin-bottom: 10px;
}

.ai-tool-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 6px;
}

.ai-tool-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

.ai-tools-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.ai-filter-chip {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.1s ease;
}

.ai-filter-chip:hover,
.ai-filter-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Onboarding Widget */
.onboarding-widget {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  color: #fff;
}

.onboarding-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.onboarding-checklist {
  display: grid;
  gap: 10px;
}

.onboarding-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
}

.onboarding-item.done {
  background: rgba(34, 197, 94, 0.3);
}

.onboarding-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.onboarding-item.done .onboarding-check {
  background: #16a34a;
}

.onboarding-item-text {
  flex: 1;
  font-size: 14px;
}

/* ===== v4.15.71: Improved AI Tools Grid ===== */
.ai-tools-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (min-width: 1200px) {
  .ai-tools-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 900px) {
  .ai-tools-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .ai-tools-grid {
    grid-template-columns: 1fr !important;
  }
}

.ai-tools-grid .ai-tool-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-height: 90px !important;
  min-width: 0 !important;
  padding: 16px !important;
  border-radius: 12px !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--border-soft) !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  overflow: hidden !important;
}

.ai-tools-grid .ai-tool-btn:hover {
  border-color: var(--accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
}

.ai-tools-grid .ai-tool-icon {
  font-size: 24px !important;
  margin-bottom: 8px !important;
}

.ai-tools-grid .ai-tool-label {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  margin-bottom: 4px !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

.ai-tools-grid .ai-tool-desc {
  font-size: 12px !important;
  color: var(--muted) !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

/* ===== v4.15.72: Dashboard & Onboarding Widget ===== */
.dashboard-grid {
  display: grid;
  gap: 20px;
}

.onboarding-widget {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 24px;
  color: #fff;
}

.onboarding-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
}

.onboarding-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.3);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #22c55e;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 16px;
  font-weight: 600;
  min-width: 45px;
}

.onboarding-checklist {
  display: grid;
  gap: 10px;
}

.onboarding-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.onboarding-item.done {
  background: rgba(34, 197, 94, 0.3);
}

.onboarding-check {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  background: transparent;
  transition: all 0.2s;
}

/* v2.0.5: Fixed checkmark icons */
.onboarding-item.done .onboarding-check,
.onboarding-item.completed .onboarding-check {
  background: #00c853;
  border-color: #00c853;
}

.onboarding-item.done .onboarding-check::after,
.onboarding-item.completed .onboarding-check::after {
  content: "✓";
  color: white;
  font-weight: bold;
  font-size: 12px;
}

.onboarding-item:not(.done):not(.completed) .onboarding-check::after {
  content: "";
}

.onboarding-item-text {
  flex: 1;
  font-size: 14px;
}

.onboarding-link {
  color: #fff;
  opacity: 0.7;
  text-decoration: none;
  font-size: 16px;
  transition: opacity 0.2s;
}

.onboarding-link:hover {
  opacity: 1;
}

.onboarding-warning {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
}

/* Quick Stats */
.quick-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

.quick-stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
}

.quick-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}

.quick-stat-label {
  font-size: 13px;
  color: var(--muted);
}

/* Quick Actions */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.quick-action-btn {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.quick-action-btn:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

/* Reports Tab (combined Shifts + Timesheets) */
.reports-subtabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}

.reports-subtab {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
}

.reports-subtab.active,
.reports-subtab:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.reports-section {
  display: none;
}

.reports-section.active {
  display: block;
}

/* ===== v4.15.73: MOBILE UX IMPROVEMENTS ===== */

/* Mobile Bottom Navigation */
#mobileBottomNav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  z-index: 9999;
  background: rgba(12, 12, 18, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (max-width: 768px) {
  #mobileBottomNav {
    display: flex !important;
  }
  
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)) !important;
  }
  
  .main-container,
  .admin-main {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
  }
}

.mobile-bottom-nav-inner {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 8px;
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  min-width: 56px;
  min-height: 48px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-item svg {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

.mobile-nav-item.active {
  color: #60a5fa;
}

.mobile-nav-item:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

/* Tab Arrows on Mobile - Big & Visible */
@media (max-width: 768px) {
  .admin-tabs-arrow {
    display: flex !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    background: rgba(12, 12, 18, 0.95) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
  }
  
  .admin-tabs-arrow svg {
    width: 28px !important;
    height: 28px !important;
  }
  
  .admin-tabs-arrow-left {
    left: 4px !important;
  }
  
  .admin-tabs-arrow-right {
    right: 4px !important;
  }
  
  /* Tab scroll fade hints */
  .admin-tabs-wrapper::before,
  .admin-tabs-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 5;
  }
  
  .admin-tabs-wrapper::before {
    left: 48px;
    background: linear-gradient(90deg, rgba(12, 12, 18, 0.9) 0%, transparent 100%);
  }
  
  .admin-tabs-wrapper::after {
    right: 48px;
    background: linear-gradient(-90deg, rgba(12, 12, 18, 0.9) 0%, transparent 100%);
  }
}

/* Action Sheet */
.action-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.action-sheet-overlay:not(.hidden) {
  opacity: 1;
}

.action-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card-bg, #1a1a2e);
  border-radius: 20px 20px 0 0;
  z-index: 10001;
  max-height: 80vh;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  padding-bottom: env(safe-area-inset-bottom, 16px);
}

.action-sheet:not(.hidden) {
  transform: translateY(0);
}

.action-sheet-handle {
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  margin: 12px auto;
}

.action-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.action-sheet-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink, #fff);
}

.action-sheet-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: var(--ink, #fff);
  cursor: pointer;
}

.action-sheet-body {
  padding: 8px 16px 16px;
  max-height: 60vh;
  overflow-y: auto;
}

.action-sheet-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 12px;
  color: var(--ink, #fff);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.action-sheet-btn:hover,
.action-sheet-btn:active {
  background: rgba(255, 255, 255, 0.1);
}

.action-sheet-btn.danger {
  color: #ef4444;
}

.action-sheet-btn.danger:hover {
  background: rgba(239, 68, 68, 0.15);
}

.action-sheet-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Actions Button for Tables/Cards */
.actions-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 80px;
  min-height: 44px;
  padding: 10px 16px;
  background: rgba(96, 165, 250, 0.15);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 10px;
  color: #60a5fa;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.actions-btn:hover,
.actions-btn:active {
  background: rgba(96, 165, 250, 0.25);
}

/* Shift Widget Improvements */
.shift-widget {
  background: var(--card-bg, #1a1a2e);
  border: 1px solid var(--border-soft, rgba(255,255,255,0.1));
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}

.shift-widget-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.shift-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #6b7280;
}

.shift-status-dot.active {
  background: #22c55e;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.shift-status-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #fff);
}

.shift-timer {
  font-size: 36px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent, #60a5fa);
  text-align: center;
  margin: 16px 0;
}

.shift-buttons {
  display: flex;
  gap: 12px;
}

.shift-btn {
  flex: 1;
  min-height: 52px;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

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

.shift-btn.start {
  background: #22c55e;
  color: #fff;
}

.shift-btn.start:hover:not(:disabled) {
  background: #16a34a;
}

.shift-btn.end {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.shift-btn.end:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.25);
}

/* Body scroll lock when sheet is open */
body.sheet-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}

/* Light theme adjustments */
body.theme-light .action-sheet {
  background: #fff;
}

body.theme-light .action-sheet-btn {
  background: rgba(0, 0, 0, 0.05);
  color: #1a1a2e;
}

body.theme-light .action-sheet-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

body.theme-light #mobileBottomNav {
  background: rgba(255, 255, 255, 0.98);
  border-top-color: rgba(0, 0, 0, 0.1);
}

body.theme-light .mobile-nav-item {
  color: rgba(0, 0, 0, 0.5);
}

body.theme-light .mobile-nav-item.active {
  color: #2563eb;
}

/* ===== v4.15.74: Onboarding Improvements ===== */

.onboarding-check::after {
  content: "⬜";
}

.onboarding-item.done .onboarding-check::after {
  content: "✅";
}

.onboarding-action-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(96, 165, 250, 0.2);
  border: 1px solid rgba(96, 165, 250, 0.4);
  border-radius: 6px;
  color: #60a5fa;
  cursor: pointer;
  transition: all 0.15s ease;
}

.onboarding-action-btn:hover {
  background: rgba(96, 165, 250, 0.3);
}

.onboarding-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.onboarding-item.done .onboarding-action-btn {
  display: none;
}

.onboarding-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.onboarding-actions .btn-primary {
  width: 100%;
  padding: 14px 20px;
  font-size: 15px;
}

/* Hide actions when complete */
.onboarding-widget.complete .onboarding-actions {
  display: none;
}

.onboarding-widget.complete .onboarding-warning {
  display: none;
}

.onboarding-widget.complete {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

/* Blocking state indicators */
.blocking-disabled {
  opacity: 0.5;
  pointer-events: none;
  position: relative;
}

.blocking-disabled::after {
  content: "🔒";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
}

/* ===== v4.15.75: Script Blocks Editor ===== */

.script-blocks-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.script-blocks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.script-block-card {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s ease;
}

.script-block-card:hover {
  border-color: var(--accent);
}

.script-block-card.override {
  border-left: 4px solid #f59e0b;
}

.script-block-card.global-only {
  border-left: 4px solid #6b7280;
}

.script-block-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.script-block-order {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(96, 165, 250, 0.15);
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
}

.script-block-title {
  flex: 1;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.script-block-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.block-badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.block-badge.required {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.block-badge.optional {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}

.block-badge.source-global {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}

.block-badge.source-override {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.block-badge.weight {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

.block-badge.inactive {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.script-block-desc {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1.4;
}

.script-block-keywords {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.keyword-tag {
  padding: 3px 8px;
  background: rgba(96, 165, 250, 0.1);
  border-radius: 4px;
  font-size: 12px;
  color: var(--accent);
}

.script-block-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.script-block-actions .actions-btn {
  min-height: 40px;
  padding: 8px 14px;
}

/* Reorder buttons */
.reorder-btns {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reorder-btn {
  width: 36px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 6px;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s ease;
}

.reorder-btn:hover {
  background: rgba(96, 165, 250, 0.2);
}

.reorder-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Block Edit Modal */
.block-edit-modal {
  max-width: 600px;
}

.code-input {
  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.4;
}

.field-error {
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
}

.form-hint {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.btn-text {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}

.btn-text:hover {
  text-decoration: underline;
}

.block-source-info {
  padding: 12px;
  background: rgba(107, 114, 128, 0.1);
  border-radius: 8px;
  font-size: 13px;
  color: var(--muted);
  margin-top: 16px;
}

.block-source-info.override {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .script-block-header {
    flex-wrap: wrap;
  }
  
  .script-block-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .reorder-btns {
    flex-direction: row;
  }
  
  .reorder-btn {
    width: 44px;
    height: 44px;
  }
}

/* v4.15.75: Flashcard hints */
.flashcard-hint {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}

.flashcard-phrases {
  margin-top: 10px;
}

/* ===== v4.15.76: Hard Delete Modal ===== */

.hard-delete-modal {
  max-width: 480px;
}

.modal-header.danger {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: white;
  border-radius: 18px 18px 0 0;
  margin: -14px -14px 0;
  padding: 16px 18px;
}

.modal-header.danger h3 {
  color: white;
  font-size: 16px;
  font-weight: 700;
}

.hard-delete-modal .modal-header.danger .modal-close-btn {
  position: static !important;
  color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  font-size: 18px !important;
  padding: 0 !important;
  top: auto !important;
  right: auto !important;
}

.hard-delete-modal .modal-header.danger .modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  color: white !important;
}

.hard-delete-warning {
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.1);
  border-left: 4px solid #ef4444;
  border-radius: 6px;
  color: #ef4444;
  margin-bottom: 16px;
}

.hard-delete-target {
  padding: 12px;
  background: rgba(107, 114, 128, 0.1);
  border-radius: 8px;
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.hard-delete-target strong {
  font-size: 16px;
  color: var(--ink);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.checkbox-row label {
  font-size: 13px;
  color: var(--muted);
}

.btn-danger {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-danger:hover {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
}

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

/* ========== v4.15.78: NEW DASHBOARD DESIGN ========== */

/* Dashboard Container */
.dashboard-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.dashboard-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.dashboard-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--ink);
}

.dashboard-subtitle {
  font-size: 14px;
  color: var(--muted);
}

/* Stats Row */
.dashboard-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: transform 0.15s, box-shadow 0.15s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.stat-icon {
  font-size: 28px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(41, 98, 255, 0.1);
  border-radius: 12px;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.stat-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Dashboard Grid (2-column) */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

/* Dashboard Card */
.dashboard-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  overflow: hidden;
}

.dashboard-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.dashboard-card-icon {
  font-size: 24px;
}

.dashboard-card-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}

/* Onboarding Widget (Updated) */
.onboarding-widget {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

.onboarding-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2962ff, #00c853);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.progress-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  min-width: 40px;
  text-align: right;
}

.onboarding-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.onboarding-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(107, 114, 128, 0.05);
  border-radius: 10px;
  transition: background 0.15s;
}

.onboarding-item:hover {
  background: rgba(107, 114, 128, 0.1);
}

.onboarding-item.completed {
  background: rgba(0, 200, 83, 0.1);
}

.onboarding-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.onboarding-item.completed .onboarding-check {
  background: #00c853;
  border-color: #00c853;
}

.onboarding-item.completed .onboarding-check::after {
  content: '✓';
  color: white;
  font-size: 14px;
  font-weight: bold;
}

.onboarding-item-content {
  flex: 1;
  min-width: 0;
}

.onboarding-item-text {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.onboarding-item-hint {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.onboarding-cta-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(41, 98, 255, 0.1);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.onboarding-cta-btn:hover {
  background: rgba(41, 98, 255, 0.2);
}

.onboarding-item.completed .onboarding-cta-btn {
  opacity: 0.5;
  pointer-events: none;
}

.onboarding-warning {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 8px;
  color: #f59e0b;
  font-size: 13px;
}

/* Quick Actions Grid */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.quick-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 16px;
  background: rgba(107, 114, 128, 0.05);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  min-height: 100px;
}

.quick-action-card:hover {
  background: rgba(41, 98, 255, 0.1);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.quick-action-card:active {
  transform: translateY(0);
}

.qa-icon {
  font-size: 28px;
}

.qa-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.qa-hint {
  font-size: 11px;
  color: var(--muted);
}

/* Superadmin-only actions */
.superadmin-only-action {
  display: none;
}

body[data-role="superadmin"] .superadmin-only-action {
  display: flex;
}

.superadmin-only-card {
  display: none;
}

body[data-role="superadmin"] .superadmin-only-card {
  display: block;
}

/* System Status Grid */
.system-status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: rgba(107, 114, 128, 0.05);
  border-radius: 10px;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #6b7280;
}

.status-indicator.online {
  background: #00c853;
  box-shadow: 0 0 8px rgba(0, 200, 83, 0.5);
}

.status-indicator.offline {
  background: #ef4444;
}

.status-label {
  font-size: 12px;
  color: var(--muted);
}

.status-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

/* Admin Home Tab Visibility */
.admin-home-tab {
  display: none;
}

body[data-role="superadmin"] .admin-home-tab,
body[data-role="network_manager"] .admin-home-tab,
  display: block;
}

/* Make tab-home active for admins */
body[data-role="superadmin"] .admin-tab-btn[data-tab="tab-home"],
body[data-role="network_manager"] .admin-tab-btn[data-tab="tab-home"],
  display: inline-flex;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .dashboard-container {
    padding: 16px;
  }
  
  .dashboard-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .stat-card {
    padding: 12px;
  }
  
  .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
  
  .stat-value {
    font-size: 20px;
  }
  
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .dashboard-card {
    padding: 16px;
  }
  
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .quick-action-card {
    padding: 16px 12px;
    min-height: 90px;
  }
  
  .qa-icon {
    font-size: 24px;
  }
  
  .qa-title {
    font-size: 13px;
  }
  
  .system-status-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .dashboard-stats-row {
    grid-template-columns: 1fr 1fr;
  }
  
  .stat-card {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}

/* v4.15.78: Admin Home Button visibility */
.admin-home-btn {
  display: none;
}

/* v7.8.0 BUGFIX: was `body[data-role="..."] .admin-home-btn, body[data-role="..."] .admin-home-btn, display: inline-flex; }`
   — trailing comma + missing `{` made the whole block invalid → browsers silently
   dropped the rule, so Home tab stayed display:none for ALL roles including
   superadmin/network_manager. User could not scroll back to it because it had
   no width/box in the flow. */
body[data-role="superadmin"] .admin-home-btn,
body[data-role="network_manager"] .admin-home-btn {
  display: inline-flex;
}

/* Hide Home tab for sellers and region managers */
body[data-role="seller"] .admin-home-btn,
body[data-role="region_manager"] .admin-home-btn {
  display: none;
}

/* v4.15.78: Network selector for rules */
.network-selector-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: rgba(41, 98, 255, 0.08);
  border: 1px solid rgba(41, 98, 255, 0.2);
  border-radius: 10px;
}

.network-selector-row.superadmin-only {
  display: none;
}

body[data-role="superadmin"] .network-selector-row.superadmin-only {
  display: flex;
}

.inline-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.network-select {
  min-width: 200px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
}

.network-hint {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.network-hint.hidden {
  display: none;
}

@media (max-width: 768px) {
  .network-selector-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .network-select {
    width: 100%;
  }
}

/* ========== v4.15.79: MOBILE NAVIGATION IMPROVEMENTS ========== */

/* Better tab bar scroll on mobile */
.admin-tabs-list {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.admin-tabs-list::-webkit-scrollbar {
  display: none;
}

/* Tab scroll fade hint */
.admin-tabs-wrapper {
  position: relative;
}

.admin-tabs-wrapper::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(90deg, transparent, var(--card));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.admin-tabs-wrapper.has-scroll-right::after {
  opacity: 1;
}

/* Action sheet improvements */
.action-sheet {
  max-height: 70vh;
  overflow-y: auto;
}

.action-sheet-btn {
  min-height: 52px;
  font-size: 16px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* AI tools grid responsive */
.ai-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 1024px) {
  .ai-tools-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .ai-tools-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .ai-tools-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

.ai-tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 12px;
  min-height: 100px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}

.ai-tool-btn:hover {
  background: rgba(41, 98, 255, 0.1);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.ai-tool-btn:active {
  transform: translateY(0);
}

.ai-tool-icon {
  font-size: 28px;
}

.ai-tool-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.ai-tool-desc {
  font-size: 11px;
  color: var(--muted);
}

/* Shift controls responsive */
.shift-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.shift-filters,
.shift-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

@media (max-width: 768px) {
  .shift-controls {
    flex-direction: column;
  }
  
  .shift-filters,
  .shift-actions {
    width: 100%;
    justify-content: stretch;
  }
  
  .shift-filters > *,
  .shift-actions > * {
    flex: 1;
  }
}

/* Shift stats responsive */
.shift-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
  background: rgba(107, 114, 128, 0.05);
  border-radius: 10px;
  margin-bottom: 16px;
}

.shift-stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 12px;
  color: var(--muted);
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

@media (max-width: 480px) {
  .shift-stats {
    gap: 12px;
  }
  
  .shift-stat-item {
    flex: 1 1 45%;
  }
}

/* ========== v4.15.80: MOBILE UX FIXES ========== */

/* Tab arrows always visible and large on mobile */
@media (max-width: 768px) {
  .admin-tabs-arrow {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 48px !important;
    min-height: 48px !important;
    width: 48px;
    height: 48px;
    font-size: 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    z-index: 100;
  }
  
  .admin-tabs-arrow:active {
    background: rgba(41, 98, 255, 0.2);
    transform: scale(0.95);
  }
  
  /* Left arrow fixed position */
  .admin-tabs-arrow-left,
  #tabsArrowLeft {
    position: fixed;
    left: 8px;
    bottom: 80px;
    z-index: 1000;
  }
  
  /* Right arrow fixed position */
  .admin-tabs-arrow-right,
  #tabsArrowRight {
    position: fixed;
    right: 8px;
    bottom: 80px;
    z-index: 1000;
  }
  
  /* Tab bar improvements */
  .admin-tabs-list,
  #adminTabsScroll {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 0 12px;
  }
  
  .admin-tab-btn {
    scroll-snap-align: center;
    flex-shrink: 0;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
    white-space: nowrap;
  }
}

/* Better action buttons on mobile */
@media (max-width: 768px) {
  .table-actions,
  .row-actions,
  .account-actions {
    display: flex;
    gap: 4px;
  }
  
  .table-actions button,
  .row-actions button,
  .account-actions button,
  .btn-icon,
  .btn-icon-sm {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
    font-size: 16px !important;
  }
  
  /* Single action button replaces multiple */
  .action-trigger-btn {
    min-width: 48px;
    min-height: 48px;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    touch-action: manipulation;
  }
  
  .action-trigger-btn:active {
    background: rgba(41, 98, 255, 0.15);
  }
}

/* Dashboard improvements */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .dashboard-card {
    padding: 16px;
  }
  
  .quick-actions-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }
  
  .quick-action-card {
    min-height: 80px;
    padding: 12px 10px;
  }
  
  .qa-icon {
    font-size: 24px;
  }
  
  .qa-title {
    font-size: 12px;
  }
  
  .qa-hint {
    display: none;
  }
}

/* Fix overlapping elements that block clicks */
.modal-overlay.hidden,
.action-sheet-overlay.hidden,
.mobile-sheet-overlay.hidden {
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Ensure tab content doesn't overlap */
.tab-content:not(.active) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.tab-content.active {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ========== v4.15.81: AI TOOLS GRID IMPROVEMENTS ========== */

/* Unified AI tools grid - responsive and touch-friendly */
.ai-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 16px 0;
}

@media (max-width: 1200px) {
  .ai-tools-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

@media (max-width: 900px) {
  .ai-tools-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .ai-tools-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

/* AI tool button improvements */
.ai-tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 12px;
  min-height: 110px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ai-tool-btn:hover {
  background: rgba(41, 98, 255, 0.08);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ai-tool-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.ai-tool-icon {
  font-size: 32px;
  line-height: 1;
}

.ai-tool-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.ai-tool-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}

@media (max-width: 768px) {
  .ai-tool-btn {
    min-height: 90px;
    padding: 14px 10px;
    gap: 6px;
  }
  
  .ai-tool-icon {
    font-size: 26px;
  }
  
  .ai-tool-label {
    font-size: 12px;
  }
  
  .ai-tool-desc {
    font-size: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ========== v4.15.81: SHIFTS UI IMPROVEMENTS ========== */

.shift-calendar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 16px;
}

.shift-calendar-header {
  display: grid;
  grid-template-columns: 100px repeat(7, 1fr);
  background: rgba(41, 98, 255, 0.1);
  border-bottom: 1px solid var(--border);
}

.shift-calendar-header > div {
  padding: 12px 8px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  border-right: 1px solid var(--border);
}

.shift-calendar-header > div:last-child {
  border-right: none;
}

.shift-calendar-body {
  min-height: 200px;
}

.shift-calendar-row {
  display: grid;
  grid-template-columns: 100px repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
}

.shift-calendar-row:last-child {
  border-bottom: none;
}

.shift-calendar-cell {
  padding: 8px;
  min-height: 60px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shift-calendar-cell:last-child {
  border-right: none;
}

.shift-cell-name {
  font-weight: 600;
  font-size: 13px;
  padding: 8px;
  background: rgba(107, 114, 128, 0.05);
}

.shift-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}

.shift-badge.draft {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

.shift-badge.published {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

.shift-badge.confirmed {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.shift-badge.declined {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

@media (max-width: 768px) {
  .shift-calendar-header {
    grid-template-columns: 80px repeat(7, 1fr);
  }
  
  .shift-calendar-row {
    grid-template-columns: 80px repeat(7, 1fr);
  }
  
  .shift-calendar-header > div,
  .shift-cell-name {
    font-size: 11px;
    padding: 8px 4px;
  }
  
  .shift-badge {
    font-size: 10px;
    padding: 2px 6px;
  }
}

/* ========== v4.15.81: LAUNCH PLAN IMPROVEMENTS ========== */

.onboarding-widget {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}

.onboarding-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.progress-bar {
  flex: 1;
  height: 10px;
  background: var(--border);
  border-radius: 5px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2962ff, #00c853);
  border-radius: 5px;
  transition: width 0.5s ease;
}

.progress-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  min-width: 50px;
  text-align: right;
}

.onboarding-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.onboarding-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(107, 114, 128, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all 0.2s;
}

.onboarding-item:hover {
  background: rgba(41, 98, 255, 0.05);
}

.onboarding-item.completed {
  background: rgba(0, 200, 83, 0.08);
  border-color: rgba(0, 200, 83, 0.3);
}

.onboarding-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.onboarding-item.completed .onboarding-check {
  background: #00c853;
  border-color: #00c853;
}

.onboarding-item.completed .onboarding-check::after {
  content: '✓';
  color: white;
  font-size: 14px;
  font-weight: 700;
}

.onboarding-item-content {
  flex: 1;
}

.onboarding-item-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 2px;
}

.onboarding-item-hint {
  font-size: 12px;
  color: var(--muted);
}

.onboarding-cta-btn {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.onboarding-cta-btn:hover {
  background: var(--accent);
  color: white;
}

.onboarding-item.completed .onboarding-cta-btn {
  color: #00c853;
  border-color: #00c853;
}

/* ========== v4.15.83: VERSION UPDATE BANNER ========== */
.version-update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: linear-gradient(135deg, #2962ff, #00c853);
  color: white;
  padding: 12px 20px;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

.version-update-banner.banner-out {
  animation: slideUp 0.3s ease forwards;
}

@keyframes slideUp {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}

.version-banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 800px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.version-banner-icon {
  font-size: 20px;
}

.version-banner-text {
  font-size: 14px;
  font-weight: 500;
}

.version-banner-btn {
  padding: 8px 20px;
  background: white;
  color: #2962ff;
  border: none;
  border-radius: 20px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.version-banner-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.version-banner-close {
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.2);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.version-banner-close:hover {
  background: rgba(255,255,255,0.3);
}

/* ========== v4.15.83: MOBILE ACTIONS BOTTOM SHEET ========== */
.action-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.action-sheet-overlay.active {
  opacity: 1;
  visibility: visible;
}

.action-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 9001;
  max-height: 70vh;
  overflow-y: auto;
}

.action-sheet-overlay.active .action-sheet {
  transform: translateY(0);
}

.action-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 16px;
}

.action-sheet-title {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 16px;
  color: var(--ink);
}

.action-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.action-sheet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: transparent;
  border: none;
  border-radius: 12px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font-size: 15px;
  transition: background 0.15s;
}

.action-sheet-item:hover,
.action-sheet-item:active {
  background: rgba(41, 98, 255, 0.08);
}

.action-sheet-item.destructive {
  color: #ef4444;
}

.action-sheet-item-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.action-sheet-cancel {
  margin-top: 8px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 100%;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  font-size: 15px;
}

/* Mobile "Дії" trigger button */
@media (max-width: 768px) {
  .row-actions-desktop {
    display: none !important;
  }
  
  .row-actions-mobile {
    display: flex !important;
  }
}

@media (min-width: 769px) {
  .row-actions-mobile {
    display: none !important;
  }
  
  .row-actions-desktop {
    display: flex !important;
  }
}

.action-trigger-mobile {
  min-width: 48px;
  min-height: 48px;
  padding: 10px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.action-trigger-mobile:active {
  background: rgba(41, 98, 255, 0.1);
}

/* ========== v4.15.83: IMPROVED DASHBOARD ========== */
.dashboard-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px;
}

.dashboard-header {
  margin-bottom: 28px;
}

.dashboard-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ink);
}

.dashboard-subtitle {
  font-size: 14px;
  color: var(--muted);
}

.dashboard-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

@media (max-width: 900px) {
  .dashboard-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .dashboard-stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
}

.stat-card-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}

.stat-card-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Dashboard grid - 2 columns desktop */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Dashboard card */
.dashboard-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
}

.dashboard-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(107, 114, 128, 0.03);
}

.dashboard-card-icon {
  font-size: 22px;
}

.dashboard-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.dashboard-card-body {
  padding: 16px 20px;
}

/* Launch Plan - compact checklist */
.launch-checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.launch-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(107, 114, 128, 0.03);
  border-radius: 10px;
  transition: background 0.15s;
}

.launch-item:hover {
  background: rgba(41, 98, 255, 0.05);
}

.launch-item.completed {
  background: rgba(0, 200, 83, 0.08);
}

.launch-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
}

.launch-item.completed .launch-check {
  background: #00c853;
  border-color: #00c853;
  color: white;
}

.launch-item.completed .launch-check::after {
  content: '✓';
}

.launch-item-content {
  flex: 1;
  min-width: 0;
}

.launch-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.launch-item-status {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

.launch-item.completed .launch-item-status {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.launch-item-action {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}

.launch-item-action:hover {
  background: var(--accent);
  color: white;
}

/* Quick Actions - grid */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.quick-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  background: rgba(107, 114, 128, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  color: var(--ink);
  min-height: 90px;
}

.quick-action-card:hover {
  background: rgba(41, 98, 255, 0.08);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.quick-action-card:active {
  transform: translateY(0);
}

.qa-icon {
  font-size: 26px;
}

.qa-title {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.qa-hint {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

/* System status card for superadmin */
.system-status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.system-status-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(107, 114, 128, 0.03);
  border-radius: 8px;
}

.system-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
}

.system-status-dot.warning {
  background: #f59e0b;
}

.system-status-dot.error {
  background: #ef4444;
}

.system-status-label {
  font-size: 13px;
  color: var(--ink);
}

.system-status-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-left: auto;
}

/* ========== v4.15.84: COMPREHENSIVE DASHBOARD + UX OVERHAUL ========== */

/* === PHASE 4: DASHBOARD "ПЛАН ЗАПУСКУ" REDESIGN === */

/* Onboarding widget - pinned at top, professional look */
.onboarding-widget {
  padding: 0;
  background: transparent;
  border: none;
}

.onboarding-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: rgba(107, 114, 128, 0.05);
  border-radius: 12px;
}

.progress-bar {
  flex: 1;
  height: 10px;
  background: var(--border);
  border-radius: 5px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e);
  border-radius: 5px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-text {
  font-size: 18px;
  font-weight: 700;
  min-width: 55px;
  text-align: right;
}

/* Progress text color based on completion */
.progress-text.low { color: #ef4444; }
.progress-text.medium { color: #f59e0b; }
.progress-text.high { color: #22c55e; }

/* Onboarding checklist items */
.onboarding-checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.onboarding-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 12px;
  transition: all 0.2s;
}

.onboarding-item:hover {
  background: rgba(239, 68, 68, 0.1);
}

.onboarding-item.completed {
  background: rgba(34, 197, 94, 0.06);
  border-color: rgba(34, 197, 94, 0.2);
}

.onboarding-item.completed:hover {
  background: rgba(34, 197, 94, 0.1);
}

/* Status check circle */
.onboarding-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #ef4444;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.onboarding-item.completed .onboarding-check {
  background: #22c55e;
  border-color: #22c55e;
}

.onboarding-item.completed .onboarding-check::after {
  content: '✓';
  color: white;
  font-size: 14px;
  font-weight: 700;
}

/* Item content */
.onboarding-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.onboarding-item-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.onboarding-item-hint {
  font-size: 12px;
  color: var(--muted);
}

/* CTA button on the right */
.onboarding-cta-btn {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  flex-shrink: 0;
}

.onboarding-cta-btn:hover {
  background: var(--accent);
  color: white;
}

.onboarding-item.completed .onboarding-cta-btn {
  color: #22c55e;
  border-color: #22c55e;
  opacity: 0.7;
}

.onboarding-item.completed .onboarding-cta-btn:hover {
  background: #22c55e;
  color: white;
  opacity: 1;
}

/* Warning message */
.onboarding-warning {
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 10px;
  font-size: 13px;
  color: #d97706;
  text-align: center;
}

.onboarding-warning.hidden {
  display: none;
}

/* === QUICK ACTIONS REDESIGN === */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 1100px) {
  .quick-actions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.quick-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  background: rgba(107, 114, 128, 0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  color: var(--ink);
  min-height: 95px;
}

.quick-action-card:hover {
  background: rgba(41, 98, 255, 0.08);
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.quick-action-card:active {
  transform: translateY(0);
  box-shadow: none;
}

.qa-icon {
  font-size: 28px;
  line-height: 1;
}

.qa-title {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.qa-hint {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

/* Superadmin-only actions */
.superadmin-only-action {
  display: none;
}

body[data-role="superadmin"] .superadmin-only-action {
  display: flex;
}

/* === DASHBOARD STATS ROW === */
.dashboard-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 900px) {
  .dashboard-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
}

.stat-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.stat-content {
  flex: 1;
  min-width: 0;
}

.stat-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}

.stat-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* === SYSTEM STATUS === */
.system-status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 16px;
}

@media (max-width: 768px) {
  .system-status-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.status-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(107, 114, 128, 0.03);
  border-radius: 10px;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #6b7280;
  flex-shrink: 0;
}

.status-indicator.online {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.status-indicator.warning {
  background: #f59e0b;
}

.status-indicator.offline {
  background: #ef4444;
}

.status-label {
  font-size: 13px;
  color: var(--ink);
}

.status-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

/* === PHASE 2: ADMIN TABS NAVIGATION FIX === */

/* Tab buttons - ensure clickable */
.admin-tabs-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}

.admin-tabs-list {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 4px;
  padding: 8px 0;
  flex: 1;
}

.admin-tabs-list::-webkit-scrollbar {
  display: none;
}

.admin-tab-btn {
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-tab-btn:hover {
  background: rgba(41, 98, 255, 0.08);
  color: var(--ink);
}

.admin-tab-btn.active {
  background: rgba(41, 98, 255, 0.12);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* Tab scroll arrows - always visible and large */
.admin-tabs-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  z-index: 10;
}

.admin-tabs-arrow:hover {
  background: rgba(41, 98, 255, 0.1);
  border-color: var(--accent);
}

.admin-tabs-arrow:active {
  transform: scale(0.95);
}

/* Mobile: larger arrows, fixed position */
@media (max-width: 768px) {
  .admin-tabs-arrow {
    position: fixed;
    bottom: 85px;
    width: 52px;
    height: 52px;
    min-width: 52px;
    font-size: 22px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    background: var(--card);
  }
  
  .admin-tabs-arrow.arrow-left,
  #tabsArrowLeft {
    left: 12px;
  }
  
  .admin-tabs-arrow.arrow-right,
  #tabsArrowRight {
    right: 12px;
  }
  
  .admin-tab-btn {
    min-height: 48px;
    padding: 12px 18px;
    font-size: 14px;
  }
}

/* Scroll gradient indicators */
.admin-tabs-wrapper::before,
.admin-tabs-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s;
}

.admin-tabs-wrapper::before {
  left: 50px;
  background: linear-gradient(90deg, var(--bg), transparent);
}

.admin-tabs-wrapper::after {
  right: 50px;
  background: linear-gradient(-90deg, var(--bg), transparent);
}

.admin-tabs-wrapper.has-scroll-left::before { opacity: 1; }
.admin-tabs-wrapper.has-scroll-right::after { opacity: 1; }

/* === PHASE 3: MOBILE ACTIONS BOTTOM SHEET === */

/* Action sheet overlay */
.action-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}

.action-sheet-overlay.active,
.action-sheet-overlay:not(.hidden) {
  opacity: 1;
  visibility: visible;
}

/* Action sheet panel */
.action-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding: 20px 16px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 9001;
  max-height: 70vh;
  overflow-y: auto;
}

.action-sheet-overlay.active .action-sheet,
.action-sheet-overlay:not(.hidden) .action-sheet,
.action-sheet:not(.hidden) {
  transform: translateY(0);
}

/* Sheet handle */
.action-sheet-handle {
  width: 40px;
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  margin: 0 auto 18px;
}

/* Sheet title */
.action-sheet-title {
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 18px;
  color: var(--ink);
}

/* Action buttons in sheet */
.action-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.action-sheet-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(107, 114, 128, 0.04);
  border: none;
  border-radius: 14px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  transition: background 0.15s;
  min-height: 54px;
}

.action-sheet-btn:hover,
.action-sheet-btn:active {
  background: rgba(41, 98, 255, 0.1);
}

.action-sheet-btn.danger {
  color: #ef4444;
}

.action-sheet-btn.danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* Mobile trigger button for actions */
.action-trigger-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 52px;
  min-height: 48px;
  padding: 10px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}

.action-trigger-mobile:active {
  background: rgba(41, 98, 255, 0.1);
}

/* Show mobile trigger, hide desktop on mobile */
@media (max-width: 768px) {
  .row-actions-desktop,
  .table-actions-desktop {
    display: none !important;
  }
  
  .action-trigger-mobile {
    display: flex !important;
  }
}

@media (min-width: 769px) {
  .action-trigger-mobile {
    display: none !important;
  }
}

/* === SELLER SHIFT WIDGET - STABILITY === */
.shift-container {
  padding: 16px;
}

.shift-status-display {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.shift-timer {
  font-size: 36px;
  font-weight: 700;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--accent);
  min-width: 130px;
}

.shift-status-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.shift-status-badge.active {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.shift-status-badge.inactive {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

.shift-actions {
  display: flex;
  gap: 12px;
}

.shift-actions .btn {
  flex: 1;
  min-height: 52px;
  font-size: 15px;
  font-weight: 600;
}

/* === ENSURE TAB CONTENT VISIBILITY === */
.tab-content {
  display: none;
  flex-direction: column;
  gap: 20px;
}

.tab-content.active {
  display: flex;
}

/* === HIDDEN UTILITY === */
.hidden {
  display: none !important;
}

/* === BODY SHEET OPEN STATE === */
body.sheet-open {
  overflow: hidden;
  touch-action: none;
}

/* ========== v4.15.85: COMPLETE UI OVERHAUL ========== */

/* === PHASE 1: VERSION UPDATE BANNER === */
.version-update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  background: linear-gradient(135deg, #2962ff, #00c853);
  color: white;
  padding: 14px 20px;
  animation: bannerSlideDown 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

@keyframes bannerSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.version-update-banner.hiding {
  animation: bannerSlideUp 0.3s ease forwards;
}

@keyframes bannerSlideUp {
  to { transform: translateY(-100%); opacity: 0; }
}

.version-banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.version-banner-icon { font-size: 22px; }

.version-banner-text {
  font-size: 15px;
  font-weight: 500;
}

.version-banner-btn {
  padding: 10px 24px;
  background: white;
  color: #2962ff;
  border: none;
  border-radius: 25px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.version-banner-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.version-banner-close {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === PHASE 2: ADMIN TABS - BULLETPROOF === */

.admin-tabs-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.admin-tabs-list {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 4px;
  padding: 8px 4px;
  flex: 1;
  min-width: 0;
}

.admin-tabs-list::-webkit-scrollbar { display: none; }

.admin-tab-btn {
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: 12px 18px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* CRITICAL: ensure clickable */
  position: relative;
  z-index: 1;
  pointer-events: auto !important;
}

.admin-tab-btn:hover {
  background: rgba(41, 98, 255, 0.08);
  color: var(--ink);
}

.admin-tab-btn.active {
  background: rgba(41, 98, 255, 0.12);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* Tab scroll arrows - shown only when overflow, see .has-overflow class */
.admin-tabs-arrow {
  /* v5.2.80: REMOVED display:flex!important - controlled by JS overflow detection */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  z-index: 5;
  /* CRITICAL: don't block tab clicks */
  pointer-events: auto;
}

.admin-tabs-arrow:hover {
  background: rgba(41, 98, 255, 0.1);
  border-color: var(--accent);
}

.admin-tabs-arrow:active {
  transform: scale(0.92);
}

.admin-tabs-arrow.disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* Mobile arrows - large, fixed position */
@media (max-width: 768px) {
  .admin-tabs-arrow {
    position: fixed !important;
    bottom: 90px !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    font-size: 24px !important;
    background: var(--card) !important;
    border: 2px solid var(--accent) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    z-index: 1000 !important;
  }
  
  .admin-tabs-arrow.arrow-left,
  #tabsArrowLeft {
    left: 16px !important;
  }
  
  .admin-tabs-arrow.arrow-right,
  #tabsArrowRight {
    right: 16px !important;
  }
  
  .admin-tab-btn {
    min-height: 52px;
    padding: 14px 20px;
    font-size: 15px;
  }
}

/* === PHASE 3: MOBILE ACTIONS BOTTOM SHEET === */

.action-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9500;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.action-sheet-overlay.active,
.action-sheet-overlay:not(.hidden) {
  opacity: 1;
  visibility: visible;
}

.action-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card);
  border-radius: 24px 24px 0 0;
  padding: 20px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 9501;
  max-height: 75vh;
  overflow-y: auto;
}

.action-sheet-overlay.active .action-sheet,
.action-sheet:not(.hidden) {
  transform: translateY(0);
}

.action-sheet-handle {
  width: 44px;
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  margin: 0 auto 20px;
}

.action-sheet-title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  color: var(--ink);
}

.action-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-sheet-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: rgba(107, 114, 128, 0.05);
  border: none;
  border-radius: 16px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  transition: background 0.15s;
  min-height: 60px;
  touch-action: manipulation;
}

.action-sheet-btn:hover,
.action-sheet-btn:active {
  background: rgba(41, 98, 255, 0.1);
}

.action-sheet-btn.danger {
  color: #ef4444;
}

.action-sheet-btn.danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* Mobile trigger button */
.action-trigger-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 52px;
  padding: 12px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  gap: 8px;
}

@media (max-width: 768px) {
  .row-actions-desktop,
  .table-actions-desktop,
  .actions-inline {
    display: none !important;
  }
  
  .action-trigger-mobile {
    display: flex !important;
  }
}

@media (min-width: 769px) {
  .action-trigger-mobile {
    display: none !important;
  }
}

/* === PHASE 3: SELLER SHIFT WIDGET === */

.shift-container {
  padding: 20px;
}

.shift-status-display {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.shift-timer {
  font-size: 42px;
  font-weight: 800;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  color: var(--accent);
  letter-spacing: -1px;
  min-width: 150px;
}

.shift-status-badge {
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.shift-status-badge.active {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
  animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}

.shift-status-badge.inactive {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

.shift-actions {
  display: flex;
  gap: 14px;
}

.shift-actions .btn {
  flex: 1;
  min-height: 56px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 14px;
}

/* === PHASE 4: DASHBOARD COMPLETE REDESIGN === */

.dashboard-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 28px 24px;
}

.dashboard-header {
  margin-bottom: 28px;
}

.dashboard-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
}

.dashboard-subtitle {
  font-size: 15px;
  color: var(--muted);
}

/* Stats row */
.dashboard-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}

@media (max-width: 1000px) {
  .dashboard-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  transition: transform 0.15s, box-shadow 0.15s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.stat-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.stat-content {
  flex: 1;
  min-width: 0;
}

.stat-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.1;
}

.stat-label {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 4px;
}

/* Dashboard grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 1000px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Dashboard card */
.dashboard-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.dashboard-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(107, 114, 128, 0.02);
}

.dashboard-card-icon {
  font-size: 26px;
}

.dashboard-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.dashboard-card-body {
  padding: 20px 24px;
}

/* === PHASE 4: "ПЛАН ЗАПУСКУ" COMPLETE REDESIGN === */

.onboarding-widget {
  padding: 0;
}

/* Progress section */
.onboarding-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: rgba(107, 114, 128, 0.04);
  border-radius: 14px;
  margin-bottom: 20px;
}

.progress-bar {
  flex: 1;
  height: 12px;
  background: var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Progress fill colors based on percentage */
.progress-fill.low { background: linear-gradient(90deg, #ef4444, #f97316); }
.progress-fill.medium { background: linear-gradient(90deg, #f59e0b, #eab308); }
.progress-fill.high { background: linear-gradient(90deg, #22c55e, #10b981); }

.progress-text {
  font-size: 20px;
  font-weight: 800;
  min-width: 60px;
  text-align: right;
}

.progress-text.low { color: #ef4444; }
.progress-text.medium { color: #f59e0b; }
.progress-text.high { color: #22c55e; }

/* Onboarding checklist */
.onboarding-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Checklist item - INCOMPLETE (red) */
.onboarding-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-left: 4px solid #ef4444;
  border-radius: 12px;
  transition: all 0.2s;
}

.onboarding-item:hover {
  background: rgba(239, 68, 68, 0.08);
}

/* Checklist item - COMPLETED (green) */
.onboarding-item.completed {
  background: rgba(34, 197, 94, 0.04);
  border-color: rgba(34, 197, 94, 0.2);
  border-left-color: #22c55e;
}

.onboarding-item.completed:hover {
  background: rgba(34, 197, 94, 0.08);
}

/* Status check circle */
.onboarding-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #ef4444;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.onboarding-item.completed .onboarding-check {
  background: #22c55e;
  border-color: #22c55e;
}

.onboarding-item.completed .onboarding-check::after {
  content: '✓';
  color: white;
  font-size: 15px;
  font-weight: 800;
}

/* Item content - CRITICAL: proper flex to prevent overlap */
.onboarding-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-right: 12px; /* Space before button */
}

.onboarding-item-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.onboarding-item-hint {
  font-size: 12px;
  color: var(--muted);
}

/* CTA button - fixed width, no overlap */
.onboarding-cta-btn {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 10px;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  flex-shrink: 0;
  min-width: 100px;
  text-align: center;
}

.onboarding-cta-btn:hover {
  background: var(--accent);
  color: white;
}

.onboarding-item.completed .onboarding-cta-btn {
  color: #22c55e;
  border-color: #22c55e;
}

.onboarding-item.completed .onboarding-cta-btn:hover {
  background: #22c55e;
  color: white;
}

/* Warning */
.onboarding-warning {
  margin-top: 18px;
  padding: 14px 18px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 12px;
  font-size: 14px;
  color: #d97706;
  text-align: center;
  font-weight: 500;
}

/* === QUICK ACTIONS GRID === */

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 1100px) {
  .quick-actions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.quick-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 14px;
  background: rgba(107, 114, 128, 0.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.18s;
  text-decoration: none;
  color: var(--ink);
  min-height: 110px;
  text-align: center;
}

.quick-action-card:hover {
  background: rgba(41, 98, 255, 0.08);
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.quick-action-card:active {
  transform: translateY(-1px);
}

.qa-icon {
  font-size: 32px;
  line-height: 1;
}

.qa-title {
  font-size: 14px;
  font-weight: 700;
}

.qa-hint {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}

/* Superadmin-only cards */
.superadmin-only-action {
  display: none;
}

body[data-role="superadmin"] .superadmin-only-action {
  display: flex;
}

/* System status */
.system-status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 20px 24px;
}

@media (max-width: 768px) {
  .system-status-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.status-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: rgba(107, 114, 128, 0.03);
  border-radius: 12px;
}

.status-indicator {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #6b7280;
  flex-shrink: 0;
}

.status-indicator.online {
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.status-label {
  font-size: 14px;
  color: var(--ink);
}

.status-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}

/* === SELLER-ONLY WIDGETS: DEFENSE IN DEPTH === */
/* Critical CSS: ensure seller widgets hidden for non-seller */
.seller-only,
#shiftStatusCard,
#scriptBlocksCard,
#sellerKpiCard {
  display: none !important;
  visibility: hidden !important;
}

body[data-role="seller"] .seller-only,
body[data-role="seller"] #shiftStatusCard,
body[data-role="seller"] #scriptBlocksCard {
  display: block !important;
  visibility: visible !important;
}

/* Prevent hidden elements from affecting layout.
   IMPORTANT: `aria-hidden="true"` marks DECORATIVE content (icons, SVGs) that is
   hidden from screen readers but MUST stay visually visible. The old rule hid
   every such icon app-wide (send/mic/attach buttons rendered blank). Exclude
   graphics and icon elements so only genuine non-icon hidden nodes are removed.

   v10.1.1: `:not(:has(svg))` added. The exclusions above cover an `<svg>` that
   carries the attribute itself, or an element whose class contains "icon" —
   but the most common markup here is a plain wrapper,
   `<span aria-hidden="true"><svg …></span>`, which is the correct accessible
   pattern and matched none of them. Four icons were invisible app-wide because
   of it: the sidebar brandmark, the AI assistant mark, the AI welcome arrow,
   and the FULL BI report card's chart glyph. If a node contains a graphic, it
   is decorative markup, not a hidden node. */
[aria-hidden="true"]:not(svg):not(svg *):not([class*="icon"]):not([class*="-icon"]):not(:has(svg)) {
  display: none !important;
}

/* Body state when sheet is open */
body.sheet-open {
  overflow: hidden;
  touch-action: none;
}

/* Tab content visibility */
.tab-content {
  display: none;
  flex-direction: column;
  gap: 20px;
}

.tab-content.active {
  display: flex;
}

/* ============================================================
   v4.15.86 — CANONICAL STYLES (Override all duplicates)
   ============================================================ */

/* === ADMIN TABS — FINAL CANONICAL VERSION === */
.admin-tabs-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  background: var(--card) !important;
  border-bottom: 1px solid var(--border) !important;
  overflow: visible !important;
}

.admin-tabs,
#adminTabsScroll {
  display: flex !important;
  align-items: center !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  /* v7.8.0: keep `smooth` — `auto` made wheel-tick jumps of 100px feel jerky/step-like.
     Previous "feels slow" complaint was actually caused by the unrelated `justify-content:
     center` layout bug below (first tabs were at rectL=-281 — no amount of scroll reached
     them). Now that layout is fixed, smooth behavior is the right default for wheel + arrows. */
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important; /* v7.6.0: hide scrollbar — overflow still scrollable */
  -ms-overflow-style: none !important;
  gap: 8px !important;
  padding: 10px 8px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 60px !important; /* v7.6.0: 40(btn) + 10+10(padding) = 60 — tab edges fully visible */
  height: auto !important;
  /* v7.8.0 BUGFIX: was `justify-content: center !important` — when tabs overflow the
     container width, `center` pushes the FIRST tabs off the visible area with
     NEGATIVE bounding-rect lefts (rectL=-281 for "Головна", -195 for "Персонал").
     Browser cannot scroll to negative positions (scrollLeft >= 0), so these tabs
     were physically unreachable. `flex-start` aligns to the visible start edge so
     scroll covers the full content. */
  justify-content: flex-start !important;
  box-sizing: border-box !important;
}
.admin-tabs::-webkit-scrollbar,
#adminTabsScroll::-webkit-scrollbar {
  display: none !important; /* v7.6.0: Chrome/Safari scrollbar hidden */
  width: 0 !important;
  height: 0 !important;
}

.admin-tabs::-webkit-scrollbar,
#adminTabsScroll::-webkit-scrollbar {
  display: none !important;
}

.admin-tab-btn {
  flex-shrink: 0 !important;
  /* v7.6.0: removed scroll-snap-align — no forced snap when tabs fit */
  padding: 7px 10px !important; /* v7.6.0: was 12px 18px — tightened to fit ultrawide */
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 12.5px !important; /* v7.6.0: slight reduction to fit 14 tabs on most desktops */
  font-weight: 500 !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  min-height: 36px !important; /* v7.6.0: was 44px — more compact */
  /* v7.8.0 BUGFIX: was `display: flex !important` — blanket !important on every
     .admin-tab-btn overrode inline `style="display: none"` on legacy tabs (e.g.
     "Комплаєнс" which is conditionally hidden inline), so those tabs stayed
     visible in the flow and ate scroll space. Use `:not([style*="display: none"])`
     guard so inline display:none still wins. */
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* v7.8.0: honor inline style="display: none" on tabs that are programmatically hidden. */
.admin-tab-btn[style*="display: none"],
.admin-tab-btn[style*="display:none"] {
  display: none !important;
}

.admin-tab-btn:hover {
  background: rgba(41, 98, 255, 0.08) !important;
  color: var(--ink) !important;
}

.admin-tab-btn:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

.admin-tab-btn.active,
.admin-tab-btn[aria-selected="true"] {
  background: rgba(41, 98, 255, 0.12) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}

/* Tab scroll arrows - canonical */
.admin-tabs-arrow,
.admin-tabs-arrow-left,
.admin-tabs-arrow-right,
#tabsArrowLeft,
#tabsArrowRight {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  z-index: 100 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  color: var(--ink) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.admin-tabs-arrow-left,
#tabsArrowLeft {
  left: 4px !important;
}

.admin-tabs-arrow-right,
#tabsArrowRight {
  right: 4px !important;
}

.admin-tabs-arrow:hover,
#tabsArrowLeft:hover,
#tabsArrowRight:hover {
  background: rgba(41, 98, 255, 0.1) !important;
  border-color: var(--accent) !important;
  transform: translateY(-50%) scale(1.05) !important;
}

.admin-tabs-arrow:active,
#tabsArrowLeft:active,
#tabsArrowRight:active {
  transform: translateY(-50%) scale(0.95) !important;
}

/* Mobile arrows - larger and fixed */
@media (max-width: 900px) {
  .admin-tabs-arrow,
  .admin-tabs-arrow-left,
  .admin-tabs-arrow-right,
  #tabsArrowLeft,
  #tabsArrowRight {
    position: fixed !important;
    top: auto !important;
    bottom: 90px !important;
    transform: none !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    font-size: 22px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    z-index: 9000 !important;
  }
  
  .admin-tabs-arrow-left,
  #tabsArrowLeft {
    left: 16px !important;
  }
  
  .admin-tabs-arrow-right,
  #tabsArrowRight {
    right: 16px !important;
  }
  
  .admin-tabs-arrow:hover,
  #tabsArrowLeft:hover,
  #tabsArrowRight:hover {
    transform: scale(1.05) !important;
  }
  
  .admin-tab-btn {
    min-height: 48px !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
  }
}

/* === ONBOARDING "ПЛАН ЗАПУСКУ" — COMPLETE REDESIGN v4.15.86 === */

/* Main widget container */
.onboarding-widget {
  padding: 0 !important;
  background: transparent !important;
}

/* Progress section - prominent at top */
.onboarding-progress {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px 18px !important;
  background: linear-gradient(135deg, rgba(41, 98, 255, 0.08), rgba(0, 200, 83, 0.08)) !important;
  border-radius: 14px !important;
  margin-bottom: 20px !important;
  border: 1px solid rgba(41, 98, 255, 0.15) !important;
}

.progress-bar {
  flex: 1 !important;
  height: 14px !important;
  background: var(--border) !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.progress-fill {
  height: 100% !important;
  border-radius: 7px !important;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s !important;
  background: linear-gradient(90deg, #ef4444, #f59e0b) !important;
}

.progress-fill.low {
  background: linear-gradient(90deg, #ef4444, #f97316) !important;
}

.progress-fill.medium {
  background: linear-gradient(90deg, #f59e0b, #eab308) !important;
}

.progress-fill.high {
  background: linear-gradient(90deg, #22c55e, #10b981) !important;
}

.progress-text {
  font-size: 22px !important;
  font-weight: 800 !important;
  min-width: 65px !important;
  text-align: right !important;
  font-family: 'SF Mono', 'Consolas', monospace !important;
}

.progress-text.low { color: #ef4444 !important; }
.progress-text.medium { color: #f59e0b !important; }
.progress-text.high { color: #22c55e !important; }

/* Checklist container */
.onboarding-checklist {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Individual checklist item - INCOMPLETE STATE (default) */
.onboarding-item {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  background: rgba(239, 68, 68, 0.04) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  border-left: 5px solid #ef4444 !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
}

.onboarding-item:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  transform: translateX(2px) !important;
}

/* COMPLETED STATE */
.onboarding-item.completed {
  background: rgba(34, 197, 94, 0.04) !important;
  border-color: rgba(34, 197, 94, 0.2) !important;
  border-left-color: #22c55e !important;
}

.onboarding-item.completed:hover {
  background: rgba(34, 197, 94, 0.08) !important;
}

/* Status check indicator */
.onboarding-check {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 3px solid #ef4444 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.25s ease !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* Incomplete state - show X or dot */
.onboarding-check::before {
  content: '✖' !important;
  color: #ef4444 !important;
  font-size: 14px !important;
}

/* Completed state - green with checkmark */
.onboarding-item.completed .onboarding-check {
  background: #22c55e !important;
  border-color: #22c55e !important;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2) !important;
}

.onboarding-item.completed .onboarding-check::before {
  content: '✔' !important;
  color: white !important;
  font-size: 16px !important;
}

/* Item content */
.onboarding-item-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.onboarding-item-text {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  line-height: 1.3 !important;
}

.onboarding-item-hint {
  font-size: 13px !important;
  color: var(--muted) !important;
  line-height: 1.4 !important;
}

/* CTA button - always on right */
.onboarding-cta-btn {
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--accent) !important;
  border: none !important;
  border-radius: 8px !important;
  color: white !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
  min-width: 110px !important;
  text-align: center !important;
}

.onboarding-cta-btn:hover {
  background: #1d4ed8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(41, 98, 255, 0.3) !important;
}

.onboarding-cta-btn:active {
  transform: translateY(0) !important;
}

/* Completed item CTA becomes secondary */
.onboarding-item.completed .onboarding-cta-btn {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

.onboarding-item.completed .onboarding-cta-btn:hover {
  background: rgba(107, 114, 128, 0.1) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

/* Warning message */
.onboarding-warning {
  margin-top: 16px !important;
  padding: 14px 18px !important;
  background: rgba(245, 158, 11, 0.1) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  color: #b45309 !important;
  text-align: center !important;
  font-weight: 500 !important;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .onboarding-item {
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
  }
  
  .onboarding-cta-btn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 10px !important;
  }
  
  .onboarding-progress {
    flex-wrap: wrap !important;
  }
  
  .progress-text {
    width: 100% !important;
    text-align: center !important;
    margin-top: 8px !important;
  }
}

/* === DASHBOARD IMPROVEMENTS v4.15.86 === */

.dashboard-container {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 24px !important;
}

.dashboard-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
}

@media (max-width: 1000px) {
  .dashboard-grid {
    grid-template-columns: 1fr !important;
  }
}

.dashboard-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.dashboard-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 18px 22px !important;
  border-bottom: 1px solid var(--border) !important;
  background: rgba(107, 114, 128, 0.02) !important;
}

.dashboard-card-icon {
  font-size: 24px !important;
}

.dashboard-card-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

.dashboard-card-body {
  padding: 20px 22px !important;
}

/* Stats row */
.dashboard-stats-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

@media (max-width: 900px) {
  .dashboard-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* v9.0.2 — Dashboard mobile responsive overrides
   - Donut block: 2-col → 1-col (donut on top, 8 cards below)
   - 8 pulse cards: 4-col → 2-col (so they don't squish vertical)
   - Period chips: 5-in-row → 3+2 wrap (3 on top, 2 below) on phone
*/
@media (max-width: 768px) {
  /* Donut block: stack vertically on tablet/phone */
  #dashBusinessPulse.dashboard-pulse {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    padding: 16px !important;
  }
  /* Donut wrapper: don't stretch */
  #dashBusinessPulse .dash-donut-wrap {
    width: 100% !important;
  }
  /* 8 cards: 4-col → 2-col */
  #dashBusinessPulse .dash-pulse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Even tighter on real phones */
@media (max-width: 480px) {
  /* Period chips: 5 → 3+2 grid layout */
  #dashPeriodSelector.dash-period-selector {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }
  #dashPeriodSelector .dash-period-btn {
    padding: 8px 6px !important;
    font-size: 11px !important;
    text-align: center !important;
  }
  /* 4 stat cards: 1 column on tiny screens to avoid vertical text wrap */
  .dashboard-stats-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .stat-card {
    padding: 14px 16px !important;
    gap: 12px !important;
  }
  .stat-value {
    font-size: 24px !important;
    white-space: nowrap !important;
  }
  .stat-label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Trend badge: hide on tiny screens (saved by main number anyway) */
  .stat-trend {
    display: none !important;
  }
  /* Pulse cards: keep 2-col but tighten */
  #dashBusinessPulse .dash-pulse-grid {
    gap: 8px !important;
  }
  #dashBusinessPulse .pulse-card {
    padding: 8px 10px !important;
  }
}

.stat-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
  position: relative !important;
  isolation: isolate !important;
}

.stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06) !important;
}

.stat-icon {
  font-size: 30px !important;
  flex-shrink: 0 !important;
}

.stat-value {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
  line-height: 1.1 !important;
}

.stat-label {
  font-size: 12px !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

/* Quick actions grid */
.quick-actions-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}

@media (max-width: 1100px) {
  .quick-actions-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.quick-action-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 20px 14px !important;
  background: rgba(107, 114, 128, 0.03) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  color: var(--ink) !important;
  min-height: 100px !important;
  text-align: center !important;
  position: relative !important;
  isolation: isolate !important;
}

.quick-action-card:hover {
  background: rgba(41, 98, 255, 0.08) !important;
  border-color: var(--accent) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

.qa-icon {
  font-size: 30px !important;
  line-height: 1 !important;
  position: relative !important;
  z-index: 1 !important;
}

.qa-title {
  font-size: 13px !important;
  font-weight: 600 !important;
}

.qa-hint {
  font-size: 11px !important;
  color: var(--muted) !important;
}

/* === THEME LIGHT OVERRIDES === */
body.theme-light .admin-tabs-arrow,
body.theme-light #tabsArrowLeft,
body.theme-light #tabsArrowRight {
  background: white !important;
  border-color: #e5e7eb !important;
  color: #374151 !important;
}

body.theme-light .admin-tabs-arrow:hover,
body.theme-light #tabsArrowLeft:hover,
body.theme-light #tabsArrowRight:hover {
  background: #f3f4f6 !important;
  border-color: var(--accent) !important;
}

body.theme-light .onboarding-item {
  background: rgba(239, 68, 68, 0.03) !important;
}

body.theme-light .onboarding-item.completed {
  background: rgba(34, 197, 94, 0.03) !important;
}

/* ============================================================
   v4.15.87 — ACCOUNT FORM IMPROVEMENTS
   ============================================================ */

/* Select dropdowns styling */
.form-select {
  width: 100%;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.form-select:hover {
  border-color: var(--accent);
}

.form-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(41, 98, 255, 0.15);
}

.form-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--border);
}

.form-select option {
  background: var(--card);
  color: var(--ink);
  padding: 8px;
}

/* Field error state */
.field-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* Field warning message */
.field-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 14px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  font-size: 13px;
  color: #b45309;
}

.field-warning.hidden {
  display: none;
}

.field-warning .btn-link {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin-left: auto;
}

.field-warning .btn-link:hover {
  color: #1d4ed8;
}

/* Theme light adjustments */
body.theme-light .form-select {
  background-color: white;
}

body.theme-light .field-warning {
  background: rgba(245, 158, 11, 0.08);
}

/* ============================================================
   v4.15.88 — LAUNCH PLAN REDESIGN
   ============================================================ */

/* Launch Plan Card - Full Width at Top */
/* Картка "Запуск мережі" прихована за запитом */
#launchPlanCard {
  display: none !important;
}

.launch-plan-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
}

.launch-plan-header {
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--border) !important;
  background: linear-gradient(135deg, rgba(41, 98, 255, 0.05), rgba(0, 200, 83, 0.05)) !important;
}

.launch-plan-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.launch-plan-icon {
  font-size: 28px !important;
}

.launch-plan-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  flex: 1 !important;
}

.launch-plan-badge {
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  background: #ef4444 !important;
  color: white !important;
}

.launch-plan-badge.ready {
  background: #22c55e !important;
}

.launch-plan-progress-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.progress-bar-lg {
  flex: 1 !important;
  height: 12px !important;
  background: var(--border) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.progress-bar-lg .progress-fill {
  height: 100% !important;
  border-radius: 6px !important;
  transition: width 0.5s ease, background 0.3s !important;
  background: linear-gradient(90deg, #ef4444, #f97316) !important;
}

.progress-bar-lg .progress-fill.medium {
  background: linear-gradient(90deg, #f59e0b, #eab308) !important;
}

.progress-bar-lg .progress-fill.high {
  background: linear-gradient(90deg, #22c55e, #10b981) !important;
}

.progress-text-lg {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
  min-width: 60px !important;
  text-align: right !important;
}

/* Onboarding Checklist in Launch Plan */
.launch-plan-card .onboarding-checklist {
  padding: 16px 24px !important;
}

.launch-plan-card .onboarding-item {
  display: grid !important;
  grid-template-columns: 36px 1fr auto !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  margin-bottom: 8px !important;
  background: rgba(239, 68, 68, 0.04) !important;
  border: 1px solid rgba(239, 68, 68, 0.15) !important;
  border-left: 4px solid #ef4444 !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.launch-plan-card .onboarding-item:last-child {
  margin-bottom: 0 !important;
}

.launch-plan-card .onboarding-item:hover {
  transform: translateX(2px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Completed state */
.launch-plan-card .onboarding-item.completed {
  background: rgba(34, 197, 94, 0.04) !important;
  border-color: rgba(34, 197, 94, 0.2) !important;
  border-left-color: #22c55e !important;
}

/* Check indicator */
.launch-plan-card .onboarding-check {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 2px solid #ef4444 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}

.launch-plan-card .onboarding-check::before {
  content: '✖' !important;
  color: #ef4444 !important;
  font-size: 12px !important;
}

.launch-plan-card .onboarding-item.completed .onboarding-check {
  background: #22c55e !important;
  border-color: #22c55e !important;
}

.launch-plan-card .onboarding-item.completed .onboarding-check::before {
  content: '✔' !important;
  color: white !important;
}

/* Content */
.launch-plan-card .onboarding-item-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.launch-plan-card .onboarding-item-text {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

.launch-plan-card .onboarding-item-hint {
  font-size: 12px !important;
  color: var(--muted) !important;
}

/* CTA Button */
.launch-plan-card .onboarding-cta-btn {
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--accent) !important;
  border: none !important;
  border-radius: 6px !important;
  color: white !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
}

.launch-plan-card .onboarding-cta-btn:hover {
  background: #1d4ed8 !important;
  transform: translateY(-1px) !important;
}

.launch-plan-card .onboarding-item.completed .onboarding-cta-btn {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

.launch-plan-card .onboarding-item.completed .onboarding-cta-btn:hover {
  background: rgba(107, 114, 128, 0.1) !important;
  color: var(--ink) !important;
}

/* Warning */
.launch-plan-card .onboarding-warning {
  margin: 16px 24px !important;
  padding: 12px 16px !important;
  background: rgba(245, 158, 11, 0.1) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  color: #b45309 !important;
  text-align: center !important;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .launch-plan-card .onboarding-item {
    grid-template-columns: 28px 1fr !important;
  }
  
  .launch-plan-card .onboarding-cta-btn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 8px !important;
  }
  
  .launch-plan-title-row {
    flex-wrap: wrap !important;
  }
  
  .launch-plan-badge {
    margin-left: auto !important;
  }
  
  .progress-text-lg {
    font-size: 20px !important;
  }
}

/* Theme light */
body.theme-light .launch-plan-card {
  background: white !important;
}

body.theme-light .launch-plan-header {
  background: linear-gradient(135deg, rgba(41, 98, 255, 0.03), rgba(0, 200, 83, 0.03)) !important;
}

body.theme-light .launch-plan-card .onboarding-item {
  background: rgba(239, 68, 68, 0.03) !important;
}

body.theme-light .launch-plan-card .onboarding-item.completed {
  background: rgba(34, 197, 94, 0.03) !important;
}

/* ============================================================
   v4.15.89 — FINAL POLISH & FIXES
   ============================================================ */

/* === LAUNCH PLAN SECTION - ensure doesn't block UI === */
.launch-plan-section.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.launch-plan-section:not(.hidden) {
  position: relative !important;
  z-index: 10 !important;
}

/* === ADMIN TABS - BULLETPROOF CLICKABILITY === */
.admin-tabs-wrapper {
  position: relative !important;
  z-index: 50 !important;
}

.admin-tabs-wrapper * {
  pointer-events: auto !important;
}

/* Ensure no invisible overlays block tabs */
.admin-tabs::before,
.admin-tabs::after,
.admin-tabs-wrapper::before,
.admin-tabs-wrapper::after {
  pointer-events: none !important;
}

/* Tab buttons always clickable */
.admin-tab-btn {
  position: relative !important;
  z-index: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Arrows always on top and clickable */
.admin-tabs-arrow,
#tabsArrowLeft,
#tabsArrowRight {
  z-index: 200 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* === ERROR/BLOCKERS CARD DESIGN === */
.error-card,
.blockers-card {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-left: 4px solid #ef4444 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}

.error-card-header,
.blockers-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.error-card-icon {
  font-size: 24px !important;
}

.error-card-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #dc2626 !important;
}

.error-card-message {
  font-size: 14px !important;
  color: var(--ink) !important;
  margin-bottom: 12px !important;
  line-height: 1.5 !important;
}

.error-card-details {
  background: rgba(0, 0, 0, 0.05) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  font-family: 'SF Mono', Consolas, monospace !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  margin-bottom: 12px !important;
  overflow-x: auto !important;
}

.error-card-actions {
  display: flex !important;
  gap: 12px !important;
}

.error-card-btn {
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.error-card-btn.primary {
  background: var(--accent) !important;
  border: none !important;
  color: white !important;
}

.error-card-btn.primary:hover {
  background: #1d4ed8 !important;
}

.error-card-btn.secondary {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
}

/* === SUCCESS STATE === */
.success-card {
  background: rgba(34, 197, 94, 0.08) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  border-left: 4px solid #22c55e !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}

.success-card-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #16a34a !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* === QUICK TEST RESULTS === */
.test-results {
  margin-top: 16px !important;
  padding: 16px !important;
  border-radius: 10px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
}

.test-results.error {
  background: rgba(239, 68, 68, 0.05) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}

.test-results.success {
  background: rgba(34, 197, 94, 0.05) !important;
  border-color: rgba(34, 197, 94, 0.2) !important;
}

.test-results-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

.test-results.error .test-results-title {
  color: #dc2626 !important;
}

.test-results.success .test-results-title {
  color: #16a34a !important;
}

.test-results-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.test-results-list li {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 0 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
}

.test-results-list li::before {
  content: '•' !important;
  color: var(--muted) !important;
}

/* === GO LIVE BUTTON STATES === */
#launchGoLiveBtn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background: var(--muted) !important;
}

#launchGoLiveBtn:not(:disabled) {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3) !important;
}

#launchGoLiveBtn:not(:disabled):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4) !important;
}

/* === ENSURE TABS VISIBLE ON ALL SCREENS === */
@media (max-width: 1200px) {
  .admin-tabs {
    padding: 10px 60px !important;
  }
}

@media (max-width: 768px) {
  .admin-tabs {
    padding: 8px 56px !important;
  }
  
  .admin-tab-btn {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
}

/* === MOBILE LAUNCH PLAN === */
@media (max-width: 600px) {
  .launch-plan-card {
    margin: 0 -12px 16px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
  
  .launch-plan-header {
    padding: 16px !important;
  }
  
  .launch-plan-card .onboarding-checklist {
    padding: 12px 16px !important;
  }
  
  .launch-plan-title {
    font-size: 16px !important;
  }
  
  .progress-text-lg {
    font-size: 18px !important;
  }
}

/* === THEME LIGHT FIXES === */
body.theme-light .error-card {
  background: rgba(239, 68, 68, 0.05) !important;
}

body.theme-light .success-card {
  background: rgba(34, 197, 94, 0.05) !important;
}

body.theme-light .error-card-details {
  background: rgba(0, 0, 0, 0.03) !important;
}

/* ============================================================
   v4.15.90 — LAUNCH PLAN FINAL FIXES
   ============================================================ */

/* Step item NOT completed + required = red indicator */
.step-item:not(.completed) .step-checkbox {
  border-color: rgba(239, 68, 68, 0.4) !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

.step-item:not(.completed) .step-checkbox::after {
  content: '✗' !important;
  color: #ef4444 !important;
  font-size: 12px !important;
}

.step-item.completed .step-checkbox::after {
  content: '✓' !important;
  color: white !important;
  font-size: 14px !important;
}

/* Error state for readiness failures */
.readiness-error-card {
  background: rgba(239, 68, 68, 0.06) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  border-left: 4px solid #ef4444 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}

.readiness-error-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.readiness-error-icon {
  font-size: 28px !important;
}

.readiness-error-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #dc2626 !important;
}

.readiness-error-message {
  font-size: 14px !important;
  color: var(--ink) !important;
  margin-bottom: 14px !important;
  line-height: 1.6 !important;
}

.readiness-error-details {
  background: rgba(0, 0, 0, 0.04) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  font-family: 'SF Mono', Consolas, monospace !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  margin-bottom: 14px !important;
  overflow-x: auto !important;
  white-space: pre-wrap !important;
  word-break: break-all !important;
}

.readiness-error-actions {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.readiness-error-btn {
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  border: none !important;
}

.readiness-error-btn.primary {
  background: var(--accent) !important;
  color: white !important;
}

.readiness-error-btn.primary:hover {
  background: #1d4ed8 !important;
}

.readiness-error-btn.secondary {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
}

.readiness-error-btn.secondary:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* Collapsible tech details */
.readiness-error-toggle {
  background: none !important;
  border: none !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  padding: 4px 0 !important;
  text-decoration: underline !important;
}

.readiness-error-toggle:hover {
  color: var(--ink) !important;
}

/* Launch steps list gap */
.steps-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Blocker items styling */
.blocker-item {
  display: flex !important;
  gap: 12px !important;
  padding: 14px !important;
  background: rgba(239, 68, 68, 0.05) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important;
}

.blocker-icon {
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

.blocker-content {
  flex: 1 !important;
}

.blocker-title {
  font-weight: 600 !important;
  color: #dc2626 !important;
  margin-bottom: 4px !important;
}

.blocker-message {
  font-size: 13px !important;
  color: var(--ink) !important;
  margin-bottom: 8px !important;
}

.blocker-fix-btn {
  padding: 6px 14px !important;
  background: var(--accent) !important;
  border: none !important;
  border-radius: 6px !important;
  color: white !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.blocker-fix-btn:hover {
  background: #1d4ed8 !important;
}

/* Theme light */
body.theme-light .readiness-error-card {
  background: rgba(239, 68, 68, 0.04) !important;
}

body.theme-light .readiness-error-details {
  background: rgba(0, 0, 0, 0.02) !important;
}

/* ============================================================
   v4.15.91 — ACCOUNT CARDS MODERN REDESIGN
   ============================================================ */

/* Account Card Container v4.15.91 */
.account-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 16px !important;
  padding: 20px !important;
  margin-bottom: 12px !important;
  background: linear-gradient(145deg, rgba(28, 32, 48, 0.98), rgba(22, 25, 38, 0.95)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  min-height: auto !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease !important;
}

.account-card:hover {
  border-color: rgba(59, 130, 246, 0.3) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
  /* v2.0.7: Removed transform to prevent jitter */
}

/* Account Info Block v4.15.91 */
.account-info-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
}

/* Main Line: Name + Role Badge v4.15.91 */
.account-main-line {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 6px !important;
}

.account-name {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #f0f4ff !important;
  letter-spacing: -0.01em !important;
}

/* Role Badge Pills v4.15.91 */
.account-role-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: var(--radius-pill) !important;
  text-transform: capitalize !important;
  letter-spacing: 0.02em !important;
}

.account-role-tag[data-role="seller"],
.account-role-tag.seller {
  background: rgba(34, 197, 94, 0.15) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  color: #4ade80 !important;
}

.account-role-tag[data-role="region_manager"],
.account-role-tag.region_manager {
  background: rgba(251, 191, 36, 0.15) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  color: #fbbf24 !important;
}

.account-role-tag[data-role="network_manager"],
.account-role-tag.network_manager,
  background: rgba(59, 130, 246, 0.15) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
}

.account-role-tag[data-role="superadmin"],
.account-role-tag.superadmin {
  background: rgba(168, 85, 247, 0.15) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  color: #a78bfa !important;
}

/* Account Meta Row v4.15.91 */
.account-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.account-meta .meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  max-width: 260px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.account-meta .meta-item .meta-label {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 11px !important;
}

.account-meta .meta-item .meta-value {
  color: var(--ink) !important;
  font-weight: 500 !important;
}

/* Account Card Buttons v4.15.91 */
.account-card-buttons {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.account-info-btn,
.account-remove-btn,
.account-restore-btn {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
  border: 2px solid !important;
}

.account-info-btn {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

.account-info-btn:hover {
  background: rgba(59, 130, 246, 0.25) !important;
  border-color: #60a5fa !important;
  transform: scale(1.05) !important;
}

.account-remove-btn {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}

.account-remove-btn:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #f87171 !important;
  transform: scale(1.05) !important;
}

.account-restore-btn {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

.account-restore-btn:hover {
  background: rgba(34, 197, 94, 0.2) !important;
  border-color: #4ade80 !important;
  transform: scale(1.05) !important;
}

/* Status Chip v4.15.91 */
.account-status-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.account-status-chip.active {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
}

.account-status-chip.deleted {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
}

/* Profile Tags in Modal v4.15.91 (no emojis) */
.profile-tag-v2 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  color: var(--muted) !important;
}

.profile-tag-v2.network {
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
}

.profile-tag-v2.region {
  border-color: rgba(251, 191, 36, 0.3) !important;
  color: #fbbf24 !important;
}

.profile-tag-v2.city {
  border-color: rgba(168, 85, 247, 0.3) !important;
  color: #a78bfa !important;
}

.profile-tag-v2.shop {
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #4ade80 !important;
}

.profile-tag-v2.empty {
  color: var(--muted) !important;
  font-style: italic !important;
}

/* Mobile: Stack buttons under content v4.15.91 */
@media (max-width: 600px) {
  .account-card {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  
  .account-card-buttons {
    justify-content: flex-end !important;
    width: 100% !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  
  .account-info-btn,
  .account-remove-btn,
  .account-restore-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }
}

/* Light theme overrides v4.15.91 */
body.theme-light .account-card {
  background: linear-gradient(145deg, #ffffff, #f8fafc) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

body.theme-light .account-card:hover {
  border-color: rgba(59, 130, 246, 0.25) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1) !important;
}

body.theme-light .account-name {
  color: #1e293b !important;
}

body.theme-light .account-meta .meta-item {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

body.theme-light .profile-tag-v2 {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Empty state styling v4.15.91 (no emojis) */
.empty-state-cta .empty-icon {
  font-size: 0 !important;
  display: none !important;
}

/* ============================================================
   v4.15.92 — LAUNCH PLAN EXIT BUTTONS + FINAL FIXES
   ============================================================ */

/* Launch Plan Title Row with Actions */
.launch-plan-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
}

.launch-plan-title-row h2 {
  margin: 0 !important;
  flex: 1 !important;
  min-width: 200px !important;
}

.launch-plan-actions {
  display: flex !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.launch-plan-actions .btn {
  min-width: 80px !important;
}

/* Button variants */
.btn-outline {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--accent) !important;
}

.btn-danger {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: #f87171 !important;
}

.btn-sm {
  padding: 8px 16px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}

/* Blocker icon without emoji */
.blocker-icon {
  width: 24px !important;
  height: 24px !important;
  background: rgba(239, 68, 68, 0.2) !important;
  border: 2px solid #ef4444 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.blocker-icon::after {
  content: '!' !important;
  color: #ef4444 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* Mobile: stack actions */
@media (max-width: 600px) {
  .launch-plan-title-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .launch-plan-actions {
    justify-content: flex-end !important;
  }
}

/* Light theme */
body.theme-light .btn-outline {
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: var(--ink) !important;
}

body.theme-light .btn-outline:hover {
  background: rgba(0, 0, 0, 0.03) !important;
}

/* Launch Plan icon (no emoji) */
.launch-plan-icon {
  display: none !important; /* Hide empty span */
}

/* Onboarding warning without emoji */
.onboarding-warning {
  padding: 12px 16px !important;
  background: rgba(251, 191, 36, 0.1) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  border-radius: 8px !important;
  color: #fbbf24 !important;
  font-size: 13px !important;
  margin-top: 12px !important;
}

/* ============================================================
   v4.15.93 — FIELD LOCKED ICON + SCOPE POLICY STYLING
   ============================================================ */

/* Field locked icon (SVG, not emoji) */
.field-locked-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  color: var(--muted) !important;
  opacity: 0.7 !important;
}

.field-locked-icon svg {
  width: 12px !important;
  height: 12px !important;
}

/* Locked field styling */
input[data-locked-by-role="true"],
select[data-locked-by-role="true"] {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
  pointer-events: none !important;
}

/* Cache clear button in Diagnostics */
.cache-clear-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  transition: all 0.15s ease !important;
}

.cache-clear-btn:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #f87171 !important;
}

/* DB Error card in Launch Plan */
.db-error-card {
  padding: 20px !important;
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: 12px !important;
  margin-bottom: 16px !important;
}

.db-error-card .error-title {
  color: #f87171 !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  margin-bottom: 8px !important;
}

.db-error-card .error-message {
  color: var(--muted) !important;
  font-size: 14px !important;
  margin-bottom: 16px !important;
}

.db-error-card .error-actions {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* Schema version badge */
.schema-version-badge {
  display: inline-block !important;
  padding: 4px 10px !important;
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  color: #4ade80 !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-family: monospace !important;
}

/* Light theme */
body.theme-light .field-locked-icon {
  color: #64748b !important;
}

body.theme-light input[data-locked-by-role="true"],
body.theme-light select[data-locked-by-role="true"] {
  background-color: rgba(0, 0, 0, 0.03) !important;
}

/* ============================================================
   v4.15.94 — INPUT + DATALIST FORM STYLING
   ============================================================ */

/* Form input with datalist (combobox style) */
.form-input {
  width: 100% !important;
  padding: 12px 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  transition: all 0.15s ease !important;
}

.form-input:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.form-input:disabled,
.form-input[readonly] {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

.form-input[data-locked-by-role="true"] {
  background: rgba(100, 116, 139, 0.1) !important;
  border-color: rgba(100, 116, 139, 0.3) !important;
}

/* Datalist styling hint */
.form-input::placeholder {
  color: var(--muted) !important;
  opacity: 0.7 !important;
}

/* Field hint (instead of warning) */
.field-hint {
  font-size: 12px !important;
  color: var(--muted) !important;
  margin-top: 6px !important;
  padding: 8px 10px !important;
  background: rgba(59, 130, 246, 0.1) !important;
  border-radius: 6px !important;
  border-left: 3px solid var(--accent) !important;
}

/* Light theme */
body.theme-light .form-input {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

body.theme-light .form-input:focus {
  background: rgba(0, 0, 0, 0.05) !important;
}

body.theme-light .form-input[data-locked-by-role="true"] {
  background: rgba(100, 116, 139, 0.08) !important;
}

/* v4.15.99: Gamification tabs */
.gamification-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 12px;
}

.gamification-subtab {
  animation: fadeIn 0.2s ease;
}

.admin-block-inner {
  padding: 16px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  margin-top: 12px;
}

.admin-block-subtitle {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text);
}

/* Networks overview table */
.networks-overview table {
  width: 100%;
  border-collapse: collapse;
}

.networks-overview th,
.networks-overview td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.networks-overview th {
  font-weight: 600;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
}

.text-danger { color: #f87171; }
.text-warning { color: #fbbf24; }
.text-success { color: #4ade80; }

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 6px;
}

/* Gamification responsive */
@media (max-width: 768px) {
  .gamification-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  
  .gamification-tabs .btn-chip {
    white-space: nowrap;
    flex-shrink: 0;
  }
}


/* ===== v5.0.2: USER PROFILE MODAL ===== */

.user-profile-modal {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.user-profile-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.profile-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-avatar-large {
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}

.profile-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-fullname {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #f0f4ff;
}

.profile-username {
  font-size: 14px;
  color: var(--muted);
}

.profile-badges {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.profile-role-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.profile-role-badge.superadmin { background: rgba(168, 85, 247, 0.2); color: #c084fc; border-color: rgba(168, 85, 247, 0.3); }
.profile-role-badge.network_manager { background: rgba(34, 197, 94, 0.2); color: #4ade80; border-color: rgba(34, 197, 94, 0.3); }
.profile-role-badge.region_manager { background: rgba(14, 165, 233, 0.2); color: #38bdf8; border-color: rgba(14, 165, 233, 0.3); }
.profile-role-badge.seller { background: rgba(107, 114, 128, 0.2); color: #9ca3af; border-color: rgba(107, 114, 128, 0.3); }

.profile-status-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.profile-status-badge.active { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.profile-status-badge.disabled { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.profile-status-badge.deleted { background: rgba(239, 68, 68, 0.15); color: #f87171; }

.profile-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.user-profile-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 !important;
}

/* Profile Sections */
.profile-section {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.profile-section:last-child {
  border-bottom: none;
}

.profile-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.profile-section-header:hover {
  background: rgba(255,255,255,0.03);
}

.profile-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #f0f4ff;
}

.profile-section-toggle {
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.profile-section-header.collapsed .profile-section-toggle {
  transform: rotate(0deg);
}

.profile-section-content {
  padding: 0 24px 20px;
}

.profile-section-content.collapsed {
  display: none;
}

/* Profile Grid */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 600px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
  
  .profile-header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .profile-avatar-large {
    width: 56px;
    height: 56px;
    min-width: 56px;
    font-size: 22px;
  }
}

.profile-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.05);
}

.profile-field.full-width {
  grid-column: 1 / -1;
}

.profile-field-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profile-field-value {
  font-size: 14px;
  color: #f0f4ff;
  word-break: break-word;
}

.profile-field-value.empty {
  color: var(--muted);
  font-style: italic;
}

.profile-field-value.monospace {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 13px;
}

/* SA Only sections */
.superadmin-profile-section {
  display: none;
}

body[data-role="superadmin"] .superadmin-profile-section {
  display: block;
}

/* Profile Notes */
.profile-notes-textarea {
  width: 100%;
  min-height: 100px;
  padding: 12px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #f0f4ff;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 12px;
}

.profile-notes-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Profile Actions */
.user-profile-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 24px !important;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.2);
}

.profile-actions-right {
  display: flex;
  gap: 8px;
}

/* Reset Password Modal */
.reset-password-warning {
  padding: 14px;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 8px;
  color: #fbbf24;
  font-size: 13px;
  margin-bottom: 16px;
}

.reset-password-options {
  margin-bottom: 16px;
}

.reset-password-user {
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  font-size: 14px;
}

.reset-password-success {
  text-align: center;
  padding: 20px;
}

.reset-password-label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.reset-password-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.reset-password-value code {
  font-size: 20px;
  font-weight: 700;
  padding: 12px 20px;
  background: rgba(34, 197, 94, 0.1);
  border: 2px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  color: #4ade80;
  letter-spacing: 2px;
}

.reset-password-expires {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}

.reset-password-notice {
  padding: 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #f87171;
  font-size: 12px;
}

/* Button variants */
.btn-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border: none;
}

.btn-warning:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.btn-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-icon:hover {
  background: rgba(255,255,255,0.1);
  color: #f0f4ff;
}

.btn-sm {
  padding: 8px 14px;
  font-size: 13px;
}

/* Permissions Grid */
.permissions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.permission-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
  font-size: 13px;
}

.permission-icon {
  font-size: 14px;
}

.permission-icon.allowed { color: #4ade80; }
.permission-icon.denied { color: #f87171; }

/* ===== v5.0.3: DASHBOARD REDESIGN ===== */

/* Dashboard Stats Row - Better Design */
.dashboard-stats-row .stat-card {
  background: linear-gradient(135deg, rgba(41, 98, 255, 0.08) 0%, rgba(41, 98, 255, 0.02) 100%);
  border: 1px solid rgba(41, 98, 255, 0.15);
  position: relative;
  overflow: hidden;
}

.dashboard-stats-row .stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.dashboard-stats-row .stat-card:hover::before {
  opacity: 1;
}

.dashboard-stats-row .stat-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
}

.dashboard-stats-row .stat-card:nth-child(1) .stat-icon { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.dashboard-stats-row .stat-card:nth-child(2) .stat-icon { background: linear-gradient(135deg, #10b981, #34d399); }
.dashboard-stats-row .stat-card:nth-child(3) .stat-icon { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.dashboard-stats-row .stat-card:nth-child(4) .stat-icon { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }

.dashboard-stats-row .stat-value {
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, #f0f4ff, #cbd5e1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Quick Actions - Clean Design */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.quick-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.quick-action-card:hover {
  background: rgba(41, 98, 255, 0.08);
  border-color: rgba(41, 98, 255, 0.3);
  transform: translateY(-2px);
}

.qa-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(41, 98, 255, 0.15), rgba(139, 92, 246, 0.15));
  border-radius: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #60a5fa;
}

.qa-icon svg {
  width: 24px;
  height: 24px;
  stroke: #60a5fa;
}

.qa-title {
  font-size: 13px;
  font-weight: 600;
  color: #f0f4ff;
}

.qa-hint {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.7;
}

/* Launch Plan Card - Cleaner */
.launch-plan-card {
  background: linear-gradient(135deg, rgba(41, 98, 255, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
  border: 1px solid rgba(41, 98, 255, 0.15);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}

.launch-plan-header {
  margin-bottom: 20px;
}

.launch-plan-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.launch-plan-icon {
  display: none;
}

.launch-plan-title {
  font-size: 18px;
  font-weight: 700;
  color: #f0f4ff;
  margin: 0;
}

.launch-plan-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.launch-plan-badge.ready {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.3);
}

.launch-plan-progress-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.progress-bar-lg {
  flex: 1;
  height: 10px;
  background: rgba(255,255,255,0.08);
  border-radius: 5px;
  overflow: hidden;
}

.progress-bar-lg .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 5px;
  transition: width 0.5s ease;
}

.progress-bar-lg .progress-fill.low { background: linear-gradient(90deg, #ef4444, #f87171); }
.progress-bar-lg .progress-fill.medium { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.progress-bar-lg .progress-fill.high { background: linear-gradient(90deg, #10b981, #4ade80); }

.progress-text-lg {
  font-size: 16px;
  font-weight: 700;
  color: #f0f4ff;
  min-width: 50px;
  text-align: right;
}

.progress-text-lg.low { color: #f87171; }
.progress-text-lg.medium { color: #fbbf24; }
.progress-text-lg.high { color: #4ade80; }

/* Onboarding Checklist */
.onboarding-checklist {
  display: grid;
  gap: 8px;
}

.onboarding-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.onboarding-item.completed {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.05);
}

.onboarding-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.onboarding-item.completed .onboarding-check {
  background: linear-gradient(135deg, #10b981, #4ade80);
  border-color: transparent;
}

.onboarding-item.completed .onboarding-check::after {
  content: '✓';
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.onboarding-item-content {
  flex: 1;
  min-width: 0;
}

.onboarding-item-text {
  font-size: 14px;
  font-weight: 500;
  color: #f0f4ff;
  display: block;
}

.onboarding-item-hint {
  font-size: 12px;
  color: var(--muted);
  opacity: 0.7;
}

.onboarding-cta-btn {
  padding: 6px 14px;
  background: rgba(41, 98, 255, 0.15);
  border: 1px solid rgba(41, 98, 255, 0.3);
  border-radius: 6px;
  color: #60a5fa;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.onboarding-cta-btn:hover {
  background: rgba(41, 98, 255, 0.25);
}

.onboarding-item.completed .onboarding-cta-btn {
  opacity: 0.5;
}

.onboarding-warning {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 8px;
  color: #fbbf24;
  font-size: 13px;
}

/* System Status */
.system-status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
}

.status-indicator.online {
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}

.status-label {
  font-size: 12px;
  color: var(--muted);
}

.status-value {
  font-size: 14px;
  font-weight: 600;
  color: #f0f4ff;
}

/* Dashboard Card Clean */
.dashboard-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
}

.dashboard-card-header {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.dashboard-card-icon {
  display: none;
}

@media (max-width: 900px) {
  .dashboard-stats-row { grid-template-columns: repeat(2, 1fr); }
  .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
  .system-status-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .dashboard-stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .dashboard-stats-row .stat-card { padding: 10px !important; flex-direction: row !important; gap: 8px !important; align-items: center !important; }
  .dashboard-stats-row .stat-icon { width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 8px !important; font-size: 14px !important; }
  .dashboard-stats-row .stat-icon svg { width: 16px !important; height: 16px !important; }
  .dashboard-stats-row .stat-value { font-size: 18px !important; }
  .dashboard-stats-row .stat-label { font-size: 10px !important; }
  .quick-actions-grid { grid-template-columns: 1fr 1fr; }
  .system-status-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ========== v5.0.4: SELLER 360 DRAWER ========== */

.seller360-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  justify-content: flex-end;
}

.seller360-drawer.hidden {
  display: none;
}

.seller360-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.seller360-panel {
  position: relative;
  width: 100%;
  max-width: 540px;
  height: 100%;
  background: var(--surface, #0d1117);
  border-left: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.25s ease;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* Header */
.seller360-header {
  padding: 20px;
  background: linear-gradient(180deg, rgba(41, 98, 255, 0.08) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.seller360-header-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.seller360-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  flex-shrink: 0;
}

.seller360-header-info {
  flex: 1;
  min-width: 0;
}

.seller360-name {
  font-size: 20px;
  font-weight: 700;
  color: #f0f4ff;
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seller360-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.seller360-username {
  font-size: 14px;
  color: var(--muted);
}

.seller360-status-badge {
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.seller360-status-badge.active {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.seller360-status-badge.disabled {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.seller360-status-badge.deleted {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.seller360-status-badge.locked {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.seller360-close {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  color: var(--muted);
  font-size: 24px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.seller360-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* Badges */
.seller360-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.seller360-badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,255,255,0.05);
  color: var(--muted);
}

.seller360-badge.role {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
  color: #60a5fa;
}

.seller360-badge.scope {
  background: rgba(255,255,255,0.06);
}

.seller360-badge.mic {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.seller360-badge.mic.assigned {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

/* Quick KPIs */
.seller360-quick-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.seller360-kpi {
  text-align: center;
  padding: 10px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
}

.seller360-kpi-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #f0f4ff;
}

.seller360-kpi-label {
  display: block;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 2px;
}

/* Tabs */
.seller360-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 12px 20px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.seller360-tab {
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.seller360-tab:hover {
  background: rgba(255,255,255,0.05);
  color: #f0f4ff;
}

.seller360-tab.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
  color: #60a5fa;
}

/* Content */
.seller360-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.seller360-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--muted);
}

.seller360-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 14px;
}

/* Sections */
.seller360-section {
  margin-bottom: 24px;
}

.seller360-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Grid */
.seller360-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.seller360-field {
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  position: relative;
}

.seller360-field.full-width {
  grid-column: span 2;
}

.field-label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.field-value {
  font-size: 14px;
  color: #f0f4ff;
}

.field-value.monospace {
  font-family: 'JetBrains Mono', monospace;
}

.field-value.warning {
  color: #fbbf24;
}

.btn-copy-small {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  font-size: 10px;
  color: var(--muted);
  cursor: pointer;
}

.btn-copy-small:hover {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

/* Mic Status */
.seller360-mic-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}

.seller360-mic-status.assigned {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.05);
}

.seller360-mic-status.none {
  border-color: rgba(239, 68, 68, 0.2);
}

.mic-icon {
  font-size: 28px;
}

.mic-id {
  font-size: 14px;
  font-weight: 600;
  color: #f0f4ff;
}

.mic-meta {
  font-size: 12px;
  color: var(--muted);
}

/* KPI Cards */
.seller360-kpi-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.kpi-period-card {
  padding: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  text-align: center;
}

.kpi-period-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 12px;
}

.kpi-period-stats {
  display: flex;
  justify-content: space-around;
}

.kpi-stat-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #f0f4ff;
}

.kpi-stat-label {
  display: block;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
}

/* QA */
.seller360-qa-summary {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.qa-score-big {
  flex: 1;
  text-align: center;
  padding: 20px;
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
}

.qa-score-big.good { border: 2px solid rgba(34, 197, 94, 0.3); }
.qa-score-big.medium { border: 2px solid rgba(251, 191, 36, 0.3); }
.qa-score-big.low { border: 2px solid rgba(239, 68, 68, 0.3); }

.qa-score-value {
  display: block;
  font-size: 32px;
  font-weight: 700;
}

.qa-score-big.good .qa-score-value { color: #4ade80; }
.qa-score-big.medium .qa-score-value { color: #fbbf24; }
.qa-score-big.low .qa-score-value { color: #f87171; }

.qa-score-label, .qa-calls-label {
  font-size: 12px;
  color: var(--muted);
}

.qa-calls-count {
  flex: 1;
  text-align: center;
  padding: 20px;
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
}

.qa-calls-value {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #f0f4ff;
}

.seller360-qa-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qa-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
}

.qa-item-score {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
}

.qa-item-score.good { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.qa-item-score.medium { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.qa-item-score.low { background: rgba(239, 68, 68, 0.15); color: #f87171; }

.qa-item-date {
  font-size: 13px;
  color: #f0f4ff;
}

.qa-item-flags {
  font-size: 11px;
  color: #f87171;
}

/* Scripts */
.seller360-script-info {
  padding: 16px;
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
}

.script-type-badge {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #60a5fa;
  margin-bottom: 12px;
}

.script-compliance {
  display: flex;
  align-items: center;
  gap: 12px;
}

.compliance-label {
  font-size: 13px;
  color: var(--muted);
}

.compliance-bar {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
}

.compliance-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 4px;
}

.compliance-value {
  font-size: 14px;
  font-weight: 600;
  color: #f0f4ff;
  min-width: 40px;
}

.seller360-violations {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.violation-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
}

.violation-type {
  font-size: 13px;
  color: #f87171;
}

.violation-date {
  font-size: 12px;
  color: var(--muted);
}

/* Sessions */
.active-session-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 10px;
}

.session-status {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.session-status.active {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.session-time {
  font-size: 13px;
  color: #f0f4ff;
}

.seller360-sessions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.session-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
}

.session-time-range {
  font-size: 13px;
  color: #f0f4ff;
}

.session-duration {
  font-size: 12px;
  color: var(--muted);
}

/* Points */
.points-balance-big {
  text-align: center;
  padding: 30px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(245, 158, 11, 0.08));
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 16px;
}

.points-value {
  font-size: 48px;
  font-weight: 800;
  color: #fbbf24;
}

.points-label {
  font-size: 14px;
  color: var(--muted);
}

.seller360-points-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.points-item {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
}

.points-item-value {
  min-width: 60px;
  font-size: 16px;
  font-weight: 700;
}

.points-item.plus .points-item-value { color: #4ade80; }
.points-item.minus .points-item-value { color: #f87171; }

.points-item-reason {
  font-size: 13px;
  color: #f0f4ff;
}

.points-item-date {
  font-size: 11px;
  color: var(--muted);
}

/* Messages */
.seller360-send-message {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.seller360-send-message textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #f0f4ff;
  font-size: 14px;
  resize: vertical;
}

.seller360-messages-list, .seller360-notes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.message-item, .note-item {
  padding: 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
}

.message-item.unread {
  border-left: 3px solid #3b82f6;
}

.message-from {
  font-size: 12px;
  font-weight: 600;
  color: #60a5fa;
  margin-bottom: 4px;
}

.message-text, .note-text {
  font-size: 13px;
  color: #f0f4ff;
  margin-bottom: 6px;
}

.message-date, .note-meta {
  font-size: 11px;
  color: var(--muted);
}

.note-item.warning {
  border-left: 3px solid #fbbf24;
  background: rgba(251, 191, 36, 0.05);
}

/* Security */
.seller360-warning {
  padding: 14px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #f87171;
  font-size: 14px;
}

.seller360-security-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.seller360-audit-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  font-size: 12px;
}

.audit-event {
  font-weight: 600;
  color: #f0f4ff;
}

.audit-actor {
  color: #60a5fa;
}

.audit-date {
  margin-left: auto;
  color: var(--muted);
}

/* Footer */
.seller360-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.seller360-actions {
  display: flex;
  gap: 10px;
}

/* Mobile */
@media (max-width: 600px) {
  .seller360-panel {
    max-width: 100%;
  }
  
  .seller360-quick-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .seller360-tabs {
    gap: 4px;
  }
  
  .seller360-tab {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  .seller360-grid {
    grid-template-columns: 1fr;
  }
  
  .seller360-kpi-cards {
    grid-template-columns: 1fr;
  }
  
  .seller360-qa-summary {
    flex-direction: column;
  }
}

/* ========== v5.0.7: UNIFIED PROFILE MODAL (with tabs for seller) ========== */

/* Profile Header */
.profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.profile-avatar {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  flex-shrink: 0;
}

.profile-header-info {
  flex: 1;
  min-width: 0;
}

.profile-name {
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 700;
  color: #f0f4ff;
}

.profile-username {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 8px;
}

.profile-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-status-badge {
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.profile-status-badge.active {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.profile-status-badge.disabled {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.profile-status-badge.deleted {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.profile-role-badge {
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

/* Profile Tabs */
.profile-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.profile-tab {
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.profile-tab:hover {
  background: rgba(255,255,255,0.05);
  color: #f0f4ff;
}

.profile-tab.active {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

/* Profile Tab Content */
.profile-tab-content {
  padding: 16px;
  max-height: 400px;
  overflow-y: auto;
}

.profile-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 14px;
}

.profile-empty {
  text-align: center;
  padding: 30px 20px;
  color: var(--muted);
  font-size: 14px;
}

/* Profile Fields */
.profile-fields {
  display: grid;
  gap: 10px;
}

.profile-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
}

.profile-field.full-width {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.profile-field-label {
  font-size: 13px;
  color: var(--muted);
}

.profile-field-value {
  font-size: 14px;
  color: #f0f4ff;
  font-weight: 500;
}

/* Profile Section */
.profile-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.profile-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.profile-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* Profile Security Grid */
.profile-security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.profile-security-grid > div {
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
}

.profile-security-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Profile KPI Cards */
.profile-kpi-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.profile-kpi-card {
  padding: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  text-align: center;
}

.profile-kpi-period {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 12px;
}

.profile-kpi-stats {
  display: flex;
  justify-content: space-around;
}

.profile-kpi-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #f0f4ff;
}

.profile-kpi-label {
  display: block;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 2px;
}

/* Profile Sessions */
.profile-active-session {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
}

.session-status-active {
  padding: 4px 10px;
  background: rgba(34, 197, 94, 0.2);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #4ade80;
}

.profile-sessions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-session-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
}

.session-time {
  font-size: 14px;
  color: #f0f4ff;
}

.session-duration {
  font-size: 13px;
  color: var(--muted);
}

.profile-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted);
}

.profile-stat-row strong {
  color: #f0f4ff;
}

/* Profile Points */
.profile-points-balance {
  text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(245, 158, 11, 0.08));
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 12px;
  margin-bottom: 20px;
}

.points-balance-value {
  font-size: 40px;
  font-weight: 800;
  color: #fbbf24;
}

.points-balance-label {
  font-size: 14px;
  color: var(--muted);
  margin-left: 8px;
}

.profile-points-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.profile-points-item {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
}

.points-item-value {
  min-width: 50px;
  font-size: 14px;
  font-weight: 700;
}

.profile-points-item.plus .points-item-value { color: #4ade80; }
.profile-points-item.minus .points-item-value { color: #f87171; }

.points-item-info {
  flex: 1;
}

.points-item-reason {
  font-size: 13px;
  color: #f0f4ff;
  display: block;
}

.points-item-date {
  font-size: 11px;
  color: var(--muted);
}

/* Profile QA */
.profile-qa-summary {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.profile-qa-score, .profile-qa-count {
  flex: 1;
  text-align: center;
  padding: 20px;
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
}

.profile-qa-score.good { border: 2px solid rgba(34, 197, 94, 0.3); }
.profile-qa-score.medium { border: 2px solid rgba(251, 191, 36, 0.3); }
.profile-qa-score.low { border: 2px solid rgba(239, 68, 68, 0.3); }

.qa-score-value, .qa-count-value {
  display: block;
  font-size: 28px;
  font-weight: 700;
}

.profile-qa-score.good .qa-score-value { color: #4ade80; }
.profile-qa-score.medium .qa-score-value { color: #fbbf24; }
.profile-qa-score.low .qa-score-value { color: #f87171; }

.qa-count-value { color: #f0f4ff; }

.qa-score-label, .qa-count-label {
  font-size: 12px;
  color: var(--muted);
}

.profile-qa-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-qa-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
}

.qa-item-score {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}

.qa-item-score.good { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.qa-item-score.medium { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.qa-item-score.low { background: rgba(239, 68, 68, 0.15); color: #f87171; }

.qa-item-date {
  font-size: 13px;
  color: #f0f4ff;
}

.qa-item-flags {
  font-size: 11px;
  color: #f87171;
}

/* Mobile */
@media (max-width: 600px) {
  .profile-header {
    flex-direction: column;
    text-align: center;
  }
  
  .profile-badges {
    justify-content: center;
  }
  
  .profile-kpi-cards {
    grid-template-columns: 1fr;
  }
  
  .profile-security-grid {
    grid-template-columns: 1fr;
  }
  
  .profile-qa-summary {
    flex-direction: column;
  }
}

/* ========== v5.0.8: SELLER PROFILE ENHANCEMENTS ========== */

/* Larger modal for seller */
.seller-profile-modal .modal-content {
  max-width: 640px !important;
  max-height: 90vh !important;
}

/* Seller header */
.profile-header.seller-header {
  border-bottom: none;
  padding-bottom: 12px;
}

/* Scope badges */
.profile-scope-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 24px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.scope-badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(255,255,255,0.05);
  color: var(--muted);
}

.scope-badge.network {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.scope-badge.region {
  background: rgba(168, 85, 247, 0.15);
  color: #a78bfa;
}

.scope-badge.city {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.scope-badge.shop {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.scope-badge.position {
  background: rgba(236, 72, 153, 0.15);
  color: #f472b6;
}

/* Quick KPIs row */
.profile-quick-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px 24px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.quick-kpi {
  text-align: center;
  padding: 8px 4px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
}

.quick-kpi-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #f0f4ff;
}

.quick-kpi-label {
  display: block;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 2px;
}

/* Scripts tab */
.profile-script-type {
  padding: 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
}

.script-type-badge {
  display: inline-block;
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #60a5fa;
}

.profile-compliance {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
}

.compliance-bar-container {
  flex: 1;
  height: 10px;
  background: rgba(255,255,255,0.1);
  border-radius: 5px;
  overflow: hidden;
}

.compliance-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 5px;
  transition: width 0.3s ease;
}

.compliance-value {
  font-size: 14px;
  font-weight: 600;
  color: #f0f4ff;
  min-width: 80px;
  text-align: right;
}

.profile-violations-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-violation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 6px;
}

.violation-type {
  font-size: 13px;
  color: #f87171;
}

.violation-date {
  font-size: 12px;
  color: var(--muted);
}

/* Messages tab */
.profile-send-message {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-send-message textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #f0f4ff;
  font-size: 14px;
  resize: vertical;
  font-family: inherit;
}

.profile-send-message textarea:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.5);
}

.profile-messages-list, .profile-notes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 250px;
  overflow-y: auto;
}

.profile-message-item {
  padding: 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  border-left: 3px solid transparent;
}

.profile-message-item.unread {
  border-left-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.message-from {
  font-size: 13px;
  font-weight: 600;
  color: #60a5fa;
}

.message-date {
  font-size: 11px;
  color: var(--muted);
}

.message-text {
  font-size: 14px;
  color: #f0f4ff;
  line-height: 1.5;
}

.profile-note-item {
  padding: 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  border-left: 3px solid rgba(255,255,255,0.1);
}

.profile-note-item.warning {
  border-left-color: #fbbf24;
  background: rgba(251, 191, 36, 0.05);
}

.profile-note-item.info {
  border-left-color: #3b82f6;
}

.note-text {
  font-size: 14px;
  color: #f0f4ff;
  margin-bottom: 6px;
}

.note-meta {
  font-size: 11px;
  color: var(--muted);
}

/* Mobile adjustments */
@media (max-width: 500px) {
  .profile-quick-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .profile-scope-badges {
    padding: 0 16px 12px;
  }
  
  .scope-badge {
    font-size: 10px;
    padding: 3px 8px;
  }
}

/* ========== v5.0.9: SELLER PROFILE REDESIGN WITH ANIMATIONS ========== */

/* Seller Profile Modal - Larger size */
#userProfileModal.seller-profile-modal .modal {
  max-width: 680px !important;
  width: 95% !important;
  max-height: 90vh !important;
  overflow: hidden;
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Profile Header - Full redesign */
.profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%) !important;
  border-bottom: none !important;
  animation: fadeInUp 0.3s ease-out;
}

.profile-header.seller-header {
  padding-bottom: 16px !important;
}

.profile-avatar {
  width: 72px !important;
  height: 72px !important;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3) !important;
  animation: fadeInUp 0.4s ease-out;
}

.profile-header-info {
  flex: 1;
  min-width: 0;
  animation: fadeInUp 0.5s ease-out;
}

.profile-name {
  margin: 0 0 4px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #f0f4ff !important;
  line-height: 1.2 !important;
}

.profile-username {
  font-size: 14px !important;
  color: rgba(255,255,255,0.5) !important;
  margin-bottom: 10px !important;
}

.profile-badges {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.profile-status-badge {
  padding: 5px 12px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.profile-status-badge.active {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(16, 185, 129, 0.2)) !important;
  color: #4ade80 !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.2) !important;
}

.profile-status-badge.disabled {
  background: rgba(251, 191, 36, 0.15) !important;
  color: #fbbf24 !important;
}

.profile-status-badge.deleted {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
}

.profile-role-badge {
  padding: 5px 12px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2)) !important;
  color: #a78bfa !important;
}

/* Scope Badges Row */
.profile-scope-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 12px 24px 16px !important;
  background: rgba(0,0,0,0.2) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  animation: fadeInUp 0.5s ease-out 0.1s both;
}

.scope-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.scope-badge:hover {
  transform: translateY(-1px);
}

.scope-badge.network {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05)) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

.scope-badge.network::before {
  content: "🏢";
  font-size: 11px;
}

.scope-badge.region {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.05)) !important;
  color: #c4b5fd !important;
  border: 1px solid rgba(168, 85, 247, 0.2) !important;
}

.scope-badge.region::before {
  content: "📍";
  font-size: 11px;
}

.scope-badge.city {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05)) !important;
  color: #86efac !important;
  border: 1px solid rgba(34, 197, 94, 0.2) !important;
}

.scope-badge.city::before {
  content: "🏙️";
  font-size: 11px;
}

.scope-badge.shop {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.05)) !important;
  color: #fcd34d !important;
  border: 1px solid rgba(251, 191, 36, 0.2) !important;
}

.scope-badge.shop::before {
  content: "🏪";
  font-size: 11px;
}

.scope-badge.position {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(236, 72, 153, 0.05)) !important;
  color: #f9a8d4 !important;
  border: 1px solid rgba(236, 72, 153, 0.2) !important;
}

.scope-badge.position::before {
  content: "👤";
  font-size: 11px;
}

/* Quick KPIs Row */
.profile-quick-kpis {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  padding: 16px 24px !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  animation: fadeInUp 0.5s ease-out 0.2s both;
}

.quick-kpi {
  text-align: center !important;
  padding: 14px 8px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
}

.quick-kpi:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  transform: translateY(-2px);
}

.quick-kpi-value {
  display: block !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #f0f4ff !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
  background: linear-gradient(135deg, #f0f4ff, #a78bfa) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.quick-kpi-label {
  display: block !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.5) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Profile Tabs */
.profile-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  padding: 12px 16px !important;
  background: rgba(0,0,0,0.3) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.profile-tabs::-webkit-scrollbar {
  display: none;
}

.profile-tab {
  padding: 8px 12px !important;
  border: none !important;
  background: transparent !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  position: relative;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.profile-tab:hover {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.8) !important;
}

.profile-tab.active {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
}

.profile-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: #3b82f6;
  border-radius: 1px;
}

/* Profile Tab Content */
.profile-tab-content {
  padding: 16px !important;
  max-height: 400px !important;
  overflow-y: auto !important;
}

.profile-tab-content::-webkit-scrollbar {
  width: 6px;
}

.profile-tab-content::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.02);
  border-radius: 3px;
}

.profile-tab-content::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

.profile-tab-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}

/* Profile Loading State */
.profile-loading {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 60px 20px !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 14px !important;
}

.profile-loading .spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Profile Empty State */
.profile-empty {
  text-align: center !important;
  padding: 40px 20px !important;
  color: rgba(255,255,255,0.4) !important;
  font-size: 14px !important;
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,0.1);
}

/* Profile Fields (Overview tab) */
.profile-fields {
  display: grid !important;
  gap: 10px !important;
}

.profile-field {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 16px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.profile-field:hover {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
}

.profile-field.full-width {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

.profile-field-label {
  font-size: 13px !important;
  color: rgba(255,255,255,0.5) !important;
}

.profile-field-value {
  font-size: 14px !important;
  color: #f0f4ff !important;
  font-weight: 500 !important;
}

/* Profile Section */
.profile-section {
  margin-top: 20px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  animation: fadeInUp 0.3s ease-out;
}

.profile-section:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

.profile-section-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.4) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 14px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-section-title::before {
  content: "";
  width: 4px;
  height: 14px;
  background: linear-gradient(180deg, #3b82f6, #8b5cf6);
  border-radius: 2px;
}

/* KPI Tab Cards */
.profile-kpi-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}

.profile-kpi-card {
  padding: 20px 16px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), transparent) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
}

.profile-kpi-card:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.05)) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.profile-kpi-period {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.5) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 16px !important;
}

.profile-kpi-stats {
  display: flex !important;
  justify-content: space-around !important;
  gap: 12px;
}

.profile-kpi-stat {
  flex: 1;
}

.profile-kpi-value {
  display: block !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #f0f4ff !important;
  line-height: 1 !important;
}

.profile-kpi-label {
  display: block !important;
  font-size: 10px !important;
  color: rgba(255,255,255,0.4) !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
}

/* Sessions Tab */
.profile-active-session {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px !important;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.02)) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  border-radius: 12px !important;
  animation: pulse 2s ease-in-out infinite;
}

.session-status-active {
  padding: 6px 14px !important;
  background: rgba(34, 197, 94, 0.2) !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #4ade80 !important;
}

.profile-sessions-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.profile-session-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 16px !important;
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.profile-session-item:hover {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
}

.session-time {
  font-size: 14px !important;
  color: #f0f4ff !important;
  font-weight: 500 !important;
}

.session-duration {
  font-size: 13px !important;
  color: rgba(255,255,255,0.5) !important;
  background: rgba(255,255,255,0.05);
  padding: 4px 10px;
  border-radius: 6px;
}

/* Points Tab */
.profile-points-balance {
  text-align: center !important;
  padding: 32px !important;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05)) !important;
  border: 1px solid rgba(251, 191, 36, 0.2) !important;
  border-radius: 16px !important;
  margin-bottom: 24px !important;
  position: relative;
  overflow: hidden;
}

.profile-points-balance::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  animation: shimmer 3s infinite;
}

.points-balance-value {
  font-size: 48px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.points-balance-label {
  font-size: 16px !important;
  color: rgba(255,255,255,0.5) !important;
  margin-left: 8px !important;
}

.profile-points-history {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  max-height: 200px !important;
  overflow-y: auto !important;
}

.profile-points-item {
  display: flex !important;
  gap: 14px !important;
  padding: 12px 16px !important;
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.profile-points-item:hover {
  background: rgba(255,255,255,0.04) !important;
}

.points-item-value {
  min-width: 60px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.profile-points-item.plus .points-item-value { 
  color: #4ade80 !important; 
}

.profile-points-item.minus .points-item-value { 
  color: #f87171 !important; 
}

/* QA Tab */
.profile-qa-summary {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

.profile-qa-score, .profile-qa-count {
  text-align: center !important;
  padding: 24px !important;
  background: rgba(255,255,255,0.02) !important;
  border-radius: 14px !important;
  border: 2px solid transparent !important;
}

.profile-qa-score.good { 
  border-color: rgba(34, 197, 94, 0.3) !important; 
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), transparent) !important;
}

.profile-qa-score.medium { 
  border-color: rgba(251, 191, 36, 0.3) !important; 
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), transparent) !important;
}

.profile-qa-score.low { 
  border-color: rgba(239, 68, 68, 0.3) !important; 
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), transparent) !important;
}

.qa-score-value, .qa-count-value {
  display: block !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
}

.profile-qa-score.good .qa-score-value { color: #4ade80 !important; }
.profile-qa-score.medium .qa-score-value { color: #fbbf24 !important; }
.profile-qa-score.low .qa-score-value { color: #f87171 !important; }
.qa-count-value { color: #f0f4ff !important; }

.qa-score-label, .qa-count-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.5) !important;
  text-transform: uppercase !important;
}

/* Scripts Tab */
.profile-script-type {
  padding: 16px !important;
  background: rgba(255,255,255,0.02) !important;
  border-radius: 12px !important;
}

.script-type-badge {
  display: inline-block !important;
  padding: 10px 20px !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2)) !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #a78bfa !important;
}

.profile-compliance {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px !important;
  background: rgba(255,255,255,0.02) !important;
  border-radius: 12px !important;
}

.compliance-bar-container {
  flex: 1 !important;
  height: 12px !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.compliance-bar-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6) !important;
  border-radius: 6px !important;
  transition: width 0.5s ease !important;
  position: relative;
}

.compliance-bar-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 2s infinite;
}

.compliance-value {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #f0f4ff !important;
  min-width: 80px !important;
  text-align: right !important;
}

/* Messages Tab */
.profile-send-message textarea {
  width: 100% !important;
  min-height: 100px !important;
  padding: 14px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  color: #f0f4ff !important;
  font-size: 14px !important;
  resize: vertical !important;
  font-family: inherit !important;
  transition: all 0.2s ease !important;
}

.profile-send-message textarea:focus {
  outline: none !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.profile-message-item {
  padding: 14px !important;
  background: rgba(255,255,255,0.02) !important;
  border-radius: 10px !important;
  border-left: 3px solid rgba(255,255,255,0.1) !important;
  transition: all 0.2s ease !important;
}

.profile-message-item.unread {
  border-left-color: #3b82f6 !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), transparent) !important;
}

.message-from {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #60a5fa !important;
}

/* Security Tab */
.profile-security-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

.profile-security-grid > div {
  padding: 12px !important;
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 10px !important;
}

/* Button Styles */
.btn-warning {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.2)) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
}

.btn-warning:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(245, 158, 11, 0.3)) !important;
}

/* Mobile Responsive */
@media (max-width: 600px) {
  #userProfileModal.seller-profile-modal .modal {
    max-width: 100% !important;
    max-height: 95vh !important;
    margin: 10px;
    border-radius: 16px;
  }
  
  .profile-header {
    flex-direction: column !important;
    text-align: center !important;
    padding: 20px 16px !important;
  }
  
  .profile-badges {
    justify-content: center !important;
  }
  
  .profile-scope-badges {
    justify-content: center !important;
    padding: 12px 16px !important;
  }
  
  .profile-quick-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 12px 16px !important;
  }
  
  .profile-tabs {
    padding: 10px 12px !important;
  }
  
  .profile-tab {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  
  .profile-tab-content {
    padding: 16px !important;
    max-height: 300px !important;
  }
  
  .profile-kpi-cards {
    grid-template-columns: 1fr !important;
  }
  
  .profile-qa-summary {
    grid-template-columns: 1fr !important;
  }
  
  .profile-security-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ========== v5.0.10: MOBILE BOTTOM SHEET - COMPLETE REDESIGN ========== */

/* Force bottom sheet to be at bottom, full width */
.mobile-sheet {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 75vh !important;
  background: linear-gradient(180deg, #1e2235 0%, #14171f 100%) !important;
  border-radius: 24px 24px 0 0 !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5) !important;
  z-index: 10001 !important;
  transform: translateY(100%) !important;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
  padding-bottom: env(safe-area-inset-bottom, 20px) !important;
  overflow: hidden !important;
}

.mobile-sheet.open {
  transform: translateY(0) !important;
}

/* Overlay with blur */
.mobile-sheet-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 10000 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.mobile-sheet-overlay.visible {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Handle bar */
.mobile-sheet-handle {
  width: 40px !important;
  height: 5px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  border-radius: 3px !important;
  margin: 14px auto 10px !important;
}

/* Header */
.mobile-sheet-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 20px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.mobile-sheet-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.mobile-sheet-close {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.7) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.mobile-sheet-close:active {
  background: rgba(255, 255, 255, 0.15) !important;
  transform: scale(0.95) !important;
}

/* Body */
.mobile-sheet-body {
  padding: 16px 20px 24px !important;
  max-height: calc(75vh - 80px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

/* Navigation Items - Grid Layout */
.mobile-sheet-nav-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

.mobile-sheet-nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 20px 12px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
}

.mobile-sheet-nav-item:active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.15)) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  transform: scale(0.97) !important;
}

.mobile-sheet-nav-item svg {
  width: 28px !important;
  height: 28px !important;
  opacity: 0.8 !important;
}

/* Animation for items */
.mobile-sheet.open .mobile-sheet-nav-item {
  animation: sheetItemFadeIn 0.3s ease-out forwards;
}

.mobile-sheet.open .mobile-sheet-nav-item:nth-child(1) { animation-delay: 0.05s; }
.mobile-sheet.open .mobile-sheet-nav-item:nth-child(2) { animation-delay: 0.1s; }
.mobile-sheet.open .mobile-sheet-nav-item:nth-child(3) { animation-delay: 0.15s; }
.mobile-sheet.open .mobile-sheet-nav-item:nth-child(4) { animation-delay: 0.2s; }
.mobile-sheet.open .mobile-sheet-nav-item:nth-child(5) { animation-delay: 0.25s; }
.mobile-sheet.open .mobile-sheet-nav-item:nth-child(6) { animation-delay: 0.3s; }
.mobile-sheet.open .mobile-sheet-nav-item:nth-child(7) { animation-delay: 0.35s; }
.mobile-sheet.open .mobile-sheet-nav-item:nth-child(8) { animation-delay: 0.4s; }

@keyframes sheetItemFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Reset on closed */
.mobile-sheet:not(.open) .mobile-sheet-nav-item {
  opacity: 0;
}

/* Light theme */
body.theme-light .mobile-sheet {
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%) !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15) !important;
}

body.theme-light .mobile-sheet-overlay {
  background: rgba(0, 0, 0, 0.4) !important;
}

body.theme-light .mobile-sheet-handle {
  background: rgba(0, 0, 0, 0.15) !important;
}

body.theme-light .mobile-sheet-title {
  color: #1a1d2e !important;
}

body.theme-light .mobile-sheet-close {
  background: rgba(0, 0, 0, 0.05) !important;
  color: rgba(0, 0, 0, 0.6) !important;
}

body.theme-light .mobile-sheet-nav-item {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01)) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #1a1d2e !important;
}

body.theme-light .mobile-sheet-nav-item:active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.1)) !important;
}

/* Desktop - hide completely */
@media (min-width: 769px) {
  .mobile-sheet,
  .mobile-sheet-overlay {
    display: none !important;
  }
}

/* ========== v5.0.12: QUICK SCRIPT GENERATION BLOCK ========== */

.scripts-quick-gen-block {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.08)) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

.scripts-gen-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.script-gen-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.script-gen-card:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.1));
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(59, 130, 246, 0.2);
}

.script-gen-card:active {
  transform: translateY(-2px);
}

.script-gen-icon {
  font-size: 48px;
  line-height: 1;
}

.script-gen-title {
  font-size: 18px;
  font-weight: 700;
  color: #f0f4ff;
}

.script-gen-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* Quick Gen Preview */
.quick-gen-preview {
  margin-top: 20px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  animation: fadeInUp 0.3s ease-out;
}

.quick-gen-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.quick-gen-preview-header h4 {
  margin: 0;
  font-size: 16px;
  color: #f0f4ff;
}

.quick-gen-content {
  max-height: 400px;
  overflow-y: auto;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  white-space: pre-wrap;
}

.quick-gen-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .scripts-gen-cards {
    grid-template-columns: 1fr;
  }
  
  .script-gen-card {
    padding: 20px;
  }
  
  .script-gen-icon {
    font-size: 36px;
  }
}

/* Light theme */
body.theme-light .scripts-quick-gen-block {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05)) !important;
}

body.theme-light .script-gen-card {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.01));
  border-color: rgba(0, 0, 0, 0.08);
}

body.theme-light .script-gen-title {
  color: #1a1d2e;
}

body.theme-light .script-gen-desc {
  color: rgba(0, 0, 0, 0.5);
}

body.theme-light .quick-gen-preview {
  background: rgba(0, 0, 0, 0.03);
}

body.theme-light .quick-gen-content {
  background: rgba(0, 0, 0, 0.02);
  color: #1a1d2e;
}

/* =============================================================================
   v5.0.13: QUICK ACTIONS & AI TOOLS - FIXED GRID
   ============================================================================= */

/* Швидкі дії - компактна сітка */
.quick-actions-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}

@media (max-width: 1200px) {
  .quick-actions-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

@media (max-width: 400px) {
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
}

.quick-action-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 14px 8px !important;
  min-height: 90px !important;
  max-height: 110px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 180ms ease !important;
  text-align: center !important;
  overflow: hidden !important;
}

.quick-action-card:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  transform: translateY(-2px) !important;
}

.quick-action-card .qa-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
}

.quick-action-card .qa-icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke: var(--accent) !important;
  opacity: 0.9 !important;
}

.quick-action-card .qa-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.quick-action-card .qa-hint {
  font-size: 9px !important;
  line-height: 1.2 !important;
  color: var(--muted) !important;
  opacity: 0.7 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* AI інструменти - компактна сітка */
.ai-tools-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

@media (max-width: 1200px) {
  .ai-tools-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .ai-tools-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

@media (max-width: 400px) {
  .ai-tools-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
}

.ai-tool-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 14px 8px !important;
  min-height: 90px !important;
  max-height: 110px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 180ms ease !important;
  text-align: center !important;
  overflow: hidden !important;
}

.ai-tool-btn:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  transform: translateY(-2px) !important;
}

.ai-tool-btn .ai-tool-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
}

.ai-tool-btn .ai-tool-icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke: var(--accent) !important;
  opacity: 0.9 !important;
}

.ai-tool-btn .ai-tool-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.ai-tool-btn .ai-tool-desc {
  font-size: 9px !important;
  line-height: 1.2 !important;
  color: var(--muted) !important;
  opacity: 0.7 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* Light theme */
body.theme-light .quick-action-card,
body.theme-light .ai-tool-btn {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light .quick-action-card:hover,
body.theme-light .ai-tool-btn:hover {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
}

/* =============================================================================
   v5.0.14: MOBILE MORE POPUP WITH CIRCLES
   ============================================================================= */

/* Overlay */
.mobile-more-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.mobile-more-popup-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Popup container */
.mobile-more-popup {
  position: fixed !important;
  bottom: 80px !important;
  left: 12px !important;
  right: 12px !important;
  top: auto !important;
  margin: 0 auto !important;
  max-width: 400px !important;
  background: linear-gradient(145deg, #1e2235, #14171f) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  padding: 16px !important;
  z-index: 9999 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  transform: scale(1) translateY(0);
  opacity: 1;
  transition: all 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 60vh !important;
  overflow-y: auto !important;
  width: auto !important;
  height: auto !important;
}

.mobile-more-popup.hidden {
  transform: scale(0.8) translateY(20px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: block !important;
  visibility: hidden !important;
}

/* Grid of circles - v5.1.21 fixed */
.mobile-more-popup-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}

@media (min-width: 400px) {
  .mobile-more-popup-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 320px) {
  .mobile-more-popup-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* Circle button */
.mobile-popup-circle {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 4px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  border-radius: 12px !important;
  width: auto !important;
  height: auto !important;
  min-width: 60px !important;
}

.mobile-popup-circle:hover {
  background: rgba(59, 130, 246, 0.1);
}

.mobile-popup-circle:active {
  transform: scale(0.95);
}

/* Circle icon container */
.popup-circle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: all 0.15s ease;
}

.mobile-popup-circle:hover .popup-circle-icon {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(139, 92, 246, 0.3));
  border-color: rgba(59, 130, 246, 0.4);
  transform: scale(1.05);
}

.popup-circle-icon svg {
  width: 16px;
  height: 16px;
  stroke: #a5b4fc;
  stroke-width: 1.8;
}

/* Circle label - v5.1.21 fixed: 2 lines max */
.popup-circle-label {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  line-height: 1.3;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  hyphens: auto;
}

/* Light theme */
body.theme-light .mobile-more-popup {
  background: linear-gradient(145deg, #ffffff, #f5f7fa);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

body.theme-light .popup-circle-icon {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
  border-color: rgba(0, 0, 0, 0.08);
}

body.theme-light .popup-circle-icon svg {
  stroke: #3b82f6;
}

body.theme-light .popup-circle-label {
  color: rgba(0, 0, 0, 0.7);
}

body.theme-light .mobile-popup-circle:hover {
  background: rgba(59, 130, 246, 0.08);
}

/* Hide old sheet completely (NOT #mobileSheetOverlay — used by new bottom sheet) */
.mobile-sheet,
.mobile-sheet-overlay,
#mobileMoreSheet {
  display: none !important;
}

/* =============================================================================
   v5.0.17: SELLER SCRIPT BLOCK (like old design)
   ============================================================================= */

.seller-script-block {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.seller-script-block .admin-block-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

/* Script Type Toggle */
.script-type-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.script-type-btn {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.script-type-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.script-type-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* Add role button (＋) */
.role-add-btn {
  background: transparent !important;
  border: 1px dashed rgba(255, 255, 255, 0.2) !important;
  color: var(--muted) !important;
  font-size: 16px !important;
  padding: 10px 16px !important;
  min-width: 42px;
}
.role-add-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(59, 130, 246, 0.08) !important;
}

/* Inline add-role form */
.add-role-inline-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 8px;
  animation: fadeIn 0.15s;
}
.add-role-input {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
  width: 180px;
  outline: none;
}
.add-role-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.add-role-confirm-btn {
  padding: 8px 14px;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.add-role-confirm-btn:hover { background: var(--accent-hover); }
.add-role-cancel-btn {
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
}
.add-role-cancel-btn:hover { color: #e74c3c; }

/* Delete role button (below tabs) */
.delete-role-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  margin-top: 6px;
  background: transparent;
  border: 1px solid rgba(231, 76, 60, 0.3);
  border-radius: 8px;
  color: #e74c3c;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.delete-role-btn:hover {
  background: rgba(231, 76, 60, 0.1);
  border-color: #e74c3c;
}

/* Delete role inline confirm row */
.delete-role-confirm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 14px;
  background: rgba(231, 76, 60, 0.08);
  border: 1px solid rgba(231, 76, 60, 0.25);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink);
  animation: fadeIn 0.15s;
}
.delete-role-yes-btn {
  padding: 5px 12px;
  background: #e74c3c;
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.delete-role-yes-btn:hover { background: #c0392b; }
.delete-role-no-btn {
  padding: 5px 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.delete-role-no-btn:hover { border-color: var(--muted); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Script Text Area */
.script-textarea {
  min-height: 180px;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
}

/* Action Buttons */
.script-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.script-actions .btn-primary,
.script-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.script-actions .btn-primary {
  background: var(--accent);
  border: none;
  color: white;
}

.script-actions .btn-primary:hover {
  background: var(--accent-hover);
}

.script-actions .btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--ink);
}

.script-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

/* AI Result Block */
.ai-result-block {
  margin-top: 16px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  overflow: hidden;
}

.ai-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(59, 130, 246, 0.1);
  font-weight: 500;
  font-size: 14px;
}

.ai-result-content {
  padding: 16px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  max-height: 300px;
  overflow-y: auto;
}

.ai-result-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid rgba(59, 130, 246, 0.15);
}

.btn-primary-sm {
  padding: 8px 14px;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.btn-icon-sm {
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon-sm:hover {
  color: var(--ink);
}

/* Light theme */
body.theme-light .script-type-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--muted);
}

body.theme-light .script-type-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

body.theme-light .script-type-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

body.theme-light .role-add-btn {
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: var(--muted) !important;
}
body.theme-light .role-add-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
body.theme-light .add-role-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.15);
}

body.theme-light .script-actions .btn-secondary {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

body.theme-light .script-actions .btn-secondary:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Mobile responsive */
@media (max-width: 600px) {
  .script-type-toggle {
    flex-wrap: wrap;
  }
  
  .script-type-btn {
    flex: 1;
    min-width: 80px;
    padding: 8px 12px;
    font-size: 13px;
  }
  
  .script-actions {
    flex-direction: column;
  }
  
  .script-actions .btn-primary,
  .script-actions .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* =============================================================================
   v5.0.16: HIDE ADMIN TABS ON MOBILE (we have bottom nav)
   ============================================================================= */

@media (max-width: 768px) {
  /* Hide admin tabs wrapper completely on mobile */
  .admin-tabs-wrapper {
    display: none !important;
  }
  
  /* Hide admin panel title on mobile too */
  .admin-card > h2,
  .admin-card-title {
    display: none !important;
  }
  
  /* Remove top padding since tabs are hidden */
  #adminPanel {
    padding-top: 0 !important;
  }
  
  .admin-card {
    padding-top: 8px !important;
  }
}

/* ===== v5.1.34: MOBILE FIXES ===== */
@media (max-width: 768px) {
  /* Footer removed from HTML - hide any remnants */
  footer, .footer, .footer-text {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }
  
  /* Hide DB/WS status badge on mobile */
  .system-status-badge,
  #systemStatusBadge {
    display: none !important;
  }
  
  /* Full scroll - no restrictions */
  html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Main content scrolls freely */
  main, .main-content {
    overflow: visible !important;
    padding-bottom: calc(var(--mobile-nav-height, 64px) + 20px) !important;
  }
  
  /* Compact lang toggle */
  .lang-switch {
    background: rgba(30, 30, 40, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 2px;
  }
  
  .lang-switch .lang-btn {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 16px;
  }
  
  .lang-switch .lang-btn.active {
    background: var(--accent, #3b7dff);
    color: #fff;
  }
  
  .lang-switch .lang-btn:not(.active) {
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
  }
  
  /* Light theme */
  body.theme-light .lang-switch {
    background: rgba(240, 240, 245, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
  }
  
  body.theme-light .lang-switch .lang-btn:not(.active) {
    color: rgba(0, 0, 0, 0.5);
  }
}

/* ===== v5.1.38: MOBILE HEADER + SCROLL FIX ===== */
@media (max-width: 768px) {
  /* ===== HEADER OPTIMIZATION ===== */
  .top-bar {
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  
  /* Hide brand name text on mobile - only logo */
  .brand-name {
    display: none !important;
  }
  
  /* Logo bigger and cleaner */
  .brand-logo {
    width: 36px !important;
    height: 36px !important;
  }
  
  /* Hide system status badge */
  .system-status-badge,
  #systemStatusBadge {
    display: none !important;
  }
  
  /* Compact lang toggle */
  .lang-switch {
    background: rgba(59, 125, 255, 0.1) !important;
    border: 1px solid rgba(59, 125, 255, 0.2) !important;
    border-radius: 20px !important;
    padding: 2px !important;
    gap: 0 !important;
  }
  
  .lang-switch .lang-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 18px !important;
    border: none !important;
    transition: all 0.2s ease !important;
  }
  
  .lang-switch .lang-btn.active {
    background: linear-gradient(135deg, #3b7dff 0%, #5b8eff 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(59, 125, 255, 0.3) !important;
  }
  
  .lang-switch .lang-btn:not(.active) {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }
  
  /* Theme toggle button */
  .theme-toggle-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
  }
  
  /* Logout button - icon only on mobile */
  .btn-logout-new {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .btn-logout-new span {
    display: none !important;
  }
  
  .btn-logout-new svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #f87171 !important;
  }
  
  /* Light theme adjustments */
  body.theme-light .lang-switch {
    background: rgba(59, 125, 255, 0.08) !important;
    border-color: rgba(59, 125, 255, 0.15) !important;
  }
  
  body.theme-light .lang-switch .lang-btn:not(.active) {
    color: rgba(0, 0, 0, 0.6) !important;
  }
  
  body.theme-light .theme-toggle-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
  }
  
  body.theme-light .btn-logout-new {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.15) !important;
  }
  
  /* ===== SCROLL FIX - NO EXTRA SPACE ===== */
  html {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
  }
  
  body {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    position: static !important;
    padding-bottom: 64px !important;
  }
  
  .app-wrapper {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    padding-bottom: 0 !important;
  }
  
  main,
  .main-content,
  #appSection,
  .app-main {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  
  #adminPanel,
  .admin-card {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .card {
    margin-bottom: 12px !important;
    border-radius: 16px !important;
  }
  
  .card:last-child,
  section:last-child {
    margin-bottom: 8px !important;
  }
  
  /* Footer gone */
  footer,
  .footer,
  .footer-text {
    display: none !important;
    height: 0 !important;
  }
  
  /* Bottom nav fixed */
  .mobile-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 64px !important;
    z-index: 9999 !important;
    background: rgba(20, 20, 28, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  
  body.theme-light .mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.95) !important;
    border-top-color: rgba(0, 0, 0, 0.08) !important;
  }
  
  /* ===== BETTER CARD DESIGN ===== */
  .launch-plan-card,
  #launchPlanCard {
    background: linear-gradient(135deg, rgba(59, 125, 255, 0.1) 0%, rgba(139, 92, 246, 0.06) 100%) !important;
    border: 1px solid rgba(59, 125, 255, 0.2) !important;
    border-radius: 16px !important;
    padding: 16px !important;
  }
  
  /* Dashboard cards */
  .dashboard-card,
  .stat-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    padding: 14px !important;
  }
  
  body.theme-light .dashboard-card,
  body.theme-light .stat-card {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
  }
  
  /* Admin Panel title */
  h2, .admin-panel-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
  }
}

/* ===== v5.1.39: NETWORK LAUNCH REDESIGN ===== */
.launch-plan-card {
  background: linear-gradient(135deg, rgba(59, 125, 255, 0.12) 0%, rgba(139, 92, 246, 0.08) 50%, rgba(236, 72, 153, 0.06) 100%);
  border: 1px solid rgba(59, 125, 255, 0.25);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.launch-plan-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b7dff 0%, #8b5cf6 50%, #ec4899 100%);
}

.launch-plan-header {
  margin-bottom: 20px;
}

.launch-plan-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.launch-plan-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.launch-plan-icon {
  font-size: 24px;
  animation: rocket-bounce 2s ease-in-out infinite;
}

@keyframes rocket-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.launch-plan-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.theme-light .launch-plan-title {
  background: linear-gradient(135deg, #1a1a2e 0%, #3b3b5c 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.launch-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.launch-plan-badge.ready {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.3);
}

.launch-plan-progress-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.launch-plan-card .progress-bar-lg {
  flex: 1;
  height: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

body.theme-light .launch-plan-card .progress-bar-lg {
  background: rgba(0, 0, 0, 0.08);
}

.launch-plan-card .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b7dff 0%, #8b5cf6 100%);
  border-radius: 10px;
  transition: width 0.5s ease;
  position: relative;
}

.launch-plan-card .progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.launch-plan-card .progress-text-lg {
  font-size: 16px;
  font-weight: 700;
  min-width: 45px;
  text-align: right;
  color: #3b7dff;
}

.onboarding-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.onboarding-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  transition: all 0.2s ease;
}

body.theme-light .onboarding-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

.onboarding-item:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(4px);
}

body.theme-light .onboarding-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.onboarding-check {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

body.theme-light .onboarding-check {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.03);
}

.onboarding-check svg {
  width: 14px;
  height: 14px;
  stroke: transparent;
  transition: all 0.3s ease;
}

.onboarding-item.done .onboarding-check {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  border-color: #22c55e;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
}

.onboarding-item.done .onboarding-check svg {
  stroke: #fff;
}

.onboarding-item-content {
  flex: 1;
  min-width: 0;
}

.onboarding-item-text {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 2px;
}

body.theme-light .onboarding-item-text {
  color: rgba(0, 0, 0, 0.85);
}

.onboarding-item-hint {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

body.theme-light .onboarding-item-hint {
  color: rgba(0, 0, 0, 0.5);
}

.onboarding-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(59, 125, 255, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
  border: 1px solid rgba(59, 125, 255, 0.3);
  border-radius: 10px;
  color: #60a5fa;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.onboarding-cta-btn:hover {
  background: linear-gradient(135deg, rgba(59, 125, 255, 0.25) 0%, rgba(139, 92, 246, 0.15) 100%);
  transform: translateX(2px);
}

.onboarding-cta-btn svg {
  width: 14px;
  height: 14px;
}

.onboarding-item.done .onboarding-cta-btn {
  display: none;
}

.onboarding-warning {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fbbf24;
  font-size: 13px;
}

.warning-icon {
  font-size: 16px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .launch-plan-card {
    padding: 16px;
    border-radius: 16px;
    margin: 12px;
    margin-bottom: 16px;
  }
  
  .launch-plan-icon {
    font-size: 20px;
  }
  
  .launch-plan-title {
    font-size: 16px;
  }
  
  .launch-plan-badge {
    padding: 5px 10px;
    font-size: 10px;
  }
  
  .onboarding-item {
    padding: 12px;
    gap: 10px;
  }
  
  .onboarding-check {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }
  
  .onboarding-check svg {
    width: 12px;
    height: 12px;
  }
  
  .onboarding-item-text {
    font-size: 13px;
  }
  
  .onboarding-item-hint {
    font-size: 11px;
  }
  
  .onboarding-cta-btn {
    padding: 6px 10px;
    font-size: 11px;
  }
  
  .onboarding-cta-btn span {
    display: none;
  }
  
  .onboarding-cta-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* v5.1.42: Mic allocation card - always visible for managers */
#micAllocationInfo,
.mic-allocation-card {
  display: flex !important;
}

/* Hide for non-managers via JS only */
#micAllocationInfo.hidden,
.mic-allocation-card.hidden {
  display: none !important;
}

@media (max-width: 768px) {
  #micAllocationInfo,
  .mic-allocation-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 14px !important;
    margin: 12px !important;
    margin-bottom: 16px !important;
    gap: 12px !important;
  }
  
  #micAllocationInfo > div:first-child {
    min-width: auto !important;
  }
  
  #micAllocationInfo > div:last-child {
    justify-content: space-between !important;
    width: 100% !important;
  }
}

/* ===== v5.1.43: SETTINGS MOBILE FIX ===== */
@media (max-width: 768px) {
  .settings-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 12px !important;
  }
  
  .settings-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding: 8px 0 !important;
    margin: 0 -12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  
  .settings-nav::-webkit-scrollbar {
    display: none !important;
  }
  
  .settings-nav-btn {
    flex-shrink: 0 !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  
  .settings-nav-btn svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
  }

  .settings-nav-btn.active {
    background: linear-gradient(135deg, rgba(59, 125, 255, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%) !important;
    border-color: rgba(59, 125, 255, 0.4) !important;
    color: #60a5fa !important;
  }
  
  body.theme-light .settings-nav-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
  }
  
  body.theme-light .settings-nav-btn.active {
    background: rgba(59, 125, 255, 0.1) !important;
    border-color: rgba(59, 125, 255, 0.3) !important;
    color: #2962ff !important;
  }
  body.theme-light .settings-nav-btn.active svg {
    color: #2962ff !important;
  }

  .settings-content {
    padding: 0 !important;
  }
  
  .settings-section h3 {
    font-size: 18px !important;
    margin-bottom: 16px !important;
  }
  
  .settings-card {
    padding: 16px !important;
    border-radius: 16px !important;
  }
  
  .profile-header {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }
  
  .profile-avatar {
    width: 80px !important;
    height: 80px !important;
    font-size: 32px !important;
    margin: 0 auto !important;
  }
}

/* ===== v5.1.45: REPORTS MOBILE DESIGN ===== */
@media (max-width: 768px) {
  /* Reports tab */
  #tab-reports {
    padding: 12px !important;
  }
  
  #tab-reports .admin-block-title {
    font-size: 20px !important;
    margin-bottom: 8px !important;
  }
  
  #tab-reports .admin-block-sub {
    font-size: 13px !important;
    margin-bottom: 16px !important;
  }
  
  /* Report cards */
  .report-card,
  .reports-grid .card,
  #tab-reports .card {
    background: linear-gradient(135deg, rgba(30, 34, 53, 0.95) 0%, rgba(20, 23, 31, 0.98) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
  }
  
  .report-card h4,
  .reports-grid .card h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  
  .report-card p,
  .reports-grid .card p {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin-bottom: 12px !important;
  }
  
  .report-card .btn-primary,
  .report-card .btn-secondary {
    width: 100% !important;
    padding: 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }
  
  /* KPI Panel */
  #tab-kpi .admin-block-title,
  .kpi-panel-header h3 {
    font-size: 20px !important;
  }
  
  .kpi-filters {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }
  
  .kpi-filters select,
  .kpi-filters input {
    width: 100% !important;
    padding: 12px !important;
    border-radius: 10px !important;
  }
  
  #generateKpiBtn,
  #loadKpiBtn {
    width: 100% !important;
    padding: 14px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  
  #generateKpiBtn {
    background: linear-gradient(135deg, #3b7dff 0%, #5b8eff 100%) !important;
    margin-top: 8px !important;
  }
  
  .kpi-summary {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
  
  .kpi-summary-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    text-align: center !important;
  }
  
  .kpi-summary-value {
    font-size: 22px !important;
    font-weight: 700 !important;
  }
  
  .kpi-summary-label {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.5) !important;
  }
  
  /* QA Scoring */
  #tab-qa .admin-block-title {
    font-size: 20px !important;
  }
  
  .qa-filters {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .qa-filters input,
  .qa-filters select {
    width: 100% !important;
    padding: 12px !important;
    border-radius: 10px !important;
  }
  
  #loadQaBtn,
  #runQaBtn,
  #addQaTemplateBtn {
    width: 100% !important;
    padding: 14px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    margin-top: 8px !important;
  }
  
  #addQaTemplateBtn {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  }
  
  /* QA Template Modal */
  .qa-template-modal {
    width: 95% !important;
    max-width: 400px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
  }
  
  .qa-template-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 12px !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
  }
  
  .qa-template-item input {
    width: 100% !important;
  }
  
  .qa-template-item .btn-sm {
    align-self: flex-end !important;
  }
  
  /* AI Tab improvements */
  #tab-ai .ai-tools-grid,
  .ai-quick-actions {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  
  .ai-tool-btn,
  .ai-quick-action {
    padding: 12px 8px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
    text-align: center !important;
  }
  
  /* Light theme */
  body.theme-light .report-card,
  body.theme-light .reports-grid .card,
  body.theme-light #tab-reports .card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.99) 100%) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
  }
  
  body.theme-light .kpi-summary-card {
    background: rgba(0, 0, 0, 0.04) !important;
  }
}

/* ===== v5.1.46: MICROPHONE ALLOCATION PANEL ===== */
.mic-allocation-panel {
  background: var(--bg-1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  margin-bottom: 20px;
  overflow: hidden;
}

.mic-allocation-panel.hidden {
  display: none !important;
}

/* Десктоп: без внутрішньої прокрутки — контент росте в висоту, гортається вся сторінка */
@media (min-width: 769px) {
  #adminPanel .tab-content.active {
    overflow: visible !important;
    overflow-x: hidden;
    min-height: 0;
  }
}

/* Блок акаунтів — без окремої прокрутки, частина загального потоку */
#tab-users #accountsList {
  display: flex !important;
  flex-direction: column;
  overflow: visible !important;
}

.mic-panel-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mic-panel-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.mic-panel-title {
  flex: 1;
}

.mic-panel-title h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 2px 0;
  color: var(--ink);
}

.mic-panel-title p {
  font-size: 13px;
  margin: 0;
  color: var(--muted);
}

.mic-panel-summary {
  display: flex;
  gap: 16px;
}

.mic-stat {
  text-align: center;
  min-width: 60px;
}

.mic-stat-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

.mic-stat-value.mic-used {
  color: #f59e0b;
}

.mic-stat-value.mic-free {
  color: #22c55e;
}

.mic-stat-label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mic-table-wrapper {
  overflow-x: auto;
}

.mic-table {
  width: 100%;
  border-collapse: collapse;
}

.mic-table th,
.mic-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mic-table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
}

.mic-table td {
  font-size: 14px;
}

.mic-table td.mic-used {
  color: #f59e0b;
  font-weight: 600;
}

.mic-table td.mic-free {
  color: #22c55e;
  font-weight: 600;
}

.mic-table td.mic-warning {
  color: #ef4444;
  font-weight: 600;
}

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

.mic-table tbody tr:last-child td {
  border-bottom: none;
}

/* Light theme */
body.theme-light .mic-allocation-panel {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.08);
}

body.theme-light .mic-panel-header {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 100%);
  border-color: rgba(0, 0, 0, 0.06);
}

body.theme-light .mic-panel-icon {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%);
}

body.theme-light .mic-table th {
  background: rgba(0, 0, 0, 0.02);
}

body.theme-light .mic-table th,
body.theme-light .mic-table td {
  border-color: rgba(0, 0, 0, 0.06);
}

body.theme-light .mic-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* Mobile */
@media (max-width: 768px) {
  .mic-allocation-panel {
    margin: 12px;
    margin-bottom: 16px;
    border-radius: 14px;
  }

  .mic-mobile-hint {
    display: block !important;
  }

  .mic-panel-header {
    flex-wrap: wrap;
    padding: 14px;
    gap: 12px;
  }
  
  .mic-panel-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-radius: 10px;
  }
  
  .mic-panel-title h3 {
    font-size: 15px;
  }
  
  .mic-panel-title p {
    font-size: 12px;
  }
  
  .mic-panel-summary {
    width: 100%;
    justify-content: space-around;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  
  .mic-stat-value {
    font-size: 18px;
  }
  
  /* Card layout for mic allocation table on mobile */
  #micAllocationTable thead {
    display: none !important;
  }

  #micAllocationTable,
  #micAllocationTable tbody {
    display: block !important;
    width: 100% !important;
  }

  #micAllocationTable tr.mic-row {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 2px 12px;
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    position: relative;
  }

  #micAllocationTable tr.mic-row:hover {
    background: rgba(255, 255, 255, 0.07) !important;
  }

  #micAllocationTable .mic-td {
    display: flex !important;
    align-items: center !important;
    gap: 6px;
    padding: 2px 0 !important;
    border-bottom: none !important;
    font-size: 13px !important;
  }

  #micAllocationTable .mic-td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
  }

  /* Name — full first row, centered */
  #micAllocationTable .mic-td-name {
    grid-column: 1;
    grid-row: 1;
    font-size: 15px !important;
    font-weight: 600;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Allocated — second row */
  #micAllocationTable .mic-td-allocated {
    grid-column: 1;
    grid-row: 2;
  }

  /* Used — second row, after allocated via flex on same row */
  #micAllocationTable .mic-td-used {
    grid-column: 1;
    grid-row: 3;
  }

  /* Free — third row */
  #micAllocationTable .mic-td-free {
    grid-column: 1;
    grid-row: 4;
  }

  /* Delete button — top right, spans all rows */
  #micAllocationTable .mic-td-action {
    grid-column: 2;
    grid-row: 1 / 5;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-bottom: none !important;
  }

  /* Light theme card */
  body.theme-light #micAllocationTable tr.mic-row {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
  }

  body.theme-light #micAllocationTable .mic-td::before {
    color: rgba(0, 0, 0, 0.45);
  }

  /* v5.1.53: Improved reports grid for mobile */
  .reports-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .reports-grid .report-card,
  .reports-grid > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px !important;
    background: rgba(30, 34, 53, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
  }
  
  .reports-grid .report-card > div:first-child,
  .reports-grid > div > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 !important;
  }
  
  .reports-grid .report-card > div:first-child > span:first-child,
  .reports-grid > div > div:first-child > span:first-child {
    font-size: 24px !important;
    font-weight: 700 !important;
    min-width: 55px !important;
    color: var(--accent, #3B82F6) !important;
  }
  
  .reports-grid .report-card h4,
  .reports-grid > div h4 {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  
  .reports-grid .report-card p,
  .reports-grid > div p {
    display: none !important;
  }
  
  .reports-grid .report-card button,
  .reports-grid > div > button {
    padding: 10px 16px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}

/* v5.1.54: Transcript styles */
.transcript-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.transcript-stat-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

.transcript-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  display: block;
}

.transcript-stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.transcript-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.transcript-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 14px;
  transition: background 0.2s;
}

.transcript-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.transcript-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.transcript-item-date {
  font-weight: 600;
  color: var(--text);
}

.transcript-item-badges {
  display: flex;
  gap: 6px;
  align-items: center;
}

.transcript-item-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}

.transcript-item-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.transcript-item-actions .btn-sm {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 6px;
}

.status-badge {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.status-badge.status-success {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.status-badge.status-pending {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.status-badge.status-error {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.status-badge.status-deleted {
  background: rgba(156, 163, 175, 0.15);
  color: #9ca3af;
}

.profanity-badge {
  font-size: 11px;
  font-weight: 500;
}

/* Light theme */
body.theme-light .transcript-stat-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

body.theme-light .transcript-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

body.theme-light .transcript-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Mobile */
@media (max-width: 768px) {
  .transcript-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .transcript-stat-value {
    font-size: 20px;
  }
  
  .transcript-item-meta {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .transcript-item-actions {
    margin-top: 8px;
  }
  
  .transcript-item-actions .btn-sm {
    flex: 1;
    min-width: 60px;
    text-align: center;
  }
}

/* v5.1.82: Export Section Styles */
.export-section {
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

.export-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.export-format-toggle {
  display: flex;
  gap: 8px;
}

.export-format-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}

.export-format-option:hover {
  background: rgba(255,255,255,0.1);
}

.export-format-option input:checked + span {
  color: #60a5fa;
  font-weight: 600;
}

.export-date-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.export-quick-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.btn-quick {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.7) !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.btn-quick:hover {
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #60a5fa !important;
}

.export-custom-date {
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.export-date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.export-date-row label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

.export-date-row input[type="date"] {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 6px 10px;
  color: inherit;
  font-size: 13px;
}

.export-date-row input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.export-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin-top: 6px;
}

/* Empty state improvements */
.profile-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
}

.profile-empty-state .empty-icon {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.profile-empty-state .empty-title {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  margin-bottom: 6px;
}

.profile-empty-state .empty-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 16px;
}

/* Responsive */
@media (max-width: 480px) {
  .export-date-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .export-date-row input[type="date"] {
    width: 100%;
  }
}

/* =================================================================
   v5.1.82: PROFILE MODAL V2 - Complete Redesign
   ================================================================= */

/* Modal Container */
.profile-modal-v2 {
  max-width: 800px !important;
  width: 95% !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(180deg, #1a1d2e 0%, #12141f 100%) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Header */
.profile-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.profile-modal-header .modal-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

/* Body */
.profile-modal-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Profile Header Section */
.profile-header-v2 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.profile-avatar-v2 {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}

.profile-info-v2 {
  flex: 1;
  min-width: 0;
}

.profile-name-v2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-login-v2 {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
}

.profile-badges-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.profile-badge.role {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

.profile-badge.status-active {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
}

.profile-badge.status-inactive {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

.profile-badge.scope {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.6);
}

/* Quick Stats */
.profile-quick-stats-v2 {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(0,0,0,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  overflow-x: auto;
  flex-shrink: 0;
}

.quick-stat-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  min-width: 70px;
  flex-shrink: 0;
}

.quick-stat-value {
  font-size: 18px;
  font-weight: 600;
  color: #60a5fa;
}

.quick-stat-label {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* Layout: Desktop = sidebar + content, Mobile = tabs on top */
.profile-layout-v2 {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Sidebar Navigation (Desktop) */
.profile-nav-v2 {
  width: 180px;
  flex-shrink: 0;
  background: rgba(0,0,0,0.2);
  border-right: 1px solid rgba(255,255,255,0.04);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.profile-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
}

.profile-nav-item:hover {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.9);
}

.profile-nav-item.active {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.profile-nav-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

/* Content Area */
.profile-content-v2 {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  min-width: 0;
}

/* Sections */
.profile-section-v2 {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.profile-section-v2:last-child {
  margin-bottom: 0;
}

.profile-section-title-v2 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-section-title-v2 .icon {
  opacity: 0.6;
}

/* Info Grid */
.profile-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.profile-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-info-label {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profile-info-value {
  font-size: 14px;
  color: rgba(255,255,255,0.9);
}

/* Empty State */
.profile-empty-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.profile-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.4;
}

.profile-empty-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.7);
}

.profile-empty-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 20px;
  max-width: 280px;
}

.profile-empty-actions {
  display: flex;
  gap: 8px;
}

/* Footer */
.profile-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.2);
  flex-shrink: 0;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-footer-left,
.profile-footer-center,
.profile-footer-right {
  display: flex;
  gap: 6px;
}

.profile-footer-center {
  flex: 1;
  justify-content: center;
}

.profile-modal-footer .btn,
.profile-modal-footer button {
  padding: 8px 14px;
  font-size: 13px;
}

/* Mobile: horizontal tabs */
@media (max-width: 640px) {
  .profile-modal-v2 {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  
  .profile-layout-v2 {
    flex-direction: column;
  }
  
  .profile-nav-v2 {
    width: 100%;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
  }
  
  .profile-nav-item {
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    min-width: fit-content;
    font-size: 11px;
  }
  
  .profile-nav-icon {
    font-size: 18px;
  }
  
  .profile-header-v2 {
    flex-direction: column;
    text-align: center;
  }
  
  .profile-info-v2 {
    text-align: center;
  }
  
  .profile-badges-v2 {
    justify-content: center;
  }
  
  .profile-quick-stats-v2 {
    justify-content: flex-start;
  }
  
  .profile-modal-footer {
    flex-direction: column;
  }
  
  .profile-footer-left,
  .profile-footer-center,
  .profile-footer-right {
    width: 100%;
    justify-content: center;
  }
}

/* Date picker fix - ensure calendar shows above modal */
.profile-modal-v2 input[type="date"] {
  position: relative;
  z-index: 1;
}

.profile-modal-v2 input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(1);
  opacity: 0.7;
}

.profile-modal-v2 input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Fix for date picker popup visibility */
#userProfileModal {
  z-index: 9999 !important;
}

#userProfileModal .modal {
  transform: none !important;
  filter: none !important;
}

/* =================================================================
   v5.2.4: SELLER SCRIPT BLOCKS - Mobile/Accordion Style
   ================================================================= */

.seller-scripts-loading {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255,255,255,0.5);
}

.seller-section {
  margin-bottom: 16px;
}

.seller-section-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  color: rgba(255,255,255,0.9);
}

.seller-scripts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seller-script-block {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
}

.seller-script-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.seller-script-block-header:active {
  background: rgba(255, 255, 255, 0.05);
}

.seller-script-block-title {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.seller-script-block-chevron {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.seller-script-block-content {
  padding: 0 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.seller-script-block-content.hidden {
  display: none;
}

.seller-script-text {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
}

.seller-script-text em {
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

/* Script Main Text Area */
.script-main-text {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}
.script-main-text * {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* v5.2.4: Fix seller tab scroll — DISABLED in v5.3.0 (causes double-scroll)
#seller-tab-scripts,
#seller-tab-points,
#seller-tab-settings {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 150px);
  padding-bottom: 20px;
} */

/* v5.3.0: Add card background to ALL seller tabs (unified look) */
#seller-tab-scripts > .seller-tab-body,
#seller-tab-points > .seller-tab-body,
#seller-tab-settings > .seller-tab-body {
  background: var(--bg-2, #18181b) !important;
  border: 1px solid var(--border, #27272a) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin: 0 4px;
}

#seller-tab-scripts > .seller-tab-header,
#seller-tab-points > .seller-tab-header,
#seller-tab-settings > .seller-tab-header {
  padding: 10px 8px;
}

/* v5.3.0: Unified card background for Запис (home) tab — desktop only */
@media (min-width: 769px) {
  body.role-seller #seller-tab-home {
    background: var(--bg-2, #18181b) !important;
    border: 1px solid var(--border, #27272a) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 0 4px;
  }
  /* Make child cards blend into the parent card */
  body.role-seller #seller-tab-home > .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  /* v5.3.0: Fix mic buttons — show all 3 in a row on desktop */
  body.role-seller #seller-tab-home .mic-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    gap: 10px !important;
    justify-content: center !important;
    margin: 0 !important;
  }
  body.role-seller #seller-tab-home .mic-buttons button {
    flex: 1 1 0 !important;
    max-width: 200px !important;
    width: auto !important;
    min-width: 100px !important;
    height: 48px !important;
  }
}

/* v5.3.0: Kill double-scroll EVERYWHERE — only appScrollRoot scrolls
   NOTE: overflow-x:hidden + overflow-y:visible => browser forces overflow-y:auto (CSS spec).
   Use overflow:clip to prevent horizontal overflow without triggering vertical scrollbar. */
body.role-seller #seller-tab-home,
body.role-seller #seller-tab-scripts,
body.role-seller #seller-tab-points,
body.role-seller #seller-tab-settings {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
  min-height: auto !important;
}
body.role-seller .seller-mobile-container,
body.role-seller #sellerMobileContainer {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}
body.role-seller .seller-tab-body {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}
body.seller-mobile-mode .seller-tab,
body.seller-mobile-mode .seller-tab-body,
body.seller-mobile-mode #seller-tab-home:not(.hidden) {
  overflow: visible !important;
}

/* =================================================================
   v5.1.84: PROFILE MODAL V2 FIXES - Border radius, Footer
   ================================================================= */

/* Fix modal border radius */
.profile-modal-v2,
#userProfileModal .modal {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Fix footer */
.profile-modal-footer,
#userProfileModal .modal-footer {
  padding: 12px 16px !important;
  gap: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(0, 0, 0, 0.2) !important;
}

.profile-modal-footer .btn,
#userProfileModal .modal-footer .btn {
  padding: 8px 16px !important;
  font-size: 13px !important;
}

/* Profile tabs - fix wrap and scroll */
.profile-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 4px !important;
  padding: 8px 12px !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.profile-tabs::-webkit-scrollbar {
  display: none;
}

.profile-tab {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  cursor: pointer;
  transition: all 0.15s ease;
}

.profile-tab:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.profile-tab.active {
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
}

/* Navigation V2 for desktop */
.profile-nav-v2 .profile-nav-item {
  border-radius: 8px !important;
}

/* Empty hint styling */
.seller-empty-hint {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  text-align: center;
  padding: 24px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  font-style: italic;
}

/* Section titles */
.seller-section-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.9);
}

/* Points balance card */
.seller-points-balance-card {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1));
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  margin-bottom: 20px;
}

.seller-points-balance-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}

.seller-points-balance-value {
  font-size: 40px;
  font-weight: 700;
  color: #fbbf24;
}

.seller-points-balance-value span {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}

/* Rules list */
.seller-rules-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seller-rule-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
}

.seller-rule-name {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.seller-rule-delta {
  font-size: 14px;
  font-weight: 600;
}

.seller-rule-delta.positive {
  color: #4ade80;
}

.seller-rule-delta.negative {
  color: #f87171;
}

/* Rewards grid */
.seller-rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.seller-reward-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.seller-reward-card.disabled {
  opacity: 0.5;
}

.seller-reward-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.seller-reward-name {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.9);
}

.seller-reward-price {
  font-size: 12px;
  color: #fbbf24;
  margin-bottom: 10px;
}

.seller-reward-btn {
  padding: 6px 14px;
  font-size: 12px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border: none;
  border-radius: 16px;
  color: white;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.seller-reward-btn:hover {
  transform: scale(1.05);
}

.seller-reward-locked {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}

/* v5.5.0: Light theme fix for ALL seller sections (points, scripts, rules, rewards) */
body.theme-light .seller-section-title {
  color: #1e293b;
}

body.theme-light .seller-rule-item {
  background: rgba(0, 0, 0, 0.03);
}

body.theme-light .seller-rule-name {
  color: #334155;
}

body.theme-light .seller-rule-delta.positive {
  color: #16a34a;
}

body.theme-light .seller-rule-delta.negative {
  color: #dc2626;
}

body.theme-light .seller-empty-hint {
  color: #64748b;
  background: rgba(0, 0, 0, 0.02);
}

body.theme-light .seller-points-balance-card {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(245, 158, 11, 0.08));
}

body.theme-light .seller-points-balance-label {
  color: #64748b;
}

body.theme-light .seller-points-balance-value span {
  color: #64748b;
}

body.theme-light .seller-script-block {
  background: rgba(0, 0, 0, 0.02);
  border-color: #e2e8f0;
}

body.theme-light .seller-script-block-title {
  color: #1e293b;
}

body.theme-light .seller-script-block-chevron {
  color: #64748b;
}

body.theme-light .seller-script-block-header:active {
  background: rgba(0, 0, 0, 0.04);
}

body.theme-light .seller-script-block-content {
  border-top-color: #e2e8f0;
}

body.theme-light .seller-script-text {
  color: #475569;
}

body.theme-light .seller-script-text em {
  color: #64748b;
}

body.theme-light .script-main-text {
  color: #334155;
}

body.theme-light .seller-reward-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: #e2e8f0;
}

body.theme-light .seller-reward-name {
  color: #1e293b;
}

body.theme-light .seller-reward-locked {
  color: #64748b;
}

body.theme-light #seller-tab-scripts > .seller-tab-body,
body.theme-light #seller-tab-points > .seller-tab-body,
body.theme-light #seller-tab-settings > .seller-tab-body {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

body.theme-light.role-seller #seller-tab-home {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* Transactions list */
.seller-transactions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 250px;
  overflow-y: auto;
}

.seller-transaction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
}

.seller-transaction-reason {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.seller-transaction-date {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}

.seller-transaction-delta {
  font-size: 14px;
  font-weight: 600;
}

.seller-transaction-delta.positive {
  color: #4ade80;
}

.seller-transaction-delta.negative {
  color: #f87171;
}

/* v5.2.35: Missing seller-tx-* styles (used in loadSellerPoints) */
.seller-tx-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.seller-tx-reason {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seller-tx-date {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}
.seller-tx-amount {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 12px;
}
.seller-tx-amount.positive {
  color: #4ade80;
}
.seller-tx-amount.negative {
  color: #f87171;
}

/* v5.5.0: Light theme fix for seller transactions */
body.theme-light .seller-transaction-item {
  background: rgba(0, 0, 0, 0.02);
}

body.theme-light .seller-transaction-reason,
body.theme-light .seller-tx-reason {
  color: #475569;
}

body.theme-light .seller-transaction-date,
body.theme-light .seller-tx-date {
  color: #64748b;
}

body.theme-light .seller-transaction-delta.positive,
body.theme-light .seller-tx-amount.positive {
  color: #16a34a;
}

body.theme-light .seller-transaction-delta.negative,
body.theme-light .seller-tx-amount.negative {
  color: #dc2626;
}

/* =================================================================
   v5.1.87: PROFILE MODAL ENHANCEMENTS
   ================================================================= */

/* Better modal sizing */
.profile-modal-v2 {
  max-width: 800px !important;
  width: 95vw !important;
  max-height: 90vh !important;
  border-radius: 16px !important;
}

/* Header improvements */
.profile-header-v2 {
  padding: 24px !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.08)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.profile-avatar-v2 {
  width: 72px !important;
  height: 72px !important;
  font-size: 28px !important;
  border: 3px solid rgba(255, 255, 255, 0.1) !important;
}

.profile-name-v2 {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.profile-login-v2 {
  font-size: 14px !important;
  opacity: 0.7 !important;
}

/* Content area */
.profile-content-v2 {
  padding: 20px 24px !important;
  max-height: calc(90vh - 280px) !important;
  overflow-y: auto !important;
}

/* Better typography */
.profile-content-v2 h3,
.profile-section-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.profile-content-v2 p,
.profile-content-v2 span {
  line-height: 1.6 !important;
}

/* Empty states - beautiful */
.profile-empty-state,
.empty-state-v2 {
  padding: 40px 24px !important;
  text-align: center !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 12px !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
}

.profile-empty-icon,
.empty-state-icon {
  font-size: 48px !important;
  margin-bottom: 16px !important;
  opacity: 0.5 !important;
}

.profile-empty-title,
.empty-state-title {
  font-size: 16px !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.profile-empty-subtitle,
.empty-state-subtitle {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  margin-bottom: 16px !important;
}

/* Quick export buttons */
.export-quick-btns {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.btn-quick {
  padding: 8px 14px !important;
  font-size: 13px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-quick:hover {
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
}

/* Date range picker row */
.export-date-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
}

.export-date-row input[type="date"] {
  padding: 8px 12px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  min-width: 130px !important;
}

.export-date-row label {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Format selector */
.export-format-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

.export-format-row label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  cursor: pointer !important;
}

.export-format-row input[type="radio"] {
  accent-color: #3b82f6 !important;
}

/* KPI cards */
.kpi-card-v2 {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  text-align: center !important;
}

.kpi-value-v2 {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #60a5fa !important;
  margin-bottom: 4px !important;
}

.kpi-label-v2 {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Transcripts list */
.transcript-item-v2 {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 16px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
}

.transcript-item-v2:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.transcript-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.transcript-date {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.transcript-info {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Mobile improvements */
@media (max-width: 640px) {
  .profile-modal-v2 {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  
  .profile-header-v2 {
    padding: 16px !important;
  }
  
  .profile-avatar-v2 {
    width: 56px !important;
    height: 56px !important;
    font-size: 22px !important;
  }
  
  .profile-name-v2 {
    font-size: 18px !important;
  }
  
  .profile-content-v2 {
    padding: 16px !important;
    max-height: calc(100vh - 200px) !important;
  }
  
  .export-date-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .export-date-row input[type="date"] {
    width: 100% !important;
  }
  
  .export-quick-btns {
    justify-content: center !important;
  }
}

/* =================================================================
   v5.1.87: RECORDING INDICATOR ENHANCEMENTS
   ================================================================= */

/* Recording state - prevent accidental navigation */
body.is-recording .nav-item:not(.active),
body.is-recording [data-nav]:not(.active) {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

body.is-recording::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ef4444, #f97316, #ef4444);
  background-size: 200% 100%;
  animation: recording-pulse 2s ease infinite;
  z-index: 99999;
}

@keyframes recording-pulse {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Update banner when recording */
#updateBanner.recording-active {
  opacity: 0.7 !important;
}

/* =================================================================
   v5.1.88: AI CHAT IMPROVEMENTS
   ================================================================= */

/* Bigger chat area.
   v10.2.x: 50vh left the assistant reading as a small box with a wide band of
   empty page under it — three or four lines of a table answer and you are
   already scrolling inside a window that had room to spare. Take the height the
   tab actually has: everything below the topbar and above the composer, with a
   floor so short viewports still get a usable panel. */
.ai-chat-messages {
  min-height: 360px !important;
  max-height: calc(100vh - 300px) !important;
  height: auto !important;
}

/* Mobile: even bigger chat */
@media (max-width: 768px) {
  .ai-chat-messages {
    min-height: 45vh !important;
    max-height: 60vh !important;
  }
  
  .ai-chat-block {
    padding: 12px !important;
  }
  
  .ai-chat-wrapper {
    margin: 0 -8px !important;
  }
}

/* Simplified hints - 3 buttons in row */
.ai-hints-simple {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 0 !important;
}

.ai-hints-simple .ai-hint-btn {
  flex: 1 !important;
  max-width: 120px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  border-radius: 20px !important;
  background: rgba(59, 130, 246, 0.1) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
  white-space: nowrap !important;
}

.ai-hints-simple .ai-hint-btn:hover {
  background: rgba(59, 130, 246, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* Hide old multi-row hints on mobile */
@media (max-width: 640px) {
  .ai-hints-label {
    display: none !important;
  }
  
  .ai-hints-simple .ai-hint-btn {
    font-size: 12px !important;
    padding: 8px 10px !important;
  }
}
/* ============================================================
   USER PROFILE MODAL - COMPLETE REDESIGN v3.0
   Modern glassmorphism design with mobile-first approach
   ============================================================ */

/* === CSS Variables === */
:root {
  --pm-bg-primary: rgba(15, 17, 26, 0.98);
  --pm-bg-secondary: rgba(22, 25, 38, 0.95);
  --pm-bg-card: rgba(255, 255, 255, 0.03);
  --pm-bg-card-hover: rgba(255, 255, 255, 0.06);
  --pm-border: rgba(255, 255, 255, 0.08);
  --pm-border-light: rgba(255, 255, 255, 0.04);
  --pm-text-primary: rgba(255, 255, 255, 0.95);
  --pm-text-secondary: rgba(255, 255, 255, 0.65);
  --pm-text-muted: rgba(255, 255, 255, 0.4);
  --pm-accent: #3b82f6;
  --pm-accent-light: rgba(59, 130, 246, 0.15);
  --pm-success: #10b981;
  --pm-success-light: rgba(16, 185, 129, 0.15);
  --pm-warning: #f59e0b;
  --pm-warning-light: rgba(245, 158, 11, 0.15);
  --pm-danger: #ef4444;
  --pm-danger-light: rgba(239, 68, 68, 0.15);
  --pm-gradient-avatar: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #0ea5e9 100%);
  --pm-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --pm-radius-sm: 6px;
  --pm-radius-md: 10px;
  --pm-radius-lg: 16px;
  --pm-radius-xl: 20px;
  --pm-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light theme overrides */
body.theme-light {
  --pm-bg-primary: rgba(255, 255, 255, 0.98);
  --pm-bg-secondary: rgba(248, 250, 252, 0.95);
  --pm-bg-card: rgba(0, 0, 0, 0.03);
  --pm-bg-card-hover: rgba(0, 0, 0, 0.06);
  --pm-border: rgba(0, 0, 0, 0.1);
  --pm-border-light: rgba(0, 0, 0, 0.05);
  --pm-text-primary: rgba(15, 23, 42, 0.95);
  --pm-text-secondary: rgba(15, 23, 42, 0.7);
  --pm-text-muted: rgba(15, 23, 42, 0.45);
}

/* === Animations === */
@keyframes pmFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pmSlideUp {
  from { 
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pmSlideInRight {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pmPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

@keyframes pmSpin {
  to { transform: rotate(360deg); }
}

@keyframes pmShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* === Modal Overlay === */
#userProfileModalV3 {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: pmFadeIn 0.2s ease-out;
  padding: 16px;
}

#userProfileModalV3.hidden {
  display: none !important;
}

/* === Modal Container === */
.pm-modal {
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  background: var(--pm-bg-primary);
  border-radius: var(--pm-radius-xl);
  box-shadow: var(--pm-shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: pmSlideUp 0.3s ease-out;
  border: 1px solid var(--pm-border);
  transition: max-height 0.3s ease;
}

/* === Modal Header === */
.pm-header {
  position: relative;
  padding: 20px 24px;
  background: var(--pm-bg-secondary);
  border-bottom: 1px solid var(--pm-border-light);
  flex-shrink: 0;
}

.pm-header-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.pm-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--pm-gradient-avatar);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  text-transform: uppercase;
}

.pm-user-info {
  flex: 1;
  min-width: 0;
}

.pm-user-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--pm-text-primary);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-user-login {
  font-size: 13px;
  color: var(--pm-text-muted);
  margin-bottom: 8px;
}

.pm-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.pm-badge--active {
  background: var(--pm-success-light);
  color: var(--pm-success);
}

.pm-badge--inactive {
  background: var(--pm-danger-light);
  color: var(--pm-danger);
}

.pm-badge--deleted {
  background: var(--pm-text-muted);
  color: var(--pm-text-secondary);
}

.pm-badge--role {
  background: var(--pm-accent-light);
  color: var(--pm-accent);
}

.pm-badge--scope {
  background: var(--pm-bg-card);
  color: var(--pm-text-secondary);
  border: 1px solid var(--pm-border-light);
}

.pm-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  background: rgba(0,0,0,0.3) !important;
  border-radius: 50% !important;
  color: #fff !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 100 !important;
  opacity: 0.9;
  padding: 0 !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.2, 0.64, 1), background 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.pm-close:hover {
  background: rgba(255,59,48,0.8);
  color: #fff;
  transform: scale(1.12);
  opacity: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.pm-close:active {
  transform: scale(0.9);
  transition-duration: 0.1s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.pm-close:focus-visible {
  outline: 2px solid var(--pm-accent);
  outline-offset: 2px;
}

.pm-close svg {
  width: 16px;
  height: 16px;
}

/* === Quick Stats === */
.pm-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 12px 24px;
  background: var(--pm-bg-primary);
  border-bottom: 1px solid var(--pm-border-light);
  flex-shrink: 0;
}

.pm-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  background: var(--pm-bg-card);
  border-radius: var(--pm-radius-md);
  transition: var(--pm-transition);
}

.pm-stat:hover {
  background: var(--pm-bg-card-hover);
}

.pm-stat__value {
  font-size: 20px;
  font-weight: 700;
  color: var(--pm-accent);
  line-height: 1.2;
}

.pm-stat__label {
  font-size: 10px;
  color: var(--pm-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
  text-align: center;
}

/* === Tabs Navigation === */
.pm-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 40px;
  gap: 2px;
  padding: 6px 12px;
  background: var(--pm-bg-secondary);
  border-bottom: 1px solid var(--pm-border-light);
  overflow: hidden;
  flex-shrink: 0;
}

.pm-tabs::-webkit-scrollbar {
  display: none;
}

/* Single tab (manager profiles) — stretch full width */
.pm-tab:only-child {
  grid-column: 1 / -1;
  font-size: 14px;
  padding: 12px 16px;
}

.pm-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: var(--pm-text-secondary);
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--pm-radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--pm-transition);
}

.pm-tab:hover {
  background: var(--pm-bg-card);
  color: var(--pm-text-primary);
}

.pm-tab.active {
  background: var(--pm-accent-light);
  color: var(--pm-accent);
}

.pm-tab__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.pm-tab__icon svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

.pm-tab__label {
  /* Visible on desktop */
}

/* === Content Area === */
.pm-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  min-height: 300px;
  scrollbar-width: thin;
  scrollbar-color: var(--pm-border) transparent;
}

.pm-content::-webkit-scrollbar {
  width: 6px;
}

.pm-content::-webkit-scrollbar-track {
  background: transparent;
}

.pm-content::-webkit-scrollbar-thumb {
  background: var(--pm-border);
  border-radius: 3px;
}

/* Tab content animation */
.pm-content > * {
  animation: pmSlideInRight 0.2s ease-out;
}

/* === Section Cards === */
.pm-section {
  background: var(--pm-bg-card);
  border: 1px solid var(--pm-border-light);
  border-radius: var(--pm-radius-lg);
  padding: 16px;
  margin-bottom: 16px;
}

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

.pm-section--highlight {
  background: var(--pm-accent-light);
  border-color: rgba(99, 102, 241, 0.2);
}

.pm-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pm-text-primary);
  margin-bottom: 12px;
}

.pm-section__title svg {
  width: 16px;
  height: 16px;
  color: var(--pm-accent);
}

/* === Info Grid === */
.pm-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.pm-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pm-info-item--full {
  grid-column: 1 / -1;
}

.pm-info__label {
  font-size: 11px;
  color: var(--pm-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pm-info__value {
  font-size: 14px;
  color: var(--pm-text-primary);
  word-break: break-word;
}

/* === KPI Cards === */
.pm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.pm-kpi-card {
  background: var(--pm-bg-secondary);
  border: 1px solid var(--pm-border-light);
  border-radius: var(--pm-radius-md);
  padding: 16px;
  text-align: center;
}

.pm-kpi-card__period {
  font-size: 11px;
  color: var(--pm-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.pm-kpi-card__stats {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.pm-kpi-stat__value {
  font-size: 28px;
  font-weight: 700;
  color: var(--pm-text-primary);
  line-height: 1;
}

.pm-kpi-stat__label {
  font-size: 11px;
  color: var(--pm-text-muted);
  margin-top: 4px;
}

/* === Sessions List === */
.pm-sessions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}

.pm-session {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--pm-bg-secondary);
  border-radius: var(--pm-radius-md);
  transition: var(--pm-transition);
}

.pm-session:hover {
  background: var(--pm-bg-card-hover);
}

.pm-session__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pm-success);
  flex-shrink: 0;
}

.pm-session__dot--ended {
  background: var(--pm-text-muted);
}

.pm-session__time {
  font-size: 14px;
  color: var(--pm-text-primary);
  font-weight: 500;
}

.pm-session__duration {
  margin-left: auto;
  font-size: 13px;
  color: var(--pm-text-secondary);
}

/* === QA Circle === */
.pm-qa-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.pm-qa-circle__ring {
  position: relative;
  width: 140px;
  height: 140px;
}

.pm-qa-circle__ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.pm-qa-circle__bg {
  fill: none;
  stroke: var(--pm-border);
  stroke-width: 8;
}

.pm-qa-circle__progress {
  fill: none;
  stroke: var(--pm-accent);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease-out;
}

.pm-qa-circle__progress--good { stroke: var(--pm-success); }
.pm-qa-circle__progress--medium { stroke: var(--pm-warning); }
.pm-qa-circle__progress--low { stroke: var(--pm-danger); }

.pm-qa-circle__value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pm-qa-circle__number {
  font-size: 36px;
  font-weight: 700;
  color: var(--pm-text-primary);
}

.pm-qa-circle__unit {
  font-size: 14px;
  color: var(--pm-text-muted);
}

.pm-qa-circle__label {
  margin-top: 12px;
  font-size: 13px;
  color: var(--pm-text-secondary);
}

/* === Points Balance === */
.pm-points-balance {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
  background: linear-gradient(135deg, var(--pm-accent-light) 0%, rgba(14, 165, 233, 0.1) 100%);
  border-radius: var(--pm-radius-lg);
  margin-bottom: 16px;
}

.pm-points-balance__value {
  font-size: 48px;
  font-weight: 800;
  color: var(--pm-accent);
  line-height: 1;
}

.pm-points-balance__label {
  font-size: 14px;
  color: var(--pm-text-secondary);
  margin-top: 8px;
}

/* === Points History === */
.pm-points-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}

.pm-points-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--pm-bg-secondary);
  border-radius: var(--pm-radius-md);
}

.pm-points-item__amount {
  font-size: 16px;
  font-weight: 700;
  min-width: 60px;
}

.pm-points-item__amount--plus {
  color: var(--pm-success);
}

.pm-points-item__amount--minus {
  color: var(--pm-danger);
}

.pm-points-item__info {
  flex: 1;
  min-width: 0;
}

.pm-points-item__reason {
  font-size: 13px;
  color: var(--pm-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-points-item__date {
  font-size: 11px;
  color: var(--pm-text-muted);
}

/* === Script Compliance === */
.pm-script-check {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
}

.pm-script-check__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.pm-script-check__icon--ok {
  background: var(--pm-success-light);
  color: var(--pm-success);
}

.pm-script-check__icon--warning {
  background: var(--pm-warning-light);
  color: var(--pm-warning);
}

.pm-script-check__icon--error {
  background: var(--pm-danger-light);
  color: var(--pm-danger);
}

.pm-script-check__icon svg {
  width: 40px;
  height: 40px;
}

.pm-script-check__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--pm-text-primary);
  margin-bottom: 4px;
}

.pm-script-check__desc {
  font-size: 13px;
  color: var(--pm-text-secondary);
}

/* === Transcripts Export === */
.pm-export-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pm-export-format {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pm-export-format__label {
  font-size: 12px;
  color: var(--pm-text-muted);
}

.pm-export-format__options {
  display: flex;
  gap: 8px;
}

.pm-export-format__option {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--pm-text-secondary);
}

.pm-export-format__option input {
  accent-color: var(--pm-accent);
}

.pm-export-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pm-export-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--pm-border-light);
}

.pm-export-dates__label {
  font-size: 12px;
  color: var(--pm-text-muted);
}

.pm-export-dates input[type="date"] {
  background: var(--pm-bg-secondary);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-sm);
  padding: 8px 12px;
  color: var(--pm-text-primary);
  font-size: 13px;
}

.pm-export-dates input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.6;
  cursor: pointer;
}

body.theme-light .pm-export-dates input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none;
}

.pm-export-hint {
  font-size: 11px;
  color: var(--pm-text-muted);
  width: 100%;
}

/* === Empty State === */
.pm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.pm-empty__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--pm-bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--pm-text-muted);
}

.pm-empty__icon svg {
  width: 32px;
  height: 32px;
}

.pm-empty__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--pm-text-primary);
  margin-bottom: 4px;
}

.pm-empty__desc {
  font-size: 13px;
  color: var(--pm-text-secondary);
  max-width: 260px;
}

/* === Loading State === */
.pm-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 12px;
}

.pm-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--pm-border);
  border-top-color: var(--pm-accent);
  border-radius: 50%;
  animation: pmSpin 0.8s linear infinite;
}

.pm-loading__text {
  font-size: 13px;
  color: var(--pm-text-secondary);
}

/* === Footer === */
.pm-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  background: var(--pm-bg-secondary);
  border-top: 1px solid var(--pm-border-light);
  flex-shrink: 0;
}

.pm-footer__left {
  display: flex;
  gap: 8px;
}

.pm-footer__center {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.pm-footer__right {
  display: flex;
  gap: 8px;
}

/* === Buttons === */
.pm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-radius: var(--pm-radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--pm-transition);
  white-space: nowrap;
}

.pm-btn svg {
  width: 16px;
  height: 16px;
}

.pm-btn--secondary {
  background: var(--pm-bg-card);
  color: var(--pm-text-primary);
  border: 1px solid var(--pm-border);
}

.pm-btn--secondary:hover {
  background: var(--pm-bg-card-hover);
  border-color: var(--pm-border);
}

.pm-btn--primary {
  background: var(--pm-accent);
  color: white;
}

.pm-btn--primary:hover {
  background: #5558e3;
}

.pm-btn--warning {
  background: var(--pm-warning-light);
  color: var(--pm-warning);
}

.pm-btn--warning:hover {
  background: rgba(245, 158, 11, 0.25);
}

.pm-btn--danger {
  background: var(--pm-danger-light);
  color: var(--pm-danger);
}

.pm-btn--danger:hover {
  background: rgba(239, 68, 68, 0.25);
}

.pm-btn--sm {
  padding: 8px 12px;
  font-size: 12px;
}

.pm-btn--sm svg {
  width: 14px;
  height: 14px;
}

/* === Messages === */
.pm-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.pm-message {
  padding: 12px;
  background: var(--pm-bg-secondary);
  border-radius: var(--pm-radius-md);
  max-width: 85%;
}

.pm-message--sent {
  margin-left: auto;
  background: var(--pm-accent-light);
}

.pm-message__header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--pm-text-muted);
  margin-bottom: 4px;
}

.pm-message__text {
  font-size: 13px;
  color: var(--pm-text-primary);
}

.pm-message-form {
  margin-bottom: 16px;
}

.pm-message-form textarea {
  width: 100%;
  min-height: 80px;
  background: var(--pm-bg-secondary);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-md);
  padding: 12px;
  color: var(--pm-text-primary);
  font-size: 13px;
  resize: vertical;
}

.pm-message-form textarea::placeholder {
  color: var(--pm-text-muted);
}

.pm-message-form__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* v7.5.0: Two-way chat bubbles */
.pm-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
  padding: 12px;
  background: var(--pm-bg-secondary);
  border-radius: var(--pm-radius-md);
  border: 1px solid var(--pm-border-light);
}

.pm-chat__empty {
  text-align: center;
  color: var(--pm-text-muted);
  font-size: 13px;
  padding: 32px 16px;
  font-style: italic;
}

.pm-chat-msg {
  padding: 10px 12px;
  border-radius: 12px;
  max-width: 80%;
  word-break: break-word;
}

.pm-chat-msg--received {
  align-self: flex-start;
  background: var(--pm-bg-card);
  border: 1px solid var(--pm-border-light);
  border-bottom-left-radius: 4px;
}

.pm-chat-msg--sent {
  align-self: flex-end;
  background: var(--pm-accent-light);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-bottom-right-radius: 4px;
}

.pm-chat-msg__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  color: var(--pm-text-muted);
  margin-bottom: 4px;
}

.pm-chat-msg__author {
  font-weight: 600;
  color: var(--pm-accent);
}

.pm-chat-msg--received .pm-chat-msg__author {
  color: var(--pm-text-secondary);
}

.pm-chat-msg__badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.15);
  color: var(--pm-warning);
  font-size: 9px;
  font-weight: 500;
  margin-left: 4px;
}

.pm-chat-msg__text {
  font-size: 13px;
  color: var(--pm-text-primary);
  line-height: 1.4;
  white-space: pre-wrap;
}

.pm-chat-compose {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.pm-chat-compose textarea {
  flex: 1;
  min-height: 40px;
  max-height: 120px;
  background: var(--pm-bg-secondary);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-md);
  padding: 10px 12px;
  color: var(--pm-text-primary);
  font-size: 13px;
  resize: vertical;
  font-family: inherit;
}

.pm-chat-compose textarea:focus {
  outline: none;
  border-color: var(--pm-accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.pm-chat-compose textarea::placeholder {
  color: var(--pm-text-muted);
}

.pm-chat-compose .pm-btn {
  align-self: flex-end;
  white-space: nowrap;
}

/* === Transcript List === */
.pm-transcript-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.pm-transcript-stat {
  text-align: center;
  padding: 12px;
  background: var(--pm-bg-secondary);
  border-radius: var(--pm-radius-md);
}

.pm-transcript-stat__value {
  font-size: 20px;
  font-weight: 700;
  color: var(--pm-text-primary);
}

.pm-transcript-stat__value--danger {
  color: var(--pm-danger);
}

.pm-transcript-stat__value--warning {
  color: var(--pm-warning);
}

.pm-transcript-stat__value--success {
  color: var(--pm-success);
}

.pm-transcript-stat__label {
  font-size: 10px;
  color: var(--pm-text-muted);
  text-transform: uppercase;
}

.pm-transcripts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}

.pm-transcript-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--pm-bg-secondary);
  border-radius: var(--pm-radius-md);
}

.pm-transcript-item__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pm-transcript-item__date {
  font-size: 13px;
  color: var(--pm-text-primary);
  font-weight: 500;
}

.pm-transcript-item__meta {
  font-size: 11px;
  color: var(--pm-text-muted);
}

/* ======================================================
   MOBILE RESPONSIVE STYLES
   ====================================================== */

@media (max-width: 640px) {
  #userProfileModalV3 {
    padding: 8px;
    align-items: center;
  }

  .pm-modal {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 20px;
    animation: pmSlideUpMobile 0.3s ease-out;
  }

  @keyframes pmSlideUpMobile {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  /* Header — blend with modal bg */
  .pm-header {
    padding: 12px 16px;
    background: transparent;
    border-bottom: none;
  }

  .pm-header-top {
    gap: 12px;
  }

  .pm-avatar {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .pm-user-name {
    font-size: 18px;
  }

  .pm-close {
    top: 12px;
    right: 12px;
  }

  /* Stats - horizontal scroll */
  .pm-stats {
    grid-template-columns: repeat(5, minmax(72px, 1fr));
    padding: 10px 16px;
    overflow-x: auto;
    gap: 6px;
  }

  .pm-stat {
    padding: 8px 6px;
  }

  .pm-stat__value {
    font-size: 18px;
  }

  .pm-stat__label {
    font-size: 9px;
  }

  /* Tabs - 4x2 grid, icons only, small */
  .pm-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 4px 8px;
    gap: 2px;
    background: transparent;
    border-bottom: 1px solid var(--pm-border-light);
  }

  .pm-tab {
    padding: 6px 4px;
    gap: 0;
    flex-direction: column;
    min-width: 0;
  }

  .pm-tab__icon {
    width: 18px;
    height: 18px;
  }

  .pm-tab__icon svg {
    width: 18px;
    height: 18px;
    min-width: 0;
    min-height: 0;
    stroke-width: 1.5;
  }

  .pm-tab__label {
    display: none;
  }

  /* Content */
  .pm-content {
    padding: 16px;
    min-height: 260px;
  }

  /* Section */
  .pm-section {
    padding: 14px;
    margin-bottom: 12px;
  }

  /* Info grid - single column on very small */
  .pm-info-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* KPI - stack on mobile */
  .pm-kpi-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .pm-kpi-card {
    padding: 14px;
  }

  .pm-kpi-stat__value {
    font-size: 24px;
  }

  /* Transcript stats - 2 columns on mobile */
  .pm-transcript-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  /* QA Circle */
  .pm-qa-circle {
    padding: 20px;
  }

  .pm-qa-circle__ring {
    width: 120px;
    height: 120px;
  }

  .pm-qa-circle__number {
    font-size: 30px;
  }

  /* Points */
  .pm-points-balance {
    padding: 24px;
  }

  .pm-points-balance__value {
    font-size: 40px;
  }

  /* Footer */
  .pm-footer {
    flex-wrap: wrap;
    padding: 12px 16px;
    gap: 8px;
  }

  .pm-footer__left,
  .pm-footer__center,
  .pm-footer__right {
    width: auto;
  }

  .pm-footer__center {
    order: 3;
    flex: none;
    width: 100%;
    justify-content: center;
  }

  .pm-btn {
    padding: 10px 14px;
  }

  /* Hide text on footer buttons, show only icons */
  .pm-footer .pm-btn__text {
    display: none;
  }

  .pm-footer .pm-btn {
    padding: 10px 12px;
  }

  /* Export dates - stack */
  .pm-export-dates {
    flex-direction: column;
    align-items: stretch;
  }

  .pm-export-dates input[type="date"] {
    width: 100%;
  }

  .pm-export-buttons {
    justify-content: stretch;
  }

  .pm-export-buttons .pm-btn {
    flex: 1;
  }
}

/* Very small screens */
@media (max-width: 380px) {
  .pm-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .pm-stat:nth-child(4),
  .pm-stat:nth-child(5) {
    display: none;
  }

  .pm-badges {
    gap: 4px;
  }

  .pm-badge {
    padding: 3px 8px;
    font-size: 10px;
  }

  .pm-info-grid {
    grid-template-columns: 1fr;
  }
}

/* Tablet tweaks */
@media (min-width: 641px) and (max-width: 900px) {
  .pm-modal {
    max-width: 95%;
  }

  .pm-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =================================================================
   v5.2.5: CHAT SYSTEM STYLES
   ================================================================= */

.chat-container {
  display: flex;
  gap: 0;
  min-height: 400px;
  background: var(--bg-2);
  border-radius: 12px;
  overflow: hidden;
}
/* Мобільна: фіксована висота, внутрішній скрол — ок (стилі далі в секції Chat) */
@media (max-width: 768px) {
  .chat-container {
    height: calc(100vh - 160px);
  }
}

.chat-list-panel {
  width: 320px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.2);
}

.chat-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.chat-list-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.chat-list-search {
  padding: 12px 16px;
}

.chat-list-search .input {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 8px;
}

.chat-conversations-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.chat-loading {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255,255,255,0.4);
}

.chat-conv-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 4px;
  align-items: center;
  position: relative;
}

.chat-conv-item:hover {
  background: rgba(255,255,255,0.05);
}

.chat-conv-item.active {
  background: rgba(59,130,246,0.15);
}

/* v5.2.14: Chat conv main wrapper */
.chat-conv-main {
  display: flex;
  gap: 12px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

/* v5.2.14: Delete button */
.chat-conv-delete {
  opacity: 0;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
  border-radius: 6px;
  flex-shrink: 0;
}

.chat-conv-item:hover .chat-conv-delete {
  opacity: 0.5;
}

.chat-conv-delete:hover {
  opacity: 1 !important;
  background: rgba(239, 68, 68, 0.2);
  transform: scale(1.1);
}

.chat-conv-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.chat-conv-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-conv-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.chat-conv-name {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-conv-time {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  flex-shrink: 0;
}

.chat-conv-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.chat-conv-preview {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-conv-unread {
  background: #3b82f6;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  flex-shrink: 0;
}

.chat-new-btn {
  margin: 12px;
}

/* Chat Window */
.chat-window-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  color: rgba(255,255,255,0.55);
}

.chat-placeholder-icon {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin-bottom: 6px;
  font-size: 40px;
  border-radius: 50%;
  background: rgba(59,130,246,0.12);
}

.chat-placeholder-title {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}

.chat-placeholder-text {
  font-size: 14px;
  max-width: 280px;
  line-height: 1.45;
}

.chat-placeholder-cta {
  margin-top: 10px;
  padding: 10px 22px;
  border: none;
  border-radius: 10px;
  background: var(--accent, #3b82f6);
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(59,130,246,0.25);
  transition: filter .16s ease, transform .16s ease;
}
.chat-placeholder-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.chat-placeholder-cta:active { transform: translateY(0); }

.chat-window {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chat-window-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.15);
}

.chat-back-btn {
  display: none;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

/* v5.2.14: Header delete button */
.chat-header-delete {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 50%;
  color: rgba(239, 68, 68, 0.8);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-header-delete:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #ef4444;
  transform: scale(1.1);
}

.chat-window-user {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.chat-window-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.chat-window-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-window-name {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}

.chat-window-role {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

/* Messages Container */
.chat-messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-message {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}

.chat-message.sent {
  align-self: flex-end;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-message.received {
  align-self: flex-start;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
  border-bottom-left-radius: 4px;
}

.chat-message-time {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
  text-align: right;
}

.chat-message.received .chat-message-time {
  text-align: left;
}

/* Input Container */
.chat-input-container {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.15);
}

.chat-input {
  flex: 1;
  resize: none;
  min-height: 44px;
  max-height: 120px;
  padding: 12px 16px;
  border-radius: 22px;
  font-size: 14px;
}

.chat-send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 0;
  font-size: 18px;
}

/* New Chat Modal */
.new-chat-contacts-list {
  max-height: 300px;
  overflow-y: auto;
  margin-top: 12px;
}

/* Rich empty state (new-chat contacts list) */
.chat-empty--rich {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 16px;
  text-align: center;
}
.chat-empty__icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  font-size: 26px;
  border-radius: 50%;
  background: rgba(59,130,246,0.12);
}
.chat-empty__text {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255,255,255,0.55);
}
body.theme-light .chat-empty__text { color: rgba(0,0,0,0.5); }

.new-chat-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.new-chat-contact:hover {
  background: rgba(255,255,255,0.05);
}

.new-chat-contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.new-chat-contact-info {
  flex: 1;
}

.new-chat-contact-name {
  font-size: 14px;
  font-weight: 500;
}

.new-chat-contact-role {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

/* Mobile Styles */
@media (max-width: 768px) {
  .chat-container {
    flex-direction: column;
    /* v6.6.3: Account for topbar (~70px) + bottom nav (~64px) + safe area */
    height: calc(100vh - 70px - 64px - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - 70px - 64px - env(safe-area-inset-bottom, 0px));
  }

  .chat-list-panel {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex: 1;
    overflow-y: auto;
  }

  .chat-list-panel.chat-hidden {
    display: none;
  }

  .chat-window-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .chat-window-panel.chat-hidden {
    display: none;
  }

  .chat-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .chat-conversations-list {
    flex: 1;
    overflow-y: auto;
  }

  .chat-messages-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }

  .chat-input-container {
    flex-shrink: 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }

  .chat-message {
    max-width: 85%;
  }
}

/* Десктоп: один скрол (#appScrollRoot), без міні-скролу в списку чатів і в повідомленнях */
@media (min-width: 769px) {
  .chat-container {
    height: auto !important;
    min-height: 420px;
  }
  .chat-conversations-list {
    overflow-y: visible !important;
    flex: 1 1 auto;
  }
  .chat-messages-container {
    overflow-y: visible !important;
    flex: 1 1 auto;
  }
}

/* Chat additional styles */
.chat-conv-role {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
}

.chat-conv-item.has-unread .chat-conv-name {
  font-weight: 600;
}

.chat-empty {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255,255,255,0.4);
}

.chat-empty-icon {
  font-size: 48px;
  opacity: 0.3;
  margin-bottom: 12px;
}

.chat-empty-text {
  font-size: 14px;
}

/* ===== CHAT — LIGHT THEME ===== */
body.theme-light .chat-container {
  background: #f9fafb !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.theme-light .chat-list-panel {
  background: #ffffff !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.theme-light .chat-list-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.theme-light .chat-list-header h3 {
  color: #1a1a2e !important;
}
body.theme-light .chat-conv-name {
  color: #1a1a2e !important;
}
body.theme-light .chat-conv-time {
  color: rgba(0, 0, 0, 0.4) !important;
}
body.theme-light .chat-conv-preview {
  color: rgba(0, 0, 0, 0.5) !important;
}
body.theme-light .chat-conv-role {
  color: rgba(0, 0, 0, 0.4) !important;
}
body.theme-light .chat-conv-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.theme-light .chat-conv-item.active {
  background: rgba(59, 130, 246, 0.1) !important;
}
body.theme-light .chat-loading {
  color: rgba(0, 0, 0, 0.4) !important;
}
body.theme-light .chat-placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
}
body.theme-light .chat-placeholder-title {
  color: rgba(17, 24, 39, 0.92) !important;
}
body.theme-light .chat-placeholder-icon {
  background: rgba(59, 130, 246, 0.1) !important;
}
body.theme-light .chat-empty {
  color: rgba(0, 0, 0, 0.4) !important;
}
body.theme-light .chat-window-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: rgba(0, 0, 0, 0.02) !important;
}
body.theme-light .chat-window-name {
  color: #1a1a2e !important;
}
body.theme-light .chat-window-role {
  color: rgba(0, 0, 0, 0.5) !important;
}
body.theme-light .chat-message.received {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #1a1a2e !important;
}
body.theme-light .chat-message-time {
  color: rgba(0, 0, 0, 0.4) !important;
}
body.theme-light .chat-input-container {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: rgba(0, 0, 0, 0.02) !important;
}
body.theme-light .chat-input {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #1a1a2e !important;
}
body.theme-light .chat-back-btn {
  color: #1a1a2e !important;
  background: rgba(0, 0, 0, 0.06) !important;
}

.chat-empty-messages {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255,255,255,0.4);
  font-size: 14px;
}

.chat-message-text {
  white-space: pre-wrap;
}

/* Tab badge for unread */
.tab-badge {
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ========== SUPPORT CHAT STYLES ========== */

/* Pinned support chat at top */
.support-chat-pinned {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 4px;
  margin-bottom: 4px;
}

body.theme-light .support-chat-pinned {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.support-conv .support-avatar {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: white !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.support-conv .chat-conv-name {
  font-weight: 600 !important;
}

/* Support unread badge */
.support-unread {
  background: #ef4444 !important;
  color: white !important;
  border-radius: 10px !important;
  padding: 1px 7px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 18px;
  text-align: center;
}

/* Support section header (superadmin) */
.support-chats-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 4px;
  margin-bottom: 4px;
}

body.theme-light .support-chats-section {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.support-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 4px;
  font-size: 12px;
  font-weight: 600;
  color: #ef4444;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.support-section-count {
  background: #ef4444;
  color: white;
  border-radius: 8px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  margin-left: auto;
}

/* Support conversation items (superadmin list) */
.support-conv-item {
  border-left: 3px solid transparent;
}

.support-conv-item.has-unread {
  border-left-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.05) !important;
}

body.theme-light .support-conv-item.has-unread {
  background: rgba(239, 68, 68, 0.06) !important;
}

/* Red highlight for unread conversations in sidebar */
.chat-conv-item.has-unread {
  border-left: 3px solid #ef4444;
}

body.theme-light .chat-conv-item.has-unread {
  border-left: 3px solid #ef4444;
}

/* Support bell badge (near notification bell) */
.support-bell-badge {
  position: absolute !important;
  top: -2px !important;
  left: -2px !important;
  background: #ef4444 !important;
  color: white !important;
  border-radius: 50% !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid var(--bg, #0f1117) !important;
  z-index: 5 !important;
  line-height: 1 !important;
}

body.theme-light .support-bell-badge {
  border-color: #ffffff !important;
}

.support-bell-badge.hidden {
  display: none !important;
}

/* Support tab badge override - make it red */
.support-tab-badge {
  background: #ef4444 !important;
  animation: supportPulse 2s ease-in-out infinite;
}

@keyframes supportPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Hide delete button from conversation list */
.chat-conv-delete {
  display: none !important;
}

/* ========== END SUPPORT CHAT STYLES ========== */

/* Seller mobile chat button */
.seller-chat-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: rgba(59,130,246,0.1);
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 12px;
}

.seller-chat-btn:active {
  background: rgba(59,130,246,0.2);
}

.seller-chat-badge {
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: auto;
}

/* Seller Chat Modal */
.seller-chat-modal {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

.seller-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: var(--bg-2);
}

.seller-chat-back {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.seller-chat-title {
  font-size: 16px;
  font-weight: 600;
}

.seller-chat-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.seller-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: rgba(255,255,255,0.4);
}

.seller-chat-empty-icon {
  font-size: 48px;
  opacity: 0.3;
  margin-bottom: 12px;
}

.seller-chat-empty-text {
  font-size: 14px;
}

.seller-chat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 4px;
}

.seller-chat-item:active {
  background: rgba(255,255,255,0.08);
}

.seller-chat-item.has-unread {
  background: rgba(59,130,246,0.08);
}

.seller-chat-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.seller-chat-info {
  flex: 1;
  min-width: 0;
}

.seller-chat-name {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 2px;
}

.seller-chat-role {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}

.seller-chat-preview {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seller-chat-unread {
  background: #3b82f6;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  flex-shrink: 0;
}

/* Seller Conversation View */
.seller-conv-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: var(--bg-2);
}

.seller-conv-back {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.seller-conv-name {
  font-size: 16px;
  font-weight: 600;
}

.seller-conv-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
  max-height: calc(100vh - 200px);
}

.seller-conv-input {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: var(--bg-2);
}

.seller-conv-input textarea {
  flex: 1;
  resize: none;
  padding: 12px 16px;
  border-radius: 22px;
  font-size: 14px;
}

.seller-conv-input button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 0;
  font-size: 18px;
}

.seller-setting-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.seller-chat-item .seller-setting-right {
  margin-left: auto;
}

/* ========== v5.2.9: Seller Inline Chat ========== */
.seller-chat-section {
  background: var(--bg-2, #1a1a2e);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
}

.seller-chat-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Custom recipient dropdown. The native <select> stays in the DOM (hidden,
   focusable never) because all the populate/restore logic reads it; the visual
   control mirrors its value. */
.seller-chat-select {
  position: relative;
  flex: 1;
  min-width: 0;
}

.seller-chat-select-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 7px 12px;
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}

.seller-chat-select-btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.2);
}

.seller-chat-select-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seller-chat-select-chevron {
  --mh-i-size: 14px;
  flex: 0 0 auto;
  opacity: 0.55;
  transition: transform 0.18s ease;
}

.seller-chat-select.open .seller-chat-select-chevron {
  transform: rotate(180deg);
}

.seller-chat-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  background: #1c1c28;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 5px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
  display: none;
  overflow: hidden;
}

.seller-chat-select.open .seller-chat-select-menu {
  display: block;
  animation: sellerChatSelectIn 0.14s ease;
}

@keyframes sellerChatSelectIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.seller-chat-select-option {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 9px 11px;
  color: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seller-chat-select-option:hover {
  background: rgba(255,255,255,0.08);
}

.seller-chat-select-option.selected {
  background: var(--accent-muted, rgba(59,125,255,0.15));
  color: var(--accent, #3b7dff);
  font-weight: 700;
}

/* Native select kept for logic only — visually hidden, never interacted with. */
.seller-chat-recipient-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.seller-chat-messages {
  height: 280px;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seller-inline-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.4;
}

.seller-inline-msg.sent {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--accent, #3b7dff) 0%, var(--accent-2, #5a94ff) 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.seller-inline-msg.received {
  align-self: flex-start;
  background: rgba(255,255,255,0.08);
  color: var(--text-1, #fff);
  border-bottom-left-radius: 4px;
}

.seller-inline-msg-text {
  word-break: break-word;
  white-space: pre-wrap;
}

.seller-inline-msg-time {
  font-size: 10px;
  opacity: 0.6;
  margin-top: 4px;
  text-align: right;
}

.seller-chat-input-row {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: var(--bg-3, #12121f);
}

.seller-chat-input-row textarea {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 10px 16px;
  color: var(--text-1, #fff);
  font-size: 14px;
  font-family: inherit;
  /* The global `textarea { resize: vertical !important; min-height: 100px !important }`
     rule paints the drag grip into this rounded pill's corner; the chat input
     resizes itself as you type, so pin both back. */
  resize: none !important;
  min-height: 44px !important;
  max-height: 120px;
  line-height: 1.45;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.seller-chat-input-row textarea::placeholder {
  color: rgba(255,255,255,0.38);
}

.seller-chat-input-row textarea:focus {
  outline: none;
  background: rgba(255,255,255,0.08);
  border-color: var(--accent, #3b7dff);
  box-shadow: 0 0 0 3px var(--accent-muted, rgba(59,125,255,0.15));
}

.seller-chat-input-row button {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--accent, #3b7dff);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: flex-end;
  box-shadow: 0 4px 14px var(--accent-glow, rgba(59,125,255,0.35));
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}

.seller-chat-input-row button:hover {
  background: var(--accent-2, #5a94ff);
}

.seller-chat-input-row button:active {
  transform: scale(0.94);
}

.seller-chat-input-row button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== v5.2.13: LOGIN NOTIFICATION BANNER ===== */
.login-notification-banner {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999999;
  animation: slideDown 0.4s var(--ease-bounce);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.login-notification-content {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 16px;
  padding: 16px 20px;
  color: white;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.5), 0 0 60px rgba(139, 92, 246, 0.3);
  max-width: 90vw;
  min-width: 300px;
}

.login-notification-icon {
  font-size: 28px;
  animation: bellShake 0.5s ease-in-out 0.5s;
}

@keyframes bellShake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-15deg); }
  50% { transform: rotate(15deg); }
  75% { transform: rotate(-10deg); }
}

.login-notification-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.login-notification-text strong {
  font-size: 16px;
  font-weight: 700;
}

.login-notification-text span {
  font-size: 14px;
  opacity: 0.9;
}

.login-notification-close {
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}

.login-notification-close:hover {
  background: rgba(255,255,255,0.4);
}

@media (max-width: 600px) {
  .login-notification-banner {
    top: 60px;
    width: calc(100% - 20px);
    left: 10px;
    right: 10px;
    transform: none;
  }
  
  .login-notification-content {
    padding: 12px 16px;
    gap: 10px;
  }
  
  .login-notification-icon {
    font-size: 24px;
  }
  
  .login-notification-text strong {
    font-size: 14px;
  }
  
  .login-notification-text span {
    font-size: 12px;
  }
}


/* ============================================================================= */
/* v5.2.60: AI Import Preview Styles                                             */
/* ============================================================================= */

.ai-import-preview {
  background: var(--card, rgba(30, 34, 53, 0.95));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  padding: 16px;
  margin-top: 8px;
}

.ai-import-preview h4 {
  color: var(--ink, #f0f4ff);
  margin-bottom: 12px;
}

.ai-import-result {
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 12px;
  padding: 16px;
}

.ai-import-result h4 {
  color: #22c55e;
}

.ai-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

body.theme-light .ai-import-preview {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.08);
}

body.theme-light .ai-import-preview h4 {
  color: #1e293b;
}

/* =============================================================================
   v5.2.64: CONSOLIDATED MOBILE + UI FIXES
   ============================================================================= */

/* TOP-BAR MOBILE FIX - Keep right controls visible (v2.4.9: do NOT shrink/clip) */
@media (max-width: 640px) {
  .top-bar {
    padding: 8px 10px;
    gap: 8px;
    border-radius: 16px;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .top-right,
  .top-bar-right {
    gap: 6px !important;
    flex-shrink: 0 !important;
    min-width: auto !important;
    overflow: visible !important;
  }
  
  .logo {
    font-size: 12px;
    letter-spacing: 0.18em;
    flex-shrink: 0;
  }
  
  /* Hide home text on mobile, show icon only */
  .btn-home-link .home-text {
    display: none;
  }
  .btn-home-link {
    padding: 6px 10px;
    min-width: 36px;
  }
  
  /* Compact lang switch */
  .lang-switch {
    gap: 2px;
  }
  .lang-btn {
    padding: 4px 6px;
    font-size: 10px;
    min-width: 32px;
  }
  
  /* Logout icon only on mobile */
  .btn-logout .logout-text {
    display: none;
  }
  .btn-logout {
    padding: 6px 10px;
    min-width: 36px;
  }
}

/* REMEMBER DEVICE - Toggle Switch Style */
.remember-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  user-select: none;
}

.remember-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 42px;
  height: 24px;
  min-width: 42px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1.5px solid rgba(120, 160, 255, 0.35);
  background: rgba(30, 35, 45, 0.9);
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.remember-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  transition: transform 0.2s ease, background 0.2s ease;
}

.remember-row input[type="checkbox"]:checked {
  background: var(--accent-2, #5078ff);
  border-color: var(--accent-2, #5078ff);
}

.remember-row input[type="checkbox"]:checked::after {
  transform: translateX(18px);
  background: #fff;
}

.remember-row input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(80, 120, 255, 0.3);
}

/* CONSENT CHECKBOX - Compact & Aligned */
.consent-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  font-size: 13px;
  line-height: 1.5;
}
.terms-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.5;
}

/* Hide native checkbox inside .consent-check — custom .checkmark is used instead */
.consent-check input[type="checkbox"] {
  display: none !important;
}
.terms-checkbox-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: 4px;
  border: 1.5px solid rgba(120, 160, 255, 0.4);
  background: rgba(20, 25, 35, 0.9);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.consent-row input[type="checkbox"]:checked,
.terms-checkbox-row input[type="checkbox"]:checked {
  background: var(--accent-2, #5078ff);
  border-color: var(--accent-2, #5078ff);
}

.consent-row input[type="checkbox"]:checked::after,
.terms-checkbox-row input[type="checkbox"]:checked::after {
  content: "✓";
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

/* LIGHT THEME TOKENS */
body.theme-light {
  --bg-page: #F6F7F9;
  --bg-surface: #FFFFFF;
  --bg-card: #FFFFFF;
  --text-primary: #0B1220;
  --text-secondary: #5B6472;
  --text-muted: #8A919C;
  --border-light: #E5E7EB;
  --border-medium: #D1D5DB;
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.08);
}

body.theme-light .top-bar {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

body.theme-light .top-bar.scrolled {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

body.theme-light .logo {
  color: var(--text-primary);
}

body.theme-light .remember-row {
  color: var(--text-primary);
}

body.theme-light .remember-row input[type="checkbox"] {
  background: #EBEEF2;
  border-color: var(--border-medium);
}

body.theme-light .remember-row input[type="checkbox"]::after {
  background: #9CA3AF;
}

body.theme-light .remember-row input[type="checkbox"]:checked::after {
  background: #fff;
}

body.theme-light .consent-row input[type="checkbox"],
body.theme-light .terms-checkbox-row input[type="checkbox"] {
  background: #EBEEF2;
  border-color: var(--border-medium);
}

body.theme-light .btn-home-link {
  background: rgba(240, 242, 245, 0.95);
  border-color: var(--border-light);
  color: var(--text-primary);
}

body.theme-light .btn-home-link:hover {
  background: rgba(230, 232, 235, 0.98);
}

body.theme-light .lang-btn {
  background: rgba(240, 242, 245, 0.9);
  border-color: var(--border-light);
  color: var(--text-secondary);
}

body.theme-light .lang-btn.active {
  background: var(--accent-2, #5078ff);
  color: #fff;
}

/* v5.2.64: Light theme toggle switch */
body.theme-light .remember-row {
  color: var(--ink, #0B1220);
}

body.theme-light .remember-row input[type="checkbox"] {
  background: #EBEEF2;
  border-color: var(--stroke-2, #D1D5DB);
}

body.theme-light .remember-row input[type="checkbox"]::after {
  background: #9CA3AF;
}

body.theme-light .remember-row input[type="checkbox"]:checked {
  background: var(--accent-2, #5078ff);
  border-color: var(--accent-2, #5078ff);
}

body.theme-light .remember-row input[type="checkbox"]:checked::after {
  background: #fff;
}

/* v5.2.64: Light theme consent checkbox */
body.theme-light .consent-row,
body.theme-light .terms-checkbox-row {
  color: var(--ink, #0B1220);
}

body.theme-light .consent-row input[type="checkbox"],
body.theme-light .terms-checkbox-row input[type="checkbox"] {
  background: #EBEEF2;
  border-color: var(--stroke-2, #D1D5DB);
}

body.theme-light .consent-row input[type="checkbox"]:checked,
body.theme-light .terms-checkbox-row input[type="checkbox"]:checked {
  background: var(--accent-2, #5078ff);
  border-color: var(--accent-2, #5078ff);
}

/* ===============================
   v5.2.65 STYLE AUDIT PATCHES (FINAL OVERRIDES)
   Ці правила залишаємо в кінці файлу, щоб перекрити legacy дублікати.
================================ */

/* Персонал / Створення акаунта: 2 колонки на "комп" (включно з iPad),
   1 колонка на мобайлі */
#accountForm.grid-form .form-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 18px !important;
  align-items: start !important;
}

@media (max-width: 768px) {
  /* On mobile the two-column rows stack, but a stray `.form-row { margin-bottom }`
     from the generic mobile rules stacked ON TOP of the container's flex gap —
     giving ~22px between pairs vs ~10px inside a pair ("2 inputs, big gap, 2
     inputs"). Kill the margin and use one uniform gap everywhere so every field
     is evenly spaced. */
  #accountForm.grid-form {
    gap: 12px !important;
  }
  #accountForm.grid-form .form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
  }
}

/* v2.4.10: When one label in a form-row is hidden (e.g. network for non-superadmin),
   the remaining label should span full width instead of leaving an empty column */
#accountForm.grid-form .form-row > label[style*="display: none"] + label,
#accountForm.grid-form .form-row > label[style*="display:none"] + label {
  grid-column: 1 / -1 !important;
}

/* Password eye icon positioning */
#accountForm .password-wrap {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
}

#accountForm .password-wrap input {
  padding-right: 46px !important;
}

#accountForm .toggle-password {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 28px !important;
  width: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: var(--text) !important;
}
#accountForm .toggle-password svg {
  width: 18px !important;
  height: 18px !important;
}
@media (max-width: 768px) {
  #accountForm .toggle-password {
    height: 20px !important;
    width: 20px !important;
  }
  #accountForm .toggle-password svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }
}

/* Specialization selector (account form, seller role) */
.specialization-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.spec-btn {
  padding: 12px 16px;
  background: var(--card-bg, #1e1e3a);
  border: 2px solid var(--border-color, #333);
  border-radius: 8px;
  color: var(--text-color, #fff);
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  transition: all 0.2s;
}

.spec-btn:hover {
  border-color: var(--primary, #4285f4);
}

.spec-btn.active {
  border-color: var(--primary, #4285f4);
  background: rgba(66, 133, 244, 0.15);
}

/* v5.3.0: Spec button light theme */
body.theme-light .spec-btn {
  background: #f3f4f6 !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #1a1a2e !important;
}
body.theme-light .spec-btn:hover {
  border-color: #3b82f6 !important;
  background: rgba(59, 130, 246, 0.06) !important;
}
body.theme-light .spec-btn.active {
  border-color: #3b82f6 !important;
  background: rgba(59, 130, 246, 0.1) !important;
  color: #3b82f6 !important;
}

/* AI quick tools: make the output appear and look like a panel */
#aiChatOutput.ai-output-visible {
  display: block !important;
}

#aiChatOutput {
  margin-top: 14px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: var(--text) !important;
  white-space: pre-wrap !important;
  line-height: 1.45 !important;
}

/* Split layout: prevent overlap by allowing shrink */
.admin-tools-split {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
}

.admin-tools-split > * {
  min-width: 0 !important;
}

@media (max-width: 980px) {
  .admin-tools-split {
    grid-template-columns: 1fr !important;
  }
  .admin-tools-divider {
    display: none !important;
  }
}


/* =====================
   FINAL OVERRIDES (v5.2.66)
   Fix: green glow/overflow bleeding outside rounded containers.
   ===================== */

/* Prevent box-shadow/glow from "leaking" outside rounded cards */
.card,
.panel,
.widget,
.status-item,
.kpi-card,
.table-wrap,
.modal,
.dropdown,
.toast,
.sidebar,
.topbar,
.section,
.block {
  overflow: hidden;
}

/* Make progress visuals consistent with blue theme */
.progress-fill {
  background: linear-gradient(90deg, var(--accent-500), var(--accent-300)) !important;
}

/* Kill the neon-green halo that was bleeding outside bounds */
.status-indicator.online,
.ws-status-indicator.connected {
  box-shadow: none !important;
}

/* If any legacy green gradients remain, clamp them to blue */
[class*="gradient"],
[class*="glow"] {
  --_safe-accent: var(--accent-500);
}

/* =============================================================================
   v5.2.66: USER GREETING + MOBILE FIXES
   ============================================================================= */

/* User greeting in header */
.current-user-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  /* v5.2.72: Remove overflow:hidden to prevent badge clipping */
  flex-shrink: 1;
  margin: 0 auto;
}

.current-user-label .greeting-text {
  color: var(--muted);
  font-weight: 400;
}

.current-user-label .user-name {
  font-weight: 600;
  color: var(--ink);
  /* v5.2.72: Only username clips, not the whole container */
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.current-user-label .role-badge {
  display: inline-flex;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--accent-muted, rgba(59, 125, 255, 0.15));
  color: var(--accent, #3b7dff);
  /* v5.2.72: Badge never clips */
  flex-shrink: 0;
}

/* Mobile: compact greeting */
@media (max-width: 480px) {
  .current-user-label {
    max-width: 100px;
    font-size: 11px;
  }
  .current-user-label .greeting-text {
    display: none;
  }
  .current-user-label .role-badge {
    display: none;
  }
  .account-switcher-wrapper {
    padding: 3px 10px 3px 4px;
  }
  .accsw-inline-avatar {
    width: 26px;
    height: 26px;
    font-size: 11px;
    margin-right: 6px;
  }
}

/* =============================================================================
   v6.1.0: Account Switcher Dropdown
   ============================================================================= */

/* Inline avatar circle inside the wrapper pill */
.accsw-inline-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent, #3b7dff), #6c5ce7);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.account-switcher-wrapper.accsw-hidden {
  display: none !important;
}
.account-switcher-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 14px 4px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  flex-shrink: 0;
}
.account-switcher-wrapper:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 0 0 2px rgba(59,125,255,0.15);
}
.account-switcher-wrapper:active {
  background: rgba(255,255,255,0.14);
  border-color: rgba(59,125,255,0.4);
}
.account-switcher-wrapper.accsw-open {
  background: rgba(59,125,255,0.10);
  border-color: rgba(59,125,255,0.3);
  box-shadow: 0 0 0 2px rgba(59,125,255,0.15);
}
.accsw-chevron {
  font-size: 18px;
  color: var(--accent, #3b7dff);
  margin-left: 6px;
  transition: transform 0.2s ease, color 0.15s ease;
  flex-shrink: 0;
  line-height: 1;
}
.account-switcher-wrapper:hover .accsw-chevron {
  color: var(--accent, #3b7dff);
  filter: brightness(1.2);
}
.account-switcher-wrapper.accsw-open .accsw-chevron {
  transform: rotate(180deg);
}

/* v6.4.0: display:none/block — reliable cross-browser, no stuck-transition risk */
.account-switcher-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 12px;
  width: 300px;
  max-height: 400px;
  background: var(--bg-secondary, #18181b);
  border: 1px solid var(--stroke-2, rgba(255,255,255,0.1));
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
  z-index: 201;
  display: none;
  overflow: hidden;
}
.account-switcher-dropdown.accsw-open {
  display: block;
}

.accsw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--stroke-2, rgba(255,255,255,0.08));
}
.accsw-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #f8f8fc);
  letter-spacing: 0.02em;
}

.accsw-list {
  overflow-y: auto;
  max-height: 280px;
}
.accsw-list::-webkit-scrollbar { width: 4px; }
.accsw-list::-webkit-scrollbar-track { background: transparent; }
.accsw-list::-webkit-scrollbar-thumb { background: var(--stroke-2, rgba(255,255,255,0.12)); border-radius: 4px; }

.accsw-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
  border-left: 3px solid transparent;
}
.accsw-item:hover {
  background: rgba(255,255,255,0.05);
}
.accsw-item.accsw-active {
  border-left-color: var(--accent, #3b7dff);
  background: rgba(59,125,255,0.06);
}

.accsw-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-muted, rgba(59,125,255,0.15));
  color: var(--accent, #3b7dff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.accsw-active .accsw-avatar {
  background: var(--accent, #3b7dff);
  color: #fff;
}

.accsw-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.accsw-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #f8f8fc);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.accsw-meta {
  font-size: 11px;
  color: var(--muted, #888);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accsw-delete {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--muted, #888);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: color 0.15s ease, background 0.15s ease;
  padding: 0;
}
.accsw-delete:hover {
  color: var(--danger, #ef4444);
  background: rgba(239,68,68,0.1);
}
/* The × was drawing at the icon's own size — bigger than the avatar next to it,
   and the loudest thing in a list whose job is switching accounts, not deleting
   them. Halved. !important because the global button reset sizes `button svg`
   with one of its own. */
/* The class is repeated to out-specify the global button reset, which sizes
   buttons through a five-deep :not() chain carrying its own !important. One
   class cannot beat that; three can. Measured: the box was 44×40 with the
   single-class rule already in place. */
html body .accsw-delete.accsw-delete.accsw-delete {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  padding: 0 !important;
  border-radius: 5px !important;
}
html body .accsw-delete.accsw-delete.accsw-delete svg,
html body .accsw-delete.accsw-delete.accsw-delete .mh-i,
html body .accsw-delete.accsw-delete.accsw-delete .mh-i svg {
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  min-height: 11px !important;
  max-width: 11px !important;
  max-height: 11px !important;
  font-size: 11px !important;
  --mh-i-size: 11px !important;
  stroke-width: 2.2;
  flex: 0 0 auto !important;
}

.accsw-footer {
  border-top: 1px solid var(--stroke-2, rgba(255,255,255,0.08));
  padding: 8px;
}
.accsw-add-btn {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  background: transparent;
  border: 1px dashed var(--stroke-2, rgba(255,255,255,0.15));
  color: var(--muted, #888);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.accsw-add-btn:hover {
  border-color: var(--accent, #3b7dff);
  color: var(--accent, #3b7dff);
  background: rgba(59,125,255,0.06);
}

/* v11.0.0: add-account modal — keep the current workspace visible behind a
   soft blur instead of throwing the whole app onto a second login screen. */
.mh-account-add-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(700px 460px at 50% 14%, rgba(59,125,255,.12), transparent 68%), rgba(4, 6, 12, .72);
  backdrop-filter: blur(16px) saturate(.8);
  -webkit-backdrop-filter: blur(16px) saturate(.8);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .32s;
}
.mh-account-add-overlay.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}
.mh-account-add-modal {
  position: relative;

  width: min(100%, 420px);
  max-height: min(760px, calc(100dvh - 40px));
  overflow: auto;
  opacity: 0;
  transform: translateY(14px) scale(.97);
  transform-origin: center;
  transition: opacity .22s ease, transform .34s cubic-bezier(.16,1,.3,1);
}
.mh-account-add-overlay.is-open .mh-account-add-modal { opacity: 1; transform: none; }

/* v11.2.0: the card, the fields and the button are painted by .auth-card and
   .vertical-form — the login screen's own rules — so the two screens cannot
   drift apart. Only what the login screen has no equivalent for lives here.
   The brand mark is the exception: its rules are scoped to
   `body.auth-visible #authSection` and carry !important to clear style.css's
   display resets, so the modal needs its own copy at the same weight. */
/* .auth-card::before reserves room for the login screen's language and theme
   controls; the modal has none, so the spacer is only a hole. Its own
   `padding-top: 0 !important` sits later in the file than this block, so the
   replacement padding needs the extra element selector to win. */
.mh-account-add-modal::before { display: none !important; }
html .mh-account-add-modal { padding-top: 26px !important; }

html .mh-account-add-modal .auth-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 2px 0 10px !important;
}
html .mh-account-add-modal .auth-brand-logo {
  display: block !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
}
html .mh-account-add-modal .auth-brand-name {
  color: var(--ink) !important;
  font-size: 20px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
}

.mh-account-add-note {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.mh-account-add-close {
  /* style.css carries absolute-offset resets that leave close buttons on a
     relative box — the offsets then shift them down and to the left instead of
     into the corner. Same weight is required to land in the corner. */
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 2;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer;
}
.mh-account-add-close:hover {
  background: var(--bg-2) !important;
  color: var(--ink) !important;
}

.mh-account-add-status:empty { display: none; }
.mh-account-add-status {
  min-height: 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
}
.mh-account-add-status.is-error { color: #ff9b9b; }
.mh-account-add-status.is-loading { color: #91b5ff; }

.mh-account-add-switch {
  margin-top: 20px;
  text-align: center;
}

/* The login screen carries this gap as an inline style on its own button. */
.mh-account-code-submit { margin-top: 18px !important; }
.mh-account-code-extra.is-on + .mh-account-code-status + .mh-account-code-submit { margin-top: 4px !important; }

/* Only a code with nobody attached needs these two, and only after the server
   says so. `hidden` would not survive style.css's display resets. */
.mh-account-code-extra { display: none !important; }
.mh-account-code-extra.is-on {
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
  text-align: left;
}

body.mh-account-add-open { overflow: hidden !important; }

@media (max-width: 560px) {
  .mh-account-add-overlay { padding: 12px; align-items: center; }
  .mh-account-add-modal { width: min(100%, 410px); }
}

@media (prefers-reduced-motion: reduce) {
  .mh-account-add-overlay,
  .mh-account-add-modal { transition: none !important; transform: none !important; }
}

.accsw-empty {
  padding: 20px 16px;
  text-align: center;
  color: var(--muted, #888);
  font-size: 12px;
}

/* Light theme */
body.theme-light .account-switcher-wrapper {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
}
body.theme-light .account-switcher-wrapper:hover {
  background: rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.16);
}
body.theme-light .account-switcher-wrapper:active {
  background: rgba(0,0,0,0.10);
}
body.theme-light .account-switcher-wrapper.accsw-open {
  background: rgba(59,125,255,0.08);
  border-color: rgba(59,125,255,0.25);
}
body.theme-light .account-switcher-dropdown {
  background: #fff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
}
body.theme-light .accsw-item:hover {
  background: rgba(0,0,0,0.04);
}
body.theme-light .accsw-item.accsw-active {
  background: rgba(59,125,255,0.06);
}

/* Mobile */
@media (max-width: 480px) {
  .account-switcher-dropdown {
    position: fixed;
    top: 68px;
    left: 12px;
    right: 12px;
    width: auto;
    transform: translateY(-8px);
  }
  .account-switcher-dropdown.accsw-open {
    transform: translateY(0);
  }
}

/* =============================================================================
   v6.2.1: Login-screen account picker — compact dropdown in topbar
   Reuses accsw-* dropdown classes from the post-login switcher.
   ============================================================================= */
.login-account-picker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  overflow: visible;
}
.login-account-picker.hidden {
  display: none !important;
}
.login-accsw-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
  white-space: nowrap;
  max-width: 220px;
}
.login-accsw-trigger:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 0 0 2px rgba(59,125,255,0.15);
}
.login-accsw-trigger.accsw-open {
  background: rgba(59,125,255,0.10);
  border-color: rgba(59,125,255,0.3);
}
.login-accsw-trigger-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #e0e0e0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
/* Dropdown positioned relative to .login-account-picker */
.login-accsw-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
}
/* Light theme overrides */
body.theme-light .login-accsw-trigger {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
}
body.theme-light .login-accsw-trigger:hover {
  background: rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.16);
}
body.theme-light .login-accsw-trigger.accsw-open {
  background: rgba(59,125,255,0.08);
  border-color: rgba(59,125,255,0.25);
}
body.theme-light .login-accsw-trigger-name {
  color: #1e2332 !important;
}
/* Mobile: trigger = avatar + chevron only, no text */
@media (max-width: 512px) {
  .login-accsw-trigger {
    padding: 3px 8px 3px 4px;
    gap: 4px;
  }
  .login-accsw-trigger-name {
    display: none !important;
  }
  .login-accsw-dropdown {
    position: fixed;
    top: 68px;
    left: 12px;
    right: 12px;
    width: auto;
    transform: none;
  }
}

/* =============================================================================
   v5.2.66: MOBILE ACCOUNTS LIST FIX
   ============================================================================= */

/* Global overflow protection */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}

.app-wrapper,
.main-content,
#adminPanel,
#accountsList,
.accounts-list {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Accounts list mobile */
@media (max-width: 768px) {
  .accounts-list {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 0 8px;
  }
  
  .account-card {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 12px !important;
    margin: 0 !important;
  }
  
  .account-card-buttons {
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }
}

/* Empty state always visible */
.empty-state-cta {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 16px;
}

/* iOS safe areas */
@supports (padding: env(safe-area-inset-top)) {
  .top-bar {
    padding-top: env(safe-area-inset-top);
  }
  .mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* =============================================================================
   v5.2.67: iPAD / TABLET FIX FOR ANALYTICS FILTERS
   ============================================================================= */

/* iPad portrait: ensure filter buttons don't overflow */
@media (min-width: 768px) and (max-width: 1024px) {
  .analytics-filters,
  .filter-bar,
  .filters-row,
  .kpi-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
  }
  
  .analytics-filters button,
  .filter-bar button,
  .filters-row button {
    min-width: auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 8px 16px !important;
  }
  
  .analytics-filters select,
  .filter-bar select,
  .filters-row select {
    min-width: 120px !important;
    max-width: 180px !important;
  }
  
  /* Prevent text overflow in buttons */
  .btn, button {
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* Ensure "Застосувати" button never clips */
.analytics-filters .btn-primary,
.filter-bar .btn-primary,
[data-i18n="analytics.apply"] {
  white-space: nowrap !important;
  min-width: fit-content !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* =============================================================================
   v5.2.67: NETWORKS MANAGEMENT UI
   ============================================================================= */

.networks-management-block {
  margin-top: 24px;
}

.network-add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.network-add-row input {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
}

.networks-table {
  width: 100%;
  border-collapse: collapse;
}

.networks-table th,
.networks-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.networks-table th {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-raised);
}

.networks-table td {
  font-size: 14px;
}

.networks-table tr:hover {
  background: var(--surface-hover);
}

.status-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.status-active {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.status-badge.status-inactive {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.btn-delete-network {
  opacity: 0.6;
  transition: opacity 0.15s;
}

.btn-delete-network:hover {
  opacity: 1;
}

/* Hide for non-superadmin */
.superadmin-only-block.hidden {
  display: none !important;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .network-add-row {
    flex-direction: column;
  }
  
  .network-add-row input {
    max-width: 100%;
  }
  
  .networks-table th:nth-child(4),
  .networks-table td:nth-child(4) {
    display: none;
  }
}

/* ==========================================================================
   v5.2.70 COMPREHENSIVE UI FIX PATCH
   Addresses: Header alignment, Lang switch consistency, Tabs arrows, 
              Account form gaps, Account card design
   ========================================================================== */

/* ===== ISSUE 1 & 2: Header and Language Switch Consistency ===== */

/* Force consistent header height and alignment */
.top-bar {
  min-height: 52px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 16px !important;
  gap: 12px !important;
}

/* Ensure top-right controls are properly centered */
.top-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  height: auto !important;
}

/* Unified language switch styling (matches landing) */
.lang-switch {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px !important;
  border-radius: 20px !important;
  background: rgba(25, 25, 25, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  height: auto !important;
}

body.theme-light .lang-switch {
  background: rgba(240, 240, 240, 0.9) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Unified language button styling */
.lang-btn {
  border: none !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
  border-radius: 18px !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  line-height: 1 !important;
  min-height: unset !important;
  height: auto !important;
}

body.theme-light .lang-btn {
  color: rgba(0, 0, 0, 0.55) !important;
}

.lang-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08) !important;
}

body.theme-light .lang-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.06) !important;
}

.lang-btn.active {
  background: var(--accent, #3b82f6) !important;
  color: #fff !important;
}

/* Unified theme toggle button */
.theme-toggle-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  background: rgba(25, 25, 25, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-size: 16px !important;
  padding: 0 !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

body.theme-light .theme-toggle-btn {
  background: rgba(240, 240, 240, 0.9) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

body.theme-light .theme-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* ===== ISSUE 3: Admin Tabs Arrows Fix ===== */

/* Ensure wrapper is positioned correctly for absolute arrows */
.admin-tabs-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
  position: relative !important;
}

/* Arrow buttons - proper positioning and visibility */
.admin-tabs-arrow,
.admin-tabs-arrow-left,
.admin-tabs-arrow-right,
#tabsArrowLeft,
#tabsArrowRight {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  z-index: 5 !important;
}

.admin-tabs-arrow:hover,
.admin-tabs-arrow-left:hover,
.admin-tabs-arrow-right:hover,
#tabsArrowLeft:hover,
#tabsArrowRight:hover {
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #3b82f6 !important;
}

.admin-tabs-arrow:disabled,
#tabsArrowLeft:disabled,
#tabsArrowRight:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

body.theme-light .admin-tabs-arrow,
body.theme-light #tabsArrowLeft,
body.theme-light #tabsArrowRight {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: rgba(0, 0, 0, 0.6) !important;
}

body.theme-light .admin-tabs-arrow:hover,
body.theme-light #tabsArrowLeft:hover,
body.theme-light #tabsArrowRight:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #3b82f6 !important;
}

/* Hide arrows on mobile */
@media (max-width: 768px) {
  .admin-tabs-arrow,
  .admin-tabs-arrow-left,
  .admin-tabs-arrow-right,
  #tabsArrowLeft,
  #tabsArrowRight {
    display: none !important;
  }
}

/* ===== ISSUE 4: Account Form Gaps Fix ===== */

/* Grid form row normalization */
#accountForm.grid-form .form-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 16px !important;
}

/* When a label is hidden, make the visible one span full width */
#accountForm.grid-form .form-row > label.hidden-field.is-hidden,
#accountForm.grid-form .form-row > label.hidden-field.gone,
#accountForm.grid-form .form-row > label[style*="display: none"],
#accountForm.grid-form .form-row > label[style*="display:none"] {
  display: none !important;
}

/* Auto-expand remaining label when sibling is hidden */
#accountForm.grid-form .form-row:has(> label.is-hidden) > label:not(.is-hidden):not(.gone),
#accountForm.grid-form .form-row:has(> label.gone) > label:not(.is-hidden):not(.gone),
#accountForm.grid-form .form-row:has(> label[style*="display: none"]) > label:not([style*="display: none"]),
#accountForm.grid-form .form-row:has(> label[style*="display:none"]) > label:not([style*="display:none"]) {
  grid-column: span 2 !important;
}

/* Collapse rows with all hidden children */
#accountForm.grid-form .form-row:has(> label:not(.is-hidden):not(.gone):not([style*="display: none"]):not([style*="display:none"])) {
  /* Has at least one visible child - normal display */
}

#accountForm.grid-form .form-row:not(:has(> label:not(.is-hidden):not(.gone):not([style*="display: none"]):not([style*="display:none"]))) {
  display: none !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile: single column */
@media (max-width: 768px) {
  #accountForm.grid-form .form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  #accountForm.grid-form .form-row > label {
    width: 100% !important;
  }
}

/* ===== ISSUE 5: Account Card Design Fix ===== */

/* Stable account card layout */
.account-card {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
  min-height: 60px !important;
}

.account-card:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body.theme-light .account-card {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light .account-card:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

/* Account card content area */
.account-card .account-main-line,
.account-card .account-content {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Role badge with proper sizing and ellipsis */
.account-role-badge,
.role-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  max-width: 140px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  flex-shrink: 0 !important;
}

/* Account meta chips */
.account-card .account-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 4px !important;
}

.account-card .account-meta .chip,
.account-card .account-meta span {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  white-space: nowrap !important;
}

body.theme-light .account-card .account-meta .chip,
body.theme-light .account-card .account-meta span {
  background: rgba(0, 0, 0, 0.04) !important;
  color: rgba(0, 0, 0, 0.6) !important;
}

/* Account actions (right side) */
.account-card .account-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

/* Action buttons in cards */
.account-card .account-info-btn,
.account-card .account-remove-btn,
.account-card .account-restore-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.account-card .account-info-btn:hover,
.account-card .account-remove-btn:hover,
.account-card .account-restore-btn:hover {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
}

/* Responsive adjustments for account cards */
@media (max-width: 640px) {
  .account-card {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .account-card .account-actions {
    width: 100% !important;
    justify-content: flex-end !important;
  }
  
  .account-role-badge,
  .role-badge {
    max-width: 100% !important;
  }
}

/* ===== END OF v5.2.70 PATCH ===== */

/* ========================================
   v5.2.70: SELLER AI SELF-ANALYTICS
   ======================================== */

/* AI Analytics Card */
#sellerAiAnalyticsCard {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.05)) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

#sellerAiAnalyticsCard .card-head {
  border-bottom: 1px solid rgba(59, 130, 246, 0.15) !important;
}

#sellerAiAnalyticsCard .card-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #60a5fa !important;
}

/* Period select dropdown */
.ai-period-select {
  padding: 4px 8px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: inherit !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

body.theme-light .ai-period-select {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Loading state */
.ai-analytics-loading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 32px 16px !important;
  gap: 12px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

body.theme-light .ai-analytics-loading {
  color: rgba(0, 0, 0, 0.4) !important;
}

/* AI Score Header */
.ai-score-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  padding: 20px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 12px !important;
  margin-bottom: 16px !important;
}

.ai-score-circle {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
  color: white !important;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3) !important;
}

.ai-score-circle .score-label {
  font-size: 10px !important;
  font-weight: 500 !important;
  opacity: 0.8 !important;
  margin-top: 2px !important;
}

.ai-score-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.ai-score-meta .sessions-count {
  font-size: 14px !important;
  font-weight: 600 !important;
}

.ai-score-meta .analyzed-count {
  font-size: 12px !important;
  opacity: 0.6 !important;
}

/* AI Sections Grid */
.ai-sections-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 16px !important;
}

/* AI Section Block */
.ai-section-block {
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.theme-light .ai-section-block {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

.ai-section-block h4 {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Mistakes list */
.ai-mistakes-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.ai-mistake-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px !important;
  background: rgba(239, 68, 68, 0.08) !important;
  border-radius: 8px !important;
  border-left: 3px solid #ef4444 !important;
}

.ai-mistake-item .mistake-count {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}

.ai-mistake-item .mistake-text {
  font-size: 13px !important;
  flex: 1 !important;
}

.ai-mistake-item .mistake-fix {
  font-size: 11px !important;
  opacity: 0.7 !important;
  margin-top: 4px !important;
}

/* Wins list */
.ai-wins-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.ai-win-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: rgba(34, 197, 94, 0.08) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  border-left: 3px solid #22c55e !important;
}

.ai-win-item::before {
  content: "✓" !important;
  color: #22c55e !important;
  font-weight: 600 !important;
}

/* Recommendations */
.ai-recommendations-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.ai-recommendation-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 10px !important;
  background: rgba(59, 130, 246, 0.08) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  border-left: 3px solid #3b82f6 !important;
}

.ai-recommendation-item::before {
  content: "💡" !important;
}

.ai-recommendation-item .rec-area {
  font-weight: 600 !important;
  color: #60a5fa !important;
}

.ai-recommendation-item .rec-score {
  font-size: 11px !important;
  opacity: 0.7 !important;
}

/* Section scores (horizontal bars) */
.ai-section-scores {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.ai-section-score-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.ai-section-score-item .section-name {
  flex: 0 0 100px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ai-section-score-item .section-bar {
  flex: 1 !important;
  height: 6px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}

body.theme-light .ai-section-score-item .section-bar {
  background: rgba(0, 0, 0, 0.08) !important;
}

.ai-section-score-item .section-bar-fill {
  height: 100% !important;
  border-radius: 3px !important;
  background: linear-gradient(90deg, #3b82f6, #22c55e) !important;
  transition: width 0.3s ease !important;
}

.ai-section-score-item .section-score-val {
  flex: 0 0 40px !important;
  text-align: right !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Empty state */
.ai-empty-state {
  text-align: center !important;
  padding: 32px 16px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

.ai-empty-state .empty-icon {
  font-size: 48px !important;
  margin-bottom: 12px !important;
}

.ai-empty-state p {
  font-size: 14px !important;
  margin: 0 !important;
}

body.theme-light .ai-empty-state {
  color: rgba(0, 0, 0, 0.4) !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .ai-score-header {
    flex-direction: column !important;
    text-align: center !important;
  }
  
  .ai-sections-grid {
    grid-template-columns: 1fr !important;
  }
  
  .ai-section-score-item .section-name {
    flex: 0 0 80px !important;
    font-size: 11px !important;
  }
}

/* ========================================
   v5.2.70: DESIGN RULESET ENFORCEMENT
   Pixel-precise UI standards (Section H)
   ======================================== */

/* H1: Global spacing scale - enforced via !important */
/* Base: 8 / 12 / 16 / 24 / 32 px */

/* H2: Header standards - consistent across landing + app */
.top-bar {
  height: auto !important;
  min-height: 56px !important;
  max-height: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 16px !important;
  background: transparent !important;
  border-bottom: none !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.theme-light .top-bar {
  background: transparent !important;
  border-bottom-color: transparent !important;
}

/* H2: Header interactive elements - unified height 36-40px */
/* Lang: одна кругла кнопка (міняє текст ENG ↔ УКР) */
.top-bar .lang-switch.lang-single-wrap,
.top-bar .lang-switch {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
}

body.theme-light .top-bar .lang-switch {
  background: transparent !important;
  border: none !important;
}

.top-bar .lang-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

.top-bar .lang-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.top-bar .lang-btn.active {
  background: rgba(59, 130, 246, 0.9) !important;
  color: white !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
}

body.theme-light .top-bar .lang-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: rgba(0, 0, 0, 0.5) !important;
}

body.theme-light .top-bar .lang-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.08) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}

body.theme-light .top-bar .lang-btn.active {
  background: rgba(59, 130, 246, 0.9) !important;
  color: white !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
}

@media (max-width: 768px) {
  .top-bar .lang-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 10px !important;
    border-radius: 50% !important;
  }
}

.top-bar .theme-toggle-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

body.theme-light .top-bar .theme-toggle-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.top-bar .theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

body.theme-light .top-bar .theme-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* H2: top-right container alignment (top-bar-right = same as top-right for system look) */
.top-bar .top-right,
.top-bar .top-bar-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 36px !important;
}

/* H3: Primary buttons - height 40px desktop, 38px mobile */
.btn-primary {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 20px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover:not(:disabled) {
  filter: brightness(1.1) !important;
}

.btn-primary:active:not(:disabled) {
  transform: scale(0.98) !important;
}

.btn-primary:disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

/* H4: Inputs + selects - height 44px desktop, 42px mobile */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
select,
textarea {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: inherit !important;
  transition: border-color 0.2s ease !important;
}

body.theme-light input[type="text"],
body.theme-light input[type="email"],
body.theme-light input[type="password"],
body.theme-light input[type="number"],
body.theme-light input[type="tel"],
body.theme-light input[type="date"],
body.theme-light input[type="time"],
body.theme-light select,
body.theme-light textarea {
  border-color: rgba(0, 0, 0, 0.1) !important;
  background: rgba(0, 0, 0, 0.02) !important;
}

textarea {
  height: auto !important;
  min-height: 88px !important;
  padding: 12px 14px !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* H4: Labels */
label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

body.theme-light label {
  color: rgba(0, 0, 0, 0.6) !important;
}

/* H5: Tabs row standards */
.admin-tabs {
  height: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 12px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.admin-tabs::-webkit-scrollbar {
  display: none !important;
}

.admin-tab-btn {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important; /* v7.6.0: was 0 16px — fits 14 tabs in 1600-1920px container */
  font-size: 12.5px !important; /* v7.6.0: was 13px — slightly tighter for ultrawide fit */
  font-weight: 500 !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.admin-tab-btn.active {
  background: rgba(59, 130, 246, 0.9) !important;
  color: white !important;
}

/* H5: Sticky tabs - proper z-index and positioning */
.admin-tabs-container {
  position: sticky !important;
  top: 56px !important; /* Below header */
  z-index: 50 !important;
  background: inherit !important;
  padding: 8px 0 !important;
}

/* H6: Icon buttons - 36-40px hit area */
.admin-tabs-arrow,
.scroll-arrow,
.icon-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

body.theme-light .admin-tabs-arrow,
body.theme-light .scroll-arrow,
body.theme-light .icon-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.admin-tabs-arrow:hover,
.scroll-arrow:hover,
.icon-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

body.theme-light .admin-tabs-arrow:hover,
body.theme-light .scroll-arrow:hover,
body.theme-light .icon-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* H1: Card padding and border radius */
.card,
.admin-block {
  padding: 20px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.theme-light .card,
body.theme-light .admin-block {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* H7: Loading skeletons - prevent layout jump */
.loading-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: skeleton-shimmer 1.5s infinite !important;
  border-radius: 8px !important;
}

body.theme-light .loading-skeleton {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.04) 25%,
    rgba(0, 0, 0, 0.08) 50%,
    rgba(0, 0, 0, 0.04) 75%
  ) !important;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* H2: Responsive header adjustments */
@media (max-width: 1024px) {
  .top-bar {
    height: auto !important;
    min-height: 48px !important;
    max-height: none !important;
  }
  
  .admin-tabs-container {
    top: 48px !important;
  }
}

@media (max-width: 768px) {
  .top-bar {
    height: auto !important;
    min-height: 48px !important;
    max-height: none !important;
    padding: 0 12px !important;
  }
  
  .admin-tabs-container {
    top: 48px !important;
  }
  
  /* H3: Mobile button height */
  .btn-primary {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
  }
  
  /* H4: Mobile input height */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  input[type="time"],
  select {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 16px !important; /* Prevent iOS zoom */
  }
  
  /* H1: Mobile card padding */
  .card,
  .admin-block {
    padding: 16px !important;
  }
}

/* H2: Brand alignment */
.top-bar .brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 36px !important;
}

.top-bar .brand-logo {
  height: 28px !important;
  width: auto !important;
}

/* v5.4.4: unified brand-name */
.top-bar .brand-name {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
  text-transform: none !important;
  line-height: 1 !important;
}

/* End of Design Ruleset Enforcement */

/* ========================================
   v5.2.71: TABS ARROWS - SINGLE SOURCE OF TRUTH
   Fixes desktop "flying arrows" bug
   ======================================== */

/* Reset all previous arrow styles */
.admin-tabs-container {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Arrows - inline, not absolute */
.admin-tabs-arrow,
.admin-tabs-arrow-left,
.admin-tabs-arrow-right,
button.admin-tabs-arrow {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  cursor: pointer !important;
  transition: opacity 0.2s, background 0.2s !important;
  font-size: 14px !important;
}

.admin-tabs-arrow:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

.admin-tabs-arrow:disabled,
.admin-tabs-arrow[disabled] {
  opacity: 0.3 !important;
  cursor: default !important;
}

.admin-tabs-arrow svg {
  width: 16px !important;
  height: 16px !important;
}

/* Light theme */
body.theme-light .admin-tabs-arrow,
body.theme-light .admin-tabs-arrow-left,
body.theme-light .admin-tabs-arrow-right {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: rgba(0, 0, 0, 0.6) !important;
}

body.theme-light .admin-tabs-arrow:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* Hide arrows on mobile - tabs scroll naturally */
@media (max-width: 768px) {
  .admin-tabs-arrow,
  .admin-tabs-arrow-left,
  .admin-tabs-arrow-right {
    display: none !important;
  }
}

/* Tabs row - proper scrolling */
.admin-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.admin-tabs::-webkit-scrollbar {
  display: none !important;
}

/* End v5.2.71 tabs fix */

/* ========================================
   v5.2.72: COMPREHENSIVE UI/UX FIXES
   Based on audit document
   ======================================== */

/* A) TOP BAR: Role badge never clips */
.top-bar .current-user-label {
  overflow: visible !important;
  max-width: none !important;
}

.top-bar .current-user-label .user-name {
  max-width: 100px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.top-bar .current-user-label .role-badge {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* B) TABS: Arrows inline, no flying out */
.admin-tabs-container {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: visible !important;
  position: sticky !important;
  top: 56px !important;
  z-index: 50 !important;
  background: var(--card-bg, rgba(15, 23, 42, 0.95)) !important;
  padding: 8px 0 !important;
  backdrop-filter: blur(12px) !important;
}

.admin-tabs-scroll {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.admin-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  flex: 1 !important;
  padding: 4px !important;
}

/* Gradient fade edges for scroll indicator */
.admin-tabs-scroll::before,
.admin-tabs-scroll::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.admin-tabs-scroll::before {
  left: 0;
  background: linear-gradient(to right, var(--card-bg, rgba(15, 23, 42, 1)), transparent);
}

.admin-tabs-scroll::after {
  right: 0;
  background: linear-gradient(to left, var(--card-bg, rgba(15, 23, 42, 1)), transparent);
}

.admin-tabs-scroll.has-scroll-left::before {
  opacity: 1;
}

.admin-tabs-scroll.has-scroll-right::after {
  opacity: 1;
}

/* C) SPACING: Standardized scale (8/12/16/24) */
.form-group {
  margin-bottom: 16px !important;
}

.form-row {
  gap: 12px !important;
  margin-bottom: 12px !important;
}

/* Transitions for premium feel */
.admin-tab-btn {
  transition: all 0.15s ease !important;
}

.admin-tab-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-1px) !important;
}

.admin-tab-btn:active {
  transform: scale(0.98) !important;
}

.btn-primary {
  transition: all 0.15s ease !important;
}

.btn-primary:hover:not(:disabled) {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
}

.btn-primary:active:not(:disabled) {
  transform: scale(0.98) !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* D) ACCOUNT CARD: Stable layout */
.account-card {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 12px !important;
  padding: 16px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.account-card-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.account-card-name {
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.account-card-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: var(--muted) !important;
}

.account-card-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-top: 6px !important;
}

.account-card-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  align-items: flex-end !important;
}

body.theme-light .account-card {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* H) MODAL: Proper open/close states */
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1000 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

/* `.hidden` is the closed state, and its absence is the open one.
   -----------------------------------------------------------------------------
   This block used to demand `.active`/`.visible` to make an overlay visible, but
   almost nothing in the app sets those: 45 dialogs in index.html ship with
   `class="modal-overlay hidden"` and open by removing that one class, six more
   are built in JS as `className = 'modal-overlay'` and appended, and the seller
   requirements sheet toggles inline `display`. Every one of them was laid out,
   focusable, and at `opacity: 0` — the timesheet, QA review, reward, task,
   incident, API-key, connector and asset dialogs among them. Measured on the
   running page: removing `hidden` from #timesheetDetailModal left computed
   opacity "0".

   `.hidden` still wins wherever both are present: `.modal-overlay.hidden` below
   has the same specificity and comes last. `.active` / `.visible` /
   `[data-visible]` stay supported for the code that opens without ever touching
   `.hidden`. A close path must therefore ADD `.hidden` (or remove the node) —
   dropping `.active` alone no longer closes anything. */
.modal-overlay:not(.hidden),
.modal-overlay.active,
.modal-overlay.visible,
.modal-overlay[data-visible="true"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.modal-overlay.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.modal-content {
  background: var(--card-bg, #1e293b) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  max-width: 90vw !important;
  max-height: 85vh !important;
  overflow: auto !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  transform: scale(0.95) !important;
  transition: transform 0.2s ease !important;
}

.modal-overlay.active .modal-content,
.modal-overlay.visible .modal-content {
  transform: scale(1) !important;
}

body.theme-light .modal-content {
  background: white !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

/* I) TOP HAZE: Premium gradient overlay */
.main-wrapper::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 120px !important;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body.theme-light .main-wrapper::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), transparent) !important;
}

/* F) AI CHAT: Full width inside parent block (BUG D FIX) */
.ai-chat-wrapper,
.ai-chat-container {
  width: 100% !important;
  max-width: 100% !important;
  transition: none !important;
}

@media (max-width: 768px) {
  .ai-chat-wrapper,
  .ai-chat-container {
    width: 100% !important;
  }
}

/* G) Quick AI tools - hide by default */
.ai-quick-tools,
.quick-ai-actions,
#aiQuickTools {
  display: none !important;
}

/* End v5.2.72 UI/UX Fixes */

/* ========================================
   v5.2.72: SELLER AI COACHING BLOCK
   ======================================== */

.ai-coaching-loading,
.ai-coaching-error,
.ai-coaching-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  text-align: center;
  color: var(--muted);
}

.ai-coaching-loading .loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(59, 130, 246, 0.2);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.ai-coaching-error span,
.ai-coaching-empty span {
  font-size: 32px;
}

.ai-coaching-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
}

.coaching-score-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto;
  border: 4px solid currentColor;
}

.coaching-score-circle.good {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.coaching-score-circle.medium {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.coaching-score-circle.low {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.coaching-score-circle .score-value {
  font-size: 28px;
  font-weight: 700;
}

.coaching-score-circle .score-label {
  font-size: 11px;
  opacity: 0.7;
}

.coaching-section h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--ink);
}

.coaching-mistakes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.coaching-mistake {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: rgba(239, 68, 68, 0.08);
  border-radius: 10px;
  border-left: 3px solid #ef4444;
}

.coaching-mistake .mistake-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.coaching-mistake .mistake-content {
  flex: 1;
  min-width: 0;
}

.coaching-mistake .mistake-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}

.coaching-mistake .mistake-fix {
  font-size: 12px;
  color: #22c55e;
}

.coaching-mistake .mistake-count {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}

.no-mistakes {
  text-align: center;
  padding: 16px;
  color: #22c55e;
  font-size: 14px;
}

.coaching-recommendations {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.coaching-recommendation {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(34, 197, 94, 0.08);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink);
}

.coaching-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.coaching-footer .sessions-count {
  font-size: 12px;
  color: var(--muted);
}

.btn-link {
  background: none;
  border: none;
  color: var(--accent, #3b82f6);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.btn-link:hover {
  background: rgba(59, 130, 246, 0.1);
}

body.theme-light .coaching-mistake {
  background: rgba(239, 68, 68, 0.05);
}

body.theme-light .coaching-recommendation {
  background: rgba(34, 197, 94, 0.05);
}

body.theme-light .coaching-footer {
  border-color: rgba(0, 0, 0, 0.08);
}

/* End Seller AI Coaching */

/* ========================================
   v5.2.74: UX INFRASTRUCTURE COMPONENTS
   ======================================== */

/* 1) APP FOOTER with version and status */
.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  color: var(--muted, #71717a);
  gap: 12px;
  flex-wrap: wrap;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  backdrop-filter: blur(8px);
}

body.theme-light .app-footer {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #1e2332 !important;
}
body.theme-light .app-footer .version-badge {
  background: rgba(59, 130, 246, 0.12) !important;
  color: #2962ff !important;
}
body.theme-light .app-footer .version-badge-text {
  color: #2962ff !important;
}
body.theme-light .app-footer .server-status {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #1e2332 !important;
}
body.theme-light .app-footer .server-status-dot {
  background: #22c55e !important;
}
body.theme-light .app-footer .bug-report-fab {
  color: #1e2332 !important;
}

/* v2.4.9: Ensure dark theme footer/version never show white square */
body:not(.theme-light) .app-footer,
body.theme-dark:not(.theme-light) .app-footer {
  background: rgba(10, 10, 15, 0.95) !important;
  border-top-color: rgba(255, 255, 255, 0.08);
}
body:not(.theme-light) .app-footer .version-badge,
body.theme-dark:not(.theme-light) .app-footer .version-badge {
  background: rgba(59, 130, 246, 0.2) !important;
}
body:not(.theme-light) .app-footer .server-status,
body.theme-dark:not(.theme-light) .app-footer .server-status {
  background: rgba(255, 255, 255, 0.06) !important;
}

.app-footer-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.version-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(59, 130, 246, 0.15);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}

.version-badge:hover {
  background: rgba(59, 130, 246, 0.25);
}

.version-badge-text {
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 10px;
}

/* 2) SERVER STATUS INDICATOR */
.server-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.06);
}

.server-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.server-status.online .server-status-dot {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.server-status.degraded .server-status-dot {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
  animation: statusPulse 1s ease-in-out infinite;
}

.server-status.offline .server-status-dot {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
  animation: none;
}

.server-status-latency {
  opacity: 0.7;
  font-size: 9px;
}

/* 3) SKELETON LOADING */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

body.theme-light .skeleton {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.06) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.06) 100%
  );
  background-size: 200% 100%;
}

.skeleton-card {
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 12px;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.skeleton-line {
  height: 12px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 80%; }
.skeleton-line.long { width: 100%; }

.skeleton-badge {
  width: 60px;
  height: 20px;
  border-radius: 10px;
  display: inline-block;
}

/* 4) EMPTY STATES */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 16px;
}

.empty-state-icon {
  font-size: 48px;
  opacity: 0.4;
}

.empty-state-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.empty-state-description {
  font-size: 14px;
  color: var(--muted);
  max-width: 300px;
  margin: 0;
}

.empty-state-cta {
  margin-top: 8px;
}

/* 5) TOOLTIPS */
.tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-size: 10px;
  cursor: help;
  margin-left: 4px;
  transition: all 0.15s;
}

.tooltip-trigger:hover {
  background: rgba(59, 130, 246, 0.2);
  color: var(--accent);
}

body.theme-light .tooltip-trigger {
  background: rgba(0, 0, 0, 0.08);
}

.tooltip-content {
  position: absolute;
  z-index: 1000;
  max-width: 250px;
  padding: 8px 12px;
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: #f1f5f9;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  /* Only fade + rise. NEVER transition top/left: JS repositions this tooltip
     per hovered nav item, and `transition: all` made it slide diagonally
     (right-down) between items + registered layout-shift on every hover. */
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
}

.tooltip-content.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body.theme-light .tooltip-content {
  background: white;
  border-color: rgba(0, 0, 0, 0.1);
  color: #334155;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* 6) ERROR STATE */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  text-align: center;
  gap: 12px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 12px;
}

.error-state-icon {
  font-size: 32px;
}

.error-state-message {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}

.error-state-code {
  font-size: 11px;
  color: var(--muted);
  font-family: 'SF Mono', Monaco, Consolas, monospace;
}

.error-state-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.btn-copy-trace {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}

.btn-copy-trace:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ink);
}

/* 7) PHONE INPUT MASK */
.phone-input-wrapper {
  position: relative;
}

.phone-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 14px;
  pointer-events: none;
}

.phone-input-wrapper input {
  padding-left: 50px !important;
}

/* 8) VALIDATION STATES */
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

.form-field.has-success input,
.form-field.has-success select {
  border-color: #22c55e !important;
}

.form-error-message {
  font-size: 12px;
  color: #ef4444;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-error-message::before {
  content: '⚠';
  font-size: 10px;
}

/* 9) DRAFT INDICATOR */
.draft-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 6px;
  font-size: 11px;
  color: #f59e0b;
}

.draft-actions {
  display: flex;
  gap: 8px;
}

.draft-actions button {
  padding: 2px 6px;
  font-size: 10px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
}

.draft-restore {
  background: #f59e0b;
  color: #000;
}

.draft-discard {
  background: transparent;
  color: #f59e0b;
  text-decoration: underline;
}

/* 10) BUG REPORT BUTTON — hidden */
.bug-report-fab {
  display: none !important;
  position: fixed;
  bottom: 50px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent, #3b82f6);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  transition: all 0.2s;
  z-index: 100;
}

.bug-report-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

@media (max-width: 768px) {
  .bug-report-fab {
    bottom: 70px;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  /* Hide app-footer on mobile — mobile nav bar replaces it */
  .app-footer {
    display: none !important;
  }

  .version-badge {
    display: none;
  }
}

/* 11) ACTIVE/DELETED CHIP */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-chip.active {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.status-chip.deleted {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.status-chip.inactive {
  background: rgba(113, 113, 122, 0.15);
  color: #71717a;
}

/* 12) QUICK ACTIONS */
.quick-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.quick-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
}

.quick-action-btn:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--accent);
}

body.theme-light .quick-action-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

/* 13) SEARCH/FILTER BAR */
.search-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.search-input-wrapper {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.search-input-wrapper input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-size: 13px;
}

.search-input-wrapper::before {
  content: '🔍';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.5;
}

.filter-select {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-size: 13px;
  min-width: 120px;
}

body.theme-light .search-filter-bar {
  background: rgba(0, 0, 0, 0.02);
}

body.theme-light .search-input-wrapper input,
body.theme-light .filter-select {
  border-color: rgba(0, 0, 0, 0.1);
  background: white;
}

/* 14) IMPORT/EXPORT BUTTONS */
.import-export-group {
  display: flex;
  gap: 8px;
}

.btn-import,
.btn-export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-import {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.btn-import:hover {
  background: rgba(34, 197, 94, 0.25);
}

.btn-export {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.btn-export:hover {
  background: rgba(59, 130, 246, 0.25);
}

/* Pad bottom for fixed footer */
.main-content {
  padding-bottom: 50px;
}

/* End v5.2.74 UX Infrastructure */

/* ========================================
   v5.2.74: NOTIFICATIONS BELL
   ======================================== */

.notifications-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.15s;
}

.notifications-bell:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.notifications-bell-icon {
  font-size: 18px;
}

.notifications-bell-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #ef4444;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

.notifications-bell-badge.hidden {
  display: none;
}

body.theme-light .notifications-bell {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

/* Notifications Dropdown */
.notifications-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 360px;
  max-height: 480px;
  background: var(--bg-secondary, #18181b);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  z-index: 1000;
  overflow: hidden;
}

.notifications-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body.theme-light .notifications-dropdown {
  background: white;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.notifications-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.notifications-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.notifications-mark-all {
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s;
}

.notifications-mark-all:hover {
  background: rgba(59, 130, 246, 0.15);
}

.notifications-list {
  max-height: 400px;
  overflow-y: auto;
}

.notification-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background 0.15s;
}

.notification-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.notification-item.unread {
  background: rgba(59, 130, 246, 0.08);
}

.notification-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.notification-icon.warning { background: rgba(245, 158, 11, 0.15); }
.notification-icon.error { background: rgba(239, 68, 68, 0.15); }
.notification-icon.success { background: rgba(34, 197, 94, 0.15); }

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-body {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notification-time {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

.notifications-empty {
  padding: 32px 16px;
  text-align: center;
}

.notifications-empty-icon {
  font-size: 32px;
  opacity: 0.4;
  margin-bottom: 8px;
}

.notifications-empty-text {
  font-size: 13px;
  color: var(--muted);
}

/* ========================================
   v5.2.74: AUDIT LOG TABLE
   ======================================== */

.audit-log-container {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  overflow: hidden;
}

.audit-log-filters {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

.audit-log-table {
  width: 100%;
  font-size: 13px;
}

.audit-log-table th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.audit-log-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: top;
}

.audit-action-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
}

.audit-action-badge.create { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.audit-action-badge.update { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.audit-action-badge.delete { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.audit-action-badge.login { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.audit-action-badge.default { background: rgba(113, 113, 122, 0.15); color: #71717a; }

.audit-details-toggle {
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  margin-top: 4px;
}

.audit-details-json {
  margin-top: 8px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 10px;
  max-height: 150px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ========================================
   v5.2.74: SELLER AI TIPS BLOCK
   ======================================== */

.ai-tips-block {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(168, 85, 247, 0.1));
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}

.ai-tips-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.ai-tips-icon {
  width: 40px;
  height: 40px;
  background: rgba(59, 130, 246, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.ai-tips-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.ai-tips-subtitle {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 0;
}

.ai-tip-card {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
}

.ai-tip-card:last-child {
  margin-bottom: 0;
}

.ai-tip-type {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  margin-bottom: 6px;
}

.ai-tip-text {
  font-size: 14px;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.5;
}

.ai-tip-why {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.ai-tip-try-saying {
  margin-top: 10px;
  padding: 10px;
  background: rgba(34, 197, 94, 0.1);
  border-left: 3px solid #22c55e;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
}

.ai-tip-try-saying-label {
  font-size: 10px;
  text-transform: uppercase;
  color: #22c55e;
  margin-bottom: 4px;
}

/* ========================================
   v5.2.74: SELLER PROGRESS CARD
   ======================================== */

.seller-progress-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}

.seller-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.seller-progress-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.seller-progress-period {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
}

.progress-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.progress-stat {
  text-align: center;
  padding: 16px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
}

.progress-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

.progress-stat-value.positive { color: #22c55e; }
.progress-stat-value.negative { color: #ef4444; }
.progress-stat-value.neutral { color: var(--muted); }

.progress-stat-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.progress-compliance-bar {
  margin-top: 16px;
}

.progress-compliance-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 6px;
}

.progress-compliance-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.progress-compliance-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #3b82f6);
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* ========================================
   v5.2.74: TOP MISTAKES BLOCK
   ======================================== */

.top-mistakes-block {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}

.top-mistakes-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.top-mistakes-icon {
  width: 36px;
  height: 36px;
  background: rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.top-mistakes-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.mistake-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  margin-bottom: 8px;
}

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

.mistake-rank {
  width: 24px;
  height: 24px;
  background: rgba(239, 68, 68, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #ef4444;
  flex-shrink: 0;
}

.mistake-content {
  flex: 1;
}

.mistake-text {
  font-size: 13px;
  color: var(--ink);
  margin: 0 0 4px;
}

.mistake-count {
  font-size: 11px;
  color: var(--muted);
}

.mistake-rewrite-btn {
  padding: 4px 10px;
  font-size: 11px;
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.mistake-rewrite-btn:hover {
  background: rgba(59, 130, 246, 0.25);
}

/* ========================================
   v5.2.74: DEMO MODE BANNER
   ======================================== */

.demo-mode-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  color: #000;
  text-align: center;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  z-index: 9999;
  display: none;
}

.demo-mode-banner.visible {
  display: block;
}

body.demo-mode {
  padding-top: 32px;
}

body.demo-mode .top-bar {
  top: 32px;
}

/* ========================================
   v5.2.74: POINTS CAP INDICATOR
   ======================================== */

.points-cap-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  font-size: 12px;
  color: #f59e0b;
}

.points-cap-indicator::before {
  content: '⚠️';
  font-size: 14px;
}

/* ========================================
   v5.2.74: TABS STICKY + SCROLL
   ======================================== */

.admin-tabs-container.sticky {
  position: sticky;
  top: 60px;
  z-index: 50;
  background: var(--bg-secondary, #18181b);
  margin: 0 -16px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.theme-light .admin-tabs-container.sticky {
  background: var(--bg, #f4f4f5);
}

.admin-tabs-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.admin-tabs-scroll::-webkit-scrollbar {
  display: none;
}

/* Hide arrows when all tabs fit */
.admin-tabs-container.tabs-fit .admin-tabs-arrow {
  display: none;
}

/* Smooth wheel scroll */
.admin-tabs-scroll.wheel-scroll {
  scroll-behavior: smooth;
}

@media (max-width: 768px) {
  .admin-tabs-container.sticky {
    top: 50px;
  }
  
  .notifications-dropdown {
    width: calc(100vw - 32px);
    right: 0;
  }
}

/* End v5.2.74 Additional Components */

/* ========================================
   v5.2.75: ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Focus visible for all interactive elements */
:focus-visible {
  outline: 2px solid var(--accent, #3b82f6) !important;
  outline-offset: 2px !important;
}

/* Remove default outline when not using keyboard */
:focus:not(:focus-visible) {
  outline: none !important;
}

/* Ensure focus ring is visible on buttons */
button:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent, #3b82f6) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
}

/* Skip to main content link (hidden until focused) */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10000;
  padding: 8px 16px;
  background: var(--accent, #3b82f6);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  transition: top 0.15s;
}

.skip-link:focus {
  top: 16px;
}

/* Ensure minimum tap target size (44x44) */
.btn-sm,
.quick-action-btn,
.modal-close {
  min-width: 44px !important;
  min-height: 44px !important;
}
/* v6.5.1: Bell uses topbar sizing (34-40px), not generic 44px tap target */

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --accent: #0066cc;
    --border: rgba(0, 0, 0, 0.5);
    --muted: #333;
  }
  
  body.theme-dark {
    --accent: #66b3ff;
    --border: rgba(255, 255, 255, 0.5);
    --muted: #ccc;
  }
  
  .skeleton {
    background: rgba(128, 128, 128, 0.3);
  }
}

/* Reduced motion - disable animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .skeleton {
    animation: none !important;
    background: rgba(128, 128, 128, 0.2) !important;
  }
  
  .server-status-dot {
    animation: none !important;
  }
}

/* Screen reader only text */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ========================================
   v5.2.75: IMPORT/EXPORT UI COMPONENTS
   ======================================== */

/* File drop zone */
.file-dropzone {
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  transition: all 0.2s;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
}

.file-dropzone:hover,
.file-dropzone.dragover {
  border-color: var(--accent, #3b82f6);
  background: rgba(59, 130, 246, 0.08);
}

.file-dropzone-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.6;
}

.file-dropzone-text {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

.file-dropzone-hint {
  font-size: 12px;
  color: var(--muted);
  opacity: 0.7;
  margin-top: 8px;
}

body.theme-light .file-dropzone {
  border-color: rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.02);
}

/* Import preview table */
.import-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 16px;
}

.import-preview-table th {
  text-align: left;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
}

.import-preview-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.import-preview-table tr.has-error td {
  background: rgba(239, 68, 68, 0.1);
}

.import-row-error {
  color: #ef4444;
  font-size: 10px;
  margin-top: 4px;
}

/* Import results */
.import-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.import-result-card {
  padding: 16px;
  border-radius: 10px;
  text-align: center;
}

.import-result-card.created {
  background: rgba(34, 197, 94, 0.15);
}

.import-result-card.updated {
  background: rgba(59, 130, 246, 0.15);
}

.import-result-card.failed {
  background: rgba(239, 68, 68, 0.15);
}

.import-result-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.import-result-card.created .import-result-value { color: #22c55e; }
.import-result-card.updated .import-result-value { color: #3b82f6; }
.import-result-card.failed .import-result-value { color: #ef4444; }

.import-result-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase;
}

/* ========================================
   v5.2.75: ENHANCED SEARCH BAR
   ======================================== */

.accounts-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.accounts-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.accounts-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.accounts-search {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 400px;
}

.accounts-search input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-size: 14px;
}

.accounts-search::before {
  content: '🔍';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.5;
  pointer-events: none;
}

.accounts-search input:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
}

.accounts-filter-select {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-size: 13px;
  min-width: 120px;
}

.accounts-sort-select {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-size: 13px;
}

body.theme-light .accounts-search input,
body.theme-light .accounts-filter-select,
body.theme-light .accounts-sort-select {
  background: white;
  border-color: rgba(0, 0, 0, 0.15);
}

/* Pagination */
.accounts-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pagination-info {
  font-size: 13px;
  color: var(--muted);
  margin: 0 16px;
}

.pagination-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

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

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

/* Accounts count badge */
.accounts-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(59, 130, 246, 0.15);
  border-radius: 6px;
  font-size: 12px;
  color: var(--accent);
}

@media (max-width: 768px) {
  .accounts-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .accounts-toolbar-left {
    flex-direction: column;
    width: 100%;
  }
  
  .accounts-search {
    max-width: none;
  }
  
  .accounts-toolbar-right {
    justify-content: center;
  }
  
  .import-results {
    grid-template-columns: 1fr;
  }
}

/* End v5.2.75 Accessibility & Import/Export */

/* ========================================
   v5.2.78: TABS ARROWS - HIDE BY DEFAULT
   Show only when content overflows
   ======================================== */
.admin-tabs-arrow {
  display: none !important;
}

/* Show arrows only when wrapper has overflow class */
.admin-tabs-wrapper.has-overflow .admin-tabs-arrow {
  display: flex !important;
}

/* Desktop: hide if all tabs fit */
@media (min-width: 769px) {
  .admin-tabs-container.tabs-fit .admin-tabs-arrow,
  .admin-tabs-wrapper:not(.has-overflow) .admin-tabs-arrow {
    display: none !important;
  }
}
/* v2.4.10: Tab transition — animation only, no opacity:0 base (prevents flicker) */
.tab-content.active {
  animation: tabFadeIn 220ms ease both;
}

.tab-content.fade-in {
  animation: fadeInUp 200ms ease forwards;
}

.tab-content.fade-out {
  animation: fadeOutDown 150ms ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Role/view mode transition */
.view-transition {
  animation: viewFade 200ms ease forwards;
}

@keyframes viewFade {
  0% { opacity: 0.5; transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1); }
}

/* AI Commands Panel transition */
.ai-commands-panel {
  transition: all 250ms ease;
}

.ai-commands-panel:not(.hidden) {
  animation: slideDown 200ms ease forwards;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   v5.2.82: DESIGN CONTRACT - Unified Component Tokens & Fixes
   ============================================================ */

/* Design tokens */
:root {
  /* Button dimensions */
  --btn-height: 44px;
  --btn-height-sm: 36px;
  --btn-height-lg: 52px;
  --btn-padding-x: 18px;
  --btn-padding-x-sm: 14px;
  --btn-radius: 12px;
  --btn-radius-pill: 22px;
  
  /* Input dimensions */
  --input-height: 44px;
  --input-radius: 12px;
  --input-padding-x: 14px;
  
  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
}

/* v5.2.82: Tab arrows completely removed - clean horizontal scroll */
.admin-tabs-wrapper.no-arrows {
  position: relative;
  min-width: 0; /* flex child can shrink so row doesn't overflow */
  overflow: hidden; /* clip and let inner .admin-tabs scroll */
  max-width: 100%;
}

.admin-tabs-wrapper.no-arrows .admin-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0; /* flex child must shrink to enable horizontal scroll */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; /* show scrollbar so user can scroll */
  -ms-overflow-style: auto;
}

.admin-tabs-wrapper.no-arrows .admin-tabs::-webkit-scrollbar,
.admin-tabs-wrapper.no-arrows #adminTabsScroll::-webkit-scrollbar {
  height: 6px !important; /* visible so row can be scrolled */
  display: block !important;
}
.admin-tabs-wrapper.no-arrows .admin-tabs::-webkit-scrollbar-thumb,
.admin-tabs-wrapper.no-arrows #adminTabsScroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
}
.admin-tabs-wrapper.no-arrows .admin-tabs::-webkit-scrollbar-track,
.admin-tabs-wrapper.no-arrows #adminTabsScroll::-webkit-scrollbar-track {
  background: transparent;
}

/* Fade edges to indicate more content */
.admin-tabs-wrapper.no-arrows::before,
.admin-tabs-wrapper.no-arrows::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.7;
}

.admin-tabs-wrapper.no-arrows::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg, #0a0d14) 0%, transparent 100%);
}

.admin-tabs-wrapper.no-arrows::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg, #0a0d14) 0%, transparent 100%);
}

body.theme-light .admin-tabs-wrapper.no-arrows::before {
  background: linear-gradient(90deg, var(--bg, #f8fafc) 0%, transparent 100%);
}

body.theme-light .admin-tabs-wrapper.no-arrows::after {
  background: linear-gradient(270deg, var(--bg, #f8fafc) 0%, transparent 100%);
}

/* v5.2.82: Hide ALL legacy arrow rules definitively */
.admin-tabs-arrow,
.admin-tabs-arrow-left,
.admin-tabs-arrow-right,
#tabsArrowLeft,
#tabsArrowRight {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* v5.2.82: Force consistent button heights (override inline styles) */
.btn:not(.admin-tab-btn):not(.lang-btn):not(.theme-toggle-btn),
.btn-primary:not(.admin-tab-btn),
.btn-secondary:not(.admin-tab-btn),
.btn-ghost:not(.admin-tab-btn):not(.account-info-btn):not(.account-remove-btn):not(.account-restore-btn),
.btn-danger,
.btn-accent,
.btn-success,
.mic-save-btn,
button[type="submit"]:not(.admin-tab-btn):not(.lang-btn) {
  height: var(--btn-height) !important;
  min-height: var(--btn-height) !important;
  border-radius: var(--btn-radius) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.btn-sm,
.btn-ghost-sm {
  height: var(--btn-height-sm) !important;
  min-height: var(--btn-height-sm) !important;
  font-size: 13px !important;
}

/* v5.2.82: END */

/* v5.2.82: CSS classes for buttons with inline styles */
.onboarding-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  background: linear-gradient(135deg, rgba(59, 125, 255, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%) !important;
  border: 1px solid rgba(59, 125, 255, 0.4) !important;
  border-radius: 10px !important;
  color: #60a5fa !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  height: auto !important;
  min-height: auto !important;
}

.onboarding-cta-btn:hover {
  background: linear-gradient(135deg, rgba(59, 125, 255, 0.3) 0%, rgba(139, 92, 246, 0.25) 100%) !important;
  border-color: rgba(59, 125, 255, 0.6) !important;
}

.mic-save-btn {
  padding: 10px 20px !important;
  background: linear-gradient(135deg, #3b7dff 0%, #5b8eff 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.mic-save-btn:hover {
  filter: brightness(1.1);
}

.btn-bi-yellow {
  width: 100% !important;
  background: linear-gradient(135deg, #eab308, #f59e0b) !important;
}

.btn-bi-purple {
  width: 100% !important;
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.btn-bi-green {
  width: 100% !important;
  background: linear-gradient(135deg, #10b981, #059669) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* v2.5.63: BUG 5 fix - report card buttons overflow */
.report-card button,
.report-card .btn-primary,
.report-card .btn-secondary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* v2.5.63: BUG 8 fix - hide empty filter bar */
.accounts-filter-bar:empty {
  display: none !important;
}

/* v2.5.63: BUG 9 fix - KPI date inputs min-width */
.kpi-filters input[type="date"] {
  min-width: 140px !important;
}

.settings-action-btn {
  width: 100% !important;
  padding: 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: auto !important;
  min-height: auto !important;
}

.settings-action-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

body.theme-light .settings-action-btn {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

body.theme-light .settings-action-btn:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

.btn-icon {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.btn-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #fff !important;
  border: none !important;
}

.btn-warning:hover {
  filter: brightness(1.1);
}

/* v5.2.82: END of inline style fixes */

/* ============================================
   P0.1: HOME PAGE UNIFIED SPACING v5.2.82
   ============================================ */
:root {
  --home-section-gap: 24px;
  --home-card-gap: 16px;
  --home-container-max: 1200px;
  --home-container-padding: 20px;
}

/* Dashboard container - unified */
#tab-home .dashboard-container {
  max-width: var(--home-container-max);
  margin: 0 auto;
  padding: var(--home-container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--home-section-gap);
}

/* Remove individual margins - use gap instead */
#tab-home .launch-plan-card,
#tab-home .dashboard-stats-row,
#tab-home .dashboard-grid,
#tab-home .admin-block,
#tab-home .quick-actions-row,
#tab-home .admin-bottom-grid {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Unified card styling */
#tab-home .admin-block,
#tab-home .dashboard-card,
#tab-home .stat-card {
  border-radius: 16px;
  padding: var(--home-container-padding);
}

/* Stats row responsive */
#tab-home .dashboard-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--home-card-gap);
}

/* Grid layouts */
#tab-home .dashboard-grid,
#tab-home .admin-bottom-grid {
  display: grid;
  gap: var(--home-card-gap);
}

#tab-home .dashboard-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Prevent horizontal scroll */
#tab-home {
  overflow-x: hidden;
  overflow-y: auto;
}

#tab-home * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  :root {
    --home-section-gap: 16px;
    --home-card-gap: 12px;
    --home-container-padding: 16px;
  }
  
  #tab-home .dashboard-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  :root {
    --home-container-padding: 12px;
  }
  
  #tab-home .dashboard-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================
   P0.7: USER CARD ALIGNMENT v5.2.82
   ============================================ */
.accounts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.accounts-list .account-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  min-height: 80px !important;
  padding: 16px !important;
  margin-bottom: 0 !important; /* Use gap instead */
}

.accounts-list .account-card .account-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.accounts-list .account-card .account-card-buttons {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

.accounts-list .account-card .account-card-buttons button {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .accounts-list .account-card {
    min-height: 70px !important;
    padding: 12px !important;
  }
  
  .accounts-list .account-card .account-card-buttons {
    gap: 8px !important;
  }
  
  .accounts-list .account-card .account-card-buttons button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

/* ============================================================================
   v5.2.93: MOBILE UI OVERHAUL - FINAL PRIORITY STYLES
   These styles must be at the END of the file to override everything else
   ============================================================================ */

/* === MOBILE HEADER FIX (max-width: 560px) === */
@media (max-width: 560px) {
  /* Reset all conflicting styles */
  .top-bar {
    position: sticky !important;
    top: env(safe-area-inset-top, 0px) !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    margin: 8px !important;
    border-radius: 16px !important;
    background: rgba(8, 8, 12, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3) !important;
    max-width: calc(100% - 16px) !important;
    overflow: visible !important;
  }
  
  /* Row 1: Brand (logo + name) - centered, compact */
  .top-bar .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    flex-shrink: 0 !important;
  }
  
  .top-bar .brand-logo {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
  }
  
  .top-bar .brand-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    color: rgba(255, 255, 255, 0.95) !important;
  }
  
  /* Row 2: User label (username + role badge) - centered, single line */
  .top-bar .current-user-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }
  
  .top-bar .current-user-label .greeting-text {
    display: none !important;
  }
  
  .top-bar .current-user-label .user-name {
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  .top-bar .current-user-label .role-badge {
    display: inline-flex !important;
    padding: 2px 6px !important;
    border-radius: 8px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    background: var(--accent-muted, rgba(59, 125, 255, 0.15)) !important;
    color: var(--accent, #3b7dff) !important;
    flex-shrink: 0 !important;
  }
  
  /* Row 3: Controls (lang + theme + logout) - centered, compact */
  .top-bar .top-right {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }
  
  /* Language switch - compact */
  .top-bar .lang-switch {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px !important;
    border-radius: 12px !important;
    background: rgba(30, 30, 35, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-shrink: 0 !important;
  }
  
  .top-bar .lang-btn {
    padding: 4px 8px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    min-height: unset !important;
    line-height: 1.2 !important;
  }
  
  /* Theme toggle - compact circle */
  .top-bar .theme-toggle-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    font-size: 14px !important;
    border-radius: 50% !important;
    background: rgba(30, 30, 35, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-shrink: 0 !important;
  }
  
  /* Logout button - compact */
  .top-bar .btn-logout-new {
    padding: 6px 10px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }
  
  .top-bar .btn-logout-new svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  .top-bar .btn-logout-new span {
    display: none !important; /* Hide text, show icon only */
  }
  
  /* Hide system status badge on mobile */
  .top-bar #systemStatusBadge {
    display: none !important;
  }
}

/* === CONTENT PADDING UNDER HEADER === */
@media (max-width: 560px) {
  .main-content {
    padding-top: 8px !important;
  }
  
  /* Ensure cards don't overlap with header */
  .admin-card,
  .auth-card,
  .card {
    margin-top: 8px !important;
  }
}

/* === BOTTOM NAV SAFE AREA === */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  
  /* Content padding for bottom nav */
  body:not(.auth-visible) .main-content {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  body:not(.auth-visible) .app-wrapper {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* === PREVENT HORIZONTAL SCROLL === */
@media (max-width: 768px) {
  html {
    overflow-x: hidden !important;
  }
  
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  .app-wrapper {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  
  .main-content {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}

/* === LOGIN PAGE SPECIFIC === */

/* v6.4.5: On auth screen, center the login account picker between brand and controls.
   Both sides get equal flex so picker sits in the true center. */
body.auth-visible .top-bar .top-bar-left {
  flex: 1 1 0% !important;
}
body.auth-visible .top-bar .top-bar-right,
body.auth-visible .top-bar .top-right {
  flex: 1 1 0% !important;
}
/* Login account picker: centered between brand and controls */
body.auth-visible .top-bar .login-account-picker:not(.hidden) {
  flex: 1 1 0 !important;
  display: flex !important;
  justify-content: center !important;
  min-width: 0 !important;
}
/* Hide logged-in account switcher on auth screen — prevents ghost flex children */
body.auth-visible .top-bar .account-switcher-wrapper,
body.auth-visible .top-bar #currentUserLabel {
  display: none !important;
}

/* Hide logout button and notifications bell on login screen (all viewports) */
body.auth-visible .btn-logout-new,
body.auth-visible .top-bar .btn-logout-new,
body.auth-visible header .btn-logout-new,
body.auth-visible .notifications-bell-wrapper,
body.auth-visible .notifications-bell,
body.auth-visible .top-bar .notifications-bell-wrapper,
body.auth-visible .top-bar .notifications-bell,
body.auth-visible header .notifications-bell-wrapper,
body.auth-visible header .notifications-bell {
  display: none !important;
  visibility: hidden !important;
}
/* v5.2.98: Keep header controls visible on hover (no disappear) */
body.auth-visible .top-bar .brand,
body.auth-visible .top-bar .top-bar-right,
body.auth-visible .top-bar .top-right,
body.auth-visible .top-bar .lang-switch,
body.auth-visible .top-bar .lang-btn,
body.auth-visible .top-bar .theme-toggle-btn {
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 560px) {
  body.auth-visible .top-bar {
    /* On login page, simpler header */
    gap: 4px !important;
    padding: 6px 12px !important;
  }
  
  body.auth-visible .current-user-label {
    display: none !important;
  }
  
  body.auth-visible .btn-logout-new {
    display: none !important;
  }
  
  .auth-card {
    margin-top: 16px !important;
    border-radius: 20px !important;
  }
  
  .login-back-link {
    margin-bottom: 12px !important;
  }
}

/* === LIGHT THEME ADJUSTMENTS === */
@media (max-width: 560px) {
  body.theme-light .top-bar {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  }
  
  body.theme-light .top-bar .brand-name {
    color: rgba(0, 0, 0, 0.9) !important;
  }
  
  body.theme-light .top-bar .current-user-label .user-name {
    color: rgba(0, 0, 0, 0.85) !important;
  }
  
  body.theme-light .top-bar .lang-switch,
  body.theme-light .top-bar .theme-toggle-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
  }
}

/* === REPORTS PAGE BUTTONS === */
@media (max-width: 560px) {
  #tab-reports .btn-primary,
  #tab-reports .btn-secondary {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
    white-space: normal !important;
    text-align: center !important;
  }
  
  .reports-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .report-card {
    padding: 16px !important;
    border-radius: 16px !important;
  }
}

/* End v5.2.93 Mobile UI Overhaul */

/* ============================================================================
   v5.2.94: UNIFIED DESIGN SYSTEM + MOBILE FIXES + iOS SWITCH
   FINAL PRIORITY - Must be at end of file
   ============================================================================ */

/* === DESIGN TOKENS === */
:root {
  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  
  /* Layout */
  --header-height: 56px;
  --bottom-nav-height: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  
  /* Unified radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  
  /* Unified blur */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 24px;
  
  /* Unified accent */
  --accent-primary: #3b82f6;
  --accent-hover: #2563eb;
  --accent-muted: rgba(59, 130, 246, 0.15);
}

/* === iOS-STYLE SWITCH === */
.ios-switch-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row !important;
  gap: var(--sp-3) !important;
  padding: var(--sp-3) 0 !important;
  cursor: pointer !important;
}

.ios-switch-row .remember-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink, rgba(255,255,255,0.85)) !important;
  flex: 1 !important;
}

.ios-switch {
  position: relative !important;
  width: 51px !important;
  height: 31px !important;
  flex-shrink: 0 !important;
}

.ios-switch input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
}

.ios-switch-slider {
  position: absolute !important;
  cursor: pointer !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: rgba(120, 120, 128, 0.32) !important;
  border-radius: 15.5px !important;
  transition: background-color 0.2s ease !important;
}

/* Кулька сіра — не біла, щоб не виглядало як "білий квадрат" */
.ios-switch-slider::before {
  content: "" !important;
  position: absolute !important;
  height: 27px !important;
  width: 27px !important;
  left: 2px !important;
  bottom: 2px !important;
  background-color: #a8b0bc !important;
  border-radius: 50% !important;
  transition: transform 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

.ios-switch input:checked + .ios-switch-slider {
  background-color: #34c759 !important;
}

.ios-switch input:checked + .ios-switch-slider::before {
  transform: translateX(20px) !important;
}

/* v2.4.0: Remove blue focus square on iOS */
.ios-switch input:focus + .ios-switch-slider {
  box-shadow: none !important;
  outline: none !important;
}

.ios-switch,
.ios-switch input,
.ios-switch-slider {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  outline: none !important;
}

/* Light theme */
body.theme-light .ios-switch-slider {
  background-color: rgba(120, 120, 128, 0.16) !important;
}

body.theme-light .ios-switch-row .remember-label {
  color: rgba(0, 0, 0, 0.85) !important;
}

/* === MOBILE HEADER LAYOUT (NO OVERLAPS) === */
@media (max-width: 560px) {
  /* Header: 3 clear rows */
  .top-bar {
    position: sticky !important;
    top: var(--safe-top) !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--sp-2) !important;
    padding: var(--sp-2) var(--sp-3) !important;
    margin: var(--sp-2) !important;
    border-radius: var(--radius-lg) !important;
    background: rgba(18, 18, 22, 0.95) !important;
    backdrop-filter: blur(var(--blur-md)) !important;
    -webkit-backdrop-filter: blur(var(--blur-md)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    max-width: calc(100% - var(--sp-4)) !important;
    overflow: visible !important;
  }
  
  /* Brand row */
  .top-bar .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--sp-2) !important;
    width: 100% !important;
  }
  
  .top-bar .brand-logo {
    width: 22px !important;
    height: 22px !important;
  }
  
  .top-bar .brand-name {
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  
  /* User row */
  .top-bar .current-user-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--sp-2) !important;
    width: 100% !important;
    padding: var(--sp-1) 0 !important;
    font-size: 12px !important;
  }
  
  .top-bar .current-user-label .greeting-text {
    display: none !important;
  }
  
  .top-bar .current-user-label .user-name {
    font-weight: 600 !important;
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .top-bar .current-user-label .role-badge {
    display: inline-flex !important;
    padding: 2px 6px !important;
    border-radius: var(--radius-sm) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
  }
  
  /* Controls row */
  .top-bar .top-right {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--sp-2) !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }
  
  /* Lang switch compact */
  .top-bar .lang-switch {
    display: inline-flex !important;
    padding: 2px !important;
    border-radius: var(--radius-md) !important;
    background: rgba(30, 30, 35, 0.9) !important;
  }
  
  .top-bar .lang-btn {
    padding: 4px 8px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
  }
  
  /* Theme toggle compact */
  .top-bar .theme-toggle-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 14px !important;
    border-radius: 50% !important;
    background: rgba(30, 30, 35, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  
  /* Logout icon only */
  .top-bar .btn-logout-new {
    padding: 6px 10px !important;
    border-radius: 10px !important;
  }
  
  .top-bar .btn-logout-new span {
    display: none !important;
  }
  
  .top-bar .btn-logout-new svg {
    width: 16px !important;
    height: 16px !important;
  }
  
  #systemStatusBadge {
    display: none !important;
  }
}

/* === CONTENT SAFE SPACING === */
@media (max-width: 768px) {
  /* Main content padding */
  .main-content {
    padding-top: var(--sp-2) !important;
    padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--sp-4)) !important;
  }
  
  .app-wrapper {
    padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--sp-4)) !important;
  }
  
  /* Cards spacing */
  .admin-card,
  .auth-card,
  .card {
    margin-top: var(--sp-2) !important;
  }
  
  /* Admin tabs spacing */
  .admin-tabs-wrapper {
    margin-top: var(--sp-2) !important;
  }
}

/* === LOGIN PAGE === */
@media (max-width: 560px) {
  body.auth-visible .top-bar {
    gap: var(--sp-1) !important;
    padding: var(--sp-2) var(--sp-3) !important;
  }
  
  body.auth-visible .current-user-label,
  body.auth-visible .btn-logout-new {
    display: none !important;
  }
  
  .auth-card {
    margin-top: var(--sp-4) !important;
    padding: var(--sp-5) !important;
    border-radius: var(--radius-xl) !important;
  }
  
  .auth-card .card-title {
    font-size: 22px !important;
    margin-bottom: var(--sp-4) !important;
  }
  
  .auth-card .vertical-form {
    gap: var(--sp-3) !important;
  }
  
  .auth-card input[type="text"],
  .auth-card input[type="password"] {
    height: 48px !important;
    font-size: 16px !important; /* Prevents iOS zoom */
    border-radius: var(--radius-md) !important;
    padding: 0 var(--sp-4) !important;
  }
  
  .auth-card .btn-primary {
    height: 48px !important;
    font-size: 16px !important;
    border-radius: var(--radius-md) !important;
    margin-top: var(--sp-2) !important;
  }
  
  .login-back-link {
    margin-bottom: var(--sp-3) !important;
    padding: var(--sp-2) var(--sp-3) !important;
  }
}

/* === REPORTS BUTTONS === */
@media (max-width: 560px) {
  #tab-reports .btn-primary,
  #tab-reports .btn-secondary,
  .report-card .btn-primary,
  .report-card button {
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--sp-3) var(--sp-4) !important;
    font-size: 14px !important;
    border-radius: var(--radius-md) !important;
    white-space: normal !important;
    text-align: center !important;
    min-height: 44px !important; /* Tap target */
  }
  
  .reports-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--sp-3) !important;
  }
  
  .report-card {
    padding: var(--sp-4) !important;
    border-radius: var(--radius-lg) !important;
  }
  
  .report-card {
    overflow: visible !important;
  }

  /* v6.3.0: Reduced bottom padding — app-wrapper already handles safe-area + tabbar spacing */
  .reports-grid .report-card:last-child,
  #tab-reports > *:last-child {
    margin-bottom: 16px !important;
  }
}

/* === BOTTOM NAV SAFE AREA === */
.mobile-bottom-nav {
  padding-bottom: var(--safe-bottom) !important;
  height: calc(var(--bottom-nav-height) + var(--safe-bottom)) !important;
}

.mobile-bottom-nav-inner {
  height: var(--bottom-nav-height) !important;
}

/* === PREVENT HORIZONTAL SCROLL === */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

.app-wrapper,
.main-content {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* === LIGHT THEME MOBILE === */
@media (max-width: 560px) {
  body.theme-light .top-bar {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  }
  
  body.theme-light .top-bar .brand-name,
  body.theme-light .top-bar .current-user-label .user-name {
    color: rgba(0, 0, 0, 0.9) !important;
  }
  
  body.theme-light .top-bar .lang-switch,
  body.theme-light .top-bar .theme-toggle-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
  }
}

/* === UNIFIED BUTTONS === */
.btn-primary {
  background: var(--accent-primary) !important;
  border: none !important;
  color: white !important;
  font-weight: 600 !important;
  border-radius: var(--radius-md) !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
}

.btn-primary:hover {
  background: var(--accent-hover) !important;
}

.btn-primary:active {
  transform: scale(0.98) !important;
}

.btn-primary:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* === UNIFIED INPUTS === */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  border-radius: var(--radius-md) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px var(--accent-muted) !important;
  outline: none !important;
}

/* v5.2.99: No blue focus ring on auth card inputs (same "square" fix as toggle) */
.auth-card input:focus,
.auth-card input:focus-visible,
.auth-card textarea:focus,
.auth-card select:focus {
  box-shadow: none !important;
  outline: none !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
body.theme-light .auth-card input:focus,
body.theme-light .auth-card input:focus-visible,
body.theme-light .auth-card textarea:focus,
body.theme-light .auth-card select:focus {
  border-color: rgba(0, 0, 0, 0.2) !important;
}

/* Login screen: no shadow leak on auth buttons */
.auth-card .btn-primary,
.auth-card button[type="submit"].btn-primary {
  box-shadow: none !important;
  overflow: hidden;
  isolation: isolate;
}
.auth-card .btn-primary:hover:enabled,
.auth-card button[type="submit"].btn-primary:hover:enabled {
  box-shadow: none !important;
}

/* Contain shadows inside topbar and auth buttons (no leak) */
.top-bar .theme-toggle-btn,
.top-bar .lang-switch .lang-btn,
.top-bar .btn-logout-new {
  overflow: hidden !important;
  isolation: isolate !important;
  box-shadow: none !important;
}
.top-bar .theme-toggle-btn:hover,
.top-bar .lang-switch .lang-btn:hover,
.top-bar .btn-logout-new:hover {
  box-shadow: none !important;
}

body.theme-light input,
body.theme-light select,
body.theme-light textarea {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

/* === UNIFIED CARDS === */
.card,
.admin-card {
  background: rgba(25, 25, 30, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--radius-xl) !important;
  backdrop-filter: blur(var(--blur-sm)) !important;
  -webkit-backdrop-filter: blur(var(--blur-sm)) !important;
  overflow: hidden !important; /* v5.2.95: Prevent chips from overflowing */
}

body.theme-light .card,
body.theme-light .admin-card {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* v5.2.95: Account chips container - ensure no overflow */
.account-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.account-chip {
  max-width: 160px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 520px) {
  .account-chip {
    max-width: 100% !important;
  }
}

/* === TAP TARGETS === */
@media (max-width: 768px) {
  button,
  .btn,
  a.nav-link,
  .mobile-nav-item {
    min-height: 44px !important;
  }
}

/* End v5.2.94 Unified Design System */

/* =============================================================================
   v5.2.96: LAUNCH PLAN CARD - SYSTEM DESIGN (no "landing" vibe)
   ============================================================================= */

/* Main card - system style, not flashy gradients */
.launch-plan-card {
  background: rgba(25, 25, 32, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  position: relative !important;
  overflow: hidden !important;
}

body.theme-light .launch-plan-card {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Top accent line - subtle, not rainbow */
.launch-plan-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent, #3b82f6);
  opacity: 0.6;
}

/* Header */
.launch-plan-header {
  margin-bottom: 20px;
}

.launch-plan-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.launch-plan-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.launch-plan-icon {
  font-size: 20px;
}

.launch-plan-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: var(--text-primary, rgba(255, 255, 255, 0.95)) !important;
}

body.theme-light .launch-plan-title {
  color: rgba(0, 0, 0, 0.9) !important;
}

/* Badge */
.launch-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.launch-plan-badge.status-not-ready {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.launch-plan-badge.status-ready {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

body.theme-light .launch-plan-badge.status-not-ready {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
}

body.theme-light .launch-plan-badge.status-ready {
  background: rgba(34, 197, 94, 0.08);
  color: #16a34a;
}

/* Progress row */
.launch-plan-progress-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.launch-plan-progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
}

body.theme-light .launch-plan-progress-bar {
  background: rgba(0, 0, 0, 0.06);
}

.launch-plan-progress-fill {
  height: 100%;
  background: var(--accent, #3b82f6);
  border-radius: 8px;
  transition: width 0.4s ease;
}

.launch-plan-progress-text {
  font-size: 14px;
  font-weight: 600;
  min-width: 40px;
  text-align: right;
  color: var(--accent, #3b82f6);
}

/* Checklist */
.onboarding-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.onboarding-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

body.theme-light .onboarding-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

.onboarding-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

body.theme-light .onboarding-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Check circle */
.onboarding-check {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  transition: all 0.2s ease;
}

body.theme-light .onboarding-check {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.45);
}

.onboarding-check svg {
  width: 12px;
  height: 12px;
}

/* Done state */
.onboarding-item.done .onboarding-check {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #4ade80;
}

body.theme-light .onboarding-item.done .onboarding-check {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: #16a34a;
}

/* Item content */
.onboarding-item-content {
  flex: 1;
  min-width: 0;
}

.onboarding-item-text {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2px;
}

body.theme-light .onboarding-item-text {
  color: rgba(0, 0, 0, 0.85);
}

.onboarding-item-hint {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

body.theme-light .onboarding-item-hint {
  color: rgba(0, 0, 0, 0.5);
}

/* CTA button */
.onboarding-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 8px;
  color: #60a5fa;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

body.theme-light .onboarding-cta-btn {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.2);
  color: #2563eb;
}

.onboarding-cta-btn:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
}

.onboarding-cta-btn svg {
  width: 14px;
  height: 14px;
}

/* Warning */
.onboarding-warning {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fbbf24;
  font-size: 13px;
}

body.theme-light .onboarding-warning {
  background: rgba(245, 158, 11, 0.06);
  color: #d97706;
}

.onboarding-warning.hidden {
  display: none !important;
}

/* Mobile */
@media (max-width: 560px) {
  .launch-plan-card {
    padding: 16px !important;
    border-radius: 14px !important;
  }
  
  .launch-plan-title-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .onboarding-item {
    flex-wrap: wrap;
    padding: 12px 14px;
  }
  
  .onboarding-cta-btn {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }
}

/* End v5.2.96 Launch Plan Card */

/* =============================================================================
   v5.2.97: LIGHT THEME FIXES - Fix dark blocks in light theme
   ============================================================================= */

/* Script block cards */
body.theme-light .script-block-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

body.theme-light .script-block-card:hover {
  background: #f8f9fa !important;
}

/* Flashcards */
body.theme-light .flashcard {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

body.theme-light .flashcard:hover {
  background: #f8f9fa !important;
}

/* AI Chat messages */
body.theme-light .ai-chat-message.assistant {
  background: rgba(59, 130, 246, 0.08) !important;
}

body.theme-light .ai-chat-message.user {
  background: var(--accent) !important;
}

body.theme-light .ai-chat-history {
  background: var(--bg-1) !important;
}

/* Admin blocks */
body.theme-light .admin-block,
body.theme-light .admin-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* All cards using --card variable */
body.theme-light [class*="card"] {
  background: var(--surface) !important;
}

/* Dashboard cards */
body.theme-light .stat-card,
body.theme-light .dashboard-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Catalog blocks */
body.theme-light .catalog-item,
body.theme-light .block-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Points rules */
body.theme-light .rule-item,
body.theme-light .points-rule-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Chips and badges in light theme */
body.theme-light .phrase-chip,
body.theme-light .keyword-chip {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--ink) !important;
}

/* Input fields in light theme */
body.theme-light input,
body.theme-light select,
body.theme-light textarea {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--ink) !important;
}

body.theme-light input:focus,
body.theme-light select:focus,
body.theme-light textarea:focus {
  border-color: var(--accent) !important;
}

/* Topbar in light theme */
body.theme-light .top-bar,
body.theme-light .navbar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
}

/* Modal in light theme */
body.theme-light .modal-content,
body.theme-light .modal-body {
  background: #ffffff !important;
}

body.theme-light .modal-header,
body.theme-light .modal-footer {
  background: #f8f9fa !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Fix text colors in light theme */
body.theme-light .block-title,
body.theme-light .flashcard-title,
body.theme-light .card-title,
body.theme-light h1, body.theme-light h2, body.theme-light h3 {
  color: var(--ink) !important;
}

body.theme-light .block-desc,
body.theme-light .flashcard-content,
body.theme-light .card-subtitle {
  color: var(--muted) !important;
}

/* End v5.2.97 Light Theme Fixes */

/* =============================================================================
   v5.2.98: COMPREHENSIVE MOBILE UI FIX
   ============================================================================= */

/* 1. HIDE TOP-BAR ON LOGIN PAGE - HIGH SPECIFICITY */
/* Top-bar shown on login (logo + theme + language) */

body.auth-visible .mobile-bottom-nav {
  display: none !important;
}

/* 2. AUTH CARD REDESIGN - Clean minimal login */
.auth-card {
  max-width: 420px;
  margin: 0 auto;
  padding: 32px 24px !important;
  border-radius: 20px !important;
  background: var(--surface) !important;
  border: 1px solid var(--stroke) !important;
  box-shadow: none !important;
}

/* Auth card header with controls */
.auth-card::before {
  content: '';
  display: block;
  margin-bottom: 24px;
}

/* Login back link styling */
.login-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.login-back-link:hover {
  background: var(--glass-bg);
  color: var(--ink);
}

/* Auth page - compact: card just below top bar, no huge gap (v5.2.99) */
/* v2.4.10: min-height so login area fills screen (fix black/gray split - was min-height:0) */
body.auth-visible .main-content,
body.auth-visible #appScrollRoot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(100vh - 120px) !important;
  min-height: calc(100svh - 120px) !important;
  flex: 1 1 auto !important;
  padding: 16px 20px 20px;
  overflow: visible !important;
}
body.auth-visible #authSection {
  flex-shrink: 0 !important;
  margin: auto !important;
  width: 100% !important;
  max-width: 460px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  min-height: 280px !important;
}
/* v5.4.4: Login — show brand name (unified with all pages) */
body.auth-visible .top-bar .brand-name {
  display: inline-flex !important;
}
body.auth-visible .top-bar .brand-name-short {
  display: none !important;
}
body.auth-visible .top-bar .brand {
  min-width: 0;
}
/* Prevent theme-change stripe: no overflow scrollbar flash, softer dark bg */
body.auth-visible {
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100svh;
  background: #0a0a0f !important;
  transition: background 0.2s ease;
}
/* v2.4.10: Ensure wrapper fills viewport so main + login area are visible (no black strip) */
body.auth-visible .app-wrapper {
  flex: 1 1 auto;
  min-height: 100vh !important;
  min-height: 100svh !important;
  display: flex;
  flex-direction: column;
  background: #0a0a0f !important;
}
body.auth-visible.theme-light .app-wrapper {
  background: #f6f7f9 !important;
}
body.auth-visible.theme-light {
  background: #f6f7f9 !important;
}
body.auth-visible {
  background: #0a0a0f !important;
}
/* Login + cookie banner: reserve space so form is not covered */
body.auth-visible.cookie-banner-visible {
  padding-bottom: 72px !important;
}

/* ========== v5.2.99: Auth page 1:1 like landing (optimized for system) ========== */
body.auth-visible header.top-bar,
body.auth-visible .top-bar {
  position: sticky !important;
  top: 12px !important;
  width: calc(100% - 24px) !important;
  max-width: 1200px !important;
  height: 64px !important;
  margin: 12px auto 0 !important;
  padding: 0 24px !important;
  background: rgba(8, 8, 12, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6) !important;
}
body.auth-visible.theme-light header.top-bar,
body.auth-visible.theme-light .top-bar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
}
body.auth-visible header.top-bar.scrolled,
body.auth-visible .top-bar.scrolled {
  background: rgba(8, 8, 12, 0.99) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}
body.auth-visible.theme-light header.top-bar.scrolled,
body.auth-visible.theme-light .top-bar.scrolled {
  background: rgba(255, 255, 255, 0.99) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}
body.auth-visible .auth-card {
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
  background: rgba(16, 16, 22, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.auth-visible.theme-light .auth-card {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}
@media (max-width: 768px) {
  body.auth-visible header.top-bar,
  body.auth-visible .top-bar {
    width: calc(100% - 16px) !important;
    margin: 8px auto 0 !important;
    padding: 0 16px !important;
    /* BUG-2 FIX: match the non-auth mobile top value (safe-area aware) */
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
    height: 56px !important;
    min-height: 56px !important;
  }
  /* BUG-1 FIX: prevent left section from stretching on auth mobile */
  body.auth-visible .top-bar .top-bar-left {
    flex: 0 1 auto !important;
  }
}

/* v5.2.99: Fix broken top-bar on login (mobile) - single row, no overlap */
@media (max-width: 560px) {
  body.auth-visible header.top-bar,
  body.auth-visible .top-bar {
    flex-direction: row !important;
    align-items: center !important;
    /* BUG-1 FIX: changed from space-between to flex-start */
    justify-content: flex-start !important;
    height: 56px !important;
    min-height: 56px !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  body.auth-visible .top-bar .top-bar-left {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  body.auth-visible .top-bar .brand {
    gap: 6px !important;
  }
  body.auth-visible .top-bar .brand-logo {
    width: 28px !important;
    height: 28px !important;
  }
  body.auth-visible .top-bar .top-bar-right,
  body.auth-visible .top-bar .top-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  body.auth-visible .top-bar .theme-toggle-btn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
  }
  body.auth-visible .top-bar .lang-switch .lang-btn,
  body.auth-visible .top-bar .lang-btn {
    min-width: 44px !important;
    width: auto !important;
    height: 40px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
}

/* 3. TIMER REDESIGN - Clean, minimal, no "calculator" style */
.timer {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-variant-numeric: tabular-nums !important;
  font-size: clamp(48px, 12vw, 72px) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  color: var(--ink) !important;
  padding: 16px 0 !important;
}

/* Timer container */
.mic-card {
  text-align: center;
  padding: 24px !important;
  border-radius: 16px !important;
  background: var(--surface) !important;
  border: 1px solid var(--stroke) !important;
}

.mic-card .timer {
  margin: 16px 0;
}

/* Timer status text */
.status-text,
.mic-status-text {
  font-size: 14px !important;
  color: var(--muted) !important;
  text-align: center !important;
  margin-bottom: 20px !important;
}

/* 4. MIC BUTTONS - Uniform, clean */
.mic-buttons {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
}

.mic-buttons .btn,
.mic-buttons button {
  flex: 1 !important;
  min-width: 90px !important;
  max-width: 140px !important;
  height: 48px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 14px !important;
  border: none !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
}

/* Start button - primary */
.mic-buttons .btn-start,
.mic-buttons .btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
}

.mic-buttons .btn-start:hover,
.mic-buttons .btn-primary:hover {
  background: var(--accent-2) !important;
}

/* Pause button - secondary */
.mic-buttons .btn-pause,
.mic-buttons .btn-secondary {
  background: var(--glass-bg) !important;
  color: var(--ink) !important;
  border: 1px solid var(--stroke) !important;
}

/* Stop button - danger but not glowing */
.mic-buttons .btn-stop,
.mic-buttons .btn-danger {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.mic-buttons .btn-stop:hover,
.mic-buttons .btn-danger:hover {
  background: rgba(239, 68, 68, 0.25) !important;
}

/* 5. HEADER - No overlapping on mobile */
@media (max-width: 520px) {
  .top-bar {
    flex-wrap: wrap !important;
    padding: 12px 16px !important;
    gap: 8px !important;
  }
  
  .top-bar .brand {
    flex: 0 0 auto !important;
  }
  
  .top-bar .top-right {
    flex: 1 1 100% !important;
    justify-content: center !important;
    margin-top: 8px !important;
    gap: 8px !important;
  }
  
  .top-bar .lang-switch {
    padding: 4px !important;
    gap: 2px !important;
  }
  
  .top-bar .lang-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  
  .theme-toggle-btn {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
  }
  
  /* User label on separate line */
  .current-user-label {
    flex: 1 1 100% !important;
    text-align: center !important;
    order: -1 !important;
    margin-bottom: 4px !important;
  }
}

/* 6. SELLER VIEW LAYOUT - User info above timer */
.seller-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.seller-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.seller-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

.seller-badge {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
}

/* 7. iOS SAFE AREA */
.mobile-bottom-nav {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}

body:not(.auth-visible) .main-content {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
}

/* 8. MIC PANEL LAYOUT FIX */
#micPanel {
  padding: 16px !important;
}

#micPanel .mic-card {
  max-width: 400px;
  margin: 0 auto;
}

/* 9. THEME INDICATOR */
.theme-toggle-btn[data-mode="system"]::after {
  content: '🖥️';
}

.theme-toggle-btn[data-mode="dark"]::after {
  content: '🌙';
}

.theme-toggle-btn[data-mode="light"]::after {
  content: '☀️';
}

/* End v5.2.98 Mobile UI Fix */

/* =============================================================================
   v5.2.98: AUTH PAGE CLEANUP - Hide top-bar on login
   ============================================================================= */

/* Hide the octopus header on login page */
/* Auth card compact header with controls */
.auth-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin: -24px -24px 20px -24px;
  border-bottom: 1px solid var(--stroke);
  background: var(--surface);
  border-radius: 16px 16px 0 0;
}

.auth-card-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

.auth-card-brand img {
  width: 24px;
  height: 24px;
}

.auth-card-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-card-controls .lang-switch {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 2px;
}

.auth-card-controls .lang-btn {
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 6px;
}

.auth-card-controls .theme-toggle-btn {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

/* Fix auth card padding to accommodate new header */
.auth-card {
  padding-top: 0 !important;
}

/* Hide back link when we have header */
body.auth-visible .login-back-link {
  margin-top: 0;
}

/* =============================================================================
   v5.2.98: SELLER TIMER REDESIGN - Minimalist style
   ============================================================================= */

/* Timer: clean, tabular numerals, no calculator vibe */
.timer {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-variant-numeric: tabular-nums !important;
  font-size: clamp(48px, 12vw, 72px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important; /* Much tighter than 0.12em */
  color: var(--ink) !important;
  text-align: center !important;
  padding: 16px 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Recording state */
.timer.recording {
  color: var(--accent) !important;
}

.timer.paused {
  color: var(--warning) !important;
}

/* Status text under timer */
.mic-card .status-text {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-top: 8px;
}

/* Mic buttons: unified height and style */
.mic-buttons {
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
  margin-top: 20px !important;
  flex-wrap: nowrap !important;
}

.mic-buttons button {
  flex: 1 !important;
  max-width: 120px !important;
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  transition: all 0.15s ease !important;
}

/* Start button - primary accent */
.mic-buttons #micOn {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
}

.mic-buttons #micOn:hover:not(:disabled) {
  background: var(--accent-2) !important;
}

.mic-buttons #micOn:disabled {
  opacity: 0.5 !important;
}

/* Pause button - secondary neutral */
.mic-buttons #micPause {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--stroke) !important;
}

.mic-buttons #micPause:hover:not(:disabled) {
  background: var(--surface) !important;
  border-color: var(--accent) !important;
}

.mic-buttons #micPause:disabled {
  opacity: 0.4 !important;
}

/* Stop button - danger */
.mic-buttons #micOff {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.mic-buttons #micOff:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.25) !important;
}

.mic-buttons #micOff:disabled {
  opacity: 0.4 !important;
}

/* =============================================================================
   v5.5.0: MICROPHONE DEVICE SELECTOR
   ============================================================================= */

.mic-device-selector {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--stroke, rgba(255,255,255,0.08));
  border-radius: 12px;
  /* 380px squeezed two receiver names into a column narrower than the transport
     buttons above it. `.mic-center` is shrink-to-fit, so this width is what sets
     the column — the buttons keep their own. */
  width: 520px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.mic-device-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* -----------------------------------------------------------------------------
   v9.7.0: microphone cards (replaces the raw system dropdown)
   One card per physical device; a two-transmitter receiver gets TX children.
   ----------------------------------------------------------------------------- */

.mic-device-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.mic-device-title {
  flex: 1;
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #888);
}

.mic-dev-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mic-dev-card {
  border: 1px solid var(--stroke, rgba(255,255,255,0.12));
  border-radius: 8px;
  background: var(--bg, #0a0a14);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.mic-dev-card.is-selected {
  border-color: var(--accent, #4f46e5);
  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.35);
}

/* A receiver a colleague on this terminal already holds. Dimmed rather than
   hidden: the seller has to see that the box exists and why it is not offered,
   otherwise a missing card reads as a broken microphone. */
.mic-dev-card.is-taken {
  opacity: 0.62;
  border-style: dashed;
}
.mic-dev-card.is-taken .mic-dev-card-main { cursor: not-allowed; }
.mic-dev-card.is-taken .mic-dev-card-sub { color: #f59e0b; }
.mic-dev-card.is-warn .mic-dev-card-sub { color: #f59e0b; }

/* Amber #f59e0b reads at 2.06:1 on the light card — measured, not guessed — and
   this line is the one that tells a seller the box is somebody else's. #b45309
   carries the same "careful" colour at 4.8:1, which clears AA for body text. */
body.theme-light .mic-dev-card.is-taken .mic-dev-card-sub,
body.theme-light .mic-dev-card.is-warn .mic-dev-card-sub { color: #b45309; }

.mic-dev-card-empty {
  padding: 12px;
  font-size: 13px;
  color: var(--muted, #888);
  text-align: center;
}

.mic-perm-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #e0e0e0);
  margin-bottom: 4px;
}

.mic-perm-sub {
  font-size: 11px;
  color: var(--muted, #888);
  margin-bottom: 10px;
}

.mic-perm-hint {
  font-size: 11px;
  color: var(--muted, #888);
  margin-top: 8px;
  line-height: 1.4;
}

.mic-perm-hint.is-warn { color: #f59e0b; }

body.theme-light .mic-perm-title { color: #222; }

/* `.card button { height: var(--ctl-h-md); padding: 0 16px }` (specificity 0,1,1)
   was beating the plain `.mic-dev-card-main` (0,1,0), so the taller card only
   existed because applyMicButtonOverrides() re-applied it inline at render
   time. Scoped through the card element the CSS wins on its own. */
html body .mic-dev-card > button.mic-dev-card-main {
  height: auto !important;
  min-height: auto !important;
  padding: 14px 16px !important;
  gap: 12px !important;
}

.mic-dev-card-main {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  /* !important on the properties the global `button { ... !important }` pill
     reset (v4.11.7 "CONSISTENT BUTTON STYLES") also sets. That rule is a bare
     `button` selector — specificity (0,0,1) — so ordinarily a class selector
     like this one wins without needing !important at all; but its declarations
     are ALSO !important, and importance is compared before specificity, so an
     un-important rule here loses no matter how specific the selector is. This
     card is a labelled row, not an action pill: it must not be forced into
     min-height:44px + 20px side padding + a fully rounded pill. */
  min-height: auto !important;
  padding: 14px 16px !important;
  border-radius: 0 !important;
  font-weight: 400 !important;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}

.mic-dev-card-dot {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--stroke, rgba(255,255,255,0.25));
}

.mic-dev-card.is-selected .mic-dev-card-dot {
  border-color: var(--accent, #4f46e5);
  background: var(--accent, #4f46e5);
  box-shadow: inset 0 0 0 2px var(--bg, #0a0a14);
}

.mic-dev-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mic-dev-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #e0e0e0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mic-dev-card-sub {
  font-size: 13px;
  color: var(--muted, #8a93a8);
  line-height: 1.3;
  /* "зайнятий, іде запис у Ольги" is longer than the card on a phone, and the
     button base sets white-space: nowrap — without this it ran past the edge. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The TX1/TX2 lapel rows are gone: the receiver mixes both transmitters
   into one signal, so there was never a second lapel to choose. The WebHID
   footer that asked the receiver which lapels were out of the case went with
   them — it only ever answered on Windows Chrome, and once the split was
   dropped nothing depended on the answer. */

body.theme-light .mic-dev-card {
  background: #fff;
  border-color: #ddd;
}

body.theme-light .mic-dev-card-name { color: #222; }
body.theme-light .mic-dev-card.is-selected .mic-dev-card-dot { box-shadow: inset 0 0 0 2px #fff; }

.mic-device-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}

.mic-device-select {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg, #0a0a14);
  color: var(--ink, #e0e0e0);
  border: 1px solid var(--stroke, rgba(255,255,255,0.12));
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color 0.15s;
}

.mic-device-select:hover {
  border-color: var(--accent, #4f46e5);
}

.mic-device-select:focus {
  border-color: var(--accent, #4f46e5);
  outline: none;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.mic-device-select option {
  background: var(--surface, #13131f);
  color: var(--ink, #e0e0e0);
  padding: 6px;
}

.mic-device-refresh {
  background: none;
  border: 1px solid var(--stroke, rgba(255,255,255,0.12));
  color: var(--muted, #888);
  /* v10.3.2: 34px read as oversized next to a 16px card title. */
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  padding: 0;
  line-height: 1;
}

.mic-device-refresh:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--accent, #4f46e5);
  color: var(--accent, #4f46e5);
}

/* v10.3.1: the spin used to sit on the button, so its border, background and
   focus ring rotated with the glyph and the whole control looked like it was
   falling over. Only the icon turns now. */
/* v10.4.1: 15px was the tail of a correction that overshot — the glyph came out
   both too small and squashed (measured 10×15 in the panel: the flex item was
   shrinking below its declared width). Sized once, explicitly, and pinned
   against shrink. */
.mic-device-refresh-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  transform-origin: 50% 50%;
}

.mic-device-refresh-icon svg {
  width: 14px;
  height: 14px;
  min-width: 14px;
  flex: 0 0 auto;
  display: block;
}

/* v10.4.2: the refresh sat next to an 18px microphone glyph and read as a
   different species — measured 44×40 with a 44px arrow inside a 10px slot.
   Enumerated what actually reaches this button: eight blanket `button` rules,
   five of them !important, setting min-height 40 / 42 / 44 and 10-20px of side
   padding. ID+class alone loses to !important however specific it is, so this
   is stated the same way the spinner rule below already has to be.
   24px is the WCAG 2.5.8 minimum target — as small as the control may go. */
button#micDeviceRefresh.mic-device-refresh {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  gap: 0 !important;
}

button#micDeviceRefresh.mic-device-refresh .mic-device-refresh-icon,
button#micDeviceRefresh.mic-device-refresh .mic-device-refresh-icon svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
}

/* v10.4.0: one 0.6s turn read as a hiccup — it ended before the device list
   came back, so the button looked broken rather than busy. Now it spins for
   as long as the class is on (the JS keeps it until enumerateDevices resolves),
   winds up on the first turn and settles on the last. */
.mic-device-refresh-spinning .mic-device-refresh-icon {
  animation: mic-device-spin 0.75s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.mic-device-refresh:active .mic-device-refresh-icon {
  transform: scale(0.88);
}

.mic-device-refresh-icon {
  transition: transform 0.12s ease;
}

/* The button itself acknowledges the press without rotating. The global button
   reset carries `border-color: transparent !important`, so an author rule
   without !important never lands here — measured, not assumed. */
button#micDeviceRefresh.mic-device-refresh-spinning {
  border-color: var(--accent, #3b7dff) !important;
  color: var(--accent, #3b7dff) !important;
}

.mic-device-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.mic-device-icon {
  display: inline-flex;
  align-items: center;
  color: var(--accent, #3b82f6);
}

@keyframes mic-device-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mic-device-refresh-spinning .mic-device-refresh-icon { animation: none; }
}

.mic-device-status {
  font-size: 11px;
  margin-top: 6px;
  text-align: center;
  min-height: 16px;
  transition: color 0.2s;
}

.mic-device-status-ok {
  color: #22c55e;
}

/* v10.4.0: this line is guidance ("ask the browser for the microphone"), not a
   failure, and #f59e0b on the dark card shouted at the seller like something
   had broken. Muted text with an icon says the same thing without the alarm. */
.mic-device-status-warning {
  color: var(--muted, #94a3b8);
}

/* Icon + text on one baseline; the old status was a single text node. */
.mic-device-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.mic-device-status .mh-i {
  --mh-i-size: 13px;
  opacity: .85;
}

.mic-device-status-hint {
  color: var(--muted, #888);
  font-style: italic;
}

/* Light theme */
body.theme-light .mic-device-select {
  background: #fff;
  color: #333;
  border-color: #ddd;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
  /* v10.3.1: the light-theme rules re-declared background-image without
     re-declaring background-repeat/position, and the shorthand `background`
     above resets them — so the 12px chevron tiled across the whole control
     and the filter bar rendered as a field of hatching. Dark theme was fine
     because its rules pin all three. */
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
}

body.theme-light .mic-device-select option {
  background: #fff;
  color: #333;
}

body.theme-light .mic-device-selector {
  background: rgba(0,0,0,0.03);
  border-color: #e0e0e0;
}

body.theme-light .mic-device-refresh {
  border-color: #ddd;
  color: #666;
}

body.theme-light .mic-device-refresh:hover {
  background: rgba(0,0,0,0.05);
}

/* Responsive */
@media (max-width: 520px) {
  .mic-device-selector {
    margin-top: 12px;
    padding: 8px 10px;
  }
  .mic-device-select {
    font-size: 12px;
    padding: 6px 10px;
    padding-right: 24px;
  }
  .mic-device-refresh {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
}

/* =============================================================================
   v5.2.98: FIX MOBILE HEADER OVERLAY - ENG/УКР not overlapping
   ============================================================================= */

/* Mobile seller view: proper stacking */
@media (max-width: 520px) {
  /* Top bar internals */
  .top-bar .top-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
  }
  
  /* Compact lang switch on mobile */
  .top-bar .lang-switch {
    padding: 2px !important;
    gap: 2px !important;
  }
  
  .top-bar .lang-btn {
    padding: 4px 6px !important;
    font-size: 10px !important;
  }
  
  /* Compact theme toggle */
  .top-bar .theme-toggle-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
  
  /* User label doesn't overlap */
  .current-user-label {
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }
  
  /* Mic card: full width, proper padding */
  .mic-card {
    margin: 0 !important;
    border-radius: 16px !important;
    padding: 20px 16px !important;
  }
  
  /* Timer smaller on mobile */
  .timer {
    font-size: clamp(40px, 10vw, 56px) !important;
  }
  
  /* Buttons stack better */
  .mic-buttons {
    gap: 6px !important;
  }
  
  .mic-buttons button {
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;
    font-size: 10px !important;
    padding: 0 6px !important;
  }
}

/* =============================================================================
   v5.2.98: iOS SAFE AREA FIX
   ============================================================================= */

/* Bottom nav respects safe area */
.mobile-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
}

/* Main content doesn't hide behind nav */
main.main-content {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
}

/* When auth visible, no extra padding */
body.auth-visible main.main-content {
  padding-bottom: 20px !important;
}

/* End v5.2.98 Fixes */

/* v5.2.98: Auth card controls - compact row */
.auth-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--stroke);
}

/* Login page: only back link, centered */
.auth-controls.auth-controls-center {
  justify-content: center;
}

.auth-controls-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-switch-mini {
  padding: 3px !important;
  border-radius: 8px !important;
}

.lang-switch-mini .lang-btn {
  padding: 4px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.theme-toggle-mini {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}

/* Hide the old back link if present */
.auth-card > .login-back-link:first-child:not(.auth-controls .login-back-link) {
  display: none !important;
}

/* =============================================================================
   v5.2.98: MOBILE HEADER FIX - No overlapping elements
   ============================================================================= */

@media (max-width: 520px) {
  /* Force top-bar to be two distinct rows */
  .top-bar {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 10px 14px !important;
  }
  
  /* Row 1: Brand only (centered) */
  .top-bar .brand {
    order: 1 !important;
    width: 100% !important;
    justify-content: center !important;
  }
  
  /* Row 2: User info */
  .top-bar .current-user-label {
    order: 2 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    padding: 6px 0 !important;
    border-top: 1px solid var(--stroke) !important;
    margin-top: 4px !important;
  }
  
  /* User name */
  .current-user-label .user-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100px !important;
  }
  
  /* Greeting hidden on mobile */
  .current-user-label .greeting-text {
    display: none !important;
  }
  
  /* Role badge inline */
  .current-user-label .role-badge {
    display: inline-flex !important;
    font-size: 9px !important;
    padding: 3px 6px !important;
    border-radius: 6px !important;
    background: var(--accent-muted) !important;
    color: var(--accent) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }
  
  /* Row 3: Controls */
  .top-bar .top-right {
    order: 3 !important;
    width: 100% !important;
    justify-content: center !important;
    gap: 8px !important;
    padding-top: 6px !important;
    border-top: none !important;
    margin-top: 4px !important;
  }
  
  /* Compact controls */
  .top-bar .lang-switch {
    padding: 2px !important;
    gap: 2px !important;
    border-radius: 8px !important;
    background: var(--surface-2) !important;
  }
  
  .top-bar .lang-btn {
    padding: 5px 8px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }
  
  .top-bar .theme-toggle-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }
  
  /* Status badge compact */
  .system-status-badge {
    font-size: 10px !important;
    padding: 3px 6px !important;
  }
  
  /* Logout btn compact */
  .btn-logout-new {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }
}

/* =============================================================================
   v5.2.98: SELLER VIEW - Clean mic card on mobile
   ============================================================================= */

@media (max-width: 520px) {
  /* Mic card - clean, centered */
  .mic-card {
    padding: 16px !important;
    border-radius: 16px !important;
    margin: 0 8px !important;
  }
  
  /* Title */
  .mic-card .card-title {
    font-size: 16px !important;
    margin-bottom: 8px !important;
    text-align: center !important;
  }
  
  /* Timer container */
  .mic-card .mic-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 20px 0 !important;
  }
  
  /* Timer display - minimalist */
  .mic-card .timer {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 56px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    color: var(--ink) !important;
    line-height: 1 !important;
  }
  
  /* Status text */
  .mic-card .status-text {
    font-size: 13px !important;
    color: var(--muted) !important;
    text-align: center !important;
  }
  
  /* Buttons row */
  .mic-card .mic-buttons {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-top: 16px !important;
  }
  
  /* All buttons same size */
  .mic-card .mic-buttons button {
    flex: 1 !important;
    max-width: 100px !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none !important;
  }
}

/* End v5.2.98 Mobile Fixes */

/* =============================================================================
   v2.0.0: STOP CONFIRM MODAL - iOS Safari fix
   ============================================================================= */
#stopConfirmOverlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 999999 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

#stopConfirmOverlay.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#stopConfirmOverlay .modal-card,
#stopConfirmOverlay .stop-confirm-card {
  background: var(--surface, #1c1c1e) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  max-width: 320px !important;
  width: 90% !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
  pointer-events: auto !important;
}

#stopConfirmOverlay .modal-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
  color: var(--ink) !important;
}

#stopConfirmOverlay .modal-text {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--muted) !important;
  white-space: pre-line !important;
  margin-bottom: 20px !important;
}

#stopConfirmOverlay .modal-actions {
  display: flex !important;
  gap: 12px !important;
  justify-content: flex-end !important;
}

#stopConfirmOverlay .modal-actions button {
  min-width: 80px !important;
  height: 44px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
}

#stopConfirmOverlay #stopConfirmCancel {
  background: var(--surface-2, rgba(120,120,128,0.2)) !important;
  color: var(--ink) !important;
}

#stopConfirmOverlay #stopConfirmOk {
  background: #ff3b30 !important;
  color: #fff !important;
}

/* =============================================================================
   v2.0.0: MOBILE TOP-BAR — Apple HIG Compliant (44px tap targets)
   Single row, left-aligned, no wrapping
   ============================================================================= */

/* Short brand name - hidden by default */
.brand-name-short {
  display: none;
}

/* Desktop: proper flex layout - NO display:contents! */
@media (min-width: 521px) {
  /* v2.0.13: Fixed desktop top-bar layout - no overlap */
  .top-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }
  
  .top-bar-left {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }
  
  .top-bar-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
  
  .top-bar .current-user-label {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center !important;
    min-width: 0 !important;
  }
}

/* Mobile: Complete override for iPhone-friendly layout */
@media (max-width: 520px) {
  /* Top bar container - single row, no wrap */
  .top-bar {
    position: sticky !important;
    top: env(safe-area-inset-top, 0px) !important;
    z-index: 1000 !important;
    
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    
    height: auto !important;
    min-height: 52px !important;
    width: calc(100% - 12px) !important;
    margin: 6px !important;
    padding: 6px 10px !important;
    
    background: var(--topbar-bg, rgba(18, 18, 22, 0.95)) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--topbar-border, rgba(255,255,255,0.1)) !important;
    border-radius: 14px !important;
  }
  
  /* Left section - logo */
  .top-bar-left {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }
  
  /* Brand - bigger logo */
  .top-bar .brand {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  
  /* Logo icon - 32-36px */
  .top-bar .brand-logo {
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
  }
  
  /* Full brand name - hidden on very small screens */
  .top-bar .brand-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text-primary, #fff) !important;
    white-space: nowrap !important;
  }
  
  /* Short brand name - shown when space is tight */
  .top-bar .brand-name-short {
    display: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text-primary, #fff) !important;
  }
  
  /* Hide user label on mobile */
  .top-bar .current-user-label {
    display: none !important;
  }
  
  /* Right section - controls */
  .top-bar-right,
  .top-bar .top-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
  
  /* Theme toggle - 44px tap target (Apple HIG) */
  .top-bar .theme-toggle-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    background: var(--control-bg, rgba(30, 30, 35, 0.9)) !important;
    border: 1px solid var(--control-border, rgba(255,255,255,0.08)) !important;
    border-radius: 12px !important;
    font-size: 20px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  /* Language switch - 44px height, proper sizing */
  .top-bar .lang-switch {
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
    padding: 4px !important;
    gap: 2px !important;
    background: var(--control-bg, rgba(30, 30, 35, 0.9)) !important;
    border: 1px solid var(--control-border, rgba(255,255,255,0.08)) !important;
    border-radius: 12px !important;
  }
  
  /* Language buttons - comfortable tap targets */
  .top-bar .lang-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    min-width: 44px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-secondary, rgba(255,255,255,0.6)) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: all 0.15s ease !important;
  }
  
  .top-bar .lang-btn.active {
    background: var(--accent, #3b82f6) !important;
    color: #fff !important;
  }
  
  /* Hide system status on mobile */
  .top-bar .system-status-badge {
    display: none !important;
  }
  
  /* Logout button - icon only on mobile */
  .top-bar .btn-logout-new {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    background: var(--control-bg, rgba(30, 30, 35, 0.9)) !important;
    border: 1px solid var(--control-border, rgba(255,255,255,0.08)) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
  }
  
  .top-bar .btn-logout-new span {
    display: none !important;
  }
  
  .top-bar .btn-logout-new svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Extra small screens (iPhone SE, etc) - show short brand name */
@media (max-width: 380px) {
  .top-bar .brand-name {
    display: none !important;
  }
  
  .top-bar .brand-name-short {
    display: block !important;
  }
  
  /* Slightly smaller lang buttons */
  .top-bar .lang-btn {
    min-width: 40px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
}

/* =============================================================================
   v5.2.99: SELLER MOBILE UI OVERHAUL
   - Timer: system font (no segmented digits)
   - Buttons: vertical layout
   - Header: logo left, theme + lang right
   ============================================================================= */

/* 1. TIMER - System font, clean digits */
.timer,
.mic-card .timer,
#timer {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
}

/* 2. BUTTONS - Vertical layout */
.mic-buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 280px !important;
  margin: 0 auto !important;
}

.mic-buttons .btn,
.mic-buttons button {
  flex: none !important;
  width: 100% !important;
  max-width: 280px !important;
  min-width: unset !important;
  height: 52px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

/* Button colors */
.mic-buttons .btn-primary,
.mic-buttons #micOn {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
}

.mic-buttons .btn-secondary,
.mic-buttons #micPause {
  background: var(--surface-2, rgba(120,120,128,0.12)) !important;
  color: var(--ink) !important;
  border: 1px solid var(--stroke) !important;
}

.mic-buttons .btn-danger,
.mic-buttons #micOff {
  background: rgba(255, 59, 48, 0.12) !important;
  color: #ff3b30 !important;
  border: 1px solid rgba(255, 59, 48, 0.2) !important;
}

/* 3. SELLER TOP BAR - Clean header */
@media (max-width: 768px) {
  /* Compact top bar */
  .top-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    gap: 8px !important;
  }
  
  /* Brand left */
  .top-bar .brand {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  
  .top-bar .brand-logo {
    width: 28px !important;
    height: 28px !important;
  }
  
  .top-bar .brand-name {
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  
  /* Hide user label on mobile - shown in mic-card instead */
  .top-bar .current-user-label {
    display: none !important;
  }
  
  /* Controls right */
  .top-bar .top-right {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 0 !important;
  }
  
  /* Theme toggle - first (leftmost in right group) */
  .top-bar .theme-toggle-btn {
    order: 1 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    padding: 0 !important;
    background: var(--surface-2, rgba(120,120,128,0.12)) !important;
    border: none !important;
  }
  
  /* Lang switch - second */
  .top-bar .lang-switch {
    order: 2 !important;
    display: flex !important;
    background: var(--surface-2, rgba(120,120,128,0.12)) !important;
    border-radius: 10px !important;
    padding: 3px !important;
    gap: 2px !important;
  }
  
  .top-bar .lang-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    color: var(--muted) !important;
    transition: all 0.15s ease !important;
  }
  
  .top-bar .lang-btn.active {
    background: var(--accent) !important;
    color: #fff !important;
  }
  
  /* Logout button - last */
  .top-bar .btn-logout-new {
    order: 3 !important;
  }
  
  /* Hide system status badge on mobile */
  .top-bar .system-status-badge {
    display: none !important;
  }
}

/* 4. MIC CARD - Clean seller timer view */
@media (max-width: 520px) {
  .mic-card {
    padding: 20px 16px !important;
    margin: 0 !important;
  }
  
  .mic-card .card-title {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 16px !important;
  }
  
  .mic-card .timer {
    font-size: clamp(56px, 15vw, 80px) !important;
    font-weight: 200 !important;
    letter-spacing: -0.03em !important;
    margin: 8px 0 !important;
  }
  
  .mic-card .status-text {
    font-size: 13px !important;
    color: var(--muted) !important;
    margin-bottom: 24px !important;
  }
  
  .mic-card .mic-buttons {
    padding: 0 16px !important;
  }
}

/* End v5.2.99 */

/* =============================================================================
   v2.0.0: ADMIN PANEL FIXES
   1. Launch Plan Card border-radius fix
   2. Onboarding check icons (CSS only, no SVG)
   3. Reduced top spacing
   ============================================================================= */

/* FIX 1: Launch Plan Card - proper border-radius with clipping */
.launch-plan-card {
  border-radius: 20px !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Header must respect parent's overflow */
.launch-plan-header {
  border-radius: 0 !important; /* No separate radius - parent clips it */
  position: relative !important;
}

/* Gradient line at top - inside the card bounds */
.launch-plan-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #3b7dff 0%, #8b5cf6 50%, #ec4899 100%) !important;
  border-radius: 20px 20px 0 0 !important; /* Match parent top corners */
  z-index: 1 !important;
}

/* FIX 2: Onboarding check - CSS only (no SVG in HTML) */
.launch-plan-card .onboarding-check {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  border: 2.5px solid #ef4444 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

/* Hide any SVG that might be inside */
.launch-plan-card .onboarding-check svg {
  display: none !important;
}

/* Incomplete state - X icon */
.launch-plan-card .onboarding-check::before {
  content: '✕' !important;
  color: #ef4444 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* Completed state - green circle with checkmark */
.launch-plan-card .onboarding-item.completed .onboarding-check {
  background: #22c55e !important;
  border-color: #22c55e !important;
}

.launch-plan-card .onboarding-item.completed .onboarding-check::before {
  content: '✓' !important;
  color: #fff !important;
  font-size: 14px !important;
}

/* FIX 3: Reduce top spacing in admin panel */
.main-content {
  padding-top: 16px !important;
}

/* Dashboard container - less top margin */
.dashboard-container {
  padding-top: 8px !important;
  margin-top: 0 !important;
}

/* Admin card spacing */
.admin-card {
  margin-top: 8px !important;
}

/* Tab content spacing */
.tab-content {
  padding-top: 8px !important;
}

/* Mobile: even less spacing */
@media (max-width: 768px) {
  .main-content {
    padding-top: 12px !important;
  }
  
  .dashboard-container {
    padding-top: 4px !important;
  }
}

/* Light theme adjustments */
body.theme-light .launch-plan-card {
  background: linear-gradient(135deg, rgba(59, 125, 255, 0.08) 0%, rgba(139, 92, 246, 0.05) 50%, rgba(236, 72, 153, 0.03) 100%) !important;
  border-color: rgba(59, 125, 255, 0.2) !important;
}

body.theme-light .launch-plan-card .onboarding-check::before {
  color: #dc2626 !important;
}

body.theme-light .launch-plan-card .onboarding-item.completed .onboarding-check::before {
  color: #fff !important;
}

/* End v2.0.0 Admin Fixes */

/* ============================================
   v2.0.6: FIX BUTTON JITTER ON HOVER
   CRITICAL: Override ALL hover states to prevent border changes
   ============================================ */

/* Force stable borders on all account buttons */
.account-info-btn,
.account-remove-btn,
.account-restore-btn {
  transform: none !important;
  will-change: background, opacity !important;
  box-sizing: border-box !important;
}

/* CRITICAL: Override ALL hover border-color changes */
.account-info-btn:hover,
.account-remove-btn:hover,
.account-restore-btn:hover,
html body .account-info-btn:hover,
html body .account-remove-btn:hover,
html body .account-restore-btn:hover,
body.theme-light .account-info-btn:hover,
body.theme-light .account-remove-btn:hover,
body.theme-light .account-restore-btn:hover,
.account-card:hover .account-info-btn,
.account-card:hover .account-remove-btn,
.account-card:hover .account-restore-btn {
  transform: none !important;
  /* Force border to stay exactly the same - no color change */
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-sizing: border-box !important;
}

/* Light theme: also force stable border */
body.theme-light .account-info-btn,
body.theme-light .account-remove-btn,
body.theme-light .account-restore-btn {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.theme-light .account-info-btn:hover,
body.theme-light .account-remove-btn:hover,
body.theme-light .account-restore-btn:hover {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Remove button should have transparent border always */
.account-remove-btn,
.account-remove-btn:hover,
html body .account-remove-btn,
html body .account-remove-btn:hover {
  border: 1px solid transparent !important;
}

/* ============================================
   v2.0.6: FIX MOBILE ACCOUNT CARDS TEXT CUTOFF
   ============================================ */

@media (max-width: 768px) {
  /* Ensure account card content doesn't get cut off */
  .account-card,
  .account-card-content,
  .account-card-info {
    overflow: visible !important;
  }
  
  /* Fix account name not being cut off on left */
  .account-name,
  .account-card-name {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  
  /* Ensure full width for mobile cards */
  .accounts-list,
  .accounts-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  
  .account-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================
   v2.0.6: MOBILE FIXES
   ============================================ */

/* Hide admin tabs on mobile - use bottom nav instead */
@media (max-width: 768px) {
  .admin-tabs,
  .admin-tabs-list,
  .admin-tabs-container {
    display: none !important;
  }
  
  /* Ensure main content takes full width */
  .main-content,
  .admin-content,
  .tab-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow-x: visible !important;
  }
  
  /* Account cards full width with proper margins */
  .account-card {
    width: calc(100% - 16px) !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    box-sizing: border-box !important;
  }
  
  /* Name should not be cut off */
  .account-card-name,
  .account-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 60% !important;
  }
}

/* ============================================
   v2.0.7: AI Tab Styles for Seller 360
   ============================================ */

.pm-ai-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .pm-ai-summary {
    grid-template-columns: 1fr;
  }
}

.pm-ai-card {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.pm-ai-card--good {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.08);
}

.pm-ai-card--warn {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.08);
}

.pm-ai-card__header {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 12px;
  color: #f0f0f0;
}

.pm-ai-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pm-ai-list li {
  padding: 6px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pm-ai-list li:last-child {
  border-bottom: none;
}

.pm-ai-scores {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

.pm-ai-score {
  text-align: center;
  min-width: 80px;
}

.pm-ai-score__value {
  font-size: 32px;
  font-weight: 700;
  color: #60a5fa;
  line-height: 1.2;
}

.pm-ai-score__label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
}

.pm-ai-chat {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.pm-ai-chat__input-wrap {
  display: flex;
  gap: 8px;
}

.pm-ai-chat__input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 12px 16px;
  color: #fff;
  font-size: 14px;
}

.pm-ai-chat__input:focus {
  outline: none;
  border-color: #60a5fa;
}

.pm-ai-chat__btn {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pm-ai-chat__btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.pm-ai-chat__btn svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

.pm-ai-chat__response {
  margin-top: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  min-height: 60px;
}

.pm-ai-chat__hint {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.pm-ai-chat__examples {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pm-ai-chat__examples li {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.pm-ai-chat__examples li:hover {
  background: rgba(96, 165, 250, 0.25);
}

.pm-ai-chat__loading {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.pm-ai-chat__answer {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  padding: 12px;
}

.pm-ai-chat__answer-header {
  font-weight: 600;
  font-size: 13px;
  color: #60a5fa;
  margin-bottom: 8px;
}

.pm-ai-chat__answer-text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.pm-ai-chat__error {
  color: #f87171;
  font-size: 14px;
}

/* Light theme */
body.theme-light .pm-ai-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

body.theme-light .pm-ai-card--good {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.1);
}

body.theme-light .pm-ai-card--warn {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.1);
}

body.theme-light .pm-ai-card__header {
  color: #1a1a2e;
}

body.theme-light .pm-ai-list li {
  color: rgba(0, 0, 0, 0.8);
  border-color: rgba(0, 0, 0, 0.06);
}

body.theme-light .pm-ai-chat {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

body.theme-light .pm-ai-chat__input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: #1a1a2e;
}

body.theme-light .pm-ai-chat__response {
  background: rgba(0, 0, 0, 0.02);
}

body.theme-light .pm-ai-chat__answer-text {
  color: rgba(0, 0, 0, 0.85);
}

/* ============================================
   v2.0.8: iOS Safari Safe Area Fix
   ============================================ */

/* Top bar iOS fix — v2.4.9: changed from fixed to sticky (fixed caused white stripe) */
.top-bar,
.app-header,
.main-header {
  position: sticky !important;
  z-index: 1000 !important;
  box-sizing: border-box !important;
}

/* Body padding to account for fixed header */
body.has-fixed-header {
  padding-top: calc(56px + env(safe-area-inset-top, 0)) !important;
  padding-top: calc(56px + constant(safe-area-inset-top, 0)) !important;
}

/* Prevent URL bar affecting layout */
html {
  height: -webkit-fill-available;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
}

/* Dynamic viewport for iOS */
@supports (height: 100dvh) {
  .app-container,
  .main-content,
  .page-wrapper {
    min-height: 100dvh;
  }
  
  .full-height {
    height: 100dvh;
  }
}

/* iOS touch callout disable on buttons */
.top-bar button,
.top-bar a,
.bottom-nav button,
.bottom-nav a {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Safe area for bottom navigation */
.bottom-nav,
.mobile-nav,
.tab-bar {
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
  padding-bottom: constant(safe-area-inset-bottom, 0) !important;
}

/* Prevent rubber-band scrolling on iOS */
.scroll-container {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Fix modal positioning on iOS */
.modal-overlay,
.pm-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  height: 100dvh !important;
}

/* ============================================================
   v2.0.12: END REASON MODAL (Offline retail outcome)
   ============================================================ */
.end-reason-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.end-reason-content {
  background: var(--card-bg, #ffffff);
  border-radius: 20px;
  padding: 24px;
  max-width: 340px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

body.theme-dark .end-reason-content {
  background: var(--card-bg, #1e1e2e);
}

.end-reason-content h3 {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #1a1a2e);
}

body.theme-dark .end-reason-content h3 {
  color: var(--text-primary, #ffffff);
}

.end-reason-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.end-reason-btn {
  padding: 16px 12px;
  border: none;
  border-radius: 14px;
  background: var(--accent, #6366f1);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.end-reason-btn:hover {
  background: var(--accent-hover, #4f46e5);
}

.end-reason-btn:active {
  transform: scale(0.95);
}

/* Different colors for outcomes */
.end-reason-btn[data-reason="bought"] { background: #10b981; }
.end-reason-btn[data-reason="bought"]:hover { background: #059669; }
.end-reason-btn[data-reason="thinking"] { background: #f59e0b; }
.end-reason-btn[data-reason="thinking"]:hover { background: #d97706; }
.end-reason-btn[data-reason="noStock"],
.end-reason-btn[data-reason="noSize"] { background: #6b7280; }
.end-reason-btn[data-reason="price"] { background: #ef4444; }
.end-reason-btn[data-reason="price"]:hover { background: #dc2626; }

/* ============================================================
   v2.0.14: CANONICAL TOP-BAR FIX - NUCLEAR OVERRIDE
   This overrides ALL previous .top-bar definitions
   ============================================================ */

/* v2.4.9-fix: removed wildcard position:static that killed notifications dropdown */

/* v2.4.9-fix: notifications bell inside top-bar — wrapper relative, dropdown absolute */
header.top-bar .notifications-bell-wrapper {
  position: relative !important;
  display: inline-flex !important;
  width: auto !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}
/* v6.5.1: Bell button clips badge via overflow:visible on wrapper, contained size */
header.top-bar .notifications-bell-wrapper .notifications-bell {
  overflow: visible !important;
}
header.top-bar .notifications-dropdown {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
}

/* Main top-bar — Floating bubble style (v2.4.9) */
html body:not(.auth-visible) header.top-bar,
body:not(.auth-visible) .app-wrapper > header.top-bar,
body.theme-light:not(.auth-visible) header.top-bar,
body.theme-dark:not(.auth-visible) header.top-bar {
  position: sticky !important;
  top: 12px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  margin: 12px auto 0 !important;
  width: calc(100% - 24px) !important;
  max-width: 1200px !important;
  height: 56px !important;
  min-height: 56px !important;
  box-sizing: border-box !important;
  border-radius: 16px !important;
  /* Floating bubble: translucent bg + visible border always */
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  /* CENTERED content: equal padding top & bottom */
  padding: 0 24px !important;
  padding-left: calc(env(safe-area-inset-left, 0px) + 24px) !important;
  padding-right: calc(env(safe-area-inset-right, 0px) + 24px) !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
body.theme-light:not(.auth-visible) header.top-bar,
body.theme-light:not(.auth-visible) .app-wrapper > header.top-bar {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* v2.4.9: Mobile — logged-in top bar = same as login screen (pill, one row, controls right) */
@media (max-width: 768px) {
  html body:not(.auth-visible) header.top-bar,
  body:not(.auth-visible) .app-wrapper > header.top-bar {
    width: calc(100% - 16px) !important;
    margin: 4px auto 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 14px !important;
    padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
    gap: 6px !important;
    border-radius: 16px !important;
  }
  html body:not(.auth-visible) header.top-bar .current-user-label,
  html body:not(.auth-visible) header.top-bar #currentUserLabel {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden !important;
  }
  html body:not(.auth-visible) header.top-bar .top-bar-right,
  html body:not(.auth-visible) header.top-bar .top-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    width: auto !important;
  }
  html body:not(.auth-visible) header.top-bar .theme-toggle-btn,
  html body:not(.auth-visible) header.top-bar .lang-switch,
  html body:not(.auth-visible) header.top-bar .btn-logout-new:not(.hidden) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (max-width: 560px) {
  html body:not(.auth-visible) header.top-bar,
  body:not(.auth-visible) .app-wrapper > header.top-bar {
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }
  html body:not(.auth-visible) header.top-bar .theme-toggle-btn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }
  html body:not(.auth-visible) header.top-bar .lang-btn {
    min-width: 44px !important;
    height: 40px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
}

/* v2.3.0: Inner container for constrained width */
html body header.top-bar::before {
  display: none !important;
}

/* Inner content wrapper with max-width */
html body header.top-bar > * {
  max-width: 1200px !important;
}

html body header.top-bar .top-bar-left,
html body header.top-bar .current-user-label,
html body header.top-bar .top-bar-right {
  flex-shrink: 0 !important;
}

/* Left section - brand/logo */
html body header.top-bar .top-bar-left,
html body header.top-bar > .top-bar-left {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  order: 1 !important;
}

html body header.top-bar .brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body header.top-bar .brand-logo {
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
}

/* v5.4.4: unified brand-name — 16px, normal case, weight 600 */
html body header.top-bar .brand-name {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
  text-transform: none !important;
  color: #fff !important;
}

/* Light theme: dark text for top bar elements */
body.theme-light html body header.top-bar .brand-name,
html body.theme-light header.top-bar .brand-name {
  color: #1e2332 !important;
}
body.theme-light .top-bar .current-user-label .user-name,
body.theme-light .top-bar .current-user-label {
  color: #1e2332 !important;
}
body.theme-light .summary-label,
body.theme-light .summary-value {
  color: #1e2332 !important;
}
body.theme-light .summary-icon svg {
  color: #4f8bff !important;
  stroke: #4f8bff !important;
}
body.theme-light .analytics-summary-card {
  background: #fff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
body.theme-light .admin-block {
  color: #1e2332 !important;
}

/* ===== COMPREHENSIVE LIGHT THEME OVERRIDES ===== */

/* --- Personalization sections --- */
body.theme-light .pers-section__subtitle {
  color: rgba(0, 0, 0, 0.55) !important;
}
body.theme-light .section-hint {
  color: rgba(0, 0, 0, 0.45) !important;
}
body.theme-light .section-hint a {
  color: #2962ff !important;
}
body.theme-light .pers-section {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
body.theme-light .pers-section__title {
  color: #1e2332 !important;
}
body.theme-light .pers-form-label {
  color: rgba(0, 0, 0, 0.7) !important;
}
body.theme-light .pers-form-input,
body.theme-light .pers-form-textarea {
  background: #fff !important;
  color: #1e2332 !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}
body.theme-light .pers-form-input:focus,
body.theme-light .pers-form-textarea:focus {
  border-color: #2962ff !important;
}
body.theme-light .pers-form-input::placeholder,
body.theme-light .pers-form-textarea::placeholder {
  color: rgba(0, 0, 0, 0.55) !important;
}

/* --- Scoring weights --- */
body.theme-light .pers-weight-item {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
body.theme-light .pers-weight-item__label {
  color: #1e2332 !important;
}
body.theme-light .pers-weight-item__input {
  background: #fff !important;
  color: #1e2332 !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}
body.theme-light .pers-weight-total {
  color: #1e2332 !important;
}
body.theme-light .pers-weight-total strong {
  color: #1e2332 !important;
}
body.theme-light .pers-weight-banner {
  color: #92400e !important;
  background: rgba(234, 179, 8, 0.1) !important;
  border-color: rgba(234, 179, 8, 0.3) !important;
}
body.theme-light .pers-weight-delete {
  color: #dc2626 !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

/* --- Script type toggle --- */
body.theme-light .script-type-toggle {
  color: #1e2332 !important;
}
body.theme-light .script-type-toggle .toggle-btn {
  color: #1e2332 !important;
  background: rgba(0, 0, 0, 0.04) !important;
}
body.theme-light .script-type-toggle .toggle-btn.active {
  color: #fff !important;
  background: #4f8bff !important;
}

/* --- Script blocks catalog --- */
body.theme-light .script-block-card {
  background: #fff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #1e2332 !important;
}
body.theme-light .script-block-title {
  color: #1e2332 !important;
}
body.theme-light .script-block-desc {
  color: rgba(0, 0, 0, 0.6) !important;
}
body.theme-light .script-block-keywords {
  color: #1e2332 !important;
}
body.theme-light .script-block-keywords .kw-chip {
  background: rgba(79, 139, 255, 0.1) !important;
  color: #2962ff !important;
}
body.theme-light .script-block-header {
  color: #1e2332 !important;
}
body.theme-light .reorder-btn {
  color: #2962ff !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

/* --- Flashcards --- */
body.theme-light .flashcard {
  background: #fff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #1e2332 !important;
}
body.theme-light .flashcard-title {
  color: #1e2332 !important;
}
body.theme-light .flashcard-content {
  color: rgba(0, 0, 0, 0.65) !important;
}
body.theme-light .flashcard-hint {
  color: rgba(0, 0, 0, 0.5) !important;
}
body.theme-light .phrase-chip {
  background: rgba(79, 139, 255, 0.08) !important;
  color: #2962ff !important;
}
body.theme-light .flashcard-badge {
  color: #16a34a !important;
}

/* --- Admin table rows (rules) --- */
body.theme-light .admin-table-row {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #1e2332 !important;
}
body.theme-light .admin-table-row b {
  color: #1e2332 !important;
}
body.theme-light .admin-table-row .muted-text {
  color: rgba(0, 0, 0, 0.5) !important;
}
body.theme-light .admin-table-row:hover {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* --- Tags & badges --- */
body.theme-light .tag {
  color: #2962ff !important;
  background: rgba(79, 139, 255, 0.1) !important;
  border-color: rgba(79, 139, 255, 0.2) !important;
}
body.theme-light .block-badge {
  color: #16a34a !important;
}
body.theme-light .block-badge.weight {
  color: #2962ff !important;
  background: rgba(79, 139, 255, 0.1) !important;
}
body.theme-light .block-badge.source-global {
  color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.1) !important;
}

/* --- Buttons --- */
body.theme-light .btn-ghost {
  color: #1e2332 !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
body.theme-light .btn-ghost:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}
body.theme-light .btn-secondary {
  color: #1e2332 !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

/* --- Admin block headers --- */
body.theme-light .admin-block-title {
  color: #1e2332 !important;
}
body.theme-light .admin-block-sub {
  color: rgba(0, 0, 0, 0.55) !important;
}
body.theme-light .admin-block-header {
  color: #1e2332 !important;
}

/* --- Superadmin hint --- */
body.theme-light .pers-superadmin-hint {
  background: rgba(79, 139, 255, 0.08) !important;
  border-color: rgba(79, 139, 255, 0.2) !important;
  color: #1e2332 !important;
}

/* --- Tabs in personalization --- */
body.theme-light .admin-tabs .tab-btn {
  color: rgba(0, 0, 0, 0.6) !important;
}
body.theme-light .admin-tabs .tab-btn.active {
  color: #2962ff !important;
  border-color: #2962ff !important;
}

/* --- Greeting text in header --- */
body.theme-light .greeting-text {
  color: rgba(0, 0, 0, 0.6) !important;
}

/* --- Script blocks toolbar --- */
body.theme-light .script-blocks-toolbar {
  color: #1e2332 !important;
}

/* --- Block-badge required --- */
body.theme-light .block-badge.required {
  color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.08) !important;
}

/* --- Script block actions --- */
body.theme-light .script-block-actions .btn-ghost {
  color: rgba(0, 0, 0, 0.6) !important;
}

/* --- var(--pers-text-sec) override for weight % signs --- */
body.theme-light .pers-weight-item__right span[style*="var(--pers-text-sec)"] {
  color: rgba(0, 0, 0, 0.5) !important;
}

/* --- Language button in header --- */
html body.theme-light .top-bar .lang-switch .lang-btn.active,
html body.theme-light .navbar .lang-switch .lang-btn.active,
html body.theme-light .lang-btn.active {
  color: #1e2332 !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}
html body.theme-light .top-bar .lang-switch .lang-btn,
html body.theme-light .navbar .lang-switch .lang-btn,
html body.theme-light .lang-btn {
  color: rgba(0, 0, 0, 0.6) !important;
}

/* ===== END COMPREHENSIVE LIGHT THEME OVERRIDES ===== */

/* Center section - user greeting (do not grow; leave space for right controls) */
html body header.top-bar .current-user-label,
html body header.top-bar > .current-user-label {
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  order: 2 !important;
  overflow: visible !important;
  max-width: none !important;
}
/* v6.2.1: When .hidden, truly hide (don't override display) */
html body header.top-bar .current-user-label.hidden {
  display: none !important;
}
/* v6.2.1: Login-screen account picker sits in center slot */
/* v6.5.1: flex:1 1 0 centers picker between brand (left) and controls (right) symmetrically */
html body header.top-bar .login-account-picker {
  order: 2 !important;
  flex: 1 1 0 !important;
  justify-content: center !important;
  min-width: 0 !important;
}
html body header.top-bar .login-account-picker.hidden {
  display: none !important;
}

html body header.top-bar .current-user-label .greeting-text {
  color: rgba(255,255,255,0.6) !important;
  font-size: 13px !important;
}

html body header.top-bar .current-user-label .user-name {
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  max-width: 150px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body header.top-bar .current-user-label .role-badge {
  display: inline-flex !important;
  padding: 3px 8px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  background: rgba(251, 191, 36, 0.2) !important;
  color: #fbbf24 !important;
  flex-shrink: 0 !important;
}

/* Right section - controls */
html body header.top-bar .top-bar-right,
html body header.top-bar > .top-bar-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  order: 3 !important;
  margin-left: 0 !important;
  width: auto !important;
}

/* Body padding to account for fixed header - NOT on login (auth has sticky bar, no gap) */
/* v2.4.9: Removed - top-bar is sticky (in-flow), no body padding needed */
html body:not(.auth-visible) {
  padding-top: 0 !important;
}
html body.auth-visible {
  padding-top: 0 !important;
}

/* Hide brand-name-short on desktop */
html body header.top-bar .brand-name-short {
  display: none !important;
}

/* Mobile adjustments — hide brand text up to 768px, show short/icon only */
@media (max-width: 768px) {
  html body header.top-bar .current-user-label {
    display: none !important;
  }
  
  html body header.top-bar .brand-name {
    display: none !important;
  }
  
  html body header.top-bar .brand-name-short {
    display: inline !important;
  }
  
  /* v2.4.9: Ensure theme and language toggles stay visible on mobile */
  html body header.top-bar .theme-toggle-btn,
  html body header.top-bar .lang-switch {
    display: flex !important;
  }
}

/* Prevent overflow */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Account card NO jitter */
.account-card:hover,
html body .account-card:hover {
  transform: none !important;
  -webkit-transform: none !important;
}

/* =============================================================================
   v2.3.2: FINAL FIXES - TOP-BAR, CARDS, LAYOUT
   ============================================================================= */

/* ==================== TOP-BAR WIDTH FIX ==================== */
/* Same look everywhere (login + app): 12px margin, shadow, rounded - v5.2.99 */
header.top-bar,
.top-bar,
html body header.top-bar,
html body .top-bar {
  max-width: 1200px !important;
  width: calc(100% - 24px) !important;
  margin: 12px auto 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  position: sticky !important;
  top: 12px !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
html body.theme-light header.top-bar,
html body.theme-light .top-bar,
body.theme-light html body .top-bar {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
}
.top-bar.scrolled,
html body header.top-bar.scrolled {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3) !important;
}
body.theme-light .top-bar.scrolled,
body.theme-light html body header.top-bar.scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
}

/* Top-bar layout - flex with space-between */
header.top-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Greeting centered using flex */
/* v6.1.0: label is now inside .account-switcher-wrapper — no absolute positioning */
header.top-bar .current-user-label {
  position: static !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 0 !important;
}

/* Left and right sections above greeting */
header.top-bar .top-bar-left,
header.top-bar .brand {
  position: relative !important;
  z-index: 1 !important;
}

header.top-bar .top-bar-right {
  position: relative !important;
  z-index: 1 !important;
}

/* Mobile: full width, hide greeting */
@media (max-width: 768px) {
  header.top-bar,
  html body header.top-bar {
    max-width: calc(100% - 16px) !important;
    width: calc(100% - 16px) !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  
  header.top-bar .current-user-label {
    display: none !important;
  }
}

/* ==================== CARD HOVER - NO ANIMATION ==================== */
/* Remove ALL transform/scale animations on cards */
.card,
.account-card,
.admin-card,
.kpi-card,
.stat-card,
.data-action-card,
.template-card,
.route-card,
.task-card,
.reward-store-card,
.audit-stat-card,
.asset-card,
.integration-stat-card,
.report-card {
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Hover - only border highlight, NO transform */
.card:hover,
.account-card:hover,
.admin-card:hover,
.kpi-card:hover,
.stat-card:hover,
.data-action-card:hover,
.template-card:hover,
.route-card:hover,
.task-card:hover,
.reward-store-card:hover,
.audit-stat-card:hover,
.asset-card:hover,
.integration-stat-card:hover,
.report-card:hover,
html body .card:hover,
html body .account-card:hover {
  transform: none !important;
  -webkit-transform: none !important;
  scale: 1 !important;
  /* NEVER put `animation: none` here. Every one of these cards carries an entry
     animation (`.card { animation: ux-fade-in 0.3s both }`). Cancelling it on
     hover means the browser starts it over the moment the pointer leaves — the
     card drops to opacity 0 and fades back in. The result was the whole admin
     page blinking out card by card as the mouse moved across it. */
  border-color: var(--accent, #3b7dff) !important;
  box-shadow: 0 0 0 1px var(--accent, #3b7dff), 0 4px 16px rgba(59, 125, 255, 0.12) !important;
}

/* Light theme card hover */
body.theme-light .card:hover,
body.theme-light .account-card:hover {
  border-color: var(--accent, #3b7dff) !important;
  box-shadow: 0 0 0 1px var(--accent, #3b7dff), 0 4px 16px rgba(59, 125, 255, 0.08) !important;
}

/* ==================== BADGE HOVER - NO SCALE ==================== */
.role-badge:hover,
.badge:hover {
  transform: none !important;
}

/* ==================== v2.3.3: MIC BUTTONS FIX ==================== */
/* Fix "залупа" on Продовжити and СТОП buttons - remove borders/shadows */

/* All mic buttons: clean style */
.mic-buttons button,
.mic-buttons #micOn,
.mic-buttons #micPause,
.mic-buttons #micOff,
#micOn, #micPause, #micOff {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  animation: none !important;
  transition: background 0.15s ease !important;
  transform: none !important;
}

/* ВКЛЮЧИТИ button - blue, NO pulse animation */
#micOn,
.mic-buttons #micOn {
  background: #3b82f6 !important;
  color: #fff !important;
  border: none !important;
  animation: none !important;
}

#micOn:hover:not(:disabled) {
  background: #2563eb !important;
}

/* Продовжити button - gray, clean */
#micPause,
.mic-buttons #micPause {
  background: rgba(100, 100, 100, 0.25) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border: none !important;
}

#micPause:hover:not(:disabled) {
  background: rgba(100, 100, 100, 0.4) !important;
}

/* СТОП button - red, clean */
#micOff,
.mic-buttons #micOff {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #ef4444 !important;
  border: none !important;
}

#micOff:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.35) !important;
}

/* Disabled states - still no borders */
#micPause:disabled,
#micOff:disabled {
  opacity: 0.4 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Mobile: extra clean */
@media (max-width: 768px) {
  .mic-buttons {
    gap: 8px !important;
    padding: 8px !important;
  }
  
  .mic-buttons button,
  #micOn, #micPause, #micOff {
    flex: 1 !important;
    min-width: 70px !important;
    max-width: 120px !important;
    padding: 12px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: none !important;
  }
}

/* Light theme mic buttons */
body.theme-light #micPause {
  background: rgba(0, 0, 0, 0.08) !important;
  color: #333 !important;
}

body.theme-light #micOff {
  background: rgba(239, 68, 68, 0.12) !important;
}

/* =============================================================================
   v2.3.5: GLOBAL ANIMATION CONTROL
   - Respect prefers-reduced-motion
   - Disable decorative animations by default
   ============================================================================= */

/* Global reduced motion - disables all non-essential animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Disable decorative animations (pulse, glow, shimmer) always */
.animate-pulse,
.pulse,
[class*="pulse"] {
  animation: none !important;
}

/* Keep only essential UI animations (loading spinners) */
.btn-loading::after,
.is-loading::after,
.spinner,
.loading-spinner {
  animation-duration: 0.6s !important;
}

/* v2.3.5: Ensure all decorative overlays don't block clicks */
body::before,
body::after,
.card::before,
.card::after,
.modal::before,
.modal::after,
[class*="glow"]::before,
[class*="glow"]::after,
[class*="fog"]::before,
[class*="fog"]::after {
  pointer-events: none !important;
}

/* v2.3.5: Tab navigation should always be clickable */
.app-tabs,
.admin-tabs,
.nav-tabs,
[role="tablist"] {
  position: relative;
  z-index: 10;
}

.app-tabs button,
.admin-tabs button,
.nav-tabs button,
[role="tab"] {
  position: relative;
  z-index: 11;
  pointer-events: auto !important;
}

/* =============================================================================
   v2.3.6: TARGETED FIXES
   ============================================================================= */

/* 1. DISABLE ANIMATIONS ONLY ON ACCOUNT/USER CARDS */
.account-card,
.user-card,
.seller-card,
.employee-card,
.top-employee-card {
  animation: none !important;
  animation-delay: 0ms !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.account-card:nth-child(1),
.account-card:nth-child(2),
.account-card:nth-child(3),
.account-card:nth-child(4),
.account-card:nth-child(5),
.account-card:nth-child(6) {
  animation: none !important;
  animation-delay: 0ms !important;
}

/* 2. FIX TOGGLE SWITCH - ONLY ONE DOT (use ::before, disable ::after) */
.toggle-slider::before {
  content: '' !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 20px !important;
  height: 20px !important;
  background: white !important;
  border-radius: 50% !important;
  transition: transform 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

.toggle-slider::after {
  display: none !important;
  content: none !important;
}

.settings-toggle input:checked + .toggle-slider::before,
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(22px) !important;
}

/* 3. TOPBAR ALWAYS ON TOP AND CLICKABLE */
.top-bar {
  position: sticky !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

.top-bar * {
  pointer-events: auto !important;
}

/* Admin tabs ALWAYS clickable */
.admin-tabs {
  position: relative !important;
  z-index: 100 !important;
}

.admin-tabs button,
.admin-tabs a {
  position: relative !important;
  z-index: 101 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* 4. KILL ALL GLOW/FOG OVERLAYS */
.page-fog,
#pageFog,
.tour-welcome-glow,
[class*="glow"]:not(button):not(a):not(input) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 5. Remove radial-gradient glow from backgrounds */
.seller-script,
.seller-promos,
.day-details-box {
  background: rgba(15, 23, 42, 0.92) !important;
}

/* 6. Ensure modal has no top glow */
.modal {
  background: var(--bg-1) !important;
}

/* =============================================================================
   v2.3.7: AGGRESSIVE SHADOW/GLOW REMOVAL
   ============================================================================= */

/* KILL ALL GLOW VARIABLES */
:root {
  --accent-glow: transparent !important;
  --stroke-glow: transparent !important;
  --shadow-glow: none !important;
  --btn-glow: none !important;
  --good-glow: transparent !important;
  --bad-glow: transparent !important;
}

/* KILL box-shadow on cards, mic-card, panels */
.card,
.mic-card,
#micPanel,
#micPanel .mic-card,
.seller-panel,
.seller-header,
.seller-mobile-container,
.admin-card,
.account-card,
.user-card,
.top-employee-card,
.day-details-box,
.kpi-card,
.analytics-card,
.qa-panel,
#adminPanel,
.admin-panel-header,
.admin-panel-title,
h2.admin-title {
  box-shadow: none !important;
  border-color: var(--stroke) !important;
}

/* Remove hover glow */
.card:hover,
.mic-card:hover,
.account-card:hover,
.admin-card:hover {
  box-shadow: none !important;
  border-color: var(--stroke-2) !important;
}

/* Remove focus glow */
input:focus,
select:focus,
textarea:focus,
button:focus {
  box-shadow: none !important;
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* Toast container: hide when empty to avoid "small stripe" artifact after theme toggle / toast dismiss */
/* v5.3.0: Added contain + background fix for iOS Safari */
#toastContainer:empty {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: hidden !important;
  background: transparent !important;
}
#toastContainer {
  contain: layout style;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* v2.4.9: Removed conflicting toast overrides — using primary toast styles */

/* Remove any remaining gradients that create glow effect */
.seller-script,
.seller-promos,
.day-details-box,
.modal,
.card {
  background-image: none !important;
}

/* =============================================================================
   v2.3.8: CRITICAL iOS FIXES
   ============================================================================= */

/* 1. REMOVE ALL BORDERS FROM MIC-CARD - That's the "shadow/glow" you see */
.mic-card,
#micPanel .mic-card,
.seller-mobile-container .mic-card,
body.seller-mobile-mode .mic-card {
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Also the seller-header card-like element */
.seller-header,
.seller-user-info,
.card.seller-card {
  border: none !important;
  box-shadow: none !important;
}

/* The outer container with blue border - KILL IT */
.seller-mobile-container,
body.seller-mobile-mode #appSection,
body.seller-mobile-mode .app-wrapper {
  border: none !important;
  box-shadow: none !important;
}

/* 2. iOS TOASTS - BOTTOM CENTER, FULL VISIBILITY */
.toast,
.toast-notification,
[class*="toast"] {
  position: fixed !important;
  bottom: 120px !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  max-width: calc(100vw - 40px) !important;
  width: auto !important;
  min-width: 280px !important;
  text-align: center !important;
  z-index: 999999 !important;
  padding: 12px 20px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
}

/* iOS safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .toast,
  .toast-notification,
  [class*="toast"] {
    bottom: calc(120px + env(safe-area-inset-bottom)) !important;
  }
}

/* 3. SELLER TOPBAR - Ensure logo visible */
body.seller-mobile-mode .top-bar,
body.seller-mobile-mode .top-bar .brand,
body.seller-mobile-mode .top-bar .brand-logo,
body.seller-mobile-mode .top-bar .brand-name {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.seller-mobile-mode .top-bar {
  min-height: 56px !important;
  padding: 8px 16px !important;
}

body.seller-mobile-mode .brand-logo {
  width: 28px !important;
  height: 28px !important;
}

body.seller-mobile-mode .brand-name {
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* =============================================================================
   v2.4.0: RECORDING ERROR MODAL + STRATEGY BADGE
   ============================================================================= */

.recording-error-card {
  max-width: 420px !important;
  text-align: center !important;
  padding: 24px !important;
}

.recording-error-icon {
  font-size: 48px !important;
  margin-bottom: 12px !important;
}

.recording-error-subtitle {
  font-size: 14px !important;
  color: var(--muted) !important;
  margin-bottom: 20px !important;
}

.recording-error-section {
  text-align: left !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 20px !important;
}

.recording-error-section-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.recording-error-list {
  margin: 0 !important;
  padding-left: 20px !important;
  font-size: 14px !important;
}

.recording-error-list li {
  margin-bottom: 6px !important;
  color: var(--ink) !important;
}

.recording-error-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.recording-error-actions button {
  width: 100% !important;
}

.btn-ghost {
  background: transparent !important;
  border: 1px solid var(--stroke) !important;
  color: var(--muted) !important;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Strategy badge on mic panel */
.recording-strategy-badge {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  font-size: 10px !important;
  padding: 4px 8px !important;
  background: rgba(59, 130, 246, 0.2) !important;
  color: var(--accent) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

.recording-strategy-badge.strategy-chunked {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #22c55e !important;
}

.recording-strategy-badge.strategy-single {
  background: rgba(234, 179, 8, 0.2) !important;
  color: #eab308 !important;
}

.recording-strategy-badge.strategy-wav {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #ef4444 !important;
}

/* Audio level indicator */
.audio-level-indicator {
  width: 100% !important;
  height: 4px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 2px !important;
  margin-top: 8px !important;
  overflow: hidden !important;
}

.audio-level-bar {
  height: 100% !important;
  background: linear-gradient(90deg, #22c55e, #eab308, #ef4444) !important;
  border-radius: 2px !important;
  transition: width 0.1s ease !important;
}

/* Recording status text with strategy */
.recording-status-with-strategy {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.recording-mode-pill {
  font-size: 10px !important;
  padding: 2px 6px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  color: var(--muted) !important;
}

/* =============================================================================
   v2.4.0: GLOBAL TOGGLE/SWITCH TAP FIX (iOS blue square)
   ============================================================================= */

/* Remove tap highlight from ALL toggles and switches */
.toggle-switch,
.toggle-switch input,
.toggle-switch .toggle-slider,
.toggle-switch .toggle-track,
.toggle-switch .toggle-thumb,
.ios-switch,
.ios-switch input,
.ios-switch-slider,
[type="checkbox"],
[role="switch"] {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Remove focus outline/glow from toggles */
.toggle-switch input:focus,
.toggle-switch input:focus + .toggle-slider,
.toggle-switch input:focus + .toggle-track,
.ios-switch input:focus,
.ios-switch input:focus + .ios-switch-slider {
  box-shadow: none !important;
  outline: none !important;
}

/* Remove focus-visible for accessibility but no visual */
.toggle-switch input:focus-visible + .toggle-slider,
.ios-switch input:focus-visible + .ios-switch-slider {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* =============================================================================
   v2.4.2: MIC BUTTONS - REMOVE ALL TAP HIGHLIGHTS & SHADOWS
   ============================================================================= */

#micOn, #micPause, #micOff,
.mic-buttons button,
.mic-buttons #micOn,
.mic-buttons #micPause,
.mic-buttons #micOff {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

#micOn:focus, #micPause:focus, #micOff:focus,
#micOn:active, #micPause:active, #micOff:active,
.mic-buttons button:focus,
.mic-buttons button:active {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* =============================================================================
   v2.4.2: LOGIN → APP TRANSITION ANIMATION
   ============================================================================= */

/* Auth section - starts visible */
#authSection,
.auth-card {
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), 
              opacity 0.6s ease-out,
              width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
              height 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-radius 0.6s ease-out,
              box-shadow 0.5s ease-out !important;
  transform-origin: top center;
}

/* ===== MAGIC LOGIN TRANSITION v2.4.4 ===== */

/* Phase 1: Login card shrinks and moves up to become topbar */
#authSection.logging-in {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10000 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding-top: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}

#authSection.logging-in .auth-card {
  transform: translateY(0) scale(1) !important;
  animation: loginToTopbar 0.6s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) forwards !important;
}

@keyframes loginToTopbar {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
    border-radius: 16px;
  }
  40% {
    transform: translateY(-15px) scale(0.92);
    opacity: 0.9;
    border-radius: 10px;
  }
  100% {
    transform: translateY(-60vh) scale(0.4);
    opacity: 0;
    border-radius: 0;
  }
}

/* Hide form content during animation */
#authSection.logging-in .auth-card form,
#authSection.logging-in .auth-card .login-back-link,
#authSection.logging-in .auth-card label,
#authSection.logging-in .auth-card input,
#authSection.logging-in .auth-card button:not(.btn-primary),
#authSection.logging-in .auth-card .error-text,
#authSection.logging-in .auth-card .login-hint {
  animation: fadeOutQuick 0.18s ease-out forwards !important;
}

@keyframes fadeOutQuick {
  0% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* Show only logo/brand during transform */
#authSection.logging-in .auth-card .btn-primary {
  animation: buttonToLogo 0.4s ease-out forwards !important;
}

@keyframes buttonToLogo {
  0% { 
    transform: scale(1); 
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
    background: var(--primary-color);
  }
  100% { 
    transform: scale(0);
    opacity: 0;
  }
}

/* App section - slides up from bottom.
   v7.9.6: `will-change` is applied ONLY while the entry animation runs.
   Keeping `will-change: transform` permanently turns #appSection into a
   fixed-positioning containing block, which broke `position: fixed` for
   every modal rendered inside it (CRM subscription modal anchored to the
   top of #appSection instead of to the viewport). */
#appSection {
  transition: transform 0.5s var(--ease-spring, cubic-bezier(0.34, 1.3, 0.64, 1)),
              opacity 0.35s ease-out !important;
}

/* Initial state - hidden below viewport */
#appSection.app-entering {
  transform: translateY(100vh) !important;
  opacity: 0 !important;
  will-change: transform, opacity;
}

/* Animating state */
#appSection.app-sliding-up {
  animation: slideUpContent 0.5s var(--ease-spring, cubic-bezier(0.34, 1.3, 0.64, 1)) forwards !important;
  will-change: transform, opacity;
}

@keyframes slideUpContent {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Final state */
#appSection.app-entered {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

/* Top bar - appears from above with bounce */
.top-bar {
  transition: transform 0.35s var(--ease-spring, cubic-bezier(0.34, 1.3, 0.64, 1)),
              opacity 0.25s ease-out !important;
  will-change: transform, opacity;
}

.top-bar.topbar-entering {
  transform: translateY(-100%) scale(0.95) !important;
  opacity: 0 !important;
}

.top-bar.topbar-sliding-down {
  animation: slideDownTopbar 0.35s var(--ease-spring, cubic-bezier(0.34, 1.3, 0.64, 1)) forwards !important;
}

@keyframes slideDownTopbar {
  0% {
    transform: translateY(-100%) scale(0.96);
    opacity: 0;
  }
  60% {
    transform: translateY(2px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.top-bar.topbar-entered {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
}

/* Staggered animation for app content children */
#appSection.app-sliding-up > * {
  animation: fadeInStagger 0.3s ease-out both;
}

#appSection.app-sliding-up > *:nth-child(1) { animation-delay: 0.05s; }
#appSection.app-sliding-up > *:nth-child(2) { animation-delay: 0.1s; }
#appSection.app-sliding-up > *:nth-child(3) { animation-delay: 0.15s; }
#appSection.app-sliding-up > *:nth-child(4) { animation-delay: 0.2s; }

@keyframes fadeInStagger {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Success checkmark overlay during login */
.login-success-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: #0d0d14 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  opacity: 1;
}

[data-theme="dark"] .login-success-overlay,
body:not(.theme-light) .login-success-overlay {
  background: #0d0d14 !important;
}

body.theme-light .login-success-overlay {
  background: #ffffff !important;
}

.login-success-checkmark {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  display: flex;
  justify-content: center;
  align-items: center;
  animation: checkmarkPop 0.4s var(--ease-spring, cubic-bezier(0.34, 1.3, 0.64, 1)) forwards;
  box-shadow: 0 10px 40px rgba(var(--primary-rgb), 0.4);
}

@keyframes checkmarkPop {
  0% { transform: scale(0); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.login-success-checkmark::after {
  content: '✓';
  font-size: 40px;
  color: white;
  font-weight: bold;
  animation: checkDraw 0.25s ease-out 0.15s both;
}

@keyframes checkDraw {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* =============================================================================
   v2.4.2: SMALLER TIMER + AI ASSISTANT SECTION
   ============================================================================= */

/* Smaller timer for seller view */
.mic-card .timer,
#micTimer,
.timer {
  font-size: 48px !important;
  font-weight: 300 !important;
  letter-spacing: -2px !important;
  margin: 12px 0 !important;
}

@media (max-width: 768px) {
  .mic-card .timer,
  #micTimer,
  .timer {
    font-size: 42px !important;
  }
}

/* AI Assistant Section */
.ai-assistant-section {
  margin-top: 16px !important;
  padding: 16px !important;
  background: var(--glass-bg) !important;
  border-radius: 16px !important;
  border: 1px solid var(--stroke) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

.ai-assistant-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.ai-assistant-icon {
  width: 32px !important;
  height: 32px !important;
  background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
}

.ai-assistant-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

.ai-assistant-subtitle {
  font-size: 11px !important;
  color: var(--muted) !important;
}

/* AI Tips Cards */
.ai-tips-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  .ai-tips-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

.ai-tip-card {
  background: var(--surface) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  text-align: center !important;
  border: 1px solid var(--stroke) !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.ai-tip-emoji {
  font-size: 20px !important;
  margin-bottom: 6px !important;
}

.ai-tip-value {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 2px !important;
}

.ai-tip-label {
  font-size: 10px !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* AI Summary Text */
.ai-summary {
  background: rgba(139, 92, 246, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--ink) !important;
  border-left: 3px solid #8b5cf6 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 40px !important;
  max-height: none !important;
  white-space: normal !important;
  text-overflow: unset !important;
  display: block !important;
}

.ai-summary strong {
  color: #8b5cf6 !important;
}

/* Improvement badge */
.ai-improvement-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 8px !important;
  background: rgba(34, 197, 94, 0.15) !important;
  color: #22c55e !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.ai-improvement-badge.negative {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
}

/* =============================================================================
   v2.4.4: DISABLE ACCOUNT CARD ANIMATIONS + ADMIN PANEL SHADOW FIX
   ============================================================================= */

/* Remove ALL animations from account cards */
.account-card {
  animation: none !important;
  animation-delay: 0ms !important;
  transition: border-color 0.2s ease !important;
}

.account-card:nth-child(1),
.account-card:nth-child(2),
.account-card:nth-child(3),
.account-card:nth-child(4),
.account-card:nth-child(5),
.account-card:nth-child(6),
.account-card:nth-child(7),
.account-card:nth-child(8),
.account-card:nth-child(9),
.account-card:nth-child(10) {
  animation: none !important;
  animation-delay: 0ms !important;
}

/* Remove hover effects from account cards */
.account-card,
.account-card:hover,
.account-card:focus,
.account-card:active {
  transform: none !important;
  box-shadow: none !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  transition: none !important;
  animation: none !important;
}

/* ===== v2.4.4: ADMIN PANEL - REMOVE ALL SHADOWS ===== */
#adminPanel,
#adminPanel.card,
.admin-card,
section.admin-card,
#adminPanel.admin-card,
.card.admin-card {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

#adminPanel:hover,
.admin-card:hover,
.card.admin-card:hover {
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

/* Admin Panel title - no glow/shadow */
#adminPanel h2,
#adminPanel .card-title,
.admin-panel h2,
.admin-title,
h2.admin-title,
h2.card-title,
.admin-card h2,
.admin-card .card-title {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Admin tabs - no shadow */
.admin-tabs,
.admin-tabs-wrapper,
.admin-tab-btn,
.admin-tab-btn:hover,
.admin-tab-btn.active {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Hide system accounts (admin, superadmin that are MY ACCOUNT or SYSTEM) */
.account-card[data-is-system="true"],
.account-card[data-login="admin"],
.account-card.system-account,
.account-card.hidden-system {
  display: none !important;
}

/* ===== v2.4.4 FINAL FIX: ADMIN PANEL NO SHADOW/HOVER ===== */
#adminPanel.card,
section#adminPanel,
#adminPanel {
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  transform: none !important;
  transition: none !important;
}

#adminPanel.card:hover,
section#adminPanel:hover {
  box-shadow: none !important;
  transform: none !important;
  border-color: var(--stroke-2) !important;
}

/* Account cards - FULLY STATIC */
.account-card {
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.account-card:hover,
.account-card:focus,
.account-card:active,
.account-card:focus-within {
  box-shadow: none !important;
  transform: none !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  outline: none !important;
}

/* ===== v2.4.4: TOPBAR FIX - ALWAYS VISIBLE ===== */
.top-bar {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  display: flex !important;
}

.top-bar.topbar-entering,
.top-bar.topbar-sliding-down,
.top-bar.topbar-entered {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.top-bar-left,
.top-bar-right {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

/* Mobile topbar fix */
@media (max-width: 768px) {
  .top-bar {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 8px 12px !important;
  }
  
  .top-bar-left,
  .top-bar-right {
    display: flex !important;
    opacity: 1 !important;
  }
  
  .top-bar-left .logo,
  .top-bar-left .app-logo {
    display: flex !important;
  }
  
  .top-bar-right .lang-toggle,
  .top-bar-right .theme-toggle,
  .top-bar-right .logout-btn {
    display: flex !important;
  }
}

/* ===== v2.4.4: MOBILE ADMIN TABS FIX ===== */
@media (max-width: 768px) {
  .admin-tabs-wrapper {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  
  .admin-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 4px !important;
    padding: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .admin-tab-btn {
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
    min-width: auto !important;
    scroll-snap-align: start !important;
  }
  
  /* Hide less important tabs on mobile */
  .admin-tab-btn[data-tab="tab-intelligence"],
  .admin-tab-btn[data-tab="tab-diagnostics"],
  .admin-tab-btn[data-tab="tab-security"],
  .admin-tab-btn[data-tab="tab-audit"] {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .admin-tab-btn {
    padding: 6px 10px !important;
    font-size: 10px !important;
  }
  
  /* Hide even more tabs on very small screens */
  .admin-tab-btn[data-tab="tab-integrations"],
  .admin-tab-btn[data-tab="tab-notifications"],
  .admin-tab-btn[data-tab="tab-reports"] {
    display: none !important;
  }
}

/* =============================================================================
   v2.4.5: MASSIVE FIX - SHADOWS, MOBILE, MODALS, TABS
   ============================================================================= */

/* ===== 1. KILL ALL SHADOWS IN HEADER/ADMIN ===== */
/* ── v2.4.9 TOP-BAR: Floating bubble style ──
   Translucent bg + border always. Content vertically centered. */
.top-bar,
html body header.top-bar {
  filter: none !important;
  -webkit-filter: none !important;
  /* Vertical centering fix — equal padding top/bottom */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 56px !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
}

body.theme-light .top-bar,
body.theme-light html body header.top-bar {
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
}

/* Kill gradient overlays on admin-tabs */
.admin-tabs-wrapper::before,
.admin-tabs-wrapper::after {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}

/* Admin panel - absolutely no shadows */
#adminPanel,
#adminPanel.card,
.admin-card,
section#adminPanel,
.card.admin-card {
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ===== 2. USER PROFILE MODAL - FIXED POSITION ===== */
.user-profile-modal,
.account-modal,
.profile-modal,
[class*="modal-overlay"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10000 !important;
  /* NO transform on overlay */
  transform: none !important;
}

.user-profile-modal .modal-content,
.account-modal .modal-content,
.profile-modal .modal-content,
.modal-dialog {
  position: relative !important;
  /* Fixed size, no jumping */
  width: 90vw !important;
  max-width: 500px !important;
  max-height: 85vh !important;
  min-height: 400px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* NO transform animations that cause jank */
  transform: none !important;
  transition: opacity 0.2s ease !important;
}

/* ===== 3. TABS - FIXED HEIGHT, NO JUMPING ===== */
.tab-content,
.modal-tab-content,
[class*="tab-panel"] {
  min-height: 300px !important;
  /* Prevent height changes */
  transition: opacity 0.15s ease !important;
}

/* Tab content scrolls internally */
.tab-content.active,
.modal-tab-content.active {
  overflow-y: auto !important;
  max-height: calc(85vh - 120px) !important;
}

/* ===== 4. ACCOUNT CARDS - STATIC, NO HOVER ===== */
.account-card {
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.account-card:hover,
.account-card:focus,
.account-card:active {
  box-shadow: none !important;
  transform: none !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ===== 5. MOBILE TOPBAR - ALWAYS VISIBLE ===== */
@media (max-width: 768px) {
  .top-bar {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  
  .top-bar-left,
  .top-bar-right,
  .top-right {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  .logo,
  .app-logo,
  .lang-toggle,
  .theme-toggle,
  .logout-btn,
  .exit-btn {
    display: flex !important;
    opacity: 1 !important;
  }
}

/* ===== 6. ADMIN TABS MOBILE - SCROLLABLE ===== */
@media (max-width: 768px) {
  .admin-tabs-wrapper {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    /* Remove pseudo-element gradients */
  }
  
  .admin-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 4px !important;
    padding: 4px 6px !important;
    box-shadow: none !important;
  }
  
  .admin-tab-btn {
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
}

/* ===== 7. SELLER PANEL MOBILE - FIX LAYOUT ===== */
@media (max-width: 768px) {
  #micPanel,
  .seller-panel,
  .mic-card {
    box-shadow: none !important;
    border-radius: 12px !important;
    padding: 12px !important;
  }
  
  .recording-timer {
    font-size: 48px !important;
  }
  
  .seller-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}

/* ===== 8. LOGIN ANIMATION - SIMPLE FADE ===== */
#authSection {
  transition: opacity 0.3s ease !important;
}

#authSection.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Login success overlay - fullscreen solid */
.login-success-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: var(--bg, #0d0d14) !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.theme-light .login-success-overlay {
  background: #ffffff !important;
}

/* ===== v2.4.5 FINAL: KILL ALL CARD SHADOWS ===== */
.card,
.card:hover,
.card:focus,
.auth-card,
.auth-card:hover,
.admin-card,
.admin-card:hover,
.mic-card,
.mic-card:hover,
#adminPanel,
#adminPanel:hover {
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Light theme - same */
body.theme-light .card,
body.theme-light .card:hover,
body.theme-light .auth-card,
body.theme-light .admin-card,
body.theme-light #adminPanel {
  box-shadow: none !important;
}

/* =============================================================================
   v2.4.9: KILL ALL HOVER BOUNCE/JUMP ANIMATIONS
   ============================================================================= */

/* No translateY or scale bounce on any interactive element hover */
.btn:hover,
.btn:active,
.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover,
.btn-ghost:hover,
.btn-accent:hover,
.btn-success:hover,
.card:hover,
.admin-block:hover,
.admin-tab-btn:hover,
.admin-tab-btn:active,
.seg-btn:hover,
.seg-btn:active,
.script-role-btn:hover,
.icon-btn:hover,
.account-activate-btn:hover,
.account-remove-btn:hover,
.account-restore-btn:hover,
.activity-day:hover,
.mic-buttons button:hover,
.user-meta-card:hover,
.mic-card:hover,
#micPanel:hover {
  transform: none !important;
}

/* Kill any remaining shadows on seller view cards */
.user-meta-card,
.user-meta-card:hover,
#userMetaCard,
#userMetaCard:hover {
  box-shadow: none !important;
  filter: none !important;
}

/* =============================================================================
   v5.2.99: Theme button = same as lang button (round, same style) in top-bar
   ============================================================================= */
.top-bar .theme-toggle-btn,
header.top-bar .theme-toggle-btn,
html body header.top-bar .theme-toggle-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: inherit !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}
.top-bar .theme-toggle-btn:hover,
header.top-bar .theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
body.theme-light .top-bar .theme-toggle-btn,
body.theme-light header.top-bar .theme-toggle-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
body.theme-light .top-bar .theme-toggle-btn:hover,
body.theme-light header.top-bar .theme-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}
@media (max-width: 768px) {
  .top-bar .theme-toggle-btn,
  header.top-bar .theme-toggle-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 50% !important;
  }
}

/* ========== FINAL: Login page 1:1 landing (must win over any later rules) ========== */
body.auth-visible header.top-bar,
body.auth-visible .app-wrapper header.top-bar,
body.auth-visible .top-bar {
  position: sticky !important;
  top: 12px !important;
  width: calc(100% - 24px) !important;
  max-width: 1200px !important;
  height: 64px !important;
  margin: 12px auto 0 !important;
  padding: 0 24px !important;
  background: rgba(8, 8, 12, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6) !important;
}
body.auth-visible.theme-light header.top-bar,
body.auth-visible.theme-light .top-bar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
}
body.auth-visible .top-bar .theme-toggle-btn,
body.auth-visible .top-bar .lang-switch .lang-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
body.auth-visible.theme-light .top-bar .theme-toggle-btn,
body.auth-visible.theme-light .top-bar .lang-switch .lang-btn:not(.active) {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
body.auth-visible .top-bar .lang-switch .lang-btn.active {
  background: var(--accent, #3b82f6) !important;
  color: #fff !important;
  border-color: var(--accent, #3b82f6) !important;
}

/* ===== v2.4.9: GLOBAL SCROLL & LAYOUT FIX =====
   Page grows in height naturally, no internal scroll traps.
   Browser's native scroll on html handles everything.
   Scoped to mobile only so desktop keeps wide .app-wrapper (min(1680px, 96vw)).
   ================================================ */
@media (max-width: 768px) {
/* html scrolls — body is just a flex container for centering */
html {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
}

body {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  display: block !important;
  padding-bottom: 64px !important; /* space for fixed bottom nav — matches nav height exactly */
}

/* App wrapper grows freely — mobile only; desktop uses min(1680px, 96vw) */
.app-wrapper {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  max-width: 480px !important;
  margin: 0 auto !important;
}

/* Main content — no internal scroll, height auto */
.main-content {
  height: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
  flex: none !important;
}

/* #appSection — grow freely */
#appSection:not(.hidden),
main {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  flex: none !important;
}

/* Admin panel — never clip content, grow in height */
#adminPanel,
#adminPanel.card,
.admin-card,
section.admin-card {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Cards — no clipping */
.card {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Tab content — also never clip */
.tab-content,
.tab-panel,
[id^="tab-"]:not(.admin-tab-btn):not(.admin-tabs) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
} /* end @media (max-width: 768px) GLOBAL SCROLL & LAYOUT FIX */

/* ===== DESKTOP: висота сторінки зростає з контентом, прокрутка тільки сторінки ===== */
@media (min-width: 769px) {
  html {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  body,
  body.auth-visible,
  .app-wrapper,
  body.auth-visible .app-wrapper,
  .app-sections,
  .main-content,
  body.auth-visible .main-content,
  body.auth-visible main,
  #appSection,
  #adminPanel,
  .admin-card,
  section.admin-card,
  .card.admin-card,
  .admin-tabs-content,
  .tab-content {
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    overflow-y: visible !important;
  }
  .app-wrapper,
  body.auth-visible .app-wrapper {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important; /* щоб wrapper ростав за контентом */
  }
  /* main/#appSection — тільки висота контенту, не розтягувати на екран */
  main,
  .main-content,
  #appSection {
    flex: none !important;
    overflow: visible !important;
  }
}

/* Tour card — fix mobile positioning: always centered in viewport */
@media (max-width: 768px) {
  .tour-card {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    max-width: calc(100vw - 32px) !important;
    z-index: 10002 !important;
  }
  .tour-spotlight {
    z-index: 10001 !important;
  }
}

/* ===== v2.4.9: MOBILE — top-bar logo visible + smaller gaps (top/right/bottom) ===== */
@media (max-width: 768px) {
  .top-bar .brand {
    display: flex !important;
    visibility: visible !important;
    align-items: center;
    gap: 6px;
  }
  .top-bar .brand-logo {
    display: block !important;
    visibility: visible !important;
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0;
  }
  .app-wrapper {
    padding: 6px 4px calc(12px + env(safe-area-inset-bottom)) !important;
  }
  .main-content {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  body:not(.auth-visible) .app-wrapper {
    padding-top: 6px !important;
  }
}

/* ===== v2.4.9: MOBILE DENSITY (less padding, less empty space) ===== */
@media (max-width: 560px) {
  .main-content {
    padding-left: 4px !important;
    padding-right: 4px !important;
    gap: 10px !important;
  }

  .app-sections {
    gap: 12px !important;
  }

  .card {
    padding: 16px 10px 18px !important;
  }

  .admin-card {
    gap: 10px !important;
  }

  /* iOS: avoid zoom on focus — text inputs min 16px */
  .main-content input:not([type=checkbox]):not([type=radio]):not([type=range]),
  .main-content textarea,
  .main-content select {
    font-size: 16px !important;
  }
}

/* ===== v2.4.9: MOBILE "MORE" GRID SHEET — fix huge icons / spacing ===== */
#mobileBottomSheet {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  padding: 12px !important;
}

/* Grid container (first child of sheet) */
#mobileBottomSheet > div {
  gap: 8px !important;
}

/* Tiles — kill shadows, outlines that cause visual glitch; allow transform/transition for animations */
#mobileBottomSheet .more-grid-tile,
#mobileBottomSheet button.more-grid-tile {
  padding: 10px 6px !important;
  min-height: 52px !important;
  border-radius: 12px !important;
  overflow: visible !important;
  box-shadow: none !important;
  outline: none !important;
  outline-offset: 0 !important;
  border: none !important;
  background: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#mobileBottomSheet .more-grid-tile:focus,
#mobileBottomSheet .more-grid-tile:focus-visible,
#mobileBottomSheet .more-grid-tile:focus-within,
#mobileBottomSheet button.more-grid-tile:focus,
#mobileBottomSheet button.more-grid-tile:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  border: none !important;
}
#mobileBottomSheet .more-grid-tile:hover {
  background: rgba(59, 130, 246, 0.08) !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}
#mobileBottomSheet .more-grid-tile:active {
  background: rgba(59, 130, 246, 0.15) !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}

/* Іконки меню «Ще» — 24px, overflow visible to prevent clipping */
#mobileBottomSheet .more-grid-tile > div {
  width: 24px !important;
  height: 24px !important;
  margin: 2px auto 2px auto !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

#mobileBottomSheet svg {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex: 0 0 24px !important;
  display: block !important;
  overflow: visible !important;
  transition: none !important;
}

/* v5.2.94: Kill inherited body * transition on SVGs only —
   the global "body, body *" transition causes SVG repaint shift on hover.
   Allow opacity/transform transitions on sheet & tiles for smooth animations. */
#mobileBottomSheet svg,
#mobileBottomSheet svg * {
  transition: none !important;
}

#mobileBottomSheet .more-grid-tile span {
  font-size: 10px !important;
  line-height: 1.2 !important;
  min-height: 2.4em;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* ===== v2.4.9: FINAL MOBILE OVERRIDES (no horizontal tabs, stable top-bar) ===== */
@media (max-width: 768px) {
  /* Remove horizontal admin tabs on mobile — bottom nav is primary */
  .admin-tabs-wrapper,
  .admin-tabs,
  .admin-tab-btn {
    display: none !important;
  }

  /* Remove artificial top padding on mobile (was for fixed header) */
  html body:not(.auth-visible) {
    padding-top: 0 !important;
  }

  /* Don't constrain inner header sections on mobile */
  html body header.top-bar > * {
    max-width: none !important;
  }

  /* Unified mobile header — same pill shape as login screen
     Must use very high specificity to override desktop rules */
  html body.theme-dark:not(.auth-visible) header.top-bar,
  html body.theme-light:not(.auth-visible) header.top-bar,
  html body:not(.auth-visible) .app-wrapper > header.top-bar,
  html body:not(.auth-visible) header.top-bar {
    position: sticky !important;
    top: 8px !important;
    left: auto !important;
    right: auto !important;
    margin: 8px auto 0 !important;
    width: calc(100% - 16px) !important;
    max-width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    border-radius: var(--radius-pill) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  /* Top-bar right side: compact row, NOT full-width, NOT hidden */
  html body header.top-bar .top-bar-right,
  html body header.top-bar .top-right,
  html body header.top-bar > .top-bar-right,
  .top-bar .top-right,
  .top-bar .top-bar-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    order: unset !important;
    gap: 6px !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Top-bar left side */
  html body header.top-bar .top-bar-left,
  .top-bar .top-bar-left {
    display: flex !important;
    width: auto !important;
    flex: 0 0 auto !important;
    order: unset !important;
    flex-shrink: 0 !important;
  }

  /* Hide user label on mobile (login screen style = no user label) */
  html body header.top-bar .current-user-label,
  .top-bar .current-user-label {
    display: none !important;
    position: static !important;
    transform: none !important;
    width: 0 !important;
    flex: 0 0 0px !important;
  }

  /* Ensure controls inside top-right are visible */
  html body header.top-bar .theme-toggle-btn,
  html body header.top-bar .lang-switch,
  html body header.top-bar .btn-logout-new:not(.hidden) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Reduce side padding on main content */
  .main-content {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .app-wrapper {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* ==========================================================================
   v2.4.9 NUCLEAR TOP-BAR FIX — SINGLE SOURCE OF TRUTH
   This block MUST be the LAST in style.css. It overrides ALL previous rules.
   The login screen top-bar is the REFERENCE design. App must match it.
   ========================================================================== */

/* --- RESET: Kill body padding that creates white stripe --- */
html body { padding-top: 0 !important; }

/* --- DESKTOP: Unified top-bar (all states) --- */
/* v2.4.9: Top-bar layout reset — background handled by Dynamic Island rules above */
html body header.top-bar {
  position: sticky !important;
  top: 12px !important;
  z-index: 1000 !important;
  margin: 12px auto 0 !important;
  width: calc(100% - 24px) !important;
  max-width: 1200px !important;
  height: 52px !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
  border-radius: 16px !important;
  /* DO NOT set background here — Dynamic Island rules handle it */
  border: 1px solid transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 0 24px !important;
  overflow: visible !important;
  transform: none !important;
}
body.theme-light header.top-bar {
  border-color: rgba(0, 0, 0, 0.10) !important;
}

/* --- LEFT: brand/logo --- */
/* v6.4.5: flex:1 1 0 — equal width with right side to push account to TRUE center */
html body header.top-bar .top-bar-left {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  order: 1 !important;
}

/* --- CENTER: account switcher wrapper (contains user greeting) --- */
/* v6.4.5: natural width, centered by equal-flex left+right siblings */
html body header.top-bar div.account-switcher-wrapper:not(.accsw-hidden) {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  justify-content: center !important;
  order: 2 !important;
  max-width: 45vw !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
/* Force the label inside wrapper: static, truncate on overflow */
html body header.top-bar div.account-switcher-wrapper > .current-user-label {
  flex-shrink: 1 !important;
  position: static !important;
  left: auto !important;
  transform: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* --- CENTER: user greeting (desktop only, hidden on mobile) --- */
html body header.top-bar .current-user-label {
  flex: 0 1 auto !important;
  max-width: 200px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  position: static !important;
  left: auto !important;
  transform: none !important;
}

/* --- RIGHT: controls (theme / lang / logout) — ALWAYS VISIBLE --- */
/* v6.4.5: flex:1 1 0 — equal width with left side to center account switcher */
html body header.top-bar .top-bar-right,
html body header.top-bar .top-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
  margin-left: 0 !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  order: 3 !important;
}
html body header.top-bar .theme-toggle-btn,
html body header.top-bar .lang-switch,
html body header.top-bar .lang-btn {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html body header.top-bar .btn-logout-new:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html body header.top-bar .btn-logout-new span {
  /* Hide text on mobile, keep icon */
}

/* --- MOBILE 768px: pill shape, same as login --- */
@media (max-width: 768px) {
  html body header.top-bar {
    width: calc(100% - 16px) !important;
    margin: 8px auto 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 16px !important;
    border-radius: var(--radius-pill) !important;
    gap: 8px !important;
    /* BUG-1 FIX: flex-start + margin-left:auto on right side eliminates the huge gap */
    justify-content: flex-start !important;
    /* BUG-2 FIX: unified top with safe-area — same value for auth & app states */
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
  }
  /* BUG-1 FIX: prevent .top-bar-left from growing to fill remaining space.
     flex:1 1 0% was making it take ~80% width → massive empty gap on mobile. */
  html body header.top-bar .top-bar-left {
    flex: 0 0 auto !important;
  }
  /* v6.5.1: login-account-picker centered with flex:1 — no left drift */
  html body header.top-bar .login-account-picker:not(.hidden) {
    flex: 1 1 0 !important;
    max-width: none !important;
    overflow: visible !important;
    justify-content: center !important;
  }
  /* Hide user greeting on mobile */
  html body header.top-bar .current-user-label,
  html body header.top-bar #currentUserLabel {
    display: none !important;
    width: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Right controls: compact, push to end */
  html body header.top-bar .top-bar-right,
  html body header.top-bar .top-right {
    gap: 6px !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }
  /* Hide logout text, keep icon */
  html body header.top-bar .btn-logout-new span {
    display: none !important;
  }
  /* Brand text — show full name on desktop, short on mobile */
  html body header.top-bar .brand-name {
    display: inline-flex !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  html body header.top-bar .brand-name-short {
    display: none !important;
  }
  /* No body padding */
  html body { padding-top: 0 !important; }
  /* Dark bg always */
  html, body { background: #0b0b0c !important; }
  body.theme-light, html.theme-light { background: #f6f7f9 !important; }
}

/* --- MOBILE 480px: even more compact --- */
@media (max-width: 480px) {
  html body header.top-bar {
    padding: 0 12px !important;
  }
}

/* --- Hide admin tabs on mobile (bottom nav exists) --- */
@media (max-width: 768px) {
  .admin-tabs-wrapper,
  .admin-tabs,
  .admin-tab-btn {
    display: none !important;
  }
}

/* --- end v2.4.9 NUCLEAR TOP-BAR FIX --- */

/* ================================================================
   v2.4.9 UX POLISH — живий UI без редизайну
   ================================================================ */

/* ── Keyframes ── */
@keyframes ux-fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes ux-slide-up   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ux-scale-in   { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes ux-bounce-in  { 0% { transform: scale(0.85); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes ux-bell-ring  { 0%,100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(6deg); } 80% { transform: rotate(-3deg); } }
@keyframes ux-glow-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); } 50% { box-shadow: 0 0 12px 2px rgba(59,130,246,0.25); } }

/* ── 1. TOP BAR BUTTONS — bigger, rounder, animated ── */

/* Common style for all top-bar action buttons */
header.top-bar .notifications-bell,
header.top-bar .theme-toggle-btn,
header.top-bar .lang-btn,
header.top-bar .btn-logout-new {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Hover — flat, no shadow, no scale */
header.top-bar .notifications-bell:hover,
header.top-bar .theme-toggle-btn:hover,
header.top-bar .lang-btn:hover,
header.top-bar .btn-logout-new:hover {
  transform: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

/* Active — press-in */
header.top-bar .notifications-bell:active,
header.top-bar .theme-toggle-btn:active,
header.top-bar .lang-btn:active,
header.top-bar .btn-logout-new:active {
  transform: scale(0.9) !important;
  transition-duration: 0.08s !important;
}

/* Bell icon centering & ring animation on hover */
header.top-bar .notifications-bell {
  font-size: 0 !important;     /* hide stray text */
}
header.top-bar .notifications-bell .notifications-bell-icon {
  font-size: 20px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
header.top-bar .notifications-bell:hover .notifications-bell-icon {
  animation: ux-bell-ring 0.6s ease-in-out !important;
}

/* Logout — hide text on mobile, show just icon */
header.top-bar .btn-logout-new {
  gap: 0 !important;
  font-size: 0 !important;
}
header.top-bar .btn-logout-new svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}
header.top-bar .btn-logout-new:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  box-shadow: none !important;
}

/* Lang button — active glow */
header.top-bar .lang-btn.active {
  animation: ux-glow-pulse 2s ease-in-out infinite !important;
}

/* Light theme adjustments */
body.theme-light header.top-bar .notifications-bell:hover,
body.theme-light header.top-bar .theme-toggle-btn:hover,
body.theme-light header.top-bar .lang-btn:hover {
  box-shadow: none !important;
  transform: none !important;
}

/* Mobile sizing — same as desktop for perfect circles */
@media (max-width: 768px) {
  header.top-bar .notifications-bell,
  header.top-bar .theme-toggle-btn,
  header.top-bar .lang-btn,
  header.top-bar .btn-logout-new {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
  }
}

/* ── 2. PANEL / TAB / MENU ANIMATIONS ── */

/* Tab content — fade+slide when becoming active */
.tab-content.active,
.settings-section.active,
.admin-tab-content.active {
  animation: ux-slide-up 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Cards appearing */
.card,
.stat-card,
.admin-card,
.home-summary-card,
.home-card {
  animation: ux-fade-in 0.3s ease both;
}

/* Modals / overlays */
.modal.show .modal-content,
.modal.visible .modal-content,
.popup-overlay:not(.hidden) + .popup,
.mobile-more-popup:not(.hidden) {
  animation: ux-scale-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

/* Notifications dropdown open */
.notifications-dropdown.open {
  animation: ux-slide-up 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important;
}

/* ── 3. PASSWORD EYE ICON — тільки око без бордера, адаптивний розмір (більше на десктопі, менше на мобільному) ── */

.password-toggle,
.toggle-password,
.password-input-wrapper .password-toggle {
  width: 28px !important;
  height: 28px !important;
  padding: 2px !important;
  font-size: 14px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: none !important;
  opacity: 0.8 !important;
  transition: opacity 0.15s ease, color 0.15s ease !important;
}
.password-toggle:hover,
.toggle-password:hover {
  opacity: 1 !important;
  background: transparent !important;
  transform: none !important;
}
.password-toggle svg,
.toggle-password svg {
  width: 18px !important;
  height: 18px !important;
}
@media (max-width: 768px) {
  .password-toggle,
  .toggle-password,
  .password-input-wrapper .password-toggle {
    width: 20px !important;
    height: 20px !important;
  }
  .password-toggle svg,
  .toggle-password svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }
}
body.theme-light .password-toggle,
body.theme-light .toggle-password {
  background: transparent !important;
  border: none !important;
}
body.theme-light .password-toggle:hover,
body.theme-light .toggle-password:hover {
  background: transparent !important;
}

/* ── 4. CONTENT WINDOWS & TOP BAR — more breathing room ── */

/* Desktop top bar — comfortable but compact */
@media (min-width: 769px) {
  html body:not(.auth-visible) header.top-bar {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 24px !important;
  }
}

/* Content panels — more padding, wider */
.tab-content,
.admin-tab-content {
  padding: 20px !important;
}
@media (min-width: 769px) {
  .tab-content,
  .admin-tab-content {
    padding: 28px !important;
  }
}

/* Cards — more internal space */
.card,
.admin-card,
.home-card,
.stat-card,
.home-summary-card {
  padding: 20px !important;
  border-radius: 16px !important;
}
@media (min-width: 769px) {
  .card,
  .admin-card,
  .home-card,
  .stat-card,
  .home-summary-card {
    padding: 24px !important;
  }
}

/* Main container — less cramped on mobile */
@media (max-width: 768px) {
  .app-wrapper,
  .main-content,
  #mainContent {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ── 5. "ЩЕ" MENU — smooth open from bottom ── */

.mobile-more-popup {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.25s ease,
              visibility 0s !important;
}
.mobile-more-popup.hidden {
  transform: translateY(30px) scale(0.92) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: transform 0.2s ease,
              opacity 0.2s ease,
              visibility 0s 0.2s !important;
}
.mobile-more-popup:not(.hidden) {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Overlay — smoother fade */
.mobile-more-popup-overlay {
  transition: opacity 0.25s ease !important;
}

/* ── 6. 9-BUTTON GRID — proper layout, equal sizing ── */

/* The grid container is created inline in JS, override with class targeting */
#mobileBottomSheet > div,
.mobile-more-popup .mobile-more-popup-grid,
.mobile-more-popup > div:first-child {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
}

/* Individual tile — bottom-nav style, centered */
.more-grid-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 12px 4px 8px !important;
  min-height: 56px !important;
  border-radius: 14px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: none !important;
  gap: 5px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  outline: none !important;
  transform-origin: center center !important;
  -webkit-tap-highlight-color: transparent !important;
}
.more-grid-tile:focus,
.more-grid-tile:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.more-grid-tile:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  border: none !important;
  transform: none !important;
  box-shadow: none !important;
}
.more-grid-tile:active {
  background: rgba(59, 130, 246, 0.15) !important;
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Icon inside tile — 24px, no clipping */
.more-grid-tile > div:first-child {
  width: 24px !important;
  height: 24px !important;
  margin: 0 auto 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

/* Label inside tile — visible, centered */
.more-grid-tile span {
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
  display: block !important;
  width: 100% !important;
}

/* Light theme */
body.theme-light .more-grid-tile {
  background: transparent !important;
  border: none !important;
}
body.theme-light .more-grid-tile:hover {
  background: rgba(59, 130, 246, 0.08) !important;
}

/* "Ще" popup grid tiles (circle style) — no movement on hover */
.mobile-popup-circle {
  transition: background 0.15s ease, transform 0.15s ease !important;
  outline: none !important;
  transform-origin: center center !important;
  -webkit-tap-highlight-color: transparent !important;
}
.mobile-popup-circle:focus,
.mobile-popup-circle:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.mobile-popup-circle:hover {
  transform: none !important;
  background: rgba(59, 130, 246, 0.08) !important;
}
.mobile-popup-circle:active {
  transform: scale(0.95) !important;
}
.popup-circle-icon {
  width: 18px !important;
  height: 18px !important;
  overflow: visible !important;
}
.popup-circle-label {
  font-size: 10px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* ── 7. AI COMMANDS — bigger input, better readability ── */

/* AI command input */
#aiCommandInput {
  min-width: 0 !important;
  width: 100% !important;
  padding: 14px 18px !important;
  font-size: 15px !important;
  border-radius: 12px !important;
  line-height: 1.5 !important;
}
@media (max-width: 768px) {
  #aiCommandInput {
    font-size: 16px !important;  /* prevent zoom on iOS */
  }
}

/* AI commands panel — wider, more breathing room */
.ai-commands-panel {
  padding: 24px !important;
  border-radius: 18px !important;
}

/* AI chat input area — more space */
.pm-ai-chat__input,
.ai-chat-container input,
.ai-chat-block textarea,
.ai-chat-block input {
  padding: 14px 18px !important;
  font-size: 15px !important;
  border-radius: 12px !important;
  line-height: 1.5 !important;
}
@media (max-width: 768px) {
  .pm-ai-chat__input,
  .ai-chat-container input,
  .ai-chat-block textarea,
  .ai-chat-block input {
    font-size: 16px !important;
  }
}

/* AI chat messages — more space */
.ai-chat-message {
  padding: 14px 18px !important;
  border-radius: 14px !important;
  line-height: 1.6 !important;
  animation: ux-slide-up 0.2s ease both !important;
}

/* ── 8. BOTTOM NAV — subtle active indicator ── */

.mobile-nav-item {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative !important;
}
.mobile-nav-item.active::after {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 20px !important;
  height: 3px !important;
  border-radius: 2px !important;
  background: var(--accent, #3b82f6) !important;
}
.mobile-nav-item:active {
  transform: scale(0.88) !important;
}

/* ── 9. GLOBAL TRANSITIONS — smooth everything ── */

/* Buttons — universal press effect */
button, .btn, [role="button"] {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

/* Inputs — smooth focus ring */
input:focus, textarea:focus, select:focus {
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* Links — smooth color change */
a {
  transition: color 0.15s ease, opacity 0.15s ease;
}

/* ── 10. SCROLLBAR POLISH ── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
body.theme-light ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
body.theme-light ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* ── 11. AI Quick Action buttons (mass messaging) ── */
.ai-quick-action:hover {
  transform: translateY(-1px) scale(1.03) !important;
  filter: brightness(1.2) !important;
}
.ai-quick-action:active {
  transform: scale(0.95) !important;
}

/* ── 12. QA TAB — hide deprecated tile from grid ── */
.more-grid-tile[data-tab="tab-qa"],
.mobile-popup-circle[data-tab="tab-qa"] {
  display: none !important;
}

/* ── 13. КАРТКА ЮЗЕРА — жодних анімацій при наведенні ── */
.account-card,
#accountsList .account-card,
html body .account-card,
.card.account-card {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}
.account-card:hover,
#accountsList .account-card:hover,
html body .account-card:hover,
.card.account-card:hover,
.card:hover .account-card,
.kpi-card:hover .account-card {
  transform: none !important;
  transition: none !important;
  animation: none !important;
  box-shadow: inherit !important;
}
/* Без зміни тіні/бордера при hover — повністю статична картка */
html body .account-card,
html body .account-card:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}
body.theme-light .account-card,
body.theme-light .account-card:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

@media (hover: hover) {
  .account-card,
  .account-card:hover,
  #accountsList .account-card,
  #accountsList .account-card:hover {
    transform: none !important;
    transition: none !important;
  }
}

@media (hover: hover) and (min-width: 768px) {
  .account-card,
  .account-card:hover {
    transform: none !important;
    transition: none !important;
  }
}

/* ── 14. Іконка «око» на картці та в паролі — ще менша ── */
.account-info-btn,
html body .account-info-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
}
.account-info-btn svg,
.account-remove-btn svg,
.account-restore-btn svg {
  width: 10px !important;
  height: 10px !important;
}

/* ── end v2.4.9 UX POLISH ── */

/* ================================================================
   v2.4.9 SPACE OPTIMIZATION — максимальна корисна площа
   ================================================================ */

/* ── 1. AI CHAT — proper flex layout, input pinned to bottom ── */
/* BUG D FIX: was clamp(320px,95vw,1100px) which left empty space on the side */
.ai-chat-wrapper,
.ai-chat-container {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.ai-chat-block {
  padding: 16px !important;
}
.ai-chat-messages {
  flex: 1 !important;
  min-height: 40vh !important;
  max-height: 55vh !important;
}
/* AI Chat input area — pinned to bottom */
.ai-chat-input-area {
  padding: 10px 12px !important;
  gap: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex-shrink: 0 !important;
}
#aiChatInput {
  padding: 10px 14px !important;
  font-size: 15px !important;
}
/* AI hints — compact row, exactly 4 items */
.ai-chat-hints {
  padding: 4px 8px 8px !important;
}
.ai-hints-row {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.ai-hint-btn {
  padding: 6px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 16px !important;
  white-space: nowrap !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.ai-hint-btn:hover {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
}
body.theme-light .ai-hint-btn {
  border-color: rgba(0, 0, 0, 0.08) !important;
  background: rgba(0, 0, 0, 0.03) !important;
  color: rgba(0, 0, 0, 0.6) !important;
}

/* ── 2. CHAT ("Чати") — wider messages, less padding ── */
.chat-container {
  height: calc(100vh - 160px) !important;
}
.chat-messages-container {
  padding: 10px 12px !important;
}
.chat-input-container {
  padding: 8px 10px !important;
  gap: 8px !important;
}
.chat-input {
  padding: 10px 14px !important;
  font-size: 14px !important;
}
.chat-list-panel {
  width: 260px !important;
  min-width: 220px !important;
}
@media (max-width: 768px) {
  .chat-list-panel {
    width: 100% !important;
    min-width: 0 !important;
  }
  .chat-container {
    height: calc(100vh - 140px) !important;
  }
}

/* ── 3. CUSTOM AI REPORT (replaces demo) ── */
.ai-custom-report {
  padding: 16px !important;
}
.ai-report-textarea {
  width: 100% !important;
  min-height: 160px !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  border-radius: 12px !important;
  resize: vertical !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: inherit !important;
  font-family: inherit !important;
}
.ai-report-textarea:focus {
  border-color: rgba(59, 130, 246, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  outline: none !important;
}
@media (max-width: 768px) {
  .ai-report-textarea {
    font-size: 16px !important;
    min-height: 140px !important;
  }
}
body.theme-light .ai-report-textarea {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
/* Hide old daily demo block if any remnants */
#aiDailyDemoBlock {
  display: none !important;
}

/* ── 4. "ЩЕ" MENU — compact tiles, smaller icons ── */
.more-grid-tile {
  padding: 10px 6px !important;
  min-height: 52px !important;
  gap: 4px !important;
  border-radius: 12px !important;
}
.more-grid-tile > div:first-child {
  width: 18px !important;
  height: 18px !important;
  margin-bottom: 2px !important;
  overflow: visible !important;
}
.more-grid-tile span {
  font-size: 10px !important;
  font-weight: 500 !important;
}
/* Popup circle style tiles — compact */
.popup-circle-icon {
  width: 28px !important;
  height: 28px !important;
}
.popup-circle-icon svg {
  width: 16px !important;
  height: 16px !important;
}
.popup-circle-label {
  font-size: 9px !important;
  white-space: normal !important;
}
.mobile-more-popup {
  padding: 12px !important;
  max-width: 360px !important;
}
.mobile-more-popup-grid {
  gap: 8px !important;
}
.mobile-popup-circle {
  padding: 8px 4px !important;
  gap: 4px !important;
  min-width: 52px !important;
}

/* ── 5. GLOBAL SPACE — less side padding ── */
@media (max-width: 768px) {
  .tab-content,
  .admin-tab-content {
    padding: 8px 6px !important;
  }
  .admin-block {
    padding: 14px 10px !important;
  }
  .app-wrapper,
  .main-content,
  #mainContent {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}
@media (min-width: 769px) {
  .tab-content,
  .admin-tab-content {
    padding: 16px 12px !important;
  }
}

/* Admin tools split — less gap */
.admin-tools-split {
  gap: 12px !important;
}
.admin-tools-split .admin-block {
  padding: 14px !important;
}

/* Admin block sub-text — tighter */
.admin-block-sub {
  margin-bottom: 8px !important;
  font-size: 13px !important;
}

/* ── end v2.4.9 SPACE OPTIMIZATION ── */

/* ================================================================
   v2.4.9 CRITICAL FIXES (7 blockers)
   ================================================================ */

/* ── FIX 1: GAP BETWEEN TOP-BAR AND CONTENT ──
   Root cause: margin-top 8px + app-wrapper padding-top 6px +
   main-content padding-top 12px + tab-content padding-top 8px = ~33px.
   Target: ~10px total. */

/* Reduce top-bar margin-top */
@media (max-width: 768px) {
  html body:not(.auth-visible) header.top-bar,
  body:not(.auth-visible) .app-wrapper > header.top-bar {
    margin-top: 4px !important;
  }
}
@media (min-width: 769px) {
  html body:not(.auth-visible) header.top-bar,
  body:not(.auth-visible) .app-wrapper > header.top-bar {
    margin-top: 6px !important;
  }
}

/* Reduce app-wrapper padding-top (gap between wrapper edge and top-bar) */
html body .app-wrapper {
  padding-top: 0 !important;
}

/* Reduce main-content / tab-content padding-top (gap between top-bar and first content) */
html body .main-content,
html body #mainContent,
html body main {
  padding-top: 4px !important;
}
html body .tab-content.active,
html body .admin-tab-content.active {
  padding-top: 4px !important;
}

/* ── FIX 2: HIDE "РОБОЧИЙ ПРОСТІР" BLOCK ──
   Hidden via CSS so it can be re-enabled later via feature flag. */
#aiWorkspaceToolsSplit {
  display: none !important;
}

/* ── AI EXECUTIVE SUMMARY PANEL ── */
.ai-exec-panel {
  background: var(--bg-card, #1a1a22);
  border: 1px solid var(--stroke, rgba(255,255,255,0.08));
  border-radius: 16px;
  padding: 28px 28px 20px;
}
.ai-exec-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.ai-exec-header-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ai-exec-title { font-size: 20px; font-weight: 700; color: var(--ink, #f5f5f5); margin: 0; letter-spacing: -0.3px; }
.ai-exec-network { font-size: 13px; color: var(--muted, #888); background: rgba(255,255,255,0.05); padding: 3px 10px; border-radius: 6px; }
.ai-exec-header-right { display: flex; align-items: center; gap: 10px; }
.ai-exec-timestamp { font-size: 11px; color: var(--muted-2, #666); }
.ai-exec-refresh-btn {
  font-size: 12px; font-weight: 600; padding: 5px 14px;
  background: rgba(255,255,255,0.06); color: var(--ink, #ccc);
  border: 1px solid var(--stroke, rgba(255,255,255,0.1)); border-radius: 8px;
  cursor: pointer; transition: background .15s;
}
.ai-exec-refresh-btn:hover { background: rgba(255,255,255,0.12); }

/* Status row */
.ai-exec-status-row { margin-bottom: 16px; }
.ai-exec-status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; padding: 6px 16px;
  border-radius: 20px; letter-spacing: 0.2px;
}
.ai-exec-chip-green { background: rgba(34,197,94,0.14); color: #22c55e; border: 1px solid rgba(34,197,94,0.25); }
.ai-exec-chip-blue { background: rgba(59,130,246,0.14); color: #60a5fa; border: 1px solid rgba(59,130,246,0.25); }
.ai-exec-chip-yellow { background: rgba(234,179,8,0.14); color: #eab308; border: 1px solid rgba(234,179,8,0.25); }
.ai-exec-chip-red { background: rgba(239,68,68,0.14); color: #ef4444; border: 1px solid rgba(239,68,68,0.25); }
.ai-exec-chip-purple { background: rgba(168,85,247,0.14); color: #a855f7; border: 1px solid rgba(168,85,247,0.25); }

/* Main summary text */
.ai-exec-summary-text {
  font-size: 15px; line-height: 1.65; color: var(--ink, #e0e0e0);
  margin-bottom: 20px; max-width: 800px;
}
.ai-exec-summary-text p { margin: 0; }

/* Subsections grid */
.ai-exec-sections {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 16px;
}
@media (max-width: 700px) { .ai-exec-sections { grid-template-columns: 1fr; } }

.ai-exec-section {
  padding: 14px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--stroke, rgba(255,255,255,0.06));
  border-radius: 12px;
}
.ai-exec-section-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--muted, #888);
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.ai-exec-section-body {
  font-size: 13px; line-height: 1.55; color: var(--ink, #ddd);
}
.ai-exec-section-body li {
  margin-bottom: 4px; list-style: none; padding-left: 0;
}
.ai-exec-section-body li::before { content: ''; }
.ai-exec-section-body ul { margin: 0; padding: 0; }

/* Footer */
.ai-exec-footer {
  font-size: 11px; color: var(--muted-2, #555);
  border-top: 1px solid var(--stroke, rgba(255,255,255,0.06));
  padding-top: 12px; margin-top: 4px;
  display: flex; gap: 16px; flex-wrap: wrap;
}
.ai-exec-footer span { display: inline-flex; align-items: center; gap: 4px; }

/* Light theme */
body.theme-light .ai-exec-panel { background: #fff; border-color: rgba(0,0,0,0.08); }
body.theme-light .ai-exec-network { background: rgba(0,0,0,0.04); }
body.theme-light .ai-exec-refresh-btn { background: rgba(0,0,0,0.04); color: #333; border-color: rgba(0,0,0,0.1); }
body.theme-light .ai-exec-section { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }

/* ── AI RECOMMENDATION CARDS ── */
.ai-rec-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.ai-summary-card {
  flex: 1 1 130px;
  min-width: 110px;
  max-width: 220px;
  padding: 16px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--stroke, rgba(255,255,255,0.08));
  border-radius: 12px;
  text-align: center;
}
.ai-summary-card-icon { font-size: 20px; margin-bottom: 4px; }
.ai-summary-card-value { font-size: 26px; font-weight: 700; color: var(--ink, #f5f5f5); line-height: 1.15; }
.ai-summary-card-label { font-size: 11px; color: var(--muted, #888); margin-top: 5px; text-transform: uppercase; letter-spacing: 0.4px; }
.ai-card-good .ai-summary-card-value, .ai-card-good .ai-seller-card-eff { color: var(--good, #22c55e); }
.ai-card-warn .ai-summary-card-value, .ai-card-warn .ai-seller-card-eff { color: #eab308; }
.ai-card-bad .ai-summary-card-value, .ai-card-bad .ai-seller-card-eff { color: var(--bad, #ef4444); }

/* Per-seller horizontal cards */
.ai-rec-seller-cards { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ai-seller-card {
  flex: 1 1 170px;
  min-width: 150px;
  max-width: 250px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--stroke, rgba(255,255,255,0.08));
  border-radius: 10px;
  transition: border-color .2s;
}
.ai-seller-card:hover { border-color: var(--stroke-2, rgba(255,255,255,0.18)); }
.ai-seller-card-name { font-size: 13px; font-weight: 600; color: var(--ink, #f5f5f5); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-seller-card-loc { font-size: 11px; color: var(--muted-2, #666); margin-bottom: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-seller-card-stats { display: flex; justify-content: space-between; align-items: baseline; }
.ai-seller-card-hours { font-size: 15px; font-weight: 700; color: var(--ink, #f5f5f5); }
.ai-seller-card-eff { font-size: 13px; font-weight: 600; }
.ai-seller-card.ai-card-good { border-left: 3px solid var(--good, #22c55e); }
.ai-seller-card.ai-card-warn { border-left: 3px solid #eab308; }
.ai-seller-card.ai-card-bad { border-left: 3px solid var(--bad, #ef4444); }

/* Customer reactions horizontal cards */
.reactions-cards { display: flex; flex-wrap: wrap; gap: 10px; }
.reaction-stat-card {
  flex: 0 1 auto;
  min-width: 90px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--stroke, rgba(255,255,255,0.08));
  border-radius: 12px;
  text-align: center;
}
.reaction-stat-refusals { min-width: 130px; }
.reaction-stat-icon { font-size: 20px; margin-bottom: 3px; }
.reaction-stat-value { font-size: 26px; font-weight: 700; color: var(--bad, #ef4444); }
.reaction-stat-label { font-size: 11px; color: var(--muted, #888); margin-top: 4px; }
.reaction-stat-demand { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.reaction-stat-keyword { font-size: 13px; font-weight: 600; color: var(--ink, #f5f5f5); }
.reaction-stat-count { font-size: 12px; font-weight: 700; color: var(--muted, #888); }

/* Light theme overrides */
body.theme-light .ai-summary-card,
body.theme-light .ai-seller-card,
body.theme-light .reaction-stat-card { background: rgba(0,0,0,0.025); }

@media (max-width: 600px) {
  .ai-summary-card { flex: 1 1 100%; max-width: none; }
  .ai-seller-card { min-width: 100%; max-width: none; }
}

/* ── FIX 4: NOTIFICATIONS DROPDOWN — CENTERED ──
   Root cause: width calc(100vw-32px)=608px + right:0 relative to 38px bell
   = left edge at -570px (off-screen). Fix: reasonable width + proper positioning. */

/* Override base dropdown width */
header.top-bar .notifications-dropdown {
  width: 340px !important;
  max-width: calc(100vw - 20px) !important;
}

/* Mobile: fixed position centered via equal left/right (no transform) */
@media (max-width: 768px) {
  header.top-bar .notifications-dropdown {
    position: fixed !important;
    top: 68px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 1001 !important;
  }
  header.top-bar .notifications-dropdown.open {
    transform: none !important;
    animation: none !important;
  }
}

/* Desktop: absolute under bell, right-aligned */
@media (min-width: 769px) {
  header.top-bar .notifications-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    width: 380px !important;
  }
}

/* ── FIX 5: "ЩЕ" MENU GRID — force uniform tiles ── */
/* Override inline styles from index.html with higher specificity */
html body .mobile-more-popup .mobile-more-popup-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  padding: 4px !important;
}
html body .mobile-more-popup .mobile-more-popup-grid > * {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 72px !important;
  max-height: 90px !important;
  padding: 10px 6px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
html body .mobile-more-popup .mobile-more-popup-grid > *:hover {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
}
body.theme-light .mobile-more-popup .mobile-more-popup-grid > * {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}
html body .mobile-more-popup .mobile-more-popup-grid .popup-circle-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
}
html body .mobile-more-popup .mobile-more-popup-grid .popup-circle-icon svg {
  width: 16px !important;
  height: 16px !important;
}
html body .mobile-more-popup .mobile-more-popup-grid .popup-circle-label {
  font-size: 9px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: normal !important;
  word-break: break-word !important;
  white-space: nowrap !important;
}

/* ── FIX 6: MOBILE BOTTOM NAV ICONS — smaller ── */
@media (max-width: 768px) {
  html body .mobile-nav-item svg {
    width: 20px !important;
    height: 20px !important;
  }
  html body .mobile-nav-item {
    min-height: 48px !important;
    padding: 6px 4px !important;
    gap: 2px !important;
  }
  html body .mobile-nav-item span {
    font-size: 9px !important;
  }
}

/* ── FIX 7: TOP BAR BUTTONS — PERFECT CIRCLES ──
   Root cause: flex container shrinks button widths below min-width.
   Fix: max-width + flex-shrink:0 + box-sizing:border-box. */
header.top-bar .notifications-bell,
header.top-bar .theme-toggle-btn,
header.top-bar .lang-btn,
header.top-bar .btn-logout-new {
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  max-width: 42px !important;
  max-height: 42px !important;
}
@media (max-width: 768px) {
  header.top-bar .notifications-bell,
  header.top-bar .theme-toggle-btn,
  header.top-bar .lang-btn,
  header.top-bar .btn-logout-new {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
  }
}
@media (min-width: 769px) {
  header.top-bar .notifications-bell,
  header.top-bar .theme-toggle-btn,
  header.top-bar .lang-btn,
  header.top-bar .btn-logout-new {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
  }
}

/* Lang button — force circle even with text content */
header.top-bar .lang-btn {
  font-size: 10px !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
}

/* ── end v2.4.9 CRITICAL FIXES ── */

/* ══════════════════════════════════════════════════════════════
   v2.4.9-hotfix: NUCLEAR — kill ALL shadows on topbar buttons
   This block is at the very end so it wins over everything above.
   ══════════════════════════════════════════════════════════════ */
.theme-toggle-btn,
.top-bar .theme-toggle-btn,
header.top-bar .theme-toggle-btn,
html body .theme-toggle-btn,
html body header.top-bar .theme-toggle-btn,
body.theme-light .theme-toggle-btn,
body.theme-light .top-bar .theme-toggle-btn,
body.theme-light header.top-bar .theme-toggle-btn {
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.theme-toggle-btn:hover,
.theme-toggle-btn:focus,
.theme-toggle-btn:active,
.top-bar .theme-toggle-btn:hover,
header.top-bar .theme-toggle-btn:hover,
body.theme-light .theme-toggle-btn:hover,
body.theme-light header.top-bar .theme-toggle-btn:hover {
  box-shadow: none !important;
  filter: none !important;
}

.lang-btn,
.lang-switch .lang-btn,
.top-bar .lang-switch .lang-btn,
header.top-bar .lang-btn,
html body .lang-btn,
body.theme-light .lang-btn,
body.theme-light .top-bar .lang-switch .lang-btn {
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.lang-btn:hover,
.lang-btn:focus,
.lang-btn:active,
body.theme-light .lang-btn:hover {
  box-shadow: none !important;
  filter: none !important;
}

.btn-logout-new,
.top-bar .btn-logout-new,
header.top-bar .btn-logout-new,
html body .btn-logout-new,
body.theme-light .btn-logout-new {
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.btn-logout-new:hover,
.btn-logout-new:focus,
.btn-logout-new:active,
body.theme-light .btn-logout-new:hover {
  box-shadow: none !important;
  filter: none !important;
}

.lang-switch,
.top-bar .lang-switch,
header.top-bar .lang-switch {
  box-shadow: none !important;
  filter: none !important;
  overflow: hidden !important;
}

.notifications-bell,
header.top-bar .notifications-bell {
  box-shadow: none !important;
  filter: none !important;
  overflow: hidden !important;
}
/* ── end v2.4.9-hotfix ── */

/* v2.4.9-scroll-fix: DESKTOP — прокрутка тільки сторінки, не всередині блоку (останній блок, має пріоритет) */
@media (min-width: 769px) {
  html { overflow-y: auto !important; overflow-x: hidden !important; }
  body,
  body .app-wrapper,
  body .main-content,
  body #appSection,
  body #adminPanel,
  body #adminPanel.admin-card,
  body .admin-card,
  body section.admin-card,
  body .card.admin-card,
  body .app-sections,
  body .tab-content {
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    overflow-y: visible !important;
  }
}

/* =====================================================================
   v2.4.9 FINAL: DESKTOP — сторінка ОБОВ'ЯЗКОВО росте за контентом.
   Цей блок в самому кінці файлу, має найвищий пріоритет.
   Проблема: flex-ланцюжок body→.app-wrapper→main→#appSection→#adminPanel
   при min-height:100vh + flex:1 стискає контент під висоту екрану.
   Рішення: зламати flex-стиснення, дати всім display:block + height:auto.
   ===================================================================== */
@media (min-width: 769px) {
  /* 1) body: просто дозволяє скролити */
  html, body {
    height: auto !important;
    min-height: 100vh !important; /* щоб фон покривав хоча б екран */
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* 2) .app-wrapper: НЕ flex, щоб не стискав дітей */
  body:not(.auth-visible) .app-wrapper {
    display: block !important;
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 3) main.main-content: НЕ flex:1, просто блок по висоті контенту */
  body:not(.auth-visible) main,
  body:not(.auth-visible) .main-content {
    display: block !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    flex: none !important;
    overflow: visible !important;
  }

  /* 4) #appSection: блок, не flex */
  body:not(.auth-visible) #appSection {
    display: block !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 5) #adminPanel: flex column щоб таби працювали, але висота auto */
  body:not(.auth-visible) #adminPanel,
  body:not(.auth-visible) .admin-card {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 6) Контент вкладки: block, висота по контенту */
  body:not(.auth-visible) .tab-content.active {
    display: block !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 7) Картки всередині: не обрізати */
  body:not(.auth-visible) .card,
  body:not(.auth-visible) .admin-block {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ===== QR Compliance Sticker (БЛОК 1) ===== */
.compliance-sticker-language-control {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.compliance-sticker-language-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.compliance-sticker-language-select {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 4px 10px;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  color: var(--ink);
  background: var(--bg-2);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .2s ease, background-color .25s ease;
}
.compliance-sticker-language-select:focus-within {
  transform: translateY(-2px);
  border-color: #4f8cff;
  box-shadow: 0 10px 28px rgba(79,140,255,.16), 0 0 0 3px rgba(79,140,255,.1);
}
.compliance-sticker-language-select select {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 680;
  box-shadow: none;
  outline: none;
}
.compliance-sticker-language-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(79,140,255,.12);
  color: #4f8cff;
  font-weight: 850;
}
.compliance-sticker-svg-preview {
  width: min(100%, 520px);
  margin: 0 auto;
  transform-origin: 50% 16%;
  transition: opacity .18s ease, transform .32s cubic-bezier(.2,.8,.2,1), filter .18s ease;
  will-change: opacity, transform, filter;
}
.compliance-sticker-svg-preview.is-language-switching {
  opacity: .28;
  transform: translateY(10px) scale(.985);
  filter: blur(3px);
}
.compliance-sticker-svg-preview.is-language-settling {
  animation: compliance-language-settle .44s cubic-bezier(.16,1,.3,1);
}
@keyframes compliance-language-settle {
  0% { opacity: .35; transform: translateY(-8px) scale(.985); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.compliance-sticker-svg-preview svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
.compliance-qr-action[aria-disabled="true"] {
  opacity: .58;
  pointer-events: none;
}
.compliance-qr-action.is-preparing::after {
  content: " ···";
  letter-spacing: .08em;
}
@media (max-width: 640px) {
  .compliance-sticker-language-control {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .compliance-sticker-language-select,
  .compliance-sticker-svg-preview {
    transition: none;
  }
  .compliance-sticker-svg-preview.is-language-settling {
    animation: none;
  }
}
/* Fixed (theme-independent) colours. The sticker's look is controlled by the
   "Колір" selector via updateHtmlPreviewVariant() (JS inline styles), which
   defaults to the DARK variant. The base CSS below mirrors that dark default so
   the sticker is readable even before/without the JS running — previously it
   used theme vars and rendered "УВАГА" dark-on-dark in the app's dark mode. */
.qr-sticker {
  box-sizing: border-box;
  width: min(100%, 400px);
  aspect-ratio: 15 / 17;
  border: 3px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  background: #0b0b0c;
  color: #f5f5f5;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Hard-locks the card to its 150×170mm aspect ratio — without this,
     "aspect-ratio" is only a preferred size and the box grows past it to
     avoid clipping overflowing content (e.g. many stacked languages).
     fitStickerPreview() in index.js then shrinks font-size via --fit-scale
     so text actually fits instead of silently being clipped. */
  overflow: hidden;
}
.qr-sticker-header h2 {
  font-size: calc(var(--fit-scale, 1) * clamp(16px, calc(28px - 1.8px * (var(--lang-count, 1) - 1)), 28px));
  margin: 8px 0;
  letter-spacing: 4px;
  color: #f5f5f5;
}
/* This card is always a dark printable sticker, in both app themes — the
   generic "body.theme-light h2 { color: var(--ink) !important }" fix
   (used elsewhere for readability) would otherwise turn this heading
   near-black on the sticker's black background. */
body.theme-light .qr-sticker-header h2 {
  color: #f5f5f5 !important;
}
.qr-icon {
  font-size: 36px;
}
.qr-sticker-text p {
  font-size: calc(var(--fit-scale, 1) * clamp(9px, calc(14px - 0.7px * (var(--lang-count, 1) - 1)), 14px));
  line-height: 1.5;
  margin: 8px 0;
  color: rgba(245,245,245,0.72);
}
.qr-lang-block {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
body.theme-light .qr-lang-block {
  border-top-color: rgba(0,0,0,0.08);
}
.qr-lang-label {
  font-size: calc(var(--fit-scale, 1) * clamp(9px, calc(13px - 0.7px * (var(--lang-count, 1) - 1)), 13px));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.qr-sticker-text .qr-lang-block p {
  font-size: calc(var(--fit-scale, 1) * clamp(8.5px, calc(13px - 0.7px * (var(--lang-count, 1) - 1)), 13px));
  line-height: 1.4;
  margin: 0;
}
.qr-sticker-code {
  margin: 16px auto;
  display: inline-block;
}
.qr-sticker-code svg {
  display: block;
}
.qr-sticker-scan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 8px;
}
.qr-sticker-scan p {
  font-size: calc(var(--fit-scale, 1) * 16px);
  font-weight: bold;
  margin: 0;
  text-align: left;
  flex: 1;
}
.qr-sticker-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.75;
  color: currentColor;
  flex-shrink: 0;
}
.qr-brand-icon { width: 22px; height: 22px; }
.qr-brand-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.qr-sticker-footer {
  margin-top: 12px;
  border-top: none;
  padding-top: 12px;
}
.qr-sticker-footer .store-name {
  font-weight: bold;
  font-size: 14px;
}
.qr-sticker-footer .store-url {
  font-size: 12px;
  color: #666666;
}
.qr-sticker-footer .legal-ref {
  font-size: 10px;
  color: #888888;
  margin-top: 8px;
}
@media print {
  body * { visibility: hidden; }
  #qr-print-area, #qr-print-area * { visibility: visible; }
  #qr-print-area {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid #000;
    max-width: 350px;
    background: #fff;
    color: #000;
  }
  #qr-print-area .qr-sticker-text p,
  #qr-print-area .qr-sticker-footer .store-url { color: #333; }
  #qr-print-area .qr-sticker-footer .legal-ref { color: #666; }
  #qr-print-area .qr-lang-label { color: #000; }
}

/* QR sticker mobile responsive */
@media (max-width: 600px) {
  .qr-controls-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .qr-controls-row > div {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  .qr-sticker {
    width: min(100%, 240px);
    padding: 12px;
    margin: 12px auto;
  }
  .qr-sticker-header h2 {
    font-size: 14px !important;
    letter-spacing: 2px;
    margin: 4px 0 !important;
  }
  .qr-sticker-text p {
    font-size: 10px;
    margin: 4px 0;
    line-height: 1.3;
  }
  .qr-lang-block {
    margin-top: 6px !important;
    padding-top: 4px !important;
  }
  .qr-lang-label {
    font-size: 8px !important;
  }
  .qr-sticker-text .qr-lang-block p {
    font-size: 8px !important;
    margin: 0 !important;
  }
  .qr-sticker-codes {
    gap: 10px !important;
    margin: 8px auto !important;
  }
  .qr-code-wrap {
    padding: 4px !important;
  }
  .qr-code-wrap svg {
    width: 75px !important;
    height: 75px !important;
  }
  .qr-sticker-codes .qr-code-item > div:last-child {
    font-size: 9px !important;
  }
  .qr-sticker-scan {
    margin-top: 10px !important;
    padding-top: 4px !important;
    gap: 6px !important;
  }
  .qr-sticker-scan p {
    font-size: 11px;
    margin: 0;
  }
  .qr-brand-icon { width: 14px; height: 14px; }
  .qr-brand-name { font-size: 9px; letter-spacing: 0.3px; }
}

/* Compliance checklist (БЛОК 2) */
.compliance-check-item { padding: 8px 12px; border-radius: 6px; margin: 4px 0; font-size: 14px; }
.compliance-check-item.check-ok { background: rgba(76, 175, 80, 0.1); }
.compliance-check-item.check-warn { background: rgba(255, 193, 7, 0.1); }
.compliance-check-item.check-error { background: rgba(244, 67, 54, 0.1); }
.compliance-check-item.check-pending { background: rgba(158, 158, 158, 0.1); }
.legal-link-card {
  display: block; padding: 12px 16px; border-radius: 8px;
  background: var(--card-bg, var(--bg-2)); border: 1px solid var(--border-color, var(--stroke));
  color: var(--text-color, var(--ink)); text-decoration: none;
  transition: border-color 0.2s;
}
.legal-link-card:hover { border-color: var(--accent, #4285f4); }

/* =============================================================================
   v2.4.10: SMOOTH UX ANIMATIONS — global polish
   ============================================================================= */

/* --- Cards: subtle lift on hover --- */
.card {
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

/* --- Buttons: press feedback --- */
.btn-primary,
.btn-secondary,
.btn-outline,
button[type="submit"] {
  transition: transform 120ms ease, box-shadow 150ms ease, background 150ms ease, opacity 150ms ease;
}
.btn-primary:active,
.btn-secondary:active,
.btn-outline:active,
button[type="submit"]:active {
  transform: scale(0.97);
}

/* --- Admin tab buttons: smooth underline + glow --- */
.admin-tab-btn {
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.admin-tab-btn:hover {
  background: rgba(255,255,255,0.06);
}
.admin-tab-btn.active {
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

/* --- Sidebar / navigation items --- */
.mobile-nav-item,
.more-sheet-item {
  transition: background 150ms ease, transform 150ms ease, color 150ms ease;
}
.mobile-nav-item:active,
.more-sheet-item:active {
  transform: scale(0.96);
}

/* --- Modal overlay: fade in --- */
.modal-overlay {
  transition: opacity 200ms ease;
}
.modal-overlay:not(.hidden) {
  animation: fadeIn 200ms ease both;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Modal dialog: slide up --- */
.modal-overlay:not(.hidden) .modal {
  animation: slideUp 250ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Toast / notifications: slide in from top --- */
.welcome-toast,
.login-notification-banner {
  animation: slideDown 300ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Form inputs: focus glow --- */
input:focus,
textarea:focus,
select:focus {
  transition: border-color 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* --- Stat cards / KPI: subtle appear --- */
.stat-card,
.kpi-card,
.summary-card,
.dashboard-card,
.quick-action-card {
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.stat-card:hover,
.kpi-card:hover,
.summary-card:hover,
.dashboard-card:hover,
.quick-action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* --- Badge pulse for attention items --- */
.notification-badge:not(:empty) {
  animation: badgePulse 2s ease infinite;
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* --- Scrollbar styling (thin, dark) --- */
#appScrollRoot::-webkit-scrollbar {
  width: 6px;
}
#appScrollRoot::-webkit-scrollbar-track {
  background: transparent;
}
#appScrollRoot::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
}
#appScrollRoot::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.25);
}

/* --- EXCEPTION: Account card in Personnel — keep hover glow, NO lift, NO button bounce --- */
.account-card {
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
  transform: none !important;
}
.account-card:hover {
  transform: none !important;
}
/* Account card action buttons: bigger hit area, no bounce/scale */
.account-card .account-remove-btn,
.account-card .account-restore-btn,
.account-card .account-info-btn {
  transform: translateY(-50%) !important; /* keep vertical center only */
  transition: background 150ms ease, border-color 150ms ease !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
}
.account-card .account-remove-btn:hover,
.account-card .account-restore-btn:hover,
.account-card .account-info-btn:hover {
  transform: translateY(-50%) !important; /* NO scale, NO lift */
}
.account-card .account-remove-btn:active,
.account-card .account-restore-btn:active,
.account-card .account-info-btn:active {
  transform: translateY(-50%) !important; /* NO scale on press */
}

/* =============================================================================
   v2.4.10: SCROLL FIX — body.app-ready forces correct scroll architecture
   This overrides EVERYTHING including auth-visible, media queries, etc.
   Applied by JS after successful login (manual or auto).
   ============================================================================= */
body.app-ready {
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
body.app-ready .app-wrapper {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
}
body.app-ready #appScrollRoot {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  /* Kill any leftover auth-visible styles */
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}
body.app-ready header.top-bar {
  flex-shrink: 0 !important;
}

/* --- v2.4.10: Google OAuth login button --- */
.google-oauth-section { margin-top: 12px; }
.google-oauth-section.hidden { display: none; }
.auth-divider {
  display: flex; align-items: center; gap: 12px; margin: 12px 0;
  color: var(--muted, #888); font-size: 13px;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border, #333);
}
.btn-google-login {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 10px 16px; border: 1px solid var(--border, #444);
  border-radius: 8px; background: var(--card-bg, #1a1a2e); color: var(--text, #e0e0e0);
  font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color 200ms ease, background 200ms ease;
}
.btn-google-login:hover {
  border-color: var(--accent, #6366f1); background: rgba(99, 102, 241, 0.08);
}
.btn-google-login svg { flex-shrink: 0; }

/* --- Reduce motion for accessibility --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================================================
   Network-Manager-only fields: hide/show with smooth animation
   ================================================ */
.nm-only-field {
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1),
              opacity 0.3s ease,
              margin 0.3s ease;
}
.nm-only-field.nm-hidden {
  display: none !important;
  max-height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}
.nm-only-field.nm-visible {
  display: block !important;
  max-height: 300px;
  opacity: 1;
}

/* ================================================
   Account cards: structured grid layout (Figma)
   Ultra-specific selectors to override all legacy chip styles
   ================================================ */
html body #accountsList .account-card .account-meta,
html body .account-card .account-meta {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: unset !important;
  flex-direction: unset !important;
}
html body #accountsList .account-card .account-meta .meta-item,
html body .account-card .account-meta .meta-item,
html body #accountsList .meta-item {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  padding: 2px 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
  transition: none !important;
}
html body .account-card .account-meta .meta-item.meta-item-full {
  grid-column: 1 / -1 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  margin-top: 4px !important;
  padding-top: 6px !important;
}
html body .account-card .account-meta .meta-label,
html body #accountsList .meta-label {
  color: rgba(255,255,255,0.45) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
html body .account-card .account-meta .meta-value,
html body #accountsList .meta-value {
  color: rgba(255,255,255,0.9) !important;
  font-weight: 500 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* Light theme grid overrides */
body.theme-light .account-card .account-meta .meta-item,
body.theme-light #accountsList .meta-item {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
}
body.theme-light .account-card .account-meta .meta-label {
  color: rgba(0,0,0,0.45) !important;
}
body.theme-light .account-card .account-meta .meta-value {
  color: rgba(0,0,0,0.85) !important;
}
@media (max-width: 600px) {
  html body .account-card .account-meta,
  html body #accountsList .account-card .account-meta {
    grid-template-columns: 1fr !important;
  }
  html body .account-card .account-meta .meta-item {
    font-size: 12px !important;
  }
}

/* =============================================================================
   v5.3.0 MEGA-FIX: ACCOUNT CARD BUTTONS — NUCLEAR OVERRIDE
   Fixes: info button not clickable, hover jump animations, mobile icon sizes,
          black box below nav, dashboard shift, empty toasts
   ============================================================================= */

/* 1) KILL all position:absolute on account buttons — they are FLEX children
   Using maximum specificity with #accountsList to beat ALL legacy rules */
html body #accountsList .account-card .account-info-btn,
html body #accountsList .account-card .account-remove-btn,
html body #accountsList .account-card .account-restore-btn,
html body #accountsList .account-card .account-action-btn,
html body .account-card .account-card-buttons .account-info-btn,
html body .account-card .account-card-buttons .account-remove-btn,
html body .account-card .account-card-buttons .account-restore-btn {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease !important;
  will-change: auto !important;
  z-index: 5 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  pointer-events: auto !important;
}

/* 2) KILL ALL hover transforms — NO scale, NO translateY, NO movement */
html body #accountsList .account-card .account-info-btn:hover,
html body #accountsList .account-card .account-remove-btn:hover,
html body #accountsList .account-card .account-restore-btn:hover,
html body .account-card .account-card-buttons .account-info-btn:hover,
html body .account-card .account-card-buttons .account-remove-btn:hover,
html body .account-card .account-card-buttons .account-restore-btn:hover {
  transform: none !important;
  animation: none !important;
}

/* 3) Info button — blue bg, ONLY background highlight on hover */
html body #accountsList .account-card .account-info-btn,
html body .account-card .account-card-buttons .account-info-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  background: #3b82f6 !important;
  background-color: #3b82f6 !important;
  color: #fff !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.35) !important;
}

html body #accountsList .account-card .account-info-btn:hover,
html body .account-card .account-card-buttons .account-info-btn:hover {
  background: #2563eb !important;
  background-color: #2563eb !important;
  box-shadow: 0 3px 10px rgba(59, 130, 246, 0.5) !important;
  transform: none !important;
}

/* 4) Remove button — red bg, ONLY color highlight on hover */
html body #accountsList .account-card .account-remove-btn,
html body .account-card .account-card-buttons .account-remove-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  background: #ef4444 !important;
  background-color: #ef4444 !important;
  color: #fff !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35) !important;
}

html body #accountsList .account-card .account-remove-btn:hover,
html body .account-card .account-card-buttons .account-remove-btn:hover {
  background: #dc2626 !important;
  background-color: #dc2626 !important;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.5) !important;
  transform: none !important;
}

/* 5) Active/pressed state — slight darken only, NO movement */
html body #accountsList .account-card .account-info-btn:active,
html body .account-card .account-card-buttons .account-info-btn:active {
  background: #1d4ed8 !important;
  background-color: #1d4ed8 !important;
  transform: none !important;
}

html body #accountsList .account-card .account-remove-btn:active,
html body .account-card .account-card-buttons .account-remove-btn:active {
  background: #b91c1c !important;
  background-color: #b91c1c !important;
  transform: none !important;
}

/* 6) Button container — ensure it's flex and items are clickable */
html body #accountsList .account-card .account-card-buttons,
html body .account-card .account-card-buttons {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  z-index: 5 !important;
  position: relative !important;
}

/* 7) MOBILE: Smaller buttons on mobile */
@media (max-width: 600px) {
  html body #accountsList .account-card .account-info-btn,
  html body #accountsList .account-card .account-remove-btn,
  html body #accountsList .account-card .account-restore-btn,
  html body .account-card .account-card-buttons .account-info-btn,
  html body .account-card .account-card-buttons .account-remove-btn,
  html body .account-card .account-card-buttons .account-restore-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 8px !important;
  }

  html body #accountsList .account-card .account-info-btn svg,
  html body #accountsList .account-card .account-remove-btn svg,
  html body .account-card .account-card-buttons .account-info-btn svg,
  html body .account-card .account-card-buttons .account-remove-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  html body #accountsList .account-card .account-card-buttons,
  html body .account-card .account-card-buttons {
    gap: 6px !important;
    padding-left: 8px !important;
  }
}

@media (max-width: 400px) {
  html body #accountsList .account-card .account-info-btn,
  html body #accountsList .account-card .account-remove-btn,
  html body #accountsList .account-card .account-restore-btn,
  html body .account-card .account-card-buttons .account-info-btn,
  html body .account-card .account-card-buttons .account-remove-btn,
  html body .account-card .account-card-buttons .account-restore-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 8px !important;
  }

  html body #accountsList .account-card .account-info-btn svg,
  html body #accountsList .account-card .account-remove-btn svg,
  html body .account-card .account-card-buttons .account-info-btn svg,
  html body .account-card .account-card-buttons .account-remove-btn svg {
    width: 15px !important;
    height: 15px !important;
  }
}

/* 8) Light theme button overrides */
body.theme-light #accountsList .account-card .account-info-btn,
body.theme-light .account-card .account-card-buttons .account-info-btn {
  background: #3b82f6 !important;
  background-color: #3b82f6 !important;
  color: #fff !important;
}
body.theme-light #accountsList .account-card .account-info-btn:hover,
body.theme-light .account-card .account-card-buttons .account-info-btn:hover {
  background: #2563eb !important;
  background-color: #2563eb !important;
}
body.theme-light #accountsList .account-card .account-remove-btn,
body.theme-light .account-card .account-card-buttons .account-remove-btn {
  background: #ef4444 !important;
  background-color: #ef4444 !important;
  color: #fff !important;
}
body.theme-light #accountsList .account-card .account-remove-btn:hover,
body.theme-light .account-card .account-card-buttons .account-remove-btn:hover {
  background: #dc2626 !important;
  background-color: #dc2626 !important;
}

/* 9) FIX: Black box below bottom navigation */
html body .mobile-bottom-nav {
  height: auto !important;
  min-height: 56px !important;
  max-height: 80px !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* Only add safe area on iOS devices that actually have safe areas */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  html body .mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* Kill the excessive padding-bottom from various rules */
html body .mobile-bottom-nav-inner {
  height: 56px !important;
  padding: 0 !important;
}

/* 10) FIX: Dashboard slight right-shift */
html body .dashboard-container {
  margin: 0 auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  max-width: 1200px !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  html body .dashboard-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* 11) FIX: Ensure account card has proper overflow for buttons */
html body .account-card {
  overflow: visible !important;
}

/* 12) FIX: Remove ALL transform-based transitions from account buttons globally */
html body #accountsList [class*="account-"][class*="-btn"],
html body .account-card [class*="account-"][class*="-btn"] {
  transform: none !important;
}
html body #accountsList [class*="account-"][class*="-btn"]:hover,
html body .account-card [class*="account-"][class*="-btn"]:hover {
  transform: none !important;
}
html body #accountsList [class*="account-"][class*="-btn"]:active,
html body .account-card [class*="account-"][class*="-btn"]:active {
  transform: none !important;
}
html body #accountsList [class*="account-"][class*="-btn"]:focus,
html body .account-card [class*="account-"][class*="-btn"]:focus {
  transform: none !important;
}

/* =============================================================================
   v5.3.0 COMPACT CARDS + FILTER BAR
   ============================================================================= */

/* --- FILTER BAR (desktop only) --- */
html body .accounts-filter-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  margin-bottom: 12px !important;
  background: rgba(255,255,255,0.04) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

body.theme-light .accounts-filter-bar {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* Filter inputs & selects */
html body .accounts-filter-bar .acc-filter-input,
html body .accounts-filter-bar .acc-filter-select {
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-family: inherit !important;
  outline: none !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
  box-sizing: border-box !important;
}

html body .accounts-filter-bar .acc-filter-input {
  flex: 1 !important;
  min-width: 160px !important;
  max-width: 280px !important;
}

html body .accounts-filter-bar .acc-filter-select {
  min-width: 140px !important;
  max-width: 220px !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 30px !important;
}

html body .accounts-filter-bar .acc-filter-input:focus,
html body .accounts-filter-bar .acc-filter-select:focus {
  border-color: #3b82f6 !important;
  background: rgba(59, 130, 246, 0.08) !important;
}

html body .accounts-filter-bar .acc-filter-input::placeholder {
  color: rgba(255,255,255,0.35) !important;
}

/* Light theme filter bar */
body.theme-light .accounts-filter-bar .acc-filter-input,
body.theme-light .accounts-filter-bar .acc-filter-select {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: #1a1a1a !important;
}

body.theme-light .accounts-filter-bar .acc-filter-input:focus,
body.theme-light .accounts-filter-bar .acc-filter-select:focus {
  background: rgba(59, 130, 246, 0.06) !important;
  border-color: #3b82f6 !important;
}

body.theme-light .accounts-filter-bar .acc-filter-input::placeholder {
  color: rgba(0, 0, 0, 0.55) !important;
}

body.theme-light .accounts-filter-bar .acc-filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23555' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important;
  /* v10.3.1: the light-theme rules re-declared background-image without
     re-declaring background-repeat/position, and the shorthand `background`
     above resets them — so the 12px chevron tiled across the whole control
     and the filter bar rendered as a field of hatching. Dark theme was fine
     because its rules pin all three. */
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 12px !important;
}

/* Mobile filter bar — vertical stack */
@media (max-width: 768px) {
  html body .accounts-filter-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    margin-bottom: 10px !important;
  }

  html body .accounts-filter-bar .acc-filter-input {
    min-width: unset !important;
    max-width: unset !important;
    width: 100% !important;
  }

  html body .accounts-filter-bar .acc-filter-select {
    min-width: unset !important;
    max-width: unset !important;
    width: 100% !important;
  }
}

/* --- COMPACT ACCOUNT CARDS --- */
html body #accountsList .account-card.account-card-compact,
html body .account-card.account-card-compact {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 10px 16px !important;
  margin-bottom: 8px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  min-height: 0 !important;
  height: auto !important;
  gap: 12px !important;
  cursor: default !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
  overflow: visible !important;
  position: relative !important;
}

html body #accountsList .account-card.account-card-compact:hover,
html body .account-card.account-card-compact:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.14) !important;
}

/* Light theme compact card */
body.theme-light #accountsList .account-card.account-card-compact,
body.theme-light .account-card.account-card-compact {
  background: #fff !important;
  border-color: rgba(0,0,0,0.08) !important;
}

body.theme-light #accountsList .account-card.account-card-compact:hover,
body.theme-light .account-card.account-card-compact:hover {
  background: #f8fafc !important;
  border-color: rgba(0,0,0,0.14) !important;
}

/* Name block — left side, flex:1, vertically centered against the 34px controls row */
html body .account-card-compact .account-name-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  flex: 1 !important;
  min-width: 0 !important;
  min-height: 34px !important;
  gap: 1px !important;
}

html body .account-card-compact .account-card-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #fff !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

html body .account-card-compact .account-card-login {
  font-size: 12px !important;
  color: rgba(255,255,255,0.45) !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

/* Light theme name/login */
body.theme-light .account-card-compact .account-card-name {
  color: #1a1a2e !important;
}

body.theme-light .account-card-compact .account-card-login {
  color: rgba(0,0,0,0.4) !important;
}

/* Controls — right side (role badge + buttons). Explicit 34px row so the
   name block and the controls share the same vertical axis cleanly. */
html body .account-card-compact .account-card-controls {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  min-height: 34px !important;
}

/* Role tag styling — NUCLEAR OVERRIDE: kill position:absolute from legacy CSS (line 20691) */
html body #accountsList .account-card-compact .account-role-tag,
html body #accountsList .account-card-compact .account-card-controls .account-role-tag,
html body .account-card-compact .account-card-controls .account-role-tag,
html body .account-card-compact .account-role-tag {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  height: 26px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  max-width: none !important;
  overflow: visible !important;
  transform: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Role-specific tag colors (JS uses: account-role-tag + bare role name) */
html body .account-card-compact .account-role-tag.superadmin {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
}
html body .account-card-compact .account-role-tag.network_manager {
  background: rgba(168, 85, 247, 0.15) !important;
  color: #c084fc !important;
}
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
}
html body .account-card-compact .account-role-tag.region_manager {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
}
html body .account-card-compact .account-role-tag.seller {
  background: rgba(156, 163, 175, 0.12) !important;
  color: #9ca3af !important;
}

/* Light theme role tags */
body.theme-light .account-card-compact .account-role-tag.superadmin {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #dc2626 !important;
}
body.theme-light .account-card-compact .account-role-tag.network_manager {
  background: rgba(168, 85, 247, 0.1) !important;
  color: #7c3aed !important;
}
  background: rgba(59, 130, 246, 0.1) !important;
  color: #2563eb !important;
}
body.theme-light .account-card-compact .account-role-tag.region_manager {
  background: rgba(34, 197, 94, 0.1) !important;
  color: #16a34a !important;
}
body.theme-light .account-card-compact .account-role-tag.seller {
  background: rgba(107, 114, 128, 0.1) !important;
  color: #6b7280 !important;
}

/* Compact card buttons — inherit from mega-fix but ensure proper sizing in compact card */
html body .account-card-compact .account-card-controls .account-info-btn,
html body .account-card-compact .account-card-controls .account-remove-btn,
html body .account-card-compact .account-card-controls .account-restore-btn,
html body .account-card-compact .account-card-controls .account-hard-delete-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  position: relative !important;
  transform: none !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  border: none !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: opacity 0.15s ease !important;
}
html body .account-card-compact .account-card-controls .account-info-btn:hover,
html body .account-card-compact .account-card-controls .account-remove-btn:hover,
html body .account-card-compact .account-card-controls .account-restore-btn:hover {
  opacity: 0.85 !important;
  box-shadow: none !important;
}

/* SVG icons inside compact card buttons — ensure visible */
html body .account-card-compact .account-card-controls .account-info-btn svg,
html body .account-card-compact .account-card-controls .account-remove-btn svg,
html body .account-card-compact .account-card-controls .account-restore-btn svg,
html body .account-card-compact .account-card-controls .account-hard-delete-btn svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  stroke: #fff !important;
  fill: none !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Restore button — green */
html body .account-card-compact .account-card-controls .account-restore-btn {
  background: #22c55e !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.35) !important;
}
html body .account-card-compact .account-card-controls .account-restore-btn:hover {
  background: #16a34a !important;
  transform: none !important;
}

/* Hard delete button — dark red */
html body .account-card-compact .account-card-controls .account-hard-delete-btn {
  background: #991b1b !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(153, 27, 27, 0.35) !important;
}
html body .account-card-compact .account-card-controls .account-hard-delete-btn:hover {
  background: #7f1d1d !important;
  transform: none !important;
}

/* Mobile compact card adjustments */
@media (max-width: 600px) {
  html body #accountsList .account-card.account-card-compact,
  html body .account-card.account-card-compact {
    padding: 8px 12px !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
  }

  html body .account-card-compact .account-card-name {
    font-size: 13px !important;
  }

  html body .account-card-compact .account-card-login {
    font-size: 11px !important;
  }

  /* Hide role tag on mobile ≤600px — too cramped
     Need max specificity to beat legacy rules like line 39766 */
  html body #accountsList .account-card.account-card-compact .account-card-controls .account-role-tag,
  html body #accountsList .account-card.account-card-compact .account-role-tag {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  html body .account-card-compact .account-card-controls .account-info-btn,
  html body .account-card-compact .account-card-controls .account-remove-btn,
  html body .account-card-compact .account-card-controls .account-restore-btn,
  html body .account-card-compact .account-card-controls .account-hard-delete-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
  }

  html body .account-card-compact .account-card-controls .account-info-btn svg,
  html body .account-card-compact .account-card-controls .account-remove-btn svg,
  html body .account-card-compact .account-card-controls .account-restore-btn svg,
  html body .account-card-compact .account-card-controls .account-hard-delete-btn svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
  }
}

@media (max-width: 400px) {
  html body .account-card-compact .account-card-controls .account-info-btn,
  html body .account-card-compact .account-card-controls .account-remove-btn,
  html body .account-card-compact .account-card-controls .account-restore-btn,
  html body .account-card-compact .account-card-controls .account-hard-delete-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  html body .account-card-compact .account-card-controls .account-info-btn svg,
  html body .account-card-compact .account-card-controls .account-remove-btn svg,
  html body .account-card-compact .account-card-controls .account-restore-btn svg,
  html body .account-card-compact .account-card-controls .account-hard-delete-btn svg {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
  }
}

/* "No results" message in accounts list */
html body .accounts-no-results {
  text-align: center !important;
  padding: 32px 16px !important;
  color: rgba(255,255,255,0.4) !important;
  font-size: 14px !important;
}

body.theme-light .accounts-no-results {
  color: rgba(0, 0, 0, 0.55) !important;
}

/* Profile modal — ensure hidden by default when it has .hidden class */
#userProfileModalV3.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Profile modal — mobile fullscreen adjustments */
@media (max-width: 600px) {
  #userProfileModalV3 {
    padding: 8px !important;
    align-items: center !important;
  }

  #userProfileModalV3 .pm-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  #userProfileModalV3 .pm-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 0 !important;
  }

  #userProfileModalV3 .pm-avatar {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    font-size: 16px !important;
  }

  #userProfileModalV3 .pm-user-name {
    font-size: 16px !important;
    margin-bottom: 0 !important;
  }

  #userProfileModalV3 .pm-user-login {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  #userProfileModalV3 .pm-nav {
    overflow-x: auto !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 8px 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #userProfileModalV3 .pm-nav-item {
    font-size: 11px !important;
    padding: 6px 10px !important;
    flex-shrink: 0 !important;
  }

  #userProfileModalV3 .pm-close,
  #userProfileModalV3 .pm-close-btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 10 !important;
    width: 28px !important;
    height: 28px !important;
  }

  #userProfileModalV3 .pm-stats-row {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  #userProfileModalV3 .pm-stat-item {
    min-width: 60px !important;
    padding: 8px !important;
    font-size: 11px !important;
  }

  #userProfileModalV3 .pm-stat-value {
    font-size: 16px !important;
  }

  #userProfileModalV3 .pm-section {
    padding: 10px !important;
    margin-bottom: 8px !important;
  }

  #userProfileModalV3 .pm-badges {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  #userProfileModalV3 .pm-badge {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
}

/* =============================================================================
   v5.3.0 MOBILE: Reduce nested padding to give cards more horizontal space
   Total nested padding was eating ~130px on 390px viewport
   ============================================================================= */
@media (max-width: 600px) {
  /* Remove card horizontal margin on mobile */
  html body #accountsList .account-card.account-card-compact {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Reduce accounts list padding */
  html body #accountsList.accounts-list {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Reduce tab-users padding on mobile */
  html body #tab-users.tab-content {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Reduce admin panel horizontal padding on mobile */
  html body #adminPanel.card {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* ================================================================
   v5.3.0: LIGHT THEME MEGA-FIX
   Override inline styles and dark-hardcoded elements for light theme
   ================================================================ */

/* --- Header user label: white text on white bg --- */
body.theme-light .top-bar .current-user-label,
body.theme-light .top-bar .current-user-label * {
  color: #1a1a2e !important;
}
body.theme-light .top-bar .current-user-label .greeting-text {
  color: rgba(26, 26, 46, 0.6) !important;
}
body.theme-light .top-bar .current-user-label .user-name {
  color: #1a1a2e !important;
}
body.theme-light .top-bar .current-user-label .role-badge {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #3b82f6 !important;
}

/* --- Mic Allocation Panel: dark inline styles override --- */
body.theme-light #micAllocationPanel {
  background: #fff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
body.theme-light #micAllocationPanel .mic-panel-header {
  background: rgba(0, 0, 0, 0.02) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
body.theme-light #micAllocationPanel .mic-panel-icon {
  background: rgba(0, 0, 0, 0.06) !important;
}
body.theme-light #micAllocationPanel h3,
body.theme-light #micAllocationPanel .mic-stat-value,
body.theme-light #micAllocationPanel #micPanelTitle {
  color: #1a1a2e !important;
}
body.theme-light #micAllocationPanel p,
body.theme-light #micAllocationPanel .mic-stat-label,
body.theme-light #micAllocationPanel #micPanelSubtitle,
body.theme-light #micAllocationPanel label {
  color: rgba(26, 26, 46, 0.6) !important;
}
body.theme-light #micAllocationPanel .mic-stat-value.mic-used,
body.theme-light #micAllocationPanel #micUsedAll {
  color: #d97706 !important;
}
body.theme-light #micAllocationPanel .mic-stat-value.mic-free,
body.theme-light #micAllocationPanel #micFreeAll {
  color: #16a34a !important;
}
body.theme-light #micAllocationPanel .mic-edit-form {
  background: rgba(59, 130, 246, 0.04) !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
body.theme-light #micAllocationPanel .mic-select,
body.theme-light #micAllocationPanel .mic-input,
body.theme-light #micAllocationPanel select,
body.theme-light #micAllocationPanel input[type="number"] {
  background: #f3f4f6 !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: #1a1a2e !important;
}
body.theme-light #micAllocationPanel .mic-table th {
  background: rgba(0, 0, 0, 0.03) !important;
  color: rgba(26, 26, 46, 0.6) !important;
}
body.theme-light #micAllocationPanel .mic-table td {
  color: #1a1a2e !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
body.theme-light #micAllocationPanel .mic-allocation-row {
  background: transparent !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
body.theme-light #micAllocationPanel .mic-allocation-row:hover {
  background: rgba(0, 0, 0, 0.02) !important;
}
body.theme-light #micAllocationPanel .mic-mobile-hint {
  color: rgba(26, 26, 46, 0.55) !important;
}

/* --- Theme transition smoothness ---
   v10.1.2: this used to be an unconditional `body, body *`, so all ~5900
   elements on the page carried a 0.3s colour AND box-shadow transition at all
   times. It exists for one moment — the light/dark flip — but it also fired on
   every tab switch, every hover and every re-render, repainting shadows across
   the whole tree; that is the "animation hangs when I change tab" symptom.
   (An earlier fix at ~line 63350 already had to disable it for SVGs.)
   It now applies only while the theme is actually changing: setTheme() adds
   `.theme-switching` for the duration of the fade and removes it after. */
body.theme-switching,
body.theme-switching * {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
/* Exclude elements that need instant transitions */
body .no-theme-transition,
body .no-theme-transition * {
  transition: none !important;
}
/* Don't add transition to inputs/selects (typing lag) */
input, textarea, select, button {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* ================================================================
   v5.3.0: ROLE + SPECIALIZATION LAYOUT FIX
   - Role takes full width when specialization is hidden
   - Specialization sits next to role when visible
   - Extra info always full width
   ================================================================ */

/* When specialization is hidden, role spans both columns */
#accountForm .form-row label[for="accRole"] {
  grid-column: 1 / -1 !important;
}
/* When specialization is visible, role takes only 1 col */
#accountForm .form-row:has(#specialization-block.nm-visible) label[for="accRole"] {
  grid-column: auto !important;
}

/* Extra info always full width */
#accExtra-block {
  grid-column: 1 / -1 !important;
}
#accExtra-block textarea,
#accExtra-block input {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Specialization select — same styling as role */
#accSpecialization {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ========= v5.3.0: Business type buttons ========= */
.business-type-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  text-align: left;
  border-radius: 10px;
  border: 1.5px solid var(--bg-3, rgba(255,255,255,0.08));
  background: var(--bg-2, #1e293b);
  color: var(--ink-1, #e2e8f0);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  font-size: 13px;
  line-height: 1.3;
  min-height: 44px;
  word-break: break-word;
}
.business-type-btn:hover {
  border-color: var(--accent, #3b82f6);
  background: var(--bg-3, rgba(59,130,246,0.08));
}
.business-type-btn.active {
  border-color: var(--accent, #3b82f6);
  background: rgba(59,130,246,0.15);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.25);
  font-weight: 600;
}
.business-type-btn .bt-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}
.business-type-btn .bt-name {
  flex: 1;
  min-width: 0;
}

/* Light theme */
body.theme-light .business-type-btn {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #1e293b;
}
body.theme-light .business-type-btn:hover {
  background: #eff6ff;
  border-color: #3b82f6;
}
body.theme-light .business-type-btn.active {
  background: #dbeafe;
  border-color: #3b82f6;
}

/* Search input */
#businessTypeSearch {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 8px;
}

/* Business type grid: wider min on larger screens */
@media (min-width: 500px) {
  #businessTypeGrid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  }
}

/* ========= v5.3.0: Profile Modal — Close animation ========= */
#userProfileModalV3.pm-closing {
  animation: pmFadeOut 0.25s ease-in forwards;
}
#userProfileModalV3 .pm-modal.pm-closing {
  animation: pmSlideDown 0.25s ease-in forwards;
}

@keyframes pmFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes pmSlideDown {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(24px) scale(0.97); }
}

/* Mobile close animation — slide down instead */
@media (max-width: 640px) {
  #userProfileModalV3 .pm-modal.pm-closing {
    animation: pmSlideDownMobile 0.25s ease-in forwards;
  }
  @keyframes pmSlideDownMobile {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
  }
}

/* ========= v5.3.0: Profile Modal — Scrolling fix ========= */
#userProfileModalV3 .pm-content {
  flex: 1 1 auto;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;
}
#userProfileModalV3 .pm-modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ========= v5.3.0: Profile Modal — Remove border-radius from tab icons (document looks bad) ========= */
.pm-tab__icon svg,
.pm-tab__icon svg rect,
.pm-tab__icon svg path,
.pm-tab__icon svg circle {
  border-radius: 0 !important;
}

/* ========= v5.3.0: Profile Modal — Mobile adjustments ========= */
@media (max-width: 640px) {
  /* Modal — fullscreen on mobile */
  #userProfileModalV3 {
    padding: 0 !important;
    align-items: stretch !important;
  }
  #userProfileModalV3 .pm-modal {
    max-height: 100vh !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Tabs — 4x2 grid, icons only, small */
  .pm-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    padding: 4px 8px !important;
    gap: 2px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--pm-border-light) !important;
  }
  .pm-tab {
    padding: 6px 4px !important;
    min-width: 0 !important;
    gap: 0 !important;
    flex-direction: column !important;
  }
  .pm-tab__icon {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }
  .pm-tab__icon svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: block !important;
    stroke-width: 1.5 !important;
  }
  .pm-tab__label {
    display: none !important;
  }

  /* Avatar smaller */
  .pm-avatar {
    width: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
  }
  /* Stats — more compact */
  .pm-stat__value {
    font-size: 16px !important;
  }
  .pm-stat__label {
    font-size: 8px !important;
  }

  /* Footer — hide when empty */
  .pm-footer:has(.pm-footer__center:empty):has(.pm-footer__left:empty):has(.pm-footer__right:empty) {
    display: none !important;
  }
  .pm-footer {
    padding: 8px 12px !important;
    gap: 4px !important;
  }
  .pm-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
  .pm-btn svg {
    width: 14px !important;
    height: 14px !important;
  }
  /* Badge — smaller */
  .pm-badge {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }
  /* Script check icon — bigger */
  .pm-script-check__icon {
    width: 80px !important;
    height: 80px !important;
  }
  .pm-script-check__icon svg {
    width: 40px !important;
    height: 40px !important;
  }
  /* Close button on mobile */
  .pm-close {
    width: 28px !important;
    height: 28px !important;
  }
  .pm-close svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  /* Modal: full height but with rounded bottom corners */
  .pm-modal {
    max-height: 95vh !important;
    height: auto !important;
    border-radius: 20px 20px 20px 20px !important;
    margin: auto 0 !important;
  }
  /* Scrolling: make content area fill available space */
  .pm-content {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ========= v5.3.0: Section icons inside profile modal — no border-radius ========= */
#userProfileModalV3 .pm-section-icon,
#userProfileModalV3 .pm-info-icon,
#userProfileModalV3 .pm-tab__icon {
  border-radius: 0 !important;
}
#userProfileModalV3 svg {
  border-radius: 0 !important;
}

/* ========= v5.3.3: Session AI Analysis Panel ========= */
.session-ai-panel {
  padding: 8px 12px 12px;
  margin: 0 0 8px;
  border-radius: 0 0 12px 12px;
  background: var(--bg-3, #1a1a2e);
  border-top: 1px solid var(--border, rgba(255,255,255,0.06));
}
.session-ai-panel.hidden { display: none; }

.ai-loading, .ai-empty {
  font-size: 13px;
  color: var(--text-3, #999);
  padding: 8px 0;
  text-align: center;
}

.ai-analysis-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-scores {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ai-score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--bg-2, #0f0f1f);
}

.ai-score-label {
  font-size: 11px;
  color: var(--text-3, #999);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ai-score-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent, #7c5cfc);
}

.ai-summary-text {
  font-size: 13px;
  color: var(--text-2, #ccc);
  line-height: 1.4;
  padding: 4px 0;
}

.ai-fixes {
  font-size: 13px;
  color: var(--text-2, #ccc);
}
.ai-fixes strong {
  color: var(--text-1, #fff);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ai-fixes ul {
  margin: 4px 0 0 16px;
  padding: 0;
}
.ai-fixes li {
  margin-bottom: 4px;
  line-height: 1.4;
}

.session-ai-toggle {
  color: var(--accent, #7c5cfc) !important;
}

/* Light theme overrides */
body.theme-light .session-ai-panel {
  background: var(--bg-3, #f0f0f5);
  border-top-color: var(--border, rgba(0,0,0,0.08));
}
body.theme-light .ai-score-item {
  background: var(--bg-2, #fff);
}
body.theme-light .ai-loading,
body.theme-light .ai-empty {
  color: var(--text-3, #666);
}

/* ==============================================================================
   v2.4.9 NUCLEAR: DYNAMIC ISLAND TOP-BAR — FINAL OVERRIDE
   Floating translucent bubble — always visible border, see-through background.
   Auth-visible (login page) keeps its own opaque style.
   ============================================================================== */
html body:not(.auth-visible) header.top-bar,
html body:not(.auth-visible) .top-bar,
body:not(.auth-visible) .app-wrapper > header.top-bar {
  background: rgba(10, 10, 15, 0.55) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2) !important;
  transition: background 0.35s ease, backdrop-filter 0.35s ease,
              box-shadow 0.35s ease, border-color 0.35s ease !important;
}
/* Scrolled: slightly more opaque but still translucent */
html body:not(.auth-visible) header.top-bar.scrolled,
html body:not(.auth-visible) .top-bar.scrolled,
body:not(.auth-visible) .app-wrapper > header.top-bar.scrolled {
  background: rgba(10, 10, 15, 0.72) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}
/* Light theme — opaque bg with blur */
body.theme-light:not(.auth-visible) header.top-bar,
body.theme-light:not(.auth-visible) .top-bar {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06) !important;
}
body.theme-light:not(.auth-visible) header.top-bar.scrolled,
body.theme-light:not(.auth-visible) .top-bar.scrolled {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
}

/* ==============================================================================
   v2.5.1 PERSONALIZATION PAGE — DESIGN SYSTEM REWRITE
   Clean CSS with variables, no !important, consistent spacing.
   Scoped to #tab-personalization to avoid leaking into other pages.
   ============================================================================== */

/* --- Design tokens (scoped to personalization tab) --- */
#tab-personalization {
  --pers-bg-card: rgba(255, 255, 255, 0.04);
  --pers-bg-card-hover: rgba(255, 255, 255, 0.07);
  --pers-bg-card-active: rgba(79, 142, 247, 0.06);
  --pers-bg-input: rgba(255, 255, 255, 0.05);
  --pers-bg-input-focus: rgba(255, 255, 255, 0.08);
  --pers-border: rgba(255, 255, 255, 0.08);
  --pers-border-medium: rgba(255, 255, 255, 0.12);
  --pers-border-focus: rgba(79, 142, 247, 0.5);
  --pers-border-accent: #4F8EF7;
  --pers-accent: #4F8EF7;
  --pers-accent-hover: #6BA0FF;
  --pers-accent-glow: rgba(79, 142, 247, 0.15);
  --pers-success: #22C55E;
  --pers-danger: #EF4444;
  --pers-warning: #F59E0B;
  --pers-text: #F5F5F5;
  --pers-text-sec: rgba(245, 245, 245, 0.6);
  --pers-text-muted: rgba(245, 245, 245, 0.4);
  --pers-radius-sm: 8px;
  --pers-radius-md: 12px;
  --pers-radius-lg: 16px;
  --pers-transition: 0.2s ease;
  --pers-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --pers-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --pers-shadow-accent: 0 4px 20px rgba(79, 142, 247, 0.15);
}

/* --- Light theme design tokens override --- */
body.theme-light #tab-personalization {
  --pers-bg-card: rgba(0, 0, 0, 0.02);
  --pers-bg-card-hover: rgba(0, 0, 0, 0.04);
  --pers-bg-card-active: rgba(79, 142, 247, 0.06);
  --pers-bg-input: #ffffff;
  --pers-bg-input-focus: #ffffff;
  --pers-border: rgba(0, 0, 0, 0.1);
  --pers-border-medium: rgba(0, 0, 0, 0.15);
  --pers-border-focus: rgba(79, 142, 247, 0.5);
  --pers-border-accent: #2962ff;
  --pers-accent: #2962ff;
  --pers-accent-hover: #4f8bff;
  --pers-accent-glow: rgba(41, 98, 255, 0.12);
  --pers-text: #1e2332;
  --pers-text-sec: rgba(0, 0, 0, 0.55);
  --pers-text-muted: rgba(0, 0, 0, 0.4);
  --pers-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --pers-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --pers-shadow-accent: 0 4px 20px rgba(41, 98, 255, 0.1);
}

/* --- Section cards --- */
#tab-personalization .pers-section {
  background: var(--pers-bg-card);
  border: 1px solid var(--pers-border);
  border-radius: var(--pers-radius-md);
  padding: 24px;
  margin-bottom: 24px;
}

#tab-personalization .pers-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

#tab-personalization .pers-section__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--pers-text);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

#tab-personalization .pers-section__subtitle {
  font-size: 14px;
  color: var(--pers-text-sec);
  margin: 0 0 24px 0;
}

/* --- Profile cards grid --- */
#tab-personalization .pers-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

/* Profile icon strip — horizontal row of business types */
#tab-personalization .pers-profile-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
#tab-personalization .pers-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 120px;
  padding: 14px 8px 12px;
  border-radius: 14px;
  cursor: pointer;
  background: rgba(255,255,255,0.04);
  border: 2px solid transparent;
  transition: all 0.2s ease;
  text-align: center;
}
#tab-personalization .pers-strip-item:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
}
#tab-personalization .pers-strip-item.active {
  border-color: #6366F1;
  background: rgba(99,102,241,0.12);
}
#tab-personalization .pers-strip-item.has-profile {
  border-color: rgba(99,102,241,0.35);
}
#tab-personalization .pers-strip-item__icon {
  font-size: 36px;
  line-height: 1;
}
#tab-personalization .pers-strip-item__label {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  line-height: 1.25;
  max-width: 110px;
}
#tab-personalization .pers-strip-item.active .pers-strip-item__label {
  color: rgba(255,255,255,0.95);
  font-weight: 600;
}
#tab-personalization .pers-strip-item__info {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  line-height: 1.3;
}
#tab-personalization .pers-strip-item.has-profile .pers-strip-item__info {
  color: rgba(255,255,255,0.5);
}
#tab-personalization .pers-strip-item__badge {
  font-size: 9px;
  background: #22c55e;
  color: #000;
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 700;
}
/* "Add profile" card at end of strip */
#tab-personalization .pers-strip-item--add {
  border: 2px dashed rgba(255,255,255,0.15);
  background: transparent;
  justify-content: center;
  min-height: 100px;
}
#tab-personalization .pers-strip-item--add:hover {
  border-color: #6366F1;
  background: rgba(99,102,241,0.06);
}
#tab-personalization .pers-strip-item--add .pers-strip-item__icon {
  font-size: 28px;
  opacity: 0.5;
}

/* Profile expanded info panel */
#tab-personalization .pers-profile-info-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
#tab-personalization .pers-profile-info-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}
#tab-personalization .pers-profile-info-panel__icon {
  font-size: 32px;
}
#tab-personalization .pers-profile-info-panel__header strong {
  font-size: 15px;
  color: rgba(255,255,255,0.9);
}
#tab-personalization .pers-profile-info-panel__stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  flex: 1;
}
#tab-personalization .pers-profile-info-panel__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  min-width: 70px;
}
#tab-personalization .pers-profile-info-panel__stat-value {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
}
#tab-personalization .pers-profile-info-panel__stat-label {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
#tab-personalization .pers-profile-info-panel__actions {
  display: none; /* legacy — hidden */
  gap: 8px;
  margin-left: auto;
}

/* ====== Profile Expand Panel (3 blocks) ====== */
.prof-expand {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  margin-bottom: 20px;
  overflow: hidden;
}
.prof-expand__block {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.prof-expand__block:last-child { border-bottom: none; }
.prof-expand__block-title {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  margin: 0 0 12px;
}
.prof-expand__sub {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin: 0 0 12px;
}
/* Block 1: Info */
.prof-expand__info-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.prof-expand__icon { font-size: 36px; }
.prof-expand__info-header strong {
  font-size: 18px;
  color: rgba(255,255,255,0.95);
}
.prof-expand__info-content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.prof-expand__info-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  min-width: 80px;
}
.prof-expand__info-stat-val {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
}
.prof-expand__info-stat-lbl {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
}
.prof-expand__info-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.prof-expand__info-row strong {
  color: rgba(255,255,255,0.8);
}
.prof-expand__info-empty {
  color: rgba(255,255,255,0.35);
  font-size: 14px;
  padding: 10px 0;
}
/* Block 2: Scripts */
.prof-expand__script-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
/* Block 3: Mini AI Chat */
.prof-expand__ai-input {
  width: 100%;
  margin-bottom: 10px;
}
.prof-expand__ai-log {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}
.prof-expand__ai-log-item {
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
}

#tab-personalization .pers-profile-card {
  background: var(--pers-bg-card);
  border: 1px solid var(--pers-border);
  border-radius: var(--pers-radius-md);
  padding: 20px;
  cursor: pointer;
  transition: all var(--pers-transition);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 140px;
  position: relative;
}

#tab-personalization .pers-profile-card:hover {
  background: var(--pers-bg-card-hover);
  transform: scale(1.02);
  box-shadow: var(--pers-shadow-md);
}

#tab-personalization .pers-profile-card.active {
  border-color: var(--pers-border-accent);
  background: var(--pers-bg-card-active);
  box-shadow: var(--pers-shadow-accent);
}

#tab-personalization .pers-profile-card__icon {
  font-size: 32px;
  line-height: 1;
}

#tab-personalization .pers-profile-card__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--pers-text);
}

#tab-personalization .pers-profile-card__type {
  font-size: 13px;
  color: var(--pers-text-sec);
}

#tab-personalization .pers-profile-card__meta {
  font-size: 12px;
  color: var(--pers-text-muted);
  margin-top: auto;
}

#tab-personalization .pers-profile-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--pers-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 6px;
}

/* New profile card (dashed) */
#tab-personalization .pers-profile-card--new {
  border: 2px dashed rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  min-height: 140px;
  color: var(--pers-text-muted);
  font-size: 14px;
}

#tab-personalization .pers-profile-card--new:hover {
  border-color: var(--pers-accent);
  color: var(--pers-accent);
  background: rgba(79, 142, 247, 0.04);
}

#tab-personalization .pers-profile-card--new .pers-plus-icon {
  font-size: 32px;
  line-height: 1;
  opacity: 0.6;
}

/* --- Profile action bar --- */
#tab-personalization .pers-profile-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--pers-border);
  margin-top: 4px;
  flex-wrap: wrap;
}

#tab-personalization .pers-profile-actions__info {
  font-size: 14px;
  color: var(--pers-text-sec);
  margin-right: auto;
}

#tab-personalization .pers-profile-actions__info strong {
  color: var(--pers-text);
}

/* --- Form elements --- */
#tab-personalization .pers-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

#tab-personalization .pers-form-group:last-child {
  margin-bottom: 0;
}

#tab-personalization .pers-form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--pers-text-sec);
}

#tab-personalization .pers-form-input,
#tab-personalization .pers-form-textarea,
#tab-personalization .pers-form-select {
  width: 100%;
  background: var(--pers-bg-input);
  border: 1px solid var(--pers-border);
  border-radius: var(--pers-radius-sm);
  padding: 12px 16px;
  color: var(--pers-text);
  font-size: 14px;
  font-family: inherit;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

#tab-personalization .pers-form-input:focus,
#tab-personalization .pers-form-textarea:focus,
#tab-personalization .pers-form-select:focus {
  outline: none;
  background: var(--pers-bg-input-focus);
  border-color: var(--pers-border-focus);
  box-shadow: 0 0 0 3px var(--pers-accent-glow);
}

#tab-personalization .pers-form-input::placeholder,
#tab-personalization .pers-form-textarea::placeholder {
  color: var(--pers-text-muted);
}

#tab-personalization .pers-form-textarea {
  min-height: 100px;
  resize: vertical;
}

#tab-personalization .pers-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

/* --- Buttons --- */
#tab-personalization .pers-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--pers-radius-sm);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  white-space: nowrap;
}

#tab-personalization .pers-btn--primary {
  background: var(--pers-accent);
  color: #fff;
}

#tab-personalization .pers-btn--primary:hover {
  background: var(--pers-accent-hover);
  box-shadow: var(--pers-shadow-accent);
}

#tab-personalization .pers-btn--secondary {
  background: transparent;
  color: var(--pers-accent);
  border: 1px solid var(--pers-accent);
}

#tab-personalization .pers-btn--secondary:hover {
  background: var(--pers-accent-glow);
}

#tab-personalization .pers-btn--danger {
  background: transparent;
  color: var(--pers-danger);
  border: 1px solid var(--pers-danger);
}

#tab-personalization .pers-btn--danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

#tab-personalization .pers-btn--ghost {
  background: transparent;
  color: var(--pers-text-sec);
  padding: 8px 14px;
  font-size: 13px;
}

#tab-personalization .pers-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--pers-text);
}

/* --- Scoring weights --- */
#tab-personalization .pers-weights-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Unallocated / Over banner --- */
#tab-personalization .pers-weight-banner {
  padding: 10px 16px;
  border-radius: var(--pers-radius-sm);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#tab-personalization .pers-weight-banner.warning {
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.3);
  color: #EAB308;
}
#tab-personalization .pers-weight-banner.error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #EF4444;
}

/* --- Weight item row --- */
#tab-personalization .pers-weight-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--pers-bg-input);
  border: 1px solid var(--pers-border);
  border-radius: var(--pers-radius-sm);
  padding: 10px 14px;
  transition: opacity 0.2s;
}
#tab-personalization .pers-weight-item.disabled {
  opacity: 0.45;
}
#tab-personalization .pers-weight-item.disabled .pers-weight-item__input {
  color: var(--pers-text-muted, #666);
  pointer-events: none;
}

/* --- Toggle switch (mini, for weight items) --- */
#tab-personalization .pers-weight-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
#tab-personalization .pers-weight-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
#tab-personalization .pers-weight-toggle .wt-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(239, 68, 68, 0.5);
  border-radius: 20px;
  transition: 0.25s;
}
#tab-personalization .pers-weight-toggle .wt-slider::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  top: 2px;
  background: white;
  border-radius: 50%;
  transition: 0.25s;
}
#tab-personalization .pers-weight-toggle input:checked + .wt-slider {
  background: #22c55e;
}
#tab-personalization .pers-weight-toggle input:checked + .wt-slider::before {
  transform: translateX(16px);
}

/* --- Weight label --- */
#tab-personalization .pers-weight-item__label {
  flex: 1;
  font-size: 13px;
  color: var(--pers-text-sec);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#tab-personalization .pers-weight-item__label--editable {
  cursor: pointer;
  border-bottom: 1px dashed var(--pers-border);
}
#tab-personalization .pers-weight-item__label--editable:hover {
  color: var(--pers-text);
}

/* --- Inline name edit --- */
#tab-personalization .pers-weight-name-input {
  flex: 1;
  background: var(--pers-bg-input-focus, rgba(255,255,255,0.1));
  border: 1px solid var(--pers-border-focus, #6366f1);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--pers-text);
  font-size: 13px;
  min-width: 0;
  outline: none;
}

/* --- Right side: input + % + delete --- */
#tab-personalization .pers-weight-item__right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* --- Delete button for custom weights --- */
#tab-personalization .pers-weight-delete {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  color: #ef4444;
  cursor: pointer;
  font-size: 18px;
  padding: 4px 10px;
  opacity: 0.8;
  transition: all 0.15s;
  flex-shrink: 0;
  line-height: 1;
}
#tab-personalization .pers-weight-delete:hover {
  opacity: 1;
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
}

/* --- Apply button disabled --- */
#tab-personalization #applyWeightsBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Info tooltip on title --- */
#tab-personalization .pers-weight-info-tooltip {
  font-size: 14px;
  cursor: help;
  opacity: 0.5;
  margin-left: 6px;
  position: relative;
}
#tab-personalization .pers-weight-info-tooltip:hover {
  opacity: 1;
}

/* v5.3.2: Superadmin demo mode hint */
#tab-personalization .pers-superadmin-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 18px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.15);
}
#tab-personalization .pers-superadmin-hint__icon {
  flex-shrink: 0;
  font-size: 14px;
}
body.theme-light #tab-personalization .pers-superadmin-hint {
  color: #64748b;
  background: rgba(100, 116, 139, 0.06);
  border-color: rgba(100, 116, 139, 0.15);
}

#tab-personalization .pers-weight-item__input {
  width: 60px;
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--pers-border);
  border-radius: 6px;
  padding: 6px 8px;
  color: var(--pers-text);
  font-size: 14px;
  font-weight: 600;
}

#tab-personalization .pers-weight-total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--pers-text-sec);
}

#tab-personalization .pers-weight-total__value {
  font-weight: 600;
  color: var(--pers-accent);
  font-size: 18px;
}

#tab-personalization .pers-weight-total__value.over {
  color: var(--pers-danger);
}

/* --- Button bar at bottom of section --- */
#tab-personalization .pers-btn-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* --- Create/Edit profile modal (BUG A FIX — appended to body) --- */
#profileModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

#profileModal.visible {
  display: flex;
}

#profileModal .pers-modal__content {
  background: #1a1a24;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 32px;
  width: 90%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  position: relative;
}

#profileModal .pers-modal__close {
  position: absolute;
  top: 16px;
  left: 16px;
  right: auto;
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
#profileModal .pers-modal__close:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

#profileModal .pers-modal__title {
  font-size: 20px;
  font-weight: 600;
  color: #F5F5F5;
  margin: 0 0 20px 0;
  padding-left: 32px;
}

/* AI Profile Creation Section */
.pers-ai-create__divider {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 24px 0 20px;
}
.pers-ai-create__title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  margin: 0 0 6px;
}
.pers-ai-create__sub {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin: 0 0 12px;
}
.pers-ai-create__textarea {
  width: 100%;
  min-height: 80px;
  resize: vertical;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 12px;
  color: inherit;
  font-size: 13px;
  line-height: 1.5;
}
.pers-btn--accent {
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  width: 100%;
}
.pers-btn--accent:hover { opacity: 0.9; }
.pers-btn--accent:disabled { opacity: 0.5; cursor: not-allowed; }

/* Section hints pointing to AI chat */
.section-hint {
  font-size: 13px;
  color: rgba(245, 245, 245, 0.4);
  margin-top: 4px;
  margin-bottom: 16px;
}
.section-hint a {
  color: #4F8EF7;
  text-decoration: none;
}
.section-hint a:hover {
  text-decoration: underline;
}

#profileModal .pers-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

/* Business type chip grid */
.pers-bt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}
.pers-bt-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.pers-bt-chip:hover {
  border-color: rgba(99,102,241,0.4);
  background: rgba(99,102,241,0.08);
}
.pers-bt-chip.active {
  border-color: #6366F1;
  background: rgba(99,102,241,0.15);
  box-shadow: 0 0 0 1px #6366F1;
}
.pers-bt-chip__icon {
  font-size: 28px;
  line-height: 1.2;
}
.pers-bt-chip__label {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  line-height: 1.3;
}

/* Roles checkbox grid */
.pers-roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.pers-role-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  transition: border-color 0.15s;
}
.pers-role-check:hover {
  border-color: rgba(255,255,255,0.2);
}
.pers-role-check input[type="checkbox"] {
  accent-color: #6366F1;
  width: 16px;
  height: 16px;
}

/* --- Loading/fade animation for section switching --- */
#tab-personalization .pers-fade {
  opacity: 1;
  transition: opacity 0.2s ease;
}

#tab-personalization .pers-fade.loading {
  opacity: 0.4;
  pointer-events: none;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  #tab-personalization .pers-profile-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
  }
  #tab-personalization .pers-section {
    padding: 16px;
    margin-bottom: 16px;
  }
  #tab-personalization .pers-form-row {
    grid-template-columns: 1fr;
  }
  #tab-personalization .pers-profile-actions {
    flex-direction: column;
    align-items: stretch;
  }
  #tab-personalization .pers-btn-bar {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  #tab-personalization .pers-profile-grid {
    grid-template-columns: 1fr;
  }
  #tab-personalization .pers-section__title {
    font-size: 17px;
  }
  #tab-personalization .pers-weights-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Weight info tooltips --- */
#tab-personalization .pers-weight-info {
  font-size: 12px;
  cursor: help;
  opacity: 0.5;
  margin-left: 2px;
}

/* --- Weight total status --- */
#tab-personalization .pers-weight-total .weight-ok {
  color: #4CAF50;
  font-weight: 600;
}
#tab-personalization .pers-weight-total .weight-err {
  color: #FF5252;
  font-weight: 600;
}
#tab-personalization .pers-weight-total__value.over {
  color: #FF5252;
}

/* --- Inline feedback for buttons --- */
#tab-personalization .pers-btn--saving {
  opacity: 0.7;
  pointer-events: none;
}
#tab-personalization .pers-btn--saved {
  background: #2E7D32;
  border-color: #2E7D32;
  color: #fff;
  pointer-events: none;
}
#tab-personalization .pers-btn--error {
  background: #C62828;
  border-color: #C62828;
  color: #fff;
}
#tab-personalization .pers-inline-error {
  color: #FF5252;
  font-size: 13px;
  margin-top: 6px;
  display: none;
}
#tab-personalization .pers-inline-error.visible {
  display: block;
}

/* --- Tips modal (appended to body to avoid will-change:transform breaking position:fixed) --- */
.pers-tips-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}
.pers-tips-overlay.visible {
  display: flex;
}
.pers-tips-content {
  background: #1E1E2E;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 24px;
  width: 90%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  color: #E0E0E0;
  box-shadow: 0 16px 60px rgba(0,0,0,0.6);
}
.pers-tips-content h4 {
  margin: 0 0 16px;
  font-size: 18px;
  color: #F5F5F5;
}
.pers-tips-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pers-tips-content li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 14px;
  line-height: 1.5;
}
.pers-tips-content li:last-child {
  border-bottom: none;
}
.pers-tips-content .pers-tips-close {
  margin-top: 16px;
  text-align: right;
}

/* ==========================================================================
   v2.5.0 MOBILE BUGFIXES — MUST BE LAST IN FILE
   ========================================================================== */
@media (max-width: 768px) {
  /* FIX: Kill dead zone (white block) above bottom nav.
     Both .app-wrapper and #appScrollRoot had padding-bottom:80px,
     creating 80-160px of empty space above the nav bar.
     The nav is fixed at bottom:0 and wrapper height already excludes it,
     so NO padding-bottom is needed on either element. */
  body.app-ready .app-wrapper,
  body:not(.auth-visible) .app-wrapper,
  body.app-ready #appScrollRoot,
  body.app-ready main.main-content,
  body:not(.auth-visible) .main-content,
  body:not(.auth-visible) main,
  #appSection,
  .app-wrapper > main {
    padding-bottom: 0 !important;
  }

  /* FIX: Hide "MH" brand text on mobile — only show logo icon */
  html body header.top-bar .brand-name-short,
  html body .top-bar .brand-name-short,
  .brand-name-short {
    display: none !important;
  }
}

/* v5.4.2: Settings profile — transparent header + rainbow avatar */
#settings-profile .profile-header {
  background: transparent !important;
}

#settings-profile .profile-avatar,
#settingsAvatar {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3) !important;
}

/* v5.4.2: Round admin-tabs-wrapper to match inner .admin-tabs, transparent bg to avoid dark corners */
.admin-tabs-wrapper {
  border-radius: 14px !important;
  overflow: hidden !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
}

/* ========== v5.4.0: CRM Module Styles ========== */
.crm-container { max-width: 1200px; margin: 0 auto; padding: 0 8px; }

/* Sub-navigation */
.crm-subnav { display: flex; gap: 4px; padding: 8px 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.crm-subnav-btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: 8px; background: transparent; color: var(--ink, #e0e0e0); font-size: 13px; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.crm-subnav-btn:hover { background: rgba(79, 70, 229, 0.1); border-color: rgba(79, 70, 229, 0.3); }
.crm-subnav-btn.active { background: rgba(79, 70, 229, 0.15); border-color: #4f46e5; color: #a5b4fc; }
.crm-subnav-btn svg { flex-shrink: 0; }
.crm-subnav-divider { width: 1px; min-height: 24px; background: var(--border, rgba(255,255,255,0.15)); margin: 0 4px; align-self: center; }

/* Views */
.crm-view { display: none; }
.crm-view.active { display: block; }

/* Dashboard grid */
.crm-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }

/* Metric cards */
.crm-card { background: var(--card-bg, #13131f); border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 12px; padding: 16px; }
.crm-card-metric { text-align: center; }
.crm-card-label { font-size: 12px; color: var(--muted, #888); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.crm-card-value { font-size: 28px; font-weight: 700; color: var(--ink, #fff); line-height: 1.2; }
.crm-card-sub { font-size: 11px; color: var(--muted, #888); margin-top: 4px; }

/* Section titles */
.crm-section { margin-bottom: 24px; }
.crm-section-title { font-size: 15px; font-weight: 600; color: var(--ink, #e0e0e0); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); }

/* Tables */
.crm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.crm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.crm-table th { text-align: left; padding: 8px 10px; color: var(--muted, #888); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); }
.crm-table td { padding: 10px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.05)); color: var(--ink, #e0e0e0); }
.crm-table tbody tr:hover { background: rgba(79, 70, 229, 0.05); }
.crm-table-full { min-width: 700px; }
.crm-clickable-row { cursor: pointer; }
.crm-actions-cell { display: flex; gap: 4px; }

/* Badges */
.crm-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }
.crm-badge-success { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.crm-badge-warning { background: rgba(234, 179, 8, 0.15); color: #facc15; }
.crm-badge-danger { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.crm-badge-info { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.crm-badge-neutral { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }

/* Activity list */
.crm-activity-list { display: flex; flex-direction: column; gap: 6px; }
.crm-activity-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--card-bg, #13131f); border: 1px solid var(--border, rgba(255,255,255,0.05)); font-size: 13px; }
.crm-activity-icon { font-size: 16px; flex-shrink: 0; }
.crm-activity-text { flex: 1; color: var(--ink, #e0e0e0); }
.crm-activity-time { font-size: 11px; color: var(--muted, #888); white-space: nowrap; }

/* Empty state */
.crm-empty { text-align: center; padding: 32px 16px; color: var(--muted, #888); font-size: 14px; }
.crm-loading { text-align: center; padding: 32px 16px; color: var(--muted, #888); }

/* Toolbar */
.crm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.crm-toolbar-left, .crm-toolbar-right { display: flex; align-items: center; gap: 8px; }
.crm-filter-group { display: flex; gap: 8px; flex-wrap: wrap; }
.crm-select { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border, rgba(255,255,255,0.1)); background: var(--card-bg, #13131f); color: var(--ink, #e0e0e0); font-size: 13px; }

/* Buttons */
.crm-btn { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border, rgba(255,255,255,0.1)); background: transparent; color: var(--ink, #e0e0e0); font-size: 13px; cursor: pointer; transition: all 0.2s; }
.crm-btn:hover { background: rgba(255,255,255,0.05); }
.crm-btn-primary { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.crm-btn-primary:hover { background: #4338ca; }
.crm-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.crm-btn-sm { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border, rgba(255,255,255,0.1)); background: transparent; font-size: 14px; cursor: pointer; line-height: 1; }
.crm-btn-sm:hover { background: rgba(79, 70, 229, 0.1); }

/* Client cards */
.crm-clients-list { display: flex; flex-direction: column; gap: 8px; }
.crm-client-card { background: var(--card-bg, #13131f); border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: all 0.2s; }
.crm-client-card:hover { border-color: rgba(79, 70, 229, 0.3); background: rgba(79, 70, 229, 0.03); }
.crm-client-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.crm-client-name { font-size: 15px; font-weight: 600; color: var(--ink, #fff); }
.crm-client-meta { display: flex; gap: 12px; font-size: 12px; color: var(--muted, #888); flex-wrap: wrap; }
.crm-client-note { font-size: 12px; color: var(--muted, #888); margin-top: 4px; font-style: italic; }

/* Detail overlay */
.crm-detail-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg, #0a0a14); z-index: 50; overflow-y: auto; padding: 16px; }
.crm-detail-overlay.hidden { display: none; }
.crm-detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); }
.crm-back-btn { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border, rgba(255,255,255,0.1)); background: transparent; color: var(--ink, #e0e0e0); font-size: 13px; cursor: pointer; }
.crm-back-btn:hover { background: rgba(255,255,255,0.05); }
.crm-detail-title { font-size: 20px; font-weight: 700; color: var(--ink, #fff); flex: 1; }
.crm-detail-badge { flex-shrink: 0; }

/* Detail metrics row */
.crm-detail-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 24px; }
.crm-metric { text-align: center; padding: 12px; background: var(--card-bg, #13131f); border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 10px; }
.crm-metric-val { font-size: 18px; font-weight: 700; color: var(--ink, #fff); }
.crm-metric-label { font-size: 11px; color: var(--muted, #888); margin-top: 2px; }

/* Detail sections */
.crm-detail-section { margin-bottom: 24px; }
.crm-detail-section h4 { font-size: 14px; font-weight: 600; color: var(--ink, #e0e0e0); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.06)); }

/* Contacts grid */
.crm-contacts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.crm-contact-card { padding: 12px; background: var(--card-bg, #13131f); border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 10px; }
.crm-contact-card.crm-primary { border-color: rgba(79, 70, 229, 0.3); }
.crm-contact-name { font-weight: 600; color: var(--ink, #fff); margin-bottom: 4px; }
.crm-contact-role { font-size: 12px; color: var(--muted, #888); margin-bottom: 6px; }
.crm-contact-info { font-size: 12px; color: var(--muted, #aaa); margin-top: 2px; }

/* Note cards */
.crm-note-card { padding: 12px 14px; background: var(--card-bg, #13131f); border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 10px; margin-bottom: 8px; }
.crm-note-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--ink, #e0e0e0); }
.crm-note-network { font-size: 11px; color: #a5b4fc; background: rgba(79, 70, 229, 0.1); padding: 1px 6px; border-radius: 4px; }
.crm-note-date { font-size: 11px; color: var(--muted, #888); margin-left: auto; }
.crm-note-body { font-size: 13px; color: var(--muted, #bbb); line-height: 1.5; }
.crm-note-footer { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11px; }
.crm-note-author { color: var(--muted, #888); }

/* Modals */
/* v7.9.6: canonical scrollable-modal pattern —
   - overflow-y: auto on the overlay so the whole backdrop can scroll when
     the modal is taller than the viewport,
   - margin: auto on the modal itself so it's vertically centered when it
     fits and "sticks to top" (via the overlay's own scroll) when it doesn't.
   Previously `align-items: center` on a flex overlay clipped the modal's
   top when its content grew (on hover/focus of inputs). */
.crm-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.crm-modal-overlay.hidden { display: none !important; visibility: hidden !important; pointer-events: none !important; }
.crm-modal { background: var(--card-bg, #13131f); border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: 16px; width: 100%; max-width: 520px; margin: auto; }
.crm-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); }
.crm-modal-header h3 { font-size: 16px; font-weight: 600; color: var(--ink, #fff); }
.crm-modal-close { background: none; border: none; color: var(--muted, #888); font-size: 24px; cursor: pointer; padding: 4px 8px; min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: background 0.15s; flex-shrink: 0; }
.crm-modal-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.crm-modal-body { padding: 20px; }
.crm-form-row { margin-bottom: 14px; display: flex; gap: 12px; }
.crm-form-row > .crm-form-group { flex: 1; margin-bottom: 0; }
.crm-form-row label { display: block; font-size: 12px; color: var(--muted, #888); margin-bottom: 4px; }
.crm-form-group { margin-bottom: 14px; }
.crm-form-group label { display: block; font-size: 12px; color: var(--muted, #888); margin-bottom: 4px; }
.crm-form-group .input, .crm-form-group select.input, .crm-form-group textarea.input { width: 100%; box-sizing: border-box; }
.crm-modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border, rgba(255,255,255,0.06)); }
.crm-modal form { padding: 20px; }
.crm-form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.crm-input { width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border, rgba(255,255,255,0.1)); background: rgba(255,255,255,0.03); color: var(--ink, #e0e0e0); font-size: 14px; box-sizing: border-box; }
.crm-input:hover { border-color: rgba(79, 70, 229, 0.4); }
.crm-input:focus { border-color: #4f46e5; outline: none; box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15); }
textarea.crm-input { resize: vertical; font-family: inherit; min-height: 80px; }
.crm-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border, rgba(255,255,255,0.06)); }
.crm-form-preview { background: rgba(79, 70, 229, 0.05); border: 1px solid rgba(79, 70, 229, 0.15); border-radius: 10px; padding: 12px 14px; margin-top: 14px; }
.crm-preview-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink, #e0e0e0); padding: 3px 0; }
.crm-preview-discount { color: #4ade80; }
.crm-preview-total { font-weight: 700; font-size: 15px; padding-top: 6px; border-top: 1px solid rgba(79, 70, 229, 0.15); }

/* Light theme overrides */
body.theme-light .crm-card,
body.theme-light .crm-client-card,
body.theme-light .crm-note-card,
body.theme-light .crm-contact-card,
body.theme-light .crm-metric,
body.theme-light .crm-activity-item,
body.theme-light .crm-modal { background: #fff; border-color: rgba(0,0,0,0.1); }
body.theme-light .crm-subnav-btn { border-color: rgba(0,0,0,0.1); color: #333; }
body.theme-light .crm-subnav-btn.active { color: #4338ca; }
body.theme-light .crm-input, body.theme-light .crm-select { background: #f8f9fa; color: #333; border-color: rgba(0,0,0,0.12); }
body.theme-light .crm-detail-overlay { background: #f3f4f6; }
body.theme-light .crm-modal-close:hover { background: rgba(0,0,0,0.08); color: #333; }

/* Responsive */
@media (max-width: 600px) {
  /* v7.9.6: prevent horizontal overflow on mobile — .crm-container children
     must respect the viewport, cards must wrap long labels instead of
     pushing the row off-screen ("ЗАКІНЧУЮТЬ…" was being clipped). */
  .crm-container { padding: 0 12px; max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
  .crm-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .crm-detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-form-row-2col { grid-template-columns: 1fr; }
  .crm-card { padding: 14px 12px; min-width: 0; }
  .crm-card-value { font-size: 20px; }
  .crm-card-label { font-size: 10px; }
  .crm-card-sub { font-size: 10px; word-break: break-word; }
  .crm-section { min-width: 0; }
  .crm-toolbar { flex-direction: column; align-items: stretch; }
  .crm-toolbar-right { justify-content: flex-end; }

  /* v7.9.6: wrap subnav into a compact 3-column grid on mobile instead of
     a scrollable row — 9 buttons → 3 rows of 3, each shows icon + short
     label. !important needed because generic button rules win on specificity. */
  #crmSubnav.crm-subnav { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; padding: 8px 0 12px !important; overflow-x: visible !important; }
  #crmSubnav .crm-subnav-btn { padding: 8px 6px !important; font-size: 11px !important; line-height: 1.15 !important; height: auto !important; gap: 4px !important; border-radius: 8px !important; flex-direction: column !important; justify-content: center !important; min-width: 0 !important; text-align: center !important; white-space: normal !important; }
  #crmSubnav .crm-subnav-btn svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }
  #crmSubnav .crm-subnav-divider { display: none !important; }
}
@media (max-width: 380px) {
  .crm-dashboard-grid { grid-template-columns: 1fr; }
  .crm-detail-metrics { grid-template-columns: 1fr; }
  #crmSubnav .crm-subnav-btn { padding: 7px 4px !important; font-size: 10px !important; }
  #crmSubnav .crm-subnav-btn svg { width: 14px !important; height: 14px !important; }
}
/* ========== END CRM Styles ========== */

/* v10.8.0: the PIN overlay stylesheet is gone with the overlay itself. */

/* ========== v6.1.0: Seller Tutorial Styles ========== */
.tutorial-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 28000;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.tutorial-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.tutorial-card {
  background: var(--bg-1, #1a1a2e);
  border: 1px solid var(--stroke-2, rgba(255,255,255,0.08));
  border-radius: 16px;
  max-width: 420px;
  width: 90%;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: tutorialCardIn 0.3s ease;
}
@keyframes tutorialCardIn {
  from { transform: scale(0.92) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.tutorial-progress {
  height: 4px;
  background: var(--stroke-2, rgba(255,255,255,0.1));
  border-radius: 2px;
  margin-bottom: 24px;
  overflow: hidden;
}
.tutorial-progress-fill {
  height: 100%;
  background: var(--accent, #2962ff);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.tutorial-step-counter {
  font-size: 12px;
  color: var(--muted, #a1a1aa);
  margin-bottom: 8px;
}
.tutorial-emoji {
  font-size: 48px;
  margin-bottom: 16px;
}
.tutorial-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink, #fff);
  margin-bottom: 12px;
}
.tutorial-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted, #a1a1aa);
  margin-bottom: 24px;
  text-align: left;
}
.tutorial-text p {
  margin: 4px 0;
}
.tutorial-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.tutorial-btn-primary {
  background: var(--accent, #2962ff);
  color: #fff;
  border: none;
  padding: 12px 32px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.tutorial-btn-primary:hover {
  filter: brightness(1.15);
}
.tutorial-btn-primary:active {
  transform: scale(0.97);
}
.tutorial-btn-secondary {
  background: var(--bg-2, rgba(255,255,255,0.06));
  color: var(--ink, #fff);
  border: 1px solid var(--stroke-2, rgba(255,255,255,0.1));
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}
.tutorial-btn-secondary:hover {
  background: var(--bg-3, rgba(255,255,255,0.1));
}
.tutorial-btn-skip {
  background: none;
  border: none;
  color: var(--muted, #a1a1aa);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 8px;
}
.tutorial-btn-skip:hover {
  color: var(--ink, #fff);
}

/* Highlight target for tutorial steps */
.tutorial-highlight-target {
  position: relative;
  box-shadow: 0 0 0 4px var(--accent, #2962ff), 0 0 20px rgba(41,98,255,0.3);
  border-radius: 8px;
  transition: box-shadow 0.3s ease;
}

/* Light theme */
body.theme-light .tutorial-card,
.light-theme .tutorial-card {
  background: #fff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
body.theme-light .tutorial-overlay,
.light-theme .tutorial-overlay {
  background: rgba(0,0,0,0.5);
}
body.theme-light .tutorial-title,
.light-theme .tutorial-title {
  color: #1a1a2e;
}
body.theme-light .tutorial-text,
.light-theme .tutorial-text {
  color: #555;
}
body.theme-light .tutorial-btn-secondary,
.light-theme .tutorial-btn-secondary {
  background: #f5f5f5;
  color: #333;
  border-color: #ddd;
}

/* Mobile */
@media (max-width: 480px) {
  .tutorial-card {
    max-width: 100%;
    margin: 0 12px;
    padding: 24px 16px;
  }
  .tutorial-emoji { font-size: 36px; }
  .tutorial-title { font-size: 18px; }
  .tutorial-text { font-size: 13px; }
  .tutorial-btn-primary { padding: 10px 24px; font-size: 14px; }
}
/* ========== END Seller Tutorial Styles ========== */

/* ==========================================================================
   v6.2.0: SALES WORKSPACE STYLES
   ========================================================================== */

/* Dynamic Script Role Pills */
.script-role-mgmt {
  display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap;
}
.add-role-form {
  display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap;
}
.role-pill-delete {
  margin-left: 4px; cursor: pointer; opacity: 0.5; font-size: 12px; vertical-align: middle;
}
.role-pill-delete:hover { opacity: 1; color: var(--danger, #ef4444); }

/* Sales Subnav */
.sales-subnav {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border-color, #e5e7eb);
  margin-bottom: 20px; flex-wrap: wrap;
}
.sales-subnav-btn {
  padding: 8px 16px; background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; font-size: 14px; color: var(--text-secondary, #6b7280);
  transition: all 0.15s ease;
}
.sales-subnav-btn:hover { color: var(--text-primary, #111); }
.sales-subnav-btn.active {
  color: var(--primary, #6366f1); border-bottom-color: var(--primary, #6366f1); font-weight: 600;
}

/* KPI Grid */
.sales-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.sales-kpi-card {
  background: var(--card-bg, var(--panel, rgba(255,255,255,0.06))); border: 1px solid var(--stroke, rgba(255,255,255,0.08));
  border-radius: 12px; padding: 16px; text-align: center;
}
.sales-kpi-value {
  font-size: 24px; font-weight: 700; color: var(--ink, #f8f8fc); margin-bottom: 4px;
}
.sales-kpi-label {
  font-size: 12px; color: var(--muted, rgba(255,255,255,0.65)); text-transform: uppercase; letter-spacing: 0.5px;
}

/* Stage bars */
.sales-stages-summary { display: flex; flex-direction: column; gap: 8px; }
.sales-stage-bar-row { display: flex; align-items: center; gap: 8px; }
.sales-stage-label { width: 160px; font-size: 13px; color: var(--ink, #f8f8fc); flex-shrink: 0; }
.sales-stage-bar-track { flex: 1; height: 20px; background: var(--panel-2, rgba(255,255,255,0.06)); border-radius: 4px; overflow: hidden; }
.sales-stage-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; min-width: 2px; }
.sales-stage-count { width: 30px; text-align: right; font-weight: 600; font-size: 13px; color: var(--ink); }
.sales-stage-mrr { width: 100px; text-align: right; font-size: 12px; color: var(--muted, rgba(255,255,255,0.65)); }

/* Pipeline Kanban */
.sales-pipeline-kanban {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}
.sales-kanban-col {
  min-width: 240px; max-width: 280px; flex-shrink: 0;
  background: var(--panel-2, var(--surface-2, rgba(255,255,255,0.04))); border-radius: 8px; padding: 0;
}
.sales-kanban-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; font-weight: 600; font-size: 13px;
  border-radius: 8px 8px 0 0;
}
.sales-kanban-count {
  background: rgba(255,255,255,0.1); border-radius: 10px; padding: 2px 8px; font-size: 12px;
}
body.theme-light .sales-kanban-count { background: rgba(0,0,0,0.08); }
.sales-kanban-cards { padding: 8px; display: flex; flex-direction: column; gap: 8px; max-height: 500px; overflow-y: auto; }
.sales-kanban-card {
  background: var(--card-bg, var(--panel, rgba(255,255,255,0.06))); border: 1px solid var(--stroke, rgba(255,255,255,0.08));
  border-radius: 8px; padding: 10px; cursor: default;
}
.sales-kanban-company { font-weight: 600; font-size: 13px; margin-bottom: 4px; color: var(--ink, #f8f8fc); }
.sales-kanban-contact { font-size: 12px; color: var(--muted, rgba(255,255,255,0.65)); margin-bottom: 6px; }
.sales-kanban-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted, rgba(255,255,255,0.65)); }
.sales-kanban-objection {
  margin-top: 6px; font-size: 11px; color: var(--warning, #f59e0b);
  background: rgba(245,158,11,0.08); padding: 4px 6px; border-radius: 4px;
}

/* Leads Table */
.sales-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sales-table th {
  text-align: left; padding: 8px 10px; background: var(--panel-2, var(--surface-2, rgba(255,255,255,0.04)));
  border-bottom: 2px solid var(--stroke, rgba(255,255,255,0.08)); font-weight: 600; white-space: nowrap; color: var(--ink);
}
.sales-table td { padding: 8px 10px; border-bottom: 1px solid var(--stroke, rgba(255,255,255,0.06)); color: var(--ink); }
.sales-table tbody tr:hover { background: rgba(255,255,255,0.04); }
body.theme-light .sales-table tbody tr:hover { background: rgba(0,0,0,0.03); }
.sales-stage-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px; color: #fff;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}


/* Tasks */
.sales-tasks-list { display: flex; flex-direction: column; gap: 8px; }
.sales-task-item {
  background: var(--card-bg, var(--panel, rgba(255,255,255,0.06))); border: 1px solid var(--stroke, rgba(255,255,255,0.08));
  border-radius: 8px; padding: 12px; color: var(--ink);
}
.sales-task--overdue { border-left: 3px solid var(--danger, #ef4444); }
.sales-task--urgent { border-left: 3px solid var(--warning, #f59e0b); }
.sales-task-date { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.sales-overdue-badge {
  color: #fff; background: var(--danger, #ef4444); padding: 1px 6px; border-radius: 8px;
  font-size: 10px; font-weight: 600; margin-left: 6px;
}
.sales-task-company { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.sales-task-meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted, rgba(255,255,255,0.65)); margin-bottom: 4px; }
.sales-task-notes { font-size: 12px; color: var(--muted, rgba(255,255,255,0.65)); margin-top: 4px; }

/* Team Grid */
.sales-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.sales-team-card {
  background: var(--card-bg, var(--panel, rgba(255,255,255,0.06))); border: 1px solid var(--stroke, rgba(255,255,255,0.08));
  border-radius: 12px; padding: 16px;
}
.sales-team-name { font-size: 16px; font-weight: 700; margin-bottom: 2px; color: var(--ink); }
.sales-team-role { font-size: 12px; color: var(--muted, rgba(255,255,255,0.65)); margin-bottom: 12px; }
.sales-team-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sales-team-stat-val { display: block; font-size: 18px; font-weight: 700; color: var(--ink, #f8f8fc); }
.sales-team-stat-lbl { display: block; font-size: 10px; color: var(--muted, rgba(255,255,255,0.65)); text-transform: uppercase; }

/* Responsive */
@media (max-width: 768px) {
  .sales-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sales-kpi-card { padding: 12px; }
  .sales-kpi-value { font-size: 20px; }
  .sales-stage-label { width: 80px; font-size: 11px; }
  .sales-stage-mrr { display: none; }
  .sales-table { font-size: 11px; }
  .sales-table th, .sales-table td { padding: 6px 4px; }
  .sales-kanban-col { min-width: 180px; max-width: 220px; }
  .sales-kanban-cards { max-height: 350px; }
  .sales-team-grid { grid-template-columns: 1fr; }
  .sales-leads-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sales-task-item { padding: 10px; }
  .sales-team-card { padding: 12px; }
  .sales-team-stats { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .sales-team-stat-val { font-size: 15px; }
  /* Modal mobile */
  .crm-modal-overlay { padding: 8px; }
  .crm-modal { max-width: 100%; border-radius: 12px; }
  .crm-modal-header { padding: 12px 16px; }
  .crm-form-row { flex-direction: column; gap: 0; }
}
@media (max-width: 480px) {
  .sales-kpi-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .sales-kpi-card { padding: 10px; }
  .sales-kpi-value { font-size: 18px; }
  .sales-kpi-label { font-size: 10px; }
  .sales-pipeline-kanban { gap: 8px; }
  .sales-kanban-col { min-width: 160px; max-width: 200px; }
  .sales-stage-label { width: 60px; font-size: 10px; }
}

/* ========== END Sales Workspace Styles ========== */

/* =============================================================================
   MOBILE TOP-BAR + AUTH + CHECKMARK FIXES — must be at EOF for max cascade
   ============================================================================= */

/* --- BUG-3 FIX: Login success checkmark uses undefined --primary-color.
   Provide concrete fallback values so circle + checkmark are always visible. --- */
.login-success-checkmark {
  background: linear-gradient(135deg, #3b7dff, #5a94ff) !important;
  box-shadow: 0 10px 40px rgba(59, 125, 255, 0.4) !important;
}
.login-success-checkmark::after {
  color: #fff !important;
}
/* Light theme: ensure overlay background contrasts with blue checkmark circle */
body.theme-light .login-success-overlay {
  background: #f8f9fb !important;
}

@media (max-width: 768px) {
  /* --- BUG-1 FIX: The root cause of the huge gap is justify-content:space-between
     on the top-bar flex parent. With only 2 visible children (brand + controls),
     space-between pushes them to opposite ends → massive gap.
     Fix: use flex-start and let margin-left:auto on .top-bar-right handle alignment. --- */
  html body header.top-bar {
    justify-content: flex-start !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
    height: 56px !important;
    min-height: 56px !important;
  }
  /* Left section: don't grow, stay compact */
  html body header.top-bar .top-bar-left {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  /* Right section: push to end via margin-left:auto, don't grow */
  html body header.top-bar .top-bar-right,
  html body header.top-bar .top-right {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
  /* v6.4.0: Account switcher: compact, overflow visible for dropdown */
  html body header.top-bar div.account-switcher-wrapper:not(.accsw-hidden) {
    flex: 0 1 auto !important;
    max-width: 50vw !important;
    overflow: visible !important;
  }
  /* Right group */
  html body header.top-bar .top-bar-right,
  html body header.top-bar .top-right {
    gap: 6px !important;
    margin-left: 0 !important;
  }
  /* Login account picker: centered between brand and controls */
  html body header.top-bar .login-account-picker:not(.hidden) {
    flex: 1 1 0 !important;
    max-width: none !important;
    overflow: visible !important;
    justify-content: center !important;
  }
  /* Auth-visible: same sizing, no jump */
  html body.auth-visible header.top-bar {
    justify-content: flex-start !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
    height: 56px !important;
    min-height: 56px !important;
  }
  html body.auth-visible header.top-bar .top-bar-left {
    flex: 0 0 auto !important;
  }
}

/* v6.8.2: Phone-only (≤480px) — capsule pill covers account+bell */
@media (max-width: 480px) {
  /* Account wrapper extends right to fully cover bell via negative margin overlap.
     Bell is 34px wide + 2px border = 36px. Pad right 48px, pull right -44px. */
  html body header.top-bar div.account-switcher-wrapper:not(.accsw-hidden) {
    flex: 0 0 auto !important;
    padding: 3px 50px 3px 3px !important;
    margin-right: -46px !important;
    border-radius: var(--radius-pill) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
  }
  body.theme-light header.top-bar div.account-switcher-wrapper:not(.accsw-hidden) {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
  }
  /* Hide chevron on phone — tap avatar to open */
  html body header.top-bar .accsw-chevron {
    display: none !important;
  }
  /* Bell: transparent bg — sits visually inside the pill */
  html body header.top-bar .notifications-bell-wrapper .notifications-bell {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  /* Tighter gap on phone */
  html body header.top-bar .top-bar-right,
  html body header.top-bar .top-right {
    gap: 4px !important;
  }
  /* v6.5.1: Login topbar — pill capsule shape, premium feel */
  html body.auth-visible header.top-bar {
    border-radius: var(--radius-pill) !important;
    padding: 0 16px !important;
  }
  html body.auth-visible header.top-bar .login-account-picker:not(.hidden) {
    flex: 1 1 0 !important;
    max-width: none !important;
  }
}

/* v6.7.0: Recipient search results + chips */
.recipient-search-results {
  position: absolute;
  z-index: 100;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md, 8px);
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  margin-top: 2px;
  width: 100%;
}
.recipient-search-results .search-result-item {
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid var(--stroke);
}
.recipient-search-results .search-result-item:last-child { border-bottom: none; }
.recipient-search-results .search-result-item:hover { background: var(--bg-2); }
.search-result-name { font-weight: 600; font-size: 13px; color: var(--ink); }
.search-result-meta { font-size: 11px; color: var(--muted); }
.search-result-empty { padding: 12px; text-align: center; color: var(--muted); font-size: 13px; }
.selected-recipients-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.recipient-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500;
  background: var(--accent, #2962ff); color: #fff;
}
.recipient-chip .chip-remove {
  background: none; border: none; color: rgba(255,255,255,0.7); cursor: pointer;
  font-size: 14px; padding: 0 2px; line-height: 1;
}
.recipient-chip .chip-remove:hover { color: #fff; }
#emailRecipientGroup { position: relative; }

/* =======================================================================
   v7.9.1 — Desktop + mobile alignment cleanup (pilot blocker I1/I2)
   Scoped polish for account cards, admin reporting/BI blocks, action rows.
   Kept at end of file so it wins without touching earlier rules.
   ======================================================================= */

/* --- Account cards: horizontal info / actions row with intentional centering --- */
.account-card {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.account-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0; /* allow text truncation inside flex */
}
.account-card-info .account-card-name,
.account-card-info .account-card-meta {
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.account-card-actions .quick-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.account-card-actions .quick-action-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 8px;
  line-height: 1;
}
.account-card-actions .btn-sm {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

/* --- Admin reporting / BI blocks: consistent widths, padding, centered content --- */
.admin-card .tab-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4px; /* symmetric gutters */
  box-sizing: border-box;
}
.admin-card .admin-block {
  box-sizing: border-box;
}
.admin-card .admin-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-card .report-card {
  align-items: center;
}
.admin-card .report-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Compliance QR preview block — keep sticker content centered on desktop */
#tab-compliance #complianceQrPreview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#tab-compliance .qr-controls-row {
  align-items: flex-end;
}

/* Compliance QR generator: dedicated hierarchy without generic pill controls. */
#tab-compliance .compliance-qr-intro {
  color: #4f5563 !important;
  font-size: 14px !important;
  line-height: 1.45;
  margin-bottom: 10px !important;
}
#tab-compliance .compliance-qr-notice {
  margin: 0 0 18px;
  padding: 9px 12px;
  border-left: 3px solid #ef4444;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.07);
  color: #a32626 !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
#tab-compliance .compliance-qr-controls {
  display: flex;
  gap: 12px;
  margin: 0 0 18px;
  flex-wrap: wrap;
}
#tab-compliance .compliance-qr-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#tab-compliance .compliance-qr-field--format {
  flex: 1 1 280px;
}
#tab-compliance .compliance-qr-field--color {
  flex: 0 0 170px;
}
#tab-compliance .compliance-qr-field--langs {
  flex: 1 1 100%;
}
#tab-compliance .compliance-lang-chips {
  flex-wrap: wrap;
}
#tab-compliance .compliance-lang-chips .btn-chip {
  min-width: 48px;
  padding: 8px 10px;
  font-size: 12px;
}
#tab-compliance .compliance-qr-label {
  color: #363b47 !important;
  font-size: 12px;
  font-weight: 700;
}
#tab-compliance .compliance-qr-static-value,
#tab-compliance .compliance-qr-select {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(24, 29, 43, 0.17);
  border-radius: 8px;
  background: rgba(24, 29, 43, 0.035);
  color: #1e2332 !important;
  font-size: 14px;
  line-height: 20px;
}
#tab-compliance .compliance-qr-static-value {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
}
#tab-compliance .compliance-qr-static-value span {
  color: #626978;
  font-size: 13px;
  white-space: nowrap;
}
#tab-compliance .compliance-qr-select {
  appearance: auto;
}
#tab-compliance .compliance-qr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#tab-compliance .compliance-qr-action {
  min-height: 40px !important;
  padding: 9px 14px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}
#tab-compliance .compliance-qr-action:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(24, 29, 43, 0.12) !important;
}
body:not(.theme-light) #tab-compliance .compliance-qr-intro {
  color: rgba(245, 247, 255, 0.78) !important;
}
body:not(.theme-light) #tab-compliance .compliance-qr-label {
  color: rgba(245, 247, 255, 0.88) !important;
}
body:not(.theme-light) #tab-compliance .compliance-qr-static-value,
body:not(.theme-light) #tab-compliance .compliance-qr-select {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #f5f7ff !important;
}
body:not(.theme-light) #tab-compliance .compliance-qr-static-value span {
  color: rgba(245, 247, 255, 0.66);
}

/* --- Mobile polish: stack account card info/actions; give breathing room --- */
@media (max-width: 640px) {
  .account-card {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .account-card-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .account-card-actions .quick-actions {
    flex: 1 1 auto;
    justify-content: flex-start;
  }
  .account-card-actions .quick-action-btn,
  .account-card-actions .btn-sm {
    height: 36px;
    min-width: 36px;
  }
  .admin-card .admin-block-header {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-card .report-card {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .admin-card .report-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  #tab-compliance .qr-controls-row {
    flex-direction: column;
    align-items: stretch;
  }
  #tab-compliance .qr-controls-row > div {
    flex: 1 1 100% !important;
  }
}

/* v8.18.1: Auth account picker matches the square landing controls (final override). */
html body.auth-visible header.top-bar .login-accsw-trigger {
  min-height: 40px !important;
  max-width: 260px !important;
  padding: 5px 12px 5px 7px !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: none !important;
}
html body.auth-visible header.top-bar .login-accsw-trigger:hover,
html body.auth-visible header.top-bar .login-accsw-trigger.accsw-open {
  background: rgba(59,125,255,.12) !important;
  border-color: rgba(59,125,255,.38) !important;
  box-shadow: 0 0 0 3px rgba(59,125,255,.1) !important;
}
html body.auth-visible header.top-bar .login-accsw-trigger .accsw-inline-avatar {
  border-radius: 10px !important;
}
html body.theme-light.auth-visible header.top-bar .login-accsw-trigger {
  background: rgba(0,0,0,.04) !important;
  border-color: rgba(0,0,0,.1) !important;
}
@media (max-width: 512px) {
  html body.auth-visible header.top-bar .login-accsw-trigger {
    min-height: 38px !important;
    padding: 4px 9px 4px 5px !important;
    border-radius: 10px !important;
  }
}

/* v8.18.2: Keep the auth island's primary CTA in the same language as the landing hero. */
html body.auth-visible header.top-bar .auth-nav-trial {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 11px;
  background: linear-gradient(135deg, #3b7dff, #5a94ff);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(59,125,255,.25);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
html body.auth-visible header.top-bar .auth-nav-trial:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 14px 30px rgba(59,125,255,.34);
}
html body.theme-light.auth-visible header.top-bar .auth-nav-trial {
  color: #fff;
}
@media (max-width: 1020px) {
  html body.auth-visible header.top-bar .auth-nav-trial {
    display: none !important;
  }
}

/* v8.19.0: Compact auth card; the login screen keeps only the form. */
html body.auth-visible #appScrollRoot.main-content {
  padding: 32px 24px 28px !important;
}
html body.auth-visible #authSection.auth-card {
  width: min(100%, 390px) !important;
  max-width: 390px !important;
  padding: 26px 28px 28px !important;
  border-radius: 20px !important;
}
html body.auth-visible #authSection.auth-card::before,
html body.auth-visible .auth-heading {
  display: none !important;
  content: none !important;
  margin: 0 !important;
}
html body.auth-visible #authSection.auth-card .vertical-form {
  gap: 14px !important;
}
/* Label wraps its input; force flex column so the caption sits a comfortable
   distance above the field instead of hugging it. */
html body.auth-visible #authSection.auth-card .vertical-form label {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
}
html body.auth-visible #authSection.auth-card .vertical-form input,
html body.auth-visible #authSection.auth-card .auth-code-input {
  min-height: 46px !important;
}
html body.auth-visible #authSection.auth-card #loginSubmitBtn,
html body.auth-visible #authSection.auth-card #validateInviteCodeBtn {
  min-height: 48px !important;
  margin-top: 6px !important;
  border-radius: 14px !important; /* match the inputs instead of a pill */
}

/* v8.20: The document scrollbar is drawn as a reserved (non-overlay) track by
   the global ::-webkit-scrollbar rule. With a transparent track it showed the
   browser's default light gutter — a white strip on the right in dark mode.
   Paint it to match the theme so it blends in. Firefox gets scrollbar-color. */
html.theme-dark { scrollbar-color: rgba(255,255,255,.16) transparent; }
html.theme-light { scrollbar-color: rgba(15,23,42,.22) transparent; }
html.theme-dark::-webkit-scrollbar-track,
html.theme-dark::-webkit-scrollbar-corner {
  background: #0a0a0f;
}
html.theme-dark::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.16);
  border-radius: 8px;
  border: 2px solid #0a0a0f;
  background-clip: padding-box;
}
html.theme-dark::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.26);
  border: 2px solid #0a0a0f;
  background-clip: padding-box;
}
html.theme-light::-webkit-scrollbar-track,
html.theme-light::-webkit-scrollbar-corner {
  background: #f6f8fc;
}
html.theme-light::-webkit-scrollbar-thumb {
  background: rgba(15,23,42,.22);
  border-radius: 8px;
  border: 2px solid #f6f8fc;
  background-clip: padding-box;
}

/* v8.19.0: The language wrapper is invisible; only its square button is drawn. */
html body.auth-visible header.top-bar .lang-switch {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
html body.auth-visible header.top-bar .lang-switch .lang-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}

/* v8.19.1: Keep the landing return as a compact icon before the brand. */
html body.auth-visible header.top-bar .top-bar-left {
  gap: 12px !important;
}
html body.auth-visible header.top-bar .auth-nav-home {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 40px;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.08) !important;
  color: #f6f8ff !important;
  box-shadow: none !important;
}
/* Light theme keeps the darker tint so the icon reads on white. */
html body.theme-light.auth-visible header.top-bar .auth-nav-home {
  border: 1px solid rgba(15,23,42,.12) !important;
  background: #fff !important;
  color: #171c27 !important;
}
html body.auth-visible header.top-bar .auth-nav-home svg {
  display: block !important;
  flex: 0 0 19px !important;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html body.auth-visible header.top-bar .auth-nav-home:hover {
  background: rgba(59,125,255,.14) !important;
  border-color: #3b7dff !important;
  color: #3b7dff !important;
}
html body.theme-light.auth-visible header.top-bar .auth-nav-home:hover {
  background: rgba(59,125,255,.1) !important;
  border-color: rgba(59,125,255,.38) !important;
  color: #2563d9 !important;
}
html body.auth-visible header.top-bar .auth-nav-home__label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
@media (max-width: 640px) {
  html body.auth-visible header.top-bar .top-bar-left { gap: 8px !important; }
  html body.auth-visible header.top-bar .auth-nav-home {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    flex-basis: 38px;
    border-radius: 10px !important;
  }
}
html body.theme-light.auth-visible header.top-bar .lang-switch .lang-btn {
  background: rgba(0,0,0,.04) !important;
  border-color: rgba(0,0,0,.08) !important;
}
@media (max-width: 640px) {
  html body.auth-visible #appScrollRoot.main-content {
    padding: 24px 12px 22px !important;
  }
  html body.auth-visible #authSection.auth-card {
    width: min(100%, 360px) !important;
    max-width: 360px !important;
    padding: 22px 20px 24px !important;
  }
  html body.auth-visible header.top-bar .lang-switch .lang-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
  }
}

/* v8.19.2: Auth-header actions share the landing control system. */
html body.auth-visible header.top-bar .top-bar-right,
html body.auth-visible header.top-bar .top-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body.auth-visible header.top-bar .theme-toggle-btn,
html body.auth-visible header.top-bar .lang-switch,
html body.auth-visible header.top-bar .lang-switch .lang-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  flex: 0 0 40px !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
}
html body.auth-visible header.top-bar #themeToggleBtn,
html body.auth-visible header.top-bar #headerLangBtn {
  border-radius: 12px !important;
}
html body.auth-visible header.top-bar .lang-switch {
  display: block !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body.auth-visible header.top-bar .theme-toggle-btn,
html body.auth-visible header.top-bar .lang-switch .lang-btn {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  color: #f6f8ff !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
html body.theme-light.auth-visible header.top-bar #themeToggleBtn,
html body.theme-light.auth-visible header.top-bar #headerLangBtn {
  color: #171c27 !important;
  background: #fff !important;
  border-color: rgba(15,23,42,.12) !important;
}
html body.auth-visible header.top-bar .theme-toggle-btn:hover,
html body.auth-visible header.top-bar .lang-switch .lang-btn:hover {
  color: #3b7dff !important;
  border-color: #3b7dff !important;
  background: rgba(59,125,255,.08) !important;
  box-shadow: none !important;
  transform: none !important;
}
html body.auth-visible header.top-bar .theme-toggle-btn:active,
html body.auth-visible header.top-bar .lang-switch .lang-btn:active {
  transform: none !important;
  box-shadow: none !important;
}
html body.auth-visible header.top-bar .theme-toggle-btn #themeEmoji {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}
html body.auth-visible header.top-bar .auth-theme-icon {
  width: 19px !important;
  height: 19px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html body.auth-visible header.top-bar .auth-theme-icon--sun { display: none !important; }
/* Dark theme shows the moon. Needs an explicit block because the icons carry
   aria-hidden="true", which a global [aria-hidden] rule force-hides otherwise. */
html body.auth-visible header.top-bar .auth-theme-icon--moon { display: block !important; }
html body.theme-light.auth-visible header.top-bar .auth-theme-icon--moon { display: none !important; }
html body.theme-light.auth-visible header.top-bar .auth-theme-icon--sun { display: block !important; }

/* The same button already carried both SVGs and an emoji span, but only the
   login screen was wired to show the SVGs — inside the app the emoji won, so
   the toggle was a different glyph on macOS, Windows and Android and never
   matched the header's text colour. Same treatment everywhere. */
html body header.top-bar .theme-toggle-btn #themeEmoji {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}
html body header.top-bar .theme-toggle-btn .auth-theme-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html body header.top-bar .theme-toggle-btn .auth-theme-icon--sun { display: none; }
/* Explicit block: the icons carry aria-hidden="true" and a global
   [aria-hidden] rule would otherwise force-hide them. */
html body header.top-bar .theme-toggle-btn .auth-theme-icon--moon { display: block; }
html body.theme-light header.top-bar .theme-toggle-btn .auth-theme-icon--moon { display: none; }
html body.theme-light header.top-bar .theme-toggle-btn .auth-theme-icon--sun { display: block; }
html body.auth-visible header.top-bar .lang-switch .lang-btn .lang-code {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: .06em !important;
  line-height: 1 !important;
}
html body.auth-visible header.top-bar .lang-switch .lang-btn .caret { display: none !important; }
@media (max-width: 640px) {
  html body.auth-visible header.top-bar .top-bar-right,
  html body.auth-visible header.top-bar .top-right { gap: 6px !important; }
  html body.auth-visible header.top-bar .theme-toggle-btn,
  html body.auth-visible header.top-bar .lang-switch,
  html body.auth-visible header.top-bar .lang-switch .lang-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    flex-basis: 38px !important;
    border-radius: 10px !important;
  }
}

/* v8.19.7: The app uses the landing's actual language picker, not an
   approximation of it. These terminal rules deliberately neutralise the
   older, circular / grey app controls above. */
html.landing-to-app body { opacity: 0; transform: translateY(10px); }
html.landing-to-app.is-transition-ready body {
  opacity: 1; transform: none;
  transition: opacity .24s ease, transform .32s cubic-bezier(.2,.8,.2,1);
}
html body header.top-bar .lang-switch.lang-single-wrap {
  position: relative !important; display: block !important;
  width: 40px !important; height: 40px !important;
  min-width: 40px !important; min-height: 40px !important;
  padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
}
html body header.top-bar .lang-switch.lang-single-wrap #headerLangBtn {
  width: 40px !important; height: 40px !important;
  min-width: 40px !important; min-height: 40px !important;
  display: grid !important; place-items: center !important; padding: 0 !important;
  border-radius: 12px !important;
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size: 11px !important; font-weight: 850 !important; letter-spacing: .06em !important; line-height: 1 !important;
  color: var(--text-primary, #f6f8ff) !important;
  background: var(--surface, #11131a) !important;
  border: 1px solid var(--line, rgba(255,255,255,.11)) !important;
  box-shadow: none !important;
  transition: border-color .2s, background .2s, box-shadow .2s !important;
}
html body.theme-light header.top-bar .lang-switch.lang-single-wrap #headerLangBtn {
  color: #171c27 !important; background: #fff !important; border-color: rgba(15,23,42,.12) !important;
}
html body header.top-bar .lang-switch.lang-single-wrap #headerLangBtn:hover,
html body header.top-bar .lang-switch.lang-single-wrap #headerLangBtn[aria-expanded="true"] {
  color: #3b7dff !important; border-color: rgba(59,125,255,.5) !important;
  background: var(--surface-2, rgba(59,125,255,.08)) !important;
  box-shadow: 0 0 0 3px rgba(59,125,255,.12) !important;
}
html body.theme-light header.top-bar .lang-switch.lang-single-wrap #headerLangBtn:hover,
html body.theme-light header.top-bar .lang-switch.lang-single-wrap #headerLangBtn[aria-expanded="true"] { background: #f5f7fb !important; }
html body header.top-bar .lang-switch.lang-single-wrap #headerLangBtn .lang-code { font: inherit !important; letter-spacing: inherit !important; color: currentColor !important; }

html body header.top-bar .lang-switch.lang-single-wrap .lang-dropdown {
  position: absolute !important; z-index: 1200 !important; top: calc(100% + 10px) !important; right: 0 !important;
  width: 190px !important; min-width: 190px !important; padding: 7px !important; display: block !important;
  background: color-mix(in srgb, var(--surface, #11131a) 96%, transparent) !important;
  border: 1px solid var(--line-strong, rgba(255,255,255,.18)) !important; border-radius: 15px !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.45) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
  opacity: 0 !important; visibility: hidden !important; transform: translateY(-8px) scale(.96) !important;
  transform-origin: top right !important; pointer-events: none !important;
  transition: opacity .2s ease, transform .28s cubic-bezier(.2,.9,.2,1.15), visibility .2s !important;
}
html body.theme-light header.top-bar .lang-switch.lang-single-wrap .lang-dropdown {
  background: color-mix(in srgb, #fff 96%, transparent) !important; border-color: rgba(15,23,42,.14) !important; box-shadow: 0 22px 60px rgba(15,23,42,.18) !important;
}
html body header.top-bar .lang-switch.lang-single-wrap .lang-dropdown.open { opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; pointer-events: auto !important; }
html body header.top-bar .lang-switch.lang-single-wrap .lang-dropdown-item {
  width: 100% !important; height: 42px !important; padding: 0 10px !important;
  display: grid !important; grid-template-columns: 32px 1fr 8px !important; align-items: center !important; gap: 7px !important;
  border: 0 !important; border-radius: 9px !important; color: var(--text-primary, #f6f8ff) !important; background: transparent !important;
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important; text-align: left !important;
  transform: none !important; transition: background .16s, transform .16s !important;
}
html body.theme-light header.top-bar .lang-switch.lang-single-wrap .lang-dropdown-item { color: #171c27 !important; }
html body header.top-bar .lang-switch.lang-single-wrap .lang-dropdown.open .lang-dropdown-item { animation: appLanguageItemIn .28s both cubic-bezier(.2,.8,.2,1) !important; }
html body header.top-bar .lang-switch.lang-single-wrap .lang-dropdown.open .lang-dropdown-item:nth-child(2) { animation-delay: .025s !important; }
html body header.top-bar .lang-switch.lang-single-wrap .lang-dropdown.open .lang-dropdown-item:nth-child(3) { animation-delay: .05s !important; }
html body header.top-bar .lang-switch.lang-single-wrap .lang-dropdown.open .lang-dropdown-item:nth-child(4) { animation-delay: .075s !important; }
html body header.top-bar .lang-switch.lang-single-wrap .lang-dropdown.open .lang-dropdown-item:nth-child(5) { animation-delay: .1s !important; }
html body header.top-bar .lang-switch.lang-single-wrap .lang-dropdown.open .lang-dropdown-item:nth-child(6) { animation-delay: .125s !important; }
@keyframes appLanguageItemIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
html body header.top-bar .lang-switch.lang-single-wrap .lang-dropdown-item:hover { background: rgba(59,125,255,.1) !important; transform: translateX(2px) !important; }
html body header.top-bar .lang-switch.lang-single-wrap .lang-dropdown-item.current { background: rgba(59,125,255,.14) !important; }
html body header.top-bar .lang-switch.lang-single-wrap .lang-dropdown-item .label-code { width: auto !important; font-size: 11px !important; font-weight: 850 !important; letter-spacing: .06em !important; color: #3b7dff !important; }
html body header.top-bar .lang-switch.lang-single-wrap .lang-dropdown-item .label { font-size: 11px !important; color: var(--muted, #8d95a5) !important; }
html body.theme-light header.top-bar .lang-switch.lang-single-wrap .lang-dropdown-item .label { color: #667085 !important; }
html body header.top-bar .lang-switch.lang-single-wrap .lang-dropdown-item.current .label { color: var(--text-primary, #f6f8ff) !important; }
html body.theme-light header.top-bar .lang-switch.lang-single-wrap .lang-dropdown-item.current .label { color: #171c27 !important; }
html body header.top-bar .lang-switch.lang-single-wrap .lang-dropdown-item .check { width: 6px !important; height: 6px !important; opacity: 0 !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; }
html body header.top-bar .lang-switch.lang-single-wrap .lang-dropdown-item.current .check { opacity: 1 !important; background: #3b7dff !important; box-shadow: 0 0 0 4px rgba(59,125,255,.14) !important; }
@media (prefers-reduced-motion: reduce) {
  html.landing-to-app body, html.landing-to-app.is-transition-ready body,
  html body header.top-bar .lang-switch.lang-single-wrap .lang-dropdown,
  html body header.top-bar .lang-switch.lang-single-wrap .lang-dropdown-item { transition: none !important; animation: none !important; transform: none !important; }
}


/* v10.3.1: light-theme muted text was set from the dark-theme palette — grey on
   a white surface measured 2.43:1 (rgba(0,0,0,.35) placeholders) and 2.56:1
   (#94a3b8), against the 4.5:1 WCAG floor for body text. Raised to 4.74:1 and
   4.76:1; decorative icons to 3.36:1. Dark theme untouched. */
/* ===== Floating particle field (login screen only) ===== */
/* !important + high specificity to beat the global `canvas:empty { display:none }` rule. */
.particle-field {
  display: none !important;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
html body.auth-visible .particle-field { display: block !important; }
/* Let the fixed canvas (painted over the body background) show through the wrapper. */
html body.auth-visible .app-wrapper { background: transparent !important; }
/* Keep the login header and card above the particles. */
body.auth-visible .app-wrapper > main,
body.auth-visible #authSection.auth-card { position: relative; z-index: 2; }

/* v8.19.8: Accounts empty state — one clear path, no duplicate CTA pill. */
#accountForm .accounts-form-actions {
  align-items: stretch;
  padding-top: 4px;
}

#accountForm .account-form-submit,
#accountForm .account-form-cancel {
  min-height: 48px;
  border-radius: 12px !important;
  font-weight: 750;
  letter-spacing: .01em;
}

#accountForm .account-form-submit {
  box-shadow: 0 8px 18px rgba(59, 125, 255, .2);
}

#accountForm .account-form-cancel {
  min-width: 148px;
}

#accountsList > .accounts-empty-state {
  box-sizing: border-box;
  width: min(100%, 520px);
  min-height: 220px;
  margin: 20px auto 8px !important;
  padding: 32px 28px !important;
  border: 1px dashed rgba(132, 148, 173, .32);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(59, 125, 255, .06), rgba(255, 255, 255, .015));
  color: var(--text-primary, #f5f7fb);
}

#accountsList > .accounts-empty-state .accounts-empty-state-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  color: #75a5ff;
  border: 1px solid rgba(93, 151, 255, .38);
  border-radius: 12px;
  background: rgba(59, 125, 255, .1);
}

#accountsList > .accounts-empty-state .accounts-empty-state-icon svg {
  width: 23px;
  height: 23px;
}

#accountsList > .accounts-empty-state .empty-title {
  width: auto;
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 780;
  color: inherit;
}

#accountsList > .accounts-empty-state .empty-text {
  max-width: 330px;
  margin: 0;
  line-height: 1.5;
  color: var(--muted, #9ba5b8);
}

body.theme-light #accountsList > .accounts-empty-state {
  border-color: rgba(71, 85, 105, .22);
  background: linear-gradient(145deg, #f8fbff, #f3f6fb);
  color: #182235;
}

body.theme-light #accountsList > .accounts-empty-state .empty-text { color: #667085; }

@media (max-width: 560px) {
  #accountForm .account-form-submit,
  #accountForm .account-form-cancel {
    width: 100%;
    min-width: 0 !important;
  }

  #accountsList > .accounts-empty-state {
    min-height: 188px;
    margin-top: 14px !important;
    padding: 24px 20px !important;
  }
}

/* Keep the account-password eye visible and easy to hit at every breakpoint. */
html body #accountForm .password-input-wrapper .password-toggle {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  right: 8px !important;
  padding: 7px !important;
  color: var(--muted, #8e99ab) !important;
  opacity: 1 !important;
  visibility: visible !important;
  top: 50% !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}

html body #accountForm .password-input-wrapper .password-toggle svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
}

html body #accountForm .password-input-wrapper .password-toggle:hover,
html body #accountForm .password-input-wrapper .password-toggle:focus-visible {
  color: var(--accent, #3b7dff) !important;
  background: rgba(59, 125, 255, .1) !important;
  outline: none !important;
}

html body #accountForm .password-input-wrapper input {
  padding-right: 54px !important;
}

/* Shop management: explain the flow before asking the manager to act. */
#micAllocationPanel .shop-management {
  display: grid !important;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.5fr);
  align-items: end !important;
  gap: 16px !important;
  padding: 18px 20px !important;
  background: rgba(255,255,255,.025) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

#micAllocationPanel .shop-management__intro { align-self: center; }
#micAllocationPanel .shop-management__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
#micAllocationPanel .shop-management__count {
  display: inline-grid;
  min-width: 25px;
  min-height: 25px;
  place-items: center;
  padding: 0 7px;
  border-radius: 8px;
  background: rgba(59,125,255,.18);
  color: #9cc0ff;
  font-size: 12px;
}
#micAllocationPanel .shop-management__intro p {
  max-width: 255px;
  margin: 5px 0 0;
  color: rgba(255,255,255,.58);
  font-size: 12px;
  line-height: 1.45;
}
#micAllocationPanel .shop-management__create {
  display: grid;
  grid-template-columns: minmax(185px, 1.2fr) minmax(170px, .8fr);
  gap: 10px;
  min-width: 0;
}
#micAllocationPanel .shop-management__field {
  display: block;
  min-width: 0;
  color: rgba(255,255,255,.58);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
}
#micAllocationPanel .shop-management__field > span { display:block; margin: 0 0 5px 2px; }
#micAllocationPanel .shop-management__field small { color: inherit; font-weight: 500; }
#micAllocationPanel .shop-management__field input,
#micAllocationPanel .shop-management__region > button {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: #14171f;
  color: #fff;
  font: inherit;
  font-size: 13px;
}
#micAllocationPanel .shop-management__region > button {
  min-height: 46px;
  border-radius: 12px;
  background: #181d29;
  border-color: rgba(145, 164, 199, .32);
  color: #f5f7fb;
}
#micAllocationPanel .shop-management__region > button:hover,
#micAllocationPanel .shop-management__region > button:focus-visible {
  border-color: rgba(94, 144, 255, .88);
  background: #1d2432;
  outline: none;
}
#micAllocationPanel .shop-management__region-icon {
  position: absolute;
  left: 12px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: #91b8ff;
}
#micAllocationPanel .shop-management__region-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#micAllocationPanel .shop-management__field input { padding: 0 11px; }
#micAllocationPanel .shop-management__field input::placeholder { color: rgba(255,255,255,.4); }
#micAllocationPanel .shop-management__region { position: relative; }
#micAllocationPanel .shop-management__region > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 11px;
  cursor: pointer;
  text-align: left;
}
#micAllocationPanel .shop-management__region > button #newShopRegionLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#micAllocationPanel .shop-management__chevron { color: currentColor; transition: transform .18s ease; }
#micAllocationPanel .shop-management__region > button[aria-expanded="true"] .shop-management__chevron { transform: rotate(180deg); }
#micAllocationPanel #newShopRegionPanel {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 220px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: #1b1f2e;
  box-shadow: 0 15px 30px rgba(0,0,0,.38);
}
#micAllocationPanel #newShopRegionPanel .nsr-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  text-align: left;
}
#micAllocationPanel #newShopRegionPanel .nsr-opt > span { font-weight: 650; }
#micAllocationPanel #newShopRegionPanel .nsr-opt > small { color: rgba(255,255,255,.48); font-size: 11px; font-weight: 500; }
#micAllocationPanel #newShopRegionPanel .nsr-opt.is-clear { color: #dce7fb; }
#micAllocationPanel #newShopRegionPanel .nsr-opt:hover,
#micAllocationPanel #newShopRegionPanel .nsr-opt:focus-visible { background: rgba(255,255,255,.08); outline: none; }
#micAllocationPanel .shop-management__add,
#micAllocationPanel .shop-management__manage {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
#micAllocationPanel .shop-management__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#micAllocationPanel .shop-management__status {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
#micAllocationPanel .shop-management__status.is-success {
  border-color: rgba(34,197,94,.32);
  background: rgba(34,197,94,.1);
  color: #bbf7d0;
}
#micAllocationPanel .shop-management__status.is-error {
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.1);
  color: #fecaca;
}

/* Keep every label, value and action on the same visual axis. */
#micAllocationPanel .shop-management__intro {
  text-align: center !important;
}
#micAllocationPanel .shop-management__title-row {
  justify-content: center !important;
}
#micAllocationPanel .shop-management__intro p {
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
}
#micAllocationPanel .shop-management__field > span {
  margin-left: 0 !important;
  text-align: center !important;
}
#micAllocationPanel .shop-management__field input {
  text-align: center !important;
}
#micAllocationPanel .shop-management__region > button {
  position: relative;
  justify-content: center !important;
  padding-right: 32px !important;
  padding-left: 32px !important;
  text-align: center !important;
}
#micAllocationPanel .shop-management__region > button .shop-management__chevron {
  position: absolute;
  right: 12px;
}
#micAllocationPanel .shop-management__actions {
  justify-content: center !important;
}
#micAllocationPanel .shop-management__actions > button {
  display: inline-flex !important;
  flex: 1 1 180px;
  align-items: center !important;
  justify-content: center !important;
  max-width: 260px;
  text-align: center !important;
}
#micAllocationPanel .shop-management__add {
  border: 1px solid #4b8dff;
  background: #3b7dff;
  color: #fff;
  box-shadow: 0 5px 12px rgba(59,125,255,.22);
}
#micAllocationPanel .shop-management__add:hover { background: #2e6fe9; }
#micAllocationPanel .shop-management__manage {
  border: 1px solid rgba(255,255,255,.16);
  background: transparent;
  color: rgba(255,255,255,.82);
}
#micAllocationPanel .shop-management__manage:hover,
#micAllocationPanel .shop-management__manage:focus-visible { border-color: rgba(248,113,113,.75); color: #fecaca; outline: none; }

.shop-delete-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: min(10vh, 68px) 16px 32px;
  background: rgba(4,8,18,.64);
  backdrop-filter: blur(5px);
  animation: shop-modal-overlay-in .18s ease both;
}
/* Moving people between shops, above the delete list in the same dialog. */
.shop-move {
  padding: 14px 16px;
  margin: 0 0 6px;
  border: 1px solid var(--stroke, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  background: var(--glass-highlight, rgba(255, 255, 255, 0.03));
}
.shop-move__row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.shop-move__field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 190px; min-width: 0; }
.shop-move__field > span { font-size: 11px; color: var(--muted-2, rgba(255, 255, 255, 0.45)); }
.shop-move__field select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--stroke, rgba(255, 255, 255, 0.12));
  background: var(--bg-2, #16161c);
  color: var(--ink, #f5f5f5);
  font-size: 13px;
  max-width: 100%;
}
.shop-move__arrow { padding-bottom: 10px; color: var(--muted-2, rgba(255, 255, 255, 0.45)); }
.shop-move__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.shop-move__check { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted, rgba(255, 255, 255, 0.6)); }
.shop-move__status { flex: 1 1 auto; font-size: 12px; color: var(--muted, rgba(255, 255, 255, 0.6)); }
/* Moving people is not destructive — it must not borrow the red delete button. */
.shop-move__btn {
  padding: 9px 18px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: var(--color-primary, #3b82f6);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.shop-move__btn:disabled { opacity: .45; cursor: not-allowed; }
.shop-move__btn:not(:disabled):hover { filter: brightness(1.08); }
body.theme-light .shop-move { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.1); }
body.theme-light .shop-move__field select { background: #fff; color: #0f172a; border-color: rgba(0, 0, 0, 0.14); }

.shop-delete-modal__dialog {
  width: min(100%, 540px);
  box-sizing: border-box;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: #1b1f2e;
  color: #fff;
  box-shadow: 0 24px 56px rgba(0,0,0,.36);
  animation: shop-modal-dialog-in .22s cubic-bezier(.2,.8,.2,1) both;
}
.shop-delete-modal__heading { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.shop-delete-modal__eyebrow { margin:0 0 5px; color:#91b8ff; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.shop-delete-modal__heading h3 { margin:0; font-size:18px; line-height:1.25; }
.shop-delete-modal__hint { margin:6px 0 0; color:rgba(255,255,255,.58); font-size:13px; }
.shop-delete-modal__close { width:34px; height:34px; padding:0; border:0; border-radius:9px; background:transparent; color:inherit; cursor:pointer; font-size:24px; line-height:1; }
.shop-delete-modal__close:hover { background:rgba(255,255,255,.09); }
.shop-delete-modal__search { display:block; margin-top:18px; color:rgba(255,255,255,.58); font-size:12px; font-weight:600; }
.shop-delete-modal__search span { display:block; margin:0 0 6px; }
.shop-delete-modal__search input { width:100%; box-sizing:border-box; min-height:42px; padding:0 12px; border:1px solid rgba(255,255,255,.16); border-radius:10px; background:#14171f; color:#fff; font:inherit; font-size:14px; }
.shop-delete-modal__list { max-height:300px; margin-top:10px; overflow-y:auto; border:1px solid rgba(255,255,255,.1); border-radius:10px; }
.shop-delete-modal__item { display:flex; align-items:flex-start; gap:10px; padding:11px 12px; border-bottom:1px solid rgba(255,255,255,.07); cursor:pointer; font-size:14px; }
.shop-delete-modal__item:last-child { border-bottom:0; }
.shop-delete-modal__item:hover { background:rgba(255,255,255,.045); }
.shop-delete-modal__item input { width:16px; height:16px; margin:1px 0 0; accent-color:#ef4444; }
.shop-delete-modal__item strong { display:block; font-weight:650; }
.shop-delete-modal__item small { display:block; margin-top:2px; color:rgba(255,255,255,.48); font-size:12px; }
.shop-delete-modal__no-results { padding:18px 12px; color:rgba(255,255,255,.52); font-size:13px; text-align:center; }
.shop-delete-modal__empty { margin-top:18px; padding:20px; border:1px dashed rgba(255,255,255,.18); border-radius:12px; text-align:center; }
.shop-delete-modal__empty-icon { display:grid; width:36px; height:36px; margin:0 auto 10px; place-items:center; border-radius:10px; background:rgba(59,125,255,.16); color:#9cc0ff; font-size:22px; }
.shop-delete-modal__empty p { max-width:390px; margin:0 auto; color:rgba(255,255,255,.64); font-size:14px; line-height:1.5; }
.shop-delete-modal__actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:16px; }
.shop-delete-modal__selected { margin-right:auto; color:rgba(255,255,255,.58); font-size:13px; }
.shop-delete-modal__selected strong { color:#fff; }
.shop-delete-modal__cancel,
.shop-delete-modal__confirm { min-height:40px; padding:0 14px; border-radius:10px; border:0; cursor:pointer; font:inherit; font-size:13px; font-weight:700; }
.shop-delete-modal__cancel { background:rgba(255,255,255,.1); color:#fff; }
.shop-delete-modal__confirm { background:#ef4444; color:#fff; }
.shop-delete-modal__confirm:disabled { cursor:not-allowed; opacity:.45; }

html body.theme-light #micAllocationPanel .shop-management { background:#fff !important; border-bottom-color:#e7ecf3 !important; }
html body.theme-light #micAllocationPanel .shop-management__title-row { color:#1d2939 !important; }
html body.theme-light #micAllocationPanel .shop-management__count { background:#edf4ff !important; color:#2867d9 !important; }
html body.theme-light #micAllocationPanel .shop-management__intro p,
html body.theme-light #micAllocationPanel .shop-management__field { color:#667085 !important; }
html body.theme-light #micAllocationPanel .shop-management__field input,
html body.theme-light #micAllocationPanel .shop-management__region > button {
  border-color:#d8e1ed !important;
  background:#fff !important;
  color:#344054 !important;
}
html body.theme-light #micAllocationPanel .shop-management__region > button {
  background: #f8fbff !important;
  border-color: #cdd9ea !important;
  color: #344054 !important;
}
html body.theme-light #micAllocationPanel .shop-management__region > button:hover,
html body.theme-light #micAllocationPanel .shop-management__region > button:focus-visible {
  background: #f1f6ff !important;
  border-color: #7cabff !important;
}
html body.theme-light #micAllocationPanel .shop-management__region-icon { color: #3478ef; }
html body.theme-light #micAllocationPanel .shop-management__field input::placeholder { color:#98a2b3 !important; }
html body.theme-light #micAllocationPanel #newShopRegionPanel { border-color:#d8e1ed !important; background:#fff !important; box-shadow:0 14px 30px rgba(31,48,79,.16) !important; }
html body.theme-light #micAllocationPanel #newShopRegionPanel .nsr-opt { color:#344054 !important; }
html body.theme-light #micAllocationPanel #newShopRegionPanel .nsr-opt > small { color:#7a8699 !important; }
html body.theme-light #micAllocationPanel #newShopRegionPanel .nsr-opt.is-clear { border-color:#e0e8f3 !important; background:#f8fbff !important; }
html body.theme-light #micAllocationPanel #newShopRegionPanel .nsr-opt:hover,
html body.theme-light #micAllocationPanel #newShopRegionPanel .nsr-opt:focus-visible { background:#eef4ff !important; }
html body.theme-light #micAllocationPanel .shop-management__add { border-color:#3b7dff !important; background:#3b7dff !important; color:#fff !important; }
html body.theme-light #micAllocationPanel .shop-management__manage { border-color:#cfd9e8 !important; background:#fff !important; color:#475467 !important; box-shadow:none !important; }
html body.theme-light #micAllocationPanel .shop-management__manage:hover,
html body.theme-light #micAllocationPanel .shop-management__manage:focus-visible { border-color:#fca5a5 !important; color:#c2413a !important; }
html body.theme-light #micAllocationPanel .shop-management__status.is-success { border-color:#a7e5c0; background:#f0fdf4; color:#167044; }
html body.theme-light #micAllocationPanel .shop-management__status.is-error { border-color:#fecaca; background:#fff5f5; color:#b42318; }
html body.theme-light .shop-delete-modal { background:rgba(17,24,39,.5); }
html body.theme-light .shop-delete-modal__dialog { border-color:#d8e1ed; background:#fff; color:#1d2939; box-shadow:0 24px 56px rgba(31,48,79,.26); }
html body.theme-light .shop-delete-modal__eyebrow { color:#3478ef; }
html body.theme-light .shop-delete-modal__hint,
html body.theme-light .shop-delete-modal__search,
html body.theme-light .shop-delete-modal__selected { color:#667085; }
html body.theme-light .shop-delete-modal__close:hover { background:#f2f5f9; }
html body.theme-light .shop-delete-modal__search input { border-color:#d8e1ed; background:#fff; color:#344054; }
html body.theme-light .shop-delete-modal__list { border-color:#dbe4ef; }
html body.theme-light .shop-delete-modal__item { border-bottom-color:#edf1f6; }
html body.theme-light .shop-delete-modal__item:hover { background:#f7faff; }
html body.theme-light .shop-delete-modal__item small,
html body.theme-light .shop-delete-modal__no-results { color:#667085; }
html body.theme-light .shop-delete-modal__empty { border-color:#d6e1f1; background:#f8fbff; }
html body.theme-light .shop-delete-modal__empty p { color:#667085; }
html body.theme-light .shop-delete-modal__cancel { background:#eef2f6; color:#344054; }
html body.theme-light .shop-delete-modal__selected strong { color:#1d2939; }

@keyframes shop-modal-overlay-in { from { opacity:0; } to { opacity:1; } }
@keyframes shop-modal-dialog-in { from { opacity:0; transform:translateY(-10px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width: 980px) {
  #micAllocationPanel .shop-management { grid-template-columns: minmax(180px, .72fr) minmax(0, 1.28fr); }
  #micAllocationPanel .shop-management__create {
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    box-sizing: border-box;
    padding-right: 14px;
  }
}
@media (max-width: 680px) {
  #micAllocationPanel .shop-management { grid-template-columns:1fr; gap:12px !important; }
  #micAllocationPanel .shop-management__intro p { max-width:none; }
  #micAllocationPanel .shop-management__create { grid-template-columns:1fr 1fr; }
  #micAllocationPanel .shop-management__actions { grid-column:1 / -1; }
  .shop-delete-modal { align-items:flex-end; padding:16px 10px 10px; }
  .shop-delete-modal__dialog { padding:18px; border-radius:16px; }
}
@media (max-width: 420px) {
  #micAllocationPanel .shop-management__create { grid-template-columns:1fr; }
  #micAllocationPanel .shop-management__actions { display:grid; grid-template-columns:1fr; }
  .shop-delete-modal__actions { flex-wrap:wrap; }
  .shop-delete-modal__selected { flex-basis:100%; margin-bottom:2px; }
  .shop-delete-modal__cancel,
  .shop-delete-modal__confirm { flex:1; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-delete-modal,
  .shop-delete-modal__dialog,
  #micAllocationPanel .shop-management__chevron { animation:none !important; transition:none !important; }
}

/* ===== Pilot applications tab (SUPERADMIN ONLY) ===== */
.admin-tab-btn.pilot-tab-btn{display:none !important}
body.role-superadmin .admin-tab-btn.pilot-tab-btn{display:flex !important}
#tab-pilots .pilots-container{max-width:980px;margin:0 auto;padding:6px 4px 48px}
.pilots-header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px}
.pilots-title{font-size:26px;font-weight:750;letter-spacing:-.02em;margin:0 0 6px;color:var(--text,#f5f5fa)}
.pilots-sub{color:var(--muted);font-size:14px;margin:0;max-width:640px;line-height:1.5}
.pilots-refresh{flex:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--text,#f5f5fa);font-size:18px;cursor:pointer;transition:.3s transform,.2s background}
.pilots-refresh:hover{background:var(--surface-2);transform:rotate(90deg)}
.pilots-subnav{display:inline-flex;gap:4px;padding:5px;border-radius:14px;background:var(--glass-bg);border:1px solid var(--glass-border);margin-bottom:22px;flex-wrap:wrap}
.pilots-subnav-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:.18s}
.pilots-subnav-btn:hover{color:var(--text,#f5f5fa)}
.pilots-subnav-btn.active{background:var(--accent,#3b7dff);color:#fff}
.pilots-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:rgba(255,255,255,.14);font-size:11px;font-weight:700}
.pilots-subnav-btn.active .pilots-count{background:rgba(255,255,255,.25)}
.pilots-list{display:flex;flex-direction:column;gap:14px}
.pilots-empty{padding:48px 20px;text-align:center;color:var(--muted);font-size:14px;border:1px dashed var(--glass-border);border-radius:16px}
.pilot-card{border:1px solid var(--glass-border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-card);overflow:hidden}
.pilot-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:18px 20px 14px}
.pilot-card__id{display:flex;flex-direction:column;gap:3px;min-width:0}
.pilot-card__company{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--text,#f5f5fa)}
.pilot-card__contact{font-size:13px;color:var(--muted)}
.pilot-status{flex:none;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:650}
.pilot-status i{width:7px;height:7px;border-radius:50%}
.pilot-status.pending{background:rgba(255,187,85,.13);color:#ffbb55;border:1px solid rgba(255,187,85,.3)}
.pilot-status.pending i{background:#ffbb55}
.pilot-status.approved{background:rgba(53,208,127,.13);color:#35d07f;border:1px solid rgba(53,208,127,.3)}
.pilot-status.approved i{background:#35d07f}
.pilot-status.rejected{background:rgba(255,101,119,.13);color:#ff6577;border:1px solid rgba(255,101,119,.3)}
.pilot-status.rejected i{background:#ff6577}
.pilot-status.expired{background:rgba(255,255,255,.08);color:var(--muted);border:1px solid var(--glass-border)}
.pilot-status.expired i{background:currentColor}
.pilot-card__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 20px;padding:4px 20px 16px;border-top:1px solid var(--glass-border)}
.pilot-field{display:flex;flex-direction:column;gap:3px;min-width:0}
.pilot-field span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.pilot-field strong{font-size:14px;font-weight:600;color:var(--text,#f5f5fa);word-break:break-word}
.pilot-field a{color:var(--accent,#3b7dff);text-decoration:none}
.pilot-comment{margin:0 20px 16px;padding:12px 14px;border-radius:12px;background:var(--glass-bg);border-left:3px solid var(--accent,#3b7dff);font-size:13px;color:var(--muted);line-height:1.5}
.pilot-card__actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 20px;border-top:1px solid var(--glass-border);background:var(--glass-bg)}
.pilot-comment-input{flex:1;min-width:220px;padding:11px 14px;border:1px solid var(--glass-border);border-radius:12px;background:var(--surface-2);color:var(--text,#f5f5fa);font:inherit;font-size:13px}
.pilot-comment-input::placeholder{color:var(--muted)}
.pilot-comment-input:focus{outline:none;border-color:var(--accent,#3b7dff);box-shadow:0 0 0 3px var(--accent-glow,rgba(59,125,255,.3))}
.pilot-btn{border:0;border-radius:12px;padding:11px 20px;font:inherit;font-size:14px;font-weight:650;cursor:pointer;transition:.2s transform,.2s opacity;white-space:nowrap}
.pilot-btn--approve{background:linear-gradient(135deg,#2fb56a,#35d07f);color:#fff}
.pilot-btn--reject{background:rgba(255,101,119,.14);color:#ff6577;border:1px solid rgba(255,101,119,.32)}
.pilot-btn:hover{transform:translateY(-1px)}
.pilot-btn:disabled{opacity:.55;pointer-events:none}
@media(max-width:640px){.pilot-card__actions{flex-direction:column;align-items:stretch}.pilot-comment-input{min-width:0}}

/* ===== Персонал: make Мережа/Регіон/Місто/Магазин selects match the email input ===== */
#accountForm .form-input {
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgb(245, 245, 245) !important;
  font-size: 14px !important;
  padding: 12px 14px !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
#accountForm .form-input:hover { border-color: rgba(255, 255, 255, 0.2) !important; }
#accountForm .form-input:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow), 0 0 20px rgba(59, 125, 255, 0.15) !important;
}
/* The "Магазин(-и)" trigger is a button.form-input with inline flex — keep its
   layout, just align its label colour with a real placeholder. */
#accountForm #accExtraShopsBtn.form-input { min-height: 46px; }
#accountForm #accExtraShopsLabel { color: rgba(248, 248, 252, 0.5) !important; }
body.theme-light #accountForm .form-input {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: #0b0b0c !important;
}
body.theme-light #accountForm .form-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(41, 98, 255, 0.15) !important;
}
body.theme-light #accountForm #accExtraShopsLabel { color: rgba(0,0,0,0.4) !important; }

/* ===== v10.1.0 — Dashboard seller table ==============================
   Replaced the 3-row "top sellers" list. Shows the business numbers per
   seller (revenue / sessions / conversion / points) and scrolls up to 100
   rows without stretching the dashboard. */
.dash-sellers-head,
.dash-sellers-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}
.dash-sellers-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-secondary, #94a3b8);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  padding-bottom: 6px;
}
.dash-sellers-scroll {
  max-height: 420px;
  overflow-y: auto;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
  scrollbar-width: thin;
}
.dash-sellers-row {
  background: var(--bg-tertiary, rgba(255, 255, 255, .03));
  border-radius: 8px;
  transition: background .15s ease;
}
.dash-sellers-row:hover { background: rgba(255, 255, 255, .07); }
/* Four number columns at a fixed 96px plus the rank and the chevron came to
   438px. In a dashboard card narrower than that the name — the only thing that
   says WHO the row is about — was squeezed to 23px and rendered as blank space.
   The row now refuses to go below a width where the name is still readable, and
   the container scrolls sideways instead of crushing it. */
.dash-sellers-head,
.dash-sellers-row { min-width: 560px; }
.dash-sellers-name { display: flex; flex-direction: column; min-width: 132px; }
.dash-sellers-name > span {
  color: var(--text-primary, #f1f5f9);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-sellers-name > small {
  color: var(--text-secondary, #94a3b8);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The login is the identity the app, the mic and the logs all use; the ПІБ is
   how a manager knows who that is. Both belong on the row, so the login gets a
   monospace tint that reads as an identifier rather than as part of the name. */
.dash-sellers-login {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .01em;
  color: var(--text-secondary, #94a3b8);
}
.dash-sellers-noname { color: var(--text-secondary, #94a3b8); font-style: italic; font-weight: 500; }
.dash-sellers-nodata { color: var(--text-secondary, #94a3b8); opacity: .75; cursor: help; }
.dash-sellers-col {
  width: 84px;
  flex: 0 0 84px;
  text-align: right;
  font-size: 12.5px;
  color: var(--text-primary, #f1f5f9);
  white-space: nowrap;
}
.dash-sellers-col small { color: var(--text-secondary, #94a3b8); font-size: 11px; }
.dash-sellers-btn {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dash-sellers-btn:hover {
  background: var(--color-primary, #3b82f6);
  border-color: var(--color-primary, #3b82f6);
  color: #fff;
}
body.theme-light .dash-sellers-head { border-bottom-color: rgba(0, 0, 0, .09); }
body.theme-light .dash-sellers-row { background: rgba(0, 0, 0, .035); }
body.theme-light .dash-sellers-row:hover { background: rgba(0, 0, 0, .06); }
body.theme-light .dash-sellers-btn { border-color: rgba(0, 0, 0, .14); }
@media (max-width: 720px) {
  .dash-sellers-head { display: none; }
  .dash-sellers-row { flex-wrap: wrap; row-gap: 4px; }
  .dash-sellers-col { width: auto; flex: 0 0 auto; text-align: left; }
  .dash-sellers-col::before { content: attr(title) ': '; color: var(--text-secondary, #94a3b8); font-size: 10.5px; }
}

/* ===== v10.1.0 — Dashboard date range ================================
   The chips (7/14/30/90/365) never told you which dates you were looking at,
   and there was no way to ask for an arbitrary window — e.g. 65 days, or a
   month that ended weeks ago. */
.dash-date-range { position: relative; display: inline-flex; }
.dash-date-range__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  color: var(--text-primary, #f1f5f9);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.dash-date-range__toggle:hover { border-color: var(--color-primary, #3b82f6); }
.dash-date-range__toggle.is-custom {
  border-color: var(--color-primary, #3b82f6);
  background: rgba(59, 130, 246, .14);
}
.dash-date-range__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 340px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: var(--bg-secondary, #131722);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  /* v11.7.0: tidy grid — the two date fields share the first row, the action
     row and the presets each span both columns. Replaces the old stacked
     label-beside-input rows that rendered as an uneven pile. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 8px;
}
.dash-date-range__panel[hidden] { display: none; }
.dash-date-range__panel > .dash-date-range__actions,
.dash-date-range__panel > .dash-date-range__presets { grid-column: 1 / -1; }
.dash-date-range__field { display: flex; flex-direction: column; gap: 5px; margin: 0; min-width: 0; }
.dash-date-range__field > span {
  width: auto;
  flex: none;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary, #94a3b8);
}
.dash-date-range__field input {
  width: 100%;
  flex: none;
  height: 30px;
  min-height: 0;
  padding: 0 9px;
  font-size: 12.5px;
  border-radius: 8px;
}
.dash-date-range__actions { display: flex; gap: 8px; margin-top: 0; }
.dash-date-range__actions button {
  height: 30px;
  min-height: 0;
  padding: 0 14px;
  font-size: 12px;
  border-radius: 8px;
  line-height: 1;
  white-space: nowrap;
}
.dash-date-range__actions .btn-secondary { flex: 0 0 auto; }
.dash-date-range__actions .btn-primary { flex: 1; }
.dash-date-range__presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.dash-date-range__presets button {
  height: 30px;
  min-height: 0;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, .045);
  color: var(--text-secondary, #94a3b8);
  font-size: 11.5px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.dash-date-range__presets button:hover {
  border-color: transparent;
  background: rgba(59, 130, 246, .16);
  color: var(--text-primary, #f1f5f9);
}
body.theme-light .dash-date-range__toggle { border-color: rgba(0, 0, 0, .14); background: #fff; }
body.theme-light .dash-date-range__panel { background: #fff; border-color: rgba(0, 0, 0, .12); }
body.theme-light .dash-date-range__presets { border-top-color: rgba(0, 0, 0, .08); }
body.theme-light .dash-date-range__presets button { border-color: transparent; background: rgba(0, 0, 0, .04); }
body.theme-light .dash-date-range__presets button:hover { background: rgba(59, 130, 246, .1); }

/* v11.7.0: compact metrics INSIDE the panel. The global form reset
   (`html body input[type="date"] … { min-height: 44px !important }`) and the
   button pill reset both outrun the plain class rules above, so the panel's
   own id re-asserts the 30px control height here — same !important arms race,
   higher specificity. */
#dashDateRangePanel input[type="date"] {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 9px !important;
  font-size: 12.5px !important;
  border-radius: 8px !important;
}
#dashDateRangePanel .dash-date-range__actions button {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  line-height: 1 !important;
}
#dashDateRangePanel .dash-date-range__presets button {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  font-size: 11.5px !important;
  border-radius: 8px !important;
  line-height: 1 !important;
  border-color: transparent !important;
  background: rgba(255, 255, 255, .045) !important;
}
#dashDateRangePanel .dash-date-range__presets button:hover {
  background: rgba(59, 130, 246, .16) !important;
  color: var(--text-primary, #f1f5f9) !important;
}
body.theme-light #dashDateRangePanel .dash-date-range__presets button {
  background: rgba(0, 0, 0, .04) !important;
}
body.theme-light #dashDateRangePanel .dash-date-range__presets button:hover {
  background: rgba(59, 130, 246, .1) !important;
}

/* v11.7.0: pulse tiles — a no-data placeholder dash must not wear the metric's
   accent colour. The !important is required to beat the inline style colour on
   #pulseGreeting / #pulsePromo / … elements. */
#adminPanel #dashBusinessPulse .pulse-card .dash-pulse-empty {
  color: rgba(100, 116, 139, .75) !important;
}
body.theme-light #adminPanel #dashBusinessPulse .pulse-card .dash-pulse-empty {
  color: rgba(100, 116, 139, .6) !important;
}

/* ===== v10.1.0 — Dashboard header layout ============================
   Title + date range on one line; period presets and the region/shop scope
   grouped on the right (presets first — "which period → which places").
   Selectors are deliberately specific: a global `button` rule in this app
   forces 22px radius / 40px height / 14px text, which turned the date control
   into a pill that matched nothing else on the screen.

   v11.7.0 — the header stacks: title block on top, then ONE toolbar row with
   the date chip, the presets and the scope filters side by side. The old
   space-between single row (title+date left, presets+filters right) opened a
   dead middle gap on wide screens that read as broken layout; controls now
   sit together with equal gaps and wrap as one unit. */
.dashboard-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.dashboard-header__lead { min-width: 0; }
.dashboard-header__titlerow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dashboard-header__titlerow .dashboard-title { margin: 0; }
.dashboard-header__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dashboard-header__controls #dashScopeFilters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Period presets — square-ish, same metrics as the date control. */
.dashboard-header .dash-period-selector {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
}
.dashboard-header .dash-period-selector .dash-period-btn.dash-period-btn {
  height: 30px;
  min-height: 0;
  padding: 0 13px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary, rgba(255, 255, 255, .68));
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.dashboard-header .dash-period-selector .dash-period-btn.dash-period-btn:hover {
  color: var(--text-primary, #f1f5f9);
  background: rgba(255, 255, 255, .06);
}
.dashboard-header .dash-period-selector .dash-period-btn.dash-period-btn.is-active {
  background: var(--color-primary, #3b82f6);
  color: #fff;
}

/* Date control — a rectangle with the same 30px height and 8px radius as the
   presets, NOT a pill. Overrides the global button styling. */
.dashboard-header .dash-date-range .dash-date-range__toggle.dash-date-range__toggle {
  height: 30px;
  min-height: 0;
  padding: 0 11px;
  gap: 7px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  color: var(--text-primary, #f1f5f9);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: .01em;
}
.dashboard-header .dash-date-range .dash-date-range__toggle.dash-date-range__toggle svg {
  flex: 0 0 auto;
  opacity: .65;
}
.dashboard-header .dash-date-range .dash-date-range__toggle.dash-date-range__toggle:hover {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .07);
}
.dashboard-header .dash-date-range .dash-date-range__toggle.is-custom {
  border-color: var(--color-primary, #3b82f6);
  background: rgba(59, 130, 246, .14);
}
.dashboard-header .dash-date-range__panel { left: 0; right: auto; }

/* v10.1.2 — the dashboard's blanket `#tab-home * { max-width: 100% }` overflow
   guard also applies to absolutely positioned popovers, whose percentage
   resolves against the *trigger* rather than the page. The date panel asks for
   280px but is anchored to a ~171px chip, so it was clamped to the chip's width
   and clipped its own controls ("Застосувати" rendered as "астосуват").
   Keep the guard's intent — never wider than the screen — but measure it
   against the viewport, which is what the guard was actually protecting.

   The 280px the panel asks for was sized for its own 11.5px/8px buttons, but
   the global pill reset wins on specificity and forces 14px text with 16–24px
   padding, so "Минулий місяць" overflowed its content box by 14px and was cut
   (the buttons are `overflow: hidden; white-space: nowrap`). Widen to fit the
   sizing that actually applies rather than re-fighting that !important chain,
   and trim only the preset padding, which is the one place still short. */
#tab-home .dash-date-range__panel {
  width: 340px;
  max-width: calc(100vw - 24px);
}
#dashDateRangePanel .dash-date-range__presets button {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

body.theme-light .dashboard-header .dash-period-selector {
  background: rgba(0, 0, 0, .03);
  border-color: rgba(0, 0, 0, .1);
}
body.theme-light .dashboard-header .dash-period-selector .dash-period-btn.dash-period-btn:hover {
  background: rgba(0, 0, 0, .05);
}
body.theme-light .dashboard-header .dash-date-range .dash-date-range__toggle.dash-date-range__toggle {
  border-color: rgba(0, 0, 0, .13);
  background: #fff;
}

@media (max-width: 720px) {
  .dashboard-header__controls { width: 100%; }
  .dashboard-header .dash-period-selector { flex: 1; justify-content: space-between; }
  .dashboard-header .dash-period-selector .dash-period-btn.dash-period-btn { padding: 0 9px; font-size: 11px; }
}

/* ===== v10.1.0 — dashboard controls: escape the global pill ==========
   style.css carries ELEVEN stacked `!important` rules that force
   `border-radius: 9999px` (plus 40px height / 14px text / 20px padding) onto
   every `button` in the app. Nothing below `!important` can win, which is why
   the date control rendered as a pill matching none of its neighbours.
   These rules re-state the intended geometry at the same weight. */
html body .dashboard-header .dash-date-range__toggle,
html body .dashboard-header .dash-period-selector .dash-period-btn {
  height: 30px !important;
  min-height: 0 !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
}
html body .dashboard-header .dash-date-range__toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 11px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  background: rgba(255, 255, 255, .04) !important;
  color: var(--text-primary, #f1f5f9) !important;
  font-variant-numeric: tabular-nums;
}
html body .dashboard-header .dash-date-range__toggle:hover {
  border-color: rgba(255, 255, 255, .2) !important;
  background: rgba(255, 255, 255, .07) !important;
}
html body .dashboard-header .dash-date-range__toggle.is-custom {
  border-color: var(--color-primary, #3b82f6) !important;
  background: rgba(59, 130, 246, .14) !important;
}
html body .dashboard-header .dash-period-selector .dash-period-btn {
  padding: 0 13px !important;
  border: none !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--text-secondary, rgba(255, 255, 255, .68)) !important;
}
html body .dashboard-header .dash-period-selector .dash-period-btn:hover {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--text-primary, #f1f5f9) !important;
}
html body .dashboard-header .dash-period-selector .dash-period-btn.is-active {
  background: var(--color-primary, #3b82f6) !important;
  color: #fff !important;
}
/* The scope filter triggers sit in the same row — match them too. */
html body .dashboard-header__controls #dashScopeFilters > * > button,
html body .dashboard-header__controls #dashScopeFilters button {
  height: 30px !important;
  min-height: 0 !important;
  border-radius: 8px !important;
  padding: 0 11px !important;
  font-size: 12px !important;
}
body.theme-light html body .dashboard-header .dash-date-range__toggle,
body.theme-light .dashboard-header .dash-date-range__toggle {
  border-color: rgba(0, 0, 0, .13) !important;
  background: #fff !important;
}

/* v10.1.0 — final weight bump for the dashboard controls.
   The global reset uses a long `button:not(.a):not(.b):not(.c):not(.d):not(.e)`
   chain, and every `:not()` argument counts toward specificity — so a
   class-only override still loses. ID selectors settle it. */
/* v10.1.2 — the whole row used to be 30px controls, but the period buttons sit
   inside a padded container, so that group measured 40px while the date chip
   and the region/shop triggers beside it measured 30px. Three blocks in one row
   at two different heights reads as broken alignment, not as hierarchy.
   Everything visible in the row is now 40px on the outside: the period pills
   stay 30px because their container adds the remaining 10px. */
html body #dashDateRangeToggle.dash-date-range__toggle {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
  line-height: 1 !important;
  border-radius: 9px !important;
  padding: 0 13px !important;
}
html body #dashPeriodSelector .dash-period-btn.dash-period-btn {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  line-height: 1 !important;
  border-radius: 7px !important;
  padding: 0 13px !important;
}
html body #dashScopeFilters button {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  box-sizing: border-box !important;
  border-radius: 9px !important;
  padding: 0 13px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* v10.1.0 — region/shop scope triggers share the header row, so they share its
   metrics. `.dash-ms-trigger` is generated by initDashScopeFilters(). */
html body #dashScopeFilters .dash-ms-trigger.dash-ms-trigger {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  box-sizing: border-box !important;
  border-radius: 9px !important;
  padding: 0 13px !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* ===== v11.7.0 — scope dropdown skin ==================================
   The three multi-selects (Регіони / Магазини / Продавці) shared no styles at
   all: raw native checkboxes, unstyled panels, and only one of them searchable.
   One skin here — same background, border, radius and shadow family as the
   date-range panel — plus custom check rows, and every panel is searchable. */
html body #dashScopeFilters .dash-ms-trigger .dash-ms-chevron {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .6;
  transition: transform .18s ease;
}
html body #dashScopeFilters .dash-ms-wrap.is-open .dash-ms-trigger .dash-ms-chevron {
  transform: rotate(180deg);
  opacity: .95;
}
html body #dashScopeFilters .dash-ms-wrap.is-open .dash-ms-trigger.dash-ms-trigger {
  border-color: var(--color-primary, #3b82f6) !important;
  color: var(--text-primary, #f1f5f9) !important;
}
#dashScopeFilters .dash-ms-panel {
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: var(--bg-secondary, #131722);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  animation: dashMsPanelIn .14s ease;
}
@keyframes dashMsPanelIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
#dashScopeFilters .dash-ms-search {
  width: 100%;
  height: 30px;
  min-height: 30px;
  box-sizing: border-box;
  padding: 0 10px;
  font-size: 12.5px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  color: var(--text-primary, #f1f5f9);
  outline: none;
  margin-bottom: 8px;
}
#dashScopeFilters .dash-ms-search::placeholder { color: rgba(148, 163, 184, .6); }
#dashScopeFilters .dash-ms-search:focus { border-color: var(--color-primary, #3b82f6); }
#dashScopeFilters .dash-ms-list {
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#dashScopeFilters .dash-ms-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary, #f1f5f9);
}
#dashScopeFilters .dash-ms-option:hover { background: rgba(59, 130, 246, .1); }
#dashScopeFilters .dash-ms-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0;
  border-radius: 5px;
  border: 1.5px solid rgba(148, 163, 184, .45);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background .12s ease, border-color .12s ease;
}
#dashScopeFilters .dash-ms-option input[type="checkbox"]:hover { border-color: var(--color-primary, #3b82f6); }
#dashScopeFilters .dash-ms-option input[type="checkbox"]:checked {
  border-color: var(--color-primary, #3b82f6);
  background: var(--color-primary, #3b82f6);
}
#dashScopeFilters .dash-ms-option input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
#dashScopeFilters .dash-ms-option-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
#dashScopeFilters .dash-ms-option-text small {
  font-size: 10.5px;
  color: var(--text-secondary, #94a3b8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#dashScopeFilters .dash-ms-clear {
  margin-top: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  border-top: 0;
  background: rgba(255, 255, 255, .045);
  color: var(--text-secondary, #94a3b8);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
#dashScopeFilters .dash-ms-clear:hover {
  background: rgba(59, 130, 246, .16);
  color: var(--text-primary, #f1f5f9);
}
#dashScopeFilters .dash-ms-empty {
  padding: 14px 10px;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary, #94a3b8);
}
body.theme-light #dashScopeFilters .dash-ms-panel {
  border-color: rgba(0, 0, 0, .12);
  background: #fff;
}
body.theme-light #dashScopeFilters .dash-ms-option:hover { background: rgba(59, 130, 246, .08); }
body.theme-light #dashScopeFilters .dash-ms-option input[type="checkbox"] { border-color: rgba(71, 85, 105, .5); }
body.theme-light #dashScopeFilters .dash-ms-search {
  border-color: rgba(0, 0, 0, .12);
  background: rgba(0, 0, 0, .03);
}
body.theme-light #dashScopeFilters .dash-ms-clear { background: rgba(0, 0, 0, .04); }
body.theme-light #dashScopeFilters .dash-ms-clear:hover { background: rgba(59, 130, 246, .1); }

/* ===== v10.1.1 — post-session summary (п.21) + AI Feedback (п.20) =====
   Buttons here carry explicit geometry because the global button resets in this
   file force a 40px pill on every <button>; see the note above #dashScopeFilters. */
.mh-summary-overlay {
  position: fixed;
  inset: 0;
  z-index: 9600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 8, 15, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: mhSummaryFade 0.18s ease;
}
@keyframes mhSummaryFade { from { opacity: 0; } to { opacity: 1; } }

.mh-summary-card {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 28px 28px 22px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.10));
  border-radius: 18px;
  background: var(--bg-card, #121826);
  color: var(--text-primary, #fff);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.mh-summary-greeting { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.mh-summary-sub { margin: 0 0 18px; font-size: 12px; color: var(--text-secondary, rgba(255, 255, 255, 0.55)); }

.mh-summary-waiting {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.07);
}
.mh-summary-waiting strong { display: block; font-size: 14px; margin-bottom: 4px; }
.mh-summary-waiting p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary, rgba(255, 255, 255, 0.6)); }
.mh-summary-waiting-mik { flex: 0 0 56px; width: 56px; height: 56px; }
.mh-summary-waiting-mik .mik-face { display: block; }
.mh-summary-failed { border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.08); }
@media (prefers-reduced-motion: reduce) {
  .mh-summary-overlay { animation: none; }
}

.mh-summary-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.mh-summary-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 8px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.07));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}
.mh-summary-kpi-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary, rgba(255, 255, 255, 0.5)); }
.mh-summary-kpi-value { font-size: 18px; font-weight: 700; }

.mh-summary-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: 13px; }
.mh-summary-table th,
.mh-summary-table td { padding: 8px 2px; border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.06)); }
.mh-summary-table th { text-align: left; font-weight: 500; color: var(--text-secondary, rgba(255, 255, 255, 0.6)); }
.mh-summary-table td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.mh-summary-ai {
  padding: 14px 16px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.mh-summary-ai h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary, rgba(255, 255, 255, 0.55)); }
.mh-summary-ai h5 { margin: 12px 0 6px; font-size: 12px; font-weight: 600; }
.mh-summary-ai-text { margin: 0; font-size: 13px; line-height: 1.6; }
.mh-summary-ai-list ul { margin: 0; padding-left: 18px; }
.mh-summary-ai-list li { font-size: 13px; line-height: 1.55; margin-bottom: 4px; }
.mh-summary-ai-empty p { margin: 0; font-size: 12px; color: var(--text-secondary, rgba(255, 255, 255, 0.5)); }

.mh-summary-actions { display: flex; justify-content: center; margin-top: 18px; }
.mh-summary-btn {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 20px !important;
  border: none !important;
  border-radius: 9px !important;
  background: var(--accent-primary, #3b82f6) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer;
  min-width: 120px !important;
}

:root[data-theme="light"] .mh-summary-card,
body.light-theme .mh-summary-card { background: #fff; color: #0f172a; }
:root[data-theme="light"] .mh-summary-kpi,
body.light-theme .mh-summary-kpi { background: #f8fafc; }
:root[data-theme="light"] .mh-summary-ai,
body.light-theme .mh-summary-ai { background: #f8fafc; }

@media (max-width: 560px) {
  .mh-summary-card { padding: 22px 18px 18px; }
  .mh-summary-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== v10.1.1 (п.15) — FULL BI report viewer =====
   Explicit geometry on every control: the global button resets in this file
   force a 40px pill onto every <button>, so a plain class would lose. */
.mh-bi-overlay {
  position: fixed;
  inset: 0;
  z-index: 9700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 8, 15, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mh-bi-panel {
  display: flex;
  flex-direction: column;
  width: min(1180px, 100%);
  height: min(88vh, 100%);
  overflow: hidden;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.10));
  border-radius: 16px;
  background: var(--bg-card, #121826);
  color: var(--text-primary, #fff);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.mh-bi-head {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}
.mh-bi-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.mh-bi-head p { margin: 3px 0 0; font-size: 12px; color: var(--text-secondary, rgba(255, 255, 255, 0.55)); }
.mh-bi-head-actions { display: flex; gap: 10px; align-items: center; }
.mh-bi-search {
  height: 32px;
  min-width: 200px;
  padding: 0 12px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font-size: 12px;
}
.mh-bi-close {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6)) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer;
}
.mh-bi-close:hover { background: rgba(255, 255, 255, 0.08) !important; }

.mh-bi-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}
.mh-bi-tab {
  flex: 0 0 auto;
  display: inline-flex !important;
  gap: 6px;
  align-items: center;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 11px !important;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.10)) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--text-secondary, rgba(255, 255, 255, 0.65)) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap;
  cursor: pointer;
}
.mh-bi-tab span {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 10px;
  font-weight: 700;
}
.mh-bi-tab.is-active {
  border-color: transparent !important;
  background: var(--accent-primary, #3b82f6) !important;
  color: #fff !important;
}
.mh-bi-tab.is-active span { background: rgba(0, 0, 0, 0.22); }

.mh-bi-body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 14px 20px 18px; }
.mh-bi-note { margin: 0 0 10px; font-size: 12px; color: var(--text-secondary, rgba(255, 255, 255, 0.55)); }
.mh-bi-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--border-color, rgba(255, 255, 255, 0.07)); border-radius: 10px; }
.mh-bi-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 12px; }
.mh-bi-table th,
.mh-bi-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
  white-space: nowrap;
  text-align: left;
  vertical-align: top;
}
.mh-bi-table td { max-width: 520px; overflow: hidden; text-overflow: ellipsis; }
.mh-bi-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-card, #121826);
  font-weight: 700;
}
.mh-bi-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

/* Addressed by ID, not by class: style.css carries a stack of `!important`
   button resets whose long `:not()` chains out-specify any class selector, so
   `.btn-bi-view { height: ... !important }` silently lost and the button
   rendered 40px tall while its sibling was 44px. An ID (0,1,0,0) beats those
   chains. Geometry deliberately mirrors #downloadBiFullBtn so the pair reads as
   one control group — this card's primary button is a pill, and de-pilling only
   the secondary one would look like a mistake. */
#viewBiFullBtn {
  width: 100%;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(234, 179, 8, 0.55) !important;
  /* 12px matches #downloadBiFullBtn; without this the global pill reset forces
     22px and the two stacked buttons have visibly different corners. */
  border-radius: 12px !important;
  background: transparent !important;
  color: #fbbf24 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer;
}
#viewBiFullBtn:hover { background: rgba(234, 179, 8, 0.12) !important; }
/* v10.1.2: #fbbf24 is tuned for a dark surface. On the light theme it paints at
   1.61:1 against the card behind it — measured off the rendered pixels, not
   computed values — so the button was there but barely legible. Same hue, taken
   down to a shade that survives a white background. */
:root[data-theme="light"] #viewBiFullBtn,
body.theme-light #viewBiFullBtn,
body.light-theme #viewBiFullBtn {
  color: #8a5a00 !important;
  border-color: rgba(138, 90, 0, 0.45) !important;
}
:root[data-theme="light"] #viewBiFullBtn:hover,
body.theme-light #viewBiFullBtn:hover,
body.light-theme #viewBiFullBtn:hover { background: rgba(138, 90, 0, 0.08) !important; }

/* v10.1.2: the refresh glyph inherited --text (#f5f5fa) and sat on a 5%-black
   surface, i.e. near-white on near-white — 1.14:1, effectively invisible. */
:root[data-theme="light"] .pilots-refresh,
body.theme-light .pilots-refresh,
body.light-theme .pilots-refresh {
  color: #334155 !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
}

:root[data-theme="light"] .mh-bi-panel,
body.light-theme .mh-bi-panel { background: #fff; color: #0f172a; }
:root[data-theme="light"] .mh-bi-table thead th,
body.light-theme .mh-bi-table thead th { background: #fff; }
:root[data-theme="light"] .mh-bi-search,
body.light-theme .mh-bi-search { background: #f8fafc; }

@media (max-width: 640px) {
  .mh-bi-overlay { padding: 0; }
  .mh-bi-panel { height: 100%; border-radius: 0; }
  .mh-bi-search { min-width: 120px; }
}

/* v10.1.1 — the conversion donut's caption is an SVG <text> with a hard-coded
   `fill="rgba(255,255,255,0.55)"` presentation attribute. In the light theme the
   card behind it turns white, so "142/192" — the fraction that makes the
   percentage meaningful — became white-on-white and simply vanished. A CSS
   `fill` beats a presentation attribute, so no !important is needed. */
#dashDonutSub { fill: var(--text-secondary, rgba(255, 255, 255, 0.55)); }
:root[data-theme="light"] #dashDonutSub,
body.theme-light #dashDonutSub,
body.light-theme #dashDonutSub { fill: rgba(15, 23, 42, 0.60); }

/* ========================================================================
   v10.1.2 — SHAPE SCALE
   The interface had drifted to a pill-and-bubble look: ~93 visible elements
   computed to a full round, another ~90 sat at 14-20px. Most of that comes
   through the radius tokens, so the scale is retuned here rather than by
   editing ~900 individual declarations.

   Deliberately NOT touched: spinners, status dots, toggle knobs, progress
   dots, rank medallions and skeleton avatars. Those are round because the
   shape carries the meaning, and a blanket override would flatten them too.
   ===================================================================== */
:root {
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-card: 12px;
  --radius-control: 8px;

  --btn-radius: 8px;
  /* the pill token is applied with !important in ~30 places; squaring it here
     is what actually removes the lozenge shape from buttons */
  --btn-radius-pill: 9px;
  --input-radius: 8px;
  /* Those ~30 rules used to hard-code 9999px, which no token could reach, so
     the button reset always won and every button came out a lozenge. They now
     read this token. Thin elements — progress bars, dividers, thin badges —
     stay fully rounded regardless, because CSS clamps the radius to half the
     box; only the tall controls actually square off. */
  --radius-pill: 9px;

  --pm-radius-sm: 4px;  --pm-radius-md: 8px;  --pm-radius-lg: 10px;  --pm-radius-xl: 12px;
  --pers-radius-sm: 6px; --pers-radius-md: 8px; --pers-radius-lg: 10px;
}

/* Literal radii that no token reaches — the shells and surfaces that read as
   the app's "shape", so leaving them round would undo the scale above. */
.top-bar, .navbar { border-radius: 14px !important; }
.card, .modal, .modal-card, .dashboard-card, .stat-card,
.dashboard-pulse, .admin-tabs, .welcome-glass, .mobile-more-popup,
.notifications-dropdown, .lang-dropdown, #aiChatOutput, .ai-chat-block {
  border-radius: 12px !important;
}
.admin-tab-btn, .filter-chip, .file-chip, .ai-hint-btn, .ai-quick-btn,
.ai-chat-input-area input, .account-meta .meta-item, .tag-pill,
.notifications-mark-all, .lang-dropdown-item {
  border-radius: 8px !important;
}
/* Icon buttons were perfect circles; a rounded square keeps them legible as
   buttons without reading as bubbles. */
.top-bar button, #logoutBtn, #themeToggleBtn, #notificationsBell,
.ai-chat-input-area button, .notification-quick-actions .qa-icon,
html body .modal-close-btn, .desktop-sidebar-toggle, .desktop-sidebar-toggle-icon,
.dash-sellers-btn {
  border-radius: 9px !important;
}
/* Avatars: squared off per request, but still softened. */
.profile-avatar, .skeleton-avatar, #accsw-inline-avatar, .accsw-inline-avatar,
.accsw-avatar, .account-avatar { border-radius: 9px !important; }
.role-badge, .version-badge, .admin-promo-badge { border-radius: 6px !important; }

/* The dashboard cards carry thirteen competing border-radius declarations; the
   one that was winning is `#adminPanel #tab-home .stat-card` at two IDs, so a
   class-level override never reached them. Matching that weight is the only
   way to land the scale here. */
#adminPanel #tab-home .stat-card,
#adminPanel #tab-home .dashboard-card,
#adminPanel #tab-home .dashboard-pulse,
#adminPanel #tab-home .admin-block,
#adminPanel #tab-home .card,
#adminPanel .stat-card,
#adminPanel .dashboard-card,
#adminPanel .admin-block,
#adminPanel .card {
  border-radius: 12px !important;
}
#adminPanel .input, #adminPanel input.input, #adminPanel select, #adminPanel textarea {
  border-radius: 8px !important;
}

/* ========================================================================
   v10.1.2 — MOBILE DASHBOARD HEADER
   `#dashPeriodSelector` is a grid of fixed 44px columns sitting inside a flex
   row. On a phone the flex item shrank to 31px while its columns kept their
   132px, so the period buttons burst out of their own box and rendered
   underneath the region/shop filters — the two controls literally overlapped.
   The scope dropdown had the same problem in the other direction: it opened to
   455px inside a 375px viewport, so half of it was off-screen.

   Both controls now take the full row width and divide it, instead of being
   squeezed by a sibling.
   ===================================================================== */
@media (max-width: 768px) {
  html body #tab-home .dashboard-header__controls {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  html body #dashPeriodSelector {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 4px !important;
    box-sizing: border-box !important;
  }
  html body #dashPeriodSelector .dash-period-btn.dash-period-btn {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 2px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  html body #dashScopeFilters {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }
  html body #dashScopeFilters .dash-ms-wrap { min-width: 0 !important; width: 100% !important; }
  /* v10.2.0: "Продавці" holds full names and a search box, so it takes the whole
     second row rather than sharing a 170px column with "Магазини". */
  html body #dashScopeFilters .dash-ms-wrap:nth-child(3) { grid-column: 1 / -1 !important; }
  html body #dashScopeFilters .dash-ms-trigger.dash-ms-trigger {
    width: 100% !important;
    justify-content: space-between !important;
  }
  /* Keep the dropdown inside the screen, and anchor it to whichever edge its
     trigger sits on so it never opens off the right of the viewport. */
  html body #dashScopeFilters .dash-ms-panel {
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    width: max-content !important;
    box-sizing: border-box !important;
  }
  html body #dashScopeFilters .dash-ms-wrap:nth-child(1) .dash-ms-panel {
    left: 0 !important;
    right: auto !important;
  }
  html body #dashScopeFilters .dash-ms-wrap:nth-child(2) .dash-ms-panel {
    left: auto !important;
    right: 0 !important;
  }
  /* The full-width row can just match its trigger — no guessing which edge. */
  html body #dashScopeFilters .dash-ms-wrap:nth-child(3) .dash-ms-panel {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
  }
  /* Title and date sat on one line and crowded each other at 375px. */
  html body #tab-home .dashboard-header__titlerow {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }
}

/* v10.1.2 — mobile gutters. #appScrollRoot > #appSection > #adminPanel >
   #tab-home > .dashboard-container each contributed their own horizontal
   padding: 10 + 16 + 4 + 10 + 12 = 52px per side, so a 375px phone spent 104px
   — 28% of the screen — on nested inset, and .dashboard-container sized itself
   to max-content and spilled 9px past the viewport anyway. One gutter, on the
   outermost element that actually needs it. */
@media (max-width: 768px) {
  html body #appScrollRoot.main-content,
  html body #appSection.app-sections,
  html body #adminPanel.admin-card,
  html body #tab-home.tab-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body #tab-home .dashboard-container {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Five period options in three columns left two orphans on a second row.
     They fit on one line; `#id.class` is the weight the ≤480 rule uses. */
  html body #dashPeriodSelector.dash-period-selector {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* ========================================================================
   v10.1.2 — ACCOUNT SWITCHER ON MOBILE
   The switcher collapsed to a 73px box showing initials and a chevron: the
   name is hidden below 768px by eight !important rules plus two injected
   <style> tags. That was a space decision — the top bar had ~33px spare at
   375px — but the result is a control you cannot read and can barely hit.

   Space is reclaimed from the wordmark (which is redundant next to the mic
   mark on a phone) and spent on the switcher, so the name comes back and the
   target grows. Weight has to exceed `header.top-bar #currentUserLabel`,
   hence the id+class pairing below.
   ===================================================================== */
@media (max-width: 768px) {
  html body header.top-bar .top-bar-left { min-width: 0 !important; flex: 0 1 auto !important; }
  html body header.top-bar .brand {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  /* The markup already ships a short wordmark for exactly this case; it was
     simply never switched on at phone widths. Full "MicHelper" costs 73px,
     "MH" costs ~24 — that difference is what pays for the switcher below. */
  html body header.top-bar .brand .brand-name { display: none !important; }
  html body header.top-bar .brand .brand-name-short {
    display: inline !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  /* Un-centring happens in index.html's inline block, co-located with the rule
     that centres it — that sheet out-specifies this one, so declaring position
     here would be a rule that never wins. Sizing only.

     The name stays hidden here. It was tried: at 375px the row has ~123px for
     this control, the name needs 66 of them, and the label collapsed to 7px —
     a blank gap between the avatar and the chevron. Eight existing rules hide
     it below 768px and they are hiding it for the right reason. The control
     just needs to be a proper target: bigger avatar, real padding, square
     corners. */
  html body header.top-bar .account-switcher-wrapper {
    flex: 0 0 auto !important;
    min-width: 92px !important;
    gap: 10px !important;
    padding: 0 14px !important;
    border-radius: 9px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  html body header.top-bar #accsw-inline-avatar.accsw-inline-avatar {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
  }
  html body header.top-bar .account-switcher-wrapper .accsw-chevron {
    flex: 0 0 auto !important;
    font-size: 13px !important;
    opacity: .75 !important;
  }
}


/* v10.2.x: the assistant answers rosters, comparisons and rankings with markdown
   tables. The chat renderer used to emit them as literal pipes; now they are real
   tables and need to survive a ~320px phone bubble, so the table scrolls inside
   its own box instead of stretching the message. */
.ai-md-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 10px 0;
  border: 1px solid var(--stroke, rgba(255,255,255,0.10));
  border-radius: 8px;
}
.ai-md-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  white-space: nowrap;
}
.ai-md-table th,
.ai-md-table td {
  padding: 7px 11px;
  text-align: left;
  border-bottom: 1px solid var(--stroke, rgba(255,255,255,0.07));
}
.ai-md-table th {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted, rgba(255,255,255,0.55));
  background: rgba(255,255,255,0.03);
  position: sticky;
  top: 0;
}
.ai-md-table tbody tr:last-child td { border-bottom: 0; }
.ai-md-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.ai-md-list { margin: 8px 0; padding-left: 20px; }
.ai-md-list li { margin: 3px 0; }
.ai-md-h { font-weight: 600; margin: 12px 0 6px; }

/* =============================================================================
   «Зараз на зміні» — trigger + modal
   -----------------------------------------------------------------------------
   Was an accordion inside a .card on the dashboard. Two problems: the global
   `.card:hover { animation: none }` reset cancelled the card's entry animation,
   so the whole block blinked out and faded back in every time the pointer left
   it; and an inline list of people squeezed between the stat row and the pulse
   grid had nowhere to grow. It is a button now, and the list is a real table in
   a modal. ID selectors throughout: the global button reset is a five-deep
   `:not()` chain with !important, and a class alone loses to it.
   ========================================================================== */

html body #liveShiftsOpen.live-shifts-trigger {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 24px;
  padding: 15px 18px !important;
  min-height: 0 !important;
  border-radius: 14px !important;
  border: 1px solid var(--stroke, rgba(255, 255, 255, 0.08)) !important;
  background: var(--surface, rgba(255, 255, 255, 0.03)) !important;
  color: var(--ink, #f8f8fc) !important;
  text-align: left;
  cursor: pointer;
  box-shadow: none !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}
html body #liveShiftsOpen.live-shifts-trigger.hidden { display: none !important; }
html body #liveShiftsOpen.live-shifts-trigger:hover {
  border-color: var(--accent, #3b7dff) !important;
}

.live-shifts-trigger-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--muted-2, rgba(255, 255, 255, 0.25));
}
/* Live means live: the dot breathes only while somebody is actually recording. */
.live-shifts-trigger-dot.is-live,
.live-shifts-head-dot.is-live,
.live-shifts-dot.is-live {
  background: var(--success, #22c55e);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  animation: live-shifts-pulse 2s ease-out infinite;
}
@keyframes live-shifts-pulse {
  70%  { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.live-shifts-trigger-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.live-shifts-trigger-title { font-size: 15px; font-weight: 600; }
.live-shifts-trigger-sub { font-size: 12px; color: var(--muted, rgba(255, 255, 255, 0.6)); }

.live-shifts-trigger-count {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted-2, rgba(255, 255, 255, 0.45));
  flex: 0 0 auto;
}
.live-shifts-trigger-count.is-live,
.live-shifts-head-count.is-live { color: var(--success, #22c55e); }

.live-shifts-trigger-go {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--muted-2, rgba(255, 255, 255, 0.45));
  transition: transform 0.15s ease, color 0.15s ease;
}
.live-shifts-trigger-go svg { width: 100%; height: 100%; display: block; }
html body #liveShiftsOpen.live-shifts-trigger:hover .live-shifts-trigger-go {
  transform: translateX(3px);
  color: var(--accent, #3b7dff);
}

/* ── the dialog ─────────────────────────────────────────────────────────── */

/* 820, not 720: the activity strip added a fifth column and the "Записів" one
   was being clipped off the right edge at 720. */
#liveShiftsModal .modal.live-shifts-modal {
  max-width: 820px;
  width: min(94vw, 820px);
  padding: 0;
  gap: 0;
  overflow: hidden;
}

/* ── every × in the app sits 16px low and 16px left ───────────────────────
   style.css:16347 styles .modal-close-btn as an absolutely positioned corner
   button — `position: absolute; top: 16px; right: 16px`. A later rule turns the
   position back to `relative`, but nothing ever cleared the offsets, and on a
   relatively positioned element they are no longer a corner: they are a shove,
   16px down and 16px toward the left, out of the slot the flex header gave it.
   Measured across an open app: 38 of 39 close buttons compute
   `relative | top:16px right:16px`, none compute `absolute` — so no modal is
   relying on the corner placement, and every one of them is nudged onto its
   neighbour. In the live-shifts header that neighbour is «Сьогодні», which is
   the crooked × in the report.
   Higher specificity rather than !important: the offsets are set by a plain
   rule, so `html body` is enough to outrank it. */
html body .modal-close-btn { top: auto; right: auto; bottom: auto; left: auto; }

/* The header lays itself out here rather than inheriting .modal-header's
   space-between. Measured on an 820px modal: the day picker was a shrinkable
   flex item (`flex: 0 1 auto`) narrower than its own contents — a global 44px
   tap-target minimum inflates its four controls — so «Сьогодні» spilled 8px past
   its box and sat underneath the ×. An explicit gap plus a day picker that never
   shrinks below its content keeps the two apart; wrap is the escape hatch when
   the modal really is too narrow. */
.live-shifts-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--stroke, rgba(255, 255, 255, 0.08));
}
.live-shifts-head-main { display: flex; align-items: center; gap: 10px; flex: 1 1 160px; min-width: 0; }
.live-shifts-head-main h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #liveShiftsModal .modal-close-btn { flex: 0 0 auto; margin-left: 0; }

/* Day picker, between the title and the ×. On a phone it drops onto its own
   row rather than squeezing the title out. */
.live-shifts-day { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: 0 0 auto; }
.live-shifts-day-nav,
.live-shifts-day-today {
  border: 1px solid var(--stroke, rgba(255, 255, 255, 0.12));
  background: transparent;
  color: var(--muted, rgba(255, 255, 255, 0.6));
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.live-shifts-day-nav { width: 26px; height: 26px; font-size: 15px; }
.live-shifts-day-today { height: 26px; padding: 0 9px; }
.live-shifts-day-nav:hover,
.live-shifts-day-today:hover { color: var(--ink, #f5f5f5); border-color: rgba(255, 255, 255, 0.25); }
.live-shifts-day-input {
  height: 26px;
  padding: 0 6px;
  border-radius: 7px;
  border: 1px solid var(--stroke, rgba(255, 255, 255, 0.12));
  background: transparent;
  color: var(--ink, #f5f5f5);
  font-size: 12px;
  color-scheme: dark;
}
body.theme-light .live-shifts-day-input { color-scheme: light; color: #0f172a; border-color: rgba(0, 0, 0, 0.14); }
body.theme-light .live-shifts-day-nav,
body.theme-light .live-shifts-day-today { border-color: rgba(0, 0, 0, 0.14); color: rgba(0, 0, 0, 0.6); }
/* A past day has no live anything — kill the pulsing dot and the green count. */
#liveShiftsModal.is-historical .live-shifts-head-dot,
#liveShiftsModal.is-historical .live-shifts-dot { animation: none; background: var(--muted-2, rgba(255, 255, 255, 0.3)); }
#liveShiftsModal.is-historical .live-shifts-head-count { color: var(--muted, rgba(255, 255, 255, 0.6)); }
@media (max-width: 620px) {
  .live-shifts-day { margin-left: 0; order: 3; width: 100%; flex: 1 1 100%; margin-top: 0; }
  .live-shifts-day-input { flex: 1 1 auto; min-width: 0; }
}
.live-shifts-head-main h3 { margin: 0; font-size: 16px; font-weight: 700; }
.live-shifts-head-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--muted-2, rgba(255, 255, 255, 0.25)); }
.live-shifts-head-count {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted-2, rgba(255, 255, 255, 0.45));
}

.live-shifts-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--stroke, rgba(255, 255, 255, 0.08));
}
html body #liveShiftsModal select.live-shifts-select {
  flex: 1 1 140px;
  min-width: 0;
  min-height: 0 !important;
  height: 34px !important;
  padding: 0 30px 0 10px !important;
  font-size: 13px !important;
  border-radius: 9px !important;
}
html body #liveShiftsRefresh.live-shifts-refresh {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 0 !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 9px !important;
  border: 1px solid var(--stroke-2, rgba(255, 255, 255, 0.15)) !important;
  background: transparent !important;
  color: var(--ink, #f8f8fc) !important;
  cursor: pointer;
}
html body #liveShiftsRefresh.live-shifts-refresh:hover {
  border-color: var(--accent, #3b7dff) !important;
  color: var(--accent, #3b7dff) !important;
}
html body #liveShiftsRefresh.is-spinning {
  border-color: var(--accent, #3b7dff) !important;
  color: var(--accent, #3b7dff) !important;
}
.live-shifts-refresh-icon { width: 15px; height: 15px; display: block; }
.live-shifts-refresh-icon svg { width: 100%; height: 100%; display: block; }
/* Only the icon turns. Rotating the button would rotate its border and label. */
#liveShiftsRefresh.is-spinning .live-shifts-refresh-icon {
  animation: live-shifts-spin 0.75s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
@keyframes live-shifts-spin { to { transform: rotate(360deg); } }

.live-shifts-body {
  padding: 0;
  overflow-y: auto;
  /* A narrow window must scroll the table inside its own box, not push it out
     past the modal edge. */
  overflow-x: auto;
  max-height: min(58vh, 460px);
}
.live-shifts-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 11px 18px 14px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted-2, rgba(255, 255, 255, 0.45));
  border-top: 1px solid var(--stroke, rgba(255, 255, 255, 0.08));
}
.live-shifts-hint-text { flex: 1 1 240px; min-width: 0; }

/* ── the table ──────────────────────────────────────────────────────────── */

/* table-layout: fixed, not auto. The modal clips at its edge (`overflow:
   hidden`), and under auto layout a single long unbreakable string in the first
   cell — a 64-hex device id, a shop name nobody shortened — widens the table
   past that edge and takes the three right-hand columns with it. The activity
   strip is the first casualty, so the panel showed a wall of characters and no
   cubes. Fixed layout makes the colgroup, not the content, decide the widths. */
.live-shifts-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.live-shifts-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 18px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-2, rgba(255, 255, 255, 0.45));
  background: var(--bg-1, #050508);
  border-bottom: 1px solid var(--stroke, rgba(255, 255, 255, 0.08));
  white-space: nowrap;
}
.live-shifts-table td {
  padding: 11px 18px;
  border-bottom: 1px solid var(--stroke, rgba(255, 255, 255, 0.06));
  vertical-align: middle;
}
.live-shifts-table tbody tr:last-child td { border-bottom: 0; }
.live-shifts-table tbody tr { transition: background 0.12s ease; }
.live-shifts-table tbody tr:hover { background: var(--glass-highlight, rgba(255, 255, 255, 0.04)); }

.live-shifts-table col.live-shifts-col-num { width: 92px; }
/* Flex belongs on a div inside the cell. display:flex on a <td> takes it out of
   the table formatting context and the browser re-wraps the row in anonymous
   cells, so the columns stop lining up. */
.live-shifts-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.live-shifts-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--muted-2, rgba(255, 255, 255, 0.25)); }
.live-shifts-who-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.live-shifts-name {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* No name on the account — the login is all a manager has to go on, so show it
   as an identifier rather than dressing it up as a person's name. */
.live-shifts-name.is-login { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.live-shifts-meta { font-size: 11px; color: var(--muted-2, rgba(255, 255, 255, 0.45)); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Green cube = recording, grey cube = paused — said once, in the footnote,
   instead of leaving the manager to infer it from the colours. */
.live-shifts-legend {
  display: inline-flex; align-items: center; gap: 5px;
  flex: 0 0 auto; white-space: nowrap;
  font-size: 11px; letter-spacing: 0; text-transform: none;
}
.live-shifts-legend i {
  width: 9px; height: 12px; border-radius: 2px; display: inline-block;
  background: var(--glass-highlight, rgba(255, 255, 255, 0.08));
}
.live-shifts-legend.is-rec i { background: #22c55e; }
body.theme-light .live-shifts-legend i { background: rgba(0, 0, 0, 0.09); }
body.theme-light .live-shifts-legend.is-rec i { background: #15803d; }

.live-shifts-place { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.live-shifts-shop { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-shifts-city { font-size: 11px; color: var(--muted-2, rgba(255, 255, 255, 0.45)); }

.live-shifts-name.is-noname { color: var(--muted, rgba(255, 255, 255, 0.6)); font-style: italic; font-weight: 500; }

/* The shift strip. Each block is an equal slice of the time since the shift
   started; filled means audio arrived in that slice. Blocks, not a smooth bar —
   a manager should be able to point at the gap where the mic went quiet. */
.live-shifts-table col.live-shifts-col-strip { width: 165px; }
.live-shifts-strip-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.live-shifts-strip { display: flex; gap: 2px; align-items: stretch; height: 16px; }
.live-shifts-block {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 2px;
  background: var(--glass-highlight, rgba(255, 255, 255, 0.08));
}
.live-shifts-block.is-rec { background: #22c55e; }
.live-shifts-strip-legend { display: flex; gap: 10px; font-size: 10.5px; white-space: nowrap; }
.live-shifts-strip-rec { color: #22c55e; }
.live-shifts-strip-pause { color: var(--muted-2, rgba(255, 255, 255, 0.45)); }
.live-shifts-strip-none { font-size: 11px; color: var(--muted-2, rgba(255, 255, 255, 0.45)); }
.live-shifts-time { display: flex; flex-direction: column; gap: 1px; align-items: flex-end; }
.live-shifts-time-main { font-size: 13px; font-variant-numeric: tabular-nums; }
.live-shifts-time-sub { font-size: 10.5px; color: var(--muted-2, rgba(255, 255, 255, 0.45)); font-variant-numeric: tabular-nums; }
body.theme-light .live-shifts-block { background: rgba(0, 0, 0, 0.09); }
body.theme-light .live-shifts-block.is-rec { background: #15803d; }
body.theme-light .live-shifts-strip-rec { color: #15803d; }

.live-shifts-num { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.live-shifts-chunks { color: var(--muted, rgba(255, 255, 255, 0.6)); }

.live-shifts-chip {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted, rgba(255, 255, 255, 0.6));
  border: 1px solid var(--stroke-2, rgba(255, 255, 255, 0.15));
}
.live-shifts-chip.is-warn {
  color: var(--warning, #fbbf24);
  border-color: rgba(251, 191, 36, 0.45);
}

.live-shifts-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 24px;
  text-align: center;
  color: var(--muted-2, rgba(255, 255, 255, 0.45));
}
.live-shifts-empty .mh-i { opacity: 0.5; margin-bottom: 2px; }
.live-shifts-empty-title { font-size: 14px; font-weight: 600; color: var(--muted, rgba(255, 255, 255, 0.6)); }
.live-shifts-empty-sub { font-size: 12px; max-width: 320px; line-height: 1.5; }
.live-shifts-empty.is-error .mh-i,
.live-shifts-empty.is-error .live-shifts-empty-title { color: var(--danger, #ef4444); opacity: 1; }

/* Light theme: the surfaces flip on their own via the tokens, the tinted row
   hover does not — rgba(255,255,255,…) is invisible on a light background. */
body.theme-light .live-shifts-table tbody tr:hover { background: rgba(0, 0, 0, 0.035); }
body.theme-light .live-shifts-table th { background: var(--bg-1, #f3f4f6); }

/* Below ~620px a five-column table stops being readable. Each person becomes a
   block: name and shop on the left, time and record count on the right, and the
   activity strip spans the full width underneath — it is the widest cell and the
   one that suffers most from being squeezed into a column. */
/* v10.5.2: four columns, not five — «Записів» is gone. Each person becomes a
   block: name and shop on the left, time on the right, and the activity strip
   spans the full width underneath. */
@media (max-width: 620px) {
  .live-shifts-table thead { display: none; }
  .live-shifts-table, .live-shifts-table tbody { display: block; }
  .live-shifts-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--stroke, rgba(255, 255, 255, 0.06));
  }
  .live-shifts-table tbody tr:last-child { border-bottom: 0; }
  .live-shifts-table td.live-shifts-cell { display: block; padding: 0; border: 0; }
  .live-shifts-table td.live-shifts-cell:nth-child(1) { grid-column: 1; grid-row: 1; }
  .live-shifts-table td.live-shifts-cell:nth-child(2) { grid-column: 1; grid-row: 2; padding-left: 18px; }
  .live-shifts-table td.live-shifts-cell:nth-child(3) { grid-column: 1 / -1; grid-row: 3; padding: 6px 0 0 18px; }
  .live-shifts-table td.live-shifts-cell:nth-child(4) { grid-column: 2; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .live-shifts-trigger-dot.is-live,
  .live-shifts-head-dot.is-live,
  .live-shifts-dot.is-live,
  #liveShiftsRefresh.is-spinning .live-shifts-refresh-icon { animation: none; }
}

/* Light theme: status colours picked for a dark panel are far too pale on white.
   Measured on #f9fafb — #22c55e is 2.2:1, #fbbf24 is 1.6:1, both unreadable.
   The darker shades below land at 4.8:1 and 4.8:1. The dots keep the bright
   green: they are graphics next to their own label, not text. */
body.theme-light .live-shifts-trigger-count.is-live,
body.theme-light .live-shifts-head-count.is-live { color: #15803d; }
body.theme-light .live-shifts-chip.is-warn { color: #b45309; border-color: rgba(180, 83, 9, 0.4); }
body.theme-light .live-shifts-empty.is-error .mh-i,
body.theme-light .live-shifts-empty.is-error .live-shifts-empty-title { color: #b91c1c; }

/* --muted-2 is rgba(26,26,46,0.55) in light theme: measured 3.77:1 on the panel,
   under the 4.5:1 that 10–12px text needs. The stronger muted lands at 6.5:1. */
body.theme-light .live-shifts-meta,
body.theme-light .live-shifts-city,
body.theme-light .live-shifts-table th,
body.theme-light .live-shifts-hint,
body.theme-light .live-shifts-empty,
body.theme-light .live-shifts-trigger-sub,
body.theme-light .live-shifts-empty-sub { color: var(--muted, rgba(26, 26, 46, 0.72)); }

/* Primary text is stated, never inherited. `body { color }` does not survive a
   theme toggle in this app — flip light→dark at runtime and the body keeps the
   light-theme ink, which put near-black names on the near-black panel. --ink
   itself does track the theme, so read it directly. */
.live-shifts-trigger-title,
.live-shifts-head-main h3,
.live-shifts-name,
.live-shifts-shop,
.live-shifts-num,
.live-shifts-modal { color: var(--ink, #f5f5f5); }

/* Two rules used to sit here undoing the mobile touch-target rule by ID, back
   when it sized an icon-only svg instead of the button around it. That rule now
   sizes the control, so the whole app is fixed at the source and the per-id
   undos are gone — see the MOBILE TOUCH TARGETS block. */

/* On a phone the app turns every .modal into a full-height sheet. Keep the
   content packed at the top — stretching the list to fill 844px pushed the
   footnote down behind the bottom navigation — and let the sheet itself scroll
   when the list is long. The extra bottom padding clears that nav bar. */
@media (max-width: 768px) {
  /* `html body` + !important because a 480px block zeroes it: `.modal, …
     { padding: 0 !important }`. Without that weight the reserve measured 0px and
     the footnote — the only place that says what a green cube means — sat under
     the bottom navigation at the end of the list. */
  html body #liveShiftsModal .modal.live-shifts-modal {
    justify-content: flex-start;
    overflow-y: auto;
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* `.modal-body { overflow-y: auto !important }` in the mobile block above beat
     the plain rule that used to live here, so this box stayed a scroll container
     with nothing to scroll — measured 1021 = 1021 — and its inherited
     `overscroll-behavior: contain` then refused to hand the gesture up to the
     sheet, which is where the 665px of overflow actually is. A 500px touch pan
     and a mouse wheel both left scrollTop at 0 while a JS `scrollTop = 400`
     stuck: the box was scrollable, the finger just never reached it. The sheet
     scrolls; this box must not pretend to. */
  html body #liveShiftsModal .modal-body.live-shifts-body {
    max-height: none !important;
    flex: 0 0 auto;
    overflow: visible !important;
  }
  /* The mobile block that pins .modal-header also paints it `var(--panel)`, and
     --panel resolves to the translucent --surface. That was invisible while
     nothing scrolled; now that the sheet does, rows slid under the title and
     read straight through it. --bg-1 is the sheet's own background and tracks
     the theme, same token the sticky table header already uses. */
  html body #liveShiftsModal .modal-header.live-shifts-head {
    background: var(--bg-1, #050508) !important;
  }
}

/* =============================================================================
   Profile → inline editing of contact and work details
   -----------------------------------------------------------------------------
   "Редагувати" used to close the profile and reopen the accounts form beneath
   it, so a manager moving one person to another shop lost the screen they were
   reading. The fields are editable in place now. Inputs sit in the same grid
   cells as the values they replace, so nothing jumps when the mode flips.
   ========================================================================== */

.pm-section__title .pm-section__actions {
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
  flex: 0 0 auto;
}

html body .pm-section__actions .pm-btn.pm-btn--sm {
  height: 28px !important;
  min-height: 0 !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  gap: 5px;
}
html body .pm-section__actions .pm-btn.pm-btn--sm svg {
  width: 13px;
  height: 13px;
  min-width: 0;
  min-height: 0;
}

html body .pm-info-item input.pm-edit-input,
html body .pm-info-item select.pm-edit-input {
  width: 100%;
  height: 34px !important;
  min-height: 0 !important;
  padding: 0 10px !important;
  font-size: 14px !important;
  font-family: inherit;
  color: var(--pm-text-primary, var(--ink, #f5f5f5)) !important;
  background: var(--surface-2, rgba(255, 255, 255, 0.04)) !important;
  border: 1px solid var(--stroke-2, rgba(255, 255, 255, 0.15)) !important;
  border-radius: 8px !important;
  box-sizing: border-box;
}
html body .pm-info-item input.pm-edit-input:focus,
html body .pm-info-item select.pm-edit-input:focus {
  outline: none;
  border-color: var(--accent, #3b7dff) !important;
}
/* A select styled exactly like a text input reads as a text input: nobody
   clicks it. Region/city/shop are pick-only now, so they need the caret. */
html body .pm-info-item select.pm-edit-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px !important;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 9px center !important;
  background-size: 16px 16px !important;
}
/* Was `body.theme-light html body …` — a selector that can never match, because
   html cannot be a descendant of body. Measured: the caret stayed white in light
   theme. */
html body.theme-light .pm-info-item select.pm-edit-input {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-opacity='0.55' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
  /* Repeat/position/size repeated on purpose: a `background` shorthand anywhere
     above resets them, and then this chevron tiles across the field. */
  background-repeat: no-repeat !important;
  background-position: right 9px center !important;
  background-size: 16px 16px !important;
}

/* The label doubles as the input's <label>; keep it looking identical. */
.pm-info-item label.pm-info__label { cursor: pointer; }

.pm-edit-hint {
  margin-top: 10px;
  font-size: 11px;
  color: var(--pm-text-muted, var(--muted-2, rgba(255, 255, 255, 0.45)));
}

/* The standing login code. It gets read out over the phone and copied onto a
   card by the till, so it is set large, monospaced, and selectable — the two
   confusable pairs (O/0, I/1) are already excluded from the alphabet. */
.pm-access-code { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pm-access-code__value {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--glass-highlight, rgba(255, 255, 255, 0.07));
  border: 1px solid var(--pm-border, rgba(255, 255, 255, 0.12));
  color: var(--pm-text-primary, #f1f5f9);
  user-select: all;
}
.pm-access-code__meta,
.pm-access-code__empty,
.pm-access-code__loading {
  font-size: 12px;
  color: var(--pm-text-muted, var(--muted-2, rgba(255, 255, 255, 0.45)));
}
body.theme-light .pm-access-code__value {
  background: rgba(0, 0, 0, 0.045);
  border-color: rgba(0, 0, 0, 0.14);
  color: #0f172a;
}

/* Eight tabs, four columns: two even rows. This was briefly five columns, back
   when «Транскрипції» and «Безпека» made it ten and the grid fell 4+4+2. */
@media (min-width: 769px) {
  html body .pm-tabs .pm-tab {
    padding: 6px 6px !important;
    gap: 5px;
    font-size: 11px;
  }
}

/* =============================================================================
   Profile → the ⋯ menu that replaced the footer bar
   -----------------------------------------------------------------------------
   Three buttons stood in a full-width bar under every tab, including the ones
   they had nothing to do with. "Редагувати" is redundant now that the fields
   edit in place; "Скинути пароль" and "Видалити" are once-in-a-while actions
   and live behind the ⋯ beside the close button. The footer only renders now
   for a deleted account's "Відновити".
   ========================================================================== */

.pm-menu {
  position: absolute;
  top: 12px;
  right: 56px;              /* clear of .pm-close (36px wide at right:12px) */
  z-index: 100;
}

html body .pm-menu .pm-menu__trigger {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(0, 0, 0, 0.3) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.9;
  transition: background 0.2s ease, opacity 0.2s ease;
}
html body .pm-menu .pm-menu__trigger:hover { background: rgba(255, 255, 255, 0.16) !important; opacity: 1; }
html body .pm-menu .pm-menu__trigger svg { width: 18px; height: 18px; min-width: 0; min-height: 0; }

/* The global `button:not(…)x7 { min-height: 40px !important }` reset out-specifies
   the block above — (0,7,1) beats (0,3,2) — so min-height clamped the trigger to
   36x40 and border-radius:50% drew an ellipse, not a circle. Id scope takes it back. */
html body #pmMenu .pm-menu__trigger {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  flex: 0 0 auto;
}

.pm-menu__list {
  display: none;
  position: absolute;
  top: 42px;
  right: 0;
  min-width: 190px;
  padding: 6px;
  border-radius: 12px;
  /* Opaque on purpose. --pm-bg-card is translucent, so the header chips were
     legible straight through the menu items. */
  background: #16161c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
.pm-menu.is-open .pm-menu__list { display: block; }

html body .pm-menu__list .pm-menu__item {
  display: flex !important;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 0 !important;
  height: 36px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--pm-text-primary, var(--ink, #f5f5f5)) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: left;
  cursor: pointer;
}
html body .pm-menu__list .pm-menu__item:hover { background: var(--glass-highlight, rgba(255, 255, 255, 0.06)) !important; }
html body .pm-menu__list .pm-menu__item svg { width: 15px; height: 15px; min-width: 0; min-height: 0; flex: 0 0 auto; }
html body .pm-menu__list .pm-menu__item--danger { color: var(--danger, #ef4444) !important; }
body.theme-light html body .pm-menu__list .pm-menu__item--danger { color: #b91c1c !important; }

body.theme-light .pm-menu__list { background: #ffffff; border-color: rgba(0,0,0,0.12); box-shadow: 0 18px 44px rgba(0,0,0,0.18); }

/* ===== v10.2.1 — one baseline size for unsized inline SVG ==================
   An inline <svg> with no width/height attribute has no intrinsic size: the
   browser falls back to 300×150 and then the container scales it. That is why
   one icon set renders as a giant arrow inside «Увійти», a giant rocket inside
   «Почати огляд», and a 14px speck inside the Скрипти/Графік/Нагороди cards —
   nothing was wrong with the icons, only with what was around them.

   Anything that declares its own width (attribute or an explicit rule) keeps
   it; this only catches the ones that never said. */
button > svg:not([width]),
a > svg:not([width]),
label > svg:not([width]),
.btn-primary > svg:not([width]),
.btn-secondary > svg:not([width]),
.quick-action-btn > svg:not([width]) {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
}
/* The .mh-i wrapper is the sized box; its child fills it instead of guessing. */
.mh-i > svg:not([width]) { width: 100%; height: 100%; display: block; }

/* Seller theme buttons used to inherit several competing generic SVG rules.
   On the settings screen that cascade expanded the sun/moon to roughly 50px,
   making the icon louder than the label. Pin both the wrapper and the drawing
   to one compact inline size; the button remains a full touch target. */
html body #sellerSettingsContent .seller-setting-control .btn-secondary .mh-i {
  --mh-i-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex: 0 0 18px !important;
}
html body #sellerSettingsContent .seller-setting-control .btn-secondary .mh-i svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 18px !important;
  max-height: 18px !important;
}

/* v11.1.0: keep the recording workspace neutral on the compact seller view.
   The generic active-tab gradient was painting the whole home surface blue. */
body.role-seller.seller-mobile-mode #seller-tab-home,
body.seller-mobile-mode #seller-tab-home {
  /* v11.1.1: was #101016 with a white hairline — a dark-theme literal that the
     light theme never overrode, so the workspace stayed a black slab on white.
     --surface resolves to the same colour in the dark theme. */
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--stroke) !important;
  border-color: var(--stroke) !important;
}

/* ===== v11.9.4: PHONE TOP BAR — the account chip stops floating =====
   .top-bar-left is flex:1 1 0, so on a 375px screen the brand block grew to
   137px while its wordmark ("MH") ended at 84. The 74px of dead space left the
   account avatar stranded mid-bar: too far from the logo to belong to it, 8px
   from the buttons it does belong to, and reading as neither. The brand takes
   the width it actually uses, so the avatar comes to rest beside the wordmark
   instead — identity next to the brand, actions on the right, nothing floating.
   Written at html-body weight because the bar already carries a stack of
   !important rules for this element, the last of which forces flex:1 1 0px on
   phones; a plainer selector loses to it however many bangs it has — and ten
   more stylesheets are injected after this file, so being last is not enough
   either. .top-bar is repeated to outweigh them on specificity instead. */
@media (max-width: 768px) {
  html body header.top-bar.top-bar .top-bar-left { flex: 0 0 auto !important; }
  html body header.top-bar.top-bar .top-bar-left .brand { flex: 0 0 auto !important; width: auto !important; }
}

/* ===== BOOT VEIL =====
   Covers the first paint while the session restores. Without it a logged-in
   reload flashed the login card (big logo), then flipped to a half-assembled
   app — three harsh layout jumps in under a second. One veil, one fade. */
#bootVeil {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0c0c12;
  opacity: 1;
  transition: opacity 0.45s ease;
  /* No-JS failsafe: lift regardless after 8s, so a dead script can never
     leave a user staring at a logo forever. */
  animation: bootVeilFailsafe 0.5s ease 8s forwards;
}
#bootVeil img {
  width: 76px;
  height: 76px;
  animation: bootVeilPulse 1.6s ease-in-out infinite;
}
#bootVeil.boot-veil--done {
  opacity: 0;
  pointer-events: none;
}
@keyframes bootVeilPulse {
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.07); opacity: 1; }
}
@keyframes bootVeilFailsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  #bootVeil img { animation: none; }
}

/* The app shell appears once, from under the veil — give it a quiet rise
   instead of snapping in fully assembled. */
body.app-ready #appSection:not(.hidden) {
  animation: appSectionIn 0.4s ease both;
}
@keyframes appSectionIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ===== v11.6.2: mobile brand — the big landing-size logo instead of «МН» =====
   Up to 768px the full name is hidden and the MH monogram showed; the seller
   asked for the logo itself at the landing's size instead of letters. The
   selectors carry .brand > span/.brand>img depth because an older
   `.brand .brand-name-short { display:inline !important }` rule out-specifies
   the plain form and kept the monogram alive. */
@media (max-width: 768px) {
  html body header.top-bar .brand > span.brand-name-short,
  html body header.top-bar .brand span.brand-name-short {
    display: none !important;
  }
  html body header.top-bar .brand > img.brand-logo,
  html body header.top-bar .brand.brand > img.brand-logo:not([hidden]) {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 9px !important;
  }
}

/* ===== v11.6.2: live-shifts close — the only control in the slot where the
   day picker used to sit. On a phone the picker crowded the header and the ×
   ended up off-screen: the modal read as a room you cannot leave. The close
   now lands alone, spins on hover, pops in with the modal. */
html body .modal.live-shifts-modal .live-shifts-head {
  gap: 10px;
}
html body #liveShiftsClose.live-shifts-close {
  width: 40px;
  height: 40px;
  margin-left: auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  flex: 0 0 auto;
  animation: liveShiftsCloseIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s, border-color 0.2s;
}
html body #liveShiftsClose.live-shifts-close:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.28);
  transform: rotate(90deg);
}
html body #liveShiftsClose.live-shifts-close:active {
  transform: rotate(90deg) scale(0.88);
}
html body #liveShiftsClose.live-shifts-close:focus-visible {
  outline: 2px solid var(--accent, #3b7dff);
  outline-offset: 2px;
}
@keyframes liveShiftsCloseIn {
  from { opacity: 0; transform: rotate(-90deg) scale(0.6); }
  to { opacity: 1; transform: rotate(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  html body #liveShiftsClose.live-shifts-close { animation: none; transition: none; }
}

/* v11.6.2: the live-shifts modal must cover the fixed top bar. On a phone the
   modal fills the screen and its header row lands right under the bar, which
   swallowed taps on the close button — "натискаєш і не можеш вийти". Both live
   inside app-wrapper's stacking context, so 30000 > top-bar's 1000 wins. */
html body #liveShiftsModal {
  z-index: 30000 !important;
}

/* v11.6.2: the live-shifts modal is taller than a phone viewport; flex
   centering pushed its top (the row with ×) under the fixed top bar, so the
   close button sat at y=2 — inside the bar's hit area. Pin the modal below the
   bar on small screens instead of letting centering slice it. */
@media (max-width: 768px) {
  html body #liveShiftsModal .modal.live-shifts-modal,
  html body #liveShiftsModal .modal.modal.live-shifts-modal.live-shifts-modal {
    margin-top: 76px !important;
    margin-bottom: 12px !important;
    max-height: calc(100% - 88px) !important;
  }
}

/* ===== v11.6.3: вкладки продавця — одна картка, один заголовок =====
   «Запис» малював свій заголовок усередині картки, по центру, а «Скрипти»,
   «Бали» і «Опції» лишали свій на сторінці над вужчою карткою: при перемиканні
   лівий край картки їхав 132px → 142px, а верх 180px → 245px.
   Картка «Запису» — це сама вкладка (#seller-tab-home, style.css:72987,
   var(--surface)/var(--stroke) — токени, які самі перемикаються між темами).
   Тут те саме віддано трьом іншим вкладкам, а заголовок заводиться всередину
   картки: 16px від верху, 10px до вмісту — рівно як .card-title у #micPanel. */
@media (min-width: 769px) {
  body.role-seller #seller-tab-scripts,
  body.role-seller #seller-tab-points,
  body.role-seller #seller-tab-settings {
    background: var(--surface) !important;
    background-image: none !important;
    border: 1px solid var(--stroke) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 0 4px !important;
  }

  /* картка переїхала на саму вкладку — тіло тепер просто вміст */
  body.role-seller #seller-tab-scripts > .seller-tab-body,
  body.role-seller #seller-tab-points > .seller-tab-body,
  body.role-seller #seller-tab-settings > .seller-tab-body {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.role-seller #seller-tab-scripts > .seller-tab-header,
  body.role-seller #seller-tab-points > .seller-tab-header,
  body.role-seller #seller-tab-settings > .seller-tab-header {
    background: transparent !important;
    padding: 16px 0 0 !important;
    margin: 0 0 10px !important;
    text-align: center !important;
  }

  body.role-seller #seller-tab-scripts > .seller-tab-header h2,
  body.role-seller #seller-tab-points > .seller-tab-header h2,
  body.role-seller #seller-tab-settings > .seller-tab-header h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-align: center !important;
  }
}

/* v11.6.3: на телефоні картки на вкладці немає — карткою є тіло (x=31, w=328),
   а заголовок стояв над нею зліва, рівно там, де на «Записі» починається картка
   мікрофона (x=27, w=336). Зшиваємо заголовок і тіло в одну картку на тих самих
   токенах, що й «Запис», і рівняємо її по картці «Запису». */
@media (max-width: 768px) {
  body.role-seller #seller-tab-scripts > .seller-tab-header,
  body.role-seller #seller-tab-points > .seller-tab-header,
  body.role-seller #seller-tab-settings > .seller-tab-header {
    background: var(--surface) !important;
    background-image: none !important;
    border: 1px solid var(--stroke) !important;
    border-bottom: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 12px 12px 16px !important;
    margin: 0 !important;
    text-align: center !important;
  }

  body.role-seller #seller-tab-scripts > .seller-tab-header h2,
  body.role-seller #seller-tab-points > .seller-tab-header h2,
  body.role-seller #seller-tab-settings > .seller-tab-header h2 {
    font-size: 15px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  body.role-seller #seller-tab-scripts > .seller-tab-body,
  body.role-seller #seller-tab-points > .seller-tab-body,
  body.role-seller #seller-tab-settings > .seller-tab-body {
    background: var(--surface) !important;
    background-image: none !important;
    border: 1px solid var(--stroke) !important;
    border-top: 0 !important;
    border-radius: 0 0 12px 12px !important;
    padding: 0 12px 12px !important;
    margin: 0 !important;
  }
}

/* v11.6.3: до 520px «Запис» пише свій заголовок капсом і приглушеним кольором
   (style.css:60970). Три інші вкладки мають виглядати так само, інакше поруч
   стоять «ЗАПИС» сірим і «Мої бали» чорним. */
@media (max-width: 520px) {
  body.role-seller #seller-tab-scripts > .seller-tab-header h2,
  body.role-seller #seller-tab-points > .seller-tab-header h2,
  body.role-seller #seller-tab-settings > .seller-tab-header h2 {
    color: var(--muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }
}