/* shadcn/ui CSS Variables for OctaSpace Design */
:root {
  /* Tailwind ring color override - OctaSpace documentation compliant */
  --tw-ring-color: #d4d4d4;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: transparent; }

/* Dark theme (default) - OctaSpace documentation compliant */
:root,
.dark {
  /* Base colors - OctaSpace documentation compliant */
  --background: #0a0a0a;
  --foreground: #fafafa;
  --border: rgba(255, 255, 255, 0.1);
  --input: #262626;
  --ring: #d4d4d4;
  /* Navbar colors - OctaSpace unified design */
  --navbar-bg: #070607;
  /* Navbar, Sidebar, Header background */
  --content-bg: #0b090b;
  /* Main content background (solid, no gradients) */
  --input-bg: #171717;
  /* Input fields background */
  /* Text colors - OctaSpace documentation compliant */
  --muted-foreground: #a3a3a3;
  --text-primary: #fafafa;
  --text-secondary: #a3a3a3;
  --secondary: #262626;
  --secondary-foreground: #fafafa;
  --accent: #262626;
  --accent-foreground: #fafafa;
  /* Primary colors - OctaSpace violet-eggplant */
  --primary: #B11995;
  --primary-violet: #B11995;
  --primary-foreground: #fafafa;
  /* Shadow colors for hover effects */
  --primary-shadow: rgba(177, 25, 149, 0.3);
  --secondary-hover: #171717;
  /* Darker secondary for hover */
  --shadow-base: rgba(0, 0, 0, 0.2); }

/* Light theme (if needed) - OctaSpace documentation compliant */
.light {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #d4d4d4;
  /* Navbar colors for light theme */
  --navbar-bg: #ffffff;
  --content-bg: #f8f9fa;
  /* Text colors for light theme */
  --muted-foreground: #737373;
  --text-primary: #0a0a0a;
  --text-secondary: #737373;
  --secondary: #f5f5f5;
  --secondary-foreground: #171717;
  --primary: #B11995;
  --primary-violet: #B11995;
  --primary-foreground: #fafafa;
  --primary-shadow: rgba(177, 25, 149, 0.2);
  --secondary-hover: #e5e5e5;
  --shadow-base: rgba(0, 0, 0, 0.1);
  --tw-ring-color: #d4d4d4; }

/* Global styles */
input, textarea, select, button {
  outline: none; }

/* OctaSpace focus ring utilities (documentation compliant) */
@layer utilities {
  .focus-visible\:ring-ring:focus-visible {
    --tw-ring-color: #d4d4d4; }
  /* Ring with transparency - using color-mix for better browser support */
  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-ring\/50:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent) !important; }
    .focus-visible\:ring-ring\/20:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--ring) 20%, transparent) !important; } }
  .focus-visible\:ring-\[3px\]:focus-visible {
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
  .focus-visible\:ring-\[2px\]:focus-visible {
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
  .focus-visible\:border-ring:focus-visible {
    border-color: #d4d4d4; }
  /* Override focus ring for checkboxes - shadcn/ui standard */
  input[type="checkbox"] {
    box-shadow: none !important; }
  input[type="checkbox"]:focus-visible {
    --tw-ring-shadow: none !important;
    box-shadow: none !important; } }

/* Light theme utility classes */
.text-foreground-light {
  color: #0a0a0a; }

.text-foreground-dark {
  color: white !important; }

.text-muted-foreground-light {
  color: #737373; }

.text-primary-light {
  color: #B11995; }

.bg-border-light {
  background-color: #e5e5e5; }

.bg-background-light {
  background-color: #ffffff; }

.bg-neutral-900 {
  background-color: #171717; }

.border-border-light {
  border-color: rgba(229, 229, 229, 0.3); }

.border-input-light {
  border-color: #d1d5db; }

.border-secondary-light {
  border-color: #d1d5db; }

.bg-primary-light {
  background-color: #B11995; }

.border-primary-light {
  border-color: #B11995; }

.bg-secondary-light {
  background-color: #f5f5f5; }

.bg-secondary-hover-light {
  background-color: #e5e5e5; }

.text-secondary-foreground-light {
  color: #171717; }

/* Hover effects for light theme */
.hover\:bg-primary-light\/85:hover {
  background-color: rgba(177, 25, 149, 0.85); }

.hover\:text-primary-light\/80:hover {
  color: rgba(177, 25, 149, 0.8); }

.hover\:border-input-light\/80:hover {
  border-color: rgba(209, 213, 219, 0.8); }

/* Background pattern overlay classes */
.bg-pattern-light {
  background-image: radial-gradient(circle at 25% 25%, rgba(177, 25, 149, 0.05) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(6, 177, 85, 0.03) 0%, transparent 50%); }

.bg-pattern-dark {
  background-image: radial-gradient(circle at 25% 25%, rgba(177, 25, 149, 0.03) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(6, 177, 85, 0.02) 0%, transparent 50%); }

/* Color scheme utility classes */
.color-scheme-light {
  color-scheme: light; }

.color-scheme-dark {
  color-scheme: dark; }

/* Scrollbar utility classes */
.scrollbar-light {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05); }

.scrollbar-light::-webkit-scrollbar {
  background: rgba(0, 0, 0, 0.05);
  width: 8px;
  height: 8px; }

.scrollbar-light::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  width: 10px;
  height: 10px;
  border-radius: 4px; }

.scrollbar-light::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3); }

.scrollbar-dark {
  scrollbar-width: thin;
  scrollbar-color: #1d1d1d #1d1d1d49; }

.scrollbar-dark::-webkit-scrollbar {
  background: #1d1d1d49;
  width: 8px;
  height: 8px; }

.scrollbar-dark::-webkit-scrollbar-thumb {
  background: #1d1d1d;
  width: 10px;
  height: 10px;
  border-radius: 4px; }

.scrollbar-dark::-webkit-scrollbar-thumb:hover {
  background: #2d2d2d; }

/* Tailwind integration */
.border-border {
  border-color: var(--border); }

.bg-navbar-bg {
  background-color: var(--navbar-bg); }

.bg-navbar-bg-light {
  background-color: #ffffff;
  /* White for light theme navbar */ }

.bg-content-bg {
  background-color: var(--content-bg); }

.bg-input-bg {
  background-color: var(--input-bg); }

/* Universal button hover effect - OctaSpace standard */
.hover-button-effect {
  transition: all 0.2s ease; }

.hover-button-effect:hover {
  filter: brightness(1.2);
  transform: scale(1.04); }

/* Date picker / Calendar dark theme overrides */
.dark input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  background: #171717; }

.dark input[type="date"]::-webkit-datetime-edit {
  color: white; }

.dark input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  background: #171717; }

/* Dark theme datepicker overrides */
.dark .datepicker {
  background-color: #171717 !important;
  border-radius: 12px !important; }

.dark .datepicker-picker {
  background-color: #171717 !important;
  border-radius: 12px !important; }

.dark .datepicker-dropdown {
  background-color: #171717 !important;
  border-color: #404040 !important;
  border-radius: 12px !important; }

.dark .datepicker-cell {
  background-color: #171717 !important; }

.dark .datepicker-cell:hover {
  background-color: #262626 !important; }

/* Restore datepicker range selection highlighting */
.dark .datepicker-cell.selected {
  background-color: #B11995 !important;
  /* Primary color for selected dates */
  color: white !important; }

.dark .datepicker-cell.range-start,
.dark .datepicker-cell.range-end {
  background-color: #B11995 !important;
  /* Primary color for range start/end */
  color: white !important; }

/* Target range class for in-between dates */
.dark .datepicker-cell.range {
  background-color: rgba(177, 25, 149, 0.2) !important;
  /* Semi-transparent for range */
  color: white !important; }

.dark .datepicker-cell.in-range {
  background-color: rgba(177, 25, 149, 0.15) !important;
  /* More visible semi-transparent for range */
  color: white !important; }

.dark .datepicker-cell.focused {
  background-color: rgba(177, 25, 149, 0.3) !important;
  /* Focused date */
  color: white !important; }

/* Light theme range selection */
.datepicker-cell.selected {
  background-color: #B11995 !important;
  color: white !important; }

.datepicker-cell.range-start,
.datepicker-cell.range-end {
  background-color: #B11995 !important;
  color: white !important; }

/* Target range class for light theme */
.datepicker-cell.range {
  background-color: rgba(177, 25, 149, 0.15) !important;
  color: #333 !important; }

.datepicker-cell.in-range {
  background-color: rgba(177, 25, 149, 0.1) !important;
  color: #333 !important; }

/* Additional specificity for range dates */
.dark .datepicker .datepicker-days .datepicker-cell.range,
.dark .datepicker-days .datepicker-cell.range,
.dark .datepicker-picker .datepicker-cell.range,
.dark .datepicker .datepicker-days .datepicker-cell.in-range,
.dark .datepicker-days .datepicker-cell.in-range,
.dark .datepicker-picker .datepicker-cell.in-range {
  background-color: rgba(177, 25, 149, 0.2) !important;
  color: white !important; }

.datepicker .datepicker-days .datepicker-cell.range,
.datepicker-days .datepicker-cell.range,
.datepicker-picker .datepicker-cell.range,
.datepicker .datepicker-days .datepicker-cell.in-range,
.datepicker-days .datepicker-cell.in-range,
.datepicker-picker .datepicker-cell.in-range {
  background-color: rgba(177, 25, 149, 0.15) !important;
  color: #333 !important; }

/* Force override any conflicting styles */
.dark .datepicker-cell.range:not(.selected):not(.range-start):not(.range-end),
.dark .datepicker-cell.in-range:not(.selected):not(.range-start):not(.range-end) {
  background-color: rgba(177, 25, 149, 0.2) !important;
  color: white !important; }

.datepicker-cell.range:not(.selected):not(.range-start):not(.range-end),
.datepicker-cell.in-range:not(.selected):not(.range-start):not(.range-end) {
  background-color: rgba(177, 25, 149, 0.15) !important;
  color: #333 !important; }

.datepicker-cell.focused {
  background-color: rgba(177, 25, 149, 0.2) !important;
  color: #333 !important; }

/* Fix datepicker positioning - add extra margin */
.datepicker-dropdown.datepicker-orient-bottom {
  margin-top: 4px !important; }

/* Add consistent border to datepicker dropdown */
.datepicker-dropdown {
  border: 1px solid #d1d5db !important;
  /* Light theme */
  border-radius: 12px !important; }

.dark .datepicker-dropdown {
  border: 1px solid #4b5563 !important;
  /* Dark theme - same as filter containers */ }

/* Search autocomplete / suggestions styling */
input::-webkit-list-button {
  display: none; }

datalist {
  position: absolute;
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 50; }

.dark datalist {
  background-color: #171717;
  border-color: #374151; }

datalist option {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  background-color: white;
  color: #111827; }

.dark datalist option {
  background-color: #171717;
  color: white; }

datalist option:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important; }

.dark datalist option:hover {
  background-color: #262626 !important;
  color: white !important; }

/* Fix search input background on hover/focus with suggestions */
input[list]:hover,
input[list]:focus {
  background-color: inherit !important; }

.dark input[list]:hover,
.dark input[list]:focus {
  background-color: #171717 !important; }

/* Remove default browser styling for date inputs */
input[type="date"]:focus {
  box-shadow: none !important;
  outline: none !important;
  border-color: transparent !important; }

input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  background: transparent; }

input[type="date"]::-webkit-datetime-edit {
  background: transparent; }

/* Remove all focus effects from date inputs */
input[type="date"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important; }

/* Override focus styles for date inputs */
input.focus\:ring-2[type="date"]:focus,
input.focus\:ring-gray-600[type="date"]:focus,
input.focus\:border-gray-600[type="date"]:focus {
  box-shadow: none !important;
  outline: none !important;
  border-color: transparent !important; }

/* Remove focus effects from date range picker inputs */
input[id^="datepicker-range"]:focus,
input[id*="datepicker"]:focus {
  box-shadow: none !important;
  outline: none !important;
  border-color: transparent !important;
  --tw-ring-shadow: 0 0 transparent !important;
  --tw-ring-color: transparent !important; }

input[id^="datepicker-range"]:focus-visible,
input[id*="datepicker"]:focus-visible {
  box-shadow: none !important;
  outline: none !important;
  border-color: transparent !important;
  --tw-ring-shadow: 0 0 transparent !important;
  --tw-ring-color: transparent !important; }

/* Override Tailwind ring utilities for datepicker inputs */
input.focus\:ring-gray-600[id^="datepicker-range"]:focus,
input.focus\:ring-gray-600[id*="datepicker"]:focus {
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: 0 0 transparent !important;
  box-shadow: none !important; }

/* Add borders to datepicker inputs */
input[id^="datepicker-range"],
input[id*="datepicker"] {
  border: 1px solid #d1d5db !important;
  /* Light theme */ }

.dark input[id^="datepicker-range"],
.dark input[id*="datepicker"] {
  border: 1px solid #4b5563 !important;
  /* Dark theme */ }

/* Optional: lighter border on focus */
input[id^="datepicker-range"]:focus,
input[id*="datepicker"]:focus {
  border-color: #9ca3af !important;
  /* Light theme - slightly lighter */ }

.dark input[id^="datepicker-range"]:focus,
.dark input[id*="datepicker"]:focus {
  border-color: #6b7280 !important;
  /* Dark theme - slightly lighter */ }

/* Table CSS variables - shadcn/ui compliant */
:root,
.dark {
  /* Table specific variables */
  --table-border: hsl(0 0% 14.9%);
  /* Dark border for table cells */
  --table-header-bg: hsl(0 0% 14.9% / 0.5);
  /* Muted background for headers */
  --table-row-hover: hsl(0 0% 14.9% / 0.3);
  /* Subtle hover effect */
  --table-header-text: hsl(0 0% 63.9%);
  /* Muted foreground for headers */
  /* Background pattern variable */
  --bg-pattern-dark: radial-gradient(circle at 25% 25%, rgba(177, 25, 149, 0.03) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(6, 177, 85, 0.02) 0%, transparent 50%); }

.light {
  /* Table light theme variables */
  --table-border: hsl(0 0% 89.8%);
  --table-header-bg: hsl(0 0% 96.1% / 0.5);
  --table-row-hover: hsl(0 0% 96.1% / 0.3);
  --table-header-text: hsl(0 0% 45.1%); }
@charset "UTF-8";
/* shadcn/ui Component Classes */
/* Hide scrollbar while keeping scroll functionality (cross-browser) */
.hide-scrollbar {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important; }
  .hide-scrollbar::-webkit-scrollbar {
    display: none; }

/* Hover Effect Classes */
.hover-lift, .hover-lift-secondary, .hover-lift-primary {
  transition: all 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease; }
  .hover-lift:hover, .hover-lift-secondary:hover, .hover-lift-primary:hover {
    transform: translateY(-1px); }

.hover-lift-primary:hover {
  box-shadow: 0 4px 12px var(--primary-shadow); }

.hover-lift-secondary:hover {
  box-shadow: 0 2px 8px var(--shadow-base); }

/* Button Components - удалены, заменены на атомарные Tailwind классы */
/* Form Components - OctaSpace documentation compliant */
.input-base {
  display: flex;
  height: 2.5rem;
  /* 40px per OctaSpace documentation */
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid var(--input);
  background-color: var(--background);
  padding: 0.5rem 0.75rem;
  /* 8px 12px per documentation */
  font-size: 1rem;
  /* 16px on mobile, responsive to 14px on desktop */
  line-height: 1;
  transition: all 0.2s ease;
  color: var(--foreground);
  outline: none;
  /* Responsive font-size per OctaSpace documentation */ }
  .input-base::placeholder {
    color: var(--muted-foreground); }
  @media (min-width: 768px) {
    .input-base {
      font-size: 0.875rem;
      /* 14px on desktop */ } }
  .input-base:disabled {
    cursor: not-allowed;
    opacity: 0.5; }

.label-base {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  margin-bottom: 0.5rem; }

/* Layout Components */
.form-container {
  width: 100%;
  max-width: 26rem;
  /* оптимизированная ширина под компактные чекбоксы */
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  background-color: color-mix(in oklab, var(--background) 95%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); }

/* Mobile responsiveness for form container */
@media (max-width: 640px) {
  .form-container {
    margin: 0 0.75rem;
    /* mx-3 более компактные отступы */
    padding: 0.75rem;
    /* еще более компактные внутренние отступы */
    max-width: calc(100vw - 1.5rem);
    /* оптимизируем под новые отступы */ }
  /* Более компактные кнопки на мобильном - удалено, заменено на атомарные классы */
  /* Убираем специальное форматирование чекбоксов - теперь везде text-xs */
  /* Адаптация строки с remember me и forgot password на мобильном */
  .form-content .flex.justify-between {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem; }
  .form-content .flex.justify-between > div:last-child {
    align-self: flex-end; } }

/* Возвращаем horizontal layout на больших экранах */
@media (min-width: 480px) {
  .form-content .flex.justify-between {
    flex-direction: row;
    align-items: center;
    gap: 0; }
  .form-content .flex.justify-between > div:last-child {
    align-self: auto; } }

.form-content {
  display: flex;
  flex-direction: column; }

/* Page background for table pages - OctaSpace architecture */
.table-page-bg {
  min-height: 100vh;
  background: #0b090b;
  position: relative; }

.table-page-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(/assets/grain-card-bg-4bbd23f9ee74b21d4a071ab7f89703666afdec15eba27aa78faf0088a97a4bfe.png);
  opacity: 0.03;
  pointer-events: none;
  background-size: 200px 200px;
  background-repeat: repeat; }

/* Sidebar Components */
.sidebar-item {
  @apply flex items-center p-2 text-foreground rounded-lg hover:bg-secondary/80 transition-colors group; }

.sidebar-item-icon {
  @apply w-5 h-5 text-muted-foreground group-hover:text-foreground transition-colors; }

.sidebar-submenu-item {
  @apply flex items-center p-2 text-muted-foreground hover:text-foreground text-sm rounded-lg hover:bg-secondary/60 transition-colors group; }

.sidebar-submenu-item-icon {
  @apply w-4 h-4 mr-3; }

/* Light Theme Utilities for Sidebar */
.bg-navbar-bg-light {
  background-color: #f8f9fa; }

.text-sidebar-foreground-light {
  color: #374151; }

.text-sidebar-muted-light {
  color: #6b7280; }

.hover\:bg-sidebar-hover-light:hover {
  background-color: #e5e7eb; }

.border-sidebar-light {
  border-color: #e5e7eb; }

/* Sidebar Animation Classes */
.sidebar-overlay {
  transition: opacity 0.3s ease; }

.sidebar-panel {
  transition: transform 0.3s ease; }

.sidebar-chevron {
  transition: transform 0.2s ease; }

.sidebar-chevron.rotate-90 {
  transform: rotate(90deg); }

/* Sidebar Scroll Fix */
#sidebar {
  overflow: visible !important; }

#sidebar .flex-1 {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 100% !important; }

#mobile-sidebar {
  overflow: visible !important; }

#mobile-sidebar .flex-1 {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 100% !important; }

/* Compact Sidebar Styles */
.sidebar-nav-link,
.sidebar-nav-button {
  padding: 6px 8px !important;
  border-radius: 12px !important;
  gap: 8px !important;
  min-height: auto !important; }

.sidebar-nav-link .sidebar-item-icon,
.sidebar-nav-link .sidebar-submenu-item-icon,
.sidebar-nav-button .sidebar-item-icon,
.sidebar-nav-button .sidebar-submenu-item-icon {
  width: 18px !important;
  height: 18px !important; }

.sidebar-nav-link span,
.sidebar-nav-button span {
  font-size: 14px !important;
  font-weight: 500 !important; }

#sidebar [data-controller="collapsible"] .sidebar-item-icon,
#mobile-sidebar [data-controller="collapsible"] .sidebar-item-icon {
  width: 18px !important;
  height: 18px !important; }

#sidebar [data-controller="collapsible"] span,
#mobile-sidebar [data-controller="collapsible"] span {
  font-size: 14px !important;
  font-weight: 500 !important; }

/* Compact spacing between elements */
#sidebar .space-y-2 > * + *,
#mobile-sidebar .space-y-2 > * + * {
  margin-top: 4px !important; }

/* Compact submenu spacing */
#sidebar .sidebar-nav-link[href*="/hostings"],
#sidebar .sidebar-nav-link[href*="/profile"],
#mobile-sidebar .sidebar-nav-link[href*="/hostings"],
#mobile-sidebar .sidebar-nav-link[href*="/profile"] {
  margin-left: 0px !important; }

/* Dashboard link compact spacing */
#sidebar .pb-2,
#mobile-sidebar .pb-2 {
  padding-bottom: 4px !important; }

/* Submenu lists compact spacing */
#sidebar ul.space-y-1 > li + li,
#mobile-sidebar ul.space-y-1 > li + li {
  margin-top: 2px !important; }

/* Compact padding for submenu containers */
#sidebar ul.py-2,
#mobile-sidebar ul.py-2 {
  padding-top: 4px !important;
  padding-bottom: 4px !important; }

/* ── App Card Navigation Feedback ── */
.app-card-link {
  transition: transform 0.15s ease, background-color 0.2s ease, opacity 0.3s ease, box-shadow 0.3s ease;
  box-shadow: inset 0 0 0 0 rgba(177, 25, 149, 0); }
  .app-card-link:active {
    transform: scale(0.97); }

/* Picking an app reads like renting a Render node: the chosen card keeps its
   brand ring and full opacity, the cards left behind dim out. The ring stays
   inset — the apps grid scrolls (overflow-y-auto), so an outer glow like the
   node cards' `attention-pulse` would be clipped at the grid edges. */
[data-app-card][data-app-card-state="navigating"] .app-card-link {
  box-shadow: inset 0 0 0 1.5px rgba(177, 25, 149, 0.5);
  animation: app-card-pulse 1.2s ease-in-out infinite; }

[data-navigating="true"] [data-app-card]:not([data-app-card-state="navigating"]) .app-card-link {
  opacity: 0.4; }

[data-navigating="true"] {
  pointer-events: none; }

@keyframes app-card-pulse {
  0%, 100% {
    box-shadow: inset 0 0 0 1.5px rgba(177, 25, 149, 0.4); }
  50% {
    box-shadow: inset 0 0 0 2.5px rgba(177, 25, 149, 0.15); } }

@media (prefers-reduced-motion: reduce) {
  .app-card-link {
    transition: background-color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease; }
  .app-card-link:active {
    transform: none; }
  [data-app-card][data-app-card-state="navigating"] .app-card-link {
    animation: none; } }

/* ── .nav-card — reusable click/navigation feedback for grid cards ──
   Add `.nav-card` to any card that navigates on click inside an app-card-nav grid
   (grid: data-controller="app-card-nav"; card: data-app-card + a
   click->app-card-nav#navigate action). While the click is processed and Turbo
   loads the next page, the chosen card holds a calm, breathing primary ring while
   the ones left behind dim out — reads as "got it, opening…" without a spinner.
   app-card-nav flags the grid [data-navigating] (which also blocks double clicks)
   and the chosen card [data-app-card-state="navigating"]. Opacity / border / shadow
   ease in via the card's own transition, so the element must carry one (every
   render/marketplace card already does). This is the default *outer-glow* variant;
   the apps grid uses an inset-ring variant (.app-card-link above) because its
   scroll container would clip an outer glow. */
.nav-card[data-app-card-state="navigating"] {
  opacity: 0.92;
  border-color: rgba(177, 25, 149, 0.55);
  box-shadow: 0 0 0 1.5px rgba(177, 25, 149, 0.5), 0 10px 30px -10px rgba(177, 25, 149, 0.45);
  animation: nav-card-engage 1s ease-in-out infinite; }

[data-navigating="true"] .nav-card:not([data-app-card-state="navigating"]) {
  opacity: 0.4; }

@keyframes nav-card-engage {
  0%, 100% {
    box-shadow: 0 0 0 1.5px rgba(177, 25, 149, 0.5), 0 10px 30px -10px rgba(177, 25, 149, 0.4); }
  50% {
    box-shadow: 0 0 0 3px rgba(177, 25, 149, 0.22), 0 14px 36px -10px rgba(177, 25, 149, 0.2); } }

@media (prefers-reduced-motion: reduce) {
  .nav-card[data-app-card-state="navigating"] {
    animation: none; } }

/* ── Context menu (generic floating menu; e.g. frame right-click in the viewer) ──
   Rendered into <body> by the `context-menu` controller, so it is theme-scoped via
   the html.dark ancestor rather than dark: utilities. Structure classes are shared
   by every builder; content is assembled as DOM nodes (never innerHTML). */
.context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 196px;
  max-width: 320px;
  padding: 0.25rem;
  border-radius: 0.625rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, 0.35), 0 2px 8px -4px rgba(0, 0, 0, 0.2);
  outline: none;
  color: #111827;
  font-size: 0.875rem;
  user-select: none;
  animation: context-menu-in 0.12s ease-out; }

.context-menu-header {
  padding: 0.375rem 0.5rem 0.3125rem; }

/* Title + status badge + time on one line. The badge and the time keep their
   size; only the title would give way, and at the widths involved it never has
   to (longest localized status is 13 characters, the menu caps at 320px). */
.context-menu-title-row {
  display: flex;
  align-items: center;
  gap: 0.375rem; }

.context-menu-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.05rem;
  color: #111827; }

.context-menu-title-row .context-menu-badge,
.context-menu-title-time {
  flex-shrink: 0;
  margin-top: 0; }

/* Pushes itself and the badge after it to the right edge, so the row reads
   "Frame 240 ........ 9s [Finished]" instead of trailing off into empty space.
   When the title and a long status meet, the slack simply runs out — nothing
   overlaps, because both keep their size. */
.context-menu-title-time {
  margin-left: auto; }

/* No time (a queued frame never ran): the badge takes the auto margin itself. */
.context-menu-title-row .context-menu-title + .context-menu-badge {
  margin-left: auto; }

/* The title used to be followed by the status row, which carried its own top
   margin; with the status merged into the title the next line inherited the 1px
   meta gap and sat right under the title, reading as one block. Whatever comes
   next — the node line, or the error row on a frame with no node — gets a real
   gap here, while the meta lines that follow each other stay tight because they
   belong together. */
/* Two classes, not `.context-menu-title-row + *`: that ties with .context-menu-meta
   on specificity, and .context-menu-meta is declared further down, so the 1px gap
   won on source order alone. */
.context-menu-header .context-menu-title-row + * {
  margin-top: 0.3125rem; }

.context-menu-meta {
  margin-top: 0.0625rem;
  font-size: 0.6875rem;
  line-height: 0.95rem;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.context-menu-badge {
  flex-shrink: 0;
  padding: 0.0625rem 0.4375rem;
  border-radius: 0.3125rem;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 0.95rem; }

.context-menu:has(.context-menu-error-row) {
  max-width: 13rem; }

.context-menu-error-row {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  margin-top: 0.125rem;
  max-width: 100%; }

.context-menu-error {
  flex: 1;
  min-width: 0;
  white-space: normal;
  color: #dc2626;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; }

/* The automatic-retry line: amber, not red. The frame is on its way back to a
   node, which is the farm working, not a failure to report. */
.context-menu-retry {
  color: #b45309;
  white-space: normal; }

.dark .context-menu-retry {
  color: #fbbf24; }

.context-menu-error-copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.0625rem;
  border-radius: 0.25rem;
  color: #dc2626;
  opacity: 0.65;
  transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease; }

.context-menu-error-copy svg {
  width: 0.75rem;
  height: 0.75rem; }

.context-menu-error-copy:hover,
.context-menu-error-copy:focus-visible {
  opacity: 1;
  background-color: rgba(220, 38, 38, 0.1);
  outline: none; }

.context-menu-error-copy.is-copied {
  opacity: 1;
  color: #16a34a; }

.context-menu-node-link {
  color: #374151;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  transition: color 0.12s ease; }

.context-menu-node-link:hover,
.context-menu-node-link:focus-visible {
  color: #111827;
  outline: none; }

.dark .context-menu-node-link {
  color: #d1d5db; }

.dark .context-menu-node-link:hover,
.dark .context-menu-node-link:focus-visible {
  color: #ffffff; }

.context-menu-node-line {
  display: flex;
  align-items: center;
  gap: 0.25rem; }

.context-menu-node-name,
.context-menu-node-line .context-menu-node-link {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.context-menu-node-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0; }

.context-menu-node-status-item {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  min-width: 0; }

.context-menu-node-status-item svg {
  flex-shrink: 0;
  width: 0.6875rem;
  height: 0.6875rem; }

.context-menu-node-status-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.context-menu-node-flag {
  color: #6b7280; }

.dark .context-menu-node-flag {
  color: #6b7280; }

.context-menu-group-label {
  padding: 0.375rem 0.5rem 0.125rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280; }

.dark .context-menu-group-label {
  color: #6b7280; }

.context-menu-item.is-copied {
  color: #16a34a; }

/* Frame Details' node actions (Report / note / Copy node ID). Same 44px floor as
   the context menu's rows and for the same reason: the control panel is a
   slide-over on a phone, so these are pressed by thumb, and a ~26px pill sits
   well under the target size the menu already respects. */
@media (any-pointer: coarse) {
  .node-action-btn {
    min-height: 44px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem; } }

.context-menu-label {
  flex: 1 1 auto; }

.context-menu-count {
  flex-shrink: 0;
  min-width: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.06);
  font-size: 0.6875rem;
  line-height: 1.125rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #6b7280; }

.context-menu-chevron {
  flex-shrink: 0;
  opacity: 0.5; }

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.375rem 0.5rem;
  border-radius: 0.4375rem;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease; }

.context-menu-item:hover,
.context-menu-item:focus-visible {
  background: rgba(0, 0, 0, 0.05);
  outline: none; }

/* The menu is reachable by long-press, so wherever a finger can reach it the rows
   must clear the 44px target floor — a ~32px row puts a destructive item (Stop
   node) within a thumb-width of its neighbours.
   `any-pointer`, not `pointer`: `pointer` describes only the *primary* device, so
   on a touch laptop driven by its trackpad it reports `fine` even though the
   screen is still there to be pressed. `any-pointer: coarse` asks the question we
   actually mean — can this device be touched at all. The cost is deliberate: such
   a laptop gets the larger rows even while the mouse is in use, which is the safe
   direction to err. Not width-based: a narrow mouse-driven window needs nothing. */
@media (any-pointer: coarse) {
  .context-menu-item {
    min-height: 44px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem; } }

.context-menu-item[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none; }

.context-menu-item[data-variant="danger"] {
  color: #dc2626; }

.context-menu-item[data-variant="danger"]:hover,
.context-menu-item[data-variant="danger"]:focus-visible {
  background: rgba(220, 38, 38, 0.1); }

.context-menu-icon {
  width: 0.9375rem;
  height: 0.9375rem;
  flex-shrink: 0;
  opacity: 0.85; }

.context-menu-separator {
  height: 1px;
  margin: 0.25rem 0.25rem;
  background: rgba(0, 0, 0, 0.08); }

.dark .context-menu {
  background: #171717;
  border-color: #3d3d3d;
  color: #f5f5f5;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7), 0 2px 10px -4px rgba(0, 0, 0, 0.5); }

.dark .context-menu-title {
  color: #f5f5f5; }

.dark .context-menu-meta {
  color: #9ca3af; }

.dark .context-menu-error {
  color: #f87171; }

.dark .context-menu-error-copy {
  color: #f87171; }

.dark .context-menu-error-copy:hover,
.dark .context-menu-error-copy:focus-visible {
  background-color: rgba(248, 113, 113, 0.14); }

.dark .context-menu-error-copy.is-copied {
  color: #4ade80; }

.dark .context-menu-count {
  background: rgba(255, 255, 255, 0.1);
  color: #9ca3af; }

.dark .context-menu-item:hover,
.dark .context-menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.08); }

.dark .context-menu-item[data-variant="danger"] {
  color: #f87171; }

.dark .context-menu-item[data-variant="danger"]:hover,
.dark .context-menu-item[data-variant="danger"]:focus-visible {
  background: rgba(248, 113, 113, 0.14); }

.dark .context-menu-separator {
  background: rgba(255, 255, 255, 0.1); }

/* Preview submenu flyout — a small card to the item's side (see attachSubmenu). */
.context-menu-flyout {
  position: absolute;
  z-index: 1;
  width: 180px;
  padding: 0.375rem;
  border-radius: 0.5rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, 0.35);
  animation: context-menu-in 0.1s ease-out; }

.dark .context-menu-flyout {
  background: #171717;
  border-color: #3d3d3d;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7); }

/* Narrow viewport (a phone): neither side of the menu has room, so the flyout
   lies over the menu instead of off-screen — see flyoutPlacement. Dropping the
   fixed width lets the inline left/right stretch it across the menu's box, and a
   heavier shadow separates it from the items it now covers.
   Declared after the .dark rule above: equal specificity, so source order is what
   makes the overlay shadow win in light mode. */
.context-menu-flyout.is-overlay {
  width: auto;
  box-shadow: 0 18px 44px -8px rgba(0, 0, 0, 0.5); }

.dark .context-menu-flyout.is-overlay {
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.8); }

.context-menu-preview {
  display: flex;
  flex-direction: column;
  gap: 0.375rem; }

.context-menu-preview-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 0.375rem;
  overflow: hidden;
  background: #000000; }

.context-menu-preview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }

.context-menu-preview-media.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050505; }

.context-menu-preview-logo {
  width: auto;
  height: 58%;
  max-width: 68%;
  object-fit: contain;
  opacity: 0.48;
  filter: grayscale(100%) brightness(0.82); }

.context-menu-preview-caption {
  font-size: 0.6875rem;
  line-height: 0.95rem;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.dark .context-menu-preview-caption {
  color: #9ca3af; }

.context-menu-heat-scale {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem; }

.context-menu-heat-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.625rem;
  color: #9ca3af; }

.context-menu-heat-bar {
  position: relative;
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #000004, #420a68, #932567, #dd513a, #fca50a); }

.context-menu-heat-marker {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%); }

@keyframes context-menu-in {
  from {
    opacity: 0;
    transform: scale(0.97); }
  to {
    opacity: 1;
    transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .context-menu,
  .context-menu-flyout {
    animation: none; } }

/* Launch Mode Card Selector — per-mode accent colors */
/* jupyter → emerald */
.launch-mode-card[data-mode="jupyter"]:has(:checked) {
  border-color: rgba(16, 185, 129, 0.5);
  background-color: rgba(16, 185, 129, 0.06); }

.launch-mode-card[data-mode="jupyter"]:has(:checked) svg {
  color: #10b981;
  opacity: 1; }

.launch-mode-card[data-mode="jupyter"]:has(:checked) .launch-mode-label {
  color: #10b981; }

/* interactive_shell → violet-eggplant */
.launch-mode-card[data-mode="interactive_shell"]:has(:checked) {
  border-color: rgba(177, 25, 149, 0.5);
  background-color: rgba(177, 25, 149, 0.06); }

.launch-mode-card[data-mode="interactive_shell"]:has(:checked) svg {
  color: #B11995;
  opacity: 1; }

.launch-mode-card[data-mode="interactive_shell"]:has(:checked) .launch-mode-label {
  color: #B11995; }

/* selkies → amber */
.launch-mode-card[data-mode="selkies"]:has(:checked) {
  border-color: rgba(245, 158, 11, 0.5);
  background-color: rgba(245, 158, 11, 0.06); }

.launch-mode-card[data-mode="selkies"]:has(:checked) img {
  opacity: 1; }

.launch-mode-card[data-mode="selkies"]:has(:checked) .launch-mode-label {
  color: #f59e0b; }

/* entrypoint → sky */
.launch-mode-card[data-mode="entrypoint"]:has(:checked) {
  border-color: rgba(14, 165, 233, 0.5);
  background-color: rgba(14, 165, 233, 0.06); }

.launch-mode-card[data-mode="entrypoint"]:has(:checked) svg {
  color: #0ea5e9;
  opacity: 1; }

.launch-mode-card[data-mode="entrypoint"]:has(:checked) .launch-mode-label {
  color: #0ea5e9; }

/* dark mode — slightly brighter accents */
.dark .launch-mode-card[data-mode="jupyter"]:has(:checked) {
  border-color: rgba(52, 211, 153, 0.4);
  background-color: rgba(52, 211, 153, 0.08); }

.dark .launch-mode-card[data-mode="jupyter"]:has(:checked) svg {
  color: #34d399;
  opacity: 1; }

.dark .launch-mode-card[data-mode="jupyter"]:has(:checked) .launch-mode-label {
  color: #34d399; }

.dark .launch-mode-card[data-mode="interactive_shell"]:has(:checked) {
  border-color: rgba(214, 35, 184, 0.4);
  background-color: rgba(214, 35, 184, 0.08); }

.dark .launch-mode-card[data-mode="interactive_shell"]:has(:checked) svg {
  color: #D623B8;
  opacity: 1; }

.dark .launch-mode-card[data-mode="interactive_shell"]:has(:checked) .launch-mode-label {
  color: #D623B8; }

.dark .launch-mode-card[data-mode="selkies"]:has(:checked) {
  border-color: rgba(251, 191, 36, 0.4);
  background-color: rgba(251, 191, 36, 0.08); }

.dark .launch-mode-card[data-mode="selkies"]:has(:checked) img {
  opacity: 1; }

.dark .launch-mode-card[data-mode="selkies"]:has(:checked) .launch-mode-label {
  color: #fbbf24; }

.dark .launch-mode-card[data-mode="entrypoint"]:has(:checked) {
  border-color: rgba(56, 189, 248, 0.4);
  background-color: rgba(56, 189, 248, 0.08); }

.dark .launch-mode-card[data-mode="entrypoint"]:has(:checked) svg {
  color: #38bdf8;
  opacity: 1; }

.dark .launch-mode-card[data-mode="entrypoint"]:has(:checked) .launch-mode-label {
  color: #38bdf8; }

/* Render job page — frame section folded by the header toggle
   (render-viewer#toggleFrames). Only below lg, where the section sits above the
   player; from lg it is the side column and the toggle is gone, so a stale fold
   must not hide it. A class rather than `hidden`: the section is `flex`, and
   Tailwind v4 orders .hidden before the display utilities. */
@media (max-width: 1023px) {
  .is-collapsed[data-render-viewer-target="frameGrid"] {
    display: none; } }

/* Render Download Manager — side panel (slides in alongside the player).
   On xl+ (≥1280px): expands as a fixed-width column to the right of the
   player, which narrows naturally via flex-1 min-w-0.
   Below xl: stacks beneath the player as a full-width block. */
.render-dl-side {
  overflow: hidden;
  flex-shrink: 0;
  /* Phone: a bottom sheet instead of a block in the flow. The Download button is
     in the page header, while in the flow the panel lands under the full-height
     frame grid, a whole screen away from the button it answers. A sheet overlays
     the content at the bottom edge, so the panel appears where the thumb is and
     the page behind it does not jump. */
  /* The theme is a class on <html>, not a media query: the app has its own
     switch. */ }
  @media (min-width: 1280px) {
    .render-dl-side {
      width: 0;
      transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
      .render-dl-side.is-open {
        width: 360px; } }
  @media (max-width: 1279px) {
    .render-dl-side {
      width: 100%;
      max-height: 0;
      transition: max-height 0.4s ease; }
      .render-dl-side.is-open {
        max-height: 600px; } }
  @media (max-width: 639px) {
    .render-dl-side {
      position: fixed;
      inset: auto 0 0 0;
      z-index: 60;
      width: 100%;
      max-height: 85vh;
      /* fallback: dvh is unsupported in older WebKit */
      max-height: 85dvh;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
      box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.28);
      transform: translateY(100%);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      /* Same specificity as the `.is-open { max-height: 600px }` of the tablet
       block above, and later in the file, so the sheet keeps its own height: on a
       short phone a 600px cap pushes the pinned action row off the screen. */
      /* The sheet is the flex column; its inner column is the one that scrolls.
       min-height: 0 is what lets a flex child shrink below its content and
       actually scroll instead of overflowing into the clipped sheet. */
      display: flex;
      flex-direction: column;
      /* The file list takes whatever height is left and scrolls on its own, so
       the footer with the primary action always sits under it, inside the sheet.
       Its desktop cap (max-h-[55vh]) cannot work here: iOS resolves vh against
       the large viewport (836px where 796px are visible), and header + list +
       footer came out taller than the sheet. A sticky footer did not save it:
       sticky cannot leave its parent, and the parent footer itself was the part
       pushed below the sheet, under Safari's toolbar.
       :not(.hidden) — the section is toggled with `hidden`, which this selector
       would otherwise outrank. */ }
      .render-dl-side.is-open {
        transform: translateY(0);
        max-height: 85vh;
        max-height: 85dvh; }
      .render-dl-side > div {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        overscroll-behavior: contain;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
      .render-dl-side > div > [data-render-downloads-target="treeSection"]:not(.hidden) {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0; }
      .render-dl-side [data-render-downloads-target="frameList"] {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overscroll-behavior: contain; }
      .render-dl-side [data-render-downloads-target="pickerActions"],
      .render-dl-side [data-render-downloads-target="controls"] {
        padding-top: 0.75rem;
        border-top: 1px solid rgba(0, 0, 0, 0.08); } }
  @media (max-width: 639px) {
    .dark .render-dl-side {
      border-top-color: rgba(255, 255, 255, 0.1);
      box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.6); }
    .dark .render-dl-side [data-render-downloads-target="pickerActions"], .dark .render-dl-side [data-render-downloads-target="controls"] {
      border-top-color: rgba(255, 255, 255, 0.08); } }
/* Render Info / Control panel — side panel (slides in alongside the player).
   Mirror of .render-dl-side but on the LEFT flank (placed via order-first):
   On xl+ (≥1280px): expands as a fixed-width column to the left of the
   player, which narrows naturally via flex-1 min-w-0.
   Below xl: stacks ABOVE the player as a full-width block. */
.render-info-side {
  overflow: hidden;
  flex-shrink: 0; }
  @media (min-width: 1280px) {
    .render-info-side {
      width: 0;
      transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
      .render-info-side.is-open {
        width: 288px; } }
  @media (max-width: 1279px) {
    .render-info-side {
      width: 100%;
      max-height: 0;
      transition: max-height 0.4s ease; }
      .render-info-side.is-open {
        max-height: 600px; } }
/* Render Download Manager — completion check-mark (stroke draw-in).
   Used by the downloads side panel when every file
   has been saved to the destination folder. */
.render-dl-check circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: render-dl-draw 0.5s ease-out forwards; }

.render-dl-check path {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: render-dl-draw 0.35s 0.45s ease-out forwards; }

@keyframes render-dl-draw {
  to {
    stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .render-dl-check circle,
  .render-dl-check path {
    animation: none;
    stroke-dashoffset: 0; } }

/* Render Download Manager — frame-picker checkbox.
   The extra `input[type="checkbox"]` in the selector lifts specificity above
   the @tailwindcss/forms base rules and the app's global checkbox overrides,
   so the brand colours win regardless of stylesheet order. Hover/focus states
   are pinned explicitly for the same reason (a global rule was repainting
   hover blue). */
input.render-dl-checkbox[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  border-radius: 0.25rem;
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  /* Checked / indeterminate take the app-wide ink look from compat.css, so this
     tree reads like every other checkbox; only the empty box is styled here. */ }
  input.render-dl-checkbox[type="checkbox"]:not(:checked):not(:indeterminate) {
    background-color: transparent;
    border-color: var(--input); }
  input.render-dl-checkbox[type="checkbox"]:not(:checked):not(:indeterminate):hover {
    border-color: var(--primary); }
  input.render-dl-checkbox[type="checkbox"]:focus, input.render-dl-checkbox[type="checkbox"]:focus-visible {
    outline: 2px solid var(--primary-shadow);
    outline-offset: 1px;
    box-shadow: none; }

/* ── Render Player — fullscreen overlay ─────────────────────────────────────
   Controls (.render-fs-controls) fade in on hover / focus-within so the user
   can still reach the layer dropdown, playback controls, and the exit button. */
.render-player-fullscreen {
  --render-player-left-offset: 0px;
  --render-player-stage-width: calc(100vw - var(--render-player-left-offset));
  position: fixed !important;
  inset: 0 0 0 var(--render-player-left-offset) !important;
  z-index: 9999 !important;
  display: block !important;
  width: var(--render-player-stage-width) !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  max-width: none !important;
  border-radius: 0 !important;
  background: #050506 !important; }

.render-player-fullscreen > .flex {
  position: fixed !important;
  inset: 0 0 0 var(--render-player-left-offset) !important;
  width: var(--render-player-stage-width) !important;
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important; }

.render-player-fullscreen [data-render-preview-viewport] {
  position: fixed !important;
  inset: 0 0 0 var(--render-player-left-offset) !important;
  width: var(--render-player-stage-width) !important;
  height: 100vh !important;
  flex: none !important;
  min-height: 0 !important; }

.render-player-fullscreen [data-render-preview-target="bgImage"] {
  position: fixed !important;
  inset: 0 0 0 var(--render-player-left-offset) !important;
  width: var(--render-player-stage-width) !important;
  height: 100vh !important;
  /* Tailwind v4 moved translate/scale/rotate off `transform` onto the individual
     CSS properties, so `transform: none` alone no longer cancels the player's
     `scale-110` / `-translate-*` utilities — the stage image ended up shifted by
     half its size. Reset all four. */
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  object-fit: cover !important;
  opacity: 0.22 !important;
  filter: blur(28px) brightness(0.45) !important; }

.render-player-fullscreen [data-render-preview-target="mainImage"] {
  position: fixed !important;
  inset: 0 0 0 var(--render-player-left-offset) !important;
  left: var(--render-player-left-offset) !important;
  top: 0 !important;
  width: var(--render-player-stage-width) !important;
  height: 100vh !important;
  max-width: 100% !important;
  max-height: 100% !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center center !important; }

.render-player-fullscreen > .flex > .render-fs-controls:first-child {
  position: fixed !important;
  inset: 0 0 auto var(--render-player-left-offset) !important;
  width: var(--render-player-stage-width) !important;
  z-index: 40 !important;
  background: rgba(14, 14, 16, 0.82) !important;
  backdrop-filter: blur(12px); }

.render-player-fullscreen [data-render-preview-viewport] + .render-fs-controls {
  position: fixed !important;
  inset: auto 0 14px var(--render-player-left-offset) !important;
  width: var(--render-player-stage-width) !important;
  z-index: 40 !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(14, 14, 16, 0.88) !important;
  backdrop-filter: blur(12px); }

.render-player-fullscreen [data-render-viewer-target="timeline"] {
  position: fixed !important;
  inset: auto 0 0 var(--render-player-left-offset) !important;
  width: var(--render-player-stage-width) !important;
  z-index: 41 !important; }

.render-player-fullscreen [data-render-player-secondary-toggles] {
  display: none !important; }

.render-player-fullscreen .render-fs-controls {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease; }

.render-player-fullscreen:hover .render-fs-controls,
.render-player-fullscreen:focus-within .render-fs-controls {
  opacity: 1;
  pointer-events: auto; }

/* Desktop viewport can still have a narrow player strip (sidebar + side panels).
   In that case, force the existing mobile control choreography to avoid overlap. */
@media (min-width: 640px) {
  .render-player-controls--compact[data-render-player-controls] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 0.5rem;
    height: auto;
    padding: 0.625rem 0.75rem;
    position: static; }
  /* The clusters centre themselves with `sm:-translate-*` utilities, which in
     Tailwind v4 write the `translate` property rather than `transform` — so
     undoing the absolute centring needs `translate: none` too, or the row stays
     shifted by half its size. */
  .render-player-controls--compact[data-render-player-controls] > .order-2 {
    position: static;
    inset: auto;
    transform: none;
    translate: none; }
  .render-player-controls--compact[data-render-player-controls] > .contents {
    display: contents;
    position: static;
    inset: auto;
    transform: none;
    translate: none; }
  .render-player-controls--compact[data-render-player-controls] [data-render-viewer-target="fpsDropdown"] {
    order: 1; }
  .render-player-controls--compact[data-render-player-controls] [data-render-viewer-target="fullscreenBtn"] {
    order: 3;
    margin-left: auto; }
  .render-player-controls--compact[data-render-player-controls] [data-render-viewer-target="nativeFullscreenBtn"] {
    order: 4; }
  .render-player-controls--compact[data-render-player-controls] > .order-5 {
    display: block;
    flex-basis: 100%;
    height: 0.125rem; }
  /* Row 2, left of LIVE · REEL · LOGS (same order, earlier in the DOM). At
     640px+ that row has room for the chip at its natural width, which is also
     what measureControlClusters needs to read; only phones grow it from zero. */
  .render-player-controls--compact[data-render-player-controls] [data-render-viewer-target="layerDropdown"] {
    order: 6; }
  .render-player-controls--compact[data-render-player-controls] [data-render-viewer-target="liveBtn"] {
    order: 6;
    margin-left: auto; }
  .render-player-controls--compact[data-render-player-controls] [data-render-player-secondary-toggles] {
    order: 7;
    position: static;
    inset: auto;
    transform: none;
    translate: none; } }
.flag-icon-background, .flag-icon {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat; }

.flag-icon {
  position: relative;
  display: inline-block;
  width: 1.3333333333em;
  line-height: 1em; }
  .flag-icon:before {
    content: '\00a0'; }
  .flag-icon.flag-icon-squared {
    width: 1em; }

.flag-icon-ad {
  background-image: url(/assets/flags/4x3/ad-04b4b65e6a104b102172258b3894a9a4e29890aa63e8edc4812033dd7387b77e.svg); }
  .flag-icon-ad.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ad-847534ad5665b0bb24f766110a56922d9115cbd4c35746597e1fc5edb381b41a.svg); }

.flag-icon-ae {
  background-image: url(/assets/flags/4x3/ae-f6dd88c6cb3940f07ad1ee2635ec0f081d53885efea97c2f363f61c4f06129e8.svg); }
  .flag-icon-ae.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ae-c5992978bbf00ada1971a746b819936eb2f73aefac7f10518995545c2ccf2c10.svg); }

.flag-icon-af {
  background-image: url(/assets/flags/4x3/af-745ad7e8ea956edf06641d01bf5a0374cfae6902846e62a30ed56ad80f889906.svg); }
  .flag-icon-af.flag-icon-squared {
    background-image: url(/assets/flags/1x1/af-50e587ac98a5af98e21994909aa1f9898add6842954e2ad6a709d857b39a8b55.svg); }

.flag-icon-ag {
  background-image: url(/assets/flags/4x3/ag-ec678db01740bd72757a7883a1dbea0c163e2b0a7a692cc8a0749c6f50428abb.svg); }
  .flag-icon-ag.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ag-35c11ca3ad0581842f9c1eddc462690e6166f94a8dbb15e248398df93a276004.svg); }

.flag-icon-ai {
  background-image: url(/assets/flags/4x3/ai-d688814fa60d2294b79b6ffe3d2a64e55a0bc013718cbf028b5d5720e3041794.svg); }
  .flag-icon-ai.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ai-850f5995f9b55ac8f30b35157cb1881d149e8257c168f39dbc8e51cae25c222d.svg); }

.flag-icon-al {
  background-image: url(/assets/flags/4x3/al-5631be891ba0ccdb1f2a9b3a934031ed681aaeb139acc9e3b414e2561a608495.svg); }
  .flag-icon-al.flag-icon-squared {
    background-image: url(/assets/flags/1x1/al-96787887d75cd3bd02e8eff8a75ba0856873167743205a5cbfc5439197e3070d.svg); }

.flag-icon-am {
  background-image: url(/assets/flags/4x3/am-fd6eb7b12b2bbd15d4e5db6949b57255849f5fecc62d9a48d848bab767f1123e.svg); }
  .flag-icon-am.flag-icon-squared {
    background-image: url(/assets/flags/1x1/am-85e618fb93d8a64fc145ce0ebfb0397e5468816476df4c43ff0419dfea72d53b.svg); }

.flag-icon-ao {
  background-image: url(/assets/flags/4x3/ao-09b6b18d13202b859e9e94b9a88e59701b7b2d00d88d8a749f7f0d3bb71c745c.svg); }
  .flag-icon-ao.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ao-dd2f7930f4f4214707f7a311f16cae422471094601319a5b69abeb48d384855c.svg); }

.flag-icon-aq {
  background-image: url(/assets/flags/4x3/aq-2adcc4b28a1da2ac271675b5377a39f226fe06b135d287215c153957b2176da2.svg); }
  .flag-icon-aq.flag-icon-squared {
    background-image: url(/assets/flags/1x1/aq-8809bb8b30a063b921c866da0a83236d7dd8a17148ef4c0db3c53ccd0dc15e6f.svg); }

.flag-icon-ar {
  background-image: url(/assets/flags/4x3/ar-8208e0546b8e666d806ee3fc3061504a62bf6cdea5fa4385d54c3ba131e3135c.svg); }
  .flag-icon-ar.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ar-2d821fddef311e29c74ce2b19bbc651a2d613aebbd88f59ad8fc6c3a81544d1b.svg); }

.flag-icon-as {
  background-image: url(/assets/flags/4x3/as-a7ce0712972b05287e9ddf7da0e19630d4b440f0ce59b3a50397bc29d162192e.svg); }
  .flag-icon-as.flag-icon-squared {
    background-image: url(/assets/flags/1x1/as-06505370c9bcfcad7b057757c3e892d12930db56565c0fd0bc86f4af5af5686f.svg); }

.flag-icon-at {
  background-image: url(/assets/flags/4x3/at-644b0cc2d91fe69f18d9992488a748efa0df7eb6ddc83ac79351ba9226956d25.svg); }
  .flag-icon-at.flag-icon-squared {
    background-image: url(/assets/flags/1x1/at-b36d3570a5102400e028dfa0b5204e9c2cd8d72b398e94bab5c51edd0954ce40.svg); }

.flag-icon-au {
  background-image: url(/assets/flags/4x3/au-887bb0cc0e77e15153e4c9006e785d5f68c77ca0ab9eb7f538e371a0e4f218af.svg); }
  .flag-icon-au.flag-icon-squared {
    background-image: url(/assets/flags/1x1/au-ba82260247c564d9f4735fa2eeca092ac9b5d4e32c6a6a8db1d4177b746516a5.svg); }

.flag-icon-aw {
  background-image: url(/assets/flags/4x3/aw-ea7eeaeec20598c43c59a2536b150a7fb5e7f6443a5bfb7e1bd72aa7186be8e1.svg); }
  .flag-icon-aw.flag-icon-squared {
    background-image: url(/assets/flags/1x1/aw-c39c9c3d5de9ece42a7e717ac3670886532dd75d50a34e1b3ae10e39487679fb.svg); }

.flag-icon-ax {
  background-image: url(/assets/flags/4x3/ax-4825f85b2d4669c70f360bd63f1e36215d16bace4700dffc61992911de53198a.svg); }
  .flag-icon-ax.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ax-ce68def4e721fcb48feb3b2aee81ad4ba7e75642ace96f24c059ee82b906c35b.svg); }

.flag-icon-az {
  background-image: url(/assets/flags/4x3/az-9e3354b743219dbaf19cc54a63e1a8ed41d1f41485455330775b3b5c6dd6c9fe.svg); }
  .flag-icon-az.flag-icon-squared {
    background-image: url(/assets/flags/1x1/az-4e93f9eef0ef96515e8c152c87d4a278d725ecb20108257105c9ccd48a156ddb.svg); }

.flag-icon-ba {
  background-image: url(/assets/flags/4x3/ba-7e420cae1feb7be337a34f25fb8fd6421295cde2e03273efa7e880d7d5d9281e.svg); }
  .flag-icon-ba.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ba-2e20ab2d7c91e67460cc9a910016a7706b0d7e5865895cce6b835b4f557cc861.svg); }

.flag-icon-bb {
  background-image: url(/assets/flags/4x3/bb-35373b19bd542d0382d79bbd162be7583932adbb180c8b6223614a52c31fb1a0.svg); }
  .flag-icon-bb.flag-icon-squared {
    background-image: url(/assets/flags/1x1/bb-f5d71a0072d6dbc25a4264c4ab0d997b785550f8e6581230c22bb30fec7c9841.svg); }

.flag-icon-bd {
  background-image: url(/assets/flags/4x3/bd-0531b5c730836d8ecfb4b9b79aad2e560dfc53a30e65f2a4030d2f275827f5ae.svg); }
  .flag-icon-bd.flag-icon-squared {
    background-image: url(/assets/flags/1x1/bd-c35883811cce9a21ef91202da7fc4648cc62b9ffee53a5ad0a88b179494e95fc.svg); }

.flag-icon-be {
  background-image: url(/assets/flags/4x3/be-ac7f9445060d07698cf4c4b5126b13397e12949102326caa3179eb98d4a90974.svg); }
  .flag-icon-be.flag-icon-squared {
    background-image: url(/assets/flags/1x1/be-61e1bb398ed6bf0253a21f9e32feb26395cf5aec5dc05640235d4accf43c2ee1.svg); }

.flag-icon-bf {
  background-image: url(/assets/flags/4x3/bf-4f19b8dfd521393da6d1f2ca95cc79d22d558c34c3d74b2718417d9df29726f3.svg); }
  .flag-icon-bf.flag-icon-squared {
    background-image: url(/assets/flags/1x1/bf-7b037b76d1915df2f978852ebc0b88e6fa9abf8d579ed85e360d081b8f95e09c.svg); }

.flag-icon-bg {
  background-image: url(/assets/flags/4x3/bg-1433c1cd05916af99e2db72a9e2c6d7532013a619770b66b51595fcd349cbaa6.svg); }
  .flag-icon-bg.flag-icon-squared {
    background-image: url(/assets/flags/1x1/bg-d631585f0e0981298746582b913765429bbcdd2349cc6062b8e9e790be5f31f0.svg); }

.flag-icon-bh {
  background-image: url(/assets/flags/4x3/bh-d677a52979c37517212e9b9b6697541a366b0104e09808d396a6d02411a983f5.svg); }
  .flag-icon-bh.flag-icon-squared {
    background-image: url(/assets/flags/1x1/bh-d408321e7282b8ee67413917d3063536197d8ceeb23abc05677d748ebb8a6378.svg); }

.flag-icon-bi {
  background-image: url(/assets/flags/4x3/bi-6323bc95384cf7a6ea6c91332c3054e55152b391e8f823828df3d05a3e40854a.svg); }
  .flag-icon-bi.flag-icon-squared {
    background-image: url(/assets/flags/1x1/bi-e79238de5c139c78aeb157e1b7d5646a79dc5e154f35ad49aeae21321c0a8d78.svg); }

.flag-icon-bj {
  background-image: url(/assets/flags/4x3/bj-951d79103aea5585768fa178923f6127f918fc01d02556174dff9f8506cf90ea.svg); }
  .flag-icon-bj.flag-icon-squared {
    background-image: url(/assets/flags/1x1/bj-7f5cc7510ece68a729788fcfbebd91dd941e0014ba3187b66bcd3da245c78460.svg); }

.flag-icon-bl {
  background-image: url(/assets/flags/4x3/bl-cc250a31e29ac0fe10c9e79a35920b280f6ec2731b9d5f701b2313bee631e114.svg); }
  .flag-icon-bl.flag-icon-squared {
    background-image: url(/assets/flags/1x1/bl-cfb5dd954f586d0662e09cdcbd338da8e225d481896414688262e2bd14c38c8a.svg); }

.flag-icon-bm {
  background-image: url(/assets/flags/4x3/bm-1e95c5f49d3f1f4a7049a82cdcd6ae326e4c37effd2249df9f7df423942b7396.svg); }
  .flag-icon-bm.flag-icon-squared {
    background-image: url(/assets/flags/1x1/bm-e0b05c8af03f5fe3728e191b24bedb2ac2429b86abfba4fa14b7d48960883d9c.svg); }

.flag-icon-bn {
  background-image: url(/assets/flags/4x3/bn-2e92465bcaef939fcf20029aedac6af2262eb4ee25e36d64bcf98d03976bbbe9.svg); }
  .flag-icon-bn.flag-icon-squared {
    background-image: url(/assets/flags/1x1/bn-6a56361917ec344da75ebb87a3713a2eaaf4605d84b1f1e3db1a8df6685bfb3f.svg); }

.flag-icon-bo {
  background-image: url(/assets/flags/4x3/bo-4c581c015880880d328153d007fc2517a7e0b53126c1a3a676e4abbb19e4c7fb.svg); }
  .flag-icon-bo.flag-icon-squared {
    background-image: url(/assets/flags/1x1/bo-ec135db8db19ecafc614799d5e9e459cc5d8e9d91308f7d4511f3b95f8ee1054.svg); }

.flag-icon-bq {
  background-image: url(/assets/flags/4x3/bq-973b8d977bde843039e96a9229d803fcbb1c29ba92272b8bc3223b28b8ccc803.svg); }
  .flag-icon-bq.flag-icon-squared {
    background-image: url(/assets/flags/1x1/bq-78c259288833d36f4d2209a4a95ca18cd3c18820f79f49b278bf7960cf5b34e7.svg); }

.flag-icon-br {
  background-image: url(/assets/flags/4x3/br-68ee8e029f99c31821e646aec1c8e9e8f8b1aaf26d72909ac75ff38c1f8e9201.svg); }
  .flag-icon-br.flag-icon-squared {
    background-image: url(/assets/flags/1x1/br-746af5283e4e792a1a7f94d934cac1e45c94470c4ffd37df5d1ab10bec2fd4db.svg); }

.flag-icon-bs {
  background-image: url(/assets/flags/4x3/bs-7b507794ee3f8d7e6b0c5739552e37cd2ab0596fab63a03f20fde4249cbf18d2.svg); }
  .flag-icon-bs.flag-icon-squared {
    background-image: url(/assets/flags/1x1/bs-277f44ad225c320c1a44610721f5b3a457d7e3d649593b598d59e2ce5164f727.svg); }

.flag-icon-bt {
  background-image: url(/assets/flags/4x3/bt-2f99024e1cec950a6bce184bc2d8a27629efdab8178a28bad798881ac3167710.svg); }
  .flag-icon-bt.flag-icon-squared {
    background-image: url(/assets/flags/1x1/bt-77d4f8b9a2c3dadacce904304c524b507e2a0d4109cf6506aa8cc1c131c359ad.svg); }

.flag-icon-bv {
  background-image: url(/assets/flags/4x3/bv-de8bb212ed5afdf6d557928d784ed98d2e2baa7aaaf2ced7abc5cf13fa540423.svg); }
  .flag-icon-bv.flag-icon-squared {
    background-image: url(/assets/flags/1x1/bv-4e4ae03e0878a6e689a0a2ebfe2b1b10fe58329a86acd73ee41f1a9c569f2cb3.svg); }

.flag-icon-bw {
  background-image: url(/assets/flags/4x3/bw-76559252bbe0a305e9228103c5c34c39271a9d0b69f8f2b0dfbea5e18d7b37de.svg); }
  .flag-icon-bw.flag-icon-squared {
    background-image: url(/assets/flags/1x1/bw-3797276ece0055f7c569dc013b59174f613e956c714b5674c90e911615f61318.svg); }

.flag-icon-by {
  background-image: url(/assets/flags/4x3/by-7865b19bb46d15f8004699022907d7c8d07193121dac101a3724b7ca578ee3ba.svg); }
  .flag-icon-by.flag-icon-squared {
    background-image: url(/assets/flags/1x1/by-7bd37ee878e4225470de8cc284d66cf70785a0329da88b43e5f93e25c047b738.svg); }

.flag-icon-bz {
  background-image: url(/assets/flags/4x3/bz-c8dfd550816ef86ff0fb82f9b31ca2467fcf50a7ba53e6163fe2bb01cccab0d5.svg); }
  .flag-icon-bz.flag-icon-squared {
    background-image: url(/assets/flags/1x1/bz-07baa0c080ae0dec236c42810db344f5b6e4209fe16bc9644cf998108b56b85c.svg); }

.flag-icon-ca {
  background-image: url(/assets/flags/4x3/ca-f9229a913dece446e34e6de7245dfd3adbea059934b5beaed45654cef2f1cb1d.svg); }
  .flag-icon-ca.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ca-47f58efb8689efb510291bb7b7a354c3e434e983914f0cc382e763ecccfa7a6e.svg); }

.flag-icon-cc {
  background-image: url(/assets/flags/4x3/cc-acf43807923322e2e43deef84443007b75d0d21ebb8a85d0d4e2837e998798c8.svg); }
  .flag-icon-cc.flag-icon-squared {
    background-image: url(/assets/flags/1x1/cc-827355b0b5c0a98cd0b479c7914c62d1de7712c643978941a97741c13ee69891.svg); }

.flag-icon-cd {
  background-image: url(/assets/flags/4x3/cd-594addda580762e53242cc9e5a3885cc200d6b92c9453b65242c0038e4e22959.svg); }
  .flag-icon-cd.flag-icon-squared {
    background-image: url(/assets/flags/1x1/cd-6f390c3dac0d0d278ea6593bb615e3e23a94f7e84cc40b917e47bdce520a3a2b.svg); }

.flag-icon-cf {
  background-image: url(/assets/flags/4x3/cf-31a4f1c7e55d90551235336b339544920b01a8a4fb27efd5b18d0a68ea908f0e.svg); }
  .flag-icon-cf.flag-icon-squared {
    background-image: url(/assets/flags/1x1/cf-820b63e306c3eec593028576d9ea830f24526b8e4c8a51cec04f4a1851f1f781.svg); }

.flag-icon-cg {
  background-image: url(/assets/flags/4x3/cg-cb3b4a7be309eae587becb687690e332624b75d8a40481abd13a4d8a3c685a87.svg); }
  .flag-icon-cg.flag-icon-squared {
    background-image: url(/assets/flags/1x1/cg-3b7d163f2951bc21e895dbead028c79b8f97dc4a95f9d9ca76d78b398025a20b.svg); }

.flag-icon-ch {
  background-image: url(/assets/flags/4x3/ch-d32cf51d10ea8174a3e8725e620c5bd13511a6a6c676d3c807e6ad82017f6178.svg); }
  .flag-icon-ch.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ch-ff30c29ed89a29db4cae89e8f4915e573c75dd7ad377e5ac7987c956fb68a141.svg); }

.flag-icon-ci {
  background-image: url(/assets/flags/4x3/ci-70e248e97c577c3ab3a85a8a76e5f20ef0bfd2c2a3c190746e625fa37edbbec9.svg); }
  .flag-icon-ci.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ci-fb50e5c5558e915f5cd4060bd75d63e43ed4a2af1cf77caf1d184d8e5b3c888b.svg); }

.flag-icon-ck {
  background-image: url(/assets/flags/4x3/ck-a86d1e54e265e2de5155595e838ec7c3db3ca23f563336885d7c5d17888c4709.svg); }
  .flag-icon-ck.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ck-a0d6f5ca82965ef1838549666bef9735b619c40bcf791850f092486b1fa3831d.svg); }

.flag-icon-cl {
  background-image: url(/assets/flags/4x3/cl-0bec6c3cc4d36bbf245a3be22c10b8ff9c25996bb372a916e365e3274e62ccfb.svg); }
  .flag-icon-cl.flag-icon-squared {
    background-image: url(/assets/flags/1x1/cl-8dc4289cd2cba6ac3f07519957f3cbd582f59e1153d655871a507bc0559fc93f.svg); }

.flag-icon-cm {
  background-image: url(/assets/flags/4x3/cm-8832f17145686399c412437f6762b4de6afb48fcc409590b7b09e593fe3b08d5.svg); }
  .flag-icon-cm.flag-icon-squared {
    background-image: url(/assets/flags/1x1/cm-4ba39a0a5fe36564e132e7a4d0f881ca10e95b0824157253a9180b2fe0089553.svg); }

.flag-icon-cn {
  background-image: url(/assets/flags/4x3/cn-865ae68cc9042422bae55dba123af75dfab352069aa15121385a739c57caf1aa.svg); }
  .flag-icon-cn.flag-icon-squared {
    background-image: url(/assets/flags/1x1/cn-cdf756a16521136b99d38c241ee5df601912f290c6bafd45f7a5f73f916ed8ed.svg); }

.flag-icon-co {
  background-image: url(/assets/flags/4x3/co-48603194a139754c8c7908f4d0c8181ca6729a221de897e8e5d26c9a3f211b1d.svg); }
  .flag-icon-co.flag-icon-squared {
    background-image: url(/assets/flags/1x1/co-0be1e3cef708f4f0f979a3c36bdcb4046a45693846dc9b9e5be2ea5f1c536667.svg); }

.flag-icon-cr {
  background-image: url(/assets/flags/4x3/cr-127b7f2e0f6ebe8c62885fd78f6a3dc167624e8e7b5fac79d4b8f3054b798a92.svg); }
  .flag-icon-cr.flag-icon-squared {
    background-image: url(/assets/flags/1x1/cr-80711b24354b0eedd247bbd77352db3bc9ad586c31d0a8727a4400368e56b2c4.svg); }

.flag-icon-cu {
  background-image: url(/assets/flags/4x3/cu-c72751747322de6b51b1dd462d04d0b533fa1e1c68f51b3c90d19ec683c2af3a.svg); }
  .flag-icon-cu.flag-icon-squared {
    background-image: url(/assets/flags/1x1/cu-ec5f9adfe3639f609ebf60d933d6500a0a9a5d77f9c8d5ec6a2f0d0ec2efd5a4.svg); }

.flag-icon-cv {
  background-image: url(/assets/flags/4x3/cv-029b4bd4d5c58ee3479b9a5fd3700923efa4881282225ac47690a3955472b7f1.svg); }
  .flag-icon-cv.flag-icon-squared {
    background-image: url(/assets/flags/1x1/cv-750969622373a36a416fc64118f1cb5407764d508f99b7db720f2ab474b93ebf.svg); }

.flag-icon-cw {
  background-image: url(/assets/flags/4x3/cw-f3c7dc011a64c13ebab21e47baaea3e0fea8d83f83fd8cc1845630a5f78ce087.svg); }
  .flag-icon-cw.flag-icon-squared {
    background-image: url(/assets/flags/1x1/cw-48a78eb5e8abd98b90ae7b373746bbd58851c76eb305ca0e7d8081df9180f248.svg); }

.flag-icon-cx {
  background-image: url(/assets/flags/4x3/cx-9033ee142f06aac6b700968943103e6dba8ce3171b17f7f7d54f26c35387c022.svg); }
  .flag-icon-cx.flag-icon-squared {
    background-image: url(/assets/flags/1x1/cx-f8356811ad67ac25c4a8c22bba7468615f8a0bcb09e4d8da09ad3806febc7d1b.svg); }

.flag-icon-cy {
  background-image: url(/assets/flags/4x3/cy-86c9999efa3399db043be615d16558ec0e40feafe9325fe1b6422ff0e089a60c.svg); }
  .flag-icon-cy.flag-icon-squared {
    background-image: url(/assets/flags/1x1/cy-67835af18d83749f0ac63e160db340d7a83b2e189e5e5b715b49c4b922fbb4ff.svg); }

.flag-icon-cz {
  background-image: url(/assets/flags/4x3/cz-e8f891c91f0889f53815958ed9c0d0472c03ecf58c5b8d3d87a864ede0e57ce0.svg); }
  .flag-icon-cz.flag-icon-squared {
    background-image: url(/assets/flags/1x1/cz-de11cacecaee1ed952a170fa43d318b01507ae9c8b0ab16b96f53848676326c7.svg); }

.flag-icon-de {
  background-image: url(/assets/flags/4x3/de-dcf5931120e541ce9e83e97c37cf95eeac9a152cd5e5ed9e0bf58116943d7250.svg); }
  .flag-icon-de.flag-icon-squared {
    background-image: url(/assets/flags/1x1/de-3479e75f866450220db28ef3ebb1ba0c345c059ed67de62c4176a09572da8f32.svg); }

.flag-icon-dj {
  background-image: url(/assets/flags/4x3/dj-e69892f8499ec8d780cdd20b051f936d5471eb92efd519b93be9d10f31382c77.svg); }
  .flag-icon-dj.flag-icon-squared {
    background-image: url(/assets/flags/1x1/dj-49721ea1deeb6e17f32ee2b3617d27961ad256505849243843f0fd5697332b18.svg); }

.flag-icon-dk {
  background-image: url(/assets/flags/4x3/dk-d50cdf2f88be249eb116da08c38cf119d44246ab4f5d62a94feefd37da149019.svg); }
  .flag-icon-dk.flag-icon-squared {
    background-image: url(/assets/flags/1x1/dk-24ccaa605d1f01e33802197d416654b64fac3f3d28ba90b5f6094c17dfe95344.svg); }

.flag-icon-dm {
  background-image: url(/assets/flags/4x3/dm-24faadaf18d5651beccc45688ef3421d2d083b5f2e92cab50c414e487a899095.svg); }
  .flag-icon-dm.flag-icon-squared {
    background-image: url(/assets/flags/1x1/dm-4f6888ba822d1592b9751c198ae6aafd1c14630be57d7e3b4372e3df8eb4f201.svg); }

.flag-icon-do {
  background-image: url(/assets/flags/4x3/do-43538ca280e65a4eb8b38992290cda974a7f631ae18f3e6864dc6f61397ab514.svg); }
  .flag-icon-do.flag-icon-squared {
    background-image: url(/assets/flags/1x1/do-1164fc19d2a5f2299e84d59627b780ff9dcba335acaa19a4acacd4781d916b78.svg); }

.flag-icon-dz {
  background-image: url(/assets/flags/4x3/dz-1b56086fc67c067d339838fc63e8f98faea641560b14839260546c895bdf4768.svg); }
  .flag-icon-dz.flag-icon-squared {
    background-image: url(/assets/flags/1x1/dz-b9527d30bdb9d67fba87351df4d4340fcc1c0dce368f0371359e5fcf7d445f3b.svg); }

.flag-icon-ec {
  background-image: url(/assets/flags/4x3/ec-d6df0532653f0a2a3ccdee80854ad75c4a4fe4a360fc5d5c73865253ebfc6b7f.svg); }
  .flag-icon-ec.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ec-a1a0b637c3d12b488cd180746ea10e42e659907c99c0b3d9eec65415494b5321.svg); }

.flag-icon-ee {
  background-image: url(/assets/flags/4x3/ee-2e52e01e34f175e856e120e57184ce61eccb5bff94633d3f2effcfed765f610b.svg); }
  .flag-icon-ee.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ee-1058c4a95d48696c8c99608a104e756d4ac5c431a7a1f60e179769416c443420.svg); }

.flag-icon-eg {
  background-image: url(/assets/flags/4x3/eg-2b5a88cf9ab7a59447e6a3e3cc12d350c573719d2a90810d50ed7695a1591d30.svg); }
  .flag-icon-eg.flag-icon-squared {
    background-image: url(/assets/flags/1x1/eg-ded55c3561ee2003ede5cc35af88959adb2398badc3c63dcc40e320d5bdb6c97.svg); }

.flag-icon-eh {
  background-image: url(/assets/flags/4x3/eh-250c6f7e1db483fb08f682d4917c06741614edb0a093aa80c0fe57f9bff03eba.svg); }
  .flag-icon-eh.flag-icon-squared {
    background-image: url(/assets/flags/1x1/eh-ae52d9c4377873ea1db474ef820d87e956753992097bbce93118c836f27c5598.svg); }

.flag-icon-er {
  background-image: url(/assets/flags/4x3/er-13b1d5072a285b78863f33088676ff459fc9049e403c4427d0bf149ab8a65eac.svg); }
  .flag-icon-er.flag-icon-squared {
    background-image: url(/assets/flags/1x1/er-516d763b5c3ddf087968e8e2ce10eb9f6a162e98b1c586ae90f7ebc2a9e877e6.svg); }

.flag-icon-es {
  background-image: url(/assets/flags/4x3/es-85290c103c538de1b8629c7a609319f01fc5a63a24655946e6003740d30f1534.svg); }
  .flag-icon-es.flag-icon-squared {
    background-image: url(/assets/flags/1x1/es-582d90241cc77269d8eeaa709ee9345c4e3935b7c20f9d3f04d707800c554896.svg); }

.flag-icon-et {
  background-image: url(/assets/flags/4x3/et-818e867ed44592f1c476d5abd8d9e5b60bb1e485f01076a633f5304fee7990d4.svg); }
  .flag-icon-et.flag-icon-squared {
    background-image: url(/assets/flags/1x1/et-7e2476975a4837f67af86aa6556d382dfd6769922a47ee9a49ef81a540c0f3b7.svg); }

.flag-icon-fi {
  background-image: url(/assets/flags/4x3/fi-262396615a680200f7709a9a998a1f346db6de48844bb0a76d8c41d0d8dfb466.svg); }
  .flag-icon-fi.flag-icon-squared {
    background-image: url(/assets/flags/1x1/fi-cdfc9cc3908d4f0d534fb34853fda8db5981195204ab6219bad3aa3cf90ecfa6.svg); }

.flag-icon-fj {
  background-image: url(/assets/flags/4x3/fj-fd0cc7fe3c27f0c999ce61d40b0143ca536d9d39875c524bb20afe5ccd55e40c.svg); }
  .flag-icon-fj.flag-icon-squared {
    background-image: url(/assets/flags/1x1/fj-930160f9247a73774021c9d019dfedc21ed09934db523690ca76f0a7e1a2d9d1.svg); }

.flag-icon-fk {
  background-image: url(/assets/flags/4x3/fk-5d5fdf224c1455f03c84d85f587463d8c511ff86dd5592f216a7470989175e42.svg); }
  .flag-icon-fk.flag-icon-squared {
    background-image: url(/assets/flags/1x1/fk-b614bdecd7ba844a5885a5acfb6b658bf649dd72d095844abdd4cf14860685c4.svg); }

.flag-icon-fm {
  background-image: url(/assets/flags/4x3/fm-6e665d3e05ae726fee0ced73ae84ce1d0596e80cb3dafce78d0c56dbc3018584.svg); }
  .flag-icon-fm.flag-icon-squared {
    background-image: url(/assets/flags/1x1/fm-c59efd1b95788946440a90610eac4f3222be5fbfb5748c076eabd0d4b6b8613e.svg); }

.flag-icon-fo {
  background-image: url(/assets/flags/4x3/fo-e2bcddb90777676679c7d680f18bcace56143f3a6bb0618ce59e4bf863b9e58e.svg); }
  .flag-icon-fo.flag-icon-squared {
    background-image: url(/assets/flags/1x1/fo-c9e403639ac04f28b0c86fc370ac5a106213f2ecf2ffc291cb9cd0ec2c000d8b.svg); }

.flag-icon-fr {
  background-image: url(/assets/flags/4x3/fr-14bbb212b68a54751cbf4354dc9ca16bf4fd671fba4bfd0e77fb855fc55ce884.svg); }
  .flag-icon-fr.flag-icon-squared {
    background-image: url(/assets/flags/1x1/fr-8b9d16b144204ecd34289bf1f0e06e57ad03a889a3813463de8e1a25005da5ec.svg); }

.flag-icon-ga {
  background-image: url(/assets/flags/4x3/ga-ae7daae3629bfa925e336323a198a018ae2007a1ea2ab9ba32d4b110e0abc7d4.svg); }
  .flag-icon-ga.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ga-1a903d6903087e08d16b56a27741cd1ea2c0685fbd325e9c4cef45d7fb00ccc3.svg); }

.flag-icon-gb {
  background-image: url(/assets/flags/4x3/gb-14e43b4df91315b33ed5f8ad46d9e84f43f84be11c65148bca043808832cab95.svg); }
  .flag-icon-gb.flag-icon-squared {
    background-image: url(/assets/flags/1x1/gb-81ec47f82b87b9398d17f1db841ea31695a24fa3e05c60fa4d59b21ae4d5bed2.svg); }

.flag-icon-gd {
  background-image: url(/assets/flags/4x3/gd-9a09ce17c1792c8860223020288f72ed168afebcafdc9fa8c46a7b7b1513c28a.svg); }
  .flag-icon-gd.flag-icon-squared {
    background-image: url(/assets/flags/1x1/gd-1678beac8104635c4360593bbba3e3e4b84467d8997ed538137b5a68740ba1b9.svg); }

.flag-icon-ge {
  background-image: url(/assets/flags/4x3/ge-0ed0a003c1e169ed60bdd889c8c841b0a7931aa3e809ca4d8e5da522385f35c9.svg); }
  .flag-icon-ge.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ge-d90251ffc959309587136e12331f57a2db6b284a892ba1fee03927383208a760.svg); }

.flag-icon-gf {
  background-image: url(/assets/flags/4x3/gf-d4b632e9a932eff7d4e32338d13724f58332eeb445cfa9351a052b77cd688d3d.svg); }
  .flag-icon-gf.flag-icon-squared {
    background-image: url(/assets/flags/1x1/gf-be726fca00f77b50eec1525f3889ebf6de7f8f46e28cb63f0cbbe026cdaf564b.svg); }

.flag-icon-gg {
  background-image: url(/assets/flags/4x3/gg-ea89231f0fa42d543d008b4f2fe8a94fc253a1808b8b8f6ab49f4bd9553c498e.svg); }
  .flag-icon-gg.flag-icon-squared {
    background-image: url(/assets/flags/1x1/gg-ebfebaf3102bbdfecee844b24f59ef79c78d3b573203d8058e363847b33531a0.svg); }

.flag-icon-gh {
  background-image: url(/assets/flags/4x3/gh-90efce1b22e18fbd77cb6f13e9f72ecea1338e3fd090b3817171eb3e24ba2516.svg); }
  .flag-icon-gh.flag-icon-squared {
    background-image: url(/assets/flags/1x1/gh-e9286720b91098135c65f7ad83d9a796efed89e27a052aac78af57e82d003859.svg); }

.flag-icon-gi {
  background-image: url(/assets/flags/4x3/gi-03f50f9d9b262fdf822d325c5325b374661821d6fae41e20de42bc761e56df52.svg); }
  .flag-icon-gi.flag-icon-squared {
    background-image: url(/assets/flags/1x1/gi-94700c7efeae285ce37ad883ca906c4ee65a99ede614b40eacb88d64873abb96.svg); }

.flag-icon-gl {
  background-image: url(/assets/flags/4x3/gl-3b1f2b9c26c35f87fcb4b417fff6ad3d2aada484d734382440c338d4c7dcbd00.svg); }
  .flag-icon-gl.flag-icon-squared {
    background-image: url(/assets/flags/1x1/gl-e468d30f57d5159f92aa487c8d16f9395671e64e4dcd74ec71b40bfa96259df4.svg); }

.flag-icon-gm {
  background-image: url(/assets/flags/4x3/gm-8a5011e0a99457e6dfeb53b55a90875f2d9a802fe8fec13f570de6f2a27b8639.svg); }
  .flag-icon-gm.flag-icon-squared {
    background-image: url(/assets/flags/1x1/gm-4200b76a4dbfbd9de052de9de778ae19d659a1d75d669757885580ef286497ec.svg); }

.flag-icon-gn {
  background-image: url(/assets/flags/4x3/gn-e990df30eba87d7036bbf6a47b64d0a6360d82fba6b5bba812e148648e56ea47.svg); }
  .flag-icon-gn.flag-icon-squared {
    background-image: url(/assets/flags/1x1/gn-4f9823b9e177c0604f8cbc1b2412ac9c39b4ffc3eda66311e787a6d9a640ebf7.svg); }

.flag-icon-gp {
  background-image: url(/assets/flags/4x3/gp-024ddd0e63a5e22c9d9f73a84b8306f2176083081825a065d99646ee123dc242.svg); }
  .flag-icon-gp.flag-icon-squared {
    background-image: url(/assets/flags/1x1/gp-00fab4fc916f5f267afd8e100a52098ba4aa6761cba1ecde56d506e85bd12025.svg); }

.flag-icon-gq {
  background-image: url(/assets/flags/4x3/gq-4e5c5e90e99f9dd14a43b597b6d370c8691ee73e8c75a8184e4a8390ff3e2bb0.svg); }
  .flag-icon-gq.flag-icon-squared {
    background-image: url(/assets/flags/1x1/gq-0e6d55dbcfe1e727dbe9c00ac2988407c196e5c0a20a0f71f752788649ec83c0.svg); }

.flag-icon-gr {
  background-image: url(/assets/flags/4x3/gr-db2138fa7bb0c95282ec0ecae3b5bd6ff2b3a06e2f27c1434b5b2285d422a6e0.svg); }
  .flag-icon-gr.flag-icon-squared {
    background-image: url(/assets/flags/1x1/gr-40c78a60595b2a3f485040d93505c0128de81b60f44e18e35ce0ca9d5a95f184.svg); }

.flag-icon-gs {
  background-image: url(/assets/flags/4x3/gs-bf3e078414a68dcd77d82694f5411f67c1eb5a1503f427c8dbcace16238e359a.svg); }
  .flag-icon-gs.flag-icon-squared {
    background-image: url(/assets/flags/1x1/gs-0130b60737c3873dd1868c70f7c3018fc276d152a398c2ce727edddb46f32513.svg); }

.flag-icon-gt {
  background-image: url(/assets/flags/4x3/gt-1b63340464e9dd3363a631f74db87defe40bfc520ba41002bf094f154b579934.svg); }
  .flag-icon-gt.flag-icon-squared {
    background-image: url(/assets/flags/1x1/gt-7cd5c99c47d16d4fc914979ffd7b95d87247d4c6652e07562a71a323f7145d58.svg); }

.flag-icon-gu {
  background-image: url(/assets/flags/4x3/gu-4018f5c92a9dd473d226f09136e956de2570729e80d704e8cc4e8f3ca2bdc871.svg); }
  .flag-icon-gu.flag-icon-squared {
    background-image: url(/assets/flags/1x1/gu-bb95d4d48c1e20be2b15258d9b895f38e9df1c54b65d4ed4aab1b323576f3899.svg); }

.flag-icon-gw {
  background-image: url(/assets/flags/4x3/gw-0ea266c02a02d578e96bb5335244c83c2815f28ebd34ff7ab8408b16416dd88e.svg); }
  .flag-icon-gw.flag-icon-squared {
    background-image: url(/assets/flags/1x1/gw-bd83c376f118c350751de000e2a48f97772438555dc1a70a7beb15cc4caee5c7.svg); }

.flag-icon-gy {
  background-image: url(/assets/flags/4x3/gy-441a978efab1565daf964e822a75b8658f5879af41371b0b52e468e00eb6b095.svg); }
  .flag-icon-gy.flag-icon-squared {
    background-image: url(/assets/flags/1x1/gy-d84ae82776b7142e4d9d51b1bdce601560275833b8d249e8e3d74bd3752b5aaa.svg); }

.flag-icon-hk {
  background-image: url(/assets/flags/4x3/hk-e5350bb4c4d63e98d802b3190247b2ce459d2695756ec62d64a995c43c4edd1e.svg); }
  .flag-icon-hk.flag-icon-squared {
    background-image: url(/assets/flags/1x1/hk-082835aaf3d1d61e1dd0e3b2b86231ef11b20150f98898af2e352b87c910f7da.svg); }

.flag-icon-hm {
  background-image: url(/assets/flags/4x3/hm-1048d79fd546482c290e1a0e4c2f9ce053aa3821f17bf12487a4f3e0ac7477d4.svg); }
  .flag-icon-hm.flag-icon-squared {
    background-image: url(/assets/flags/1x1/hm-af2df9fe67b48ead95d7ebe32d0a28a16c0d2fb03af909ca99e3b7d3cbe1a4a3.svg); }

.flag-icon-hn {
  background-image: url(/assets/flags/4x3/hn-d0e2cededb00e5dc79c75ab95e8f93d1851844c0924e49b59a8b78f6b35a7cfb.svg); }
  .flag-icon-hn.flag-icon-squared {
    background-image: url(/assets/flags/1x1/hn-45eebaaac195fd50e374926f9876eb5456a8cbcc2fb30e6a19229c409c51520b.svg); }

.flag-icon-hr {
  background-image: url(/assets/flags/4x3/hr-e10c8456ac0fc1946d1cb1f15e73484d03e4442368d78b230b050cadb7730b04.svg); }
  .flag-icon-hr.flag-icon-squared {
    background-image: url(/assets/flags/1x1/hr-8a4ca8ec8de4fc911306e198e66086fbbbf33891c8fa3e860af482f8ac2ddb44.svg); }

.flag-icon-ht {
  background-image: url(/assets/flags/4x3/ht-f862a9bb3b96630fc26a6fd2200b77c985b90a87ff9c52c42c3d7f42a0198b04.svg); }
  .flag-icon-ht.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ht-1a12f16c45567e7b4fc2737b630345f7c7d0ac79ff31c41bc23920d0effd9adb.svg); }

.flag-icon-hu {
  background-image: url(/assets/flags/4x3/hu-a555e216b05645110da533dd2a5225021f70d7438e456877e77dc4522c261e41.svg); }
  .flag-icon-hu.flag-icon-squared {
    background-image: url(/assets/flags/1x1/hu-70b6438afdbc91f98b5ebfd0cafa40b6d5b0266f8d0df56cf3bcc7f777bd54c4.svg); }

.flag-icon-id {
  background-image: url(/assets/flags/4x3/id-3b48b1012b8beab850a28e27d785e92afee830444749c814a32419b8fce5dec1.svg); }
  .flag-icon-id.flag-icon-squared {
    background-image: url(/assets/flags/1x1/id-7d8348730949413fc7ff2587be342ff90c9ee1734d2ccdbca637a55839a894af.svg); }

.flag-icon-ie {
  background-image: url(/assets/flags/4x3/ie-8758528ee7852e7ded3f03fb7bc96ef9c502b1321c3011e9aade28702c68e235.svg); }
  .flag-icon-ie.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ie-1cf70c38a49b5ec8c5ec6aace1dd0f1e1ac1663b8a5339ca3a98dc7bc4978702.svg); }

.flag-icon-il {
  background-image: url(/assets/flags/4x3/il-028f767bebb716e7a2e7198bfd03e698a7f19cad00385b30014a27680c101710.svg); }
  .flag-icon-il.flag-icon-squared {
    background-image: url(/assets/flags/1x1/il-395ee62ffbff4ab2ae456281a90f441e1148c0143a237f8a0e540e31d55518d5.svg); }

.flag-icon-im {
  background-image: url(/assets/flags/4x3/im-7dbb2dd66eda428c32edbbf2275f709df06cb1270dd69c65e214874966c30d69.svg); }
  .flag-icon-im.flag-icon-squared {
    background-image: url(/assets/flags/1x1/im-ed578fcc5e398ffdbc7a62d31b568a76b91e14ffa0afb794f3587aee8d248d67.svg); }

.flag-icon-in {
  background-image: url(/assets/flags/4x3/in-63b359940156312c6ed31c2b61f005c2bc386823401773aac9aaa328d994f7bc.svg); }
  .flag-icon-in.flag-icon-squared {
    background-image: url(/assets/flags/1x1/in-3fd1bedfc697bfe677a9774d7a6f51d04115cce400b4d7a892ecf1f69526790f.svg); }

.flag-icon-io {
  background-image: url(/assets/flags/4x3/io-67be58cb5bf7afe6099ec339235ec7ba0da153a50c651e28d4c32b2e6aa64cbc.svg); }
  .flag-icon-io.flag-icon-squared {
    background-image: url(/assets/flags/1x1/io-aa0702e0280d98693b3fb6350b45a7903ca25782082d3f1cee75f33f1a4d739d.svg); }

.flag-icon-iq {
  background-image: url(/assets/flags/4x3/iq-51acd0adc48bf1cb7256aba82069573f84db0baaf49b968f7f06afe140555f7a.svg); }
  .flag-icon-iq.flag-icon-squared {
    background-image: url(/assets/flags/1x1/iq-0ec8238d4e53fd7ec06ceda47e1378ee68042666f1f7f1a91753595a2167366e.svg); }

.flag-icon-ir {
  background-image: url(/assets/flags/4x3/ir-0d6f2bd5403ac2c3f7dfd49e3c5124817575c00b5167ef4c03cbfb63cfc10a26.svg); }
  .flag-icon-ir.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ir-123d34118d6933f90a6b1191e2605c8344850c39f72644b9d91e15bfa640b623.svg); }

.flag-icon-is {
  background-image: url(/assets/flags/4x3/is-21543ffd547f651c7628bfe97d3c3626ea5e6999848de64efddee4656c27177b.svg); }
  .flag-icon-is.flag-icon-squared {
    background-image: url(/assets/flags/1x1/is-d73fc857d6844a1cdab62f81ba30a1ea895557d8d8fa4eecf7fa4b9127bc0123.svg); }

.flag-icon-it {
  background-image: url(/assets/flags/4x3/it-8b46e4a9676eb92cd507acef1d7c62115e6acc4b85e58a0806a0721ac34735f6.svg); }
  .flag-icon-it.flag-icon-squared {
    background-image: url(/assets/flags/1x1/it-2767e5c7250ec17539972ef710a8cebde73971bf0b9b3186d5baffb02f66974e.svg); }

.flag-icon-je {
  background-image: url(/assets/flags/4x3/je-35111082a6e24dccbd512743a37ebec13094ffbed5fef2b0793037433821a7ce.svg); }
  .flag-icon-je.flag-icon-squared {
    background-image: url(/assets/flags/1x1/je-87c6120456d517be72bdf28fd125176a743006be1cbe47ff5f59d54d1bf1253e.svg); }

.flag-icon-jm {
  background-image: url(/assets/flags/4x3/jm-eb05254eb1abb6d7fcd764284581224857c980d7bad9d7e9afff3dfff49d1e73.svg); }
  .flag-icon-jm.flag-icon-squared {
    background-image: url(/assets/flags/1x1/jm-0af380d25aef6a7de4c545a85ea3f76d3b08e56c000980c08a681ada232ba49d.svg); }

.flag-icon-jo {
  background-image: url(/assets/flags/4x3/jo-193203037e596abc063a9c30d0dd3aaa9c908557a1b57bcbcb94e1a1e8bb2402.svg); }
  .flag-icon-jo.flag-icon-squared {
    background-image: url(/assets/flags/1x1/jo-2b9c3f54d7e98c848cc0bd764bcd5ac2320d4f13aee8a84a207e7d0490c03516.svg); }

.flag-icon-jp {
  background-image: url(/assets/flags/4x3/jp-169d02f898d54cacbecd7b0197d32045a46c4424c10a67e78bbf488f7b44541e.svg); }
  .flag-icon-jp.flag-icon-squared {
    background-image: url(/assets/flags/1x1/jp-20835e83e8d43872df1ef8a2b3a26379b5f6bcff854dab3c7a24dcad4a42e02d.svg); }

.flag-icon-ke {
  background-image: url(/assets/flags/4x3/ke-58146180a02774a36ff2e4caf23b75c441a92dc69ffe3b9d4e9ded31e16748b5.svg); }
  .flag-icon-ke.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ke-b3b9722930c4ecc82ed67d7c47eb751eefba3a59b24b68927c45d43a06b450a8.svg); }

.flag-icon-kg {
  background-image: url(/assets/flags/4x3/kg-7c23eb9471af5dc5ee4391e4ec08fec7889c2d83f2712ce59310a0eb81d663f0.svg); }
  .flag-icon-kg.flag-icon-squared {
    background-image: url(/assets/flags/1x1/kg-83e2a04c6199e69a1604a12610591fda15c8cf60e9fe7f682916815c5f1840bf.svg); }

.flag-icon-kh {
  background-image: url(/assets/flags/4x3/kh-4f121b97388966312c5691244a72214a3306f87ec517c658adcaf39a131a1d8c.svg); }
  .flag-icon-kh.flag-icon-squared {
    background-image: url(/assets/flags/1x1/kh-9b9ebdb74308e4975fef2e9737cad7fe44538bf97f5c1b7b6239fc2f065d4cea.svg); }

.flag-icon-ki {
  background-image: url(/assets/flags/4x3/ki-0e1a57754e3271771a154b525dfb57e20d584083b47b1ac2708b843abf11948a.svg); }
  .flag-icon-ki.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ki-64df628a3c2bacf16209af95403dd7ae5402f705b2776da20ea741646e047b12.svg); }

.flag-icon-km {
  background-image: url(/assets/flags/4x3/km-2301fd16e41810016f9a58d75b8a361ffe9885ecfc89a0b3e9108bda7f5501d9.svg); }
  .flag-icon-km.flag-icon-squared {
    background-image: url(/assets/flags/1x1/km-6f9716ac74c8ef80557e682ae6d951a6ca6993eabd049f8de81a742f77a84452.svg); }

.flag-icon-kn {
  background-image: url(/assets/flags/4x3/kn-8e866a33f9952f8b29e45e8576133345446925907a2c4bcd429a34ae377bc74e.svg); }
  .flag-icon-kn.flag-icon-squared {
    background-image: url(/assets/flags/1x1/kn-46b0fcf2a59d3f923fc5ae6c914d9ee2d886fb4ee6f9c1108133244f4093d481.svg); }

.flag-icon-kp {
  background-image: url(/assets/flags/4x3/kp-ab0a3c4310474b324bbb39f77579ac3b421c531397d31e8f38de35a681d79bc9.svg); }
  .flag-icon-kp.flag-icon-squared {
    background-image: url(/assets/flags/1x1/kp-3a2ce32e4b76931fd6383f9833a4764528cc89c92f23672cc8eaff26c7a31ee1.svg); }

.flag-icon-kr {
  background-image: url(/assets/flags/4x3/kr-854d1521a9cb2b22c90f96d5d62277a9e1382818eefdc294d481c397c92f97c0.svg); }
  .flag-icon-kr.flag-icon-squared {
    background-image: url(/assets/flags/1x1/kr-343a5d08f9d0ff8c4268c77111cff9d2296c3f875b8d776c95dea1ae246d9bda.svg); }

.flag-icon-kw {
  background-image: url(/assets/flags/4x3/kw-75be6f04a24e7ddaaec57c95420ece390603961fa238245b776386890ab5627b.svg); }
  .flag-icon-kw.flag-icon-squared {
    background-image: url(/assets/flags/1x1/kw-cdbf39e8dc62ffc15b7bc3c373151070377db56c0508dadf80bdd3c971d8a094.svg); }

.flag-icon-ky {
  background-image: url(/assets/flags/4x3/ky-f75f33396887f6234e7ee4fd483e57c8e35ac52d504a4a6e12fad25d855bf061.svg); }
  .flag-icon-ky.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ky-8ed8729ad8553aa468c0d9ea196f38048770b15a1bb632fb7c3bd56fbfd5b643.svg); }

.flag-icon-kz {
  background-image: url(/assets/flags/4x3/kz-51f42e580c605b6580aa4288d88d9c88bc6fd86af2388b0e4313bce969628743.svg); }
  .flag-icon-kz.flag-icon-squared {
    background-image: url(/assets/flags/1x1/kz-38ef143eed3d03cebe2e4924d520a0d90d5e59e97a39b13cb3085415267af6f3.svg); }

.flag-icon-la {
  background-image: url(/assets/flags/4x3/la-0a762fcc7ef73f1fedb4765b718e2e96c819d4b26d5375acfa48d245fb97fcec.svg); }
  .flag-icon-la.flag-icon-squared {
    background-image: url(/assets/flags/1x1/la-59d7d7dd1443e9bc557631254afa4333d1b83db314c9eb8bc170ce26f34f5dd8.svg); }

.flag-icon-lb {
  background-image: url(/assets/flags/4x3/lb-26ea2add2ac68a8040b027b510f29080d8407b961243c77b33b46c8957768b66.svg); }
  .flag-icon-lb.flag-icon-squared {
    background-image: url(/assets/flags/1x1/lb-eb8049cb746a3913ac814f4d6e0e850d0e4b9a60b78dec5e9acd95b299bf95e4.svg); }

.flag-icon-lc {
  background-image: url(/assets/flags/4x3/lc-444f9f77d0b09bd84fe2a5fd7194eae81341d8b7b4823070fc3e74cab481a122.svg); }
  .flag-icon-lc.flag-icon-squared {
    background-image: url(/assets/flags/1x1/lc-13a572e5fcbada8bf66eb77413f04f862b0cf95d4b85c5292b3d6348ec4d8c99.svg); }

.flag-icon-li {
  background-image: url(/assets/flags/4x3/li-b2d0ccbceb7e6129a6529c98721d92fcee379ed6c225a18e1eff3c6fa092eec7.svg); }
  .flag-icon-li.flag-icon-squared {
    background-image: url(/assets/flags/1x1/li-97814472256460b19df380ad90e5380202001a8a7ad6b4140cd2a0b92db909ac.svg); }

.flag-icon-lk {
  background-image: url(/assets/flags/4x3/lk-d910bd0d9ddb013c5668824d6600a842496c0a17c74f772a801f833b9eb044f8.svg); }
  .flag-icon-lk.flag-icon-squared {
    background-image: url(/assets/flags/1x1/lk-c7fb3c2b64782519d94f0a9fd21c057e5e32b856c428b68abb11667191235270.svg); }

.flag-icon-lr {
  background-image: url(/assets/flags/4x3/lr-42e8d3bdacafc05835fcd52026cb3e1717573965ce9d4f49635dbb390021a4b4.svg); }
  .flag-icon-lr.flag-icon-squared {
    background-image: url(/assets/flags/1x1/lr-169945e579afdf35dd158694a1679380886f8541278cbd225c7e750add25e60e.svg); }

.flag-icon-ls {
  background-image: url(/assets/flags/4x3/ls-a4db42569c4760bffd695cbdb030c90bc203f40f75fb357cbdbef961d29cf5dd.svg); }
  .flag-icon-ls.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ls-1dd02208fc24c668e18430bb0500fa14c995f64cab8cde080b4256bd1b42b23f.svg); }

.flag-icon-lt {
  background-image: url(/assets/flags/4x3/lt-a57e003a5cbe538a4bfc2d29fd3523a87948bc8e29f731096dff9095096178c9.svg); }
  .flag-icon-lt.flag-icon-squared {
    background-image: url(/assets/flags/1x1/lt-e386ebe0482bdf999b151c3ae8c5e5e40a58037eab35b29f37682aa849edd3f0.svg); }

.flag-icon-lu {
  background-image: url(/assets/flags/4x3/lu-2746295f8b0a1540d43e0c2548d4ec1341fafcffe48b919fb135a6c82535b657.svg); }
  .flag-icon-lu.flag-icon-squared {
    background-image: url(/assets/flags/1x1/lu-9695b187733f52bae07c65e78aae8956e25360ad773c1f4703855997571a764d.svg); }

.flag-icon-lv {
  background-image: url(/assets/flags/4x3/lv-b51d475acf37be9accc82ddf5f60773861cf58b0e9b599460852589da88501ef.svg); }
  .flag-icon-lv.flag-icon-squared {
    background-image: url(/assets/flags/1x1/lv-dbf5d3fb294b518bc6373c4fc22b028fc462647fbd5032cf57513556896577bc.svg); }

.flag-icon-ly {
  background-image: url(/assets/flags/4x3/ly-7409a315d2f9aab4676558d7e97f4316ea87fc7afd93a493def4adf0b5773ca6.svg); }
  .flag-icon-ly.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ly-6457e38177d82f6c52e3f3c38328f1ac66bb5a5c7a9026229d4e3aafe3b592af.svg); }

.flag-icon-ma {
  background-image: url(/assets/flags/4x3/ma-0628f236b2067d66c841c1190a3e8e3e9c37fbf2f3521fdb5ecba3eda75e805e.svg); }
  .flag-icon-ma.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ma-5c96636ed7496b25e989cb74f202e377ec4c59b056b9d0c425ded77199b0d659.svg); }

.flag-icon-mc {
  background-image: url(/assets/flags/4x3/mc-10a533ce437c40973f8684439f7e24da1ea624c5e5535fa4738d62ede0650242.svg); }
  .flag-icon-mc.flag-icon-squared {
    background-image: url(/assets/flags/1x1/mc-6a9a8fe216f75ecdb8bddf6e6c816c1c9771ebffe3c09e83975a434ec1fb4950.svg); }

.flag-icon-md {
  background-image: url(/assets/flags/4x3/md-6641e05826ea580544c1890fe3698eb2e8e3af463518fc37eea7c41eb8cbb6c0.svg); }
  .flag-icon-md.flag-icon-squared {
    background-image: url(/assets/flags/1x1/md-e51dd640155b523a207eb1dc9dc909c38d9e88de04729e250e0cccd1e9d1b0b7.svg); }

.flag-icon-me {
  background-image: url(/assets/flags/4x3/me-c841acf1209c546dd77c18b718141ce4e21dba95a120cc3092988edaaf08f432.svg); }
  .flag-icon-me.flag-icon-squared {
    background-image: url(/assets/flags/1x1/me-c290031be15a14ebd1fd278774142e29f7dfe3d0fb3aba79c0d6932cb0feeb4b.svg); }

.flag-icon-mf {
  background-image: url(/assets/flags/4x3/mf-41a6043e2495b346fd700b17352150a8e43ca342a515fcb5159c39f809663ec6.svg); }
  .flag-icon-mf.flag-icon-squared {
    background-image: url(/assets/flags/1x1/mf-a3f24457b393082243eb00ea514057c09b1cf4985f6fa17d7902500fbb716317.svg); }

.flag-icon-mg {
  background-image: url(/assets/flags/4x3/mg-1baa2b12c3e79d592538d5d8e4d5a2c0e1373d3871c9d829f57b212daaf42129.svg); }
  .flag-icon-mg.flag-icon-squared {
    background-image: url(/assets/flags/1x1/mg-7e78efcc81f02f0616a11aec87bfd8dfaed1a328496301902f53375eee8f72ee.svg); }

.flag-icon-mh {
  background-image: url(/assets/flags/4x3/mh-1236a730a9819f0b58ac8cd642d17482b3945a894c63663b4accf10ac8ce5ecc.svg); }
  .flag-icon-mh.flag-icon-squared {
    background-image: url(/assets/flags/1x1/mh-3ecae469e3987c59cc4b19833eb8ccfe49a9477f70aa2aa2be5e9a4a131a48d0.svg); }

.flag-icon-mk {
  background-image: url(/assets/flags/4x3/mk-2a7bfeeba74701ceba752795d02eac7a97a6139471e5bdd529f2a858f4fd1d0e.svg); }
  .flag-icon-mk.flag-icon-squared {
    background-image: url(/assets/flags/1x1/mk-fe5c84d0e9bd4b7ceeed81f9564a970d7b5b39659e42f819c50950e191443720.svg); }

.flag-icon-ml {
  background-image: url(/assets/flags/4x3/ml-086660fe4272a22e220c94854fe4f80dd61afadd5c0c81cc075aea91bbcaa691.svg); }
  .flag-icon-ml.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ml-9ef37a44932a3af38990145042c85352b1c5c4e791221d1fd91b5a9f7a412efb.svg); }

.flag-icon-mm {
  background-image: url(/assets/flags/4x3/mm-60ae7680502d9af8796fe3b3d57bbf6105a406e2e66840e9aa1f6e2470466058.svg); }
  .flag-icon-mm.flag-icon-squared {
    background-image: url(/assets/flags/1x1/mm-ea5bef04548342d984d8c8707333a31203a5abf015db093553f26c3a9febb251.svg); }

.flag-icon-mn {
  background-image: url(/assets/flags/4x3/mn-1309f63a0b6bfc594a1721a8af76381a1389fda64d840b256d353eb1341cb794.svg); }
  .flag-icon-mn.flag-icon-squared {
    background-image: url(/assets/flags/1x1/mn-86ecb7d9fcefe13783f165d44a93c9c2b1add55481bc69a70f9bd3652c27ae74.svg); }

.flag-icon-mo {
  background-image: url(/assets/flags/4x3/mo-6c69662b2581d90527965dd2c444784ab366f0080c93f2014ca37f2f7541b898.svg); }
  .flag-icon-mo.flag-icon-squared {
    background-image: url(/assets/flags/1x1/mo-ef906f7a8fdaccb7532359de1e5ce664ec0342975052b55a2e389f1b6338cba8.svg); }

.flag-icon-mp {
  background-image: url(/assets/flags/4x3/mp-dd2fa1cf9846007f88c88143047430f3f666099875407cf36648b271b6e1400a.svg); }
  .flag-icon-mp.flag-icon-squared {
    background-image: url(/assets/flags/1x1/mp-cd1d342862684bdb7caacb093e37d7e3b094cf49cfa5aa579d6b8201ffb4dd93.svg); }

.flag-icon-mq {
  background-image: url(/assets/flags/4x3/mq-be00a7c77b6aec1f86cd16bcafc7fe27b7b8c967b03632f8230cd83794833ba8.svg); }
  .flag-icon-mq.flag-icon-squared {
    background-image: url(/assets/flags/1x1/mq-bfaccc4a61b2d7067b44d54a75ce5bb5757292bdabff5e104b547aa2435a2e5d.svg); }

.flag-icon-mr {
  background-image: url(/assets/flags/4x3/mr-2293d4180eff3670e1c484d52a206efb562e8d96b9cb8c5a43aa65e1e2b1289c.svg); }
  .flag-icon-mr.flag-icon-squared {
    background-image: url(/assets/flags/1x1/mr-a3eb1a496e2c5dc86245856e18a91d71046b44d74d88274014e2d4fab41c3453.svg); }

.flag-icon-ms {
  background-image: url(/assets/flags/4x3/ms-913b24dbffa69bc3a57e997a806cdca5026cc5f87f83eefeef36a1aa8f5c2789.svg); }
  .flag-icon-ms.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ms-8be40421854193032b83670c6a91aa1f5c818578eafb85ee90dce959eb54c6db.svg); }

.flag-icon-mt {
  background-image: url(/assets/flags/4x3/mt-517b4f67a94fff5be6346cae3731f5a17290b4c56732129967c15f482199365e.svg); }
  .flag-icon-mt.flag-icon-squared {
    background-image: url(/assets/flags/1x1/mt-371c5673e14380308182c7ae324f54792652bf4d0cf64de30b1d1fefea8c9b5d.svg); }

.flag-icon-mu {
  background-image: url(/assets/flags/4x3/mu-0a0d71ecace32a2948ac3eacc94927fb0ba7306236bf2a18ab5ae85bb2351664.svg); }
  .flag-icon-mu.flag-icon-squared {
    background-image: url(/assets/flags/1x1/mu-e0d4ee6c8f915eb54307ff51f57734c0bffa843060d953b9bd27f365b4a11b36.svg); }

.flag-icon-mv {
  background-image: url(/assets/flags/4x3/mv-421f31e8be8d80695f9f4811435214e8a8ac8729e145f9d491b888d91d0ca999.svg); }
  .flag-icon-mv.flag-icon-squared {
    background-image: url(/assets/flags/1x1/mv-c0056befcc1b506b4b498bf37dfa30642839a1beb6373f682e1214850b51cf6d.svg); }

.flag-icon-mw {
  background-image: url(/assets/flags/4x3/mw-644750e23780e66258d7b56777be8ef47ce3ca2d9d5735eac5abbb22fae33056.svg); }
  .flag-icon-mw.flag-icon-squared {
    background-image: url(/assets/flags/1x1/mw-70a282f17250f7fb49f8fbeb357dc492b742dd2a9c58e13281f0e900a8c63e94.svg); }

.flag-icon-mx {
  background-image: url(/assets/flags/4x3/mx-246482013102c12a6f83dcdfe0fa40c350560ae64505f9b4d3113ea5356e2f71.svg); }
  .flag-icon-mx.flag-icon-squared {
    background-image: url(/assets/flags/1x1/mx-27887b671ab9de501b6693ab60380e809962ac12222ddb580c9426e79e1360e3.svg); }

.flag-icon-my {
  background-image: url(/assets/flags/4x3/my-00a98291486af1c01c11fe46a203dd07bee31d6b5ffb5f60d04ad337a3499775.svg); }
  .flag-icon-my.flag-icon-squared {
    background-image: url(/assets/flags/1x1/my-a60a1ae968ed1ebbb60626370bd0494112b562a358c1381e6bb162268a110d8f.svg); }

.flag-icon-mz {
  background-image: url(/assets/flags/4x3/mz-8281fb68c18d27bf1588de7684e67f14aeabbf8e66117eb4e640faac9762dbb4.svg); }
  .flag-icon-mz.flag-icon-squared {
    background-image: url(/assets/flags/1x1/mz-dc805944726edfe3a8900cecd82ef15037381b81b6fab0d96d2cf93ba0d7a3ec.svg); }

.flag-icon-na {
  background-image: url(/assets/flags/4x3/na-d798d2db5bccea439f545e5e6dfa5aad6a166966cb5e223f7f2aa4d4dc73abd7.svg); }
  .flag-icon-na.flag-icon-squared {
    background-image: url(/assets/flags/1x1/na-0fceb3e900c021df14c00cab058c84cd834cb2f494a1db2fa58728a7f9445762.svg); }

.flag-icon-nc {
  background-image: url(/assets/flags/4x3/nc-2861e50f3a0a1b1c368d913df4f4092c65bb3faa2d01e4d084fa33ed041e537a.svg); }
  .flag-icon-nc.flag-icon-squared {
    background-image: url(/assets/flags/1x1/nc-1d65d86f9caaec75cc886c8abca3cc39b8de23c48e67b55936be3649ae67d716.svg); }

.flag-icon-ne {
  background-image: url(/assets/flags/4x3/ne-90b12ff4abee66e42d27b6c55dd602af3cc249f3492c8a449ec84a35a74ee6ed.svg); }
  .flag-icon-ne.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ne-ecd9bd0f027c05147c336ef396ffce7c16cf011f051860ae082ea99be34554e0.svg); }

.flag-icon-nf {
  background-image: url(/assets/flags/4x3/nf-3323e2cb59cb8f9282e45155b6830e4c06876bc0c24ee28e5dd4dcff28d2dc70.svg); }
  .flag-icon-nf.flag-icon-squared {
    background-image: url(/assets/flags/1x1/nf-3da2a0db99d85998154510ac50674728e4768079a57443529b18b1ed87e5c077.svg); }

.flag-icon-ng {
  background-image: url(/assets/flags/4x3/ng-387e036e728aa4c36d93fad3c90e76e3beab727783ec11da7fbce30ff52c805e.svg); }
  .flag-icon-ng.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ng-c4c24f43d15d5690390ea6d5a4b41911aa7cf0807167d69e95748c4439211dcb.svg); }

.flag-icon-ni {
  background-image: url(/assets/flags/4x3/ni-b83cccf0a65d0abf0398b905936ca6b6d5b1b64db8a34223225e3e4eb4f0311d.svg); }
  .flag-icon-ni.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ni-35731438cffa30b56cc403c5e9a59e85e661566a0d72c5310865aaf282731e0f.svg); }

.flag-icon-nl {
  background-image: url(/assets/flags/4x3/nl-a71cd17ec0d083d39373108c1f5e994e71491e1f7ac34119e60c859142a2d34d.svg); }
  .flag-icon-nl.flag-icon-squared {
    background-image: url(/assets/flags/1x1/nl-6bfba1aa0f31f33e126e51832eddba06a92106d569f3e01dc4989a3425f45eac.svg); }

.flag-icon-no {
  background-image: url(/assets/flags/4x3/no-d4ae9765d2dd03faef1007008bf1ccde064e36c765faef79a270e7e8fa97c23a.svg); }
  .flag-icon-no.flag-icon-squared {
    background-image: url(/assets/flags/1x1/no-7b3a522b5101f7bcc5c9ac05adbfbfa3dacde4fc4420d2997b1ab38af7e50dbc.svg); }

.flag-icon-np {
  background-image: url(/assets/flags/4x3/np-043dff0f7f1cd254f2c2d82367557e5f4a15579af81242e2979523700adaeaf1.svg); }
  .flag-icon-np.flag-icon-squared {
    background-image: url(/assets/flags/1x1/np-976aa23f62798e1c0974a78649ff295334fc0d39f63eb19e990d2a13efe9fbe2.svg); }

.flag-icon-nr {
  background-image: url(/assets/flags/4x3/nr-f977239dc4f2dbb4185bcb741dc0aae4b46dd2d647444150f317e8dfb3062fd3.svg); }
  .flag-icon-nr.flag-icon-squared {
    background-image: url(/assets/flags/1x1/nr-1899ab289aa424dfa1bb1a787a5dae3d9081b212433441fe9a7c95c1c377fc01.svg); }

.flag-icon-nu {
  background-image: url(/assets/flags/4x3/nu-84b56f2711a6b958b9072dff3912f225c034d246341cc29c4eba6c34c70fe6f0.svg); }
  .flag-icon-nu.flag-icon-squared {
    background-image: url(/assets/flags/1x1/nu-60cdb57b27737dddc21980f6630e7476471ce8c1bc34b3a2632819bef23a26a5.svg); }

.flag-icon-nz {
  background-image: url(/assets/flags/4x3/nz-9cca5c871f70cdd784a33836d5a07ada7f6eaa720811c70dc2306a2a5056648d.svg); }
  .flag-icon-nz.flag-icon-squared {
    background-image: url(/assets/flags/1x1/nz-e5c8b6660d172e25e80f1d9530fb3e8b05fba1c4c02b95679fbcd5a0c50169f9.svg); }

.flag-icon-om {
  background-image: url(/assets/flags/4x3/om-fbef9222761223ced04e2946ec71432c761618ad58b8a3a5af5627a1d75b48e9.svg); }
  .flag-icon-om.flag-icon-squared {
    background-image: url(/assets/flags/1x1/om-07148a6924f8ce843e33be4f3d9d5dd40040da366e667925985e7b247073d08e.svg); }

.flag-icon-pa {
  background-image: url(/assets/flags/4x3/pa-50535df4995256b70ce0a7971ba95922046d445c06a567fd951d7f5a79cbe547.svg); }
  .flag-icon-pa.flag-icon-squared {
    background-image: url(/assets/flags/1x1/pa-e4d955c65827104b4f898beb392af5ffed5f62a09035f42801512b5b3d7767d1.svg); }

.flag-icon-pe {
  background-image: url(/assets/flags/4x3/pe-b518a86545125ff3c3fde029c2992233df876b663d8ec723bd4d67f90f72cb62.svg); }
  .flag-icon-pe.flag-icon-squared {
    background-image: url(/assets/flags/1x1/pe-8e395c37a87d3ea212ceaf0768869f2ae38ad507761ef6b10b2077f01274d6b0.svg); }

.flag-icon-pf {
  background-image: url(/assets/flags/4x3/pf-d1537625ade03a7fae7a5bdcfc5fe9f6449977613a38ddd258c8572f3630185b.svg); }
  .flag-icon-pf.flag-icon-squared {
    background-image: url(/assets/flags/1x1/pf-c78c72a0ad139c9da31592af7c443cfef4e1e1baf208e44088ca667298324c9e.svg); }

.flag-icon-pg {
  background-image: url(/assets/flags/4x3/pg-3190ab67d73878026d59e98e14b0cf98812c5c086d35956383c9986f7e0433a3.svg); }
  .flag-icon-pg.flag-icon-squared {
    background-image: url(/assets/flags/1x1/pg-fe2bbe3c6599a4bf895b9f748d5a15650a7d29c854252e3b074c780a77cd51b9.svg); }

.flag-icon-ph {
  background-image: url(/assets/flags/4x3/ph-ec483bd752a5a0d1f063397a2c206bdd9b23451d2c262eceba6411b2769ed3b1.svg); }
  .flag-icon-ph.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ph-0d61f012185140030d9879f180b8279ab7798a9d7d062e141937ba83b51ab20e.svg); }

.flag-icon-pk {
  background-image: url(/assets/flags/4x3/pk-776714f751e4347341656ce5e88c6fa13316e2e36205cd8d09c73779794c2a56.svg); }
  .flag-icon-pk.flag-icon-squared {
    background-image: url(/assets/flags/1x1/pk-50284d5da424696f41ac4861f8eff6e5bc23a6e1812df7b444967c6e58ec6f81.svg); }

.flag-icon-pl {
  background-image: url(/assets/flags/4x3/pl-9bb56d1ec91d8c843ec53b018dc861772e466bad1582a9ba42148524347adf6d.svg); }
  .flag-icon-pl.flag-icon-squared {
    background-image: url(/assets/flags/1x1/pl-acc73e013a67a13fde68d812b22889be9150cce57d029deab6ba5b0ba4e7b69a.svg); }

.flag-icon-pm {
  background-image: url(/assets/flags/4x3/pm-5d990f5bc74366f734851ceb35046baaae3555ccff57e6cf95c7143f9b245532.svg); }
  .flag-icon-pm.flag-icon-squared {
    background-image: url(/assets/flags/1x1/pm-781f551a82a88b0a5e238b078310bc843950c844092d8ce1e52587feca285606.svg); }

.flag-icon-pn {
  background-image: url(/assets/flags/4x3/pn-1e347803c27d86312324a6a6712dee0bf5590971f027fffe082681dccce6c4c1.svg); }
  .flag-icon-pn.flag-icon-squared {
    background-image: url(/assets/flags/1x1/pn-b9762ab4fd752edc4506fd05f2810094e8de8b3cf6fffd00bafb89b6ed95359c.svg); }

.flag-icon-pr {
  background-image: url(/assets/flags/4x3/pr-4c0359aa4277d04c3c3af8ff89d0bbea462b480334cd6974beb6c5739c42903a.svg); }
  .flag-icon-pr.flag-icon-squared {
    background-image: url(/assets/flags/1x1/pr-dc838368c71fe79aea88491ec3e419ff01c26a5af460b05a79cb6cc6fa02b6b2.svg); }

.flag-icon-ps {
  background-image: url(/assets/flags/4x3/ps-39b00800524af9e8d270c479274be2dd5459c13d67a6f308139a69adbae4997f.svg); }
  .flag-icon-ps.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ps-9102a922196261028bd07e60d1b2ef435e123aae8bba6d49a5918123f8be18f6.svg); }

.flag-icon-pt {
  background-image: url(/assets/flags/4x3/pt-f76294ca6203778375158111051358fb535eaebb06d50951eb5326f9ede31536.svg); }
  .flag-icon-pt.flag-icon-squared {
    background-image: url(/assets/flags/1x1/pt-09b4548e5764d2a6c56bf9c33e8652911f91b16ab6bfa3041630506480281047.svg); }

.flag-icon-pw {
  background-image: url(/assets/flags/4x3/pw-029fb7bb87eec12c79cbe662fe3614698c7638186958fb6032e59a17705777cb.svg); }
  .flag-icon-pw.flag-icon-squared {
    background-image: url(/assets/flags/1x1/pw-39f82e7a0e390333a2d0f4a1396a8f710af7ec3002c5542d7d6c76d634a67e82.svg); }

.flag-icon-py {
  background-image: url(/assets/flags/4x3/py-6f18a4e716e9fbe7d0caf99651fee56e44ffd2a13ce77f50a8374a7fe6b0879d.svg); }
  .flag-icon-py.flag-icon-squared {
    background-image: url(/assets/flags/1x1/py-0325fb333b5ea2adb996345bf2bf5df0c460c87ca97cb3c8f6e65a7f33aa1722.svg); }

.flag-icon-qa {
  background-image: url(/assets/flags/4x3/qa-55eb7d6716998d68fe6e3345807dc410e5c5e8511bb2c78f0d08d51da707a131.svg); }
  .flag-icon-qa.flag-icon-squared {
    background-image: url(/assets/flags/1x1/qa-cfff93f4c31946f7646a855521a7db667c78cb89a7c2ac339c64c14f06be0f7a.svg); }

.flag-icon-re {
  background-image: url(/assets/flags/4x3/re-8b3124b78a7752ee288a401ae16c3cf5dafc1296e443ba941de8b338b16c2723.svg); }
  .flag-icon-re.flag-icon-squared {
    background-image: url(/assets/flags/1x1/re-c7173d64ef4a62237f83c7af8cb144fba8c38bd7ac8e7125eda78320931215ca.svg); }

.flag-icon-ro {
  background-image: url(/assets/flags/4x3/ro-a10768f5227b028969ceb2bce6e3fc2ecbea0c5e40d1946c47d913d2745a8b21.svg); }
  .flag-icon-ro.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ro-a4cfc4bce72dc7b034f2b84e932ba3d47f7a9404b94b1450af48263c576b62c8.svg); }

.flag-icon-rs {
  background-image: url(/assets/flags/4x3/rs-9792f9ae9694c0dfa1a213ec6ceb29d7b41819a508bedc4bf89dc4c285e48712.svg); }
  .flag-icon-rs.flag-icon-squared {
    background-image: url(/assets/flags/1x1/rs-cd44c0b89c5e2c2d0afe1902a263d60648dd18e97636256eb1ffc3148e336cd7.svg); }

.flag-icon-ru {
  background-image: url(/assets/flags/4x3/ru-ce34e72a9d955c6c6860a5e552cd3902d236bbff5a714a49a1b8f8dbbce3c410.svg); }
  .flag-icon-ru.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ru-aa0d5e4855f92f211efad3979493956dfe01ad4a0b552814cad05fa67694de03.svg); }

.flag-icon-rw {
  background-image: url(/assets/flags/4x3/rw-0f08a5e527db8287642f1aafeb397fd49ac3add8e86dbb0d9a8be7d2c43b0153.svg); }
  .flag-icon-rw.flag-icon-squared {
    background-image: url(/assets/flags/1x1/rw-297915f2fa836eba2dc1d795a4f5b1c51f8d9abdc6704b13e63cd81c81476f09.svg); }

.flag-icon-sa {
  background-image: url(/assets/flags/4x3/sa-70281c72fb6008faf5d36c401593c7c8f0c8870332e23fa3b1b53cd0f88e9ad5.svg); }
  .flag-icon-sa.flag-icon-squared {
    background-image: url(/assets/flags/1x1/sa-463ab66153968c569b854793714e414ea77185758a8236364019d4e7e40582fc.svg); }

.flag-icon-sb {
  background-image: url(/assets/flags/4x3/sb-5de262c7e2fda747ea4ac98c2ca9ce045f07de995330b1fc3bbbf39e25ae42f6.svg); }
  .flag-icon-sb.flag-icon-squared {
    background-image: url(/assets/flags/1x1/sb-638ead7b9c9a42fe2318daf753a8f0ce9cea4792114d8d7475d5a5abcf697cb6.svg); }

.flag-icon-sc {
  background-image: url(/assets/flags/4x3/sc-46736983ebac2719d3e3aca36e3dbb896f612db71b72e9e5d6f3da36ae59c0ac.svg); }
  .flag-icon-sc.flag-icon-squared {
    background-image: url(/assets/flags/1x1/sc-1dc9321cdeeecad7c6485b2bc3aef87a1a1ca116c18908286b5f79bdb5ee8313.svg); }

.flag-icon-sd {
  background-image: url(/assets/flags/4x3/sd-3b49e891fcda945b02ee18ce8cee078f251d8e822201ba0f8953eb3efb0b2860.svg); }
  .flag-icon-sd.flag-icon-squared {
    background-image: url(/assets/flags/1x1/sd-993e4821f73f36e6dd12332ed727047a97c7d31b1c8f0b3312e924c5f437eb34.svg); }

.flag-icon-se {
  background-image: url(/assets/flags/4x3/se-8e13876ab89aedc66156f36f55fefe66068c43657a803ba6b98843c171fb06c7.svg); }
  .flag-icon-se.flag-icon-squared {
    background-image: url(/assets/flags/1x1/se-8af88180b9c1ca0b24dbf5e04039a523c6f0ce975094c7fb6b38a4901b2e5c5d.svg); }

.flag-icon-sg {
  background-image: url(/assets/flags/4x3/sg-da88143d134efe0c37b67471ceb24a9ced62ae9ade25530232c92435e6f46b65.svg); }
  .flag-icon-sg.flag-icon-squared {
    background-image: url(/assets/flags/1x1/sg-80e8f95951096bba14b6d6ebea036b0717617668d96f32b5a8172a06be1feb22.svg); }

.flag-icon-sh {
  background-image: url(/assets/flags/4x3/sh-3b36e972618f594e95974a9c551d3ba9ead3e9b175d8dac0bc30fd1910f82561.svg); }
  .flag-icon-sh.flag-icon-squared {
    background-image: url(/assets/flags/1x1/sh-f25afcdb45a6c2d58e3984d40188a03342271f2f6312b868236b2a1c02a2e60e.svg); }

.flag-icon-si {
  background-image: url(/assets/flags/4x3/si-a9715a0c1db87762010c25b6d3bb90f73de3c893aa3bbc7412d57dfa14f28dd5.svg); }
  .flag-icon-si.flag-icon-squared {
    background-image: url(/assets/flags/1x1/si-daa3e030c059585d235a78f228c89a32bc50df223da8efa32f85a13978524365.svg); }

.flag-icon-sj {
  background-image: url(/assets/flags/4x3/sj-a2fa34115702482c2af9c7632eaeec77a26a1de129ce825bc38e27b6523e19ba.svg); }
  .flag-icon-sj.flag-icon-squared {
    background-image: url(/assets/flags/1x1/sj-55f27b8e6aa75b9db244543edd19b891f3c07d59106cf08ff5c47781c480d272.svg); }

.flag-icon-sk {
  background-image: url(/assets/flags/4x3/sk-b285dd82884088b14db516eac76a39b29752279ac9f0f3e7c84b624edea66aa8.svg); }
  .flag-icon-sk.flag-icon-squared {
    background-image: url(/assets/flags/1x1/sk-cf28c14c8d736a45cbb0a31c0743373b6414974d561729d322cb7204e6a2f25b.svg); }

.flag-icon-sl {
  background-image: url(/assets/flags/4x3/sl-571df59f51a68477e49c8bbbe397e505d30d27ed1611b37485c94198b6401a9a.svg); }
  .flag-icon-sl.flag-icon-squared {
    background-image: url(/assets/flags/1x1/sl-038ea846f3362ef266345b5a7f9f0c7e94334edf697c24c5faeda27bc0396927.svg); }

.flag-icon-sm {
  background-image: url(/assets/flags/4x3/sm-a15cef2d34582deb77e611ac2df3580749a7faafa1bc7c5c661c906ccbdad64d.svg); }
  .flag-icon-sm.flag-icon-squared {
    background-image: url(/assets/flags/1x1/sm-b9bb79651c85755c984570a106213c32d87c7fbe5737b9b6a6e5512a05d98429.svg); }

.flag-icon-sn {
  background-image: url(/assets/flags/4x3/sn-d8a7143973e5ea3d4b58e707ac2b791b45b5c7a7e65cea521fa82e9e5920926d.svg); }
  .flag-icon-sn.flag-icon-squared {
    background-image: url(/assets/flags/1x1/sn-2432d592221bbdd387548cfa5069c62f75245597749ffa6e2dc8d029b76e88ae.svg); }

.flag-icon-so {
  background-image: url(/assets/flags/4x3/so-c82eddc49e0c223a307286bed233a03794954ad83efd12d8e2499a728bb78f22.svg); }
  .flag-icon-so.flag-icon-squared {
    background-image: url(/assets/flags/1x1/so-52cb6599bb12bafd9e49b2661297961fe585068009eb1b1c1153023514a342a7.svg); }

.flag-icon-sr {
  background-image: url(/assets/flags/4x3/sr-cda17a0b4748b11b3e116d4f034adf47def0faaae1e71a5bb5d5c61645be9795.svg); }
  .flag-icon-sr.flag-icon-squared {
    background-image: url(/assets/flags/1x1/sr-fb0ff6fc7108d1b993a838bb0e9db479af4e2af4cda72c80e7456c0777cdea28.svg); }

.flag-icon-ss {
  background-image: url(/assets/flags/4x3/ss-744839019f2833ed8059e53d0d6e1cde2471c6a61d51f9e09814bda42bdc1f12.svg); }
  .flag-icon-ss.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ss-d77200a3fe67f1533ea642a6013667ce15bb0c8068b09db151c960593b37549a.svg); }

.flag-icon-st {
  background-image: url(/assets/flags/4x3/st-b0a9259277e38c0c8e0efec1d10b40d3e9c80a9eef21c174246aad28511e976d.svg); }
  .flag-icon-st.flag-icon-squared {
    background-image: url(/assets/flags/1x1/st-02eb52348f8547d028ba692f909483c32474105aae7940731d9264027493e479.svg); }

.flag-icon-sv {
  background-image: url(/assets/flags/4x3/sv-b524450c407002e1cf8e85444bb4225849cae409f54f5dc87d14d65faeeb833a.svg); }
  .flag-icon-sv.flag-icon-squared {
    background-image: url(/assets/flags/1x1/sv-e16fe96bd7f32dadd74091ee73b723c2b8dd92e791f337c54ee5bb18693ef1d2.svg); }

.flag-icon-sx {
  background-image: url(/assets/flags/4x3/sx-076f4363898d1374f985352dddbfe2a618bf4e7fedd80e43956be6614ca27ec0.svg); }
  .flag-icon-sx.flag-icon-squared {
    background-image: url(/assets/flags/1x1/sx-689aabb209fec5e8fc325bbaff80aa0bf11a2d6c819fa821b82069a2e5f12911.svg); }

.flag-icon-sy {
  background-image: url(/assets/flags/4x3/sy-d99ddced9cf98e95f7086a70703cd234cc8e21e744c37a6f90820c37ebc755d2.svg); }
  .flag-icon-sy.flag-icon-squared {
    background-image: url(/assets/flags/1x1/sy-c7f1e1422a9d941be9abd5e0f51b4c4ebdd08efd31c4ba3e378c155911cbe844.svg); }

.flag-icon-sz {
  background-image: url(/assets/flags/4x3/sz-b8760e27e50f7f31f0b38c2cdbcfa0121317bad064561cbcfeb8413ee8764e6d.svg); }
  .flag-icon-sz.flag-icon-squared {
    background-image: url(/assets/flags/1x1/sz-6c0e7ae75aa0fa71821d7b6230dff63e34b65221c0dc08f50226299d37716652.svg); }

.flag-icon-tc {
  background-image: url(/assets/flags/4x3/tc-abf0740c371bb155066651fca91c9e27e12b3cc9c05c14494e53dac851cc78bb.svg); }
  .flag-icon-tc.flag-icon-squared {
    background-image: url(/assets/flags/1x1/tc-13c94ed220ff9c70284c379e33fc85891de95dce60ec053787549485bca40a36.svg); }

.flag-icon-td {
  background-image: url(/assets/flags/4x3/td-354d8d74597706ece28b45f28030c948596f91c04392d07307b800cb0fc6e4cd.svg); }
  .flag-icon-td.flag-icon-squared {
    background-image: url(/assets/flags/1x1/td-fb3c31a792ab9fffe28bfe959cacdac54daebe9f795c30515830d93773805c3e.svg); }

.flag-icon-tf {
  background-image: url(/assets/flags/4x3/tf-f4edacabdba5b4d4d898a4edd7f07976f6a01ceee97c03fdf3561f2ba369b4f3.svg); }
  .flag-icon-tf.flag-icon-squared {
    background-image: url(/assets/flags/1x1/tf-fa00833e3ac96967c55c7f495a580ad5beb1fd912d32d0c9751b93c3c89be893.svg); }

.flag-icon-tg {
  background-image: url(/assets/flags/4x3/tg-32688daf8870e048421dcbfa2777d9b5f146e588f5f604433d17143fe702dac7.svg); }
  .flag-icon-tg.flag-icon-squared {
    background-image: url(/assets/flags/1x1/tg-0e62ff3b4c2106e7c5fe27a6f32fb3c10f69f9cfd5dad9aeb7a8b54af7cab786.svg); }

.flag-icon-th {
  background-image: url(/assets/flags/4x3/th-da4f1fda6eda5971dd52bad365bfc4aae176f0eedebf5c8bd9af25789c03993d.svg); }
  .flag-icon-th.flag-icon-squared {
    background-image: url(/assets/flags/1x1/th-95ac5f4463da0b9164f2fbed65ca12046370fcb1e250c6170975b77d1509b3e5.svg); }

.flag-icon-tj {
  background-image: url(/assets/flags/4x3/tj-d072d6cd4136ae97533d32ac74d20350ac794f8a79eaecd1c55142e76b93b3d9.svg); }
  .flag-icon-tj.flag-icon-squared {
    background-image: url(/assets/flags/1x1/tj-2cefbad6aee66d30fd757ea564fdbbde86aebde70720e9c961799caa6bdc8b84.svg); }

.flag-icon-tk {
  background-image: url(/assets/flags/4x3/tk-da715012efe8731020fe54063a76bffb256ea6696da290ccbb599ab36990edfe.svg); }
  .flag-icon-tk.flag-icon-squared {
    background-image: url(/assets/flags/1x1/tk-4055f5153398c294b2344880102e23847e952df1d04ad8734218fb0f6b43bf42.svg); }

.flag-icon-tl {
  background-image: url(/assets/flags/4x3/tl-388fac3c65fbbc18779b88f7fcdea523ba440860923a7e1602ca1138bcd5c40b.svg); }
  .flag-icon-tl.flag-icon-squared {
    background-image: url(/assets/flags/1x1/tl-9fea1b22d992cd15cafd1e5824d65f1f0f84b7c89a0f5a460b82429e2f9a8e95.svg); }

.flag-icon-tm {
  background-image: url(/assets/flags/4x3/tm-f5d7cce194b88ed026465717ee593c35c03f76f3483d77bee2a3e05827628679.svg); }
  .flag-icon-tm.flag-icon-squared {
    background-image: url(/assets/flags/1x1/tm-a3f255f0a6874a326140c9a4cad876cd386c30ac7b9e974905699ada62811042.svg); }

.flag-icon-tn {
  background-image: url(/assets/flags/4x3/tn-ba48fb29a4c8511d1145b87abc10cb75e8dc9ac4e704dc9efc113cf920d4b640.svg); }
  .flag-icon-tn.flag-icon-squared {
    background-image: url(/assets/flags/1x1/tn-d9b89cb7ab0b22d5a4709eb4681d77b8f6877d572a1d2f6424f6ce2fbed2dede.svg); }

.flag-icon-to {
  background-image: url(/assets/flags/4x3/to-9f1079a109d27abe53f17281320474ecfa6edc571502831f167471edd470773e.svg); }
  .flag-icon-to.flag-icon-squared {
    background-image: url(/assets/flags/1x1/to-a543262eaac18a114c5c70153895192a3e58981d4a00084473cd479bbca5783b.svg); }

.flag-icon-tr {
  background-image: url(/assets/flags/4x3/tr-04941a0f055d2ee2466b8e19532f58a2a0c4e3a83d986a601220fda2b6a3b090.svg); }
  .flag-icon-tr.flag-icon-squared {
    background-image: url(/assets/flags/1x1/tr-0df7b630a61ad40f32017487e6fef02258e8b2c8709c6fc8c1d3de1e9b36b09c.svg); }

.flag-icon-tt {
  background-image: url(/assets/flags/4x3/tt-9ca06051696b194f98d36ab4adb6aa7eb75275333cc0b48c9c9e1c34601013aa.svg); }
  .flag-icon-tt.flag-icon-squared {
    background-image: url(/assets/flags/1x1/tt-b05ee6c590e5c757190226182ac72648604086a272479f91d73dc24d90162eef.svg); }

.flag-icon-tv {
  background-image: url(/assets/flags/4x3/tv-5875f68681a06f613b3f84cd6959eb9dba70524bf14b0c8aa4a823a833dd6a98.svg); }
  .flag-icon-tv.flag-icon-squared {
    background-image: url(/assets/flags/1x1/tv-d8be186cccd6335a8f85c89085ef08b19c247df4081ed61698604972fdb8fa43.svg); }

.flag-icon-tw {
  background-image: url(/assets/flags/4x3/tw-29e639da18e668c62eb04ed3f3a02e11b0809890a2a0c82b529e50d53076e4e2.svg); }
  .flag-icon-tw.flag-icon-squared {
    background-image: url(/assets/flags/1x1/tw-2a2531772efdfcc74f70cc88f6fc15df7dc42dc344d9ed94b08e1847557976c4.svg); }

.flag-icon-tz {
  background-image: url(/assets/flags/4x3/tz-69ae0bf011f019428148ba9c3d793b4104be88621741beb216dfc9f43d125d6c.svg); }
  .flag-icon-tz.flag-icon-squared {
    background-image: url(/assets/flags/1x1/tz-581f05e20eeb5d8d77f807f2d6edaf786da8226284726841f33d9288ee84d6b7.svg); }

.flag-icon-ua {
  background-image: url(/assets/flags/4x3/ua-ddfa2a9985ed8342421c8df6fe852ec92e15d584c2565c525347bcd5f524c9da.svg); }
  .flag-icon-ua.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ua-86260ecf3aa1da110f92b58861d7918e3e574a79cfb4334f9c82b1a750a8a875.svg); }

.flag-icon-ug {
  background-image: url(/assets/flags/4x3/ug-b748460c255e064ba8a2d89bb78c48fd29bdf496a7ca3c3af0ed0d83e49995cb.svg); }
  .flag-icon-ug.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ug-8a8552bd983c6e2136f9eba9b4917d0e158415a24d9945f663ed56239299b44b.svg); }

.flag-icon-um {
  background-image: url(/assets/flags/4x3/um-d3a2b6a726a36d08db81fe4a5f0decd0afe5aa4ad8515304db4c3ace8f27e415.svg); }
  .flag-icon-um.flag-icon-squared {
    background-image: url(/assets/flags/1x1/um-0bcb31652ebcfa8c6727911e3df341b30425c3c699e6c4bf9f47c739ab9f442d.svg); }

.flag-icon-us {
  background-image: url(/assets/flags/4x3/us-c10177f8d2a93643101b39e419273bdd2f43a58ff9beff88a90431b0a4aa6a00.svg); }
  .flag-icon-us.flag-icon-squared {
    background-image: url(/assets/flags/1x1/us-a46068d8032a1e3364325da9675a41ba85a40c5401981c403fb7297aea254906.svg); }

.flag-icon-uy {
  background-image: url(/assets/flags/4x3/uy-ab18ad511d2822414e3b4f32e3309dca27b5b559cabd89cba2b4b4072387f440.svg); }
  .flag-icon-uy.flag-icon-squared {
    background-image: url(/assets/flags/1x1/uy-d94f5244cbd79f9348a048b7ec8861d37a237806dc1a6427fc9e743b86f43097.svg); }

.flag-icon-uz {
  background-image: url(/assets/flags/4x3/uz-78ae3b6ad90b0bb256102b6db50b8f9a7700fb6275e80d0c5b755e0defdcf8e5.svg); }
  .flag-icon-uz.flag-icon-squared {
    background-image: url(/assets/flags/1x1/uz-eff129a2e58e047e1daa2883f9ab0ef410bc11c42d652b9c4635bce5ab045b4f.svg); }

.flag-icon-va {
  background-image: url(/assets/flags/4x3/va-20117c2869d005de2cc54801f2d264b2823c214276f5559de1e48108f572fc79.svg); }
  .flag-icon-va.flag-icon-squared {
    background-image: url(/assets/flags/1x1/va-3206ffbb26fff2b3cd06959ba7f9d713efa9d133932d94ea1f1f6e3dd42687a3.svg); }

.flag-icon-vc {
  background-image: url(/assets/flags/4x3/vc-dccc1c2e4dc2d36ff71f8b04ebda868a7c4ce753b9fe5ccf0bed00edd7d41abb.svg); }
  .flag-icon-vc.flag-icon-squared {
    background-image: url(/assets/flags/1x1/vc-08a544ff242da12cc3fbad36579499a0b125c4b7ee7aa0af4eff0a261ea27a13.svg); }

.flag-icon-ve {
  background-image: url(/assets/flags/4x3/ve-d62ba31ca157e54409e09617a264e0dd18a2c597b1ad611c34da7fe7962e05dc.svg); }
  .flag-icon-ve.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ve-f465be9b82185e94a0f84a3d8b2f536e026b8893fecfc324997ca711b9fe0097.svg); }

.flag-icon-vg {
  background-image: url(/assets/flags/4x3/vg-d6c3f0ef53e605acc97f33a4e0a61711b6a8207c6a2cff55b9427870053da583.svg); }
  .flag-icon-vg.flag-icon-squared {
    background-image: url(/assets/flags/1x1/vg-8a2a8af88748ff501bc90aceb327488cce5f323948d59f62c960ccfb58ca7510.svg); }

.flag-icon-vi {
  background-image: url(/assets/flags/4x3/vi-882e3005bf905201f3ccb79736ff058aad41d99046ef58fefb2e5f7df30d4ef4.svg); }
  .flag-icon-vi.flag-icon-squared {
    background-image: url(/assets/flags/1x1/vi-8f89c34e92ffdc8d17724234254fadad1bbb4b2828cb5e041b4d6a21ec5c3caa.svg); }

.flag-icon-vn {
  background-image: url(/assets/flags/4x3/vn-53c52e450c6e603d8b08c0170dd3bd15aaa0d4e9d250657bea188945c1252138.svg); }
  .flag-icon-vn.flag-icon-squared {
    background-image: url(/assets/flags/1x1/vn-7267ad3b33fb6d304ff414c998a2c69c6b46abc2528c2e955ff4367959cae8e1.svg); }

.flag-icon-vu {
  background-image: url(/assets/flags/4x3/vu-2dd468b3a9c89ef0bcbb155422cb38bb19e6255d2871ec2b7012055d31d13e2a.svg); }
  .flag-icon-vu.flag-icon-squared {
    background-image: url(/assets/flags/1x1/vu-477e1ac8d2d514517a8a6b84f917f9c43d0145d52f4b89e7205277ee3bbea422.svg); }

.flag-icon-wf {
  background-image: url(/assets/flags/4x3/wf-d2b9db8f6fa2a78507a5b4751f95e92c334673ecddd68eb33844ea91fc62d771.svg); }
  .flag-icon-wf.flag-icon-squared {
    background-image: url(/assets/flags/1x1/wf-095484363036fafbb44da7fbbdb6bb371c92c002163fb610c29912c6027a3cb7.svg); }

.flag-icon-ws {
  background-image: url(/assets/flags/4x3/ws-6a3fef801ba087404d3718c0b5b8741261d790cb2bf8b7581fea317e9689bcc7.svg); }
  .flag-icon-ws.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ws-a312f6f7ddd2d5694c70b935f000ccc7716aae0b207e98ca4ad6ee252d272f49.svg); }

.flag-icon-ye {
  background-image: url(/assets/flags/4x3/ye-38ca92e79aeba152eee33f0d5dac55430af032a31b39d56d49c4287b0639fe72.svg); }
  .flag-icon-ye.flag-icon-squared {
    background-image: url(/assets/flags/1x1/ye-2d43095605cb09aeebaa7d9ec1147717dfffb26cd6a7ab66adfbf550a3bc8962.svg); }

.flag-icon-yt {
  background-image: url(/assets/flags/4x3/yt-2b54852c423d68df342c5bec300477510632be3f1046a2d9d9715a9617bc90ae.svg); }
  .flag-icon-yt.flag-icon-squared {
    background-image: url(/assets/flags/1x1/yt-3ea3c372eb1f7e269abafc08882bdb99d94c18ea363b905f8422f2733a550db8.svg); }

.flag-icon-za {
  background-image: url(/assets/flags/4x3/za-c57ff71cb91d156461c64ada7fb86779c009a9c0a53df0b6de2e87044eeefb74.svg); }
  .flag-icon-za.flag-icon-squared {
    background-image: url(/assets/flags/1x1/za-571b8b7da7f17cd9a4ce08e5696468e86efce9be83bb776c7586184fa75e99a9.svg); }

.flag-icon-zm {
  background-image: url(/assets/flags/4x3/zm-8a6d8f87b53dd7256d461f64cf66e2cd90df833aca8833849fbfe7445caeeae2.svg); }
  .flag-icon-zm.flag-icon-squared {
    background-image: url(/assets/flags/1x1/zm-d68871c839973048d37ad325312abfc1b22b525e3f48faefedcebea29e3e9175.svg); }

.flag-icon-zw {
  background-image: url(/assets/flags/4x3/zw-506cb345575e94583b442c3a23ded41e36cf454e797b3b2e03b4445a37395666.svg); }
  .flag-icon-zw.flag-icon-squared {
    background-image: url(/assets/flags/1x1/zw-f7716b45f4f267a661f85af47e95447adc282a4b9fc18bc88316cd970f8d947d.svg); }

.flag-icon-es-ca {
  background-image: url(/assets/flags/4x3/es-ca-884e8f11877dc43b5c29bbc00c6980cc57ee8e671b710b9f9d59e29927cd25d4.svg); }
  .flag-icon-es-ca.flag-icon-squared {
    background-image: url(/assets/flags/1x1/es-ca-2f61e283eeea7f76c15207644f2a8538e05a4eae39dbc8186509209773701cd9.svg); }

.flag-icon-eu {
  background-image: url(/assets/flags/4x3/eu-dfa7f5c90f5fe9eb16c8c865e73cf7e3e8fea328bf6cfc1b07f6bc28eefd43f5.svg); }
  .flag-icon-eu.flag-icon-squared {
    background-image: url(/assets/flags/1x1/eu-c3a400ee8dc3ee4dcc2d0f2868698ce781d403a9ea249d972115c8455cfcaa9b.svg); }

.flag-icon-gb-eng {
  background-image: url(/assets/flags/4x3/gb-eng-65a380032580f7144bddfd4ab353bb478d523232c4303edb0095e34e98c7dcb9.svg); }
  .flag-icon-gb-eng.flag-icon-squared {
    background-image: url(/assets/flags/1x1/gb-eng-6fe299a85ef920693f193828362f306fbd23020d2bfc61dcf9143d85a6a5001b.svg); }

.flag-icon-gb-nir {
  background-image: url(/assets/flags/4x3/gb-nir-7cdb174057442ee76cc8a3fef9df4650460b3a3a9c0634c2417c42e7383efe3f.svg); }
  .flag-icon-gb-nir.flag-icon-squared {
    background-image: url(/assets/flags/1x1/gb-nir-ea58e209ad11b7e21e357799a5a0d4c7cfd13b2f7407cb09933a2dc485da41ff.svg); }

.flag-icon-gb-sct {
  background-image: url(/assets/flags/4x3/gb-sct-f7b13851e9b9de7532ef86afefb7fe2efe6149fee8ea50505771b4f7d112cf7b.svg); }
  .flag-icon-gb-sct.flag-icon-squared {
    background-image: url(/assets/flags/1x1/gb-sct-76e5e39a38915cf5f6020d6f58d0385f1fc0d502dbecddabf00a18cd50c88995.svg); }

.flag-icon-gb-wls {
  background-image: url(/assets/flags/4x3/gb-wls-c6e549d37113c25f679d5ea75020ea514971a1038b3c92d6a71c316a56b542da.svg); }
  .flag-icon-gb-wls.flag-icon-squared {
    background-image: url(/assets/flags/1x1/gb-wls-99a7a03c4ef2a0789d35aa1ab8b746ec72c1c8de58426afc7fa096d5a00802a7.svg); }

.flag-icon-un {
  background-image: url(/assets/flags/4x3/un-3760dc125288de6c2143060b283497dfed4de7430943f5be86a67d7668ede7a3.svg); }
  .flag-icon-un.flag-icon-squared {
    background-image: url(/assets/flags/1x1/un-aac693764e62f5d0bccf80bc53f68bb6cde75b18c3b3829a89b79555df538c71.svg); }

.flag-icon-xk {
  background-image: url(/assets/flags/4x3/xk-c40be9a1d1844391b275542b4a4ef7a9eecac72a93b08e7f4f2f4ebb17c7538c.svg); }
  .flag-icon-xk.flag-icon-squared {
    background-image: url(/assets/flags/1x1/xk-c5498f241b2608496ac30b7c8570d9dcd8f88432ea739ac0ca1abd7fd8beae99.svg); }
:root {
  /* Colors */
  --lexxy-color-ink: oklch(20% 0 0);
  --lexxy-color-ink-medium: oklch(40% 0 0);
  --lexxy-color-ink-light: oklch(60% 0 0);
  --lexxy-color-ink-lighter: oklch(85% 0 0);
  --lexxy-color-ink-lightest: oklch(96% 0 0);
  --lexxy-color-ink-inverted: white;

  --lexxy-color-accent-dark: oklch(57% 0.19 260);
  --lexxy-color-accent-medium: oklch(75% 0.196 258);
  --lexxy-color-accent-light: oklch(88% 0.026 254);
  --lexxy-color-accent-lightest: oklch(92% 0.026 254);

  --lexxy-color-red: oklch(60% 0.15 27);
  --lexxy-color-green: oklch(60% 0.15 145);
  --lexxy-color-blue: oklch(66% 0.196 258);
  --lexxy-color-purple: oklch(60% 0.15 305);

  --lexxy-color-code-token-att: #d73a49;
  --lexxy-color-code-token-comment: #6a737d;
  --lexxy-color-code-token-function: #6f42c1;
  --lexxy-color-code-token-operator: #d73a49;
  --lexxy-color-code-token-property: #005cc5;
  --lexxy-color-code-token-punctuation: #24292e;
  --lexxy-color-code-token-selector: #22863a;
  --lexxy-color-code-token-variable: #e36209;

  --lexxy-color-canvas: var(--lexxy-color-ink-inverted);
  --lexxy-color-text: var(--lexxy-color-ink);
  --lexxy-color-text-subtle: var(--lexxy-color-ink-medium);
  --lexxy-color-link: var(--lexxy-color-accent-dark);
  --lexxy-color-selected: var(--lexxy-color-accent-lightest);
  --lexxy-color-selected-hover: var(--lexxy-color-accent-light);
  --lexxy-color-selected-dark: var(--lexxy-color-blue);
  --lexxy-color-selected-50: color-mix(in oklch, var(--lexxy-color-selected-dark) 50%, transparent);
  --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);
  --lexxy-color-floating-controls-separator: rgba(128, 128, 128, 0.3);

  /* Text color highlights */
  --highlight-1: rgb(136, 118, 38);
  --highlight-2: rgb(185, 94, 6);
  --highlight-3: rgb(207, 0, 0);
  --highlight-4: rgb(216, 28, 170);
  --highlight-5: rgb(144, 19, 254);
  --highlight-6: rgb(5, 98, 185);
  --highlight-7: rgb(17, 138, 15);
  --highlight-8: rgb(148, 82, 22);
  --highlight-9: rgb(102, 102, 102);

  --highlight-bg-1: rgba(229, 223, 6, 0.3);
  --highlight-bg-2: rgba(255, 185, 87, 0.3);
  --highlight-bg-3: rgba(255, 118, 118, 0.3);
  --highlight-bg-4: rgba(248, 137, 216, 0.3);
  --highlight-bg-5: rgba(190, 165, 255, 0.3);
  --highlight-bg-6: rgba(124, 192, 252, 0.3);
  --highlight-bg-7: rgba(140, 255, 129, 0.3);
  --highlight-bg-8: rgba(221, 170, 123, 0.3);
  --highlight-bg-9: rgba(200, 200, 200, 0.3);

  /* Tables */
  --lexxy-color-table-header-bg: var(--lexxy-color-ink-lightest);
  --lexxy-color-table-cell-border: var(--lexxy-color-ink-lighter);
  --lexxy-color-table-cell-selected: var(--lexxy-color-selected);
  --lexxy-color-table-cell-selected-border: var(--lexxy-color-selected-dark);
  --lexxy-color-table-cell-selected-bg: var(--lexxy-color-accent-lightest);
  --lexxy-color-table-cell-add: var(--lexxy-color-selected-50);
  --lexxy-color-table-cell-toggle: var(--lexxy-color-accent-lightest);
  --lexxy-color-table-cell-remove: oklch(60% 0.15 27 / 0.1);
  --lexxy-table-cell-add-size: 4px;

  /* Typography */
  --lexxy-font-base: system-ui, sans-serif;
  --lexxy-font-mono: ui-monospace, "Menlo", "Monaco", Consolas, monospace;
  --lexxy-text-size: 1em;
  --lexxy-text-small: 0.875rem;
  --lexxy-content-margin: 1rem;

  /* Focus ring */
  --lexxy-focus-ring-color: var(--lexxy-color-accent-dark);
  --lexxy-focus-ring-offset: -2px;
  --lexxy-focus-ring-size: 2px;

  /* Misc */
  --lexxy-toolbar-button-size: 2lh;
  --lexxy-radius: 0.5ch;
  --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --lexxy-z-popup: 1000;
}
:where(lexxy-editor) {
  --lexxy-editor-padding: 1ch;
  --lexxy-editor-rows: 8lh;
  /* eslint-disable-next-line css/no-invalid-properties */
  @supports (min-block-size: attr(rows lh)) {
    --lexxy-editor-rows: attr(rows lh, 8lh);
  }
  --lexxy-toolbar-gap: 2px;
  --lexxy-toolbar-spacing: 0.5ch;
  --lexxy-toolbar-padding: 2px;
  --lexxy-toolbar-border-size: 1px;
  --lexxy-toolbar-height: calc(var(--lexxy-toolbar-button-size) + 2 * var(--lexxy-toolbar-padding) + var(--lexxy-toolbar-border-size));

  border: 1px solid var(--lexxy-color-ink-lighter);
  border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
  background-color: var(--lexxy-color-canvas);
  container-type: inline-size;
  display: block;
  overflow: visible;
  position: relative;
  transition: opacity 150ms;

  p.provisional-paragraph {
    display: block;

    &.hidden {
      block-size: 0.5ch;
      margin: 0;
    }
  }

  input,
  button,
  summary {
    &:focus-visible {
      outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
      outline-offset: var(--lexxy-focus-ring-offset);
    }
  }

  summary {
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }
  }

  button,
  summary {
    -webkit-appearance: none;
    appearance: none;
    background: var(--lexxy-color-canvas);
    border: none;
    border-radius: var(--lexxy-radius);
    cursor: pointer;
    line-height: normal;
    font-size: inherit;
    inline-size: auto;
    padding: 0;

    @media(any-hover: hover) {
      &:hover:not([aria-disabled="true"]) {
        background: var(--lexxy-color-ink-lightest);
      }
    }
  }

  .node--selected {
    outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
    outline-offset: var(--lexxy-focus-ring-offset);
  }

  &[data-links-openable] a {
    cursor: pointer;
  }

  /* Tables */
  /* ------------------------------------------------------------------------ */

  table {
    th, td {
      position: relative;
      transition: all 0.1s ease-in-out;

      /* Used for column and row adding visualizations */
      &:after {
        box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent inset;
        content: "";
        display: block;
        inset-block-start: -1px;
        inset-block-end: -1px;
        inset-inline-start: -1px;
        inset-inline-end: -1px;
        pointer-events: none;
        position: absolute;
        transition: box-shadow 0.1s ease-in-out;
        z-index: 2;
      }

      &.lexxy-content__table-cell--selected {
        background-color: var(--lexxy-color-table-cell-selected-bg);
      }

      &.lexxy-content__table-cell--focus {
        &:after {
          box-shadow: 0 0 0 0 transparent, 0 0 0 2px var(--lexxy-color-table-cell-selected-border) inset;
        }
      }

      &.lexxy-content__table-cell--highlight {
        &[data-action="insert"] {
          &[data-child-type="row"] {
            &[data-direction="after"] {
              &:after {
                box-shadow:
                  0 var(--lexxy-table-cell-add-size) 0 0 var(--lexxy-color-table-cell-add),
                  0 calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 var(--lexxy-color-table-cell-add) inset;
              }
            }
            &[data-direction="before"] {
              &:after {
                box-shadow:
                  0 calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 var(--lexxy-color-table-cell-add),
                  0 var(--lexxy-table-cell-add-size) 0 0 var(--lexxy-color-table-cell-add) inset;
              }
            }
          }
          &[data-child-type="column"] {
            &[data-direction="after"] {
              &:after {
                box-shadow:
                  var(--lexxy-table-cell-add-size) 0 0 0 var(--lexxy-color-table-cell-add),
                  calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 0 var(--lexxy-color-table-cell-add) inset;
              }
            }
            &[data-direction="before"] {
              &:after {
                box-shadow:
                  calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 0 var(--lexxy-color-table-cell-add),
                  var(--lexxy-table-cell-add-size) 0 0 0 var(--lexxy-color-table-cell-add) inset;
              }
            }
          }
        }
        &[data-action="delete"] {
          background-color: var(--lexxy-color-table-cell-remove);
          color: var(--lexxy-color-red);

          &:after { box-shadow: 0 0 0 0 transparent; }
        }
        &[data-action="toggle"] {
          background-color: var(--lexxy-color-table-cell-toggle);

          &:after { box-shadow: 0 0 0 0 transparent; }
        }
      }
    }

    tr.lexxy-content__table-cell--highlight[data-action="delete"] {
      th, td {
        background-color: var(--lexxy-color-table-cell-remove);
        color: var(--lexxy-color-red);

        &:after { box-shadow: 0 0 0 0 transparent; }
      }
    }

    &.lexxy-content__table--selection {
      /* eslint-disable-next-line css/use-baseline */
      ::selection {
        background: transparent;
      }
    }
  }

  &:has(.lexxy-content__table-cell--selected) {
    lexxy-table-tools {
      visibility: hidden;
    }
  }

  [data-lexical-linebreak] {
    block-size: 0;
    display: contents;
    inline-size: 0;
  }

  /* Attachments */
  /* ------------------------------------------------------------------------ */

  action-text-attachment {
    cursor: pointer;
  }

  .attachment {
    background-color: var(--lexxy-color-canvas);

    progress {
      max-inline-size: 10ch;
      margin: auto;
    }

    &.attachment--preview {
      progress {
        inset-block-start: 2ch;
        inset-inline-start: 0;
        inset-inline-end: 0;
        position: absolute;
      }
    }

    &.attachment--error {
      background: color-mix(var(--lexxy-color-red) 10%, transparent);
      padding: 2ch;

      &:before {
        align-items: center;
        aspect-ratio: 1;
        background: var(--lexxy-color-red);
        block-size: 1.5lh;
        border-radius: 50%;
        color: white;
        content: "!";
        display: flex;
        justify-content: center;
        margin: auto;
      }

      > div {
        flex: 1;
        font-size: 0.85em;
        padding: 1ch;
        text-align: start;
      }
    }
  }

  .attachment[draggable] {
    cursor: grab;
  }

  .attachment.lexxy-dragging {
    opacity: 0.4;
  }

  [data-lexxy-decorator][draggable] {
    cursor: grab;
  }

  [data-lexxy-decorator].lexxy-dragging {
    opacity: 0.4;
  }

  .lexxy-drop-caret {
    background-color: var(--lexxy-focus-ring-color);
    border-radius: 1px;
    inline-size: 2px;
    pointer-events: none;
    position: fixed;
  }

  [class*="lexxy-drop-target--"] {
    position: relative;
  }

  /* Horizontal line indicator for block and list drops */
  .lexxy-drop-target--block-before::before,
  .lexxy-drop-target--block-after::after,
  .lexxy-drop-target--list-before::before,
  .lexxy-drop-target--list-after::after {
    background-color: var(--lexxy-focus-ring-color);
    block-size: 3px;
    border-radius: 1px;
    content: "";
    inset-inline: 0;
    pointer-events: none;
    position: absolute;
    transform: translate(0, 0.5ch);
  }

  .lexxy-drop-target--block-before::before,
  .lexxy-drop-target--list-before::before {
    transform: translate(0, -0.5ch);
  }

  .lexxy-drop-target--block-before::before,
  .lexxy-drop-target--list-before::before {
    inset-block-start: -2px;
  }

  .lexxy-drop-target--block-after::after,
  .lexxy-drop-target--list-after::after {
    inset-block-end: -2px;
  }

  /* Vertical line indicator for gallery merge and reorder */
  .lexxy-drop-target--gallery-before::before,
  .lexxy-drop-target--gallery-after::after {
    background-color: var(--lexxy-focus-ring-color);
    border-radius: 1px;
    content: "";
    inset-block: 0;
    inline-size: 3px;
    pointer-events: none;
    position: absolute;
  }

  .lexxy-drop-target--gallery-before::before {
    inset-inline-start: -4px;
  }

  .lexxy-drop-target--gallery-after::after {
    inset-inline-end: -4px;
  }

  .attachment:hover:not(.node--selected) {
    outline: var(--lexxy-focus-ring-size) solid color-mix(in oklch, var(--lexxy-focus-ring-color) 30%, transparent);
    outline-offset: var(--lexxy-focus-ring-offset);
  }

  /* Image galleries */
  /* ------------------------------------------------------------------------ */

  .attachment-gallery {
    --lexxy-attachment-gallery-columns: 3;
    --lexxy-attachment-gallery-gap: 0.4ch;
    --lexxy-focus-ring-offset: -6px;

    padding: 0;

    .attachment {
      background: transparent;
      box-sizing: border-box;
      margin: var(--lexxy-attachment-gallery-gap);
      padding: 0;
      padding-block-end: var(--lexxy-attachment-gap);
      vertical-align: top;

      img {
        box-sizing: border-box;
        padding: 1ch;
        padding-block-end: 0;
      }


      &.attachment--error {
        background: color-mix(var(--lexxy-color-red) 10%, transparent);
        padding: 2ch;

        > div {
          text-align: center;
        }
      }
    }
  }

  .attachment__caption--editable {
    box-sizing: border-box;
    cursor: text;

    .attachment__caption-text {
      display: block;
      min-block-size: 1lh;
      overflow-wrap: anywhere;
      white-space: pre-wrap;
      text-align: center;
    }

    &[data-placeholder] .attachment__caption-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .attachment__caption--editing .attachment__caption-text {
    display: none;
  }
}

/* Reserve the mounted height before upgrade so it doesn't shift layout on mount. */
:where(lexxy-editor:not(:defined)) {
  min-block-size: calc(var(--lexxy-toolbar-height) + var(--lexxy-editor-rows) + 2 * var(--lexxy-editor-padding));
}

/* Placeholder */
:where(.lexxy-editor--empty) {
  .lexxy-editor__content:not(:has(h1, h2, h3, h4, h5, h6, table, ul, ol, figure, .attachment-gallery))::before {
    content: attr(placeholder);
    color: currentColor;
    cursor: text;
    opacity: 0.66;
    pointer-events: none;
    position: absolute;
    white-space: pre-line;
  }
}

:where(.lexxy-editor__content) {
  /* eslint-disable-next-line css/no-invalid-properties */
  min-block-size: var(--lexxy-editor-rows);
  outline: 0;
  padding: var(--lexxy-editor-padding);

  /* Isolate the contenteditable root's layout and style. Lexical's reconciler
     commits mutations inside this element (nodes appended, text inserted,
     class flipped) on every update; containment keeps those mutations from
     invalidating ancestor-dependent selectors and sibling layout elsewhere
     in the editor. */
  contain: layout style;
}

:where(.lexxy-editor--drag-over) {
  background-color: var(--lexxy-color-selected);
  border-radius: var(--lexxy-radius);
  outline: 2px dashed var(--lexxy-color-selected-dark);
}

:where([data-lexical-cursor]) {
  animation: blink 1s infinite;
  block-size: 1lh;
  border-inline-start: 1.5px solid currentColor;
  line-height: inherit;
  margin-block: 0 var(--lexxy-content-margin);
}

@keyframes blink {
  0% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0;}
}

/* --------------------------------------------------------------------------
/* Toolbar */

:where(lexxy-toolbar) {
  --lexxy-toolbar-icon-size: 1.125em;

  border-block-end: var(--lexxy-toolbar-border-size) solid var(--lexxy-color-ink-lighter);
  color: currentColor;
  display: flex;
  font-size: inherit;
  gap: var(--lexxy-toolbar-gap);
  max-inline-size: 100%;
  padding: var(--lexxy-toolbar-padding);
  position: relative;

  @container (width < 300px) {
    font-size: 0.8em;
  }

  &[data-attachments="false"] button[name="image"],
  &[data-attachments="false"] button[name="file"] {
    display: none;
  }

  &[data-tables="false"] button[name="table"] {
    display: none;
  }

  &[data-code-blocks="false"][data-inline-code="false"] button[name="code"] {
    display: none;
  }

  &[data-upload="file"] button[name="image"] {
    display: none;
  }

  &[data-upload="image"] button[name="file"] {
    display: none;
  }

  .lexxy-editor__toolbar-button {
    aspect-ratio: 1;
    block-size: var(--lexxy-toolbar-button-size);
    border: 0;
    border-radius: var(--lexxy-radius);
    color: currentColor;
    display: grid;
    line-height: inherit;
    place-items: center;

    &:is(:active):not([aria-disabled="true"]),
    &[aria-pressed="true"] {
      background-color: var(--lexxy-color-selected);

      &:hover {
        background-color: var(--lexxy-color-selected-hover);
      }
    }

    &[aria-disabled="true"] {
      cursor: default;
      opacity: 0.3;
    }

    svg {
      -webkit-touch-callout: none;
      block-size: var(--lexxy-toolbar-icon-size);
      fill: currentColor;
      grid-area: 1/1;
      inline-size: var(--lexxy-toolbar-icon-size);
      -webkit-user-select: none;

      @supports (user-select: none) {
        user-select: none;
      }
    }

    &.lexxy-editor__toolbar-group-end {
      position: relative;
      margin-inline-end: calc(var(--lexxy-toolbar-spacing) + 1px);

      &:after {
        background-color: var(--lexxy-color-ink-lighter);
        block-size: var(--lexxy-toolbar-icon-size);
        content: "";
        display: block;
        inline-size: 1px;
        inset-inline-end: calc(-1 * var(--lexxy-toolbar-spacing));
        inset-block: 0;
        margin: auto;
        pointer-events: none;
        position: absolute;
      }
    }
  }

  .lexxy-editor__toolbar-button--push-right {
    margin-inline-start: auto;
  }
}

/* --------------------------------------------------------------------------
/* Dropdowns */

:where(.lexxy-editor__toolbar-dropdown) {
  -webkit-user-select: none;

  @supports (user-select: none) {
    user-select: none;
  }

  .lexxy-editor__toolbar-button {
    color: currentColor;

    &:hover {
      opacity: 0.8;
    }

    &.lexxy-editor__toolbar-button--chevron {
      aspect-ratio: unset;
      gap: 0.5ch;
      grid-template-columns: 2fr 1fr;
      min-inline-size: calc(var(--lexxy-toolbar-button-size) + 1.2ch);
      padding-inline: 0.75ch;

      &:after {
        block-size: 0.3ch;
        border-block-end: 2px solid currentColor;
        border-inline-end: 2px solid currentColor;
        content: "";
        display: inline-block;
        inline-size: 0.3ch;
        transform: rotate(45deg);
      }
    }
  }

  > .lexxy-editor__toolbar-button[aria-expanded="true"] {
    background-color: var(--lexxy-color-selected-hover);
    border-end-end-radius: 0;
    border-end-start-radius: 0;

    &:hover {
      background-color: var(--lexxy-color-selected-hover);
    }
  }

  [data-dropdown-panel] {
    background-color: var(--lexxy-color-canvas);
    border: 2px solid var(--lexxy-color-selected-hover);
    border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
    box-sizing: border-box;
    box-shadow: var(--lexxy-shadow);
    color: var(--lexxy-color-text);
    display: flex;
    gap: var(--lexxy-toolbar-gap);
    margin: 0;
    padding: var(--lexxy-toolbar-spacing);
    position: absolute;
    z-index: 3;

    &[hidden],
    [overflowing] &[hidden] {
      display: none;
    }
  }

  .lexxy-editor__toolbar-dropdown-list {
    border-start-start-radius: 0;
    flex-direction: column;
    padding: 0.1ch;

    button {
      align-items: center;
      color: var(--lexxy-color-text);
      display: flex;
      flex-direction: row;
      gap: 1ch;
      padding: 1ch;
      position: relative;

      &[aria-checked="true"] {
        background-color: var(--lexxy-color-selected);

        &:hover {
          background-color: var(--lexxy-color-selected-hover);
        }
      }

      span {
        font-size: var(--lexxy-text-small);
      }

      svg {
        block-size: 1lh;
        fill: currentColor;
        inline-size: 1lh;
      }
    }

    .lexxy-editor__toolbar-separator {
      background: var(--lexxy-color-ink-lighter);
      block-size: 1px;
      inline-size: 100%;
    }

    [overflowing] & {
      display: grid;
      grid-template-columns: repeat(4, 1fr);

      button span { display: none; }

      .lexxy-editor__toolbar-separator {
        grid-column: 1 / -1;
      }
    }
  }


  /* --------------------------------------------------------------------------
  /* Overflow menu */

  &.lexxy-editor__toolbar-overflow {
    display: none;
    justify-self: flex-end;
    z-index: 1;

    [data-dropdown-panel] {
      border-start-end-radius: 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      inset-inline-end: var(--lexxy-toolbar-gap);
    }
  }


  /* --------------------------------------------------------------------------
  /* Link dropdown */

  &.lexxy-editor__toolbar-dropdown--link {
    [data-dropdown-panel] {
      font-size: var(--lexxy-text-small);
      gap: var(--lexxy-toolbar-spacing);
      inset-inline-start: var(--lexxy-toolbar-spacing);
      inset-inline-end: var(--lexxy-toolbar-spacing);

      [overflowing] & {
        flex-wrap: wrap;
      }

      .lexxy-editor__toolbar-dropdown-actions {
        display: flex;
        flex: 1;
        gap: var(--lexxy-toolbar-spacing);
      }

      input {
        background-color: var(--lexxy-color-canvas);
        border: 1px solid var(--lexxy-color-ink-lighter);
        border-radius: var(--lexxy-radius);
        color: var(--lexxy-color-text);
        block-size: var(--lexxy-toolbar-button-size);
        box-sizing: border-box;
        font-size: var(--lexxy-text-small);
        flex: 2;
        inline-size: 100%;
        line-height: inherit;
        padding-block: 0;
        padding-inline: 1ch;

        [overflowing] & {
          min-inline-size: 100%;
        }
      }

      button {
        background-color: var(--lexxy-color-ink-lightest);
        inline-size: 100%;
        padding-inline: 2ch;
      }

      button[value="link"] {
        background-color: var(--lexxy-color-accent-dark);
        color: var(--lexxy-color-ink-inverted);

        &:hover {
          background-color: var(--lexxy-color-accent-medium);
        }
      }
    }
  }

  /* --------------------------------------------------------------------------
  /* Color dropdown */

  &.lexxy-editor__toolbar-dropdown--highlight {
    position: relative;

    [overflowing] & {
      position: static;
    }

    [data-dropdown-panel] {
      --max-inline-size: calc(var(--max-colors) * (var(--lexxy-toolbar-button-size) + var(--lexxy-toolbar-spacing)));
      border-start-start-radius: 0;
      gap: var(--lexxy-toolbar-spacing);
      flex-direction: column;
      font-size: var(--lexxy-text-small);
      inset-inline-start: 0;
      max-inline-size: var(--max-inline-size);

      [overflowing] & {
        border-start-start-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
        inset-inline-end: var(--lexxy-toolbar-spacing);
        inset-inline-start: var(--lexxy-toolbar-spacing);
      }

      button {
        position: relative;
      }

      .lexxy-highlight-colors {
        display: grid;
        gap: var(--lexxy-toolbar-gap);
        grid-template-columns: repeat(auto-fill, minmax(var(--lexxy-toolbar-button-size), 1fr));
        max-inline-size: var(--max-inline-size);

        .lexxy-highlight-colors__group {
          display: contents;
        }

        button {
          block-size: unset;
          inline-size: 100%;

          &:after {
            align-items: center;
            content: "Aa";
            display: flex;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            inset: 0;
            justify-content: center;
            position: absolute;
          }

          &[aria-checked="true"] {
            background-color: transparent;
            box-shadow: 0 0 0 2px currentColor inset;

            &:after {
              content: "✓";
            }
          }
        }
      }

      .lexxy-editor__toolbar-dropdown-reset {
        background-color: var(--lexxy-color-ink-lightest);

        &:is([disabled]) {
          display: none;
        }
      }
    }
  }
}

/* --------------------------------------------------------------------------
/* Floating controls */
:where(.lexxy-floating-controls) {
  --button-size: 2.3lh;
  --floating-tools-radius: calc(var(--lexxy-radius) * 1.5);

  color: var(--lexxy-color-ink-inverted);
  font-size: var(--lexxy-text-small);
  line-height: 1;
  position: absolute;
  z-index: 2;

  button {
    align-items: center;
    background: transparent;
    block-size: var(--button-size);
    color: var(--lexxy-color-ink-inverted);
    display: flex;
    justify-content: center;
    line-height: inherit;
    min-block-size: var(--button-size);
    min-inline-size: var(--button-size);
    -webkit-user-select: none;

    @supports (user-select: none) {
      user-select: none;
    }

    @media(any-hover: hover) {
      &:hover:not([aria-disabled="true"]),
      &.lexxy-table-control__more-menu-trigger[aria-expanded="true"] {
        background: var(--lexxy-color-ink-medium);

        svg {
          opacity: 1;
        }
      }

      &:focus-visible {
        outline-color: var(--lexxy-focus-ring-color);
      }
    }
  }

  button {
    aspect-ratio: 1 / 1;
    font-weight: bold;

    svg {
      block-size: 1.125em;
      inline-size: 1.125em;
      fill: currentColor;
      opacity: 0.8;
      padding: 1px; /* Fixes weird Safari SVG clipping issue */
    }

    span {
      display: none;
    }
  }

  .lexxy-table-control__more-menu-trigger {
    aspect-ratio: auto;
    box-shadow: 0 0 0 1px inset var(--lexxy-color-floating-controls-separator);
    font-weight: normal;
    padding: 0 1.25ch;
  }

  .lexxy-floating-controls__group {
    background-color: var(--lexxy-color-ink);
    border-radius: var(--floating-tools-radius);
    padding: 0.25ch;
  }


  /* --------------------------------------------------------------------------
  /* Table Tools */

  &:is(lexxy-table-tools) {
    flex-direction: row;
    gap: 0.25ch;
    inset-inline-start: var(--lexxy-editor-padding);
    transform: translate(-50%, -120%);

    .lexxy-table-control {
      align-items: stretch;
      display: flex;
      flex-direction: row;
      gap: 0.25ch;
      white-space: nowrap;

      .lexxy-table-control__more-menu {
        display: flex;
        gap: 0;
        position: relative;

        .lexxy-table-control__more-menu-details {
          background: var(--lexxy-color-ink);
          border-radius: var(--floating-tools-radius);
          display: flex;
          flex-direction: column;
          gap: 0.25ch;
          inset-block-start: 110%;
          inset-inline-start: 50%;
          padding: 0.25ch;
          position: absolute;
          transform: translateX(-50%);

          &[hidden] {
            display: none;
          }

          button {
            aspect-ratio: unset;
            flex-direction: row;
            font-weight: normal;
            gap: 1ch;
            justify-content: flex-start;
            padding: 0.75ch;
            padding-inline-end: 1.5ch;
            white-space: nowrap;

            span {
              display: inline-block;
            }

            svg {
              block-size: 1.3lh;
              inline-size: 1.3lh;
              fill: currentColor;
            }
          }
        }
      }

      .lexxy-table-control__button--delete-table {
        align-items: center;
        block-size: auto;
        font-weight: normal;
        justify-content: center;

        svg {
          block-size: 1.125em;
          inline-size: 1.125em;
          min-block-size: 1.125em;
          min-inline-size: 1.125em;
        }

        span {
          align-items: center;
          background: var(--lexxy-color-ink);
          border-radius: var(--floating-tools-radius);
          color: color-mix(in srgb, var(--lexxy-color-ink-inverted) 80%, transparent);
          display: flex;
          inset-inline-end: calc(var(--button-size) + 1ch);
          inset-block-start: 0;
          inset-block-end: 0;
          inset-inline-start: 0;
          justify-content: center;
          padding: 0.5ch 1ch;
          position: absolute;
          transition: all 0.2s ease-out;
          opacity: 0;
          pointer-events: none;
          white-space: nowrap;
        }

        &:hover {
          background-color: var(--lexxy-color-red);

          svg { color: var(--lexxy-color-ink-inverted); }

          span {
            opacity: 1;
          }
        }
      }
    }
  }


  /* --------------------------------------------------------------------------
  /* Attachment toolbar */

  &:is(lexxy-attachment-toolbar) {
    display: flex;
    /* The anchor is measured in px from the editor's top-left, so these stay physical. */
    left: calc(var(--lexxy-anchor-left) + var(--lexxy-anchor-width));
    top: var(--lexxy-anchor-top);
    transform: translate(calc(-100% - 1.5ch), 1.5ch);

    &[hidden] {
      display: none;
    }

    /* The divider is thinner than the button. */
    &[data-node-type="horizontal_divider"] {
      --button-size: 1.8lh;

      top: calc(var(--lexxy-anchor-top) + var(--lexxy-anchor-height) / 2);
      transform: translate(calc(-100% - 0.5ch), -50%);
    }

    &[data-presentation="inline"] {
      --button-size: 1.6lh;

      top: calc(var(--lexxy-anchor-top) + var(--lexxy-anchor-height) / 2);
      transform: translate(0.5ch, -50%);

      &[data-overflow] {
        transform: translate(-100%, -50%);
      }
    }

    .lexxy-floating-controls__group {
      display: flex;
    }

    button[hidden] {
      display: none;
    }

    .lexxy-attachment-toolbar__alternative-text {
      aspect-ratio: auto;
      margin-inline-end: calc(var(--lexxy-toolbar-spacing) + 1px);
      padding-inline: 1ch;
      position: relative;

      span {
        display: inline-block;
        font-size: 0.9em;
      }

      &:after {
        background-color: var(--lexxy-color-floating-controls-separator);
        block-size: 1.125em;
        content: "";
        display: block;
        inline-size: 1px;
        inset-block: 0;
        inset-inline-end: calc(-1 * var(--lexxy-toolbar-spacing));
        margin: auto;
        pointer-events: none;
        position: absolute;
      }
    }

    .lexxy-attachment-toolbar__remove:hover,
    .lexxy-attachment-toolbar__remove:focus-visible {
      background-color: var(--lexxy-color-red);
    }
  }


  /* --------------------------------------------------------------------------
  /* Language picker */

  &:is(lexxy-code-language-picker) {
    inset-inline-end: var(--lexxy-editor-padding);

    select {
      -webkit-appearance: none;
      appearance: none;
      background-color: var(--lexxy-color-canvas);
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
      background-position: center right 1ch;
      background-repeat: no-repeat;
      background-size: 1ch;
      block-size: 1.5lh;
      border: 1px solid var(--lexxy-color-ink-lighter);
      border-radius: var(--lexxy-radius);
      color: var(--lexxy-color-ink);
      font-family: var(--lexxy-font-base);
      font-size: var(--lexxy-text-small);
      font-weight: normal;
      margin: 0.5ch 0.5ch 0 -0.5ch;
      padding: 0 2ch 0 1ch;
      text-align: start;

      @media (prefers-color-scheme: dark) {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
      }
    }
  }
}


/* --------------------------------------------------------------------------
/* Prompt */

:where(.lexxy-prompt-menu) {
  --lexxy-prompt-avatar-size: 24px;
  --lexxy-prompt-padding: 0.5ch;

  --lexxy-prompt-offset-x: 0;
  --lexxy-prompt-offset-y: 0;

  background-color: var(--lexxy-color-canvas);
  border-radius: calc(var(--lexxy-prompt-padding) * 2);
  box-shadow: var(--lexxy-shadow);
  color: var(--lexxy-color-ink);
  font-family: var(--lexxy-font-base);
  font-size: var(--lexxy-text-small);
  list-style: none;
  inset-block-start: var(--lexxy-prompt-offset-y);
  inset-inline-start: var(--lexxy-prompt-offset-x);
  margin: 0;
  max-block-size: 200px;
  max-inline-size: min(20ch, calc(100% - var(--lexxy-prompt-offset-x)));
  min-inline-size: 20ch;
  overflow: auto;
  padding: var(--lexxy-prompt-padding);
  position: absolute;
  scroll-padding-block: calc(var(--lexxy-prompt-avatar-size) + var(--lexxy-prompt-padding) * 3);
  /* eslint-disable-next-line css/use-baseline */
  scrollbar-color: var(--lexxy-color-ink-light) transparent;
  /* eslint-disable-next-line css/use-baseline */
  scrollbar-width: thin;
  visibility: hidden;
  z-index: var(--lexxy-z-popup);

  &[data-clipped-at-right] {
    inset-inline-start: unset;
    inset-inline-end: 1ch;
    max-inline-size: calc(100% - 1ch);
  }

  &[data-clipped-at-bottom] {
    inset-block-start: unset;
    inset-block-end: var(--lexxy-prompt-offset-y);
  }
}

:where(.lexxy-prompt-menu--visible[data-anchored]) {
  visibility: initial;
}

:where(.lexxy-prompt-menu__item) {
  align-items: center;
  border-radius: var(--lexxy-radius);
  cursor: pointer;
  display: flex;
  gap: var(--lexxy-prompt-padding);
  padding: var(--lexxy-prompt-padding);

  &:hover {
    background-color: var(--lexxy-color-ink-lightest);
  }

  &[aria-selected] {
    background-color: var(--lexxy-color-selected);
  }

  img {
    block-size: var(--lexxy-prompt-avatar-size);
    border-radius: 50%;
    flex-shrink: 0;
    inline-size: var(--lexxy-prompt-avatar-size);
    margin: 0;
  }

  + & {
    margin-top: 2px;
  }
}

:where(.lexxy-prompt-menu__item--empty) {
  color: var(--lexxy-color-ink-medium);
  padding: var(--lexxy-prompt-padding);
}


/* --------------------------------------------------------------------------
/* Custom attachments */
action-text-attachment[content-type^="application/vnd.actiontext"] {
  &.node--selected {
    --lexxy-attachment-bg-color: var(--lexxy-color-accent-dark);
    --lexxy-attachment-text-color: var(--lexxy-color-ink-inverted);

    outline: none;
  }
}

/* --------------------------------------------------------------------------
/* Screen readers need access to announcements and selection labels. */
:where(lexxy-live-region, .lexxy-fake-selection) {
  block-size: 1px;
  border: 0;
  clip-path: inset(50%);
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

/* The DOM Selection API requires selectable text. */
.lexxy-fake-selection {
  -webkit-user-select: text;

  @supports (user-select: text) {
    user-select: text;
  }
}


/* Screen readers need the caption field outside the editor's textbox. */
:where(.lexxy-caption-editor) {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  background: var(--lexxy-color-canvas);
  border: 0;
  border-radius: var(--lexxy-radius);
  outline: 0;
  padding: 0;
  overflow: hidden;

  @supports (resize: none) {
    resize: none;
  }

  &[hidden] {
    display: none;
  }
}

.lexxy-alternative-text-dialog {
  background: var(--lexxy-color-canvas);
  border: 2px solid var(--lexxy-color-selected-hover);
  border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
  box-shadow: var(--lexxy-shadow);
  box-sizing: border-box;
  color: var(--lexxy-color-ink);
  font: inherit;
  inline-size: 60%;
  inset-block: calc(var(--lexxy-anchor-bottom) + var(--lexxy-toolbar-spacing)) auto;
  inset-inline: 0;
  margin-block: 0;
  margin-inline: auto;
  min-inline-size: min(20rem, 100%);
  overflow: auto;
  padding: var(--lexxy-toolbar-spacing);
  z-index: 3;

  h2 {
    font-size: inherit;
    font-weight: bold;
    line-height: 1.5;
    margin: 0;
    padding-block-start: calc(0.25 * var(--lexxy-text-small));
    padding-inline: calc(0.5 * var(--lexxy-text-small));
    text-align: center;
  }

  .lexxy-alternative-text-dialog__controls {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin-block-start: 0.5em;
  }

  textarea {
    background: var(--lexxy-color-canvas);
    border: 1px solid var(--lexxy-color-ink-lighter);
    border-radius: var(--lexxy-radius);
    box-sizing: border-box;
    color: inherit;
    display: block;
    font: inherit;
    font-size: var(--lexxy-text-small);
    font-weight: normal;
    min-block-size: calc(2lh + 1em + 2px);
    min-inline-size: 0;
    padding: 0.5em;

    @supports (field-sizing: content) {
      field-sizing: content;
    }

    @supports (resize: none) {
      resize: none;
    }
  }

  button {
    background-color: var(--lexxy-color-ink-lightest);
    block-size: var(--lexxy-toolbar-button-size);
    border: 0;
    border-radius: var(--lexxy-radius);
    color: currentColor;
    cursor: pointer;
    display: grid;
    font-size: var(--lexxy-text-small);
    inline-size: 100%;
    line-height: inherit;
    padding-inline: 2ch;
    place-items: center;

    &:hover {
      opacity: 0.8;
    }
  }

  .lexxy-alternative-text-dialog__save {
    background-color: var(--lexxy-color-accent-dark);
    color: var(--lexxy-color-ink-inverted);

    &:hover {
      background-color: var(--lexxy-color-accent-medium);
    }
  }

  textarea:focus-visible {
    outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
    outline-offset: var(--lexxy-focus-ring-offset);
  }

  .lexxy-alternative-text-dialog__actions {
    display: flex;
    gap: 0.5em;

    button {
      flex: 1;
    }
  }
}
/* Text styles
/* -------------------------------------------------------------------------- */

:where(.lexxy-content) {
  color: var(--lexxy-color-ink);
  font-size: var(--lexxy-text-size);

  h1, h2, h3, h4, h5, h6 {
    display: block;
    font-weight: bold;
    hyphens: auto;
    margin-block: 0 var(--lexxy-content-margin);
    overflow-wrap: break-word;

    @supports (text-wrap: balance) {
      text-wrap: balance;
    }
  }

  h1 { font-size: 2em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1.25em; }
  h4 { font-size: 1em; }
  h5 { font-size: 0.875em; }
  h6 { font-size: 0.75em; }

  p,
  ul,
  ol,
  dl,
  blockquote,
  figure,
  :where(.attachment),
  :where(.attachment-gallery) {
    margin-block: 0 var(--lexxy-content-margin);
    position: relative;

    &:not(lexxy-editor &) {
      overflow-wrap: break-word;

      @supports (text-wrap: pretty) {
        text-wrap: pretty;
      }
    }
  }

  :where(.lexxy-content__italic) {
    font-style: italic;
  }

  :where(.lexxy-content__bold) {
    font-weight: bold;
  }

  :where(.lexxy-content__strikethrough) {
    text-decoration: line-through;
  }

  :where(.lexxy-content__underline) {
    text-decoration: underline;
  }

  :where(.lexxy-content__strikethrough.lexxy-content__underline) {
    text-decoration: line-through underline;
  }

  mark,
  :where(.lexxy-content__highlight) {
    background-color: transparent;
    color: inherit;
  }

  blockquote {
    border-inline-start: 0.25em solid var(--lexxy-color-ink-lighter);
    font-style: italic;
    margin: var(--lexxy-content-margin) 0;
    padding: 0.5lh 2ch;

    em,
    i,
    :where(.lexxy-content__italic) {
      font-style: normal;
    }

    p:last-child {
      margin-block-end: 0;
    }
  }

  p:empty {
    display: none;
  }

  a {
    color: var(--lexxy-color-link);
    text-decoration: underline;
  }

  img,
  video,
  embed,
  object {
    inline-size: auto;
    margin-inline: auto;
    max-block-size: 32rem;
    object-fit: contain;

    a:has(&) {
      display: inline-block;
    }
  }

  code, pre {
    background-color: var(--lexxy-color-ink-lightest);
    border-radius: var(--lexxy-radius);
    color: var(--lexxy-color-ink);
    font-family: var(--lexxy-font-mono);
    font-size: 0.9em;
    padding: 0.25ch 0.5ch;

    &:is(pre),
    &[data-language] {
      border-radius: var(--lexxy-radius);
      display: block;
      hyphens: none;
      margin-block: 0 var(--lexxy-content-margin);
      overflow-x: auto;
      overflow-wrap: break-word;
      padding: 1ch;
      tab-size: 2;
      white-space: pre;

      @supports (text-wrap: nowrap) {
        text-wrap: nowrap;
      }
    }
  }

  ol, ul:not(:where(.lexxy-prompt-menu)) {
    margin-inline-start: calc(var(--lexxy-content-margin) * 1.5);
    padding: 0;
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  li:where(.lexxy-nested-listitem) {
    list-style-type: none;

    ol, ul {
      margin-block-end: 0;
    }
  }

  hr {
    border: 0;
    border-block-end: 1px solid currentColor;
    inline-size: 20%;
    margin: calc(0.5em + var(--lexxy-content-margin)) 0;
  }

  .horizontal-divider {
    margin: 0;
    padding: calc(0.5em + var(--lexxy-content-margin)) 0;

    hr {
      margin: 0;
    }
  }

  /* Kept at class specificity so it still outweighs the element margin rules above. */
  *:has(+ .horizontal-divider) {
    margin-block-end: 0;
  }

  > :last-child {
    margin-block-end: 0;
  }

  /* Keywords and attributes */
  :where(.code-token__attr),
  :where(.token.attr-name),
  :where(.token.atrule),
  :where(.token.attr),
  :where(.token.keyword) {
    color: var(--lexxy-color-code-token-att);
  }

  /* Constants, booleans, numbers, properties, tags */
  :where(.code-token__property),
  :where(.token.boolean),
  :where(.token.constant),
  :where(.token.number),
  :where(.token.property),
  :where(.token.symbol),
  :where(.token.tag) {
    color: var(--lexxy-color-code-token-property);
  }

  /* Strings, selectors, and built-in constructs */
  :where(.code-token__selector),
  :where(.token.attr-value),
  :where(.token.builtin),
  :where(.token.char),
  :where(.token.inserted),
  :where(.token.line),
  :where(.token.selector),
  :where(.token.string) {
    color: var(--lexxy-color-code-token-selector);
  }

  /* Comments and meta information */
  :where(.code-token__comment),
  :where(.token.cdata),
  :where(.token.comment),
  :where(.token.doctype),
  :where(.token.prolog) {
    color: var(--lexxy-color-code-token-comment);
    font-style: italic;
  }

  /* Operators and symbolic entities */
  :where(.code-token__operator),
  :where(.token.deleted),
  :where(.token.entity),
  :where(.token.operator),
  :where(.token.url),
  code[data-language="diff"] :where(.code-token__operator) + :where(.code-token__selector) {
    color: var(--lexxy-color-code-token-operator);
  }

  /* Functions and class names */
  :where(.code-token__function),
  :where(.token.class),
  :where(.token.class-name),
  :where(.token.function) {
    color: var(--lexxy-color-code-token-function);
  }

  /* Variables, regex, namespaces, important */
  :where(.code-token__variable),
  :where(.token.important),
  :where(.token.namespace),
  :where(.token.regex),
  :where(.token.variable) {
    color: var(--lexxy-color-code-token-variable);
  }

  /* Punctuation */
  :where(.code-token__punctuation),
  :where(.token.punctuation) {
    color: var(--lexxy-color-code-token-punctuation);
  }

  /* Tables */
  :where(.lexxy-content__table-wrapper) {
    margin: 0;
    margin-block: 1ch;
    overflow-x: auto;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    inline-size: calc(100% - 0.5ch);
    margin: 0.25ch;

    th,
    td {
      border: 1px solid var(--lexxy-color-ink-lighter);
      min-width: 5ch;
      max-width: 50ch;
      padding: 1ch;
      text-align: start;
      word-break: normal;

      *:last-child {
        margin-block-end: 0;
      }

      &:where(.lexxy-content__table-cell--header) {
        background-color: var(--lexxy-color-table-header-bg);
        font-weight: bold;
      }

      *:is(code, pre) {
        hyphens: auto;
        white-space: pre-wrap;

        @supports (text-wrap: wrap) {
          text-wrap: wrap;
        }
      }
    }
  }


  /* Attachments
  /* ------------------------------------------------------------------------ */

  p:has(:where(.attachment)) {
    text-align: center;
  }

  :where(.attachment) {
    --lexxy-attachment-gap: 0.75ch;

    block-size: auto;
    box-sizing: border-box;
    border-radius: var(--lexxy-radius);
    display: block;
    inline-size: fit-content;
    margin-inline: auto;
    max-inline-size: 100%;
    min-inline-size: 10ch;
    padding: var(--lexxy-attachment-gap);
    position: relative;
    text-align: center;
  }

  /* Element weight, so a bare `figure { margin: 0 }` reset loaded before Lexxy doesn't uncenter attachments. */
  figure:where(.attachment) {
    margin-inline: auto;
  }

  :where(.attachment__caption) {
    color: var(--lexxy-color-text-subtle);
    display: block;
    font-size: var(--lexxy-text-small);
    padding: 1ch;
  }

  :where(.attachment__icon) {
    aspect-ratio: 4/5;
    background-color: color-mix(var(--lexxy-attachment-icon-color), transparent 90%);
    block-size: 3lh;
    border: 1px solid var(--lexxy-attachment-icon-color);
    border-block-start-width: 1.5ch;
    border-radius: var(--lexxy-radius);
    box-sizing: border-box;
    color: var(--lexxy-attachment-icon-color);
    display: grid;
    font-size: var(--lexxy-text-small);
    font-weight: bold;
    inline-size: auto;
    overflow: hidden;
    place-content: center;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Kept at class specificity so it still outweighs the `a:has(img)` rule above. */
  .attachment--preview > a {
    display: block;
  }

  :where(.attachment--preview) {
    img, video {
      border-radius: var(--lexxy-radius);
      block-size: auto;
      display: block;
      margin-inline: auto;
      max-inline-size: 100%;
      -webkit-user-select: none;

      @supports (user-select: none) {
        user-select: none;
      }
    }

    :where(.attachment__caption) {
      padding-block-end: 0.5ch;
    }
  }

  :where(.attachment--file) {
    --lexxy-attachment-icon-color: var(--lexxy-color-text-subtle);

    align-items: center;
    display: flex;
    flex-wrap: wrap;
    inline-size: auto;

    :where(.attachment__caption) {
      display: grid;
      flex: 1;
      text-align: start;
    }

    :where(.attachment__name) {
      color: var(--lexxy-color-ink);
      font-weight: bold;
    }
  }

  :where(.attachment--psd),
  :where(.attachment--key),
  :where(.attachment--sketch),
  :where(.attachment--ai),
  :where(.attachment--eps),
  :where(.attachment--indd),
  :where(.attachment--svg),
  :where(.attachment--ppt),
  :where(.attachment--pptx) {
    --lexxy-attachment-icon-color: var(--lexxy-color-red);
  }

  :where(.attachment--css),
  :where(.attachment--php),
  :where(.attachment--json),
  :where(.attachment--htm),
  :where(.attachment--html),
  :where(.attachment--rb),
  :where(.attachment--erb),
  :where(.attachment--ts),
  :where(.attachment--js) {
    --lexxy-attachment-icon-color: var(--lexxy-color-purple);
  }

  :where(.attachment--txt),
  :where(.attachment--pages),
  :where(.attachment--rtf),
  :where(.attachment--md),
  :where(.attachment--doc),
  :where(.attachment--docx) {
    --lexxy-attachment-icon-color: var(--lexxy-color-blue);
  }

  :where(.attachment--csv),
  :where(.attachment--numbers),
  :where(.attachment--xls),
  :where(.attachment--xlsx) {
    --lexxy-attachment-icon-color: var(--lexxy-color-green);
  }

  :where(.attachment--error) {
    padding-block: 2ch;
  }


  /* Image galleries */
  /* ------------------------------------------------------------------------ */

  :where(.attachment-gallery) {
    display: block;
    text-align: center;

    :where(.attachment) {
      display: inline-flex;
      flex-direction: column;
      gap: 0;
      inline-size: calc(33.333% - 0.8ch);
      vertical-align: top;

      :where(.attachment__caption) {
        padding-block-end: 1ch;
      }
    }

    &:where(.attachment-gallery--2),
    &:where(.attachment-gallery--4) {
      :where(.attachment) {
        inline-size: calc(50% - 0.8ch);
      }
    }
  }


  /* Custom attachments such as mentions, etc. */
  /* ------------------------------------------------------------------------ */

  action-text-attachment[content-type^="application/vnd.actiontext"] {
    --lexxy-attachment-bg-color: transparent;
    --lexxy-attachment-image-size: 1em;
    --lexxy-attachment-text-color: currentColor;

    align-items: center;
    background: var(--lexxy-attachment-bg-color);
    border-radius: var(--lexxy-radius);
    color: var(--lexxy-attachment-text-color);
    display: inline-flex;
    gap: 0.25ch;
    margin: 0;
    padding: 0;
    position: relative;
    white-space: normal;

    /* Gecko drops the whole selection when a drag crosses a contenteditable="false"
       island unless it is selectable as a single unit. Editor-only: the rendered
       view has no contenteditable and must keep normal text selection. */
    lexxy-editor & {
      -webkit-user-select: all;

      @supports (user-select: all) {
        user-select: all;
      }
    }

    img {
      block-size: var(--lexxy-attachment-image-size);
      border-radius: 50%;
      inline-size: var(--lexxy-attachment-image-size);
    }
  }


  /* Horizontal divider */
  /* ------------------------------------------------------------------------ */

  /* Kept at class specificity: the editor renders the divider as a figure, and this must outweigh the figure margin rule above. */
  .horizontal-divider {
    margin: 0;
    margin-block-end: .5em;
    padding: 1.5em 0 .5em;

    hr {
      border: 0;
      border-block-end: 1px solid currentColor;
      inline-size: 20%;
      margin: 0;
    }
  }
}
/* OctaSpace Lexxy Editor Theme
 * Overrides for Lexxy editor to match OctaSpace design system
 * Adapted from Fizzy reference implementation
 */

:root {
  /* Light mode */
  --lexxy-color-ink: #0a0a0a;
  --lexxy-color-ink-medium: #737373;
  --lexxy-color-ink-light: #a3a3a3;
  --lexxy-color-ink-lighter: #e4e4e7;
  --lexxy-color-ink-lightest: #f4f4f5;
  --lexxy-color-ink-inverted: #ffffff;

  --lexxy-color-accent-dark: #8a1475;
  --lexxy-color-accent-medium: #B11995;
  --lexxy-color-accent-light: rgba(177, 25, 149, 0.15);
  --lexxy-color-accent-lightest: rgba(177, 25, 149, 0.08);
  --lexxy-color-link: #B11995;
  --lexxy-color-link-hover: #8a1475;

  /* Transparent canvas - inherits form background */
  --lexxy-color-canvas: transparent;
  /* Solid canvas for dropdowns/popups */
  --lexxy-color-canvas-solid: #ffffff;
  --lexxy-color-selected: var(--lexxy-color-accent-lightest);
  --lexxy-color-selected-hover: var(--lexxy-color-accent-light);
  --lexxy-color-selected-dark: #B11995;

  /* Code block specific - Monokai background */
  --lexxy-code-bg: #272822;
  --lexxy-code-text: #f8f8f2;
  --lexxy-code-border: #3e3d32;

  /* Syntax highlighting colors - Monokai theme */
  --lexxy-token-keyword: #f92672;    /* Pink - keywords, control flow */
  --lexxy-token-string: #e6db74;     /* Yellow - strings */
  --lexxy-token-comment: #75715e;    /* Grey-brown - comments */
  --lexxy-token-function: #66d9ef;   /* Cyan - functions, methods */
  --lexxy-token-variable: #fd971f;   /* Orange - variables, parameters */
  --lexxy-token-property: #ae81ff;   /* Purple - numbers, constants */
  --lexxy-token-operator: #f92672;   /* Pink - operators */
  --lexxy-token-punctuation: #f8f8f2; /* Light - punctuation */
  --lexxy-token-number: #ae81ff;     /* Purple - numbers */
  --lexxy-token-class: #a6e22e;      /* Green - class names, types */

  --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  --lexxy-radius: 6px;

  /* Highlight text colors */
  --highlight-1: rgb(136, 118, 38);   /* muted gold */
  --highlight-2: rgb(185, 94, 6);     /* burnt orange */
  --highlight-3: rgb(207, 0, 0);      /* bright red */
  --highlight-4: rgb(216, 28, 170);   /* magenta */
  --highlight-5: rgb(144, 19, 254);   /* violet */
  --highlight-6: rgb(5, 98, 185);     /* deep blue */
  --highlight-7: rgb(17, 138, 15);    /* forest green */
  --highlight-8: rgb(148, 82, 22);    /* brown */
  --highlight-9: rgb(102, 102, 102);  /* gray */

  /* Highlight background colors */
  --highlight-bg-1: rgba(229, 223, 6, 0.3);   /* yellow */
  --highlight-bg-2: rgba(255, 185, 87, 0.3);  /* peach */
  --highlight-bg-3: rgba(255, 118, 118, 0.3); /* light red */
  --highlight-bg-4: rgba(248, 137, 216, 0.3); /* pink */
  --highlight-bg-5: rgba(190, 165, 255, 0.3); /* lavender */
  --highlight-bg-6: rgba(124, 192, 252, 0.3); /* sky blue */
  --highlight-bg-7: rgba(140, 255, 129, 0.3); /* mint green */
  --highlight-bg-8: rgba(221, 170, 123, 0.3); /* tan */
  --highlight-bg-9: rgba(200, 200, 200, 0.3); /* light gray */

  /* Lexxy dropdown button size */
  --lexxy-dropdown-btn-size: 2.5em;
}

/* Dark mode */
.dark {
  --lexxy-color-ink: #fafafa;
  --lexxy-color-ink-medium: #a3a3a3;
  --lexxy-color-ink-light: #52525b;
  --lexxy-color-ink-lighter: #3f3f46;
  --lexxy-color-ink-lightest: #27272a;
  --lexxy-color-ink-inverted: #0a0a0a;

  --lexxy-color-accent-dark: #c026d3;
  --lexxy-color-accent-medium: #B11995;
  --lexxy-color-accent-light: rgba(177, 25, 149, 0.25);
  --lexxy-color-accent-lightest: rgba(177, 25, 149, 0.12);
  /* The primary accent is below AA contrast on the dark canvas, so links use
     a related, lighter magenta and retain their underline as a second cue. */
  --lexxy-color-link: #d946ef;
  --lexxy-color-link-hover: #e879f9;

  /* Transparent canvas - inherits form background */
  --lexxy-color-canvas: transparent;
  /* Solid canvas for dropdowns/popups */
  --lexxy-color-canvas-solid: #171717;
  --lexxy-color-selected: var(--lexxy-color-accent-lightest);
  --lexxy-color-selected-hover: var(--lexxy-color-accent-light);

  /* Code block specific - Monokai background (slightly darker for dark mode) */
  --lexxy-code-bg: #1e1e1a;
  --lexxy-code-text: #f8f8f2;
  --lexxy-code-border: #3e3d32;

  /* Syntax highlighting colors - Monokai theme (same for dark mode) */
  --lexxy-token-keyword: #f92672;    /* Pink - keywords, control flow */
  --lexxy-token-string: #e6db74;     /* Yellow - strings */
  --lexxy-token-comment: #75715e;    /* Grey-brown - comments */
  --lexxy-token-function: #66d9ef;   /* Cyan - functions, methods */
  --lexxy-token-variable: #fd971f;   /* Orange - variables, parameters */
  --lexxy-token-property: #ae81ff;   /* Purple - numbers, constants */
  --lexxy-token-operator: #f92672;   /* Pink - operators */
  --lexxy-token-punctuation: #f8f8f2; /* Light - punctuation */
  --lexxy-token-number: #ae81ff;     /* Purple - numbers */
  --lexxy-token-class: #a6e22e;      /* Green - class names, types */

  --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Editor container */
lexxy-editor {
  background-color: var(--lexxy-color-canvas);
  border: 1px solid var(--lexxy-color-ink-lighter);
  border-radius: var(--lexxy-radius);
  color: var(--lexxy-color-ink);
  font-size: 0.875rem;
  line-height: 1.5;

  /* Reference styles */
  display: block;
  position: relative;
  overflow: visible;

  /* Hide upload button when attachments are disabled */
  &[data-attachments="false"] button[name="upload"] {
    display: none;
  }
}

lexxy-editor:focus-within {
  border-color: var(--lexxy-color-ink-light);
  box-shadow: 0 0 0 3px rgba(82, 82, 82, 0.15);
}

.dark lexxy-editor:focus-within {
  box-shadow: 0 0 0 3px rgba(82, 82, 82, 0.25);
}

/* Toolbar */
lexxy-toolbar {
  --lexxy-toolbar-icon-size: 1em;

  background-color: var(--lexxy-color-canvas);
  border-block-end: 1px solid var(--lexxy-color-ink-lighter);
  /* Match parent border-radius at top corners */
  border-radius: calc(var(--lexxy-radius) - 1px) calc(var(--lexxy-radius) - 1px) 0 0;
  color: var(--lexxy-color-ink-medium);
  display: flex;
  font-size: 0.875rem;
  gap: 2px;
  /* Offset margin to cover border gap */
  margin: -1px -1px 0 -1px;
  padding: 4px 5px;
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
}

.lexxy-editor__toolbar-button {
  --toolbar-button-size: 32px;

  appearance: none;
  aspect-ratio: 1;
  background-color: transparent;
  block-size: var(--toolbar-button-size);
  border: none;
  border-radius: 4px;
  color: var(--lexxy-color-ink-medium);
  cursor: pointer;
  display: grid;
  font-size: inherit;
  place-items: center;
  transition: background-color 0.15s, color 0.15s;
}

.lexxy-editor__toolbar-button:hover {
  background-color: var(--lexxy-color-ink-lightest);
  color: var(--lexxy-color-ink);
}

.lexxy-editor__toolbar-button:active,
.lexxy-editor__toolbar-button[aria-pressed="true"] {
  background-color: var(--lexxy-color-selected);
  color: var(--lexxy-color-accent-medium);
}

.lexxy-editor__toolbar-button[aria-disabled="true"] {
  cursor: default;
  opacity: 0.35;
}

.lexxy-editor__toolbar-button svg {
  block-size: var(--lexxy-toolbar-icon-size);
  fill: currentColor;
  inline-size: var(--lexxy-toolbar-icon-size);
}

.lexxy-editor__toolbar-spacer {
  flex: 1;
  min-inline-size: 8px;
}

/* Content area */
.lexxy-editor__content {
  min-block-size: 200px;
  outline: 0;
  padding: 12px;
}

/* Placeholder styling */
.lexxy-editor--empty .lexxy-editor__content:not(:has(ul, ol))::before {
  color: var(--lexxy-color-ink-light);
  opacity: 0.7;
}

/* Dropdowns */
.lexxy-editor__toolbar-dropdown-content {
  background-color: var(--lexxy-color-canvas-solid);
  border: 1px solid var(--lexxy-color-ink-lighter);
  border-radius: var(--lexxy-radius);
  box-shadow: var(--lexxy-shadow);
  padding: 8px;
  position: absolute;
  z-index: 100;
}

/* Highlight Dropdown */
lexxy-highlight-dropdown {
  --gap: 0.5ch;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

lexxy-highlight-dropdown [data-button-group] {
  display: flex;
  flex-direction: row;
  gap: var(--gap);
  flex-wrap: wrap;
}

/* Highlight color buttons */
.lexxy-highlight-button {
  appearance: none;
  background-color: var(--lexxy-color-canvas-solid);
  border: 1px solid var(--lexxy-color-ink-lighter);
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  display: grid;
  font-size: 0.875rem;
  font-weight: 600;
  width: var(--lexxy-dropdown-btn-size);
  height: var(--lexxy-dropdown-btn-size);
  place-content: center;
  position: relative;
  transition: box-shadow 0.15s ease, opacity 0.15s ease;
}

.lexxy-highlight-button::after {
  content: "Aa";
}

.lexxy-highlight-button:hover {
  opacity: 0.85;
  box-shadow: 0 0 0 2px var(--lexxy-color-ink-lighter);
}

.lexxy-highlight-button[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--lexxy-color-accent-medium);
}

.lexxy-highlight-button[aria-pressed="true"]::after {
  content: "✓";
}

/* Reset highlight button */
.lexxy-editor__toolbar-dropdown-reset {
  appearance: none;
  background-color: transparent;
  border: 1px solid var(--lexxy-color-ink-lighter);
  border-radius: 99rem;
  color: var(--lexxy-color-ink);
  cursor: pointer;
  font-size: 0.75rem;
  margin-top: 0.5em;
  padding: 0.5em 1em;
  width: 100%;
  transition: background-color 0.15s ease;
}

.lexxy-editor__toolbar-dropdown-reset:hover:not(:disabled) {
  background-color: var(--lexxy-color-ink-lightest);
}

.lexxy-editor__toolbar-dropdown-reset:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

lexxy-link-dropdown input[type="url"] {
  background-color: var(--lexxy-color-canvas-solid);
  border: 1px solid var(--lexxy-color-ink-lighter);
  border-radius: 4px;
  color: var(--lexxy-color-ink);
  padding: 6px 10px;
  min-inline-size: 30ch;
}

lexxy-link-dropdown button[type="submit"] {
  background-color: var(--lexxy-color-accent-medium);
  color: white;
  border-radius: 4px;
  padding: 6px 12px;
}

lexxy-link-dropdown button[type="submit"]:hover {
  background-color: var(--lexxy-color-accent-dark);
}

/* Prompt menu (mentions) */
.lexxy-prompt-menu {
  background-color: var(--lexxy-color-canvas-solid);
  border: 1px solid var(--lexxy-color-ink-lighter);
  border-radius: var(--lexxy-radius);
  box-shadow: var(--lexxy-shadow);
  z-index: 100;
}

.lexxy-prompt-menu__item:hover {
  background-color: var(--lexxy-color-ink-lightest);
}

.lexxy-prompt-menu__item[aria-selected] {
  background-color: var(--lexxy-color-selected);
}

/* Code Language Picker (Pill Style from Fizzy) */
.lexxy-code-language-picker {
  --caret-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
  --caret-icon-dark: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");

  -webkit-appearance: none;
  appearance: none;
  background-color: var(--lexxy-color-canvas-solid);
  background-image: var(--caret-icon);
  background-position: center right 0.7em;
  background-repeat: no-repeat;
  background-size: 0.45em;
  border: 1px solid var(--lexxy-color-ink-light);
  border-radius: 99rem;
  color: var(--lexxy-color-ink);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.3;
  /* Position on the right side, inside code block */
  right: 1.5em;
  margin-top: 0.35em;
  padding: 6px 12px;
  text-align: start;

  /* Hidden by default - show only when code block is active */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Show language picker when editor has focus and code block exists */
lexxy-editor:focus-within .lexxy-code-language-picker {
  opacity: 1;
  visibility: visible;
}

/* Dark mode handling for caret */
.dark .lexxy-code-language-picker {
  background-image: var(--caret-icon-dark);
}

.lexxy-code-language-picker option {
  background-color: var(--lexxy-color-canvas-solid);
  color: var(--lexxy-color-ink);
}

/* Character counter */
.lexxy-character-counter {
  color: var(--lexxy-color-ink-light);
  font-size: 0.75rem;
  margin-top: 6px;
  text-align: right;
}

.lexxy-character-counter.warning {
  color: #f59e0b;
}

.lexxy-character-counter.error {
  color: #ef4444;
}

/* Attachment Caption Styling */
/* High specificity to override Tailwind Forms plugin defaults */
.trix-content figure.attachment .attachment__caption textarea,
trix-editor figure.attachment .attachment__caption textarea,
figure.attachment .attachment__caption textarea {
  font-size: 0.85em;
  color: var(--lexxy-color-ink-medium);
  text-align: center;
  margin-top: 0.5rem;
  
  /* Reset form styles */
  appearance: none;
  -webkit-appearance: none;
  border: none !important;
  border-radius: 4px;
  width: 100%;
  resize: none;
  text-align: center;
  padding: 0.2rem;
  font-family: inherit;
  
  /* Crucial: Override background */
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.trix-content figure.attachment .attachment__caption textarea:focus,
trix-editor figure.attachment .attachment__caption textarea:focus,
figure.attachment .attachment__caption textarea:focus {
  outline: none;
  background-color: var(--lexxy-color-canvas-solid) !important;
  color: var(--lexxy-color-ink);
  box-shadow: 0 0 0 2px var(--lexxy-color-ink-lighter) !important;
}

.dark .trix-content figure.attachment .attachment__caption textarea:focus,
.dark trix-editor figure.attachment .attachment__caption textarea:focus,
.dark figure.attachment .attachment__caption textarea:focus {
  background-color: #27272a !important; /* Zinc 800 */
  box-shadow: 0 0 0 2px #3f3f46 !important; /* Zinc 700 */
}

.trix-content figure.attachment .attachment__caption textarea::placeholder,
trix-editor figure.attachment .attachment__caption textarea::placeholder,
figure.attachment .attachment__caption textarea::placeholder {
  color: var(--lexxy-color-ink-light);
  opacity: 0.7;
}

/* Hide file size by default for nicer look */
.trix-content .attachment__size,
trix-editor .attachment__size {
  display: none;
}

/* Center attachment previews */
.trix-content .attachment,
trix-editor .attachment,
figure.attachment {
  display: block !important;
  inline-size: fit-content;
  max-inline-size: 100%;
  position: relative;
}

.trix-content .attachment--preview,
trix-editor .attachment--preview,
figure.attachment.attachment--preview {
  margin-inline: auto !important;
  text-align: center;
}

.trix-content .attachment--preview img,
trix-editor .attachment--preview img,
figure.attachment.attachment--preview img {
  display: block;
  margin-inline: auto;
  max-inline-size: 100%;
  block-size: auto;
}


/* Mobile adjustments */
@media (max-width: 640px) {
  .lexxy-editor__toolbar-button {
    --toolbar-button-size: 36px;
  }

  lexxy-toolbar {
    padding: 2px;
  }

  .lexxy-editor__content {
    min-block-size: 150px;
    padding: 10px;
  }
}

/* Rich text content display (Adapted from rich-text-content.css) */
.rich-text-content,
.lexxy-editor__content {
  color: var(--lexxy-color-ink);
  font-size: 0.875rem;
  line-height: 1.625;
  --block-margin: 0.5lh;
}

.rich-text-content h1, .lexxy-editor__content h1,
.rich-text-content h2, .lexxy-editor__content h2,
.rich-text-content h3, .lexxy-editor__content h3,
.rich-text-content h4, .lexxy-editor__content h4,
.rich-text-content h5, .lexxy-editor__content h5,
.rich-text-content h6, .lexxy-editor__content h6 {
  color: var(--lexxy-color-ink);
  display: block;
  font-weight: 800;
  letter-spacing: -0.02ch;
  line-height: 1.1;
  margin-block: 1em var(--block-margin); /* Adjusted top margin for better spacing */
  overflow-wrap: break-word;
  text-wrap: balance;
}

.rich-text-content h1, .lexxy-editor__content h1 { font-size: 2em; }
.rich-text-content h2, .lexxy-editor__content h2 { font-size: 1.5em; }
.rich-text-content h3, .lexxy-editor__content h3 { font-size: 1.17em; }
.rich-text-content h4, .lexxy-editor__content h4 { font-size: 1em; }

.rich-text-content p, .lexxy-editor__content p { 
  margin-block: 0 var(--block-margin); 
}

.rich-text-content p:empty, .lexxy-editor__content p:empty {
  display: none;
}

.rich-text-content ul, .lexxy-editor__content ul,
.rich-text-content ol, .lexxy-editor__content ol {
  margin-block: 0 var(--block-margin);
  padding-inline-start: 3ch;
}

.rich-text-content ul, .lexxy-editor__content ul { list-style-type: disc; }
.rich-text-content ol, .lexxy-editor__content ol { list-style-type: decimal; }

.rich-text-content li, .lexxy-editor__content li { margin: 0.25rem 0; }

.rich-text-content blockquote, .lexxy-editor__content blockquote {
  border-inline-start: 0.25em solid var(--lexxy-color-ink-lighter);
  color: var(--lexxy-color-ink-medium);
  font-style: italic;
  margin: var(--block-margin) 0;
  padding-inline-start: 2ch;
}

/* Inline code */
.rich-text-content code, .lexxy-editor__content code {
  background-color: var(--lexxy-color-ink-lightest);
  border: 1px solid var(--lexxy-color-ink-lighter);
  border-radius: 0.3em;
  color: var(--lexxy-color-ink);
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  font-weight: 500;
  padding: 0.1em 0.3em;
}

/* Code blocks - distinct dark background (like in Fizzy reference) */
.rich-text-content pre, .lexxy-editor__content pre,
.lexxy-editor__content code[data-language],
.lexxy-editor__content code[spellcheck="false"] {
  background-color: var(--lexxy-code-bg);
  border: 1px solid var(--lexxy-code-border);
  border-radius: 0.5em;
  color: var(--lexxy-code-text);
  display: block;
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  font-weight: 400;
  margin-block: var(--block-margin);
  overflow-x: auto;
  padding: 0.75em 1em;
  tab-size: 2;
  text-wrap: nowrap;
  white-space: pre;
}

.rich-text-content pre code, .lexxy-editor__content pre code {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
}

.rich-text-content a, .lexxy-editor__content a {
  color: var(--lexxy-color-link);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
}

.rich-text-content a:hover, .lexxy-editor__content a:hover {
  color: var(--lexxy-color-link-hover);
}

/* ==========================================================================
   Syntax Highlighting (Lexxy code-token classes)
   Lexxy uses custom class names: code-token__attr, code-token__property, etc.
   ========================================================================== */

/* Keywords, attributes, directives: def, end, class, function, if, else, etc. */
.lexxy-editor__content .code-token__attr,
.rich-text-content .code-token__attr {
  color: var(--lexxy-token-keyword);
}

/* Strings, selectors, char, inserted */
.lexxy-editor__content .code-token__selector,
.rich-text-content .code-token__selector {
  color: var(--lexxy-token-string);
}

/* Comments, doctype, prolog */
.lexxy-editor__content .code-token__comment,
.rich-text-content .code-token__comment {
  color: var(--lexxy-token-comment);
  font-style: italic;
}

/* Functions, class names, decorators */
.lexxy-editor__content .code-token__function,
.rich-text-content .code-token__function {
  color: var(--lexxy-token-function);
}

/* Variables, parameters, regex, namespace */
.lexxy-editor__content .code-token__variable,
.rich-text-content .code-token__variable {
  color: var(--lexxy-token-variable);
}

/* Properties, constants, booleans, numbers, tags */
.lexxy-editor__content .code-token__property,
.rich-text-content .code-token__property {
  color: var(--lexxy-token-property);
}

/* Operators, entities, urls, deleted */
.lexxy-editor__content .code-token__operator,
.rich-text-content .code-token__operator {
  color: var(--lexxy-token-operator);
}

/* Punctuation: (), {}, [], ;, : */
.lexxy-editor__content .code-token__punctuation,
.rich-text-content .code-token__punctuation {
  color: var(--lexxy-token-punctuation);
}

/* ==========================================================================
   Lexxy Text Formatting Classes
   ========================================================================== */

/*
 * Inline text formatting
 *
 * Lexxy writes its own classes. Semantic HTML aliases keep saved ActionText,
 * pasted Markdown-derived HTML, and the live editor visually identical.
 */
.lexxy-editor__content :is(.lexxy-content__bold, b, strong),
.rich-text-content :is(.lexxy-content__bold, b, strong) {
  font-weight: 700;
}

.lexxy-editor__content :is(.lexxy-content__italic, em, i),
.rich-text-content :is(.lexxy-content__italic, em, i) {
  font-style: italic;

  /* Cube ships Satoshi's upright variable face only. Allow a synthesized
     oblique solely for emphasis, while preserving real variable weights. */
  font-synthesis: auto;
  font-synthesis: style;
}

.lexxy-editor__content :is(.lexxy-content__strikethrough, del, s),
.rich-text-content :is(.lexxy-content__strikethrough, del, s) {
  text-decoration-line: line-through;
  text-decoration-thickness: 0.08em;
}

.lexxy-editor__content :is(.lexxy-content__underline, u),
.rich-text-content :is(.lexxy-content__underline, u) {
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
}

/* Longhand decorations avoid the later underline rule masking a strike. */
.lexxy-editor__content .lexxy-content__strikethrough.lexxy-content__underline,
.rich-text-content .lexxy-content__strikethrough.lexxy-content__underline {
  text-decoration-line: line-through underline;
}

.lexxy-editor__content :is(.lexxy-content__subscript, sub),
.rich-text-content :is(.lexxy-content__subscript, sub),
.lexxy-editor__content :is(.lexxy-content__superscript, sup),
.rich-text-content :is(.lexxy-content__superscript, sup) {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

.lexxy-editor__content :is(.lexxy-content__subscript, sub),
.rich-text-content :is(.lexxy-content__subscript, sub) {
  bottom: -0.25em;
}

.lexxy-editor__content :is(.lexxy-content__superscript, sup),
.rich-text-content :is(.lexxy-content__superscript, sup) {
  top: -0.5em;
}

/* Highlight colours are written inline by Lexxy and must remain authoritative. */
.lexxy-editor__content :is(.lexxy-content__highlight, mark),
.rich-text-content :is(.lexxy-content__highlight, mark) {
  border-radius: 0.2em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.1em 0.2em;
}

/*
 * Markdown typography
 *
 * The editor and rendered README use the same compact, GitHub-inspired rhythm.
 * Keeping these values in one place prevents browser defaults from making lists
 * and nested blocks visually drift apart.
 */
.rich-text-content,
.lexxy-editor__content {
  --markdown-font-size: 0.875rem;
  --markdown-line-height: 1.6;
  --markdown-block-space: 0.75rem;
  --markdown-heading-space: 1.5rem;
  --markdown-list-indent: 1.125rem;
  --markdown-nested-list-indent: 1rem;
  --markdown-list-item-space: 0.25rem;

  font-size: var(--markdown-font-size);
  line-height: var(--markdown-line-height);
}

.rich-text-content > :first-child,
.lexxy-editor__content > :first-child {
  margin-block-start: 0;
}

.rich-text-content > :last-child,
.lexxy-editor__content > :last-child {
  margin-block-end: 0;
}

.rich-text-content h1, .lexxy-editor__content h1,
.rich-text-content h2, .lexxy-editor__content h2,
.rich-text-content h3, .lexxy-editor__content h3,
.rich-text-content h4, .lexxy-editor__content h4,
.rich-text-content h5, .lexxy-editor__content h5,
.rich-text-content h6, .lexxy-editor__content h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-block: var(--markdown-heading-space) var(--markdown-block-space);
  text-wrap: balance;
}

.rich-text-content h1, .lexxy-editor__content h1 { font-size: 1.5em; }
.rich-text-content h2, .lexxy-editor__content h2 { font-size: 1.25em; }
.rich-text-content h3, .lexxy-editor__content h3 { font-size: 1.125em; }
.rich-text-content h4, .lexxy-editor__content h4,
.rich-text-content h5, .lexxy-editor__content h5,
.rich-text-content h6, .lexxy-editor__content h6 { font-size: 1em; }

.rich-text-content p,
.lexxy-editor__content p,
.rich-text-content ul,
.lexxy-editor__content ul,
.rich-text-content ol,
.lexxy-editor__content ol,
.rich-text-content blockquote,
.lexxy-editor__content blockquote,
.rich-text-content pre,
.lexxy-editor__content pre,
.rich-text-content figure,
.lexxy-editor__content figure,
.rich-text-content table,
.lexxy-editor__content table {
  margin-block: 0 var(--markdown-block-space);
}

.rich-text-content ul, .lexxy-editor__content ul,
.rich-text-content ol, .lexxy-editor__content ol {
  margin-inline: 0;
  padding-inline-start: var(--markdown-list-indent);
}

.rich-text-content li,
.lexxy-editor__content li {
  margin-block: 0;
}

.rich-text-content li + li,
.lexxy-editor__content li + li {
  margin-block-start: var(--markdown-list-item-space);
}

.rich-text-content li > ul, .lexxy-editor__content li > ul,
.rich-text-content li > ol, .lexxy-editor__content li > ol {
  margin-block: var(--markdown-list-item-space) 0;
  padding-inline-start: var(--markdown-nested-list-indent);
}

.rich-text-content li > p,
.lexxy-editor__content li > p {
  margin-block: var(--markdown-list-item-space);
}

.rich-text-content li > p:first-child,
.lexxy-editor__content li > p:first-child {
  margin-block-start: 0;
}

.rich-text-content li > p:last-child,
.lexxy-editor__content li > p:last-child {
  margin-block-end: 0;
}

.rich-text-content blockquote,
.lexxy-editor__content blockquote {
  margin-inline: 0;
  padding: 0 1rem;
}

.rich-text-content hr,
.lexxy-editor__content hr {
  border: 0;
  border-block-start: 1px solid var(--lexxy-color-ink-lighter);
  margin-block: 1.5rem;
}

.rich-text-content code,
.lexxy-editor__content code {
  font-size: 0.85em;
  font-weight: 400;
  padding: 0.15em 0.35em;
}

.rich-text-content pre,
.lexxy-editor__content pre,
.lexxy-editor__content code[data-language],
.lexxy-editor__content code[spellcheck="false"] {
  border-radius: var(--lexxy-radius);
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: 0.75rem 1rem;
}

.rich-text-content table,
.lexxy-editor__content table {
  border-collapse: collapse;
  display: block;
  max-inline-size: 100%;
  overflow-x: auto;
  width: max-content;
}

.rich-text-content th, .lexxy-editor__content th,
.rich-text-content td, .lexxy-editor__content td {
  border: 1px solid var(--lexxy-color-ink-lighter);
  padding: 0.375rem 0.625rem;
  text-align: start;
}

.rich-text-content th,
.lexxy-editor__content th {
  background-color: var(--lexxy-color-ink-lightest);
  font-weight: 600;
}
/* Базовые стили контейнера */
[data-controller="chat-swipe"] {
  position: relative;
  overflow: hidden;
  touch-action: pan-y; /* Разрешить вертикальный скролл */
}

/* Стили для основного содержимого */
[data-controller="chat-swipe"] [data-chat-swipe-target="content"] {
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
  transform: translateX(0); /* Начальное положение */
  will-change: transform; /* Оптимизация производительности */
}

/* Стили для контейнера действий */
[data-controller="chat-swipe"] [data-chat-swipe-target="actions"] {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  transition: transform 0.3s ease;
  transform: translateX(100%); /* Начальное положение - спрятан */
  z-index: 0;
  will-change: transform; /* Оптимизация производительности */
}

/* Стили для кнопки действия */
[data-controller="chat-swipe"] [data-chat-swipe-target="actions"] a {
  height: 100%;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  transition: background-color 0.2s;
  -webkit-tap-highlight-color: transparent; /* Убираем подсветку при тапе на мобильных */
}

/* Эффект нажатия на кнопку */
[data-controller="chat-swipe"] [data-chat-swipe-target="actions"] a:active {
  background-color: #dc2626; /* Темно-красный при нажатии */
}

/* Класс для визуального эффекта при свайпе */
[data-controller="chat-swipe"] [data-chat-swipe-target="content"].swiped {
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}

/* Поддержка темной темы */
@media (prefers-color-scheme: dark) {
  [data-controller="chat-swipe"] [data-chat-swipe-target="content"].swiped {
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.4);
  }
  
  [data-controller="chat-swipe"] [data-chat-swipe-target="actions"] a:active {
    background-color: #b91c1c; /* Более темный красный для темной темы */
  }
}

/* Дополнительные стили для лучшей поддержки мобильных */
@media (max-width: 768px) {
  /* Увеличиваем размер кнопки для лучшего UX на мобильных */
  [data-controller="chat-swipe"] [data-chat-swipe-target="actions"] a {
    padding: 0 2rem;
  }
  
  /* Улучшаем отзывчивость на мобильных */
  [data-controller="chat-swipe"] [data-chat-swipe-target="content"] {
    touch-action: pan-y pinch-zoom; /* Поддержка жестов зума и вертикального скролла */
  }
}

/* Предотвращаем выделение текста при свайпе */
[data-controller="chat-swipe"] * {
  user-select: none;
  -webkit-user-select: none;
}

/* Hover эффект для карточек чата */
.chat-content:not(.active-chat):hover {
  background-color: rgba(156, 163, 175, 0.15) !important;
}

.dark .chat-content:not(.active-chat):hover {
  background-color: rgba(156, 163, 175, 0.25) !important;
}

/* Отключаем hover эффект карточки при наведении на ссылки внутри */
.chat-content:has(a:hover):not(.active-chat) {
  background-color: transparent !important;
}

.dark .chat-content:has(a:hover):not(.active-chat) {
  background-color: transparent !important;
}

/* app/assets/stylesheets/components/image_upload.css */

/* Контейнер для загружаемого изображения */
.upload-container {
  position: relative;
  width: 5rem;
  height: 5rem;
  margin-bottom: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Превью изображения */
.upload-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}

/* Затемняющий оверлей */
.upload-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 0.5rem;
}

/* Контейнер для индикатора прогресса */
.upload-progress-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Круг прогресса */
.upload-progress-circle {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  overflow: hidden;
}

/* Заполнение прогресса */
.upload-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.2s ease-out;
}

/* Центральная часть с процентами */
.upload-progress-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  z-index: 2;
}

/* Кнопка отмены загрузки */
.upload-btn-cancel {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  background-color: rgba(239, 68, 68, 1);
  color: white;
  border-radius: 9999px;
  z-index: 10;
  cursor: pointer;
}

/* Кнопка удаления загруженного файла */
.upload-btn-delete {
  position: absolute;
  display: none;
  justify-content: center;
  align-items: center;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  background-color: rgba(239, 68, 68, 1);
  color: white;
  border-radius: 9999px;
  z-index: 10;
  cursor: pointer;
}

/* Метка успешной загрузки */
.upload-success-mark {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 0.25rem;
  right: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  background-color: rgba(34, 197, 94, 1);
  color: white;
  border-radius: 9999px;
}

/* Показ кнопки удаления при наведении */
.group:hover .upload-btn-delete {
  display: flex;
}

/* Стили для сообщений */
.message {
  margin-bottom: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

.message-info {
  background-color: rgba(59, 130, 246, 0.1);
  border: 1px solid #D32CB4;
  color: #D32CB4;
}

.message-error {
  background-color: linear-gradient(90deg, #161A26 0%, #040207 101.09%);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: rgb(185, 28, 28);
}

.message-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.message-close {
  margin-left: 0.5rem;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

/* Стили для контейнера при активном состоянии dropzone */
.dropzone-active {
  outline: 1px solid #D32CB4;
  background-color: rgba(211, 44, 180, 0.05);
  position: relative;
}

/* Основной индикатор dropzone */
.dropzone-indicator {
  position: absolute;
  background-color: rgba(59, 130, 246, 0.1);
  border: 1px solid #D32CB4;
  color: #D32CB4;
  opacity: .8;
  border-radius: 9px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  z-index: 50;
  pointer-events: none; /* Чтобы индикатор не мешал обработке событий */
}

/* Дополнительные стили для темного режима */
.dark .dropzone-indicator {
  background-color: #201921;
  /* background-color: rgba(211, 44, 180, 0.1); */
  /* background-color: rgba(59, 130, 246, 0.1); */
  opacity: 0.8;
  border-color: #D32CB4;
  color: #D32CB4
}

/* Контейнер для сообщения внутри индикатора */
.dropzone-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}

/* Иконка в индикаторе */
.dropzone-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #D32CB4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark .dropzone-icon {
  color: #D32CB4;
}
/* app/assets/stylesheets/terminal.css */

/* Monospace fallback for the log terminals. macOS draws Menlo and Windows
   Consolas, exactly as before; on Linux neither exists and the generic
   `monospace` is whatever the system maps it to, which on some setups is a
   serif (a user's Session Logs came out in Times). The browser downloads this
   face only where none of the system fonts before it exists.
   JetBrains Mono, SIL OFL 1.1 (app/assets/fonts/JetBrainsMono-OFL.txt);
   variable wght, subsets and unicode ranges from @fontsource-variable 5.2.5. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/assets/jetbrains-mono-cyrillic-wght-0c20352d1f7a6c4ac06dbf4e07dc68bc4d50a19407dffc2d164cb325a649d8c5.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/assets/jetbrains-mono-latin-ext-wght-28579c6b7708db964b83c119be520a24e06e86b7f4d35feca1878256b283c599.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/assets/jetbrains-mono-latin-wght-80880a2005eaf62ffc0bbf8dff021a2d83cd047acb34c6d2e4fe80272b18f23f.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Стили для терминала в модальном окне */
.terminal-content {
  background-color: #000;
  color: #f0f0f0;
  font-family: "Menlo", "Monaco", "Consolas", "JetBrains Mono", monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 0.5rem 0.875rem;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  /* max-height: 400px; */
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Стили для заглушки пустых логов */
.empty-logs-placeholder {
  display: flex;
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  background-color: #000;
  color: #f0f0f0;
  font-family: "Menlo", "Monaco", "Consolas", "JetBrains Mono", monospace;
  font-size: 14px;
  border-radius: 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin: 0;
  padding: 0.75rem 1rem;
  text-align: left;
  opacity: 0.8;
  box-sizing: border-box;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Two log columns, side by side from lg and stacked below it. */
.session-logs-grid {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  gap: 0.75rem;
}

@media (min-width: 1024px) {
  .session-logs-grid {
    flex-direction: row;
    gap: 0;
  }

  /* Equal pre-hydration fallback. The resizer replaces this width inline after
     Stimulus connects and restores the user's saved value. */
  .session-logs-panel[data-session-logs-resizer-target="panel"] {
    flex: 0 0 auto;
    width: calc((100% - 0.75rem) / 2);
  }
}

.session-logs-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  /* Without this a long unbroken log line would force the panel wider than its
     flex share instead of wrapping inside it. */
  min-width: 0;
}

.session-logs-column-header {
  display: flex;
  flex-shrink: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.25rem 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

/* In the modal the title sits on the dialog's own edge, under "Session Logs"
   and the status bar; the 0.25rem inset is the page view's, whose top row is
   inset by the same amount. */
.session-logs-column-header--modal {
  padding-left: 0;
  padding-right: 0;
}

/* Positioning context for this column's scroll-to-bottom button. */
.session-logs-column-body {
  position: relative;
  display: flex;
  flex: 1 1 0%;
  min-height: 0;
}

.session-logs-terminal-shell {
  display: flex;
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  background-color: #000;
  color: #f0f0f0;
  font-family: "Menlo", "Monaco", "Consolas", "JetBrains Mono", monospace;
  border-radius: 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.session-logs-terminal-shell--modal,
.empty-logs-placeholder--modal {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.session-logs-terminal-shell--page {
  border: 0;
  border-radius: 0;
}

.session-logs-terminal-shell [data-controller="terminal"] {
  display: flex;
  flex: 1 1 0%;
  min-height: 0;
}

.session-logs-panel .terminal-content {
  height: 100%;
  min-height: 0;
  max-height: none !important;
  margin-right: -16px;
  padding-right: calc(0.75rem + 16px);
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;

  /* 12px — the same size the sessions table uses for row content (text-xs).
     A column is narrower than the old full-width tab panel, and a wrapped line
     costs more legibility than a smaller glyph does. */
  font-size: 12px;
  line-height: 1.5;
}

.session-logs-panel .terminal-content::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.empty-logs-placeholder--page {
  border: 0;
  border-radius: 0;
}

/* Scroll-to-bottom button (Telegram-style) */
.scroll-to-bottom-btn {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(30, 30, 36, 0.92);
  color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0;
  animation: scroll-btn-fade-in 0.2s ease forwards;
}

.scroll-to-bottom-btn:hover {
  background-color: rgba(45, 45, 52, 0.95);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.scroll-to-bottom-btn:active {
  transform: scale(0.95);
}

.scroll-to-bottom-btn.hidden {
  display: none;
}

@keyframes scroll-btn-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Light theme overrides */
@media (prefers-color-scheme: light) {
  :root:not(.dark) .scroll-to-bottom-btn {
    background-color: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.6);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  }
  :root:not(.dark) .scroll-to-bottom-btn:hover {
    background-color: rgba(255, 255, 255, 0.98);
    color: rgba(0, 0, 0, 0.85);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  }
}

/* Основные цвета ANSI */
.ansi-black { color: #3A3A3A; }
.ansi-red { color: #E84F4F; }
.ansi-green { color: #B8D68C; }
.ansi-yellow { color: #E1AA5D; }
.ansi-blue { color: #7DC1CF; }
.ansi-magenta { color: #9B64FB; }
.ansi-cyan { color: #6D878D; }
.ansi-white { color: #DDDDDD; }

/* Яркие цвета ANSI */
.ansi-bright-black { color: #666666; }
.ansi-bright-red { color: #FF6C5C; }
.ansi-bright-green { color: #A8FF60; }
.ansi-bright-yellow { color: #FFFFB6; }
.ansi-bright-blue { color: #96CBFE; }
.ansi-bright-magenta { color: #FF73FD; }
.ansi-bright-cyan { color: #93E0E3; }
.ansi-bright-white { color: #FFFFFF; }

/* Фоновые цвета */
.ansi-bg-black { background-color: #3A3A3A; }
.ansi-bg-red { background-color: #E84F4F; }
.ansi-bg-green { background-color: #B8D68C; }
.ansi-bg-yellow { background-color: #E1AA5D; }
.ansi-bg-blue { background-color: #7DC1CF; }
.ansi-bg-magenta { background-color: #9B64FB; }
.ansi-bg-cyan { background-color: #6D878D; }
.ansi-bg-white { background-color: #DDDDDD; }

/* Стили текста */
.ansi-bold { font-weight: bold; }
.ansi-italic { font-style: italic; }
.ansi-underline { text-decoration: underline; }

/* Дополнительные стили для модального окна */
.logs-modal-backdrop {
  @apply fixed inset-0 z-40 bg-black bg-opacity-50;
}

#idle_job_logs .terminal-content b span[style="color:#000"] {
    color: rgb(240, 240, 240) !important;
    font-weight: normal !important;
}

/* Make idle job logs fill the available height with a dark background,
   even when there are only a few lines (mirrors .session-logs-panel). */
#idle_job_logs .terminal-content {
  height: 100%;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.air-datepicker-cell.-year-.-other-decade-,.air-datepicker-cell.-day-.-other-month-{color:var(--adp-color-other-month)}.air-datepicker-cell.-year-.-other-decade-:hover,.air-datepicker-cell.-day-.-other-month-:hover{color:var(--adp-color-other-month-hover)}.-disabled-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-disabled-.-focus-.air-datepicker-cell.-day-.-other-month-{color:var(--adp-color-other-month)}.-selected-.air-datepicker-cell.-year-.-other-decade-,.-selected-.air-datepicker-cell.-day-.-other-month-{color:#fff;background:var(--adp-background-color-selected-other-month)}.-selected-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-selected-.-focus-.air-datepicker-cell.-day-.-other-month-{background:var(--adp-background-color-selected-other-month-focused)}.-in-range-.air-datepicker-cell.-year-.-other-decade-,.-in-range-.air-datepicker-cell.-day-.-other-month-{background-color:var(--adp-background-color-in-range);color:var(--adp-color)}.-in-range-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-in-range-.-focus-.air-datepicker-cell.-day-.-other-month-{background-color:var(--adp-background-color-in-range-focused)}.air-datepicker-cell.-year-.-other-decade-:empty,.air-datepicker-cell.-day-.-other-month-:empty{background:none;border:none}.air-datepicker-cell{border-radius:var(--adp-cell-border-radius);box-sizing:border-box;cursor:pointer;display:flex;position:relative;align-items:center;justify-content:center;z-index:1}.air-datepicker-cell.-focus-{background:var(--adp-cell-background-color-hover)}.air-datepicker-cell.-current-{color:var(--adp-color-current-date)}.air-datepicker-cell.-current-.-focus-{color:var(--adp-color)}.air-datepicker-cell.-current-.-in-range-{color:var(--adp-color-current-date)}.air-datepicker-cell.-disabled-{cursor:default;color:var(--adp-color-disabled)}.air-datepicker-cell.-disabled-.-focus-{color:var(--adp-color-disabled)}.air-datepicker-cell.-disabled-.-in-range-{color:var(--adp-color-disabled-in-range)}.air-datepicker-cell.-disabled-.-current-.-focus-{color:var(--adp-color-disabled)}.air-datepicker-cell.-in-range-{background:var(--adp-cell-background-color-in-range);border-radius:0}.air-datepicker-cell.-in-range-:hover,.air-datepicker-cell.-in-range-.-focus-{background:var(--adp-cell-background-color-in-range-hover)}.air-datepicker-cell.-range-from-{border:1px solid var(--adp-cell-border-color-in-range);background-color:var(--adp-cell-background-color-in-range);border-radius:var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius)}.air-datepicker-cell.-range-to-{border:1px solid var(--adp-cell-border-color-in-range);background-color:var(--adp-cell-background-color-in-range);border-radius:0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0}.air-datepicker-cell.-range-to-.-range-from-{border-radius:var(--adp-cell-border-radius)}.air-datepicker-cell.-selected-{color:#fff;border:none;background:var(--adp-cell-background-color-selected)}.air-datepicker-cell.-selected-.-current-{color:#fff;background:var(--adp-cell-background-color-selected)}.air-datepicker-cell.-selected-.-focus-{background:var(--adp-cell-background-color-selected-hover)}
.air-datepicker-body{transition:all var(--adp-transition-duration) var(--adp-transition-ease)}.air-datepicker-body.-hidden-{display:none}.air-datepicker-body--day-names{display:grid;grid-template-columns:repeat(7, var(--adp-day-cell-width));margin:8px 0 3px}.air-datepicker-body--day-name{color:var(--adp-day-name-color);display:flex;align-items:center;justify-content:center;flex:1;text-align:center;text-transform:uppercase;font-size:.8em}.air-datepicker-body--day-name.-clickable-{cursor:pointer}.air-datepicker-body--day-name.-clickable-:hover{color:var(--adp-day-name-color-hover)}.air-datepicker-body--cells{display:grid}.air-datepicker-body--cells.-days-{grid-template-columns:repeat(7, var(--adp-day-cell-width));grid-auto-rows:var(--adp-day-cell-height)}.air-datepicker-body--cells.-months-{grid-template-columns:repeat(3, 1fr);grid-auto-rows:var(--adp-month-cell-height)}.air-datepicker-body--cells.-years-{grid-template-columns:repeat(4, 1fr);grid-auto-rows:var(--adp-year-cell-height)}
.air-datepicker-nav{display:flex;justify-content:space-between;border-bottom:1px solid var(--adp-border-color-inner);min-height:var(--adp-nav-height);padding:var(--adp-padding);box-sizing:content-box}.-only-timepicker- .air-datepicker-nav{display:none}.air-datepicker-nav--title,.air-datepicker-nav--action{display:flex;cursor:pointer;align-items:center;justify-content:center}.air-datepicker-nav--action{width:var(--adp-nav-action-size);border-radius:var(--adp-border-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none}.air-datepicker-nav--action:hover{background:var(--adp-background-color-hover)}.air-datepicker-nav--action:active{background:var(--adp-background-color-active)}.air-datepicker-nav--action.-disabled-{visibility:hidden}.air-datepicker-nav--action svg{width:32px;height:32px}.air-datepicker-nav--action path{fill:none;stroke:var(--adp-nav-arrow-color);stroke-width:2px}.air-datepicker-nav--title{border-radius:var(--adp-border-radius);padding:0 8px}.air-datepicker-nav--title i{font-style:normal;color:var(--adp-nav-color-secondary);margin-left:.3em}.air-datepicker-nav--title:hover{background:var(--adp-background-color-hover)}.air-datepicker-nav--title:active{background:var(--adp-background-color-active)}.air-datepicker-nav--title.-disabled-{cursor:default;background:none}
.air-datepicker-buttons{display:grid;grid-auto-columns:1fr;grid-auto-flow:column}.air-datepicker-button{display:inline-flex;color:var(--adp-btn-color);border-radius:var(--adp-btn-border-radius);cursor:pointer;height:var(--adp-btn-height);border:none;background:rgba(255,255,255,0)}.air-datepicker-button:hover{color:var(--adp-btn-color-hover);background:var(--adp-btn-background-color-hover)}.air-datepicker-button:focus{color:var(--adp-btn-color-hover);background:var(--adp-btn-background-color-hover);outline:none}.air-datepicker-button:active{background:var(--adp-btn-background-color-active)}.air-datepicker-button span{outline:none;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.air-datepicker-time{display:grid;grid-template-columns:max-content 1fr;grid-column-gap:12px;align-items:center;position:relative;padding:0 var(--adp-time-padding-inner)}.-only-timepicker- .air-datepicker-time{border-top:none}.air-datepicker-time--current{display:flex;align-items:center;flex:1;font-size:14px;text-align:center}.air-datepicker-time--current-colon{margin:0 2px 3px;line-height:1}.air-datepicker-time--current-hours,.air-datepicker-time--current-minutes{line-height:1;font-size:19px;font-family:"Century Gothic",CenturyGothic,AppleGothic,sans-serif;position:relative;z-index:1}.air-datepicker-time--current-hours:after,.air-datepicker-time--current-minutes:after{content:"";background:var(--adp-background-color-hover);border-radius:var(--adp-border-radius);position:absolute;left:-2px;top:-3px;right:-2px;bottom:-2px;z-index:-1;opacity:0}.air-datepicker-time--current-hours.-focus-:after,.air-datepicker-time--current-minutes.-focus-:after{opacity:1}.air-datepicker-time--current-ampm{text-transform:uppercase;align-self:flex-end;color:var(--adp-time-day-period-color);margin-left:6px;font-size:11px;margin-bottom:1px}.air-datepicker-time--row{display:flex;align-items:center;font-size:11px;height:17px;background:linear-gradient(to right, var(--adp-time-track-color), var(--adp-time-track-color)) left 50%/100% var(--adp-time-track-height) no-repeat}.air-datepicker-time--row:first-child{margin-bottom:4px}.air-datepicker-time--row input[type=range]{background:none;cursor:pointer;flex:1;height:100%;width:100%;padding:0;margin:0;-webkit-appearance:none}.air-datepicker-time--row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}.air-datepicker-time--row input[type=range]::-ms-tooltip{display:none}.air-datepicker-time--row input[type=range]:hover::-webkit-slider-thumb{border-color:var(--adp-time-track-color-hover)}.air-datepicker-time--row input[type=range]:hover::-moz-range-thumb{border-color:var(--adp-time-track-color-hover)}.air-datepicker-time--row input[type=range]:hover::-ms-thumb{border-color:var(--adp-time-track-color-hover)}.air-datepicker-time--row input[type=range]:focus{outline:none}.air-datepicker-time--row input[type=range]:focus::-webkit-slider-thumb{background:var(--adp-cell-background-color-selected);border-color:var(--adp-cell-background-color-selected)}.air-datepicker-time--row input[type=range]:focus::-moz-range-thumb{background:var(--adp-cell-background-color-selected);border-color:var(--adp-cell-background-color-selected)}.air-datepicker-time--row input[type=range]:focus::-ms-thumb{background:var(--adp-cell-background-color-selected);border-color:var(--adp-cell-background-color-selected)}.air-datepicker-time--row input[type=range]::-webkit-slider-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid var(--adp-time-track-color);background:#fff;cursor:pointer;-webkit-transition:background var(--adp-transition-duration);transition:background var(--adp-transition-duration)}.air-datepicker-time--row input[type=range]::-moz-range-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid var(--adp-time-track-color);background:#fff;cursor:pointer;-moz-transition:background var(--adp-transition-duration);transition:background var(--adp-transition-duration)}.air-datepicker-time--row input[type=range]::-ms-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid var(--adp-time-track-color);background:#fff;cursor:pointer;-ms-transition:background var(--adp-transition-duration);transition:background var(--adp-transition-duration)}.air-datepicker-time--row input[type=range]::-webkit-slider-thumb{margin-top:calc(var(--adp-time-thumb-size)/2*-1)}.air-datepicker-time--row input[type=range]::-webkit-slider-runnable-track{border:none;height:var(--adp-time-track-height);cursor:pointer;color:rgba(0,0,0,0);background:rgba(0,0,0,0)}.air-datepicker-time--row input[type=range]::-moz-range-track{border:none;height:var(--adp-time-track-height);cursor:pointer;color:rgba(0,0,0,0);background:rgba(0,0,0,0)}.air-datepicker-time--row input[type=range]::-ms-track{border:none;height:var(--adp-time-track-height);cursor:pointer;color:rgba(0,0,0,0);background:rgba(0,0,0,0)}.air-datepicker-time--row input[type=range]::-ms-fill-lower{background:rgba(0,0,0,0)}.air-datepicker-time--row input[type=range]::-ms-fill-upper{background:rgba(0,0,0,0)}
.air-datepicker{--adp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--adp-font-size: 14px;--adp-width: 246px;--adp-z-index: 100;--adp-padding: 4px;--adp-grid-areas: "nav" "body" "timepicker" "buttons";--adp-transition-duration: .3s;--adp-transition-ease: ease-out;--adp-transition-offset: 8px;--adp-background-color: #fff;--adp-background-color-hover: #f0f0f0;--adp-background-color-active: #eaeaea;--adp-background-color-in-range: rgba(92, 196, 239, .1);--adp-background-color-in-range-focused: rgba(92, 196, 239, .2);--adp-background-color-selected-other-month-focused: #8ad5f4;--adp-background-color-selected-other-month: #a2ddf6;--adp-color: #4a4a4a;--adp-color-secondary: #9c9c9c;--adp-accent-color: #4eb5e6;--adp-color-current-date: var(--adp-accent-color);--adp-color-other-month: #dedede;--adp-color-disabled: #aeaeae;--adp-color-disabled-in-range: #939393;--adp-color-other-month-hover: #c5c5c5;--adp-border-color: #dbdbdb;--adp-border-color-inner: #efefef;--adp-border-radius: 4px;--adp-border-color-inline: #d7d7d7;--adp-nav-height: 32px;--adp-nav-arrow-color: var(--adp-color-secondary);--adp-nav-action-size: 32px;--adp-nav-color-secondary: var(--adp-color-secondary);--adp-day-name-color: #ff9a19;--adp-day-name-color-hover: #8ad5f4;--adp-day-cell-width: 1fr;--adp-day-cell-height: 32px;--adp-month-cell-height: 42px;--adp-year-cell-height: 56px;--adp-pointer-size: 10px;--adp-poiner-border-radius: 2px;--adp-pointer-offset: 14px;--adp-cell-border-radius: 4px;--adp-cell-background-color-hover: var(--adp-background-color-hover);--adp-cell-background-color-selected: #5cc4ef;--adp-cell-background-color-selected-hover: #45bced;--adp-cell-background-color-in-range: rgba(92, 196, 239, 0.1);--adp-cell-background-color-in-range-hover: rgba(92, 196, 239, 0.2);--adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);--adp-btn-height: 32px;--adp-btn-color: var(--adp-accent-color);--adp-btn-color-hover: var(--adp-color);--adp-btn-border-radius: var(--adp-border-radius);--adp-btn-background-color-hover: var(--adp-background-color-hover);--adp-btn-background-color-active: var(--adp-background-color-active);--adp-time-track-height: 1px;--adp-time-track-color: #dedede;--adp-time-track-color-hover: #b1b1b1;--adp-time-thumb-size: 12px;--adp-time-padding-inner: 10px;--adp-time-day-period-color: var(--adp-color-secondary);--adp-mobile-font-size: 16px;--adp-mobile-nav-height: 40px;--adp-mobile-width: 320px;--adp-mobile-day-cell-height: 38px;--adp-mobile-month-cell-height: 48px;--adp-mobile-year-cell-height: 64px}.air-datepicker-overlay{--adp-overlay-background-color: rgba(0, 0, 0, .3);--adp-overlay-transition-duration: .3s;--adp-overlay-transition-ease: ease-out;--adp-overlay-z-index: 99}
.air-datepicker{background:var(--adp-background-color);border:1px solid var(--adp-border-color);box-shadow:0 4px 12px rgba(0,0,0,.15);border-radius:var(--adp-border-radius);box-sizing:content-box;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(4, max-content);grid-template-areas:var(--adp-grid-areas);font-family:var(--adp-font-family),sans-serif;font-size:var(--adp-font-size);color:var(--adp-color);width:var(--adp-width);position:absolute;transition:opacity var(--adp-transition-duration) var(--adp-transition-ease),transform var(--adp-transition-duration) var(--adp-transition-ease);z-index:var(--adp-z-index)}.air-datepicker:not(.-custom-position-){opacity:0}.air-datepicker.-from-top-{transform:translateY(calc(var(--adp-transition-offset) * -1))}.air-datepicker.-from-right-{transform:translateX(var(--adp-transition-offset))}.air-datepicker.-from-bottom-{transform:translateY(var(--adp-transition-offset))}.air-datepicker.-from-left-{transform:translateX(calc(var(--adp-transition-offset) * -1))}.air-datepicker.-active-:not(.-custom-position-){transform:translate(0, 0);opacity:1}.air-datepicker.-active-.-custom-position-{transition:none}.air-datepicker.-inline-{border-color:var(--adp-border-color-inline);box-shadow:none;position:static;left:auto;right:auto;opacity:1;transform:none}.air-datepicker.-inline- .air-datepicker--pointer{display:none}.air-datepicker.-is-mobile-{--adp-font-size: var(--adp-mobile-font-size);--adp-day-cell-height: var(--adp-mobile-day-cell-height);--adp-month-cell-height: var(--adp-mobile-month-cell-height);--adp-year-cell-height: var(--adp-mobile-year-cell-height);--adp-nav-height: var(--adp-mobile-nav-height);--adp-nav-action-size: var(--adp-mobile-nav-height);position:fixed;width:var(--adp-mobile-width);border:none}.air-datepicker.-is-mobile- *{-webkit-tap-highlight-color:rgba(0,0,0,0)}.air-datepicker.-is-mobile- .air-datepicker--pointer{display:none}.air-datepicker.-is-mobile-:not(.-custom-position-){transform:translate(-50%, calc(-50% + var(--adp-transition-offset)))}.air-datepicker.-is-mobile-.-active-:not(.-custom-position-){transform:translate(-50%, -50%)}.air-datepicker.-custom-position-{transition:none}.air-datepicker-global-container{position:absolute;left:0;top:0}.air-datepicker--pointer{--pointer-half-size: calc(var(--adp-pointer-size) / 2);position:absolute;width:var(--adp-pointer-size);height:var(--adp-pointer-size);z-index:-1}.air-datepicker--pointer:after{content:"";position:absolute;background:#fff;border-top:1px solid var(--adp-border-color-inline);border-right:1px solid var(--adp-border-color-inline);border-top-right-radius:var(--adp-poiner-border-radius);width:var(--adp-pointer-size);height:var(--adp-pointer-size);box-sizing:border-box}.-top-left- .air-datepicker--pointer,.-top-center- .air-datepicker--pointer,.-top-right- .air-datepicker--pointer,[data-popper-placement^=top] .air-datepicker--pointer{top:calc(100% - var(--pointer-half-size) + 1px)}.-top-left- .air-datepicker--pointer:after,.-top-center- .air-datepicker--pointer:after,.-top-right- .air-datepicker--pointer:after,[data-popper-placement^=top] .air-datepicker--pointer:after{transform:rotate(135deg)}.-right-top- .air-datepicker--pointer,.-right-center- .air-datepicker--pointer,.-right-bottom- .air-datepicker--pointer,[data-popper-placement^=right] .air-datepicker--pointer{right:calc(100% - var(--pointer-half-size) + 1px)}.-right-top- .air-datepicker--pointer:after,.-right-center- .air-datepicker--pointer:after,.-right-bottom- .air-datepicker--pointer:after,[data-popper-placement^=right] .air-datepicker--pointer:after{transform:rotate(225deg)}.-bottom-left- .air-datepicker--pointer,.-bottom-center- .air-datepicker--pointer,.-bottom-right- .air-datepicker--pointer,[data-popper-placement^=bottom] .air-datepicker--pointer{bottom:calc(100% - var(--pointer-half-size) + 1px)}.-bottom-left- .air-datepicker--pointer:after,.-bottom-center- .air-datepicker--pointer:after,.-bottom-right- .air-datepicker--pointer:after,[data-popper-placement^=bottom] .air-datepicker--pointer:after{transform:rotate(315deg)}.-left-top- .air-datepicker--pointer,.-left-center- .air-datepicker--pointer,.-left-bottom- .air-datepicker--pointer,[data-popper-placement^=left] .air-datepicker--pointer{left:calc(100% - var(--pointer-half-size) + 1px)}.-left-top- .air-datepicker--pointer:after,.-left-center- .air-datepicker--pointer:after,.-left-bottom- .air-datepicker--pointer:after,[data-popper-placement^=left] .air-datepicker--pointer:after{transform:rotate(45deg)}.-top-left- .air-datepicker--pointer,.-bottom-left- .air-datepicker--pointer{left:var(--adp-pointer-offset)}.-top-right- .air-datepicker--pointer,.-bottom-right- .air-datepicker--pointer{right:var(--adp-pointer-offset)}.-top-center- .air-datepicker--pointer,.-bottom-center- .air-datepicker--pointer{left:calc(50% - var(--adp-pointer-size)/2)}.-left-top- .air-datepicker--pointer,.-right-top- .air-datepicker--pointer{top:var(--adp-pointer-offset)}.-left-bottom- .air-datepicker--pointer,.-right-bottom- .air-datepicker--pointer{bottom:var(--adp-pointer-offset)}.-left-center- .air-datepicker--pointer,.-right-center- .air-datepicker--pointer{top:calc(50% - var(--adp-pointer-size)/2)}.air-datepicker--navigation{grid-area:nav}.air-datepicker--content{box-sizing:content-box;padding:var(--adp-padding);grid-area:body}.-only-timepicker- .air-datepicker--content{display:none}.air-datepicker--time{grid-area:timepicker}.air-datepicker--buttons{grid-area:buttons}.air-datepicker--buttons,.air-datepicker--time{padding:var(--adp-padding);border-top:1px solid var(--adp-border-color-inner)}.air-datepicker-overlay{position:fixed;background:var(--adp-overlay-background-color);left:0;top:0;width:0;height:0;opacity:0;transition:opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),left 0s,height 0s,width 0s;transition-delay:0s,var(--adp-overlay-transition-duration),var(--adp-overlay-transition-duration),var(--adp-overlay-transition-duration);z-index:var(--adp-overlay-z-index)}.air-datepicker-overlay.-active-{opacity:1;width:100%;height:100%;transition:opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),height 0s,width 0s}
/* air-datepicker custom styles */
.air-datepicker {
  --adp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --adp-font-size: 14px;
  --adp-width: 246px; /* Air Datepicker doubles this base width for range mode */
  --adp-z-index: 40;
  --adp-padding: 8px;
  --adp-background-color: rgb(250, 250, 250);
  --adp-background-color-hover: rgba(24, 24, 27, 0.06);
  --adp-background-color-active: rgba(24, 24, 27, 0.1);
  --adp-color: rgb(39, 39, 42);
  --adp-color-secondary: rgb(113, 113, 122);
  --adp-accent-color: rgb(124, 24, 107);
  --adp-border-color: rgba(24, 24, 27, 0.12);
  --adp-border-radius: 8px; /* rounded-lg */
  --adp-cell-border-radius: 4px;
  --adp-day-name-color: rgb(124, 24, 107);
  --adp-day-name-color-hover: rgb(143, 11, 119);
  --adp-cell-background-color-selected: rgba(143, 11, 119, 0.14);
  --adp-cell-background-color-selected-hover: rgba(143, 11, 119, 0.24);
  --adp-cell-background-color-in-range: rgba(143, 11, 119, 0.1);
  --adp-cell-background-color-in-range-hover: rgba(143, 11, 119, 0.16);
  --cube-datepicker-selected-color: rgb(124, 24, 107);
  --cube-datepicker-selected-border: rgba(124, 24, 107, 0.45);
  --cube-datepicker-range-color: rgb(63, 63, 70);
  
  /* The vendor's `1fr` column is `minmax(auto, 1fr)`: it grows to the widest
   * row's min-content. With a long Apply label (uk "Застосувати", 295px of
   * buttons) the column outgrew the 246px box and the month grid spilled past
   * the border. The box sets the width; the rows fit into it. */
  grid-template-columns: minmax(0, 1fr);

  /* Match app styling */
  border: 1px solid var(--adp-border-color) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; /* shadow */
}

.air-datepicker-cell.-current- {
  border: 1px solid rgba(124, 24, 107, 0.35) !important;
}

.dark .air-datepicker {
  /* Match dropdown colors: dark:bg-neutral-900, dark:border-gray-600, dark text */
  --adp-background-color: rgb(24, 24, 27);
  --adp-background-color-hover: rgba(255, 255, 255, 0.08);
  --adp-background-color-active: rgba(255, 255, 255, 0.12);
  --adp-color: rgb(228, 228, 231);
  --adp-color-secondary: rgb(161, 161, 170);
  --adp-accent-color: rgb(239, 203, 234);
  --adp-border-color: rgba(255, 255, 255, 0.1);
  --adp-day-name-color: rgb(229, 170, 221);
  --adp-day-name-color-hover: rgb(249, 205, 243);
  --adp-cell-background-color-selected: rgba(75, 20, 66, 0.78);
  --adp-cell-background-color-selected-hover: rgba(126, 25, 107, 0.62);
  --adp-cell-background-color-in-range: rgba(177, 25, 149, 0.2);
  --adp-cell-background-color-in-range-hover: rgba(177, 25, 149, 0.3);
  --cube-datepicker-selected-color: rgb(252, 231, 248);
  --cube-datepicker-selected-border: rgba(226, 112, 211, 0.5);
  --cube-datepicker-range-color: rgb(228, 228, 231);

  /* Dark shadow to match dark:shadow-gray-900/50 */
  box-shadow: 0 10px 15px -3px rgba(17, 24, 39, 0.5),
              0 4px 6px -2px rgba(17, 24, 39, 0.4) !important;
}

.dark .air-datepicker-cell.-current- {
  border: 1px solid rgba(226, 112, 211, 0.35) !important;
}

.air-datepicker-cell.-selected-,
.air-datepicker-cell.-range-from-,
.air-datepicker-cell.-range-to- {
  color: var(--cube-datepicker-selected-color) !important;
  background: var(--adp-cell-background-color-selected) !important;
  border: 1px solid var(--cube-datepicker-selected-border) !important;
}

.air-datepicker-cell.-selected-.-focus-,
.air-datepicker-cell.-range-from-.-focus-,
.air-datepicker-cell.-range-to-.-focus- {
  color: var(--cube-datepicker-selected-color) !important;
  background: var(--adp-cell-background-color-selected-hover) !important;
  border-color: var(--cube-datepicker-selected-border) !important;
}

.air-datepicker-cell.-in-range-:not(.-range-from-):not(.-range-to-) {
  color: var(--cube-datepicker-range-color) !important;
  background: var(--adp-cell-background-color-in-range) !important;
  border-radius: 0 !important;
}

.air-datepicker-cell.-in-range-.-focus-:not(.-range-from-):not(.-range-to-) {
  background: var(--adp-cell-background-color-in-range-hover) !important;
}

.air-datepicker-cell.-range-from-:not(.-range-to-) {
  border-radius: var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius) !important;
}

.air-datepicker-cell.-range-to-:not(.-range-from-) {
  border-radius: 0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0 !important;
}

.air-datepicker-cell.-range-from-.-range-to- {
  border-radius: var(--adp-cell-border-radius) !important;
}

/* Разделитель заголовка (месяц/год) */
.air-datepicker-nav {
  /* border-bottom: 1px solid var(--adp-border-color) !important; */
  /* padding-bottom: 8px !important; */
  /* margin-bottom: 8px !important; */
  border-bottom: none !important;
  padding-top: 8px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.air-datepicker--pointer {
  opacity: 0;
}

/* Custom buttons for air-datepicker */
.air-datepicker-button-apply {
  background-color: rgba(143, 11, 119, 0.14) !important;
  color: rgb(124, 24, 107) !important;
  border: 1px solid rgba(124, 24, 107, 0.4) !important;
  padding: 12px 16px !important; /* 28px pushed the uk label past half the box */
  border-radius: 8px !important; /* rounded-lg */
  font-size: 12px !important; /* text-xs */
  font-weight: 500 !important; /* font-medium */
  cursor: pointer !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important; /* basis-1/2 equivalent */
  max-width: calc(50% - 6px) !important; /* Adjusted for smaller gap */
  min-width: 0 !important;
}

.air-datepicker-button-apply:hover {
  background-color: rgba(143, 11, 119, 0.3) !important;
  border-color: rgba(124, 24, 107, 0.7) !important;
  color: white !important;
}

.air-datepicker-button-apply:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(177, 25, 149, 0.25) !important;
}

/* Apply stays inert until the draft is a complete, in-range selection. */
.air-datepicker-button-apply:disabled,
.air-datepicker-button-apply.-disabled- {
  background-color: rgb(209, 213, 219) !important; /* gray-300 */
  border-color: rgb(209, 213, 219) !important;
  color: rgb(107, 114, 128) !important; /* gray-500 */
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.dark .air-datepicker-button-apply:disabled,
.dark .air-datepicker-button-apply.-disabled- {
  background-color: rgb(64, 64, 64) !important; /* neutral-700 */
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgb(163, 163, 163) !important; /* neutral-400 */
}

.air-datepicker-button-clear {
  background-color: transparent !important;
  color: rgb(17, 24, 39) !important; /* text-gray-900 */
  border: none !important;
  padding: 12px 8px !important; /* the icon and the uk label need the room */
  border-radius: 8px !important; /* rounded-lg */
  font-size: 12px !important; /* text-xs */
  font-weight: 500 !important; /* font-medium */
  cursor: pointer !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important; /* basis-1/2 equivalent */
  max-width: calc(50% - 6px) !important; /* Adjusted for smaller gap */
  min-width: 0 !important;
}

.air-datepicker-button-clear svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  margin-right: 4px !important;
}

.air-datepicker-button-clear:hover {
  background-color: rgb(243, 244, 246) !important; /* hover:bg-gray-100 */
  color: black !important; /* hover:text-black */
}

.air-datepicker-button-clear:focus {
  outline: none !important;
  z-index: 10 !important;
  box-shadow: 0 0 0 4px rgba(156, 163, 175, 0.2) !important; /* focus:ring-4 focus:ring-gray-200 */
}

/* Dark theme support */
.dark .air-datepicker-button-apply {
  background-color: rgba(75, 20, 66, 0.78) !important;
  border-color: rgba(226, 112, 211, 0.45) !important;
  color: rgb(239, 203, 234) !important;
}

.dark .air-datepicker-button-apply:hover {
  background-color: rgba(126, 25, 107, 0.62) !important;
  border-color: rgba(244, 114, 233, 0.7) !important;
  color: #ffffff !important;
}

.dark .air-datepicker-button-apply:focus {
  box-shadow: 0 0 0 3px rgba(177, 25, 149, 0.3) !important;
}

.dark .air-datepicker-button-clear {
  color: rgb(209, 213, 219) !important; /* gray-300 */
}

.dark .air-datepicker-button-clear:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: rgb(243, 244, 246) !important; /* gray-100 */
}

.dark .air-datepicker-button-clear:focus {
  box-shadow: 0 0 0 4px rgba(75, 85, 99, 0.6) !important; /* dark:focus:ring-gray-600 */
}

/* Сбрасываем внешний контейнер */
.air-datepicker--buttons {
  border-top: 0 !important; /* Remove default border */
}

/* Контейнер с кнопками */
.air-datepicker-buttons {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 8px 0 0 0 !important; /* mt-4, reset other margins */
  gap: 12px !important; /* Reduced gap for better fit */
  padding: 0 12px 12px 12px !important; /* Add padding for better spacing */
}
/* PWA Install Instructions Styles */

/* Скрыть PWA инструкции в установленном приложении */
@media (display-mode: standalone) {
  .pwa-install-instructions {
    display: none !important;
  }
}

/* Адаптивные инструкции показываются только в браузере */
.pwa-browser-only {
  display: block;
}

@media (display-mode: standalone) {
  .pwa-browser-only {
    display: none !important;
  }
}

/* Детали с PWA инструкциями */
.pwa-instructions-details {
  transition: all 0.3s ease;
}

.pwa-instructions-details[open] {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pwa-instructions-details[open] summary svg {
  transform: rotate(180deg);
}

/* Номера шагов в инструкциях */
.pwa-step-number {
  min-width: 1.25rem;
  min-height: 1.25rem;
  line-height: 1;
  font-size: 0.75rem;
}

/* Специальные стили для PWA платформ */
.platform-ios .pwa-install-notice {
  background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
  color: white;
}

.platform-android .pwa-install-notice {
  background: linear-gradient(135deg, #4CAF50 0%, #2196F3 100%);
  color: white;
}

/* Анимации для PWA инструкций */
.pwa-instructions-slide-in {
  animation: pwaSlideIn 0.4s ease-out;
}

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

/* Совместимость с темной темой */
@media (prefers-color-scheme: dark) {
  .pwa-instructions-details {
    border-color: #374151;
  }
  
  .pwa-instructions-details[open] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

/* Стили для раскрывающихся деталей браузера */
.browser-settings-details summary {
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.browser-settings-details summary::-webkit-details-marker {
  display: none;
}

.browser-settings-details summary svg {
  transition: transform 0.2s ease;
}

.browser-settings-details[open] summary svg {
  transform: rotate(180deg);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 640px) {
  .pwa-detailed-instructions {
    max-width: calc(100vw - 2rem);
    margin: 0 1rem;
  }
  
  .pwa-step-list {
    font-size: 0.875rem;
  }
  
  .pwa-step-number {
    min-width: 1rem;
    min-height: 1rem;
    font-size: 0.6875rem;
  }
}

/* Состояния для различных браузеров */
.browser-chrome .chrome-specific {
  display: block;
}

.browser-firefox .firefox-specific {
  display: block;
}

.browser-safari .safari-specific {
  display: block;
}

.browser-edge .edge-specific {
  display: block;
}

/* Скрыть специфичные инструкции по умолчанию */
.chrome-specific,
.firefox-specific,
.safari-specific,
.edge-specific {
  display: none;
}

/* Индикаторы платформы */
.platform-indicator {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.platform-indicator.ios {
  background-color: #F3F4F6;
  color: #1F2937;
}

.platform-indicator.android {
  background-color: #ECFDF5;
  color: #065F46;
}

.platform-indicator.desktop {
  background-color: #EFF6FF;
  color: #1E40AF;
}

/* Темная тема для индикаторов */
@media (prefers-color-scheme: dark) {
  .platform-indicator.ios {
    background-color: #374151;
    color: #F9FAFB;
  }
  
  .platform-indicator.android {
    background-color: #064E3B;
    color: #A7F3D0;
  }
  
  .platform-indicator.desktop {
    background-color: #1E3A8A;
    color: #DBEAFE;
  }
}

/* PWA Install Banner Animations and Positioning */

/* Banner appearance animation */
#pwa-install-banner:not(.hidden) {
  animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Raise PWA banner if there is push notification banner */
#pwa-install-banner:not(.hidden) {
  bottom: 1rem;
}

/* If there is push notification dialog, move PWA banner higher */
body:has(dialog[open]) #pwa-install-banner:not(.hidden) {
  bottom: 5rem;
  transition: bottom 0.3s ease;
}

/* Alternative positioning for older browsers */
@supports not (selector(:has(*))) {
  #pwa-install-banner:not(.hidden) {
    bottom: 1rem;
  }
}

/* Browser-specific instruction sections (initially hidden) */
.chrome-edge-install,
.safari-instructions,
.firefox-instructions {
  display: none;
}

/* Show when browser is detected */
.chrome-edge-install.show,
.safari-instructions.show,
.firefox-instructions.show {
  display: block;
} 
/* Safari Scrollbar Fix - Убираем розовый цвет полностью */

/* Принудительно переопределяем все скроллбары в Safari */
* {
  scrollbar-width: thin !important;
  scrollbar-color: #9ca3af transparent !important;
  accent-color: #9ca3af !important;
}

*::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
  background: transparent !important;
}

*::-webkit-scrollbar-track {
  background: transparent !important;
  border: none !important;
}

*::-webkit-scrollbar-thumb {
  background: #9ca3af !important;
  border-radius: 4px !important;
  border: none !important;
}

*::-webkit-scrollbar-thumb:hover {
  background: #6b7280 !important;
}

/* Темная тема */
@media (prefers-color-scheme: dark) {
  * {
    scrollbar-color: #52525b transparent !important;
  }
  
  *::-webkit-scrollbar-thumb {
    background: #52525b !important;
  }
  
  *::-webkit-scrollbar-thumb:hover {
    background: #71717a !important;
  }
}

/* Специально для Safari - убираем любые наследованные цвета */
@supports (-webkit-appearance: none) {
  * {
    scrollbar-color: #9ca3af transparent !important;
  }
  
  *::-webkit-scrollbar-thumb {
    background: #9ca3af !important;
    background-color: #9ca3af !important;
  }
  
  *::-webkit-scrollbar-thumb:hover {
    background: #6b7280 !important;
    background-color: #6b7280 !important;
  }
  
  @media (prefers-color-scheme: dark) {
    * {
      scrollbar-color: #52525b transparent !important;
    }
    
    *::-webkit-scrollbar-thumb {
      background: #52525b !important;
      background-color: #52525b !important;
    }
    
    *::-webkit-scrollbar-thumb:hover {
      background: #71717a !important;
      background-color: #71717a !important;
    }
  }
}

/* Убираем розовый цвет из основной темы для скроллбаров */
*::-webkit-scrollbar-thumb {
  background: #9ca3af !important;
  background-color: #9ca3af !important;
  color: #9ca3af !important;
}

/* Убираем любые переменные CSS которые могут влиять на скроллбар */
*::-webkit-scrollbar-thumb {
  --tw-bg-opacity: 1 !important;
  --main-500: #9ca3af !important;
  --main-color: #9ca3af !important;
  --main-50: #9ca3af !important;
  --main-700: #9ca3af !important;
  color: #9ca3af !important;
  border-color: #9ca3af !important;
  fill: #9ca3af !important;
}

/* Блокируем все возможные источники розового цвета */
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:active {
  background: #9ca3af !important;
  background-color: #9ca3af !important;
  background-image: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Темная тема - блокируем розовый цвет */
@media (prefers-color-scheme: dark) {
  *::-webkit-scrollbar-thumb,
  *::-webkit-scrollbar-thumb:hover,
  *::-webkit-scrollbar-thumb:active {
    background: #52525b !important;
    background-color: #52525b !important;
    background-image: none !important;
    --main-500: #52525b !important;
    --main-color: #52525b !important;
  }
}

/* Дополнительная защита от розового цвета */
*::-webkit-scrollbar-thumb {
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
}



/* Видимый серый скроллбар для Safari */
@supports (-webkit-appearance: none) {
  *::-webkit-scrollbar {
    width: 8px !important;
    background: transparent !important;
  }
  
  *::-webkit-scrollbar-track {
    background: transparent !important;
  }
  
  *::-webkit-scrollbar-thumb {
    background: #9ca3af !important;
    background-color: #9ca3af !important;
    border-radius: 4px !important;
  }
  
  *::-webkit-scrollbar-thumb:hover {
    background: #6b7280 !important;
    background-color: #6b7280 !important;
  }
  
  @media (prefers-color-scheme: dark) {
    *::-webkit-scrollbar-thumb {
      background: #52525b !important;
      background-color: #52525b !important;
    }
    
    *::-webkit-scrollbar-thumb:hover {
      background: #71717a !important;
      background-color: #71717a !important;
    }
  }
} 
/* Safari-specific styles to hide default time display */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Hide time content for empty fields in Safari */
  .safari-time-field[data-empty="true"]::-webkit-datetime-edit-text,
  .safari-time-field[data-empty="true"]::-webkit-datetime-edit-hour-field,
  .safari-time-field[data-empty="true"]::-webkit-datetime-edit-minute-field {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }
  
  /* Show placeholder text for empty time fields */
  .safari-time-field[data-empty="true"]:before {
    content: "--:--" !important;
    color: #9CA3AF !important;
    position: absolute !important;
    left: 44px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
    pointer-events: none !important;
    font-family: inherit !important;
  }
  
  /* Dark mode placeholder */
  .dark .safari-time-field[data-empty="true"]:before {
    color: #6B7280 !important;
  }
  
  /* When disabled, make it look like other browsers */
  .safari-time-field:disabled[data-empty="true"]::-webkit-datetime-edit-text,
  .safari-time-field:disabled[data-empty="true"]::-webkit-datetime-edit-hour-field,
  .safari-time-field:disabled[data-empty="true"]::-webkit-datetime-edit-minute-field {
    display: none !important;
  }
  
  .safari-time-field:disabled[data-empty="true"]:before {
    content: "Time" !important;
    color: #9CA3AF !important;
  }
  
  .dark .safari-time-field:disabled[data-empty="true"]:before {
    color: #6B7280 !important;
  }
}

/* Hide default time picker icons in all browsers */
/* Chrome, Safari, Edge */
.safari-time-field::-webkit-calendar-picker-indicator {
  filter: invert(0.5);
  opacity: 0;
  cursor: pointer;
  position: absolute;
  right: 8px;
  width: 20px;
  height: 20px;
}

/* Dark mode - make icon lighter */
.dark .safari-time-field::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  opacity: 0;
}

/* Firefox */
.safari-time-field::-moz-calendar-picker-indicator {
  filter: invert(0.5);
  opacity: 0;
  cursor: pointer;
}

.dark .safari-time-field::-moz-calendar-picker-indicator {
  filter: invert(0.7);
  opacity: 0;
} 
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *













 */

/* Глобальное исправление скроллбара - унифицированный цвет для всех браузеров */
* {
  scrollbar-width: thin !important;
  scrollbar-color: #9ca3af transparent !important;
  accent-color: #9ca3af !important;
}

*::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

*::-webkit-scrollbar-track {
  background: transparent !important;
  border: none !important;
}

*::-webkit-scrollbar-thumb {
  background: #9ca3af !important;
  background-color: #9ca3af !important;
  border-radius: 4px !important;
  border: none !important;
}

*::-webkit-scrollbar-thumb:hover {
  background: #6b7280 !important;
  background-color: #6b7280 !important;
}

/* Темная тема */
.dark * {
  scrollbar-color: #52525b transparent !important;
}

.dark *::-webkit-scrollbar-thumb {
  background: #52525b !important;
  background-color: #52525b !important;
}

.dark *::-webkit-scrollbar-thumb:hover {
  background: #71717a !important;
  background-color: #71717a !important;
}

/* Специально для Safari - убираем наследование розового цвета */
@supports (-webkit-appearance: none) {
  *::-webkit-scrollbar-thumb {
    background: #9ca3af !important;
    background-color: #9ca3af !important;
    --main-500: #9ca3af !important;
  }

  .dark *::-webkit-scrollbar-thumb {
    background: #52525b !important;
    background-color: #52525b !important;
    --main-500: #52525b !important;
  }
}

/* Конец глобального исправления скроллбара */