/* li-design-system.css */
/* Полная дизайн-система на основе Linear с Manrope типографикой */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css');

/* === CSS ПЕРЕМЕННЫЕ === */
:root {
  /* Цветовая палитра - Light Theme */
  --li-bg-primary: #FFFFFF;
  --li-bg-secondary: #EDEEF3;
  --li-bg-tertiary: #F8F9FA;
  --li-text-primary: #44494D;
  --li-text-secondary: #95A2B3;
  --li-text-tertiary: #6B7280;
  --li-accent: #475BA1;
  --li-accent-hover: #4C5BC7;
  --li-accent-active: #3B4BA8;
  
  /* Границы */
  --li-border-light: rgba(68, 73, 77, 0.08);
  --li-border-base: rgba(68, 73, 77, 0.12);
  --li-border-strong: rgba(68, 73, 77, 0.16);
  
  /* Состояния */
  --li-success: #22C55E;
  --li-error: #DC2626;
  --li-warning: #F59E0B;
  --li-info: #3B82F6;
  
  /* Интерактивные состояния */
  --li-hover-overlay: rgba(71, 91, 161, 0.1);
  --li-active-overlay: rgba(71, 91, 161, 0.2);
  --li-focus-ring: rgba(71, 91, 161, 0.3);
  
  /* Шрифты */
  --li-font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --li-font-family-display: 'Manrope', var(--li-font-family);
  --li-font-family-mono: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  
  /* Размеры шрифтов */
  --li-text-xs: 12px; --li-text-sm: 14px; --li-text-base: 15px;
  --li-text-lg: 16px; --li-text-xl: 20px; --li-text-2xl: 24px;
  --li-text-3xl: 30px; --li-text-4xl: 48px; --li-text-5xl: 62px;
  
  /* Интерлиньяж */
  --li-leading-tight: 1.2; --li-leading-normal: 1.5; --li-leading-relaxed: 1.75;
  
  /* Толщина шрифта */
  --li-font-light: 300; --li-font-normal: 400; --li-font-medium: 500; --li-font-semibold: 600;
  
  /* Отступы */
  --li-space-1: 4px; --li-space-2: 8px; --li-space-3: 12px;
  --li-space-4: 16px; --li-space-5: 20px; --li-space-6: 24px;
  --li-space-8: 32px; --li-space-10: 40px; --li-space-12: 48px;
  --li-space-16: 64px; --li-space-20: 80px;
  
  /* Радиусы */
  --li-radius-sm: 4px; --li-radius-base: 6px; --li-radius-md: 8px;
  --li-radius-lg: 12px; --li-radius-xl: 16px; --li-radius-full: 50%;
  
  /* Высоты компонентов */
  --li-height-sm: 32px; --li-height-base: 36px; 
  --li-height-lg: 40px; --li-height-xl: 48px;
  
  /* Тени */
  --li-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --li-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --li-shadow-base: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.06);
  --li-shadow-md: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --li-shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  --li-shadow-focus: 0 0 0 3px var(--li-focus-ring);
  --li-shadow-error: 0 0 0 3px rgba(239, 68, 68, 0.1);
  
  /* Z-index */
  --li-z-dropdown: 1000; --li-z-sticky: 1020; --li-z-modal-backdrop: 1040;
  --li-z-modal: 1050; --li-z-popover: 1060; --li-z-tooltip: 1070; --li-z-toast: 1080;
  
  /* Анимации */
  --li-duration-75: 75ms; --li-duration-100: 100ms; --li-duration-150: 150ms;
  --li-duration-200: 200ms; --li-duration-300: 300ms; --li-duration-500: 500ms;
  --li-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --li-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --li-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --li-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* === БАЗОВЫЕ СТИЛИ === */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

html { font-size: 16px; }

body {
  font-family: var(--li-font-family); font-size: var(--li-text-base);
  line-height: var(--li-leading-normal); color: var(--li-text-primary);
  background-color: var(--li-bg-primary); -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === ТИПОГРАФИКА === */
.li-display-xl {
  font-family: var(--li-font-family-display); font-size: var(--li-text-5xl);
  font-weight: var(--li-font-semibold); line-height: var(--li-leading-tight);
  letter-spacing: -0.02em;
}

.li-heading-lg {
  font-size: var(--li-text-2xl); font-weight: var(--li-font-semibold);
  line-height: var(--li-leading-normal);
}

.li-heading-md {
  font-size: var(--li-text-xl); font-weight: var(--li-font-semibold);
  line-height: var(--li-leading-normal); margin-bottom: var(--li-space-4);
}

.li-heading-sm {
  font-size: var(--li-text-lg); font-weight: var(--li-font-semibold);
  line-height: var(--li-leading-normal); margin-bottom: var(--li-space-3);
}

.li-body-base {
  font-size: var(--li-text-base); font-weight: var(--li-font-normal);
  line-height: var(--li-leading-relaxed);
}

.li-body-sm {
  font-size: var(--li-text-sm); font-weight: var(--li-font-normal);
  line-height: var(--li-leading-relaxed);
}

.li-label {
  font-size: var(--li-text-xs); font-weight: var(--li-font-semibold);
  letter-spacing: 0.5px; text-transform: uppercase;
}

/* === ПЕРЕХОДЫ === */
.li-transition-all { transition: all var(--li-duration-150) var(--li-ease-in-out); }
.li-transition-colors {
  transition: color var(--li-duration-150) var(--li-ease-in-out),
              background-color var(--li-duration-150) var(--li-ease-in-out),
              border-color var(--li-duration-150) var(--li-ease-in-out);
}

/* === КНОПКИ === */
.li-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--li-space-2);
  padding: 0 var(--li-space-4); height: var(--li-height-base);
  font-family: var(--li-font-family); font-size: var(--li-text-sm);
  font-weight: var(--li-font-semibold); line-height: 1;
  border: 1px solid transparent; border-radius: var(--li-radius-base);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: all var(--li-duration-150) var(--li-ease-out);
  text-decoration: none;
}

.li-button:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }

.li-button--primary {
  background-color: var(--li-accent); border-color: var(--li-accent); color: white;
}
.li-button--primary:hover {
  background-color: var(--li-accent-hover); border-color: var(--li-accent-hover);
  transform: translateY(-1px); box-shadow: var(--li-shadow-sm);
}
.li-button--primary:active {
  background-color: var(--li-accent-active); transform: translateY(0);
}

.li-button--secondary {
  background-color: var(--li-bg-secondary); border-color: var(--li-border-base);
  color: var(--li-text-primary);
}
.li-button--secondary:hover {
  background-color: var(--li-bg-tertiary); border-color: var(--li-border-strong);
  transform: translateY(-1px); box-shadow: var(--li-shadow-sm);
}

.li-button--ghost {
  background-color: transparent; color: var(--li-text-secondary);
}
.li-button--ghost:hover {
  background-color: var(--li-hover-overlay); color: var(--li-text-primary);
}

.li-button--outline {
  background-color: transparent; border-color: var(--li-accent); color: var(--li-accent);
}
.li-button--outline:hover { 
  background-color: var(--li-accent); color: white; 
  transform: translateY(-1px); box-shadow: var(--li-shadow-sm);
}

.li-button--danger {
  background-color: var(--li-error); border-color: var(--li-error); color: white;
}
.li-button--danger:hover {
  background-color: #b91c1c; border-color: #b91c1c;
  transform: translateY(-1px); box-shadow: var(--li-shadow-sm);
}

.li-button--success {
  background-color: var(--li-success); border-color: var(--li-success); color: white;
}
.li-button--success:hover {
  background-color: #16a34a; border-color: #16a34a;
  transform: translateY(-1px); box-shadow: var(--li-shadow-sm);
}

.li-button--warning {
  background-color: var(--li-warning); border-color: var(--li-warning); color: white;
}
.li-button--warning:hover {
  background-color: #d97706; border-color: #d97706;
  transform: translateY(-1px); box-shadow: var(--li-shadow-sm);
}

.li-button--sm {
  height: var(--li-height-sm); padding: 0 var(--li-space-3); font-size: var(--li-text-xs);
}
.li-button--lg {
  height: var(--li-height-lg); padding: 0 var(--li-space-6); font-size: var(--li-text-lg);
}

.li-button--icon { padding: 0; width: var(--li-height-base); }
.li-button--icon.li-button--sm { width: var(--li-height-sm); }
.li-button--icon.li-button--lg { width: var(--li-height-lg); }

.li-button--full { width: 100%; }

/* === ПОЛЯ ВВОДА === */
.li-field {
  display: flex; flex-direction: column; margin-bottom: var(--li-space-5);
}

.li-field__label {
  font-size: var(--li-text-sm); font-weight: var(--li-font-semibold);
  color: var(--li-text-primary); margin-bottom: var(--li-space-2);
}

.li-field__hint {
  font-size: var(--li-text-xs); color: var(--li-text-secondary);
  margin-top: var(--li-space-1);
}

.li-field__error {
  font-size: var(--li-text-xs); color: var(--li-error);
  margin-top: var(--li-space-1);
}

.li-input {
  display: block; width: 100%; height: var(--li-height-base); 
  padding: 0 var(--li-space-3);
  font-family: var(--li-font-family); font-size: var(--li-text-sm); 
  line-height: 1.5; color: var(--li-text-primary); 
  background-color: var(--li-bg-primary);
  border: 1px solid var(--li-border-base); 
  border-radius: var(--li-radius-base);
  transition: all var(--li-duration-150) var(--li-ease-out);
}

.li-input::placeholder { color: var(--li-text-secondary); }

.li-input:focus {
  outline: none; border-color: var(--li-accent); 
  box-shadow: var(--li-shadow-focus);
}

.li-input:disabled {
  opacity: 0.6; cursor: not-allowed; 
  background-color: var(--li-bg-secondary);
}

.li-input--error {
  border-color: var(--li-error); box-shadow: var(--li-shadow-error);
}

.li-textarea {
  min-height: min-content; padding: var(--li-space-3); resize: vertical;
  font-family: var(--li-font-family-mono); font-size: var(--li-text-sm);
}

.li-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right var(--li-space-3) center; 
  background-repeat: no-repeat;
  background-size: 16px 12px; padding-right: var(--li-space-10); 
  cursor: pointer;
}

.li-search {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%239ca3af'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z' /%3e%3c/svg%3e");
  background-position: left var(--li-space-3) center; 
  background-repeat: no-repeat;
  background-size: 16px 16px; padding-left: var(--li-space-10);
}

/* === CHECKBOX, RADIO, SWITCH === */
.li-checkbox {
  appearance: none; width: 16px; height: 16px; 
  border: 3px solid var(--li-border-strong);
  border-radius: var(--li-radius-sm); 
  background-color: var(--li-bg-primary);
  cursor: pointer; position: relative; 
  transition: all var(--li-duration-150) var(--li-ease-out);
}

.li-checkbox:checked {
  background-color: var(--li-accent); border-color: var(--li-accent);
}

.li-checkbox:checked::after {
  content: ""; position: absolute; left: 2px; top: -1px; 
  width: 6px; height: 10px;
  border: solid white; border-width: 0 2px 2px 0; 
  transform: rotate(45deg);
}

.li-radio {
  appearance: none; width: 16px; height: 16px; 
  border: 1px solid var(--li-border-strong);
  border-radius: var(--li-radius-full); 
  background-color: var(--li-bg-primary);
  cursor: pointer; position: relative; 
  transition: all var(--li-duration-150) var(--li-ease-out);
}

.li-radio:checked {
  background-color: var(--li-accent); border-color: var(--li-accent);
}

.li-radio:checked::after {
  content: ""; position: absolute; top: 3px; left: 3px; 
  width: 8px; height: 8px; background: white; border-radius: 50%;
}

.li-switch {
  position: relative; display: inline-flex; align-items: center; 
  gap: var(--li-space-2); cursor: pointer; user-select: none;
}

.li-switch__input {
  position: absolute; opacity: 0; width: 0; height: 0;
}

.li-switch__track {
  width: 44px; height: 24px; background: var(--li-text-secondary); 
  border-radius: 12px; transition: all var(--li-duration-150) var(--li-ease-out);
  position: relative; flex-shrink: 0;
}

.li-switch__thumb {
  width: 20px; height: 20px; background: white; border-radius: 50%; 
  position: absolute; top: 2px; left: 2px;
  transition: all var(--li-duration-150) var(--li-ease-out); 
  box-shadow: var(--li-shadow-sm);
}

.li-switch__input:checked + .li-switch__track { 
  background: var(--li-accent); 
}

.li-switch__input:checked + .li-switch__track .li-switch__thumb { 
  transform: translateX(20px); 
}

/* === FILE UPLOAD === */
.li-file-upload {
  border: 2px dashed var(--li-border-base); 
  border-radius: var(--li-radius-md);
  padding: var(--li-space-10); text-align: center; cursor: pointer;
  transition: all var(--li-duration-150) var(--li-ease-out);
  background: var(--li-bg-tertiary);
}

.li-file-upload:hover, .li-file-upload--dragover {
  border-color: var(--li-accent); 
  background: rgba(71, 91, 161, 0.05);
}

.li-file-upload--has-file {
  border-color: var(--li-success); 
  background: rgba(34, 197, 94, 0.05);
}

.li-file-upload__input {
  position: absolute; opacity: 0; width: 0; height: 0;
}

.li-file-upload__icon {
  width: 32px; height: 32px; margin: 0 auto var(--li-space-3); 
  opacity: 0.6; transition: opacity var(--li-duration-150) var(--li-ease-out);
  color: var(--li-text-secondary);
}

.li-file-upload:hover .li-file-upload__icon { opacity: 1; }

.li-file-upload__text {
  font-size: var(--li-text-base); color: var(--li-text-secondary); 
  margin-bottom: var(--li-space-2);
}

.li-file-upload__hint {
  font-size: var(--li-text-xs); color: var(--li-text-tertiary);
}

/* === МОДАЛЬНЫЕ ОКНА === */
.li-modal-overlay {
  position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); 
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; 
  z-index: var(--li-z-modal-backdrop);
  animation: li-fade-in var(--li-duration-200) var(--li-ease-out);
}

.li-modal {
  background-color: var(--li-bg-primary); 
  border-radius: var(--li-radius-lg);
  box-shadow: var(--li-shadow-lg); max-width: 90vw; max-height: 90vh; 
  overflow: hidden;
  display: flex; flex-direction: column; z-index: var(--li-z-modal);
  animation: li-scale-in var(--li-duration-200) var(--li-ease-out);
}

.li-modal__header {
  padding: var(--li-space-6); 
  border-bottom: 1px solid var(--li-border-light);
  display: flex; align-items: center; justify-content: space-between;
}

.li-modal__title {
  font-size: var(--li-text-xl); font-weight: var(--li-font-semibold);
  color: var(--li-text-primary); margin: 0;
}

.li-modal__close {
  background: none; border: none; font-size: 20px; cursor: pointer;
  color: var(--li-text-secondary); padding: var(--li-space-1);
  border-radius: var(--li-radius-base);
  transition: all var(--li-duration-150) var(--li-ease-out);
}

.li-modal__close:hover {
  background: var(--li-hover-overlay); color: var(--li-text-primary);
}

.li-modal__body { 
  padding: var(--li-space-6); overflow-y: auto; flex: 1; 
}

.li-modal__footer {
  padding: var(--li-space-6); 
  border-top: 1px solid var(--li-border-light);
  display: flex; gap: var(--li-space-3); justify-content: flex-end;
}

/* === КАРТОЧКИ === */
.li-card {
  background-color: var(--li-bg-primary); 
  border: 1px solid var(--li-border-light);
  border-radius: var(--li-radius-md); box-shadow: var(--li-shadow-xs); 
  overflow: hidden;
}

.li-card--interactive {
  transition: all var(--li-duration-200) var(--li-ease-out);
  cursor: pointer;
}

.li-card--interactive:hover {
  box-shadow: var(--li-shadow-md); border-color: var(--li-border-base);
  transform: translateY(-1px);
}

.li-card__header {
  padding: var(--li-space-4); 
  border-bottom: 1px solid var(--li-border-light);
  background-color: var(--li-bg-secondary);
}

.li-card__title {
  font-size: var(--li-text-lg); font-weight: var(--li-font-semibold);
  color: var(--li-text-primary); margin: 0;
}

.li-card__body { padding: var(--li-space-4); }

.li-card__footer {
  padding: var(--li-space-4); 
  border-top: 1px solid var(--li-border-light);
  background-color: var(--li-bg-secondary);
}

/* === ТАБЛИЦЫ === */
.li-table-container {
  background: var(--li-bg-primary); 
  border: 1px solid var(--li-border-light);
  border-radius: var(--li-radius-md); overflow: hidden;
  box-shadow: var(--li-shadow-xs);
}

.li-table {
  width: 100%; border-collapse: collapse;
}

.li-table th, .li-table td {
  padding: var(--li-space-3) var(--li-space-4); text-align: center;
  border-bottom: 1px solid var(--li-border-light);
  vertical-align: middle;
}

.li-table th {
  background: var(--li-bg-secondary); 
  font-size: var(--li-text-xs); font-weight: var(--li-font-semibold);
  color: var(--li-text-primary); text-transform: uppercase; 
  letter-spacing: 0.05em;
}

.li-table td {
  font-size: var(--li-text-sm); font-weight: var(--li-font-normal);
}

.li-table tbody tr:hover {
  background: var(--li-bg-tertiary);
}

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

.li-table__actions {
  display: inline-flex; gap: var(--li-space-2); align-items: center;
}

.li-table__cell--nowrap { white-space: nowrap; }

.li-table__cell--truncate {
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; 
  white-space: nowrap;
}

/* === ТАБЫ === */
.li-tabs {
  margin-bottom: var(--li-space-6);
}

.li-tabs__list {
  display: flex; border-bottom: 1px solid var(--li-border-light);
}

.li-tabs__button {
  padding: var(--li-space-3) var(--li-space-4); background: none; 
  border: none; border-bottom: 2px solid transparent;
  cursor: pointer; font-family: var(--li-font-family);
  font-size: var(--li-text-sm); font-weight: var(--li-font-normal);
  color: var(--li-text-secondary); 
  transition: all var(--li-duration-150) var(--li-ease-out);
}

.li-tabs__button--active {
  color: var(--li-accent); border-bottom-color: var(--li-accent);
  font-weight: var(--li-font-semibold);
}

.li-tabs__button:hover {
  color: var(--li-text-primary); background: var(--li-bg-tertiary);
}

.li-tabs__content {
  display: none;
}

.li-tabs__content--active {
  display: block;
}

/* === PAGINATION === */
.li-pagination {
  display: flex; align-items: center; gap: var(--li-space-1);
}

.li-pagination__info {
  font-size: var(--li-text-xs); color: var(--li-text-secondary);
  margin-right: var(--li-space-4);
}

.li-pagination__button {
  padding: var(--li-space-2) var(--li-space-3); 
  font-size: var(--li-text-xs);
  min-width: 36px; justify-content: center;
  height: var(--li-height-sm);
}

.li-pagination__button--active {
  background: var(--li-accent); color: white; border-color: var(--li-accent);
}

.li-pagination__button--active:hover {
  background: var(--li-accent-hover); border-color: var(--li-accent-hover);
}

/* === НАВИГАЦИЯ === */
.li-sidebar {
  width: 240px; height: 100vh; background-color: var(--li-bg-secondary);
  border-right: 1px solid var(--li-border-light); 
  display: flex; flex-direction: column;
  position: fixed; left: 0; top: 0; z-index: var(--li-z-dropdown);
}

.li-sidebar__nav { 
  flex: 1; padding: var(--li-space-2) 0; overflow-y: auto; 
}

.li-sidebar__nav-item {
  display: flex; align-items: center; gap: var(--li-space-3);
  padding: var(--li-space-2) var(--li-space-4); 
  color: var(--li-text-secondary);
  text-decoration: none; font-size: var(--li-text-sm); 
  font-weight: var(--li-font-medium);
  transition: all var(--li-duration-150) var(--li-ease-out);
}

.li-sidebar__nav-item:hover,
.li-sidebar__nav-item--active {
  color: var(--li-text-primary); 
  background-color: var(--li-hover-overlay);
}

.li-sidebar__nav-group {
  margin-bottom: var(--li-space-6);
}

.li-sidebar__nav-title {
  padding: var(--li-space-2) var(--li-space-4); 
  font-size: var(--li-text-xs); font-weight: var(--li-font-semibold);
  color: var(--li-text-tertiary); text-transform: uppercase; 
  letter-spacing: 0.05em;
}

/* === BREADCRUMBS === */
.li-breadcrumb {
  display: flex; align-items: center; gap: var(--li-space-2);
  margin-bottom: var(--li-space-6); font-size: var(--li-text-sm);
}

.li-breadcrumb__link {
  color: var(--li-text-secondary); text-decoration: none;
  transition: color var(--li-duration-150) var(--li-ease-out);
}

.li-breadcrumb__link:hover {
  color: var(--li-text-primary);
}

.li-breadcrumb__separator {
  color: var(--li-text-tertiary);
}

/* === DROPDOWN === */
.li-dropdown { 
  position: relative; display: inline-block; 
}

.li-dropdown__content {
  position: absolute; top: 100%; left: 0; min-width: 200px;
  background-color: var(--li-bg-primary); 
  border: 1px solid var(--li-border-base);
  border-radius: var(--li-radius-md); box-shadow: var(--li-shadow-lg);
  padding: var(--li-space-2) 0; z-index: var(--li-z-dropdown);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all var(--li-duration-150) var(--li-ease-out);
}

.li-dropdown--open .li-dropdown__content {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.li-dropdown__item {
  display: flex; align-items: center; gap: var(--li-space-2);
  padding: var(--li-space-2) var(--li-space-4); 
  color: var(--li-text-primary);
  text-decoration: none; font-size: var(--li-text-sm); 
  cursor: pointer;
  transition: background-color var(--li-duration-150) var(--li-ease-out);
}

.li-dropdown__item:hover { 
  background-color: var(--li-hover-overlay); 
}

.li-dropdown__divider {
  height: 1px; background: var(--li-border-light); 
  margin: var(--li-space-1) 0;
}

/* === NOTIFICATIONS === */
.li-notification-container {
  position: fixed; bottom: var(--li-space-5); right: var(--li-space-5);
  z-index: var(--li-z-toast); display: flex; flex-direction: column-reverse;
  gap: var(--li-space-3); max-height: calc(100vh - 80px); overflow: hidden;
  pointer-events: none;
}

.li-notification {
  width: 360px; padding: var(--li-space-4);
  border-radius: var(--li-radius-base); 
  border: 1px solid var(--li-border-light);
  box-shadow: var(--li-shadow-sm); 
  font-size: var(--li-text-sm); line-height: var(--li-leading-normal);
  position: relative; background: var(--li-bg-tertiary);
  color: var(--li-text-primary);
  transform: translateX(100%); 
  opacity: 0;
  transition: all var(--li-duration-300) var(--li-ease-out);
  pointer-events: auto;
  cursor: pointer;
  overflow: hidden;
}

.li-notification--show { 
  transform: translateX(0); 
  opacity: 1;
}

.li-notification--hide { 
  transform: translateX(100%); 
  opacity: 0; 
}

.li-notification--success {
  border-left: 3px solid var(--li-success);
}

.li-notification--error {
  border-left: 3px solid var(--li-error);
}

.li-notification--warning {
  border-left: 3px solid var(--li-warning);
}

.li-notification--info {
  border-left: 3px solid var(--li-info);
}

.li-notification:hover .li-notification__progress {
  animation-play-state: paused;
}

.li-notification__content {
  display: flex; align-items: flex-start; gap: var(--li-space-3);
  position: relative; z-index: 1;
}

.li-notification__icon {
  flex-shrink: 0; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--li-radius-full);
  font-weight: var(--li-font-semibold); font-size: var(--li-text-xs);
  margin-top: 1px;
}

.li-notification--success .li-notification__icon {
  background: var(--li-success); color: white;
}

.li-notification--error .li-notification__icon {
  background: var(--li-error); color: white;
}

.li-notification--warning .li-notification__icon {
  background: var(--li-warning); color: white;
}

.li-notification--info .li-notification__icon {
  background: var(--li-info); color: white;
}

.li-notification__message {
  flex: 1; font-weight: var(--li-font-medium);
}

.li-notification__close {
  position: absolute; top: var(--li-space-2); right: var(--li-space-2);
  background: none; border: none; cursor: pointer; 
  color: var(--li-text-secondary); opacity: 0;
  padding: var(--li-space-1); border-radius: var(--li-radius-base);
  transition: all var(--li-duration-150) var(--li-ease-out);
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}

.li-notification:hover .li-notification__close {
  opacity: 1;
}

.li-notification__close:hover {
  background: var(--li-hover-overlay); color: var(--li-text-primary);
}

.li-notification__progress {
  position: absolute; bottom: 0; left: 0; 
  height: 2px; background: currentColor; opacity: 0.3;
  transform-origin: left center;
  animation: li-notification-progress 5s linear forwards;
}

.li-notification--success .li-notification__progress {
  color: var(--li-success);
}

.li-notification--error .li-notification__progress {
  color: var(--li-error);
}

.li-notification--warning .li-notification__progress {
  color: var(--li-warning);
}

.li-notification--info .li-notification__progress {
  color: var(--li-info);
}

/* === TOOLTIP === */
.li-tooltip {
  position: relative; display: inline-block;
}

.li-tooltip__content {
  position: absolute; bottom: 125%; left: 50%; 
  transform: translateX(-50%);
  background: var(--li-text-tertiary); color: white;
  padding: var(--li-space-2) var(--li-space-3); 
  border-radius: var(--li-radius-base);
  font-size: var(--li-text-xs); white-space: nowrap;
  opacity: 0; visibility: hidden; 
  transition: all var(--li-duration-150) var(--li-ease-out);
  z-index: var(--li-z-tooltip);
}

.li-tooltip:hover .li-tooltip__content {
  opacity: 1; visibility: visible;
}

.li-tooltip__content::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent; 
  border-top-color: var(--li-text-tertiary);
}

/* === ACCORDION === */
.li-accordion {
  border: 1px solid var(--li-border-light); 
  border-radius: var(--li-radius-md);
  overflow: hidden; background: var(--li-bg-primary);
}

.li-accordion__item {
  border-bottom: 1px solid var(--li-border-light);
}

.li-accordion__item:last-child {
  border-bottom: none;
}

.li-accordion__header {
  padding: var(--li-space-4); background: var(--li-bg-secondary);
  cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; 
  transition: background-color var(--li-duration-150) var(--li-ease-out);
  font-weight: var(--li-font-semibold);
}

.li-accordion__header:hover {
  background: var(--li-bg-tertiary);
}

.li-accordion__content {
  padding: var(--li-space-4); display: none;
}

.li-accordion__item--open .li-accordion__content {
  display: block;
}

.li-accordion__icon {
  transition: transform var(--li-duration-150) var(--li-ease-out);
}

.li-accordion__item--open .li-accordion__icon {
  transform: rotate(180deg);
}

/* === DIVIDER === */
.li-divider {
  height: 1px; background: var(--li-border-light); 
  margin: var(--li-space-6) 0;
}

.li-divider--vertical {
  width: 1px; height: 100%; background: var(--li-border-light);
  margin: 0 var(--li-space-3);
}

.li-divider--text {
  position: relative; text-align: center; margin: var(--li-space-6) 0;
}

.li-divider--text::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: var(--li-border-light);
}

.li-divider--text span {
  background: var(--li-bg-primary); padding: 0 var(--li-space-4);
  color: var(--li-text-secondary); font-size: var(--li-text-xs);
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* === БЕЙДЖИ === */
.li-badge {
  display: inline-flex; align-items: center; gap: var(--li-space-1);
  padding: 2px var(--li-space-2); font-size: var(--li-text-xs);
  font-weight: var(--li-font-medium); 
  border-radius: var(--li-radius-sm); white-space: nowrap;
}

.li-badge--default {
  background-color: var(--li-bg-secondary); 
  color: var(--li-text-secondary);
}

.li-badge--success { 
  background-color: #DCFCE7; color: #166534; 
}

.li-badge--error { 
  background-color: #FEE2E2; color: #DC2626; 
}

.li-badge--warning { 
  background-color: #FEF3C7; color: #D97706; 
}

.li-badge--info { 
  background-color: #DBEAFE; color: #2563EB; 
}

.li-badge--outline {
  background: transparent; border: 1px solid var(--li-border-base);
  color: var(--li-text-secondary);
}

.li-badge--dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
}

/* === ПРОГРЕСС И СПИННЕРЫ === */
.li-progress {
  width: 100%; height: 8px; 
  background-color: var(--li-bg-tertiary);
  border-radius: var(--li-radius-base); overflow: hidden;
}

.li-progress__fill {
  height: 100%; background-color: var(--li-accent); 
  border-radius: var(--li-radius-base);
  transition: width var(--li-duration-300) var(--li-ease-out);
}

.li-progress--sm { height: 4px; }
.li-progress--lg { height: 12px; }

.li-progress-circle {
  width: 40px; height: 40px; position: relative;
}

.li-progress-circle svg {
  transform: rotate(-90deg);
}

.li-progress-circle__bg {
  fill: none; stroke: var(--li-border-base); stroke-width: 3;
}

.li-progress-circle__bar {
  fill: none; stroke: var(--li-accent); stroke-width: 3;
  transition: stroke-dashoffset var(--li-duration-300) var(--li-ease-out);
}

.li-spinner {
  width: 20px; height: 20px; 
  border: 2px solid var(--li-bg-tertiary);
  border-top: 2px solid var(--li-accent); border-radius: 50%;
  animation: li-spin 1s linear infinite;
}

.li-spinner--sm { width: 16px; height: 16px; border-width: 1.5px; }
.li-spinner--lg { width: 24px; height: 24px; border-width: 3px; }
.li-spinner--white { 
  border-color: rgba(255,255,255,0.3); 
  border-top-color: white; 
}

/* === SKELETON === */
.li-skeleton {
  background: linear-gradient(90deg, var(--li-bg-tertiary) 25%, 
                              var(--li-border-base) 50%, 
                              var(--li-bg-tertiary) 75%);
  background-size: 200% 100%; animation: li-skeleton 1.5s infinite;
  border-radius: var(--li-radius-base);
}

.li-skeleton--text {
  height: 16px; margin-bottom: var(--li-space-2);
}

.li-skeleton--text:last-child {
  margin-bottom: 0;
}

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

.li-skeleton--button {
  height: 36px; width: 80px;
}

.li-loading-overlay {
  position: absolute; inset: 0; 
  background: rgba(255,255,255,0.8); 
  display: flex; align-items: center; justify-content: center;
  z-index: 100; border-radius: inherit;
}

/* === EMPTY STATE === */
.li-empty-state {
  text-align: center; padding: var(--li-space-16) var(--li-space-5);
}

.li-empty-state__icon {
  width: 64px; height: 64px; margin: 0 auto var(--li-space-5);
  opacity: 0.3; color: var(--li-text-secondary);
}

.li-empty-state__title {
  font-size: var(--li-text-lg); font-weight: var(--li-font-semibold);
  margin-bottom: var(--li-space-2);
}

.li-empty-state__text {
  color: var(--li-text-secondary); margin-bottom: var(--li-space-5);
}

/* === CODE DISPLAY === */
.li-code-display {
  font-family: var(--li-font-family-mono); 
  font-size: var(--li-text-sm); line-height: 1.5;
  max-height: 400px; overflow-y: auto; white-space: pre-wrap;
  word-break: break-all; background: var(--li-bg-tertiary);
  border: 1px solid var(--li-border-base); 
  border-radius: var(--li-radius-base);
  padding: var(--li-space-4);
}

/* === LAYOUT === */
.li-container {
  max-width: calc(1200px * 1.618); margin: 0 auto; 
  padding: var(--li-space-10) var(--li-space-6);
}

.li-container--sm {
  max-width: 800px; margin: 0 auto; 
  padding: var(--li-space-8) var(--li-space-6);
}

.li-container--lg {
  max-width: calc(1400px * 1.618); margin: 0 auto; 
  padding: var(--li-space-12) var(--li-space-6);
}

.li-grid {
  display: grid; gap: var(--li-space-5);
}

.li-grid--2 { grid-template-columns: 1fr 1fr; }
.li-grid--3 { grid-template-columns: repeat(3, 1fr); }
.li-grid--4 { grid-template-columns: repeat(4, 1fr); }
.li-grid--auto { 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
}
.li-grid--sidebar { 
  grid-template-columns: 250px 1fr; 
}
.li-grid--content { 
  grid-template-columns: 1fr 300px; 
}

.li-app {
  display: grid; 
  grid-template-areas: "sidebar header" "sidebar main";
  grid-template-columns: 240px 1fr; 
  grid-template-rows: auto 1fr; 
  height: 100vh;
  font-family: var(--li-font-family); 
  color: var(--li-text-primary);
  background-color: var(--li-bg-primary);
}

.li-header {
  grid-area: header; display: flex; align-items: center; 
  justify-content: space-between;
  padding: 0 var(--li-space-6); height: 64px; 
  border-bottom: 1px solid var(--li-border-light);
  background-color: var(--li-bg-primary);
}

.li-header__brand {
  font-size: var(--li-text-lg); font-weight: var(--li-font-semibold);
  color: var(--li-text-primary); text-decoration: none;
  transition: opacity var(--li-duration-150) var(--li-ease-out);
}

.li-header__brand:hover {
  opacity: 0.7;
}

.li-header__nav {
  display: flex; align-items: center; gap: var(--li-space-4);
}

.li-main {
  grid-area: main; display: flex; flex-direction: column; 
  overflow: hidden; background-color: var(--li-bg-secondary);
}

/* === СКРОЛЛБАРЫ === */
.li-scrollable { 
  scrollbar-width: thin; 
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent; 
}

.li-scrollable::-webkit-scrollbar { 
  width: 6px; height: 6px; 
}

.li-scrollable::-webkit-scrollbar-track { 
  background: transparent; 
}

.li-scrollable::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3); border-radius: 3px;
  transition: background var(--li-duration-200) var(--li-ease-out);
}

.li-scrollable::-webkit-scrollbar-thumb:hover { 
  background: rgba(0, 0, 0, 0.5); 
}

/* === ИКОНКИ И АВАТАРЫ === */
.li-icon {
  width: 15px; height: 15px; color: currentColor; flex-shrink: 0;
  transition: color var(--li-duration-150) var(--li-ease-out);
}

.li-icon--xs { width: 12px; height: 12px; }
.li-icon--sm { width: 14px; height: 14px; }
.li-icon--lg { width: 18px; height: 18px; }
.li-icon--xl { width: 20px; height: 20px; }
.li-icon--2xl { width: 24px; height: 24px; }

.li-avatar {
  width: 32px; height: 32px; border-radius: var(--li-radius-full);
  background-color: var(--li-bg-tertiary); 
  display: flex; align-items: center; justify-content: center;
  font-size: var(--li-text-sm); font-weight: var(--li-font-semibold);
  color: var(--li-text-secondary);
}

.li-avatar--xs { width: 20px; height: 20px; font-size: var(--li-text-xs); }
.li-avatar--sm { width: 24px; height: 24px; font-size: var(--li-text-xs); }
.li-avatar--lg { width: 40px; height: 40px; font-size: var(--li-text-base); }
.li-avatar--xl { width: 48px; height: 48px; font-size: var(--li-text-lg); }

/* === АНИМАЦИИ === */
@keyframes li-fade-in { 
  from { opacity: 0; } 
  to { opacity: 1; } 
}

@keyframes li-scale-in { 
  from { opacity: 0; transform: scale(0.95); } 
  to { opacity: 1; transform: scale(1); } 
}

@keyframes li-spin { 
  0% { transform: rotate(0deg); } 
  100% { transform: rotate(360deg); } 
}

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

@keyframes li-slide-in { 
  from { transform: translateY(-10px); opacity: 0; } 
  to { transform: translateY(0); opacity: 1; } 
}

@keyframes li-notification-progress {
  from { width: 100%; }
  to { width: 0%; }
}

/* === УТИЛИТАРНЫЕ КЛАССЫ === */
.li-hidden { display: none !important; }
.li-visible { display: block !important; }
.li-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; 
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); 
  white-space: nowrap; border: 0;
}

/* Цветовые утилиты */
.li-text-primary { color: var(--li-text-primary) !important; }
.li-text-secondary { color: var(--li-text-secondary) !important; }
.li-text-tertiary { color: var(--li-text-tertiary) !important; }
.li-text-accent { color: var(--li-accent) !important; }
.li-text-success { color: var(--li-success) !important; }
.li-text-error { color: var(--li-error) !important; }
.li-text-warning { color: var(--li-warning) !important; }
.li-text-info { color: var(--li-info) !important; }

.li-bg-primary { background-color: var(--li-bg-primary) !important; }
.li-bg-secondary { background-color: var(--li-bg-secondary) !important; }
.li-bg-tertiary { background-color: var(--li-bg-tertiary) !important; }

/* Текст утилиты */
.li-truncate { 
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 
}
.li-break-words { overflow-wrap: break-word; }
.li-select-none { user-select: none; }
.li-text-center { text-align: center; }
.li-text-right { text-align: right; }
.li-font-medium { font-weight: var(--li-font-medium); }
.li-font-semibold { font-weight: var(--li-font-semibold); }

/* Spacing утилиты */
.li-p-0 { padding: 0 !important; }
.li-p-1 { padding: var(--li-space-1) !important; }
.li-p-2 { padding: var(--li-space-2) !important; }
.li-p-3 { padding: var(--li-space-3) !important; }
.li-p-4 { padding: var(--li-space-4) !important; }
.li-p-6 { padding: var(--li-space-6) !important; }
.li-p-8 { padding: var(--li-space-8) !important; }

.li-px-2 { padding-left: var(--li-space-2) !important; padding-right: var(--li-space-2) !important; }
.li-px-4 { padding-left: var(--li-space-4) !important; padding-right: var(--li-space-4) !important; }
.li-py-2 { padding-top: var(--li-space-2) !important; padding-bottom: var(--li-space-2) !important; }
.li-py-4 { padding-top: var(--li-space-4) !important; padding-bottom: var(--li-space-4) !important; }

.li-m-0 { margin: 0 !important; }
.li-m-1 { margin: var(--li-space-1) !important; }
.li-m-2 { margin: var(--li-space-2) !important; }
.li-m-3 { margin: var(--li-space-3) !important; }
.li-m-4 { margin: var(--li-space-4) !important; }
.li-m-6 { margin: var(--li-space-6) !important; }

.li-mt-1 { margin-top: var(--li-space-1) !important; }
.li-mt-2 { margin-top: var(--li-space-2) !important; }
.li-mt-4 { margin-top: var(--li-space-4) !important; }
.li-mt-6 { margin-top: var(--li-space-6) !important; }
.li-mt-8 { margin-top: var(--li-space-8) !important; }

.li-mb-1 { margin-bottom: var(--li-space-1) !important; }
.li-mb-2 { margin-bottom: var(--li-space-2) !important; }
.li-mb-4 { margin-bottom: var(--li-space-4) !important; }
.li-mb-6 { margin-bottom: var(--li-space-6) !important; }
.li-mb-8 { margin-bottom: var(--li-space-8) !important; }

.li-ml-2 { margin-left: var(--li-space-2) !important; }
.li-mr-2 { margin-right: var(--li-space-2) !important; }
.li-ml-4 { margin-left: var(--li-space-4) !important; }
.li-mr-4 { margin-right: var(--li-space-4) !important; }

.li-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.li-m-auto { margin: auto !important; }

/* Flexbox утилиты */
.li-flex { display: flex !important; }
.li-flex-col { flex-direction: column !important; }
.li-items-center { align-items: center !important; }
.li-items-start { align-items: flex-start !important; }
.li-items-end { align-items: flex-end !important; }
.li-justify-center { justify-content: center !important; }
.li-justify-between { justify-content: space-between !important; }
.li-justify-end { justify-content: flex-end !important; }

.li-gap-1 { gap: var(--li-space-1) !important; }
.li-gap-2 { gap: var(--li-space-2) !important; }
.li-gap-3 { gap: var(--li-space-3) !important; }
.li-gap-4 { gap: var(--li-space-4) !important; }
.li-gap-6 { gap: var(--li-space-6) !important; }
.li-gap-8 { gap: var(--li-space-8) !important; }

/* Позиционирование */
.li-relative { position: relative !important; }
.li-absolute { position: absolute !important; }
.li-fixed { position: fixed !important; }
.li-sticky { position: sticky !important; top: 0; }
.li-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

/* Z-index */
.li-z-10 { z-index: 10 !important; }
.li-z-50 { z-index: 50 !important; }
.li-z-100 { z-index: 100 !important; }

/* Opacity */
.li-opacity-0 { opacity: 0 !important; }
.li-opacity-50 { opacity: 0.5 !important; }
.li-opacity-75 { opacity: 0.75 !important; }

/* Cursor */
.li-cursor-pointer { cursor: pointer !important; }
.li-cursor-not-allowed { cursor: not-allowed !important; }

/* Overflow */
.li-overflow-hidden { overflow: hidden !important; }
.li-overflow-auto { overflow: auto !important; }

/* Width & Height */
.li-w-full { width: 100% !important; }
.li-h-full { height: 100% !important; }
.li-min-h-screen { min-height: 100vh !important; }

.li-max-w-xs { max-width: 320px !important; }
.li-max-w-sm { max-width: 384px !important; }
.li-max-w-md { max-width: 448px !important; }
.li-max-w-lg { max-width: 512px !important; }
.li-max-w-xl { max-width: 576px !important; }

/* Animation Classes */
.li-animate-fade-in { animation: li-fade-in var(--li-duration-200) var(--li-ease-out); }
.li-animate-slide-in { animation: li-slide-in var(--li-duration-200) var(--li-ease-out); }

/* Phosphor Icons Integration */
.ph { line-height: 1; vertical-align: middle; }
.ph-sm { font-size: 14px; } 
.ph-lg { font-size: 20px; } 
.ph-xl { font-size: 24px; }