:root {
  --color-primary: #645688;
  --color-secondary: #fff;
  --color-text: #fff;
  --color-danger: #833232;
  --current-palette: alpha;
  --color-alpha-1: #f9f1f2;
  --color-alpha-2: #efd2d7;
  --color-alpha-3: #e0909e;
  --color-alpha-4: #c4455c;
  --color-alpha-5: #9e1b33;
  --color-alpha-6: #721324;
  --color-beta-1: #eef0f3;
  --color-beta-2: #d2d7dd;
  --color-beta-3: #98a0aa;
  --color-beta-4: #7b838f;
  --color-beta-5: #4a5361;
  --color-beta-6: #2d3747;
  --color-gamma-1: #e4f1f8;
  --color-gamma-2: #b7d6ea;
  --color-gamma-3: #8bbbdc;
  --color-gamma-4: #5a9ec9;
  --color-gamma-5: #1b719e;
  --color-gamma-6: #0d567f;
  --color-base-exo-1: #fff;
  --color-base-exo-2: #f6f6f6;
  --color-base-exo-3: #ebebeb;
  --color-base-exo-4: #d7d7d7;
  --color-base-exo-5: #acacac;
  --color-base-exo-6: #7e7e7e;
  --color-base-exo-7: #474747;
  --color-base-exo-8: #232323;
  --color-base-exo-9: #000;
  --color-base-core-1: var(--color-alpha-1);
  --color-base-core-2: var(--color-alpha-2);
  --color-base-core-3: var(--color-alpha-3);
  --color-base-core-4: var(--color-alpha-4);
  --color-base-core-5: var(--color-alpha-5);
  --color-base-core-6: var(--color-alpha-6);
  --color-base-vacuum-split: rgb(0 0 0 / 16%);
  --color-base-vacuum-core: var(--color-alpha-5);
  --color-base-vacuum-dark: #000;
  --color-base-vacuum-section: #ebebeb;
  --color-base-vacuum-module: #f5f5f5;
  --color-base-vacuum-light: #fff;
  --color-continuum-quantum-1: #ffd8d6;
  --color-continuum-quantum-2: #ffbbb8;
  --color-continuum-quantum-3: #ff8b85;
  --color-continuum-quantum-4: #ff6e66;
  --color-continuum-quantum-5: #ff5147;
  --color-continuum-quantum-6: #ff3b30;
  --color-continuum-plasma-1: #ffeed6;
  --color-continuum-plasma-2: #ffddad;
  --color-continuum-plasma-3: #ffc470;
  --color-continuum-plasma-4: #ffb347;
  --color-continuum-plasma-5: #ff962c;
  --color-continuum-plasma-6: #ff9500;
  --color-continuum-aura-1: #e0f5ea;
  --color-continuum-aura-2: #bfe5d1;
  --color-continuum-aura-3: #96d3b3;
  --color-continuum-aura-4: #6dc195;
  --color-continuum-aura-5: #44af77;
  --color-continuum-aura-6: #1b9e5a;
  --color-continuum-io-1: #fff0c2;
  --color-continuum-io-2: #fde7a5;
  --color-continuum-io-3: #fbde88;
  --color-continuum-io-4: #f8d66a;
  --color-continuum-io-5: #f6cd4d;
  --color-continuum-io-6: #f4c430;
  --color-continuum-ultraviolet-1: #f0e6ff;
  --color-continuum-ultraviolet-2: #dccaf0;
  --color-continuum-ultraviolet-3: #c8afe1;
  --color-continuum-ultraviolet-4: #b493d2;
  --color-continuum-ultraviolet-5: #a078c3;
  --color-continuum-ultraviolet-6: #8d5cb4;
  --color-continuum-andromeda-1: #f0e8f0;
  --color-continuum-andromeda-2: #dbcfdb;
  --color-continuum-andromeda-3: #c7b6c7;
  --color-continuum-andromeda-4: #b29db3;
  --color-continuum-andromeda-5: #9e849f;
  --color-continuum-andromeda-6: #8a6b8b;
  --color-continuum-galaxite-1: #e6ecfa;
  --color-continuum-galaxite-2: #d3def7;
  --color-continuum-galaxite-3: #bfcef4;
  --color-continuum-galaxite-4: #abbef1;
  --color-continuum-galaxite-5: #97aeee;
  --color-continuum-galaxite-6: #839eeb;
  --color-continuum-quasar-1: #ebf4fa;
  --color-continuum-quasar-2: #e0edf5;
  --color-continuum-quasar-3: #d1e3ed;
  --color-continuum-quasar-4: #c2d9e6;
  --color-continuum-quasar-5: #b5cfde;
  --color-continuum-quasar-6: #a8c4d4;
  --color-continuum-atmosphere-1: #e0f7ff;
  --color-continuum-atmosphere-2: #d0f2ff;
  --color-continuum-atmosphere-3: #b8e8fa;
  --color-continuum-atmosphere-4: #9fdef5;
  --color-continuum-atmosphere-5: #8bd4f0;
  --color-continuum-atmosphere-6: #87ceeb;
}

[data-palette='beta'] {
  --color-base-core-1: var(--color-beta-1);
  --color-base-core-2: var(--color-beta-2);
  --color-base-core-3: var(--color-beta-3);
  --color-base-core-4: var(--color-beta-4);
  --color-base-core-5: var(--color-beta-5);
  --color-base-core-6: var(--color-beta-6);
  --color-base-vacuum-core: var(--color-beta-5);
}

[data-palette='gamma'] {
  --color-base-core-1: var(--color-gamma-1);
  --color-base-core-2: var(--color-gamma-2);
  --color-base-core-3: var(--color-gamma-3);
  --color-base-core-4: var(--color-gamma-4);
  --color-base-core-5: var(--color-gamma-5);
  --color-base-core-6: var(--color-gamma-6);
  --color-base-vacuum-core: var(--color-gamma-5);
}

@font-face {
  font-family: 'Roboto Mono';
  src:
    url('./fonts/RobotoMono-Regular.woff2') format('woff2'),
    url('./fonts/RobotoMono-Regular.woff') format('woff'),
    url('./fonts/RobotoMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Mono';
  src:
    url('./fonts/RobotoMono-Medium.woff2') format('woff2'),
    url('./fonts/RobotoMono-Medium.woff') format('woff'),
    url('./fonts/RobotoMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Mono';
  src:
    url('./fonts/RobotoMono-Bold.woff2') format('woff2'),
    url('./fonts/RobotoMono-Bold.woff') format('woff'),
    url('./fonts/RobotoMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Roboto;
  src:
    url('./fonts/Roboto-Regular.woff2') format('woff2'),
    url('./fonts/Roboto-Regular.woff') format('woff'),
    url('./fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Roboto;
  src:
    url('./fonts/Roboto-Medium.woff2') format('woff2'),
    url('./fonts/Roboto-Medium.woff') format('woff'),
    url('./fonts/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Roboto;
  src:
    url('./fonts/Roboto-Bold.woff2') format('woff2'),
    url('./fonts/Roboto-Bold.woff') format('woff'),
    url('./fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Jaguar;
  src: url('./fonts/Jaguar-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Jaguar;
  src: url('./fonts/Jaguar-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Jaguar;
  src: url('./fonts/Jaguar-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-roboto-mono: 'Roboto Mono', monospace;
  --font-jaguar: 'Jaguar', sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --font-size-xxl: 48px;
  --font-size-xl: 32px;
  --font-size-l: 24px;
  --font-size-m: 20px;
  --font-size-s: 18px;
  --font-size-xs: 16px;
  --font-size-2xs: 14px;
  --font-size-3xs: 12px;
  --font-size-4xs: 9px;
  --font-size-5xs: 6px;

  --cu-line-height: 130%;

  --line-height-xxl: 56px;
  --line-height-xl: 40px;
  --line-height-l: 32px;
  --line-height-m: 28px;
  --line-height-s: 24px;
  --line-height-xs: 22px;
  --line-height-2xs: 18px;
  --line-height-3xs: 16px;
  --line-height-4xs: 12px;

  /* Typography - базовые размеры (m) */
  --h1-base: 48px;
  --h2-base: 32px;
  --h3-base: 24px;
  --h4-base: 20px;
  --sh1-base: 32px;
  --sh2-base: 24px;
  --sh3-base: 20px;
  --sh4-base: 18px;
  --body-base: 16px;
  --caption-base: 12px;
  --additional-base: 9px;

  /* Дельты размеров по группам */
  --delta-large: 4px;
  --delta-medium: 2px;
  --delta-small: 1px;
}

:root {
    --spacing-s: 4px;
    --spacing-md: 8px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;

    --cu-table-sticky-top: 72px
}
:root {
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
}
:root {
  --circle-radius: 666px;

  /* Avatar size */
  --avatar-size-xxs: 24px;
  --avatar-size-xs: 28px;
  --avatar-size-s: 32px;
  --avatar-size-m: 40px;
  --avatar-size-l: 48px;
  --avatar-size-xl: 56px;
  --avatar-size-2xl: 64px;
  --avatar-size-3xl: 200px;

  /* Badge size */
  --size-badge-xxs: 8px;
  --size-badge-xs: 12px;
  --size-badge-s: 16px;
  --size-badge-m: 20px;
  --size-badge-l: 24px;
  --size-badge-xl: 28px;
  --size-badge-xxl: 32px;

  /* Border sizes */
  --btn-border-width: 1px;
  --border-width-xs: 1px;
  --border-width-s: 2px;
  --border-width-m: 3px;
  --border-radius-xs: 0;
  --border-radius-s: 0;
  --border-radius-m: 8px;
  --border-radius-l: 12px;
  --border-radius-xl: 16px;
  --border-radius-circle: 50%;

  /* Button height size */
  --size-btn-s: 32px;
  --size-btn-m: 40px;
  --size-btn-l: 44px;

  /* Modal width size */
  --size-modal-s: 476px;
  --size-modal-m: 556px;
  --size-modal-l: 636px;

  /* Radio sizes */
  --size-radio-s: 16px;
  --size-radio-m: 20px;
  --size-radio-l: 24px;
  --size-radio-hover-s: 24px;
  --size-radio-hover-m: 32px;
  --size-radio-hover-l: 40px;

  /* __________________ */

  /* Sidebar sizes */
  /* Базовые ширины */
  --sidebar-width-s: 292px;
  --sidebar-width-m: 292px;
  --sidebar-width-l: 368px;

  /* Collapsed ширины (минимальная кастомная ширина = этим значениям) */
  --sidebar-collapsed-width-s: 56px;
  --sidebar-collapsed-width-m: 60px;
  --sidebar-collapsed-width-l: 64px;

  /* Hidden ширины (узкий скрытый режим) */
  --sidebar-hidden-width-s: 12px;
  --sidebar-hidden-width-m: 16px;
  --sidebar-hidden-width-l: 20px;

  /* Высоты хедера/юзера/кнопок управления */
  --sidebar-row-height-s: 56px;
  --sidebar-row-height-m: 60px;
  --sidebar-row-height-l: 64px;

  /* Общие отступы */
  --sidebar-padding-x: var(--spacing-md);
  --sidebar-user-gap: var(--spacing-lg);

  /* __________________ */

  /* Navigation item height sizes */
  --size-nav-item-s: 20px;
  --size-nav-item-m: 24px;
  --size-nav-item-l: 28px;
}

:root {
  --action-busy: url('/assets/cursors/action_busy.svg') 8 0, progress;
  --default: url('/assets/cursors/default.svg') 10 10, default;
  --hand-grabbing: url('/assets/cursors/hand_grabbing.svg') 16 16, grabbing;
  --hand-open: url('/assets/cursors/hand_open.svg') 16 16, grab;
  --hand-pointing: url('/assets/cursors/hand_pointing.svg') 10 10, pointer;
  --action-not-allowed: url('/assets/cursors/action_not_allowed.svg') 10 0, not-allowed;
  --action-poof: url('/assets/cursors/action_poof.svg') 10 0, no-drop;
  --cell: url('/assets/cursors/cell.svg') 16 16, cell;
  --context-menu: url('/assets/cursors/context_menu.svg') 10 10, context-menu;
  --help: url('/assets/cursors/help.svg') 10 10, help;
  --make-alias: url('/assets/cursors/make_alias.svg') 16 16, alias;
  --move: url('/assets/cursors/move.svg') 16 16, move;

  --resize-up: url('/assets/cursors/resize_up.svg') 16 16, row-resize;
  --resize-down: url('/assets/cursors/resize_down.svg') 16 16, row-resize;
  --resize-left: url('/assets/cursors/resize_left.svg') 16 16, col-resize;
  --resize-right: url('/assets/cursors/resize_right.svg') 16 16, col-resize;
  --resize-left-right: url('/assets/cursors/resize_left_right.svg') 16 16, col-resize;
  --resize-up-down: url('/assets/cursors/resize_up_down.svg') 16 16, row-resize;

  --resize-north: url('/assets/cursors/resize_north.svg') 16 16, n-resize;
  --resize-north-south: url('/assets/cursors/resize_north_south.svg') 16 16, ns-resize;
  --resize-northeast: url('/assets/cursors/resize_northeast.svg') 16 16, ne-resize;
  --resize-northeast-southwest:
    url('/assets/cursors/resize_northeast_southwest.svg') 16 16, nesw-resize;
  --resize-northwest: url('/assets/cursors/resize_northwest.svg') 16 16, nw-resize;
  --resize-northwest-southeast:
    url('/assets/cursors/resize_northwest_southeast.svg') 16 16, nwse-resize;

  --resize-east: url('/assets/cursors/resize_east.svg') 16 16, e-resize;
  --resize-south: url('/assets/cursors/resize_south.svg') 16 16, s-resize;
  --resize-southeast: url('/assets/cursors/resize_southeast.svg') 16 16, se-resize;
  --resize-southwest: url('/assets/cursors/resize_southwest.svg') 16 16, sw-resize;
  --resize-west: url('/assets/cursors/resize_west.svg') 16 16, w-resize;
  --resize-west-east: url('/assets/cursors/resize_west_east.svg') 16 16, ew-resize;
  --text-cursor: url('/assets/cursors/text_cursor.svg') 16 24, text;
  --text-cursor-vertical: url('/assets/cursors/text_cursor_vertical.svg') 16 24, vertical-text;

  --zoom-in: url('/assets/cursors/zoom_in.svg') 16 16, zoom-in;
  --zoom-out: url('/assets/cursors/zoom_out.svg') 16 16, zoom-out;
}


:root {
  --box-shadow: 0 2px 8px 0 rgb(0 0 0 / 25%);
  --visible-focus: 4px solid var(--color-continuum-galaxite-6);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-roboto-mono), monospace;
  font-size: var(--font-size-xs);
  cursor: var(--default);
}

.demo-grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  padding-top: 20px;
}

.component-demo {
  .component-demo-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background: var(--color-base-vacuum-module);
    border: 1px solid var(--color-base-exo-4);

    .section-grid {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 20px;
    }

    .section-grid-column {
      display: flex;
      flex-flow: column wrap;
    }
  }
}

section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cu-alert-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  z-index: 9999;
}

.cu-alert-container > * {
  pointer-events: auto;
}

/* Позиции */
.cu-alert-container.pos-top-left {
  top: 32px;
  left: 32px;
  align-items: flex-start;
}

.cu-alert-container.pos-top {
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

.cu-alert-container.pos-top-right {
  top: 32px;
  right: 32px;
  align-items: flex-end;
}

.cu-alert-container.pos-bottom-left {
  bottom: 32px;
  left: 32px;
  align-items: flex-start;
}

.cu-alert-container.pos-bottom {
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

.cu-alert-container.pos-bottom-right {
  bottom: 32px;
  right: 32px;
  align-items: flex-end;
}

.cu-dropdown {
  position: absolute;
  background: var(--color-base-exo-1);
  border-radius: var(--border-radius-s);
  box-shadow: 0 2px 8px 0 rgb(0 0 0 / 25%);
  z-index: 1000;
  overflow: hidden;
  animation: cu-dropdown-appear 0.2s ease;
}